@rtsee/ngx 0.0.25 → 0.0.26

package/dist/ngx/bundles/rtsee-ngx.umd.js

@@ -1,8 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/button'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/forms'), require('rxjs'), require('dayjs'), require('dayjs/plugin/relativeTime'), require('@rtsee/messenger'), require('ngx-autosize'), require('ngx-infinite-scroll'), require('@angular/material/icon'), require('@angular/material/select'), require('@angular/platform-browser/animations')) :
-    typeof define === 'function' && define.amd ? define('@rtsee/ngx', ['exports', '@angular/core', '@angular/material/button', '@angular/common', '@angular/material/form-field', '@angular/forms', 'rxjs', 'dayjs', 'dayjs/plugin/relativeTime', '@rtsee/messenger', 'ngx-autosize', 'ngx-infinite-scroll', '@angular/material/icon', '@angular/material/select', '@angular/platform-browser/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.rtsee = global.rtsee || {}, global.rtsee.ngx = {}), global.ng.core, global.ng.material.button, global.ng.common, global.ng.material.formField, global.ng.forms, global.rxjs, global.dayjs, global.relativeTime, global.messenger, global.i2$1, global.i3$1, global.ng.material.icon, global.ng.material.select, global.ng.platformBrowser.animations));
-}(this, (function (exports, i0, i1, i2, i3, i1$1, rxjs, dayjs, relativeTime, messenger, i2$1, i3$1, icon, select, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/button'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/forms'), require('rxjs'), require('@rtsee/messenger'), require('dayjs'), require('dayjs/plugin/relativeTime'), require('shave'), require('ngx-infinite-scroll'), require('ngx-autosize'), require('rxjs/operators'), require('@angular/material/icon'), require('@angular/material/select'), require('@angular/platform-browser/animations')) :
+    typeof define === 'function' && define.amd ? define('@rtsee/ngx', ['exports', '@angular/core', '@angular/material/button', '@angular/common', '@angular/material/form-field', '@angular/forms', 'rxjs', '@rtsee/messenger', 'dayjs', 'dayjs/plugin/relativeTime', 'shave', 'ngx-infinite-scroll', 'ngx-autosize', 'rxjs/operators', '@angular/material/icon', '@angular/material/select', '@angular/platform-browser/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.rtsee = global.rtsee || {}, global.rtsee.ngx = {}), global.ng.core, global.ng.material.button, global.ng.common, global.ng.material.formField, global.ng.forms, global.rxjs, global.messenger, global.dayjs, global.relativeTime, global.shave, global.i3$2, global.i2, global.rxjs.operators, global.ng.material.icon, global.ng.material.select, global.ng.platformBrowser.animations));
+}(this, (function (exports, i0, i1, i3, i3$1, i1$1, rxjs, messenger, dayjs, relativeTime, shave, i3$2, i2, operators, icon, select, animations) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,13 +28,14 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var dayjs__namespace = /*#__PURE__*/_interopNamespace(dayjs);
     var relativeTime__namespace = /*#__PURE__*/_interopNamespace(relativeTime);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var shave__default = /*#__PURE__*/_interopDefaultLegacy(shave);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
     var NgxService = /** @class */ (function () {
         function NgxService() {
@@ -60,7 +63,7 @@
         return RTSeeControlsComponent;
     }());
     RTSeeControlsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeControlsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RTSeeControlsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n  <div class=\"rtsee-bottom-panel\">\n    <div class=\"mic rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"rtsee.microphone\"\n              type=\"button\"\n              (click)=\"this.rtsee.disableMicrophone()\"\n      >\n        <span class=\"material-icons-outlined\">mic_none</span>\n      </button>\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"!rtsee.microphone\"\n              type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n      >\n        <span class=\"material-icons-outlined\">mic_off</span>\n      </button>\n    </div>\n\n    <div class=\"video-camera rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"rtsee.camera\"\n              type=\"button\"\n              (click)=\"rtsee.disableCamera()\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n      </button>\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"!rtsee.camera\"\n              type=\"button\"\n              (click)=\"rtsee.enableCamera()\"\n      >\n        <span class=\"material-icons-outlined\">videocam_off</span>\n      </button>\n    </div>\n    <div class=\"present rtsee-buttons-container\" [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"onPresentClicked()\"\n      >\n        <span class=\"material-icons-outlined\">present_to_all</span>\n      </button>\n    </div>\n    <div class=\"call-end rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"rtsee.end()\"\n      >\n        <span class=\"material-icons-outlined\">call_end</span>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-controls{display:inline-block;height:100%}.rtsee-controls .rtsee-buttons-container{height:35px;width:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 6px;cursor:pointer}.rtsee-controls .rtsee-buttons-container:last-child{margin-right:0}.rtsee-controls .rtsee-buttons-container:first-child{margin-left:0}.rtsee-controls .rtsee-buttons-container .mat-icon-button{background-color:#333;color:#fff}.rtsee-controls .rtsee-buttons-container.call-end .mat-icon-button{background-color:red}.rtsee-controls .rtsee-buttons-container.rtsee-present-button-container .mat-icon-button{background-color:#090}.rtsee-controls .full-screen{align-self:flex-end;padding:12px;cursor:pointer}.rtsee-controls .rtsee-bottom-panel{padding:12px;display:flex;justify-content:center;align-items:center;border-radius:45px;background-color:rgba(0,0,0,.7)}.rtsee-controls.rtsee-full-screen-controls .rtsee-buttons-container{height:60px;width:60px}"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatSuffix, selector: "[matSuffix]" }] });
+    RTSeeControlsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n  <div class=\"rtsee-bottom-panel\">\n    <div class=\"mic rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"rtsee.microphone\"\n              type=\"button\"\n              (click)=\"this.rtsee.disableMicrophone()\"\n      >\n        <span class=\"material-icons-outlined\">mic_none</span>\n      </button>\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"!rtsee.microphone\"\n              type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n      >\n        <span class=\"material-icons-outlined\">mic_off</span>\n      </button>\n    </div>\n\n    <div class=\"video-camera rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"rtsee.camera\"\n              type=\"button\"\n              (click)=\"rtsee.disableCamera()\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n      </button>\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              *ngIf=\"!rtsee.camera\"\n              type=\"button\"\n              (click)=\"rtsee.enableCamera()\"\n      >\n        <span class=\"material-icons-outlined\">videocam_off</span>\n      </button>\n    </div>\n    <div class=\"present rtsee-buttons-container\" [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"onPresentClicked()\"\n      >\n        <span class=\"material-icons-outlined\">present_to_all</span>\n      </button>\n    </div>\n    <div class=\"call-end rtsee-buttons-container\">\n      <button mat-icon-button matSuffix\n              class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"rtsee.end()\"\n      >\n        <span class=\"material-icons-outlined\">call_end</span>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-controls{display:inline-block;height:100%}.rtsee-controls .rtsee-buttons-container{height:35px;width:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 6px;cursor:pointer}.rtsee-controls .rtsee-buttons-container:last-child{margin-right:0}.rtsee-controls .rtsee-buttons-container:first-child{margin-left:0}.rtsee-controls .rtsee-buttons-container .mat-icon-button{background-color:#333;color:#fff}.rtsee-controls .rtsee-buttons-container.call-end .mat-icon-button{background-color:red}.rtsee-controls .rtsee-buttons-container.rtsee-present-button-container .mat-icon-button{background-color:#090}.rtsee-controls .full-screen{align-self:flex-end;padding:12px;cursor:pointer}.rtsee-controls .rtsee-bottom-panel{padding:12px;display:flex;justify-content:center;align-items:center;border-radius:45px;background-color:rgba(0,0,0,.7)}.rtsee-controls.rtsee-full-screen-controls .rtsee-buttons-container{height:60px;width:60px}"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatSuffix, selector: "[matSuffix]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeControlsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -99,7 +102,7 @@
         return RtseeSettingsComponent;
     }());
     RtseeSettingsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeSettingsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RtseeSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices\">\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n      <select class=\"rtsee-select\" id=\"audio-input\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.audioInputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioInput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n      <select class=\"rtsee-select\" id=\"audio-output\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioOutput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n      <select class=\"rtsee-select\" id=\"video-input\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\" (click)=\"setVideoInput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}"], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    RtseeSettingsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0__namespace, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices\">\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n      <select class=\"rtsee-select\" id=\"audio-input\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.audioInputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioInput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n      <select class=\"rtsee-select\" id=\"audio-output\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" (click)=\"setAudioOutput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n      <select class=\"rtsee-select\" id=\"video-input\" (click)=\"refreshSelectOptions()\">\n        <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\" (click)=\"setVideoInput(device.deviceId)\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}"], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeSettingsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -184,7 +187,7 @@
         return RtseePeerComponent;
     }());
     RtseePeerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseePeerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RtseePeerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer" }, viewQueries: [{ propertyName: "audioOutput", first: true, predicate: ["audioOutput"], descendants: true }, { propertyName: "videoOutput", first: true, predicate: ["videoOutput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera\n}\">\n  <div class=\"rtsee-peer-content\">\n    <div class=\"rtsee-peer-photo\" *ngIf=\"!peer.camera\">\n      <div class=\"rtsee-peer-photo-wrapper\">\n        <div  *ngIf=\"peer.imageUrl\"\n              [style.background-image]=\"'url(' + peer.imageUrl + ')'\"\n              class=\"rtsee-peer-photo-image\"\n        ></div>\n        <img *ngIf=\"!peer.imageUrl\" [src]=\"\" alt=\"peer_photo\" class=\"rtsee-peer-photo-image\">\n      </div>\n      <div class=\"rtsee-peer-info\">\n        <p class=\"rtsee-peer-name\" *ngIf=\"peer.name\">{{peer.name}}</p>\n      </div>\n    </div>\n      <video #videoOutput\n             class=\"rtsee-peer-video\"\n             [autoplay]=\"true\"\n             [srcObject]=\"peer.remoteVideoStream\"\n             playsinline=\"true\"\n      >\n      </video>\n    <div class=\"rtsee-peer-soundbar\">\n      <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-peer{height:100%;width:100%;overflow:hidden}.rtsee-peer .rtsee-peer-content{height:100%;text-align:center;background-color:#404040;border-radius:4px}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper{display:inline-block;height:120px;width:120px;border-radius:50%;position:relative;border:0 solid #fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper .rtsee-peer-photo-image{border:0 solid #fff;height:100%;left:0;background-size:cover;border-radius:50%}.rtsee-peer .rtsee-peer-content .rtsee-peer-info{color:#fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-info .rtsee-peer-name{font-family:monospace;padding:8px 0 0;margin-top:-8px}.rtsee-peer .rtsee-peer-content .rtsee-peer-soundbar{position:absolute;right:16px;bottom:16px;background:#404040;padding:7px 6px 8px;border-radius:50%;border:1px solid}.rtsee-peer .rtsee-peer-video{height:100%;max-width:100%}.rtsee-peer.rtsee-peer-video-disabled .rtsee-peer-video{position:absolute;left:-3000px}"], components: [{ type: RtseeSoundbarComponent, selector: "ngx-rtsee-soundbar", inputs: ["peer"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    RtseePeerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: { peer: "peer" }, viewQueries: [{ propertyName: "audioOutput", first: true, predicate: ["audioOutput"], descendants: true }, { propertyName: "videoOutput", first: true, predicate: ["videoOutput"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera\n}\">\n  <div class=\"rtsee-peer-content\">\n    <div class=\"rtsee-peer-photo\" *ngIf=\"!peer.camera\">\n      <div class=\"rtsee-peer-photo-wrapper\">\n        <div  *ngIf=\"peer.imageUrl\"\n              [style.background-image]=\"'url(' + peer.imageUrl + ')'\"\n              class=\"rtsee-peer-photo-image\"\n        ></div>\n        <img *ngIf=\"!peer.imageUrl\" [src]=\"\" alt=\"peer_photo\" class=\"rtsee-peer-photo-image\">\n      </div>\n      <div class=\"rtsee-peer-info\">\n        <p class=\"rtsee-peer-name\" *ngIf=\"peer.name\">{{peer.name}}</p>\n      </div>\n    </div>\n      <video #videoOutput\n             class=\"rtsee-peer-video\"\n             [autoplay]=\"true\"\n             [srcObject]=\"peer.remoteVideoStream\"\n             playsinline=\"true\"\n      >\n      </video>\n    <div class=\"rtsee-peer-soundbar\">\n      <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-peer{height:100%;width:100%;overflow:hidden}.rtsee-peer .rtsee-peer-content{height:100%;text-align:center;background-color:#404040;border-radius:4px}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper{display:inline-block;height:120px;width:120px;border-radius:50%;position:relative;border:0 solid #fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-photo .rtsee-peer-photo-wrapper .rtsee-peer-photo-image{border:0 solid #fff;height:100%;left:0;background-size:cover;border-radius:50%}.rtsee-peer .rtsee-peer-content .rtsee-peer-info{color:#fff}.rtsee-peer .rtsee-peer-content .rtsee-peer-info .rtsee-peer-name{font-family:monospace;padding:8px 0 0;margin-top:-8px}.rtsee-peer .rtsee-peer-content .rtsee-peer-soundbar{position:absolute;right:16px;bottom:16px;background:#404040;padding:7px 6px 8px;border-radius:50%;border:1px solid}.rtsee-peer .rtsee-peer-video{height:100%;max-width:100%}.rtsee-peer.rtsee-peer-video-disabled .rtsee-peer-video{position:absolute;left:-3000px}"], components: [{ type: RtseeSoundbarComponent, selector: "ngx-rtsee-soundbar", inputs: ["peer"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseePeerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -216,7 +219,7 @@
         return RTSeeComponent;
     }());
     RTSeeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RTSeeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0__namespace, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n    <video class=\"rtsee-local-video\"\n           [autoplay]=\"true\"\n           [muted]=\"true\"\n           [srcObject]=\"rtSee.localStream\"\n           playsinline=\"true\"\n    ></video>\n  </div>\n  <div class=\"rtsee-window-controls\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleFullScreenMode()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">open_in_full</span>\n    </button>\n  </div>\n  <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-close-settings-button\"\n    >\n      <span class=\"material-icons-outlined\">close</span>\n    </button>\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n  </div>\n  <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n    <video [autoplay]=\"true\"\n           [muted]=\"true\"\n           [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n           playsinline=\"true\"\n           class=\"rtsee-screen-share-video\"\n    ></video>\n  </div>\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    <div class=\"rtsee-peer-wrapper\"\n         *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n    >\n      <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n    </div>\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", styles: [".rtsee-shell{position:fixed;z-index:10;right:16px;bottom:16px;background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:rgba(0,0,0,.7);color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;bottom:0;right:0;left:0;top:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:50%;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:hsla(0,0%,96%,.1) radial-gradient(circle,transparent 1%,hsla(0,0%,96%,.1) 0) 50%/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatSuffix, selector: "[matSuffix]" }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    RTSeeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RTSeeComponent, selector: "ngx-rtsee", inputs: { rtSee: "rtSee" }, ngImport: i0__namespace, template: "<div class=\"rtsee-shell\" [ngClass]=\"{\n'rtsee-shell-expanded': rtSee.uiControls.isExpanded || fullScreenModeEnabled,\n'rtsee-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  <div class=\"rtsee-local-peer\" *ngIf=\"rtSee.localStream && rtSee.camera\">\n    <video class=\"rtsee-local-video\"\n           [autoplay]=\"true\"\n           [muted]=\"true\"\n           [srcObject]=\"rtSee.localStream\"\n           playsinline=\"true\"\n    ></video>\n  </div>\n  <div class=\"rtsee-window-controls\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleFullScreenMode()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">open_in_full</span>\n    </button>\n  </div>\n  <div class=\"rtsee-settings-container\" *ngIf=\"settingsViewEnabled\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-close-settings-button\"\n    >\n      <span class=\"material-icons-outlined\">close</span>\n    </button>\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-settings>\n  </div>\n  <div class=\"rtsee-screen-share\" *ngIf=\"rtSee.screenSharePeer\" >\n    <video [autoplay]=\"true\"\n           [muted]=\"true\"\n           [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n           playsinline=\"true\"\n           class=\"rtsee-screen-share-video\"\n    ></video>\n  </div>\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    <div class=\"rtsee-peer-wrapper\"\n         *ngFor=\"let peer of rtSee.rtcPeerConnections.connections\"\n    >\n      <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n    </div>\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"fullScreenModeEnabled\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", styles: [".rtsee-shell{position:fixed;z-index:10;right:16px;bottom:16px;background-color:#333;width:100%;max-width:320px;height:240px;overflow:hidden;border-radius:8px}.rtsee-shell:hover .rtsee-controls-wrapper{bottom:8px}.rtsee-shell:hover .rtsee-window-controls{top:8px}.rtsee-shell .rtsee-local-peer{position:absolute;top:8px;left:8px;width:80px;height:60px;text-align:center}.rtsee-shell .rtsee-local-peer .rtsee-local-video{height:100%;max-width:100%;border-radius:8px}.rtsee-shell .rtsee-screen-share{height:100%}.rtsee-shell .rtsee-screen-share .rtsee-screen-share-video{width:100%;height:calc(100% - 50px)}.rtsee-shell .rtsee-peers{height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper{padding:8px;box-sizing:border-box;height:100%}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer{position:relative}.rtsee-shell .rtsee-peers .rtsee-peer-wrapper .rtsee-peer ::ng-deep .rtsee-peer-video{border-radius:8px}.rtsee-shell .rtsee-controls-wrapper{height:60px;width:100%;position:absolute;left:0;bottom:-60px;transition:bottom .1s;text-align:center}.rtsee-shell .rtsee-window-controls{position:absolute;top:-60px;right:8px;transition:top .1s;z-index:4}.rtsee-shell .rtsee-window-controls .rtsee-window-controls-button{margin-left:8px;background-color:rgba(0,0,0,.7);color:#fff}.rtsee-shell .rtsee-settings-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;z-index:4}.rtsee-shell.rtsee-shell-no-companions .rtsee-local-peer{box-sizing:border-box;padding:8px;height:100%;width:100%;top:0;bottom:0;left:0}.rtsee-shell .rtsee-close-settings-button{position:absolute;right:25px;top:5px;width:30px;height:30px;line-height:30px}.rtsee-shell.rtsee-shell-expanded{position:absolute;border-radius:0;max-width:unset;height:unset;width:unset;bottom:0;right:0;left:0;top:0}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-controls-wrapper{bottom:16px}.rtsee-shell.rtsee-shell-expanded:hover .rtsee-window-controls{top:16px;right:16px}.rtsee-shell.rtsee-shell-expanded .rtsee-local-peer{top:unset;left:unset;width:211.2px;height:158.4px;bottom:16px;right:16px;padding:0;z-index:5}.rtsee-shell.rtsee-shell-expanded .rtsee-peers{width:100%;height:100%;display:table;table-layout:fixed}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper{display:table-cell;vertical-align:middle}.rtsee-shell.rtsee-shell-expanded .rtsee-peers .rtsee-peer-wrapper ::ng-deep .rtsee-peer-video{border-radius:0}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper{width:100%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-one .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper{width:50%;height:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-three-grid .rtsee-peer-wrapper ::ng-deep .rtsee-peer{height:70%;position:relative}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-peers-six-grid .rtsee-peer-wrapper{width:33.3%;height:50%;float:left}.rtsee-shell.rtsee-shell-expanded .rtsee-peers.rtsee-shell-no-companions .rtsee-local-peer{height:100%;max-width:100%}.rtsee-shell.rtsee-shell-expanded .rtsee-controls-wrapper{height:84px;bottom:-84px}::ng-deep .rtsee-ripple-button{background-position:50%;transition:background .2s;outline:none}::ng-deep .rtsee-ripple-button:hover{background:hsla(0,0%,96%,.1) radial-gradient(circle,transparent 1%,hsla(0,0%,96%,.1) 0) 50%/15000%}::ng-deep .rtsee-ripple-button:active{background-size:100%;transition:background 0s}::ng-deep .rtsee-select{padding:8px;border-radius:4px;width:100%;outline:none}::ng-deep .material-icons-outlined{font-size:18px}::ng-deep .rtsee-shell.rtsee-shell-expanded .material-icons-outlined{font-size:24px}::ng-deep .rtsee-shell.rtsee-shell-expanded .rtsee-ripple-button{height:60px;width:60px;line-height:60px}"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -243,28 +246,61 @@
                     }]
             }] });
 
-    var MessengerHeaderComponent = /** @class */ (function () {
-        function MessengerHeaderComponent(defaultImagesService) {
-            this.defaultImagesService = defaultImagesService;
+    var ProfileComponent = /** @class */ (function () {
+        function ProfileComponent() {
         }
-        MessengerHeaderComponent.prototype.call = function () {
+        ProfileComponent.prototype.call = function () {
             if (!this.messenger.openedChat) {
                 return;
             }
             void this.messenger.initializeVideoCall(this.messenger.openedChat);
         };
+        ProfileComponent.prototype.videoCall = function () {
+            if (!this.messenger.openedChat) {
+                return;
+            }
+            void this.messenger.initializeVideoCall(this.messenger.openedChat);
+        };
+        return ProfileComponent;
+    }());
+    ProfileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ProfileComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProfileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ProfileComponent, selector: "rtsee-profile", inputs: { messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-profile\">\n  <ul class=\"rtsee-messenger-profile-controls\">\n    <li class=\"rtsee-messenger-profile-control\">\n      <button (click)=\"call()\" class=\"rtsee-messenger-profile-control-button\">\n        <span class=\"rtsee-messenger-profile-control-button-icon material-icons-outlined\">call</span>\n        <span class=\"rtsee-messenger-profile-control-button-label\">call</span>\n      </button>\n    </li>\n    <li class=\"rtsee-messenger-profile-control\">\n      <button (click)=\"videoCall()\" class=\"rtsee-messenger-profile-control-button\">\n        <span class=\"rtsee-messenger-profile-control-button-icon material-icons-outlined\">videocam</span>\n        <span class=\"rtsee-messenger-profile-control-button-label\">video</span>\n      </button>\n    </li>\n    <li class=\"rtsee-messenger-profile-control\">\n      <button (click)=\"videoCall()\" class=\"rtsee-messenger-profile-control-button\">\n        <span class=\"rtsee-messenger-profile-control-button-icon material-icons-outlined\">videocam</span>\n        <span class=\"rtsee-messenger-profile-control-button-label\">person</span>\n      </button>\n    </li>\n  </ul>\n</div>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ProfileComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-profile',
+                        templateUrl: './profile.component.html',
+                    }]
+            }], propDecorators: { messenger: [{
+                    type: i0.Input
+                }] } });
+
+    var MessengerHeaderComponent = /** @class */ (function () {
+        function MessengerHeaderComponent(defaultImagesService) {
+            this.defaultImagesService = defaultImagesService;
+            this.expandToggled = new i0.EventEmitter();
+            this.isExpanded = false;
+            this.expandToggled.emit(this.isExpanded);
+        }
+        MessengerHeaderComponent.prototype.toggleExpand = function () {
+            this.isExpanded = !this.isExpanded;
+            this.expandToggled.emit(this.isExpanded);
+        };
         return MessengerHeaderComponent;
     }());
     MessengerHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessengerHeaderComponent, deps: [{ token: DefaultImagesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessengerHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerHeaderComponent, selector: "ngx-messenger-header", inputs: { messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{ 'rtsee-messenger-header-chat-opened': messenger.openedChat }\"\n>\n  <div *ngIf=\"!messenger.openedChat\" class=\"rtsee-messenger-profile-image\">\n    <img *ngIf=\"messenger.myPeer?.imageUrl\" [src]=\"messenger.myPeer.imageUrl\">\n    <img *ngIf=\"!messenger.myPeer?.imageUrl\" [src]=\"defaultImagesService.PROFILE\">\n  </div>\n\n  <button class=\"rtsee-messenger-close-chat\"\n          *ngIf=\"messenger.openedChat\"\n          (click)=\"messenger.closeChat()\"\n  >\n    <span>&#8592;</span>\n    <span *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n  </button>\n\n  <div *ngIf=\"messenger.openedChat\" class=\"rtsee-messenger-header-opened-chat-info\">\n    <div class=\"rtsee-messenger-profile-image\">\n      <img *ngIf=\"messenger.openedChat.imageUrl\" [src]=\"messenger.openedChat.imageUrl\">\n      <img *ngIf=\"!messenger.openedChat.imageUrl\" [src]=\"defaultImagesService.PROFILE\">\n    </div>\n    <p *ngIf=\"messenger.openedChat\"\n       class=\"rtsee-messenger-header-chat-title\"\n    >{{ messenger.openedChat.name }}</p>\n  </div>\n\n  <p *ngIf=\"!messenger.openedChat\"\n     class=\"rtsee-messenger-header-title\"\n  >Chats</p>\n\n  <button\n    *ngIf=\"messenger.openedChat\"\n    (click)=\"call()\"\n    class=\"rtsee-messenger-call-button\"\n  >Call</button>\n</div>\n", styles: [""], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    MessengerHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: { isExpanded: "isExpanded", messenger: "messenger" }, outputs: { expandToggled: "expandToggled" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{\n     'rtsee-messenger-header-chat-opened': messenger.openedChat,\n     'rtsee-messenger-header-expanded': isExpanded\n      }\"\n>\n  <div class=\"rtsee-messenger-profile-image-container \">\n    <div *ngIf=\"!messenger.openedChat\"\n         [style.background-image]=\"'url(' + messenger.myPeer?.imageUrl || defaultImagesService.PROFILE + ')'\"\n         class=\"rtsee-messenger-profile-image\">\n    </div>\n  </div>\n\n  <button class=\"rtsee-messenger-close-chat\"\n          *ngIf=\"messenger.openedChat\"\n          (click)=\"messenger.closeChat()\"\n  >\n    <span class=\"material-icons-outlined\">chevron_left</span>\n    <span *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n  </button>\n\n  <button class=\"rtsee-messenger-menu-toggle\"\n          *ngIf=\"!messenger.openedChat\"\n          (click)=\"messenger.openMainMenu(true)\"\n  >\n    <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">chat_bubble</span>\n  </button>\n  <div *ngIf=\"messenger.openedChat\"\n       [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': isExpanded}\"\n       class=\"rtsee-messenger-header-opened-chat-info\">\n    <div class=\"rtsee-messenger-profile-header-placeholder\">\n      <p *ngIf=\"messenger.openedChat\"\n         class=\"rtsee-messenger-header-chat-title\"\n      >{{ messenger.openedChat.name }}</p>\n      <div class=\"rtsee-messenger-profile-image-container\" (click)=\"toggleExpand()\">\n        <div class=\"rtsee-messenger-profile-image\"\n             [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n        ></div>\n      </div>\n    </div>\n    <div class=\"rtsee-messenger-profile-data-container\">\n      <rtsee-profile *ngIf=\"isExpanded\" [messenger]=\"messenger\"></rtsee-profile>\n    </div>\n  </div>\n\n  <p *ngIf=\"!messenger.openedChat\"\n     class=\"rtsee-messenger-header-title\"\n  >Chats</p>\n</div>\n", components: [{ type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessengerHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-messenger-header',
+                        selector: 'rtsee-messenger-header',
                         templateUrl: './messenger-header.component.html',
-                        styleUrls: ['./messenger-header.component.css'],
                     }]
-            }], ctorParameters: function () { return [{ type: DefaultImagesService }]; }, propDecorators: { messenger: [{
+            }], ctorParameters: function () { return [{ type: DefaultImagesService }]; }, propDecorators: { expandToggled: [{
+                    type: i0.Output
+                }], isExpanded: [{
+                    type: i0.Input
+                }], messenger: [{
                     type: i0.Input
                 }] } });
 
@@ -359,20 +395,93 @@
                     }]
             }] });
 
