@rtsee/ngx 0.0.77 → 0.0.78

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

@@ -9,11 +9,13 @@ import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
 import { interval, tap, filter } from 'rxjs';
+import { RTSeeTextLabelKeys, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 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, NavigationEnd } from '@angular/router';
+import { Divider } from 'primeng/divider';
 import * as i1$1 from '@angular/common/http';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { RTSeeChatTypes } from '@rtsee/common';
@@ -21,6 +23,10 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { RTSeeChatEvents } from '@rtsee/messenger';
 import { Textarea } from 'primeng/textarea';
+import { InputGroup } from 'primeng/inputgroup';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+import { RadioButton } from 'primeng/radiobutton';
+import { InputText } from 'primeng/inputtext';
 import { Chip } from 'primeng/chip';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { Toast } from 'primeng/toast';
@@ -28,15 +34,10 @@ import * as i1$2 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputText } from 'primeng/inputtext';
 import { InputNumber } from 'primeng/inputnumber';
-import { ImageCropperComponent } from 'ngx-image-cropper';
-import { RadioButton } from 'primeng/radiobutton';
 import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { OrderList } from 'primeng/orderlist';
-import { Divider } from 'primeng/divider';
 import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
@@ -48,7 +49,6 @@ import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
 import { Tooltip } from 'primeng/tooltip';
-import { hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 import { Password } from 'primeng/password';
 import { Checkbox } from 'primeng/checkbox';
 import { ProgressSpinner } from 'primeng/progressspinner';
@@ -221,7 +221,7 @@ class RTSeeConferenceComponent {
         this.rtSee.uiControls.toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeConferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeConferenceComponent, isStandalone: true, selector: "rtsee-conference", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeConferenceComponent, isStandalone: true, selector: "rtsee-conference", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"'true'\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeConferenceComponent, decorators: [{
             type: Component,
@@ -230,7 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeSettingsComponent,
                         RtseePeerComponent,
                         RTSeeControlsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"'true'\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n" }]
         }], ctorParameters: () => [], propDecorators: { rtSee: [{
                 type: Input
             }] } });
@@ -278,8 +278,13 @@ class ProfileComponent {
         this.authService = authService;
         this.router = router;
         this.AuthEndpointsKeys = AuthEndpointsKeys;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
         this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
     }
+    setLanguage() {
+        this.messenger.setLanguage(this.messenger.currentLanguage);
+        void this.messenger.propagateLanguageChange(this.messenger.currentLanguage);
+    }
     call() {
         if (!this.messenger.openedChat) {
             return;
@@ -300,15 +305,18 @@ class ProfileComponent {
         }, 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"] }] }); }
+    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  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\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        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\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.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\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"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             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" }]
+                        RouterLink,
+                        Select,
+                        FormsModule,
+                        Divider
+                    ], 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  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-info\">\n      <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n      <div class=\"rtsee-messenger-profile-info-language\">\n        <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rtsee-messenger-profile-info-language-select\"\n        />\n      </div>\n      <div class=\"rtsee-messenger-profile-edit\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                  (click)=\"messenger.openManageProfile()\"\n        ></p-button>\n      </div>\n      <p-divider></p-divider>\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rtsee-messenger-profile-auth\">\n      <div class=\"rtsee-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\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        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rtsee-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rtsee-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\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.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\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: [{
@@ -332,6 +340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class MessengerHeaderComponent {
     constructor(defaultImagesService) {
         this.defaultImagesService = defaultImagesService;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     openProfile(id) {
         if (this.messenger.ownProfileOpened) {
@@ -340,14 +349,14 @@ class MessengerHeaderComponent {
         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: "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"] }] }); }
+    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      >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</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,
                         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': 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" }]
+                    ], 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      >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</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
             }] } });
