@rtsee/ngx 0.0.71 → 0.0.74

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,47 +1,55 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, EventEmitter, Output, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/common';
 import { NgClass, NgForOf, NgIf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { interval, tap } from 'rxjs';
+import * as i4 from 'primeng/button';
+import { Button, ButtonModule } from 'primeng/button';
+import * as i2$2 from 'primeng/message';
+import { Message, MessageModule } from 'primeng/message';
+import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
+import * as i2 from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import * as i1$1 from '@angular/common/http';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { RTSeeChatTypes } from '@rtsee/common';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { RTSeeChatEvents } from '@rtsee/messenger';
-import { debounceTime } from 'rxjs/operators';
-import * as i4 from 'primeng/button';
-import { Button, ButtonModule } from 'primeng/button';
+import { Textarea } from 'primeng/textarea';
 import { Chip } from 'primeng/chip';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
 import { FloatLabel } from 'primeng/floatlabel';
 import { InputGroup } from 'primeng/inputgroup';
 import { InputText } from 'primeng/inputtext';
-import * as i2$1 from 'primeng/message';
-import { Message, MessageModule } from 'primeng/message';
-import { Textarea } from 'primeng/textarea';
 import { InputNumber } from 'primeng/inputnumber';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import { RadioButton } from 'primeng/radiobutton';
-import * as i1$1 from 'primeng/autocomplete';
+import * as i1$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { OrderList } from 'primeng/orderlist';
 import { Divider } from 'primeng/divider';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
-import * as i2 from '@angular/router';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Slider } from 'primeng/slider';
+import { Fieldset } from 'primeng/fieldset';
+import { Tag } from 'primeng/tag';
+import { Listbox } from 'primeng/listbox';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
 import { Tooltip } from 'primeng/tooltip';
-import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
+import { hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 import { Password } from 'primeng/password';
 import { Checkbox } from 'primeng/checkbox';
 import { ProgressSpinner } from 'primeng/progressspinner';
-import * as i1$2 from '@angular/common/http';
 import * as i1$3 from 'primeng/api';
 import { AutosizeModule } from 'ngx-autosize';
+import { debounceTime } from 'rxjs/operators';
 import shave from 'shave';
 import { NgxCaptchaModule } from 'ngx-captcha';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
@@ -235,7 +243,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class RTSeeAuthService {
+    constructor(http) {
+        this.http = http;
+    }
+    init(auth) {
+        if (this.rtseeAuth && this.authConfiguration) {
+            return;
+        }
+        this.rtseeAuth = auth;
+        this.authConfiguration = this.rtseeAuth.authConfiguration;
+    }
+    signIn(credentials) {
+        return this.http
+            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), credentials)
+            .pipe(tap((res) => this.rtseeAuth.authenticate(res)));
+    }
+    signUp(credentials) {
+        return this.http
+            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials);
+    }
+    forgotPassword(credentials) {
+        return this.http
+            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), credentials);
+    }
+    resetPassword(credentials) {
+        return this.http
+            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
 class ProfileComponent {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+        this.AuthEndpointsKeys = AuthEndpointsKeys;
+        this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
+    }
     call() {
         if (!this.messenger.openedChat) {
             return;
@@ -248,13 +300,26 @@ class ProfileComponent {
         }
         void this.messenger.initializeVideoCall(this.messenger.openedChat);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger-profile\">\n  <ul class=\"rtsee-messenger-profile-controls\">\n    <li class=\"rtsee-messenger-profile-control\">\n      <div class=\"rtsee-messenger-control-item\" (click)=\"call()\">\n        <div class=\"rtsee-messenger-control-icon\">\n          <span class=\"material-icons-outlined\">call</span>\n        </div>\n        <span>Call</span>\n      </div>\n    </li>\n    <li class=\"rtsee-messenger-profile-control\">\n      <div class=\"rtsee-messenger-control-item\" (click)=\"videoCall()\">\n        <div class=\"rtsee-messenger-control-icon\">\n          <span class=\"material-icons-outlined\">videocam</span>\n        </div>\n        <span>Video</span>\n      </div>\n    </li>\n  </ul>\n</div>\n" }); }
