add chat room UI,

modify ucap-profile-user-list-item,
add group-expension-panel in ucap-profile-user-list-item.

angular.json

@@ -436,6 +436,44 @@
         }
       }
     },
+    "ucap-webmessenger-ui-room": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/ucap-webmessenger-ui-room",
+      "sourceRoot": "projects/ucap-webmessenger-ui-room/src",
+      "prefix": "ucap-room",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ucap-webmessenger-ui-room/tsconfig.lib.json",
+            "project": "projects/ucap-webmessenger-ui-room/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ucap-webmessenger-ui-room/src/test.ts",
+            "tsConfig": "projects/ucap-webmessenger-ui-room/tsconfig.spec.json",
+            "karmaConfig": "projects/ucap-webmessenger-ui-room/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ucap-webmessenger-ui-room/tsconfig.lib.json",
+              "projects/ucap-webmessenger-ui-room/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
     "ucap-webmessenger-ui-messenger": {
       "projectType": "library",
       "schematics": {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -1,5 +1,3 @@
-<div *ngFor="let room of roomList" (click)="onSelectedRoom(room)">
+<ucap-room-list-item *ngFor="let room of roomList" [roomInfo]="room" [roomUserInfo]="getRoomUserList(room)"
-  <div class="room-name">{{ getRoomName(room) }}</div>
+  (click)="onSelectedRoom(room)">
-  <div>{{ room.finalEventDate }}</div>
+</ucap-room-list-item>
-  <div>{{ room.finalEventMessage }}</div>
-</div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.ts

@@ -53,43 +53,18 @@ export class ChatComponent implements OnInit, OnDestroy {
     this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
   }
 
-  getRoomName(roomInfo: RoomInfo): string {
+  getRoomUserList(roomInfo: RoomInfo): RoomUserInfo[] | UserInfoShort[] {
-    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
-      return roomInfo.roomName;
-    }
-
     if (
       !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoList &&
       0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.length
     ) {
-      let roomName = '';
+      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoList;
-      this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.forEach(
-        (roomUserInfo, index) => {
-          if (0 === index) {
-            roomName = roomName.concat('', roomUserInfo.name);
-          } else {
-            roomName = roomName.concat(',', roomUserInfo.name);
     }
-        }
-      );
-      return roomName;
-    }
-
     if (
       !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList &&
       0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.length
     ) {
-      let roomName = '';
+      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList;
-      this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.forEach(
-        (roomUserInfo, index) => {
-          if (0 === index) {
-            roomName = roomName.concat('', roomUserInfo.name);
-          } else {
-            roomName = roomName.concat(',', roomUserInfo.name);
-          }
-        }
-      );
-      return roomName;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -16,6 +16,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
+import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
+
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 
@@ -37,6 +39,7 @@ import { DIALOGS } from './dialogs';
     MatToolbarModule,
     UCapUiModule,
     UCapUiChatModule,
+    UCapUiRoomModule,
     UCapUiGroupModule,
     UCapUiOrganizationModule
   ],

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html

@@ -1,32 +1,15 @@
-<div fxLayout="column">
+<div class="template" fxLayout="column">
-  <button
+  <button mat-raised-button color="accent" class="submit-button" aria-label="Login" (click)="onClickLogin()">
-    mat-raised-button
-    color="accent"
-    class="submit-button"
-    aria-label="Login"
-    (click)="onClickLogin()"
-  >
     Login
   </button>
 
   <h3>User-list-item</h3>
   <div>
-    <ucap-profile-user-list-item
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]="presence">
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-      [presence]="presence"
-    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item
+    <ucap-profile-user-list-item [userInfo]="userInfo">
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-    >
     </ucap-profile-user-list-item>
-    <ucap-profile-user-list-item
+    <ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]="true">
-      [userInfo]="userInfo"
-      [profileImageRoot]="profileImageRoot"
-      [checkable]="true"
-    >
     </ucap-profile-user-list-item>
   </div>
   <h3>Organization</h3>
@@ -36,13 +19,16 @@
         Tenant Search
       </div>
       <div>
-        <ucap-organization-tenant-search
+        <ucap-organization-tenant-search [companyList]="companyList" [companyCode]="companyCode">
-          [companyList]="companyList"
+        </ucap-organization-tenant-search>
-          [companyCode]="companyCode"
-        ></ucap-organization-tenant-search>
       </div>
     </div>
   </div>
+  <h3>Chat</h3>
+  <div>
+    <ucap-room-list-item [roomInfo]="roomInfo">
+    </ucap-room-list-item>
+  </div>
   <h3>Chat::MessageBox</h3>
   <div>
     <div>

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.scss

@@ -0,0 +1,4 @@
+div.template {
+  height: 100%;
+  overflow-y: auto;
+}

projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
-import { EmployeeType } from '@ucap-webmessenger/protocol-room';
+import {
+  EmployeeType,
+  RoomInfo,
+  RoomType
+} from '@ucap-webmessenger/protocol-room';
 import { RoleCode } from '@ucap-webmessenger/protocol-authentication';
 import {
   StatusBulkInfo,
@@ -10,6 +14,7 @@ import {
 import { StatusCode } from '@ucap-webmessenger/core';
 import { Router } from '@angular/router';
 import { Company } from '@ucap-webmessenger/api-external';
+import { EventType } from '@ucap-webmessenger/protocol-event';
 
 @Component({
   selector: 'app-template.page',
@@ -17,7 +22,7 @@ import { Company } from '@ucap-webmessenger/api-external';
   styleUrls: ['./template.page.component.scss']
 })
 export class TemplatePageComponent implements OnInit {
-  profileImageRoot: string = 'http://27.122.224.170:8011/ProfileImage';
+  profileImageRoot = 'http://27.122.224.170:8011/ProfileImage';
 
   userInfo: UserInfo = buddyData;
 
@@ -27,6 +32,8 @@ export class TemplatePageComponent implements OnInit {
 
   companyCode: string = 'GUC006';
 
+  roomInfo: RoomInfo = roomInfo;
+
   constructor(private router: Router) {}
 
   ngOnInit() {}
@@ -90,6 +97,22 @@ export const buddyData: UserInfo = {
   nickName: '채책임(닉)'
 };
 
+const roomInfo: RoomInfo = {
+  roomSeq: '2530',
+  roomType: RoomType.Single,
+  roomName: ' ',
+  finalEventType: EventType.Character,
+  finalEventMessage: '비밀 대화방입니다',
+  finalEventDate: '2019-09-30 13:57:06',
+  joinUserCount: 2,
+  noReadCnt: 0,
+  isAlarm: true,
+  isJoinRoom: true,
+  expiredFileStdSeq: 0,
+  isTimeRoom: true,
+  timeRoomInterval: 5
+};
+
 const companyList: Company[] = [
   {
     companyCode: 'GUC002',

projects/ucap-webmessenger-app/src/app/pages/template/template.page.module.ts

@@ -6,6 +6,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
 
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
+import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
 import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
@@ -21,6 +22,7 @@ import { COMPONENTS, MET_MODULES } from './components';
     FlexLayoutModule,
     MatButtonModule,
     UCapUiChatModule,
+    UCapUiRoomModule,
     UCapUiGroupModule,
     UCapUiOrganizationModule,
     UCapUiProfileModule,

projects/ucap-webmessenger-protocol-sync/src/lib/protocols/room.ts

@@ -88,7 +88,7 @@ export const decodeRoomData: ProtocolDecoder<RoomData> = (
         isJoinRoom: info[9] === 'Y' ? true : false,
         expiredFileStdSeq: Number(info[10]),
         isTimeRoom: info[11] === 'Y' ? true : false,
-        timeRoomInterval: info[11] !== 'Y' ? 0 : info[12] || 0
+        timeRoomInterval: info[11] !== 'Y' ? 0 : Number(info[12]) || 0
       });
     }
   }

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,44 +1,22 @@
 <mat-accordion #groupAccordion="matAccordion" [multi]="true">
+  <mat-expansion-panel *ngIf="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title> 즐겨찾기 </mat-panel-title>
+      <mat-panel-description> </mat-panel-description>
+    </mat-expansion-panel-header>
+  </mat-expansion-panel>
+
   <mat-expansion-panel *ngFor="let groupBuddy of groupBuddyList">
     <mat-expansion-panel-header>
       <mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
       <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <button
+    <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
-      mat-button
+      (click)="onClickBuddy(userInfo)">
-      class="contact"
+    </ucap-profile-user-list-item>
-      *ngFor="let buddy of groupBuddy.buddyList"
+    <!-- <ucap-profile-user-list-item *ngFor="let userInfo of groupBuddy.buddyList" [userInfo]="userInfo"
-      (click)="onClickBuddy(buddy)"
+      [presence]="presence">
-      [@animate]="{ value: '*', params: { y: '100%' } }"
+    </ucap-profile-user-list-item> -->
-    >
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <div
-          class="avatar-wrapper"
-          fxFlex="0 1 auto"
-          fxLayoutAlign="center center"
-        >
-          <img class="avatar" />
-        </div>
-
-        <div fxLayout="row" fxFlex>
-          <div
-            class="pr-4"
-            fxFlex
-            fxLayout="column"
-            fxLayoutAlign="center start"
-          >
-            <div class="contact-name">{{ buddy.name }}</div>
-            <div class="contact-last-message">{{ buddy.name }}</div>
-          </div>
-
-          <div fxLayout="column" fxLayoutAlign="start end">
-            <div class="contact-last-message-time">
-              {{ buddy.name }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
   </mat-expansion-panel>
 </mat-accordion>

projects/ucap-webmessenger-ui-group/src/lib/ucap-ui-group.module.ts

@@ -8,6 +8,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 
 import { ExpansionPanelComponent } from './components/expansion-panel.component';
 import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
+import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
 
 const COMPONENTS = [ExpansionPanelComponent];
 const DIRECTIVES = [ExpansionPanelItemDirective];
@@ -16,6 +17,7 @@ const SERVICES = [];
 @NgModule({
   imports: [
     CommonModule,
+    UCapUiProfileModule,
     ReactiveFormsModule,
     FlexLayoutModule,
     MatExpansionModule

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -4,10 +4,8 @@
   <span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
   <dl class="item-default">
     <dt>
-      <img
+      <img class="thumbnail" [src]="profileImageRoot + userInfo.profileImageFile"
-        class="thumbnail"
+        onerror="this.src='assets/images/img_nophoto_50.png'" />
-        src="{{ profileImageRoot + userInfo.profileImageFile }}"
-      />
     </dt>
     <dd class="info">
       <div class="detail">
@@ -17,11 +15,10 @@
         </span>
         <span class="dept">
           {{ userInfo.deptName }}
-          가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
         </span>
       </div>
       <div class="msg-status">
-        {{ userInfo.intro }}상태메시지 상태메시지 상태메시지
+        {{ userInfo.intro }}
       </div>
     </dd>
   </dl>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
   UserInfoSS,
@@ -6,28 +6,47 @@ import {
   UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
 import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
+import { Store, select } from '@ngrx/store';
+import * as AppStore from '@app/store';
+import { Subscription } from 'rxjs';
+import { NGXLogger } from 'ngx-logger';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'ucap-profile-user-list-item',
   templateUrl: './user-list-item.component.html',
   styleUrls: ['./user-list-item.component.scss']
 })
-export class UserListItemComponent implements OnInit {
+export class UserListItemComponent implements OnInit, OnDestroy {
   @Input()
   userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
-
   @Input()
-  profileImageRoot: string;
+  profileImageRoot?: string;
-
   @Input()
   presence?: StatusBulkInfo | StatusInfo;
-
   @Input()
   checkable = false;
   @Input()
   compactable = false;
 
-  constructor() {}
+  private profileImageRootSubscription: Subscription;
 
-  ngOnInit() {}
+  constructor(private store: Store<any>, private logger: NGXLogger) {}
+
+  ngOnInit() {
+    this.profileImageRootSubscription = this.store
+      .pipe(
+        select(AppStore.SettingSelector.VersionInfoSelector.profileImageRoot),
+        tap(profileImageRoot => {
+          this.profileImageRoot = this.profileImageRoot || profileImageRoot;
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.profileImageRootSubscription) {
+      this.profileImageRootSubscription.unsubscribe();
+    }
+  }
 }

projects/ucap-webmessenger-ui-profile/src/public-api.ts

@@ -3,5 +3,6 @@
  */
 
 export * from './lib/components/list-item.component';
+export * from './lib/components/user-list-item.component';
 
 export * from './lib/ucap-ui-profile.module';

projects/ucap-webmessenger-ui-room/README.md

@@ -0,0 +1,24 @@
+# UcapWebmessengerUiChat
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.5.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-room` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-room`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-room` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-room` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ucap-webmessenger-ui-room`, go to the dist folder `cd dist/ucap-webmessenger-ui-room` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-room` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/ucap-webmessenger-ui-room/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ucap-webmessenger-ui-room'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/ucap-webmessenger-ui-room/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ucap-webmessenger-ui-room",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ucap-webmessenger-ui-room/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ucap-webmessenger/ui-room",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.2.5",
+    "@angular/core": "^8.2.5"
+  }
+}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -0,0 +1,5 @@
+<div>
+  <div class="room-name">{{ getRoomName(roomInfo) }}</div>
+  <div>{{ roomInfo.finalEventDate }}</div>
+  <div>{{ roomInfo.finalEventMessage }}</div>
+</div>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -0,0 +1,46 @@
+.profile {
+  white-space: normal;
+  text-align: left;
+  letter-spacing: 0.01em;
+  min-height: 88px;
+  border-bottom: 1px solid;
+  padding: 16px;
+  font-weight: 400;
+  border-radius: 0;
+
+  .avatar-wrapper {
+    .avatar {
+      margin-right: 16px;
+    }
+  }
+
+  .profile-name {
+    font-size: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .profile-last-message {
+    line-height: normal;
+    margin-top: 0;
+  }
+
+  .profile-last-message-time {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .profile-mood {
+    line-height: normal;
+    margin: 0;
+  }
+
+  .unread-message-count {
+    font-size: 12px;
+    border-radius: 50%;
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListItemComponent } from './list-item.component';
+
+describe('ListItemComponent', () => {
+  let component: ListItemComponent;
+  let fixture: ComponentFixture<ListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListItemComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  RoomInfo,
+  UserInfoShort,
+  UserInfo as RoomUserInfo
+} from '@ucap-webmessenger/protocol-room';
+import { NGXLogger } from 'ngx-logger';
+
+@Component({
+  selector: 'ucap-room-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.scss']
+})
+export class ListItemComponent implements OnInit {
+  @Input()
+  roomInfo: RoomInfo;
+
+  @Input()
+  roomUserInfo: RoomUserInfo[] | UserInfoShort[];
+
+  constructor(private logger: NGXLogger) {}
+
+  ngOnInit() {
+    // this.logger.debug(this.roomInfo);
+  }
+
+  getRoomName(roomInfo: RoomInfo): string {
+    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
+      return roomInfo.roomName;
+    }
+
+    if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
+      let roomName = '';
+      this.roomUserInfo.forEach((roomUserInfo, index) => {
+        if (0 === index) {
+          roomName = roomName.concat('', roomUserInfo.name);
+        } else {
+          roomName = roomName.concat(',', roomUserInfo.name);
+        }
+      });
+      return roomName;
+    }
+  }
+}

projects/ucap-webmessenger-ui-room/src/lib/ucap-ui-room.module.ts

@@ -0,0 +1,35 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { ListItemComponent } from './components/list-item.component';
+
+const COMPONENTS = [ListItemComponent];
+const SERVICES = [];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FlexLayoutModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule
+  ],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiRoomModule {
+  public static forRoot(): ModuleWithProviders<UCapUiRoomModule> {
+    return {
+      ngModule: UCapUiRoomModule,
+      providers: [...SERVICES]
+    };
+  }
+}

projects/ucap-webmessenger-ui-room/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ucap-webmessenger-ui-room
+ */
+
+export * from './lib/components/list-item.component';
+
+export * from './lib/ucap-ui-room.module';

projects/ucap-webmessenger-ui-room/src/test.ts

@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/ucap-webmessenger-ui-room/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/ucap-webmessenger-ui-room/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/ucap-webmessenger-ui-room/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ucapChat",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ucap-room",
+      "kebab-case"
+    ]
+  }
+}

tsconfig.json

@@ -39,6 +39,9 @@
       "@ucap-webmessenger/ui-chat": [
         "projects/ucap-webmessenger-ui-chat/src/public-api"
       ],
+      "@ucap-webmessenger/ui-room": [
+        "projects/ucap-webmessenger-ui-room/src/public-api"
+      ],
       "@ucap-webmessenger/ui-group": [
         "projects/ucap-webmessenger-ui-group/src/public-api"
       ],