@@ -1016,13 +1025,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class RTSeeCropperComponent {
+    constructor() {
+        this.loadInProgress = true;
+        this.nextClicked = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onCropperReady() {
+        this.loadInProgress = false;
+        this.cropper.setCropperElem(this.imageCropper);
+    }
+    onImageCropped(event) {
+        if (!event.blob) {
+            console.log('ImageCropped no Blob after Cropped event');
+            return;
+        }
+        this.cropper.onCropped(event.blob);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeCropperComponent, isStandalone: true, selector: "rtsee-cropper", inputs: { cropper: "cropper" }, outputs: { nextClicked: "nextClicked" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <p-button label=\"Next\"\n                severity=\"primary\"\n                (click)=\"cropper.onNextButtonClicked()\"\n      ></p-button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n", dependencies: [{ kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-cropper', imports: [
+                        ImageCropperComponent,
+                        NgClass,
+                        RadioButton,
+                        PreloaderComponent,
+                        Button
+                    ], standalone: true, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <p-button label=\"Next\"\n                severity=\"primary\"\n                (click)=\"cropper.onNextButtonClicked()\"\n      ></p-button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { cropper: [{
+                type: Input
+            }], nextClicked: [{
+                type: Output
+            }], imageCropper: [{
+                type: ViewChild,
+                args: [ImageCropperComponent]
+            }] } });
+
+class RTSeeUploaderComponent {
+    ngOnInit() {
+        this.uploader.show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RTSeeUploaderComponent, isStandalone: true, selector: "rtsee-uploader", inputs: { uploader: "uploader" }, ngImport: i0, template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-uploader', imports: [], template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }]
+        }], propDecorators: { uploader: [{
+                type: Input
+            }] } });
+
+class RTSeeImageUploaderComponent {
+    ngOnInit() {
+        this.attachEventHandlers();
+    }
+    attachEventHandlers() {
+        this.imageUploader.on('completed', this.onImagesUploaded.bind(this));
+    }
+    onNextButtonClicked() {
+        this.imageUploader.onNextClicked();
+    }
+    onImagesUploaded(response) {
+        console.log(response);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-image-uploader', imports: [
+                        RTSeeUploaderComponent,
+                        RTSeeCropperComponent,
+                        Button
+                    ], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { cropperComponent: [{
+                type: ViewChild,
+                args: [RTSeeCropperComponent]
+            }], imageUploader: [{
+                type: Input
+            }] } });
+
+class ManageProfileComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.profileForm = this.formBuilder.group({
+            firstName: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(141)
+                ]
+            }),
+            lastName: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(141)
+                ]
+            })
+        });
+    }
+    ngOnInit() {
+        if (!this.messenger.myPeer || !this.messenger.myPeer.name) {
+            return;
+        }
+        const nameSplit = this.messenger.myPeer.name.split(' ');
+        this.firstNameField.setValue(nameSplit[0]);
+        nameSplit.splice(0, 1);
+        this.lastNameField.setValue(nameSplit.join(' '));
+    }
+    async submit() {
+        if (this.profileForm.invalid) {
+            this.profileForm.markAsTouched();
+            return;
+        }
+        await this.manageProfile.save({
+            firstName: this.firstNameField.getRawValue(),
+            lastName: this.lastNameField.getRawValue()
+        });
+    }
+    get firstNameField() {
+        return this.profileForm.get('firstName');
+    }
+    get lastNameField() {
+        return this.profileForm.get('lastName');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageProfileComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageProfileComponent, isStandalone: true, selector: "rtsee-manage-profile", inputs: { messenger: "messenger", manageProfile: "manageProfile" }, ngImport: i0, template: "<div class=\"rtsee-messenger-manage-profile\">\n  <div class=\"rtsee-messenger-manage-profile-info rtsee-form-container\">\n    <div class=\"rtsee-messenger-manage-profile-image\">\n      <rtsee-image-uploader [imageUploader]=\"manageProfile.imageUploader\"\n      ></rtsee-image-uploader>\n    </div>\n\n    <form class=\"rtsee-manage-profile-form rtsee-form\"\n          [formGroup]=\"profileForm\"\n          (ngSubmit)=\"submit()\"\n    >\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"firstNameField\"\n                   [class.p-invalid]=\"firstNameField.invalid && firstNameField.touched\"\n            />\n            <label for=\"sign-up-email\">First Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (firstNameField.hasError('required') && firstNameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >First Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"lastNameField\"\n                   [class.p-invalid]=\"lastNameField.invalid && lastNameField.touched\"\n            />\n            <label for=\"sign-up-email\">Last Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (lastNameField.hasError('required') && lastNameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Last Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-manage-profile-buttons\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageProfile.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageProfile.cancel()\"\n                  [disabled]=\"manageProfile.saveInProgress\"\n        />\n      </div>\n    </form>\n  </div>\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: 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: "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: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-profile', imports: [
+                        Button,
+                        FloatLabel,
+                        InputGroup,
+                        Message,
+                        RTSeeImageUploaderComponent,
+                        ReactiveFormsModule,
+                        InputText
+                    ], template: "<div class=\"rtsee-messenger-manage-profile\">\n  <div class=\"rtsee-messenger-manage-profile-info rtsee-form-container\">\n    <div class=\"rtsee-messenger-manage-profile-image\">\n      <rtsee-image-uploader [imageUploader]=\"manageProfile.imageUploader\"\n      ></rtsee-image-uploader>\n    </div>\n\n    <form class=\"rtsee-manage-profile-form rtsee-form\"\n          [formGroup]=\"profileForm\"\n          (ngSubmit)=\"submit()\"\n    >\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"firstNameField\"\n                   [class.p-invalid]=\"firstNameField.invalid && firstNameField.touched\"\n            />\n            <label for=\"sign-up-email\">First Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (firstNameField.hasError('required') && firstNameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >First Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"lastNameField\"\n                   [class.p-invalid]=\"lastNameField.invalid && lastNameField.touched\"\n            />\n            <label for=\"sign-up-email\">Last Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (lastNameField.hasError('required') && lastNameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Last Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-manage-profile-buttons\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageProfile.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageProfile.cancel()\"\n                  [disabled]=\"manageProfile.saveInProgress\"\n        />\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { messenger: [{
+                type: Input
+            }], manageProfile: [{
+                type: Input
+            }] } });
+
 class MessengerComponent {
     constructor() { }
     onScroll() {
         this.messenger.loadChats();
     }
     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: "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", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
+    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  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\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", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -1033,8 +1190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ChatsListComponent,
                         ChatComponent,
                         PreloaderComponent,
-                        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" }]
+                        ProfileComponent,
+                        ManageProfileComponent
+                    ], 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  @if (messenger.manageProfile) {\n    <div class=\"rtsee-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\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
             }] } });