+    logOut() {
+        this.authService.rtseeAuth.logOut();
+        void this.router.navigate(this.authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN));
+        setTimeout(() => {
+            window.location.reload();
+        }, 200);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  } @else if (messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        <p-message severity=\"warn\">\n          <span>This is an anonymous identity we've generated for you.</span>\n          <span>&nbsp;</span>\n          <span>You can use it to play around.</span>\n          <span>&nbsp;</span>\n          <span>But we are guilty of erasing these time after time.</span>\n          <span>&nbsp;</span>\n          <span>So please Sign Up if you're looking for something more stable :)</span>\n        </p-message>\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button label=\"Sign Up\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button label=\"Sign In\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (!messenger.myPeer.isAnonymous) {\n    <p-button label=\"Log Out\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-profile', standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n  <ul class=\"rtsee-messenger-profile-controls\">\n    <li class=\"rtsee-messenger-profile-control\">\n      <div class=\"rtsee-messenger-control-item\" (click)=\"call()\">\n        <div class=\"rtsee-messenger-control-icon\">\n          <span class=\"material-icons-outlined\">call</span>\n        </div>\n        <span>Call</span>\n      </div>\n    </li>\n    <li class=\"rtsee-messenger-profile-control\">\n      <div class=\"rtsee-messenger-control-item\" (click)=\"videoCall()\">\n        <div class=\"rtsee-messenger-control-icon\">\n          <span class=\"material-icons-outlined\">videocam</span>\n        </div>\n        <span>Video</span>\n      </div>\n    </li>\n  </ul>\n</div>\n" }]
-        }], propDecorators: { messenger: [{
+            args: [{ selector: 'rtsee-profile', imports: [
+                        Button,
+                        Message,
+                        RouterLink
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rtsee-messenger-profile-actions\">\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rtsee-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  } @else if (messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        <p-message severity=\"warn\">\n          <span>This is an anonymous identity we've generated for you.</span>\n          <span>&nbsp;</span>\n          <span>You can use it to play around.</span>\n          <span>&nbsp;</span>\n          <span>But we are guilty of erasing these time after time.</span>\n          <span>&nbsp;</span>\n          <span>So please Sign Up if you're looking for something more stable :)</span>\n        </p-message>\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button label=\"Sign Up\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button label=\"Sign In\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (!messenger.myPeer.isAnonymous) {\n    <p-button label=\"Log Out\"\n              severity=\"danger\"\n              (click)=\"logOut()\"\n              class=\"rtsee-messenger-profile-auth-button\"\n    ></p-button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { messenger: [{
+                type: Input
+            }], peer: [{
                 type: Input
             }] } });
 
@@ -275,29 +340,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class MessengerHeaderComponent {
     constructor(defaultImagesService) {
         this.defaultImagesService = defaultImagesService;
-        this.expandToggled = new EventEmitter();
-        this.isExpanded = false;
-        this.expandToggled.emit(this.isExpanded);
     }
-    toggleExpand() {
-        this.isExpanded = !this.isExpanded;
-        this.expandToggled.emit(this.isExpanded);
+    openProfile(id) {
+        if (this.messenger.ownProfileOpened) {
+            return;
+        }
+        void this.messenger.openProfile(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerHeaderComponent, deps: [{ token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MessengerHeaderComponent, isStandalone: true, selector: "rtsee-messenger-header", inputs: { isExpanded: "isExpanded", messenger: "messenger" }, outputs: { expandToggled: "expandToggled" }, ngImport: i0, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{\n     'rtsee-messenger-header-chat-opened': messenger.openedChat,\n     'rtsee-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\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\">arrow_back</span>\n    <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n  </button>\n\n  <button class=\"rtsee-messenger-menu-toggle\"\n          *ngIf=\"!messenger.openedChat && false\"\n          (click)=\"messenger.openMainMenu(true)\"\n  >\n    <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n  </button>\n  <button class=\"rtsee-messenger-fold-toggle\"\n          (click)=\"messenger.changeChatFoldState(!messenger.folded)\"\n  >\n    <span *ngIf=\"!messenger.folded\" class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">expand_more</span>\n    <span *ngIf=\"messenger.folded\" class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">expand_less</span>\n  </button>\n\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  >Messaging</p>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerHeaderComponent, isStandalone: true, selector: "rtsee-messenger-header", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{\n       'rtsee-messenger-header-chat-opened': messenger.openedChat,\n       'rtsee-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n       'rtsee-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rtsee-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened\n      }\"\n>\n  <span class=\"rtsee-messenger-header-collapse-button\"\n        (click)=\"messenger.collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rtsee-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rtsee-messenger-header-avatar\"\n           (click)=\"openProfile(messenger.myPeer.clientId)\"\n      >\n        <div [style.background-image]=\"'url(' + messenger.myPeer.imageUrl || defaultImagesService.PROFILE + ')'\"\n             class=\"rtsee-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rtsee-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rtsee-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rtsee-messenger-chat-image-container rtsee-messenger-header-avatar\"\n           (click)=\"messenger.openChatInfo()\"\n      >\n        <div class=\"rtsee-messenger-chat-image rtsee-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n        ></div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-messenger-header-center\">\n    @if (messenger.openedChat) {\n      <div [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rtsee-messenger-header-opened-chat-info\">\n        <div class=\"rtsee-messenger-profile-header-placeholder\">\n          <p class=\"rtsee-messenger-header-chat-title\"\n          >{{ messenger.openedChat.name }}</p>\n        </div>\n\n        <div class=\"rtsee-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else if (!messenger.openedChat) {\n      <p class=\"rtsee-messenger-header-title\"\n      >Messaging</p>\n      <rtsee-profile [messenger]=\"messenger\"\n                     [peer]=\"messenger.myPeer\"\n      ></rtsee-profile>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-messenger-header', imports: [
                         NgClass,
-                        NgIf,
                         ProfileComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{\n     'rtsee-messenger-header-chat-opened': messenger.openedChat,\n     'rtsee-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\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\">arrow_back</span>\n    <span class=\"unread-count\" *ngIf=\"messenger.unreadMessagesCount\">{{messenger.unreadMessagesCount}}</span>\n  </button>\n\n  <button class=\"rtsee-messenger-menu-toggle\"\n          *ngIf=\"!messenger.openedChat && false\"\n          (click)=\"messenger.openMainMenu(true)\"\n  >\n    <span class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">menu</span>\n  </button>\n  <button class=\"rtsee-messenger-fold-toggle\"\n          (click)=\"messenger.changeChatFoldState(!messenger.folded)\"\n  >\n    <span *ngIf=\"!messenger.folded\" class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">expand_more</span>\n    <span *ngIf=\"messenger.folded\" class=\"material-icons-outlined rtsee-messenger-menu-toggle-icon\">expand_less</span>\n  </button>\n\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  >Messaging</p>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DefaultImagesService }], propDecorators: { expandToggled: [{
-                type: Output
-            }], isExpanded: [{
-                type: Input
-            }], messenger: [{
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-header\"\n     [ngClass]=\"{\n       'rtsee-messenger-header-chat-opened': messenger.openedChat,\n       'rtsee-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n       'rtsee-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rtsee-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened\n      }\"\n>\n  <span class=\"rtsee-messenger-header-collapse-button\"\n        (click)=\"messenger.collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rtsee-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rtsee-messenger-header-avatar\"\n           (click)=\"openProfile(messenger.myPeer.clientId)\"\n      >\n        <div [style.background-image]=\"'url(' + messenger.myPeer.imageUrl || defaultImagesService.PROFILE + ')'\"\n             class=\"rtsee-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rtsee-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rtsee-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rtsee-messenger-chat-image-container rtsee-messenger-header-avatar\"\n           (click)=\"messenger.openChatInfo()\"\n      >\n        <div class=\"rtsee-messenger-chat-image rtsee-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n        ></div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-messenger-header-center\">\n    @if (messenger.openedChat) {\n      <div [ngClass]=\"{'rtsee-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rtsee-messenger-header-opened-chat-info\">\n        <div class=\"rtsee-messenger-profile-header-placeholder\">\n          <p class=\"rtsee-messenger-header-chat-title\"\n          >{{ messenger.openedChat.name }}</p>\n        </div>\n\n        <div class=\"rtsee-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else if (!messenger.openedChat) {\n      <p class=\"rtsee-messenger-header-title\"\n      >Messaging</p>\n      <rtsee-profile [messenger]=\"messenger\"\n                     [peer]=\"messenger.myPeer\"\n      ></rtsee-profile>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: DefaultImagesService }], propDecorators: { messenger: [{
                 type: Input
             }] } });
 
@@ -440,13 +499,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+const COMMON_CONSTANTS = {
+    minPasswordLength: 8,
+    requestItemLimit: 20,
+    customTimeFormat: 'HH:mm',
+    customDateFormat: 'dd/MM/YYYY',
+    customDateFormatDaysJs: 'DD/MM/YYYY',
+    customDateTimeFormat: 'dd/MM/YYYY HH:mm',
+    defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png'
+};
+
 class ChatThumbnailComponent {
     constructor(timeFormatService) {
         this.timeFormatService = timeFormatService;
         this.RTSeeChatTypes = RTSeeChatTypes;
+        this.COMMON_CONSTANTS = COMMON_CONSTANTS;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatThumbnailComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatThumbnailComponent, isStandalone: true, selector: "rtsee-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, 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\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </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", dependencies: [{ kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatThumbnailComponent, isStandalone: true, selector: "rtsee-chat-thumbnail", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.chatImageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\" 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\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </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", dependencies: [{ kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatThumbnailComponent, decorators: [{
             type: Component,
@@ -454,7 +524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MessageTimeAndStatusComponent,
                         NgClass,
                         NgIf
-                    ], standalone: true, 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\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </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" }]
+                    ], standalone: true, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.chatImageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\" 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\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </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" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
@@ -599,14 +669,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class MessagesListComponent {
-    constructor(timeFormatService) {
+    constructor(timeFormatService, scroller) {
         this.timeFormatService = timeFormatService;
+        this.scroller = scroller;
         this.bindScrollFunction = this.scrollToBottom.bind(this);
     }
     ngOnInit() {
         this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
     }
     ngAfterViewInit() {
+        console.log(this.chat.messages.length);
         this.scrollToBottom();
     }
     onMessageSent() {
@@ -616,6 +688,7 @@ class MessagesListComponent {
         this.chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
     }
     onScrolledToTop() {
+        console.log('scrolledToTop');
         if (this.chat.messagesLoadInProgress) {
             return;
         }
@@ -625,38 +698,42 @@ class MessagesListComponent {
         // if (this.scrollContainer.nativeElement.scrollTop < 1) {
         //   this.scrollContainer.nativeElement.scrollTop = 1;
         // }
+        console.log('scroll down');
         if (this.chat.messagesLoadInProgress) {
             return;
         }
         this.chat.loadRemoteMessages('front');
     }
     scrollToBottom() {
-        if (!this.scrollContainer?.nativeElement?.scrollHeight) {
-            return;
-        }
-        try {
-            this.scrollContainer.nativeElement.scrollTop =
-                this.scrollContainer.nativeElement.scrollHeight;
-        }
-        catch (err) {
-            console.log('Failed to Scroll');
-        }
+        setTimeout(() => {
+            this.scroller.scrollToPosition([0, document.body.scrollHeight]);
+            if (!this.scrollContainer?.nativeElement?.scrollHeight) {
+                console.log('scrollToBottom early return');
+                return;
+            }
+            try {
+                this.scrollContainer.nativeElement.scrollTop =
+                    this.scrollContainer.nativeElement.scrollHeight;
+            }
+            catch (err) {
+                console.log('Failed to Scroll');
+            }
+        }, 0);
     }
     formatDate(message) {
         return this.timeFormatService.formatDate(message.createdAt);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessagesListComponent, isStandalone: true, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i2$1.ViewportScroller }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessagesListComponent, isStandalone: true, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"true\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\"\n                     [messenger]=\"messenger\"\n                     [chat]=\"chat\"\n      ></rtsee-message>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-messages-list', imports: [
                         InfiniteScrollDirective,
                         NgClass,
-                        NgForOf,
                         MessageComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\" [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-message>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { chat: [{
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"true\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\"\n                     [messenger]=\"messenger\"\n                     [chat]=\"chat\"\n      ></rtsee-message>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
                 type: Input
@@ -674,25 +751,42 @@ class ChatInputComponent {
         });
     }
     sendMessage() {
-        const text = this.sendMessageForm.get('message')?.value;
-        if (!text) {
-            return;
+        const text = this.sendMessageForm.get('message')?.value || '';
+        const trimmedText = text.trim();
+        if (trimmedText) {
+            this.chat.sendMessage(text);
         }
-        this.chat.sendMessage(text);
         this.sendMessageForm.get('message')?.setValue('');
+        this.handleResize();
+    }
+    onKeyUp(event) {
+        this.handleResize();
+        if (event.key === 'Enter' && !event.shiftKey) {
+            this.sendMessage();
+        }
+    }
+    handleResize() {
+        const newHeight = this.chatInput.nativeElement.offsetHeight + 16;
+        if (newHeight !== this.messenger.chatInputHeight) {
+            this.messenger.setChatInputHeight(newHeight);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatInputComponent, isStandalone: true, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea\n        placeholder=\"Type message...\"\n        type=\"text\"\n        formControlName=\"message\"\n        class=\"rtsee-chat-input-field\"\n        autosize\n        required\n        (keyup.enter)=\"sendMessage()\"\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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatInputComponent, isStandalone: true, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, viewQueries: [{ propertyName: "chatInput", first: true, predicate: ["chatInput"], descendants: true }], ngImport: i0, template: "<div #chatInput\n     class=\"rtsee-chat-input\"\n     xmlns=\"http://www.w3.org/1999/html\"\n>\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keyup)=\"onKeyUp($event)\"\n                formControlName=\"message\"\n                pTextarea\n                placeholder=\"Type a message...\"\n                class=\"rtsee-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\"\n  >\n    <span class=\"pi pi-send\"></span>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-chat-input', imports: [
-                        ReactiveFormsModule
-                    ], standalone: true, template: "<div class=\"rtsee-chat-input\" xmlns=\"http://www.w3.org/1999/html\">\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea\n        placeholder=\"Type message...\"\n        type=\"text\"\n        formControlName=\"message\"\n        class=\"rtsee-chat-input-field\"\n        autosize\n        required\n        (keyup.enter)=\"sendMessage()\"\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" }]
+                        ReactiveFormsModule,
+                        Textarea
+                    ], standalone: true, template: "<div #chatInput\n     class=\"rtsee-chat-input\"\n     xmlns=\"http://www.w3.org/1999/html\"\n>\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keyup)=\"onKeyUp($event)\"\n                formControlName=\"message\"\n                pTextarea\n                placeholder=\"Type a message...\"\n                class=\"rtsee-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\"\n  >\n    <span class=\"pi pi-send\"></span>\n  </button>\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chat: [{
                 type: Input
+            }], chatInput: [{
+                type: ViewChild,
+                args: ['chatInput']
             }] } });
 
 class ChatComponent {
@@ -711,118 +805,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
-var MainMenuPanels;
-(function (MainMenuPanels) {
-    MainMenuPanels["HOME"] = "home";
-    MainMenuPanels["CONTACTS_SELECT"] = "contacts-select";
-    MainMenuPanels["MANAGE_CHAT"] = "manage-chat";
-})(MainMenuPanels || (MainMenuPanels = {}));
-const DEFAULT_MAIN_MENU_STATE = MainMenuPanels.HOME;
-
-class SearchComponent {
-    constructor() {
-        this.queryControl = new FormControl();
-    }
-    ngOnInit() {
-        this.queryCtrlSub = this.queryControl.valueChanges
-            .pipe(debounceTime(200))
-            .subscribe((value) => this.search.onQueryChange(value));
-    }
-    ngOnDestroy() {
-        if (this.queryCtrlSub) {
-            this.queryCtrlSub.unsubscribe();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SearchComponent, isStandalone: true, selector: "rtsee-search", inputs: { search: "search" }, ngImport: i0, 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\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-search', imports: [
-                        ReactiveFormsModule,
-                        PreloaderComponent,
-                        NgForOf
-                    ], standalone: true, 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\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         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" }]
-        }], propDecorators: { search: [{
-                type: Input
-            }] } });
-
-class ManageChatComponent {
-    onInviteContactsClicked() {
-        this.menuState.activePanel = MainMenuPanels.CONTACTS_SELECT;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ManageChatComponent, isStandalone: true, selector: "rtsee-manage-chat", inputs: { messenger: "messenger", menuState: "menuState" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageChatComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-manage-chat', standalone: true, 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" }]
-        }], propDecorators: { messenger: [{
-                type: Input
-            }], menuState: [{
-                type: Input
-            }] } });
-
-class ContactsMultiselectComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContactsMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ContactsMultiselectComponent, isStandalone: true, selector: "rtsee-contacts-multiselect", inputs: { menuState: "menuState", search: "search" }, ngImport: i0, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContactsMultiselectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-contacts-multiselect', imports: [
-                        SearchComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n" }]
-        }], propDecorators: { menuState: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }] } });
-
-class MainMenuComponent {
-    constructor() {
-        this.MainMenuPanels = MainMenuPanels;
-        this.state = {
-            activePanel: DEFAULT_MAIN_MENU_STATE,
-        };
-    }
-    onNewGroupClicked() {
-        this.state.activePanel = MainMenuPanels.CONTACTS_SELECT;
-    }
-    onNewChannelClicked() {
-        this.state.activePanel = MainMenuPanels.MANAGE_CHAT;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MainMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MainMenuComponent, isStandalone: true, selector: "rtsee-main-menu", inputs: { search: "search", messenger: "messenger" }, ngImport: i0, 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        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewGroupClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">people</span>\n          </div>\n          <span>New Group</span>\n        </div>\n      </li>\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewChannelClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">campaign</span>\n          </div>\n          <span>New Channel</span>\n        </div>\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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }, { kind: "component", type: ManageChatComponent, selector: "rtsee-manage-chat", inputs: ["messenger", "menuState"] }, { kind: "component", type: ContactsMultiselectComponent, selector: "rtsee-contacts-multiselect", inputs: ["menuState", "search"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MainMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-main-menu', imports: [
-                        NgIf,
-                        SearchComponent,
-                        ManageChatComponent,
-                        ContactsMultiselectComponent
-                    ], standalone: true, 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        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewGroupClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">people</span>\n          </div>\n          <span>New Group</span>\n        </div>\n      </li>\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewChannelClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">campaign</span>\n          </div>\n          <span>New Channel</span>\n        </div>\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" }]
-        }], propDecorators: { search: [{
-                type: Input
-            }], messenger: [{
-                type: Input
-            }] } });
-
 class MessengerComponent {
-    constructor() {
-        this.isHeaderExpanded = false;
-    }
+    constructor() { }
     onScroll() {
         this.messenger.loadChats();
     }
-    // onGeneralScroll($event) {
-    //   // $event.stopPropagation();
-    // }
-    onHeaderExpandToggled(value) {
-        this.isHeaderExpanded = value;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-main-menu-opened': messenger.mainMenuOpened,\n  'rtsee-messenger-header-expanded': isHeaderExpanded,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n                            (expandToggled)=\"onHeaderExpandToggled($event)\"\n    ></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", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["isExpanded", "messenger"], outputs: ["expandToggled"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: MainMenuComponent, selector: "rtsee-main-menu", inputs: ["search", "messenger"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></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    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -833,9 +822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ChatsListComponent,
                         ChatComponent,
                         PreloaderComponent,
-                        MainMenuComponent,
-                        NgIf
-                    ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-main-menu-opened': messenger.mainMenuOpened,\n  'rtsee-messenger-header-expanded': isHeaderExpanded,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n                            (expandToggled)=\"onHeaderExpandToggled($event)\"\n    ></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" }]
+                        ProfileComponent
+                    ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></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    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n" }]
         }], ctorParameters: () => [], propDecorators: { messenger: [{
                 type: Input
             }] } });
