@rtsee/ngx 0.0.76 → 0.0.77

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -8,12 +8,12 @@ import { Select } from 'primeng/select';
 import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import { interval, tap } from 'rxjs';
+import { interval, tap, filter } from 'rxjs';
 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 { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common/http';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { RTSeeChatTypes } from '@rtsee/common';
@@ -498,7 +498,8 @@ const COMMON_CONSTANTS = {
     customDateFormat: 'dd/MM/YYYY',
     customDateFormatDaysJs: 'DD/MM/YYYY',
     customDateTimeFormat: 'dd/MM/YYYY HH:mm',
-    defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png'
+    defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png',
+    mobileBreakpoint: 800
 };
 
 class ChatThumbnailComponent {
@@ -638,7 +639,7 @@ class MessageComponent {
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, deps: [{ token: MessageWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n  <div class=\"message-tail\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -646,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         MessageTimeAndStatusComponent,
                         WidgetDirective
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n  <div class=\"message-tail\"></div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: MessageWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }], propDecorators: { chat: [{
                 type: Input
             }], message: [{
@@ -661,13 +662,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class MessagesListComponent {
-    constructor(timeFormatService, scroller) {
+    constructor(timeFormatService, scroller, document) {
         this.timeFormatService = timeFormatService;
         this.scroller = scroller;
+        this.document = document;
+        this.messagesGroups = [];
+        this.firstGroupedMessage = null;
+        this.lastGroupedMessage = null;
+        this.RTSeeChatTypes = RTSeeChatTypes;
         this.bindScrollFunction = this.scrollToBottom.bind(this);
+        this.bindedGroupFunction = this.groupMessages.bind(this);
+    }
+    onWindowScroll(event) {
+        // Get the vertical scroll position
+        const verticalOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
+        if (window.innerWidth >= COMMON_CONSTANTS.mobileBreakpoint) {
+            return;
+        }
+        // You can add logic here, e.g., show a 'scroll to top' button
+        if (verticalOffset < 300) {
+            // Logic to show button
+            console.log('scrolled to top');
+            this.onScrolledToTop();
+        }
+        else {
+            console.log('scrolled to bottom');
+            // Logic to hide button
+        }
     }
     ngOnInit() {
+        this.chat.on(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
         this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        this.groupMessages();
     }
     ngAfterViewInit() {
         if (this.chat.isStandalone) {
@@ -680,6 +706,7 @@ class MessagesListComponent {
     }
     ngOnDestroy() {
         this.chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        this.chat.off(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
     }
     onScrolledToTop() {
         console.log('scrolledToTop');
@@ -703,7 +730,9 @@ class MessagesListComponent {
             return;
         }
         setTimeout(() => {
-            this.scroller.scrollToPosition([0, document.body.scrollHeight]);
+            if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
+                this.scroller.scrollToPosition([0, document.body.scrollHeight]);
+            }
             if (!this.scrollContainer?.nativeElement?.scrollHeight) {
                 console.log('scrollToBottom early return');
                 return;
@@ -720,23 +749,147 @@ class MessagesListComponent {
     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 }, { 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"] }] }); }
+    groupMessages() {
+        if (!this.chat || !this.chat.messages.length) {
+            this.messagesGroups.length = 0;
+        }
+        if (!this.firstGroupedMessage || !this.lastGroupedMessage) {
+            this.performGrouping();
+        }
+        else {
+            if (this.areForwardMessagesAdded()) {
+                this.performGrouping(this.chat.messages.indexOf(this.lastGroupedMessage) + 1);
+            }
+            if (this.areBackwardMessagesAdded()) {
+                console.log('backward added', this.chat.messages);
+                this.performGrouping(0, this.chat.messages.indexOf(this.firstGroupedMessage) - 1, true);
+            }
+        }
+        this.saveFirstAndLastGroupedMessages();
+    }
+    performGrouping(startIndex, endIndex, prepend) {
+        const processedGroups = [];
+        let lastSenderId = null;
+        let currentGroup = null;
+        const startFrom = startIndex || 0;
+        for (let i = startFrom; i < (endIndex || this.chat.messages.length); i++) {
+            const message = this.chat.messages[i];
+            if (message.from.id === lastSenderId && currentGroup) {
+                currentGroup.messages.push(message);
+            }
+            else {
+                lastSenderId = message.from.id;
+                if (currentGroup) {
+                    processedGroups.push(currentGroup);
+                }
+                if (!message.id && !message.temporaryId) {
+                    throw new Error('Either m.id or m.temporary id is required');
+                }
+                const isFromMe = message.from.id === this.messenger.clientId;
+                const isSenderVisible = (this.chat.type !== RTSeeChatTypes.INDIVIDUAL && !isFromMe)
+                    || this.chat.type === RTSeeChatTypes.COMMENTS
+                    || this.chat.type === RTSeeChatTypes.RATINGS;
+                currentGroup = {
+                    id: message.id || message.temporaryId,
+                    sender: message.from,
+                    senderVisible: isSenderVisible,
+                    messages: [message]
+                };
+            }
+        }
+        if (currentGroup) {
+            processedGroups.push(currentGroup);
+        }
+        if (prepend) {
+            this.stitchGroups(processedGroups, true);
+        }
+        else {
+            this.stitchGroups(processedGroups);
+        }
+    }
+    stitchGroups(newGroups, prepend) {
+        if (!newGroups.length) {
+            return;
+        }
+        if (!this.messagesGroups.length) {
+            this.messagesGroups.push(...newGroups);
+            return;
+        }
+        if (prepend) {
+            const lastOfNewGroups = newGroups[newGroups.length - 1];
+            const firstOfExistingGroups = this.messagesGroups[0];
+            if (lastOfNewGroups.sender.id === firstOfExistingGroups.sender.id) {
+                firstOfExistingGroups.messages.unshift(...lastOfNewGroups.messages);
+                newGroups.splice(newGroups.length - 1, 1);
+            }
+            this.messagesGroups.unshift(...newGroups);
+        }
+        else {
+            const firstOfNewGroups = newGroups[0];
+            const lastOfExistingGroups = this.messagesGroups[this.messagesGroups.length - 1];
+            if (firstOfNewGroups.sender.id === lastOfExistingGroups.sender.id) {
+                lastOfExistingGroups.messages.push(...firstOfNewGroups.messages);
+                newGroups.splice(0, 1);
+            }
+            this.messagesGroups.push(...newGroups);
+        }
+    }
+    areForwardMessagesAdded() {
+        console.log('last grouped present', this.lastGroupedMessage);
+        if (!this.lastGroupedMessage) {
+            return false;
+        }
+        const index = this.chat.messages.indexOf(this.lastGroupedMessage);
+        return index !== -1 && index < this.chat.messages.length - 1;
+    }
+    areBackwardMessagesAdded() {
+        console.log('first grouped present', this.firstGroupedMessage);
+        if (!this.firstGroupedMessage) {
+            return false;
+        }
+        const index = this.chat.messages.indexOf(this.firstGroupedMessage);
+        console.log('outcome', index !== -1 && index > 0);
+        return index !== -1 && index > 0;
+    }
+    saveFirstAndLastGroupedMessages() {
+        const firstAndLast = this.getFirstAndLastMessage();
+        if (!firstAndLast) {
+            this.firstGroupedMessage = null;
+            this.lastGroupedMessage = null;
+            return;
+        }
+        this.firstGroupedMessage = firstAndLast[0];
+        this.lastGroupedMessage = firstAndLast[1];
+    }
+    getFirstAndLastMessage() {
+        if (!this.chat.messages.length) {
+            return null;
+        }
+        return [this.chat.messages[0], this.chat.messages[this.chat.messages.length - 1]];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i2$1.ViewportScroller }, { token: DOCUMENT }], 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" }, host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, 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     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\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: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 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,
-                        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]=\"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: [{
+                        MessageComponent,
+                        NgClass
+                    ], 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     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
                 type: Input
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollBlock']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
             }] } });
 
 class ChatInputComponent {
@@ -845,7 +998,7 @@ class ChatComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -854,7 +1007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ChatInputComponent,
                         ViewportObserverDirective,
                         NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
             }], chatData: [{
@@ -1401,7 +1554,8 @@ class ManageStoryComponent {
                 name: this.nameField.value,
                 description: this.descriptionField.value,
                 averageReadTime: this.averageReadTimeField.value,
-                commentsEnabled: this.isDiscussableField.value
+                commentsEnabled: this.isDiscussableField.value,
+                isPublished: this.isPublishedField.value
             });
         }
         else {
@@ -1704,7 +1858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class StoryDetailsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n      (click)=\"presentation.setActiveStory(story)\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title\">\n    <h1>{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description\">\n    <p>{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n    <div class=\"rtsee-story-details-votes\">\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { 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: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { 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: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
@@ -1713,7 +1867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Tag,
                         Button,
                         ChatComponent
-                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n      (click)=\"presentation.setActiveStory(story)\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title\">\n    <h1>{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description\">\n    <p>{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n    <div class=\"rtsee-story-details-votes\">\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -1768,8 +1922,6 @@ class RtseeNavComponent {
             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
@@ -1811,18 +1963,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RTSeeContainerComponent {
-    constructor(authService) {
+    constructor(authService, router) {
         this.authService = authService;
+        this.router = router;
         this.isSidenavExpanded = true;
+        this.isSidenavContent = false;
+        this.isSidenavFullScreen = false;
+    }
+    ngOnInit() {
+        this.authService.init(this.auth);
+        this.routeSubscription = this.router.events.pipe(
+        // Filter for the NavigationEnd event to know when navigation is complete
+        filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+            this.defineSideNavState(event.url);
+        });
     }
     onSidenavToggleClicked() {
         this.isSidenavExpanded = !this.isSidenavExpanded;
     }
-    ngOnInit() {
-        this.authService.init(this.auth);
+    defineSideNavState(url) {
+        const isBase = url === '/' || url.startsWith('/?');
+        const routeUrlSplit = url.split('/');
+        const rootRoutePath = isBase ? '' : (routeUrlSplit[1] || null);
+        if (!rootRoutePath && !isBase) {
+            return;
+        }
+        const rtseeRoute = this.navigationConfig.routes
+            .find((rn) => rn.link === rootRoutePath) || null;
+        if (!rtseeRoute) {
+            return;
+        }
+        this.isSidenavContent = rtseeRoute.fullContent || false;
+        this.isSidenavFullScreen = rtseeRoute.fullScreen || false;
     }
-    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\"\n                              [messenger]=\"rtsee.messenger\"\n          ></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", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], 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     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\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\"\n                              [messenger]=\"rtsee.messenger\"\n          ></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", "messenger"] }, { 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,
@@ -1833,8 +2008,8 @@ 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    <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\"\n                              [messenger]=\"rtsee.messenger\"\n          ></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: [{
+                    ], 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     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\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\"\n                              [messenger]=\"rtsee.messenger\"\n          ></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 }, { type: i2.Router }], propDecorators: { rtsee: [{
                 type: Input
             }], navigationConfig: [{
                 type: Input