@@ -1158,11 +1316,8 @@ class RtseeEventsDashboardClientThumbnailComponent {
         this.timeFormatService = timeFormatService;
         this.defaultImagesService = defaultImagesService;
     }
-    ngOnInit() {
-        console.log('client id', this.client.id);
-    }
+    ngOnInit() { }
     openChat() {
-        console.log('Open Chat Clicked! Client ID #', this.client.id);
         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 }); }
@@ -1227,8 +1382,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class PresentationHeaderComponent {
+    constructor() {
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     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\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\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"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    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\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\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]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\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"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
@@ -1237,23 +1395,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         Chip,
                         JoinCallComponent
-                    ], 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\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\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" }]
+                    ], 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\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\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]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
 
 class StoryThumbnailComponent {
     constructor() {
+        this.progressPercent = 0;
         this.Math = Math;
     }
+    ngOnInit() {
+        if (this.story.preselectedSlideNumber) {
+            this.progressPercent = Math
+                .round((this.story.preselectedSlideNumber / this.story.totalSlides) * 100);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-story-thumbnail', imports: [
                         NgStyle
-                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }] } });
@@ -1365,90 +1530,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['swiperContainer']
             }] } });
 
-class RTSeeCropperComponent {
-    constructor() {
-        this.loadInProgress = true;
-        this.nextClicked = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    onCropperReady() {
-        this.loadInProgress = false;
-        this.cropper.setCropperElem(this.imageCropper);
-    }
-    onImageCropped(event) {
-        if (!event.blob) {
-            console.log('ImageCropped no Blob after Cropped event');
-            return;
-        }
-        this.cropper.onCropped(event.blob);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeCropperComponent, isStandalone: true, selector: "rtsee-cropper", inputs: { cropper: "cropper" }, outputs: { nextClicked: "nextClicked" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <button (click)=\"cropper.onNextButtonClicked()\">\n        Next\n      </button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n", dependencies: [{ kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-cropper', imports: [
-                        ImageCropperComponent,
-                        NgClass,
-                        RadioButton,
-                        PreloaderComponent
-                    ], standalone: true, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <button (click)=\"cropper.onNextButtonClicked()\">\n        Next\n      </button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { cropper: [{
-                type: Input
-            }], nextClicked: [{
-                type: Output
-            }], imageCropper: [{
-                type: ViewChild,
-                args: [ImageCropperComponent]
-            }] } });
-
-class RTSeeUploaderComponent {
-    ngOnInit() {
-        this.uploader.show();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RTSeeUploaderComponent, isStandalone: true, selector: "rtsee-uploader", inputs: { uploader: "uploader" }, ngImport: i0, template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-uploader', imports: [], template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }]
-        }], propDecorators: { uploader: [{
-                type: Input
-            }] } });
-
-class RTSeeImageUploaderComponent {
-    ngOnInit() {
-        this.attachEventHandlers();
-    }
-    attachEventHandlers() {
-        this.imageUploader.on('completed', this.onImagesUploaded.bind(this));
-    }
-    onNextButtonClicked() {
-        this.imageUploader.onNextClicked();
-    }
-    onImagesUploaded(response) {
-        console.log(response);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-image-uploader', imports: [
-                        RTSeeUploaderComponent,
-                        RTSeeCropperComponent
-                    ], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
-        }], propDecorators: { cropperComponent: [{
-                type: ViewChild,
-                args: [RTSeeCropperComponent]
-            }], imageUploader: [{
-                type: Input
-            }] } });
-
 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$3.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                        (onSelect)=\"config.onSelect($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$3.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,