+    var PreloaderComponent = /** @class */ (function () {
+        function PreloaderComponent() {
+            this.viewBox = '0 0 100 100';
+            this.d = 'M 50 96 a 46 46 0 0 1 0 -92 46 46 0 0 1 0 92';
+            this.color = '#000000';
+            if (this.diameter) {
+                this.viewBox = "0 0 " + this.diameter + " " + this.diameter;
+                this.d = "M " + this.diameter / 2 + " " + this.diameter * 0.96 + " a " + this.diameter * 0.46 + " " + this.diameter * 0.46 + " 0 0 1 0 -" + this.diameter * 0.92 + " " + this.diameter * 0.46 + " " + this.diameter * 0.46 + " 0 0 1 0 " + this.diameter * 0.92;
+            }
+        }
+        PreloaderComponent.prototype.ngOnInit = function () {
+            //viewBox="0 0 100 100"
+            //d="M 50 96 a 46 46 0 0 1 0 -92 46 46 0 0 1 0 92"
+        };
+        return PreloaderComponent;
+    }());
+    PreloaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: PreloaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PreloaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: PreloaderComponent, selector: "rtsee-preloader", inputs: { diameter: "diameter", color: "color" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-preloader\">\n  <svg [style.max-width.px]=\"diameter\" #canvas [attr.viewBox]=\"viewBox\">\n    <path [attr.d]=\"d\" [attr.stroke]=\"color\"/>\n  </svg>\n</div>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: PreloaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-preloader',
+                        templateUrl: './preloader.component.html',
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { canvas: [{
+                    type: i0.ViewChild,
+                    args: ['canvas']
+                }], diameter: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }] } });
+
+    var MessageTimeAndStatusComponent = /** @class */ (function () {
+        function MessageTimeAndStatusComponent(timeFormatService) {
+            this.timeFormatService = timeFormatService;
+        }
+        return MessageTimeAndStatusComponent;
+    }());
+    MessageTimeAndStatusComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageTimeAndStatusComponent, deps: [{ token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageTimeAndStatusComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: { message: "message", hideStatus: "hideStatus" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-message-time-and-status\">\n  <span class=\"rtsee-messenger-message-time\">{{timeFormatService.formatTimeOrDate(message.createdAt)}}</span>\n  <span class=\"rtsee-messenger-message-status\" *ngIf=\"!hideStatus\">\n    <span *ngIf=\"message.status === 'pending'\"><rtsee-preloader [diameter]=\"5\"></rtsee-preloader></span>\n    <span *ngIf=\"message.status === 'sent'\" class=\"material-icons-outlined rtsee-message-sent-status\">check</span>\n    <span *ngIf=\"message.status === 'delivered'\" class=\"material-icons-outlined rtsee-message-delivered-status\">check</span>\n    <span *ngIf=\"message.status === 'seen'\" class=\"material-icons-outlined rtsee-message-seen-status\">check</span>\n  </span>\n</div>\n", components: [{ type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageTimeAndStatusComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-message-time-and-status',
+                        templateUrl: './message-time-and-status.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { message: [{
+                    type: i0.Input
+                }], hideStatus: [{
+                    type: i0.Input
+                }] } });
+
+    var ShaveDirective = /** @class */ (function () {
+        function ShaveDirective(elem) {
+            this.elem = elem;
+        }
+        ShaveDirective.prototype.ngAfterViewInit = function () {
+            var _a;
+            var height = (_a = this.elem.nativeElement) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+            shave__default['default'](this.elem.nativeElement, height);
+        };
+        return ShaveDirective;
+    }());
+    ShaveDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ShaveDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ShaveDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.2", type: ShaveDirective, selector: "[rtseeShave]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ShaveDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[rtseeShave]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+
     var ChatThumbnailComponent = /** @class */ (function () {
         function ChatThumbnailComponent(timeFormatService) {
             this.timeFormatService = timeFormatService;
+            this.RTSeeChatTypes = messenger.RTSeeChatTypes;
         }
         return ChatThumbnailComponent;
     }());
     ChatThumbnailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatThumbnailComponent, deps: [{ token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChatThumbnailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatThumbnailComponent, selector: "ngx-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChat(chat)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.imageUrl\" alt=\"chat-img\">\n  </div>\n  <div class=\"rtsee-chat-thumbnail-info\">\n    <p class=\"rtsee-chat-thumbnail-name\">{{ chat.name }} <span>{{ chat.unreadMessagesCount }}</span></p>\n    <p class=\"rtsee-chat-thumbnail-last-sender\">{{chat.getLastSenderName()}}</p>\n    <p class=\"rtsee-chat-thumbnail-last-message\" *ngIf=\"chat.messages.length\">\n      <span>{{chat.getLastSentMessageText()}}</span>\n      <span>{{chat.unreadMessagesCount}}</span>\n      <span>{{chat.getLastSentMessageStatus()}}</span>\n      <span>{{timeFormatService.formatTimeOrDate(chat.getLastSentMessageTime())}}</span>\n    </p>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ChatThumbnailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.chatImageUrl\" alt=\"chat-img\">\n  </div>\n  <div class=\"rtsee-chat-thumbnail-left\">\n    <div class=\"rtsee-chat-thumbnail-name\">\n      <span>{{ chat.chatName }}</span>\n      <div class=\"rtsee-chat-thumbnail-status\">\n        <rtsee-message-time-and-status [message]=\"chat\"></rtsee-message-time-and-status>\n      </div>\n    </div>\n    <div class=\"rtsee-chat-thumbnail-last-message\"\n         [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n         rtseeShave>\n      <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n            *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n      >{{chat.senderName}}</span>\n      <span class=\"rtsee-chat-thumbnail-last-message-text\"\n            *ngIf=\"chat.text\"\n      >{{chat.text}}</span>\n      <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n        <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus"] }], directives: [{ type: ShaveDirective, selector: "[rtseeShave]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatThumbnailComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-chat-thumbnail',
+                        selector: 'rtsee-chat-thumbnail',
                         templateUrl: './chat-thumbnail.component.html',
-                        styleUrls: ['./chat-thumbnail.component.css'],
                     }]
             }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
                     type: i0.Input
