Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger

angular.json

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

package-lock.json

@@ -10737,12 +10737,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "observable-profiler": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/observable-profiler/-/observable-profiler-0.1.1.tgz",
-      "integrity": "sha512-MhUzV7CqrnlKn69Okqx7IIH2nnKl+ZYAEekD4tnwAOTePtbQwR5+TLnHsHLl5zcYanMRDw9ff36vlRmv04fF7Q==",
-      "dev": true
-    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",

package.json

@@ -26,7 +26,8 @@
     "@angular/core": "~8.2.12",
     "electron-window-state": "^5.0.3",
     "fs-extra": "^8.1.0",
-    "rxjs": "^6.5.2"
+    "rxjs": "^6.5.2",
+    "tslib": "^1.10.0"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^8.2.0",

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -33,6 +33,7 @@
   width: 70px;
   flex-direction: row;
 }
+
 ::ng-deep .organization-side {
   flex-direction: column;
   height: 100%;
@@ -44,6 +45,7 @@
         flex-flow: column;
         height: 280px;
         padding-top: 10px;
+        border-bottom: none;
         .mat-tab-label {
           width: 100%;
           height: 80px;
@@ -92,11 +94,15 @@
     .mat-tab-label-content {
       .icon-item {
         transform: scale(1);
-        /*svg {
-          stroke: #ef4c73;
-          fill: #ef4c73;
-        }*/
       }
     }
   }
 }
+
+::ng-deep .ps {
+  .ps-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -14,6 +14,7 @@
 }
 
 .list-search {
+  position: relative;
   display: flex;
   flex-direction: row;
   height: 60px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -16,13 +16,6 @@
     }
   }
 }
-::ng-deep .ps {
-  .ps-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
 
 .search-result {
   height: calc(100% - 130px);

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss

@@ -10,3 +10,10 @@
     margin-left:auto;
   }
 }
+::ng-deep .mat-tab-labels {
+    display: flex;
+    width: 100%;
+    border-bottom: 2px solid #dddddd;
+    flex: 1 1 auto;
+    justify-content: space-around;
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" class="album-box">
+<div fxLayout="column" class="rightDrawer-albumbox">
   <div>
     <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
       <mat-tab label="Image"></mat-tab>
@@ -81,7 +81,7 @@
     </ng-container>
   </div>
   <div class="search-list">
-    <perfect-scrollbar>
+    <perfect-scrollbar class="album-scrollbar">
       <div
         *ngFor="let fileInfo of filteredList"
         class="img-item"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -13,18 +13,15 @@
   }
 }
 