@@ -1457,7 +1541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         FloatLabel,
                         InputGroup,
                         FormsModule
-                    ], 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" }]
+                    ], 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                        (onSelect)=\"config.onSelect($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -1746,7 +1830,6 @@ class ManageLabelComponent {
     ngOnInit() {
         this.nameField.setValue(this.manageLabel.label.name);
         this.descriptionField.setValue(this.manageLabel.label.description || '');
-        this.descriptionField.setValue(this.manageLabel.label.description || '');
     }
     submit() {
         if (this.labelForm.valid) {
@@ -1807,9 +1890,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class ManageTopicComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.topicForm = this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            key: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(1),
+                    Validators.maxLength(244)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    ngOnInit() {
+        this.nameField.setValue(this.manageTopic.topic.name);
+        this.descriptionField.setValue(this.manageTopic.topic.description || '');
+        this.keyField.setValue(this.manageTopic.topic.key || '');
+    }
+    submit() {
+        if (this.topicForm.valid) {
+            void this.manageTopic.save({
+                name: this.nameField.value,
+                description: this.descriptionField.value,
+                key: this.keyField.value,
+            });
+        }
+        else {
+            this.topicForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    get nameField() {
+        return this.topicForm.get('name');
+    }
+    get descriptionField() {
+        return this.topicForm.get('description');
+    }
+    get keyField() {
+        return this.topicForm.get('key');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageTopicComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageTopicComponent, isStandalone: true, selector: "rtsee-manage-topic", inputs: { manageTopic: "manageTopic" }, ngImport: i0, template: "<div class=\"rtsee-manage-story-topic\">\n  <div class=\"rtsee-manage-story-topic-info rtsee-form-container\">\n    <form class=\"rtsee-story-topic-form rtsee-form\"\n          [formGroup]=\"topicForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-topic-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-topic-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-topic-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-topic-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-topic-key-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"keyField\"\n                   [class.p-invalid]=\"keyField.invalid && keyField.touched\"\n            />\n            <label for=\"rtsee-story-topic-key-field\">Key</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (keyField.hasError('required') && keyField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Key is required, pick a smile, dummy</p-message>\n        }\n      </div>\n      <rtsee-autocomplete [config]=\"manageTopic.categoriesMultiselect\"></rtsee-autocomplete>\n      <div class=\"rtsee-manage-story-topic-categories-list rtsee-ordered-list\">\n        <p-orderList [value]=\"manageTopic.topic.categories\"\n                     dataKey=\"id\"\n                     [dragdrop]=\"true\"\n                     [responsive]=\"true\"\n                     scrollHeight=\"40rem\"\n                     controlsPosition=\"right\"\n                     (onReorder)=\"manageTopic.onReorder($event)\"\n        >\n          <ng-template let-option let-selected=\"selected\" #item>\n            <p>{{option.name}}</p>\n            <p-button label=\"Delete\" (click)=\"manageTopic.removeCategory(option.id)\"></p-button>\n          </ng-template>\n        </p-orderList>\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTopic.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageTopic.cancel()\"\n                [disabled]=\"manageTopic.saveInProgress\"\n      />\n    </form>\n  </div>\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: 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageTopicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-topic', imports: [
+                        Button,
+                        FloatLabel,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        ReactiveFormsModule,
+                        Textarea,
+                        AutocompleteComponent,
+                        OrderList
+                    ], template: "<div class=\"rtsee-manage-story-topic\">\n  <div class=\"rtsee-manage-story-topic-info rtsee-form-container\">\n    <form class=\"rtsee-story-topic-form rtsee-form\"\n          [formGroup]=\"topicForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-topic-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-topic-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-topic-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-topic-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-topic-key-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"keyField\"\n                   [class.p-invalid]=\"keyField.invalid && keyField.touched\"\n            />\n            <label for=\"rtsee-story-topic-key-field\">Key</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (keyField.hasError('required') && keyField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Key is required, pick a smile, dummy</p-message>\n        }\n      </div>\n      <rtsee-autocomplete [config]=\"manageTopic.categoriesMultiselect\"></rtsee-autocomplete>\n      <div class=\"rtsee-manage-story-topic-categories-list rtsee-ordered-list\">\n        <p-orderList [value]=\"manageTopic.topic.categories\"\n                     dataKey=\"id\"\n                     [dragdrop]=\"true\"\n                     [responsive]=\"true\"\n                     scrollHeight=\"40rem\"\n                     controlsPosition=\"right\"\n                     (onReorder)=\"manageTopic.onReorder($event)\"\n        >\n          <ng-template let-option let-selected=\"selected\" #item>\n            <p>{{option.name}}</p>\n            <p-button label=\"Delete\" (click)=\"manageTopic.removeCategory(option.id)\"></p-button>\n          </ng-template>\n        </p-orderList>\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTopic.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageTopic.cancel()\"\n                [disabled]=\"manageTopic.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageTopic: [{
+                type: Input
+            }] } });
+
+class ManageTopicsComponent {
+    ngOnInit() {
+        this.manageTopics.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageTopicsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageTopicsComponent, isStandalone: true, selector: "rtsee-manage-topics", inputs: { manageTopics: "manageTopics" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories-topics\">\n  <div class=\"rtsee-manage-stories-topics-header\">\n    @if (!manageTopics.selectedTopic) {\n      <p-button (click)=\"manageTopics.selectNewTopic()\"\n                label=\"Create A New Topic\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-topics-body\">\n    @if (manageTopics.selectedTopic) {\n      <rtsee-manage-topic [manageTopic]=\"manageTopics.selectedTopic\"\n      ></rtsee-manage-topic>\n    }\n    @if (!manageTopics.selectedTopic) {\n      @for (topic of manageTopics.topics; track topic.id) {\n        <p (click)=\"manageTopics.selectTopic(topic.id)\">{{topic.name}}</p>\n      }\n    }\n  </div>\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: ManageTopicComponent, selector: "rtsee-manage-topic", inputs: ["manageTopic"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageTopicsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-topics', imports: [
+                        Button,
+                        ManageTopicComponent
+                    ], template: "<div class=\"rtsee-manage-stories-topics\">\n  <div class=\"rtsee-manage-stories-topics-header\">\n    @if (!manageTopics.selectedTopic) {\n      <p-button (click)=\"manageTopics.selectNewTopic()\"\n                label=\"Create A New Topic\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-topics-body\">\n    @if (manageTopics.selectedTopic) {\n      <rtsee-manage-topic [manageTopic]=\"manageTopics.selectedTopic\"\n      ></rtsee-manage-topic>\n    }\n    @if (!manageTopics.selectedTopic) {\n      @for (topic of manageTopics.topics; track topic.id) {\n        <p (click)=\"manageTopics.selectTopic(topic.id)\">{{topic.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageTopics: [{
+                type: Input
+            }] } });
+
 class PresentationsDashboardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationsDashboardComponent, isStandalone: true, selector: "rtsee-presentations-dashboard", inputs: { dashboard: "dashboard" }, ngImport: i0, template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ManageStoriesComponent, selector: "rtsee-manage-stories", inputs: ["manageStories"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TabPanels, selector: "p-tabpanels" }, { kind: "component", type: TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: ManageCategoriesComponent, selector: "rtsee-manage-categories", inputs: ["manageCategories"] }, { 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: ManageLabelsComponent, selector: "rtsee-manage-labels", inputs: ["manageLabels"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationsDashboardComponent, isStandalone: true, selector: "rtsee-presentations-dashboard", inputs: { dashboard: "dashboard" }, ngImport: i0, template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n        <p-tab value=\"topics\">Topics</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ManageStoriesComponent, selector: "rtsee-manage-stories", inputs: ["manageStories"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TabPanels, selector: "p-tabpanels" }, { kind: "component", type: TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: ManageCategoriesComponent, selector: "rtsee-manage-categories", inputs: ["manageCategories"] }, { 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: ManageLabelsComponent, selector: "rtsee-manage-labels", inputs: ["manageLabels"] }, { kind: "component", type: ManageTopicsComponent, selector: "rtsee-manage-topics", inputs: ["manageTopics"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, decorators: [{
             type: Component,
@@ -1823,8 +1996,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ManageCategoriesComponent,
                         Button,
                         Chip,
-                        ManageLabelsComponent
-                    ], template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n" }]
+                        ManageLabelsComponent,
+                        ManageTopicsComponent
+                    ], template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n        <p-tab value=\"topics\">Topics</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n" }]
         }], propDecorators: { dashboard: [{
                 type: Input
             }] } });