@@ -389,13 +498,12 @@
         return ChatsListComponent;
     }());
     ChatsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChatsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatsListComponent, selector: "ngx-chats-list", inputs: { messenger: "messenger", chats: "chats" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chats-list\">\n  <div class=\"rtsee-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <ngx-chat-thumbnail [chat]=\"chat\" [messenger]=\"messenger\"></ngx-chat-thumbnail>\n    <div class=\"rtsee-chat-separator\"></div>\n  </div>\n</div>\n", styles: [""], components: [{ type: ChatThumbnailComponent, selector: "ngx-chat-thumbnail", inputs: ["chat", "messenger"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    ChatsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: { messenger: "messenger", chats: "chats" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chats-list\">\n  <div class=\"rtsee-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n    <div class=\"rtsee-chat-thumbnail-separator\" *ngIf=\"!last\"></div>\n  </div>\n</div>\n", components: [{ type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: ["chat", "messenger"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatsListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-chats-list',
+                        selector: 'rtsee-chats-list',
                         templateUrl: './chats-list.component.html',
-                        styleUrls: ['./chats-list.component.css'],
                     }]
             }], propDecorators: { messenger: [{
                     type: i0.Input
@@ -441,7 +549,7 @@
         return CallWidgetComponent;
     }());
     CallWidgetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: CallWidgetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CallWidgetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: CallWidgetComponent, selector: "ngx-call-widget", inputs: { message: "message", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-call-widget\">\n  <p *ngIf=\"callerName\"> {{ callerName }} has started a call</p>\n  <p *ngIf=\"callerName === 'You'\"> You have started a call</p>\n  <p *ngIf=\"!callerName\"> The call has started</p>\n  <button (click)=\"joinCall()\">Join Call</button>\n</div>\n", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    CallWidgetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: CallWidgetComponent, selector: "ngx-call-widget", inputs: { message: "message", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-call-widget\">\n  <p *ngIf=\"callerName\"> {{ callerName }} has started a call</p>\n  <p *ngIf=\"callerName === 'You'\"> You have started a call</p>\n  <p *ngIf=\"!callerName\"> The call has started</p>\n  <button (click)=\"joinCall()\">Join Call</button>\n</div>\n", styles: [""], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: CallWidgetComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -455,13 +563,13 @@
                     type: i0.Input
                 }] } });
 
-    var WidgetsService = /** @class */ (function () {
-        function WidgetsService() {
+    var MessageWidgetsService = /** @class */ (function () {
+        function MessageWidgetsService() {
             this.widgetsMap = [
                 { name: 'rtsee-call', component: CallWidgetComponent },
             ];
         }
-        WidgetsService.prototype.getWidgetComponentByName = function (name) {
+        MessageWidgetsService.prototype.getWidgetComponentByName = function (name) {
             /* eslint-disable */
             var mapping = this.widgetsMap.find(function (e) { return e.name === name; });
             if (!mapping) {
@@ -470,11 +578,11 @@
             return mapping.component;
             /* eslint-enable */
         };
-        return WidgetsService;
+        return MessageWidgetsService;
     }());
-    WidgetsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: WidgetsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    WidgetsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: WidgetsService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: WidgetsService, decorators: [{
+    MessageWidgetsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageWidgetsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MessageWidgetsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageWidgetsService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageWidgetsService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root',
@@ -506,16 +614,15 @@
         };
         return MessageComponent;
     }());
-    MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: WidgetsService }, { token: i0__namespace.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessageComponent, selector: "ngx-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-message-container\"\n     [ngClass]=\"{'rtsee-message-from-me': message.from === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    <ng-template widgetHost></ng-template>\n    <p *ngIf=\"!message.widget\"\n       class=\"rtsee-messenger-message-text\"\n    >{{ message.text }}</p>\n    <div class=\"rtsee-messenger-message-info\">\n      <div class=\"rtsee-messenger-message-time\">\n        <p>{{ timeFormatService.toTime(message.createdAt) }}</p>\n      </div>\n      <div class=\"rtsee-messenger-message-status\" *ngIf=\"message.from === messenger.clientId\">\n        <span *ngIf=\"message.status === 'pending'\">pending</span>\n        <span *ngIf=\"message.status === 'sent'\">sent</span>\n        <span *ngIf=\"message.status === 'delivered'\">delivered</span>\n        <span *ngIf=\"message.status === 'seen'\">seen</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: WidgetDirective, selector: "[widgetHost]" }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: MessageWidgetsService }, { token: i0__namespace.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessageComponent, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    <ng-template *ngIf=\"message.widget\" widgetHost></ng-template>\n    <p *ngIf=\"!message.widget\"\n       class=\"rtsee-messenger-message-text\"\n    >{{ message.text }}</p>\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [hideStatus]=\"message.from !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", components: [{ type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: WidgetDirective, selector: "[widgetHost]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-message',
+                        selector: 'rtsee-message',
                         templateUrl: './message.component.html',
-                        styleUrls: ['./message.component.css'],
                     }]
-            }], ctorParameters: function () { return [{ type: WidgetsService }, { type: i0__namespace.ComponentFactoryResolver }, { type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
+            }], ctorParameters: function () { return [{ type: MessageWidgetsService }, { type: i0__namespace.ComponentFactoryResolver }, { type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
                     type: i0.Input
                 }], message: [{
                     type: i0.Input
@@ -531,16 +638,43 @@
     var MessagesListComponent = /** @class */ (function () {
         function MessagesListComponent(timeFormatService) {
             this.timeFormatService = timeFormatService;
+            this.bindScrollFunction = this.scrollToBottom.bind(this);
         }
-        MessagesListComponent.prototype.hasDateChanged = function (currentMessage, index) {
-            var previousMessage = this.chat.messages[index - 1];
-            if (!previousMessage) {
-                return true;
+        MessagesListComponent.prototype.ngOnInit = function () {
+            this.chat.on(messenger.RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        };
+        MessagesListComponent.prototype.ngAfterViewInit = function () {
+            this.scrollToBottom();
+        };
+        MessagesListComponent.prototype.onMessageSent = function () {
+            this.scrollToBottom();
+        };
+        MessagesListComponent.prototype.ngOnDestroy = function () {
+            this.chat.off(messenger.RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        };
+        MessagesListComponent.prototype.onScrolledToTop = function () {
+            if (this.chat.messagesLoadInProgress) {
+                return;
+            }
+            this.chat.loadRemoteMessages();
+        };
+        MessagesListComponent.prototype.onScroll = function () {
+            if (this.scrollContainer.nativeElement.scrollTop < 1) {
+                this.scrollContainer.nativeElement.scrollTop = 1;
             }
-            if (!previousMessage.createdAt || !currentMessage.createdAt) {
-                return false;
+        };
+        MessagesListComponent.prototype.scrollToBottom = function () {
+            var _a, _b;
+            if (!((_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.scrollHeight)) {
+                return;
+            }
+            try {
+                this.scrollContainer.nativeElement.scrollTop =
+                    this.scrollContainer.nativeElement.scrollHeight;
+            }
+            catch (err) {
+                console.log('Failed to Scroll');
             }
-            return (previousMessage.createdAt.getDay() !== currentMessage.createdAt.getDay());
         };
         MessagesListComponent.prototype.formatDate = function (message) {
             return this.timeFormatService.formatDate(message.createdAt);
@@ -548,18 +682,20 @@
         return MessagesListComponent;
     }());
     MessagesListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessagesListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessagesListComponent, selector: "ngx-messages-list", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-messages-list\">\n  <div class=\"rtsee-messenger-message-wrapper\" *ngFor=\"let message of chat.messages; let i = index;\">\n    <span *ngIf=\"hasDateChanged(message, i)\"\n    >{{formatDate(message)}}</span>\n    <ngx-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></ngx-message>\n  </div>\n</div>\n", styles: [""], components: [{ type: MessageComponent, selector: "ngx-message", inputs: ["chat", "message", "member", "messenger"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    MessagesListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n>\n  <div *ngFor=\"let message of chat.messages; let i = index;\"\n       [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n       class=\"rtsee-messenger-message-wrapper\"\n  >\n    <div *ngIf=\"message.hasDateChanged\" class=\"rtsee-messenger-message-date\">\n      <span>{{formatDate(message)}}</span>\n    </div>\n    <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n  </div>\n</div>\n", components: [{ type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }], directives: [{ type: i3__namespace$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessagesListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-messages-list',
+                        selector: 'rtsee-messages-list',
                         templateUrl: './messages-list.component.html',
-                        styleUrls: ['./messages-list.component.css'],
                     }]
             }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { chat: [{
                     type: i0.Input
                 }], messenger: [{
                     type: i0.Input
+                }], scrollContainer: [{
+                    type: i0.ViewChild,
+                    args: ['scrollBlock']
                 }] } });
 
     var ChatInputComponent = /** @class */ (function () {
@@ -582,13 +718,12 @@
         return ChatInputComponent;
     }());
     ChatInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChatInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatInputComponent, selector: "ngx-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\">\n      <textarea\n        placeholder=\"Type message...\"\n        type=\"text\"\n        formControlName=\"message\"\n        class=\"rtsee-chat-input-field\"\n        autosize\n        required\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\">\n    <span>Send</span>\n  </button>\n</div>\n", styles: [""], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$1.AutosizeDirective, selector: "[autosize]", inputs: ["onlyGrow", "useImportant", "minRows", "autosize", "maxRows"], outputs: ["resized"] }, { type: i1__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+    ChatInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\">\n      <textarea\n        placeholder=\"Type message...\"\n        type=\"text\"\n        formControlName=\"message\"\n        class=\"rtsee-chat-input-field\"\n        autosize\n        required\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\">\n    <span class=\"material-icons-outlined\">send</span>\n  </button>\n</div>\n", directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace.AutosizeDirective, selector: "[autosize]", inputs: ["onlyGrow", "useImportant", "minRows", "autosize", "maxRows"], outputs: ["resized"] }, { type: i1__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-chat-input',
+                        selector: 'rtsee-chat-input',
                         templateUrl: './chat-input.component.html',
-                        styleUrls: ['./chat-input.component.css'],
                     }]
             }], propDecorators: { messenger: [{
                     type: i0.Input
@@ -598,52 +733,127 @@
 
     var ChatComponent = /** @class */ (function () {
         function ChatComponent() {
-            this.bindScrollFunction = this.scrollToBottom.bind(this);
         }
-        ChatComponent.prototype.ngAfterViewInit = function () {
-            this.scrollToBottom();
-        };
-        ChatComponent.prototype.onMessageSent = function () {
-            this.scrollToBottom();
+        return ChatComponent;
+    }());
+    ChatComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChatComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatComponent, selector: "rtsee-chat", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-chat\">\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n  </div>\n</div>\n", components: [{ type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-chat',
+                        templateUrl: './chat.component.html',
+                    }]
+            }], propDecorators: { chat: [{
+                    type: i0.Input
+                }], messenger: [{
+                    type: i0.Input
+                }] } });
+
+    var MainMenuPanels;
+    (function (MainMenuPanels) {
+        MainMenuPanels["HOME"] = "home";
+        MainMenuPanels["CONTACTS_SELECT"] = "contacts-select";
+        MainMenuPanels["MANAGE_CHAT"] = "manage-chat";
+    })(MainMenuPanels || (MainMenuPanels = {}));
+    var DEFAULT_MAIN_MENU_STATE = MainMenuPanels.HOME;
+
+    var SearchComponent = /** @class */ (function () {
+        function SearchComponent() {
+            this.queryControl = new i1$1.FormControl();
+        }
+        SearchComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.queryCtrlSub = this.queryControl.valueChanges
+                .pipe(operators.debounceTime(200))
+                .subscribe(function (value) { return _this.search.onQueryChange(value); });
         };
-        ChatComponent.prototype.ngOnDestroy = function () {
-            this.chat.off(messenger.RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        SearchComponent.prototype.ngOnDestroy = function () {
+            if (this.queryCtrlSub) {
+                this.queryCtrlSub.unsubscribe();
+            }
         };
-        ChatComponent.prototype.ngOnInit = function () {
-            this.chat.on(messenger.RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        return SearchComponent;
+    }());
+    SearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: SearchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: SearchComponent, selector: "rtsee-search", inputs: { search: "search" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-search\">\n  <input type=\"text\"\n         [formControl]=\"queryControl\"\n         class=\"rtsee-messenger-search-input\"\n         placeholder=\"Search...\"/>\n</div>\n\n<div class=\"rtsee-messenger-search-results\">\n  <rtsee-preloader [diameter]=\"50\" *ngIf=\"search.searchInProgress\"></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\" class=\"rtsee-messenger-search-results-chat-wrapper\">\n      <p>{{chat.name}}</p>\n    </div>\n  </div>\n  <p>Messages</p>\n  <div class=\"rtsee-messenger-search-results-messages\">\n    <div *ngFor=\"let message of search.results.messages\" class=\"rtsee-messenger-search-results-message-wrapper\">\n      <p>{{message.chatName || message.senderName }}</p>\n    </div>\n  </div>\n</div>\n", components: [{ type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }], directives: [{ type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: SearchComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-search',
+                        templateUrl: './search.component.html',
+                    }]
+            }], propDecorators: { search: [{
+                    type: i0.Input
+                }] } });
+
+    var ManageChatComponent = /** @class */ (function () {
+        function ManageChatComponent() {
+        }
+        ManageChatComponent.prototype.onInviteContactsClicked = function () {
+            this.menuState.activePanel = MainMenuPanels.CONTACTS_SELECT;
         };
-        ChatComponent.prototype.onScroll = function () {
-            this.chat.loadRemoteMessages();
-            console.log('Melia Loh');
+        return ManageChatComponent;
+    }());
+    ManageChatComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ManageChatComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ManageChatComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ManageChatComponent, selector: "rtsee-manage-chat", inputs: { messenger: "messenger", menuState: "menuState" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-manage-chat\">\n  <p>We are going to manage chat here</p>\n  <button (click)=\"onInviteContactsClicked()\">Invite Contacts</button>\n</div>\n", styles: [""] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ManageChatComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-manage-chat',
+                        templateUrl: './manage-chat.component.html',
+                        styleUrls: ['./manage-chat.component.scss'],
+                    }]
+            }], propDecorators: { messenger: [{
+                    type: i0.Input
+                }], menuState: [{
+                    type: i0.Input
+                }] } });
+
+    var ContactsMultiselectComponent = /** @class */ (function () {
+        function ContactsMultiselectComponent() {
+        }
+        return ContactsMultiselectComponent;
+    }());
+    ContactsMultiselectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ContactsMultiselectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContactsMultiselectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ContactsMultiselectComponent, selector: "rtsee-contacts-multiselect", inputs: { menuState: "menuState", search: "search" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n", styles: [""], components: [{ type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ContactsMultiselectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-contacts-multiselect',
+                        templateUrl: './contacts-multiselect.component.html',
+                        styleUrls: ['./contacts-multiselect.component.scss'],
+                    }]
+            }], propDecorators: { menuState: [{
+                    type: i0.Input
+                }], search: [{
+                    type: i0.Input
+                }] } });
+
+    var MainMenuComponent = /** @class */ (function () {
+        function MainMenuComponent() {
+            this.MainMenuPanels = MainMenuPanels;
+            this.state = {
+                activePanel: DEFAULT_MAIN_MENU_STATE,
+            };
+        }
+        MainMenuComponent.prototype.onNewGroupClicked = function () {
+            this.state.activePanel = MainMenuPanels.CONTACTS_SELECT;
         };
-        ChatComponent.prototype.scrollToBottom = function () {
-            var _a, _b;
-            if (!((_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.scrollHeight)) {
-                return;
-            }
-            try {
-                this.scrollContainer.nativeElement.scrollTop =
-                    this.scrollContainer.nativeElement.scrollHeight;
-            }
-            catch (err) {
-                console.log('Failed to Scroll');
-            }
+        MainMenuComponent.prototype.onNewChannelClicked = function () {
+            this.state.activePanel = MainMenuPanels.MANAGE_CHAT;
         };
-        return ChatComponent;
+        return MainMenuComponent;
     }());
-    ChatComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChatComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: ChatComponent, selector: "ngx-chat", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-chat\">\n  <div #scrollBlock\n       class=\"rtsee-chat-body-container\"\n       infiniteScroll\n       [infiniteScrollUpDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolledUp)=\"onScroll()\"\n  >\n    <ngx-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></ngx-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <ngx-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></ngx-chat-input>\n  </div>\n</div>\n", styles: [""], components: [{ type: MessagesListComponent, selector: "ngx-messages-list", inputs: ["chat", "messenger"] }, { type: ChatInputComponent, selector: "ngx-chat-input", inputs: ["messenger", "chat"] }], directives: [{ type: i3__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: ChatComponent, decorators: [{
+    MainMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MainMenuComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MainMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MainMenuComponent, selector: "rtsee-main-menu", inputs: { search: "search", messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger-main-menu\">\n  <div class=\"rtsee-messenger-main-menu-home\" *ngIf=\"state.activePanel === MainMenuPanels.HOME\">\n    <ul class=\"rtsee-messenger-controls\">\n      <li>\n        <button (click)=\"onNewGroupClicked()\">\n          <span class=\"material-icons-outlined\">people</span>\n          <span>New Group</span>\n        </button>\n      </li>\n      <li>\n        <button (click)=\"onNewChannelClicked()\">\n          <span class=\"material-icons-outlined\">campaign</span>\n          <span>New Channel</span>\n        </button>\n      </li>\n    </ul>\n    <rtsee-search [search]=\"search\" ></rtsee-search>\n  </div>\n\n  <rtsee-manage-chat *ngIf=\"state.activePanel === MainMenuPanels.MANAGE_CHAT\"\n                     [messenger]=\"messenger\"\n                     [menuState]=\"state\"\n  ></rtsee-manage-chat>\n  <rtsee-contacts-multiselect [search]=\"search\"\n                              [menuState]=\"state\"\n                              *ngIf=\"state.activePanel === MainMenuPanels.CONTACTS_SELECT\"\n  ></rtsee-contacts-multiselect>\n</div>\n", components: [{ type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }, { type: ManageChatComponent, selector: "rtsee-manage-chat", inputs: ["messenger", "menuState"] }, { type: ContactsMultiselectComponent, selector: "rtsee-contacts-multiselect", inputs: ["menuState", "search"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MainMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-chat',
-                        templateUrl: './chat.component.html',
-                        styleUrls: ['./chat.component.css'],
+                        selector: 'rtsee-main-menu',
+                        templateUrl: './main-menu.component.html',
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { scrollContainer: [{
-                    type: i0.ViewChild,
-                    args: ['scrollBlock']
-                }], chat: [{
+            }], propDecorators: { search: [{
                     type: i0.Input
                 }], messenger: [{
                     type: i0.Input
@@ -651,28 +861,141 @@
 
     var MessengerComponent = /** @class */ (function () {
         function MessengerComponent() {
+            this.isHeaderExpanded = false;
         }
         MessengerComponent.prototype.onScroll = function () {
             this.messenger.loadChats();
         };
+        MessengerComponent.prototype.onHeaderExpandToggled = function (value) {
+            this.isHeaderExpanded = value;
+        };
         return MessengerComponent;
     }());
     MessengerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessengerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessengerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerComponent, selector: "ngx-messenger", inputs: { messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger\">\n  <div class=\"rtsee-messenger-header-container\">\n    <ngx-messenger-header [messenger]=\"messenger\"></ngx-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    <ngx-chats-list *ngIf=\"!messenger.openedChat\" [chats]=\"messenger.chats\" [messenger]=\"messenger\"></ngx-chats-list>\n    <ngx-chat *ngIf=\"messenger.openedChat\" [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></ngx-chat>\n    <p *ngIf=\"messenger.loadingChatsInProgress\">PRELOADER</p>\n  </div>\n</div>\n\n\n", styles: [""], components: [{ type: MessengerHeaderComponent, selector: "ngx-messenger-header", inputs: ["messenger"] }, { type: ChatsListComponent, selector: "ngx-chats-list", inputs: ["messenger", "chats"] }, { type: ChatComponent, selector: "ngx-chat", inputs: ["chat", "messenger"] }], directives: [{ type: i3__namespace$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    MessengerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: MessengerComponent, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0__namespace, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-main-menu-opened': messenger.mainMenuOpened,\n  'rtsee-messenger-header-expanded': isHeaderExpanded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\" (expandToggled)=\"onHeaderExpandToggled($event)\"></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    <rtsee-chats-list *ngIf=\"!messenger.openedChat\" [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    <rtsee-chat *ngIf=\"messenger.openedChat\" [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    <rtsee-preloader [diameter]=\"50\" *ngIf=\"messenger.loadingChatsInProgress\" ></rtsee-preloader>\n  </div>\n  <div class=\"rtsee-messenger-main-menu-container\">\n    <rtsee-main-menu\n      *ngIf=\"messenger.mainMenuOpened\"\n      [search]=\"messenger.search\"\n      [messenger]=\"messenger\"></rtsee-main-menu>\n  </div>\n  <div class=\"rtsee-messenger-overlay\" (click)=\"messenger.openMainMenu(false)\"></div>\n</div>\n\n\n", components: [{ type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["isExpanded", "messenger"], outputs: ["expandToggled"] }, { type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "messenger"] }, { type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { type: MainMenuComponent, selector: "rtsee-main-menu", inputs: ["search", "messenger"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: MessengerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-messenger',
+                        selector: 'rtsee-messenger',
                         templateUrl: './messenger.component.html',
-                        styleUrls: ['./messenger.component.scss'],
                     }]
-            }], propDecorators: { messenger: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { messenger: [{
+                    type: i0.Input
+                }] } });
+
+    var EventsWidgetsService = /** @class */ (function () {
+        function EventsWidgetsService() {
+            this.widgetsMap = [];
+        }
+        EventsWidgetsService.prototype.getWidgetComponentByName = function (name) {
+            /* eslint-disable */
+            var mapping = this.widgetsMap.find(function (e) { return e.name === name; });
+            if (!mapping) {
+                return null;
+            }
+            return mapping.component;
+            /* eslint-enable */
+        };
+        return EventsWidgetsService;
+    }());
+    EventsWidgetsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: EventsWidgetsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    EventsWidgetsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: EventsWidgetsService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: EventsWidgetsService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
+    var EventThumbnailComponent = /** @class */ (function () {
+        function EventThumbnailComponent(widgetsService, componentFactoryResolver, timeFormatService) {
+            this.widgetsService = widgetsService;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.timeFormatService = timeFormatService;
+        }
+        EventThumbnailComponent.prototype.ngOnInit = function () {
+            if (this.event.data) {
+                this.generateTooltip();
+            }
+        };
+        EventThumbnailComponent.prototype.generateTooltip = function () {
+            /* eslint-disable */
+            var tooltip = '';
+            if (typeof this.event.data !== 'object') {
+                return;
+            }
+            try {
+                for (var key in this.event.data) {
+                    if (this.event.data.hasOwnProperty(key)) {
+                        if (tooltip) {
+                            tooltip += '&#013;';
+                        }
+                        tooltip += key + ' -> ' + this.event.data[key];
+                    }
+                }
+                this.tooltip = tooltip;
+            }
+            catch (e) {
+                console.log('Failed to generate a tooltip');
+            }
+            /* eslint-enable */
+        };
+        EventThumbnailComponent.prototype.ngAfterViewInit = function () {
+            /* eslint-disable */
+            if (this.event.widget) {
+                var widget = this.widgetsService.getWidgetComponentByName(this.event.widget);
+                if (!widget) {
+                    return;
+                }
+                var viewContainerRef = this.widgetHost.viewContainerRef;
+                viewContainerRef.clear();
+                var componentToShow = this.componentFactoryResolver.resolveComponentFactory(widget);
+                var componentRef = viewContainerRef.createComponent(componentToShow);
+                componentRef.instance.event = this.event;
+                componentRef.instance.event = this.event;
+                componentRef.changeDetectorRef.detectChanges();
+            }
+            /* eslint-enable */
+        };
+        return EventThumbnailComponent;
+    }());
+    EventThumbnailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: EventThumbnailComponent, deps: [{ token: EventsWidgetsService }, { token: i0__namespace.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EventThumbnailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: { event: "event" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0__namespace, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  <ng-template *ngIf=\"event.widget\" widgetHost></ng-template>\n  <div *ngIf=\"!event.widget\" class=\"rtsee-events-dashboard-default-event-thumbnail\"\n       [ngClass]=\"{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}\"\n  >\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">{{event.name}}</div>\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n      <div *ngIf=\"event.data\" class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n           [title]=\"tooltip\"\n      >\n      <span class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n      >info</span>\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n        <span>{{ timeFormatService.toAgo(event.createdAt) }}</span>\n      </div>\n    </div>\n\n  </div>\n</div>\n", directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: WidgetDirective, selector: "[widgetHost]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: EventThumbnailComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-event-thumbnail',
+                        templateUrl: './event-thumbnail.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: EventsWidgetsService }, { type: i0__namespace.ComponentFactoryResolver }, { type: TimeFormatHelperService }]; }, propDecorators: { event: [{
+                    type: i0.Input
+                }], widgetHost: [{
+                    type: i0.ViewChild,
+                    args: [WidgetDirective, { static: false }]
+                }] } });
+
+    var RtseeEventsDashboardSessionComponent = /** @class */ (function () {
+        function RtseeEventsDashboardSessionComponent(timeFormatService) {
+            this.timeFormatService = timeFormatService;
+        }
+        return RtseeEventsDashboardSessionComponent;
+    }());
+    RtseeEventsDashboardSessionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardSessionComponent, deps: [{ token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RtseeEventsDashboardSessionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: { session: "session" }, ngImport: i0__namespace, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\" *ngIf=\"session.info\">\n    <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n    <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n    <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n      <span *ngIf=\"session.info.deviceType === 'smartphone' && !session.info.botName\"\n        class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n      >phone_iphone</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'tablet' && !session.info.botName\"\n      >tablet_mac</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'desktop' && !session.info.botName\"\n      >computer</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.botName\"\n      >smart_toy</span>\n    </div>\n  </div>\n  <ul *ngIf=\"session.events && session.events.length\"\n      class=\"rtsee-events-dashboard-session-events-list\"\n  >\n    <li *ngFor=\"let event of session.events | slice:0:5;\" class=\"rtsee-events-dashboard-session-event\">\n      <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n    </li>\n  </ul>\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n", components: [{ type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: ["event"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "slice": i3__namespace.SlicePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardSessionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-rtsee-events-dashboard-session',
+                        templateUrl: './rtsee-events-dashboard-session.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { session: [{
                     type: i0.Input
                 }] } });
 
     var RtseeEventsDashboardClientThumbnailComponent = /** @class */ (function () {
-        function RtseeEventsDashboardClientThumbnailComponent(timeFormatService) {
+        function RtseeEventsDashboardClientThumbnailComponent(timeFormatService, defaultImagesService) {
             this.timeFormatService = timeFormatService;
+            this.defaultImagesService = defaultImagesService;
         }
         RtseeEventsDashboardClientThumbnailComponent.prototype.ngOnInit = function () {
             console.log('client id', this.client.id);
@@ -682,16 +1005,15 @@
         };
         return RtseeEventsDashboardClientThumbnailComponent;
     }());
-    RtseeEventsDashboardClientThumbnailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RtseeEventsDashboardClientThumbnailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0__namespace, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <span class=\"rtsee-dashboard-client-id\" *ngIf=\"client.name\">{{ client.id }}</span>\n  <span class=\"rtsee-dashboard-client-name\">{{ client.name || client.id }}</span>\n  <div class=\"rtsee-dashboard-client-live\" *ngIf=\"client.isConnected\"></div>\n  <div class=\"rtsee-dashboard-client-thumbnail-events\">\n    <details *ngIf=\"client.events && client.events.length\">\n      <summary>Last event: {{client.events[0].name}} ({{ timeFormatService.toAgo(client.events[0].createdAt) }})</summary>\n      <ul>\n        <li *ngFor=\"let event of client.events.slice(1, client.events.length)\" class=\"rtsee-dashboard-client-thumbnail-event\">\n          <span>{{event.name}}</span>\n          <span>&nbsp;</span>\n          <span>{{ timeFormatService.toAgo(event.createdAt) }}</span>\n        </li>\n      </ul>\n    </details>\n    <div class=\"rtsee-dashboard-client-thumbnail-actions\">\n      <button (click)=\"openChat()\">Chat</button>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-dashboard-client-thumbnail{position:relative}.rtsee-dashboard-client-thumbnail .rtsee-dashboard-client-thumbnail-events{padding:16px 0}.rtsee-dashboard-client-thumbnail .rtsee-dashboard-client-live{top:16px;right:16px;position:absolute;border-radius:50%;width:10px;height:10px;background:#32cd32}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    RtseeEventsDashboardClientThumbnailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }, { token: DefaultImagesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RtseeEventsDashboardClientThumbnailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0__namespace, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div class=\"rtsee-dashboard-client-header-image\"\n           [style.background-image]=\"'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\"\n      ></div>\n      <div class=\"rtsee-dashboard-client-live-indicator\" *ngIf=\"client.isConnected\"></div>\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{ client.name || client.id }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\">chat_bubble</span>\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    <div *ngFor=\"let session of client.sessions\"\n         class=\"rtsee-dashboard-sessions-container\">\n      <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n    </div>\n  </div>\n</div>\n", components: [{ type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: ["session"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardClientThumbnailComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-rtsee-events-dashboard-client-thumbnail',
                         templateUrl: './rtsee-events-dashboard-client-thumbnail.component.html',
-                        styleUrls: ['./rtsee-events-dashboard-client-thumbnail.component.scss'],
                     }]
-            }], ctorParameters: function () { return [{ type: TimeFormatHelperService }]; }, propDecorators: { dashboard: [{
+            }], ctorParameters: function () { return [{ type: TimeFormatHelperService }, { type: DefaultImagesService }]; }, propDecorators: { dashboard: [{
                     type: i0.Input
                 }], client: [{
                     type: i0.Input
@@ -703,13 +1025,12 @@
         return RtseeEventsDashboardComponent;
     }());
     RtseeEventsDashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RtseeEventsDashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardComponent, selector: "ngx-rtsee-events-dashboard", inputs: { eventsDashboard: "eventsDashboard" }, ngImport: i0__namespace, template: "<div class=\"rtsee-events-dashboard\">\n  <p>Client id: {{ eventsDashboard.signalingClient.getMyPeerId() }}</p>\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\"\n         *ngFor=\"let client of eventsDashboard.clients\">\n      <ngx-rtsee-events-dashboard-client-thumbnail\n        [client]=\"client\"\n        [dashboard]=\"eventsDashboard\"\n      ></ngx-rtsee-events-dashboard-client-thumbnail>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-events-dashboard{background-color:#333;padding:16px}.rtsee-events-dashboard .rtsee-dashboard-client-id{display:inline-block;font-weight:600}.rtsee-events-dashboard .rtsee-events-dashboard-client-thumbnails .rtsee-events-dashboard-client-thumbnail-wrapper{margin-bottom:16px}.rtsee-events-dashboard .rtsee-events-dashboard-client-thumbnails .rtsee-events-dashboard-client-thumbnail-wrapper:last-of-type{margin-bottom:0}"], components: [{ type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: ["dashboard", "client"] }], directives: [{ type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    RtseeEventsDashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardComponent, selector: "ngx-rtsee-events-dashboard", inputs: { eventsDashboard: "eventsDashboard" }, ngImport: i0__namespace, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\"\n         *ngFor=\"let client of eventsDashboard.clients\">\n      <ngx-rtsee-events-dashboard-client-thumbnail\n        [client]=\"client\"\n        [dashboard]=\"eventsDashboard\"\n      ></ngx-rtsee-events-dashboard-client-thumbnail>\n    </div>\n  </div>\n</div>\n", components: [{ type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: ["dashboard", "client"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-rtsee-events-dashboard',
                         templateUrl: './rtsee-events-dashboard.component.html',
-                        styleUrls: ['./rtsee-events-dashboard.component.scss'],
                     }]
             }], propDecorators: { eventsDashboard: [{
                     type: i0.Input
@@ -737,13 +1058,27 @@
         return RtseeEventsDashboardClientComponent;
     }());
     RtseeEventsDashboardClientComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardClientComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RtseeEventsDashboardClientComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientComponent, selector: "ngx-rtsee-events-dashboard-client", ngImport: i0__namespace, template: "<p>rtsee-events-dashboard-client works!</p>\n", styles: [""] });
+    RtseeEventsDashboardClientComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeEventsDashboardClientComponent, selector: "ngx-rtsee-events-dashboard-client", ngImport: i0__namespace, template: "<p>rtsee-events-dashboard-client works!</p>\n" });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeEventsDashboardClientComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ngx-rtsee-events-dashboard-client',
                         templateUrl: './rtsee-events-dashboard-client.component.html',
-                        styleUrls: ['./rtsee-events-dashboard-client.component.css'],
+                    }]
+            }] });
+
+    var RtseeContainerComponent = /** @class */ (function () {
+        function RtseeContainerComponent() {
+        }
+        return RtseeContainerComponent;
+    }());
+    RtseeContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RtseeContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.2", type: RtseeContainerComponent, selector: "rtsee-rtsee-container", ngImport: i0__namespace, template: "<p>rtsee-container works!</p>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RtseeContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'rtsee-rtsee-container',
+                        templateUrl: './rtsee-container.component.html',
                     }]
             }] });
 