-.album-box {
+::ng-deep .rightDrawer-albumbox {
   height: 100%;
   overflow: hidden;
-
+  .mat-tab-labels {
-  .search-list {
+    .mat-tab-label {
-    overflow: auto;
-  }
-}
-
-::ng-deep .mat-tab-label{
       width: 50%;
     }
+  }
+}
 
 .select-filebox{
   display:flex;
@@ -32,6 +29,7 @@
   margin:10px;
   padding:10px;
   border:1px solid #cccccc;
+  border-radius: 4px;
   .select-file{
     color: #212121;
     border-bottom: 1px dotted #dddddd;
@@ -66,6 +64,7 @@
   height: calc(100% - 450px);
   overflow-y: auto;
   flex-wrap: wrap;
+
   .img-item {
     cursor: pointer;
     margin-bottom:10px;
@@ -99,6 +98,14 @@
   }
 }
 
+::ng-deep .album-scrollbar{
+  .ps{
+    .ps-content{
+      display:flex;
+      flex-flow: wrap;
+    }
+  }
+}
 .preview-image,
 .preview-video{
   max-height: 140px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html

@@ -123,6 +123,7 @@
     </ng-container>
   </div>
   <div fxFlex="0 0 auto" class="table-box">
+    <perfect-scrollbar class="album-scrollbar">
       <table mat-table [dataSource]="dataSource" matSort>
         <ng-container matColumnDef="check">
           <th mat-header-cell *matHeaderCellDef>
@@ -173,6 +174,7 @@
           (click)="onClickRow(row)"
         ></tr>
       </table>
+      </perfect-scrollbar>
   </div>
   <div class="footer-fix">
     <mat-paginator

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -13,7 +13,7 @@
   }
 }
 
-.rightDrawer-filebox {
+::ng-deep .rightDrawer-filebox {
   width: 100%;
   height: calc(100% - 60px);
   .rightDrawer-tab {
@@ -23,16 +23,13 @@
   }
 }
 
-::ng-deep .mat-tab-label {
-  width: 50%;
-}
-
 .select-filebox {
   position: relative;
   display: flex;
   flex-flow: column;
   margin: 10px;
   border: 1px solid #cccccc;
+  border-radius: 4px;
   .select-flie {
     display: flex;
     flex-flow: row;
@@ -114,7 +111,7 @@
   }
 }
 .table-box {
-  height: calc(100% - 450px);
+  height: calc(100% - 440px);
   overflow-y: auto;
 }
 .mat-paginator-container {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss

@@ -1,3 +1,48 @@
-div.message-box {
+.list-search {
-  width: 600px;
+  display: flex;
+  flex-direction: row;
+  height: 60px;
+  align-items: center;
+  padding: 0;
+  font-size: 14px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+  .searchbox {
+    width: 100%;
+    height: 100%;
+  }
+}
+::ng-deep .searchbox {
+  .mat-form-field {
+    display: block;
+    .mat-form-field-wrapper {
+      padding: 0;
+      padding-bottom: 0 !important;
+      height: 100%;
+      .mat-form-field-flex {
+        height: 59px;
+        padding: 0 10px 0 20px;
+        align-items: center;
+        .mat-form-field-infix {
+          width: 90%;
+          font-size: 14px;
+          border: none;
+        }
+        .mat-form-field-suffix {
+          .mat-icon {
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-wrapper {
+      padding: 0;
+    }
+    .mat-form-field-underline {
+      bottom: 0;
+      background-color: unset !important;
+    }
+  }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

@@ -10,42 +10,42 @@
             <span class="mdi mdi-settings"></span>
             일반
           </ng-template>
-          하나
+          <ucap-settings-general></ucap-settings-general>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-lock"></span>
             개인정보취급방침
           </ng-template>
-          둘
+          <ucap-settings-privacy></ucap-settings-privacy>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-bell"></span>
             알림
           </ng-template>
-          셋
+          <ucap-settings-notification></ucap-settings-notification>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-headset"></span>
             장치
           </ng-template>
-          넷
+          <ucap-settings-device></ucap-settings-device>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-view-grid-plus"></span>
             사용권한
           </ng-template>
-          넷
+          <ucap-settings-permission></ucap-settings-permission>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-phone"></span>
             통화
           </ng-template>
-          넷
+          <ucap-settings-call></ucap-settings-call>
         </mat-tab>
       </mat-tab-group>
 

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

@@ -44,6 +44,7 @@ import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
 import { UCapUiProfileModule } from '@ucap-webmessenger/ui-profile';
 import { UCapUiGroupModule } from '@ucap-webmessenger/ui-group';
 import { UCapUiOrganizationModule } from '@ucap-webmessenger/ui-organization';
+import { UCapUiSettingsModule } from '@ucap-webmessenger/ui-settings';
 
 import { AppCommonLayoutModule } from '@app/layouts/common/common.layout.module';
 
@@ -91,6 +92,7 @@ import { DIALOGS } from './dialogs';
     UCapUiProfileModule,
     UCapUiGroupModule,
     UCapUiOrganizationModule,
+    UCapUiSettingsModule,
 
     AppCommonLayoutModule
   ],

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

@@ -0,0 +1,24 @@
+# UcapWebmessengerUiSettings
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.11.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ucap-webmessenger-ui-settings` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucap-webmessenger-ui-settings`.
+> Note: Don't forget to add `--project ucap-webmessenger-ui-settings` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ucap-webmessenger-ui-settings` 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-settings`, go to the dist folder `cd dist/ucap-webmessenger-ui-settings` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ucap-webmessenger-ui-settings` 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-settings/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-settings'),
+      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-settings/ng-package.json

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

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

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

projects/ucap-webmessenger-ui-settings/src/lib/components/call.component.html

@@ -0,0 +1 @@
+<div>일반</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/call.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/call.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-call',
+  templateUrl: './call.component.html',
+  styleUrls: ['./call.component.scss']
+})
+export class CallComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/device.component.html

@@ -0,0 +1 @@
+<div>일반</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/device.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/device.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-device',
+  templateUrl: './device.component.html',
+  styleUrls: ['./device.component.scss']
+})
+export class DeviceComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

@@ -0,0 +1 @@
+<div>일반</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-general',
+  templateUrl: './general.component.html',
+  styleUrls: ['./general.component.scss']
+})
+export class GeneralComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.html

@@ -0,0 +1 @@
+<div>일반</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss']
+})
+export class NotificationComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/permission.component.html

@@ -0,0 +1 @@
+<div>일반</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/permission.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/permission.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-permission',
+  templateUrl: './permission.component.html',
+  styleUrls: ['./permission.component.scss']
+})
+export class PermissionComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

projects/ucap-webmessenger-ui-settings/src/lib/components/privacy.component.html

@@ -0,0 +1 @@
+<div>개인정보취급방침</div>

projects/ucap-webmessenger-ui-settings/src/lib/components/privacy.component.spec.ts

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

projects/ucap-webmessenger-ui-settings/src/lib/components/privacy.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'ucap-settings-privacy',
+  templateUrl: './privacy.component.html',
+  styleUrls: ['./privacy.component.scss']
+})
+export class PrivacyComponent implements OnInit {
+  loginForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {}
+
+  onClickLogin() {}
+}

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

@@ -0,0 +1,36 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { CallComponent } from './components/call.component';
+import { DeviceComponent } from './components/device.component';
+import { GeneralComponent } from './components/general.component';
+import { NotificationComponent } from './components/notification.component';
+import { PermissionComponent } from './components/permission.component';
+import { PrivacyComponent } from './components/privacy.component';
+
+const COMPONENTS = [
+  CallComponent,
+  DeviceComponent,
+  GeneralComponent,
+  NotificationComponent,
+  PermissionComponent,
+  PrivacyComponent
+];
+const SERVICES = [];
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule, FlexLayoutModule],
+  exports: [...COMPONENTS],
+  declarations: [...COMPONENTS]
+})
+export class UCapUiSettingsModule {
+  public static forRoot(): ModuleWithProviders<UCapUiSettingsModule> {
+    return {
+      ngModule: UCapUiSettingsModule,
+      providers: [...SERVICES]
+    };
+  }
+}

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

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

projects/ucap-webmessenger-ui-settings/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-settings/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-settings/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-settings/tslint.json

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

tsconfig.json

@@ -56,6 +56,9 @@
       "@ucap-webmessenger/ui-profile": [
         "projects/ucap-webmessenger-ui-profile/src/public-api"
       ],
+      "@ucap-webmessenger/ui-settings": [
+        "projects/ucap-webmessenger-ui-settings/src/public-api"
+      ],
       "@ucap-webmessenger/protocol": [
         "projects/ucap-webmessenger-protocol/src/public-api"
       ],