@@ -1877,9 +2051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class PresentationComponent {
-    constructor() { }
+    constructor() {
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     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", messenger: "messenger" }, 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.isCategoriesListVisible && !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 class=\"rtsee-presentation-category-name\">{{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.openStoryDetails(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  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\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"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, 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.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{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.openStoryDetails(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 && !presentation.isDashboardOpen) {\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  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\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"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -1892,7 +2068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
                         StoryDetailsComponent
-                    ], 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.isCategoriesListVisible && !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 class=\"rtsee-presentation-category-name\">{{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.openStoryDetails(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  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
+                    ], 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.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{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.openStoryDetails(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 && !presentation.isDashboardOpen) {\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  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }], messenger: [{
@@ -2038,6 +2214,7 @@ class SignInComponent {
         this.AuthEndpointsKeys = AuthEndpointsKeys;
         this.loadInProgress = false;
         this.serverSideError = '';
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
         this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
     }
     get usernameField() {
@@ -2094,7 +2271,7 @@ class SignInComponent {
         this.rememberField.enable();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SignInComponent, deps: [{ token: i1.FormBuilder }, { token: i2.Router }, { token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SignInComponent, isStandalone: true, selector: "rtsee-sign-in", ngImport: i0, template: "<div class=\"auth-container rtsee-form-container\" >\n  <img [ngSrc]=\"authConfiguration.appLogo\"\n       alt=\"Company Logo\"\n       class=\"auth-logo\"\n       height=\"37\"\n       width=\"37\"\n  />\n  <h2 class=\"auth-title\">Sign In to Your Account</h2>\n  <p class=\"auth-title-description\">To access your content, please sign in to your account</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"signInForm\" (ngSubmit)=\"login()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup >\n        <p-floatlabel variant=\"on\">\n          <input id=\"user-email\"\n                 pInputText\n                 [formControl]=\"usernameField\"\n          />\n          <label for=\"user-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (!usernameField.valid && usernameField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is invalid</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"user-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n          />\n          <label for=\"user-password\">Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n\n      @if (!passwordField.valid && passwordField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password is required</p-message>\n      }\n      @if (serverSideError) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >{{serverSideError}}</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-checkbox inputId=\"remember\" [binary]=\"true\" [formControl]=\"rememberField\" />\n      <label for=\"remember\" class=\"ml-2\"> Remember me </label>\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <a href=\"#\"\n         [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)\"\n         class=\"auth-deep-blue-sm-medium\"\n      >Forgot password?</a>\n    </div>\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Sign In\"\n                [disabled]=\"loadInProgress\"\n      />\n      @if (loadInProgress) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n  <p class=\"rtsee-form-label\">\n    <span>Don't have an account?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Create one!</a>\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "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: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SignInComponent, isStandalone: true, selector: "rtsee-sign-in", ngImport: i0, template: "<div class=\"auth-container rtsee-form-container\" >\n  <img [ngSrc]=\"authConfiguration.appLogo\"\n       alt=\"Company Logo\"\n       class=\"auth-logo\"\n       height=\"37\"\n       width=\"37\"\n  />\n  <h2 class=\"auth-title\">{{ authService.rtseeAuth.labels[RTSeeTextLabelKeys.SIGN_IN_FORM_HEADER] }}</h2>\n  <p class=\"auth-title-description\">{{ authService.rtseeAuth.labels[RTSeeTextLabelKeys.SIGN_IN_TEXT_SUBHEADER] }}</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"signInForm\" (ngSubmit)=\"login()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup >\n        <p-floatlabel variant=\"on\">\n          <input id=\"user-email\"\n                 pInputText\n                 [formControl]=\"usernameField\"\n          />\n          <label for=\"user-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (!usernameField.valid && usernameField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is invalid</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"user-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n          />\n          <label for=\"user-password\">Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n\n      @if (!passwordField.valid && passwordField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password is required</p-message>\n      }\n      @if (serverSideError) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >{{serverSideError}}</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-checkbox inputId=\"remember\" [binary]=\"true\" [formControl]=\"rememberField\" />\n      <label for=\"remember\" class=\"ml-2\">\n        <span>\n          {{authService.rtseeAuth.labels[RTSeeTextLabelKeys.REMEMBER_ME_CHECKBOX_LABEL] }}\n        </span>\n      </label>\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <a href=\"#\"\n         [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)\"\n         class=\"auth-deep-blue-sm-medium\"\n      >Forgot password?</a>\n    </div>\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Sign In\"\n                [disabled]=\"loadInProgress\"\n      />\n      @if (loadInProgress) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n  <p class=\"rtsee-form-label\">\n    <span>Don't have an account?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Create one!</a>\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "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: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -2110,7 +2287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Checkbox,
                         Message,
                         ProgressSpinner
-                    ], standalone: true, template: "<div class=\"auth-container rtsee-form-container\" >\n  <img [ngSrc]=\"authConfiguration.appLogo\"\n       alt=\"Company Logo\"\n       class=\"auth-logo\"\n       height=\"37\"\n       width=\"37\"\n  />\n  <h2 class=\"auth-title\">Sign In to Your Account</h2>\n  <p class=\"auth-title-description\">To access your content, please sign in to your account</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"signInForm\" (ngSubmit)=\"login()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup >\n        <p-floatlabel variant=\"on\">\n          <input id=\"user-email\"\n                 pInputText\n                 [formControl]=\"usernameField\"\n          />\n          <label for=\"user-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (!usernameField.valid && usernameField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is invalid</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"user-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n          />\n          <label for=\"user-password\">Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n\n      @if (!passwordField.valid && passwordField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password is required</p-message>\n      }\n      @if (serverSideError) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >{{serverSideError}}</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-checkbox inputId=\"remember\" [binary]=\"true\" [formControl]=\"rememberField\" />\n      <label for=\"remember\" class=\"ml-2\"> Remember me </label>\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <a href=\"#\"\n         [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)\"\n         class=\"auth-deep-blue-sm-medium\"\n      >Forgot password?</a>\n    </div>\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Sign In\"\n                [disabled]=\"loadInProgress\"\n      />\n      @if (loadInProgress) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n  <p class=\"rtsee-form-label\">\n    <span>Don't have an account?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Create one!</a>\n  </p>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"auth-container rtsee-form-container\" >\n  <img [ngSrc]=\"authConfiguration.appLogo\"\n       alt=\"Company Logo\"\n       class=\"auth-logo\"\n       height=\"37\"\n       width=\"37\"\n  />\n  <h2 class=\"auth-title\">{{ authService.rtseeAuth.labels[RTSeeTextLabelKeys.SIGN_IN_FORM_HEADER] }}</h2>\n  <p class=\"auth-title-description\">{{ authService.rtseeAuth.labels[RTSeeTextLabelKeys.SIGN_IN_TEXT_SUBHEADER] }}</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"signInForm\" (ngSubmit)=\"login()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup >\n        <p-floatlabel variant=\"on\">\n          <input id=\"user-email\"\n                 pInputText\n                 [formControl]=\"usernameField\"\n          />\n          <label for=\"user-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (!usernameField.valid && usernameField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is invalid</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"user-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n          />\n          <label for=\"user-password\">Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n\n      @if (!passwordField.valid && passwordField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password is required</p-message>\n      }\n      @if (serverSideError) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >{{serverSideError}}</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-checkbox inputId=\"remember\" [binary]=\"true\" [formControl]=\"rememberField\" />\n      <label for=\"remember\" class=\"ml-2\">\n        <span>\n          {{authService.rtseeAuth.labels[RTSeeTextLabelKeys.REMEMBER_ME_CHECKBOX_LABEL] }}\n        </span>\n      </label>\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <a href=\"#\"\n         [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)\"\n         class=\"auth-deep-blue-sm-medium\"\n      >Forgot password?</a>\n    </div>\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Sign In\"\n                [disabled]=\"loadInProgress\"\n      />\n      @if (loadInProgress) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n  <p class=\"rtsee-form-label\">\n    <span>Don't have an account?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Create one!</a>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.Router }, { type: RTSeeAuthService }] });
 
 class UtilsService {
@@ -2421,7 +2598,6 @@ class RTSeeAuthComponent {
     constructor(authService) {
         this.authService = authService;
         this.activeComponent = 'sign-in';
-        console.log('constructor', window.location.pathname);
         if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.SIGN_IN])) {
             this.activeComponent = 'sign-in';
         }