@@ -771,25 +1106,36 @@
             RtseeEventsDashboardClientComponent,
             RtseeEventsDashboardClientThumbnailComponent,
             WidgetDirective,
-            CallWidgetComponent], imports: [i2.CommonModule,
+            CallWidgetComponent,
+            MainMenuComponent,
+            MessageTimeAndStatusComponent,
+            PreloaderComponent,
+            SearchComponent,
+            ManageChatComponent,
+            ContactsMultiselectComponent,
+            ShaveDirective,
+            ProfileComponent,
+            EventThumbnailComponent,
+            RtseeEventsDashboardSessionComponent,
+            RtseeContainerComponent], imports: [i3.CommonModule,
             icon.MatIconModule,
             i1.MatButtonModule,
             select.MatSelectModule,
             animations.BrowserAnimationsModule,
-            i3.MatFormFieldModule,
+            i3$1.MatFormFieldModule,
             i1$1.ReactiveFormsModule,
-            i2$1.AutosizeModule,
-            i3$1.InfiniteScrollModule], exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent] });
+            i2.AutosizeModule,
+            i3$2.InfiniteScrollModule], exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent] });
     RTSeeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeModule, imports: [[
-                i2.CommonModule,
+                i3.CommonModule,
                 icon.MatIconModule,
                 i1.MatButtonModule,
                 select.MatSelectModule,
                 animations.BrowserAnimationsModule,
-                i3.MatFormFieldModule,
+                i3$1.MatFormFieldModule,
                 i1$1.ReactiveFormsModule,
-                i2$1.AutosizeModule,
-                i3$1.InfiniteScrollModule,
+                i2.AutosizeModule,
+                i3$2.InfiniteScrollModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.2", ngImport: i0__namespace, type: RTSeeModule, decorators: [{
                 type: i0.NgModule,
@@ -814,17 +1160,28 @@
                             RtseeEventsDashboardClientThumbnailComponent,
                             WidgetDirective,
                             CallWidgetComponent,
+                            MainMenuComponent,
+                            MessageTimeAndStatusComponent,
+                            PreloaderComponent,
+                            SearchComponent,
+                            ManageChatComponent,
+                            ContactsMultiselectComponent,
+                            ShaveDirective,
+                            ProfileComponent,
+                            EventThumbnailComponent,
+                            RtseeEventsDashboardSessionComponent,
+                            RtseeContainerComponent,
                         ],
                         imports: [
-                            i2.CommonModule,
+                            i3.CommonModule,
                             icon.MatIconModule,
                             i1.MatButtonModule,
                             select.MatSelectModule,
                             animations.BrowserAnimationsModule,
-                            i3.MatFormFieldModule,
+                            i3$1.MatFormFieldModule,
                             i1$1.ReactiveFormsModule,
-                            i2$1.AutosizeModule,
-                            i3$1.InfiniteScrollModule,
+                            i2.AutosizeModule,
+                            i3$2.InfiniteScrollModule,
                         ],
                         exports: [RTSeeComponent, MessengerComponent, RtseeEventsDashboardComponent],
                     }]