@@ -869,11 +857,16 @@ class EventThumbnailComponent {
         this.componentFactoryResolver = componentFactoryResolver;
         this.timeFormatService = timeFormatService;
         this.cd = cd;
+        this.timeInAgoFormat = '';
     }
     ngOnInit() {
         if (this.event.data) {
             this.generateTooltip();
         }
+        this.timeInAgoFormat = this.timeFormatService.toAgo(this.event.createdAt);
+        setInterval(() => {
+            this.timeInAgoFormat = this.timeFormatService.toAgo(this.event.createdAt);
+        }, 20000);
     }
     generateTooltip() {
         /* eslint-disable */
@@ -916,15 +909,14 @@ class EventThumbnailComponent {
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, deps: [{ token: EventsWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, 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", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div 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        @if (event.data) {\n          <div 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        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-event-thumbnail', imports: [
                         WidgetDirective,
-                        NgIf,
                         NgClass
-                    ], standalone: true, 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" }]
+                    ], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div 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        @if (event.data) {\n          <div 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        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: EventsWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }, { type: i0.ChangeDetectorRef }], propDecorators: { event: [{
                 type: Input
             }], widgetHost: [{
@@ -963,15 +955,13 @@ class RtseeEventsDashboardClientThumbnailComponent {
         this.dashboard.openChat(this.client);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }, { token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardClientThumbnailComponent, isStandalone: true, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0, 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      @if(client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\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    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: ["session"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardClientThumbnailComponent, isStandalone: true, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0, 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      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\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    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: ["session"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-rtsee-events-dashboard-client-thumbnail', imports: [
-                        RtseeEventsDashboardSessionComponent,
-                        NgIf,
-                        NgForOf
-                    ], standalone: true, 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      @if(client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\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    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
+                        RtseeEventsDashboardSessionComponent
+                    ], standalone: true, 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      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\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    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: DefaultImagesService }], propDecorators: { dashboard: [{
                 type: Input
             }], client: [{
@@ -993,7 +983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PresentationHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p>{{presentation.activeRoom.id}}</p>\n        <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\">\n        <i class=\"pi pi-cog rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom && !presentation.activeStory) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p-button (click)=\"presentation.emitJoinRoomCallEvent()\"\n                  label=\"Join Video Call\"\n        ></p-button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
@@ -1001,7 +991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Button,
                         NgClass,
                         Chip
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p>{{presentation.activeRoom.id}}</p>\n        <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\">\n        <i class=\"pi pi-cog rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom && !presentation.activeStory) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p-button (click)=\"presentation.emitJoinRoomCallEvent()\"\n                  label=\"Join Video Call\"\n        ></p-button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
@@ -1079,7 +1069,7 @@ class SlideComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide", settings: "settings" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, decorators: [{
             type: Component,
@@ -1088,11 +1078,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         WidgetDirective,
                         Button,
                         NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { story: [{
                 type: Input
             }], slide: [{
                 type: Input
+            }], settings: [{
+                type: Input
             }] } });
 
 class StoryPlayerComponent {
@@ -1110,16 +1102,18 @@ class StoryPlayerComponent {
         this.story.initSwiper(swiper);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["story", "slide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story", settings: "settings" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["story", "slide", "settings"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-story-player', imports: [
                         NgClass,
                         SlideComponent
-                    ], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { story: [{
                 type: Input
+            }], settings: [{
+                type: Input
             }], swiperEl: [{
                 type: ViewChild,
                 args: ['swiperContainer']
@@ -1208,7 +1202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class AutocompleteComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -1576,10 +1570,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class PresentationSettingsComponent {
+    constructor() {
+        this.COMMON_CONSTANTS = COMMON_CONSTANTS;
+        this.window = window;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <div class=\"rtsee-presentation-room-invite\">\n          <p-button label=\"Start A Call\"\n                    (click)=\"presentation.emitJoinRoomCallEvent()\"\n          ></p-button>\n          <div class=\"rtsee-presentation-room-invite-link\">\n            <p-button icon=\"pi pi-copy\"\n                      severity=\"secondary\"\n                      class=\"copy-btn\"\n                      [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + presentation.selectedRoom.id\"\n            ></p-button>\n            <span>{{ window.location.origin + '?room_id=' + presentation.selectedRoom.id }}</span>\n          </div>\n\n        </div>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-presentation-settings', imports: [
+                        Slider,
+                        Fieldset,
+                        FormsModule,
+                        Button,
+                        Chip,
+                        Message,
+                        Tag,
+                        Listbox,
+                        CdkCopyToClipboard
+                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <div class=\"rtsee-presentation-room-invite\">\n          <p-button label=\"Start A Call\"\n                    (click)=\"presentation.emitJoinRoomCallEvent()\"\n          ></p-button>\n          <div class=\"rtsee-presentation-room-invite-link\">\n            <p-button icon=\"pi pi-copy\"\n                      severity=\"secondary\"\n                      class=\"copy-btn\"\n                      [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + presentation.selectedRoom.id\"\n            ></p-button>\n            <span>{{ window.location.origin + '?room_id=' + presentation.selectedRoom.id }}</span>\n          </div>\n\n        </div>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }] } });
+
 class PresentationComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -1589,15 +1610,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         StoryPlayerComponent,
                         PreloaderComponent,
                         PreloaderComponent,
-                        PresentationsDashboardComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
+                        PresentationsDashboardComponent,
+                        PresentationSettingsComponent
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }] } });
 
 class RtseeNavComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeNavComponent, isStandalone: true, selector: "rtsee-nav", inputs: { config: "config", rtsee: "rtsee" }, ngImport: i0, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    constructor(authService) {
+        this.authService = authService;
+        this.profileLink = '';
+        this.queryParams = {};
+    }
+    ngOnInit() {
+        this.populateProfileLinkTillSuccess();
+    }
+    populateProfileLinkTillSuccess() {
+        const success = this.populateProfileLink();
+        if (!success) {
+            setTimeout(() => {
+                this.populateProfileLinkTillSuccess();
+            }, 1000);
+        }
+    }
+    populateProfileLink() {
+        const peer = this.rtsee.socketConnection?.myPeer || null;
+        if (!peer) {
+            console.log('RTSeeContainer: user peer not found');
+            return false;
+        }
+        console.log('peer', peer);
+        console.log('peer', peer.permissions?.length);
+        const profileRoute = this.config.routes
+            .find((r) => r.rtseeRoute === RTSeeRoutesList.PROFILE) || null;
+        const dashboardRoute = this.config.routes
+            .find((r) => r.rtseeRoute === RTSeeRoutesList.EVENTS_DASHBOARD) || null;
+        const messengerRoute = this.config.routes
+            .find((r) => r.rtseeRoute === RTSeeRoutesList.MESSENGER) || null;
+        if (dashboardRoute) {
+            dashboardRoute.isEnabled = hasPermission(peer, RTSeePeerPermissions.ACCESS_EVENTS_DASHBOARD);
+        }
+        if (profileRoute && profileRoute.link) {
+            this.profileLink = `${profileRoute.link}/${peer.clientId}`;
+            return true;
+        }
+        if (messengerRoute && messengerRoute.link) {
+            this.profileLink = messengerRoute.link;
+            this.queryParams = { userId: peer.clientId };
+            return true;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeNavComponent, deps: [{ token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeNavComponent, isStandalone: true, selector: "rtsee-nav", inputs: { config: "config", rtsee: "rtsee" }, ngImport: i0, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n              [routerLink]=\"profileLink\"\n              routerLinkActive=\"rtsee-nav-item-active\"\n              [routerLinkActiveOptions]=\"{exact: true}\"\n              [queryParams]=\"queryParams\"\n    ></p-avatar>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeNavComponent, decorators: [{
             type: Component,
@@ -1609,23 +1675,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Image,
                         Divider,
                         Tooltip
-                    ], standalone: true, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n" }]
-        }], propDecorators: { config: [{
+                    ], standalone: true, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n              [routerLink]=\"profileLink\"\n              routerLinkActive=\"rtsee-nav-item-active\"\n              [routerLinkActiveOptions]=\"{exact: true}\"\n              [queryParams]=\"queryParams\"\n    ></p-avatar>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { config: [{
                 type: Input
             }], rtsee: [{
                 type: Input
             }] } });
 
 class RTSeeContainerComponent {
-    constructor() {
+    constructor(authService) {
+        this.authService = authService;
         this.isSidenavExpanded = true;
-        this.isSidenavExpandededed = true;
     }
     onSidenavToggleClicked() {
         this.isSidenavExpanded = !this.isSidenavExpanded;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n      <div class=\"rtsee-conference-container\">\n        <rtsee-conference [rtSee]=\"rtsee.conference\"\n        ></rtsee-conference>\n      </div>\n    }\n\n    @if (rtsee.messenger) {\n      <div class=\"rtsee-messenger-container\">\n        <rtsee-messenger [messenger]=\"rtsee.messenger\"\n        ></rtsee-messenger>\n      </div>\n    }\n\n    @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n      <div class=\"rtsee-events-dashboard-container\">\n        <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n        ></rtsee-events-dashboard>\n      </div>\n    }\n\n    @if (rtsee.presentation && rtsee.presentation.isActive) {\n      <div class=\"rtsee-presentation-container\">\n        <rtsee-presentation [presentation]=\"rtsee.presentation\"></rtsee-presentation>\n      </div>\n    }\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
+    ngOnInit() {
+        this.authService.init(this.auth);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
             type: Component,
@@ -1636,48 +1705,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEventsDashboardComponent,
                         PresentationComponent,
                         RtseeNavComponent
-                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n      <div class=\"rtsee-conference-container\">\n        <rtsee-conference [rtSee]=\"rtsee.conference\"\n        ></rtsee-conference>\n      </div>\n    }\n\n    @if (rtsee.messenger) {\n      <div class=\"rtsee-messenger-container\">\n        <rtsee-messenger [messenger]=\"rtsee.messenger\"\n        ></rtsee-messenger>\n      </div>\n    }\n\n    @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n      <div class=\"rtsee-events-dashboard-container\">\n        <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n        ></rtsee-events-dashboard>\n      </div>\n    }\n\n    @if (rtsee.presentation && rtsee.presentation.isActive) {\n      <div class=\"rtsee-presentation-container\">\n        <rtsee-presentation [presentation]=\"rtsee.presentation\"></rtsee-presentation>\n      </div>\n    }\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], propDecorators: { rtsee: [{
+                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { rtsee: [{
                 type: Input
             }], navigationConfig: [{
                 type: Input
+            }], auth: [{
+                type: Input
             }] } });
 
-class RTSeeAuthService {
-    constructor(http) {
-        this.http = http;
-    }
-    init(auth) {
-        this.rtseeAuth = auth;
-        this.authConfiguration = this.rtseeAuth.authConfiguration;
-    }
-    signIn(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), credentials)
-            .pipe(tap((res) => this.rtseeAuth.authenticate(res)));
-    }
-    signUp(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials);
-    }
-    forgotPassword(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), credentials);
-    }
-    resetPassword(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
-
 class SignInComponent {
     constructor(formBuilder, router, authService) {
         this.formBuilder = formBuilder;
@@ -1718,6 +1754,9 @@ class SignInComponent {
                 next: (() => {
                     void this.router.navigate(this.authService.rtseeAuth.authConfiguration.defaultPostLoginRoute);
                     this.enableFormFields();
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 100);
                 }),
                 error: ((error) => {
                     console.log(error);
@@ -1966,15 +2005,6 @@ var FormErrorKey;
     FormErrorKey["passwordsMismatch"] = "passwordsMismatch";
 })(FormErrorKey || (FormErrorKey = {}));
 
-const COMMON_CONSTANTS = {
-    minPasswordLength: 8,
-    requestItemLimit: 20,
-    customTimeFormat: 'HH:mm',
-    customDateFormat: 'dd/MM/YYYY',
-    customDateFormatDaysJs: 'DD/MM/YYYY',
-    customDateTimeFormat: 'dd/MM/YYYY HH:mm',
-};
-
 class ResetPasswordComponent {
     constructor(formBuilder, route, router, authService) {
         this.formBuilder = formBuilder;
@@ -2074,7 +2104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PrivacyPolicyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, decorators: [{
             type: Component,
@@ -2110,7 +2140,7 @@ class RTSeeAuthComponent {
         this.authService.init(this.auth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthComponent, deps: [{ token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeAuthComponent, isStandalone: true, selector: "rtsee-auth", inputs: { auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-auth\">\n  @if (authService.rtseeAuth) {\n    @if (activeComponent === 'sign-in') {\n      <rtsee-sign-in></rtsee-sign-in>\n    }\n    @if (activeComponent === 'sign-up') {\n      <rtsee-sign-up></rtsee-sign-up>\n    }\n    @if (activeComponent === 'forgot-password') {\n      <rtsee-forgot-password></rtsee-forgot-password>\n    }\n    @if (activeComponent === 'reset-password') {\n      <rtsee-reset-password *ngIf=\"activeComponent === 'reset-password'\"></rtsee-reset-password>\n    }\n    @if (activeComponent === 'privacy-policy') {\n      <rtsee-privacy-policy></rtsee-privacy-policy>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: SignInComponent, selector: "rtsee-sign-in" }, { kind: "component", type: SignUpComponent, selector: "rtsee-sign-up" }, { kind: "component", type: ForgotPasswordComponent, selector: "rtsee-forgot-password" }, { kind: "component", type: ResetPasswordComponent, selector: "rtsee-reset-password" }, { kind: "component", type: PrivacyPolicyComponent, selector: "rtsee-privacy-policy" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeAuthComponent, isStandalone: true, selector: "rtsee-auth", inputs: { auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-auth\">\n  @if (authService.rtseeAuth) {\n    @if (activeComponent === 'sign-in') {\n      <rtsee-sign-in></rtsee-sign-in>\n    }\n    @if (activeComponent === 'sign-up') {\n      <rtsee-sign-up></rtsee-sign-up>\n    }\n    @if (activeComponent === 'forgot-password') {\n      <rtsee-forgot-password></rtsee-forgot-password>\n    }\n    @if (activeComponent === 'reset-password') {\n      <rtsee-reset-password></rtsee-reset-password>\n    }\n    @if (activeComponent === 'privacy-policy') {\n      <rtsee-privacy-policy></rtsee-privacy-policy>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: SignInComponent, selector: "rtsee-sign-in" }, { kind: "component", type: SignUpComponent, selector: "rtsee-sign-up" }, { kind: "component", type: ForgotPasswordComponent, selector: "rtsee-forgot-password" }, { kind: "component", type: ResetPasswordComponent, selector: "rtsee-reset-password" }, { kind: "component", type: PrivacyPolicyComponent, selector: "rtsee-privacy-policy" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthComponent, decorators: [{
             type: Component,
@@ -2119,9 +2149,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         SignUpComponent,
                         ForgotPasswordComponent,
                         ResetPasswordComponent,
-                        PrivacyPolicyComponent,
-                        NgIf
-                    ], standalone: true, template: "<div class=\"rtsee-auth\">\n  @if (authService.rtseeAuth) {\n    @if (activeComponent === 'sign-in') {\n      <rtsee-sign-in></rtsee-sign-in>\n    }\n    @if (activeComponent === 'sign-up') {\n      <rtsee-sign-up></rtsee-sign-up>\n    }\n    @if (activeComponent === 'forgot-password') {\n      <rtsee-forgot-password></rtsee-forgot-password>\n    }\n    @if (activeComponent === 'reset-password') {\n      <rtsee-reset-password *ngIf=\"activeComponent === 'reset-password'\"></rtsee-reset-password>\n    }\n    @if (activeComponent === 'privacy-policy') {\n      <rtsee-privacy-policy></rtsee-privacy-policy>\n    }\n  }\n</div>\n" }]
+                        PrivacyPolicyComponent
+                    ], standalone: true, template: "<div class=\"rtsee-auth\">\n  @if (authService.rtseeAuth) {\n    @if (activeComponent === 'sign-in') {\n      <rtsee-sign-in></rtsee-sign-in>\n    }\n    @if (activeComponent === 'sign-up') {\n      <rtsee-sign-up></rtsee-sign-up>\n    }\n    @if (activeComponent === 'forgot-password') {\n      <rtsee-forgot-password></rtsee-forgot-password>\n    }\n    @if (activeComponent === 'reset-password') {\n      <rtsee-reset-password></rtsee-reset-password>\n    }\n    @if (activeComponent === 'privacy-policy') {\n      <rtsee-privacy-policy></rtsee-privacy-policy>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { auth: [{
                 type: Input
             }] } });
@@ -2144,6 +2173,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{ selector: 'ngx-rtsee-events-dashboard-client', standalone: true, template: "<p>rtsee-events-dashboard-client works!</p>\n" }]
         }] });
 
+var MainMenuPanels;
+(function (MainMenuPanels) {
+    MainMenuPanels["HOME"] = "home";
+    MainMenuPanels["CONTACTS_SELECT"] = "contacts-select";
+    MainMenuPanels["MANAGE_CHAT"] = "manage-chat";
+})(MainMenuPanels || (MainMenuPanels = {}));
+const DEFAULT_MAIN_MENU_STATE = MainMenuPanels.HOME;
+
+class SearchComponent {
+    constructor() {
+        this.queryControl = new FormControl();
+    }
+    ngOnInit() {
+        this.queryCtrlSub = this.queryControl.valueChanges
+            .pipe(debounceTime(200))
+            .subscribe((value) => this.search.onQueryChange(value));
+    }
+    ngOnDestroy() {
+        if (this.queryCtrlSub) {
+            this.queryCtrlSub.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SearchComponent, isStandalone: true, selector: "rtsee-search", inputs: { search: "search" }, ngImport: i0, 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\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-search', imports: [
+                        ReactiveFormsModule,
+                        PreloaderComponent,
+                        NgForOf
+                    ], standalone: true, 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\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         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" }]
+        }], propDecorators: { search: [{
+                type: Input
+            }] } });
+
+class ManageChatComponent {
+    onInviteContactsClicked() {
+        this.menuState.activePanel = MainMenuPanels.CONTACTS_SELECT;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ManageChatComponent, isStandalone: true, selector: "rtsee-manage-chat", inputs: { messenger: "messenger", menuState: "menuState" }, ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-chat', standalone: true, 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" }]
+        }], propDecorators: { messenger: [{
+                type: Input
+            }], menuState: [{
+                type: Input
+            }] } });
+
+class ContactsMultiselectComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContactsMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ContactsMultiselectComponent, isStandalone: true, selector: "rtsee-contacts-multiselect", inputs: { menuState: "menuState", search: "search" }, ngImport: i0, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContactsMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-contacts-multiselect', imports: [
+                        SearchComponent
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n" }]
+        }], propDecorators: { menuState: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }] } });
+
+class MainMenuComponent {
+    constructor() {
+        this.MainMenuPanels = MainMenuPanels;
+        this.state = {
+            activePanel: DEFAULT_MAIN_MENU_STATE,
+        };
+    }
+    onNewGroupClicked() {
+        this.state.activePanel = MainMenuPanels.CONTACTS_SELECT;
+    }
+    onNewChannelClicked() {
+        this.state.activePanel = MainMenuPanels.MANAGE_CHAT;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MainMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: MainMenuComponent, isStandalone: true, selector: "rtsee-main-menu", inputs: { search: "search", messenger: "messenger" }, ngImport: i0, 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        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewGroupClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">people</span>\n          </div>\n          <span>New Group</span>\n        </div>\n      </li>\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewChannelClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">campaign</span>\n          </div>\n          <span>New Channel</span>\n        </div>\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", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchComponent, selector: "rtsee-search", inputs: ["search"] }, { kind: "component", type: ManageChatComponent, selector: "rtsee-manage-chat", inputs: ["messenger", "menuState"] }, { kind: "component", type: ContactsMultiselectComponent, selector: "rtsee-contacts-multiselect", inputs: ["menuState", "search"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MainMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-main-menu', imports: [
+                        NgIf,
+                        SearchComponent,
+                        ManageChatComponent,
+                        ContactsMultiselectComponent
+                    ], standalone: true, 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        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewGroupClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">people</span>\n          </div>\n          <span>New Group</span>\n        </div>\n      </li>\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewChannelClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">campaign</span>\n          </div>\n          <span>New Channel</span>\n        </div>\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" }]
+        }], propDecorators: { search: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }] } });
+
 class ShaveDirective {
     constructor(elem) {
         this.elem = elem;
@@ -2248,6 +2374,8 @@ class RTSeeModule {
             RTSeeContainerComponent,
             RTSeeConferenceComponent,
             RtseeSettingsComponent,
+            MessengerHeaderComponent,
+            ProfileComponent,
             MainMenuComponent,
             SearchComponent,
             PresentationComponent,