@rtsee/ngx 0.0.90 → 0.0.93

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
-import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, DatePipe, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Select } from 'primeng/select';
@@ -37,26 +37,25 @@ import * as i1$2 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
+import { OrderList } from 'primeng/orderlist';
+import { Checkbox } from 'primeng/checkbox';
 import { InputNumber } from 'primeng/inputnumber';
 import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import { OrderList } from 'primeng/orderlist';
-import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
 import { Fieldset } from 'primeng/fieldset';
 import { Tag } from 'primeng/tag';
 import { Listbox } from 'primeng/listbox';
+import { RTSeeRater, RecursiveSelect } from '@rtsee/utilities-ui';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
 import { Tooltip } from 'primeng/tooltip';
 import { PanelMenu } from 'primeng/panelmenu';
-import { RecursiveSelect } from '@rtsee/utilities-ui';
 import { Menu } from 'primeng/menu';
 import { Password } from 'primeng/password';
-import { Checkbox } from 'primeng/checkbox';
 import { AutosizeModule } from 'ngx-autosize';
 import { debounceTime } from 'rxjs/operators';
 import shave from 'shave';
@@ -90,9 +89,7 @@ class RTSeeControlsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-rtsee-controls', imports: [
-                        NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n  <div class=\"rtsee-bottom-panel\">\n    <div class=\"mic rtsee-buttons-container\">\n      @if (rtsee.microphone) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"this.rtsee.disableMicrophone()\"\n        >\n          <span class=\"material-icons-outlined\">mic_none</span>\n        </button>\n      }\n      @if (!rtsee.microphone) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n        >\n          <span class=\"material-icons-outlined\">mic_off</span>\n        </button>\n      }\n    </div>\n\n    <div class=\"video-camera rtsee-buttons-container\">\n      @if (rtsee.camera) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"rtsee.disableCamera()\"\n        >\n          <span class=\"material-icons-outlined\">videocam</span>\n        </button>\n      }\n      @if (!rtsee.camera) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"rtsee.enableCamera()\"\n        >\n          <span class=\"material-icons-outlined\">videocam_off</span>\n        </button>\n      }\n    </div>\n    <div class=\"present rtsee-buttons-container\"\n         [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\"\n    >\n      <button class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"onPresentClicked()\"\n      >\n        <span class=\"material-icons-outlined\">present_to_all</span>\n      </button>\n    </div>\n    <div class=\"call-end rtsee-buttons-container\">\n      <button class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"rtsee.end()\"\n      >\n        <span class=\"material-icons-outlined\">call_end</span>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-controls{display:inline-block;height:100%}.rtsee-controls .rtsee-buttons-container{height:45px;width:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 9px;cursor:pointer;background-color:#fff}.rtsee-controls .rtsee-buttons-container .rtsee-ripple-button{border:none;outline:none;background-color:transparent;cursor:pointer}.rtsee-controls .rtsee-buttons-container:last-child{margin-right:0}.rtsee-controls .rtsee-buttons-container:first-child{margin-left:0}.rtsee-controls .rtsee-buttons-container .mdc-icon-button{background-color:#333;color:#fff}.rtsee-controls .rtsee-buttons-container.call-end{background-color:#ff3232}.rtsee-controls .rtsee-buttons-container.rtsee-present-button-container .mdc-icon-button{background-color:#090}.rtsee-controls .full-screen{align-self:flex-end;padding:12px;cursor:pointer}.rtsee-controls .rtsee-bottom-panel{padding:12px;display:flex;justify-content:center;align-items:center;border-radius:45px;background-color:#000000b3}.rtsee-controls.rtsee-full-screen-controls .rtsee-buttons-container{height:60px;width:60px}\n"] }]
+            args: [{ selector: 'ngx-rtsee-controls', imports: [NgClass], standalone: true, template: "<div class=\"rtsee-controls\" [ngClass]=\"{'rtsee-full-screen-controls' : fullScreenMode }\">\n  <div class=\"rtsee-bottom-panel\">\n    <div class=\"mic rtsee-buttons-container\">\n      @if (rtsee.microphone) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"this.rtsee.disableMicrophone()\"\n        >\n          <span class=\"material-icons-outlined\">mic_none</span>\n        </button>\n      }\n      @if (!rtsee.microphone) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\" (click)=\"this.rtsee.enableMicrophone()\"\n        >\n          <span class=\"material-icons-outlined\">mic_off</span>\n        </button>\n      }\n    </div>\n\n    <div class=\"video-camera rtsee-buttons-container\">\n      @if (rtsee.camera) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"rtsee.disableCamera()\"\n        >\n          <span class=\"material-icons-outlined\">videocam</span>\n        </button>\n      }\n      @if (!rtsee.camera) {\n        <button class=\"rtsee-ripple-button\"\n                type=\"button\"\n                (click)=\"rtsee.enableCamera()\"\n        >\n          <span class=\"material-icons-outlined\">videocam_off</span>\n        </button>\n      }\n    </div>\n    <div class=\"present rtsee-buttons-container\"\n         [ngClass]=\"{'rtsee-present-button-container': rtsee.isPresenter}\"\n    >\n      <button class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"onPresentClicked()\"\n      >\n        <span class=\"material-icons-outlined\">present_to_all</span>\n      </button>\n    </div>\n    <div class=\"call-end rtsee-buttons-container\">\n      <button class=\"rtsee-ripple-button\"\n              type=\"button\"\n              (click)=\"rtsee.end()\"\n      >\n        <span class=\"material-icons-outlined\">call_end</span>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-controls{display:inline-block;height:100%}.rtsee-controls .rtsee-buttons-container{height:45px;width:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 9px;cursor:pointer;background-color:#fff}.rtsee-controls .rtsee-buttons-container .rtsee-ripple-button{border:none;outline:none;background-color:transparent;cursor:pointer}.rtsee-controls .rtsee-buttons-container:last-child{margin-right:0}.rtsee-controls .rtsee-buttons-container:first-child{margin-left:0}.rtsee-controls .rtsee-buttons-container .mdc-icon-button{background-color:#333;color:#fff}.rtsee-controls .rtsee-buttons-container.call-end{background-color:#ff3232}.rtsee-controls .rtsee-buttons-container.rtsee-present-button-container .mdc-icon-button{background-color:#090}.rtsee-controls .full-screen{align-self:flex-end;padding:12px;cursor:pointer}.rtsee-controls .rtsee-bottom-panel{padding:12px;display:flex;justify-content:center;align-items:center;border-radius:45px;background-color:#000000b3}.rtsee-controls.rtsee-full-screen-controls .rtsee-buttons-container{height:60px;width:60px}\n"] }]
         }], propDecorators: { rtsee: [{
                 type: Input
             }], fullScreenMode: [{
@@ -121,13 +118,7 @@ class RtseeSettingsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-rtsee-settings', imports: [
-                        NgClass,
-                        FormsModule,
-                        Select,
-                        FloatLabel,
-                        Button
-                    ], standalone: true, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices rtsee-form-container\">\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.audioInputDevices\"\n                  [(ngModel)]=\"rtSee.audioInputDeviceId\"\n                  (ngModelChange)=\"audioInputChanged()\"\n                  inputId=\"mic_input\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"mic_input\">Microphone</label>\n      </p-floatlabel>\n    </div>\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.audioOutputDevices\"\n                  [(ngModel)]=\"rtSee.audioOutputDeviceId\"\n                  (ngModelChange)=\"audioOutputChanged()\"\n                  inputId=\"audio_output\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"audio_output\">Speaker</label>\n      </p-floatlabel>\n    </div>\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.videoInputDevices\"\n                  [(ngModel)]=\"rtSee.videoInputDeviceId\"\n                  (ngModelChange)=\"videoInputChanged()\"\n                  inputId=\"video_input\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"video_input\">Camera</label>\n      </p-floatlabel>\n    </div>\n  </div>\n\n  <div class=\"rtsee-settings-footer\">\n    <p-button label=\"Close\"\n              (click)=\"rtSee.toggleSettings()\"\n    ></p-button>\n  </div>\n</div>\n", styles: [".rtsee-settings{position:fixed;height:100%;width:100%;inset:0;overflow:auto;box-sizing:border-box;background-color:#404040;border-bottom:1px solid;padding:16px 8px;z-index:4}.rtsee-settings .rtsee-settings-footer{padding-top:16px}.rtsee-settings .rtsee-form-field-container:last-child{padding-bottom:0}.rtsee-settings .rtsee-form-field-container{padding-bottom:16px}.rtsee-settings .rtsee-device-select-field{width:100%}.rtsee-settings .rtsee-device-select-field.p-component.p-overlay{max-height:100%}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\n"] }]
+            args: [{ selector: 'ngx-rtsee-settings', imports: [NgClass, FormsModule, Select, FloatLabel, Button], standalone: true, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices rtsee-form-container\">\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.audioInputDevices\"\n                  [(ngModel)]=\"rtSee.audioInputDeviceId\"\n                  (ngModelChange)=\"audioInputChanged()\"\n                  inputId=\"mic_input\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"mic_input\">Microphone</label>\n      </p-floatlabel>\n    </div>\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.audioOutputDevices\"\n                  [(ngModel)]=\"rtSee.audioOutputDeviceId\"\n                  (ngModelChange)=\"audioOutputChanged()\"\n                  inputId=\"audio_output\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"audio_output\">Speaker</label>\n      </p-floatlabel>\n    </div>\n    <div class=\"rtsee-device-select-wrapper rtsee-form-field-container\">\n      <p-floatlabel variant=\"on\">\n        <p-select [options]=\"rtSee.videoInputDevices\"\n                  [(ngModel)]=\"rtSee.videoInputDeviceId\"\n                  (ngModelChange)=\"videoInputChanged()\"\n                  inputId=\"video_input\"\n                  optionLabel=\"label\"\n                  optionValue=\"deviceId\"\n                  class=\"rtsee-device-select-field\" />\n        <label for=\"video_input\">Camera</label>\n      </p-floatlabel>\n    </div>\n  </div>\n\n  <div class=\"rtsee-settings-footer\">\n    <p-button label=\"Close\"\n              (click)=\"rtSee.toggleSettings()\"\n    ></p-button>\n  </div>\n</div>\n", styles: [".rtsee-settings{position:fixed;height:100%;width:100%;inset:0;overflow:auto;box-sizing:border-box;background-color:#404040;border-bottom:1px solid;padding:16px 8px;z-index:4}.rtsee-settings .rtsee-settings-footer{padding-top:16px}.rtsee-settings .rtsee-form-field-container:last-child{padding-bottom:0}.rtsee-settings .rtsee-form-field-container{padding-bottom:16px}.rtsee-settings .rtsee-device-select-field{width:100%}.rtsee-settings .rtsee-device-select-field.p-component.p-overlay{max-height:100%}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rtSee: [{
                 type: Input
             }], fullScreenMode: [{
@@ -200,11 +191,7 @@ class RtseePeerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseePeerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-rtsee-peer', imports: [
-                        NgClass,
-                        NgIf,
-                        RtseeSoundbarComponent
-                    ], standalone: true, template: "<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera\n}\">\n  <div class=\"rtsee-peer-content\">\n    <div class=\"rtsee-peer-photo\" *ngIf=\"!peer.camera\">\n      <div class=\"rtsee-peer-photo-wrapper\">\n        <div  *ngIf=\"peer.imageUrl\"\n              [style.background-image]=\"'url(' + peer.imageUrl + ')'\"\n              class=\"rtsee-peer-photo-image\"\n        ></div>\n        <img *ngIf=\"!peer.imageUrl\" [src]=\"\" alt=\"peer_photo\" class=\"rtsee-peer-photo-image\">\n      </div>\n      <div class=\"rtsee-peer-info\">\n        <p class=\"rtsee-peer-name\" *ngIf=\"peer.name\">{{peer.name}}</p>\n      </div>\n    </div>\n      <video #videoOutput\n             class=\"rtsee-peer-video\"\n             [autoplay]=\"true\"\n             [srcObject]=\"peer.remoteVideoStream\"\n             playsinline=\"true\"\n      >\n      </video>\n    <div class=\"rtsee-peer-soundbar\">\n      <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ngx-rtsee-peer', imports: [NgClass, NgIf, RtseeSoundbarComponent], standalone: true, template: "<div class=\"rtsee-peer\" [ngClass]=\"{\n'rtsee-peer-video-disabled': !peer.remoteVideoStream || !peer.camera\n}\">\n  <div class=\"rtsee-peer-content\">\n    <div class=\"rtsee-peer-photo\" *ngIf=\"!peer.camera\">\n      <div class=\"rtsee-peer-photo-wrapper\">\n        <div  *ngIf=\"peer.imageUrl\"\n              [style.background-image]=\"'url(' + peer.imageUrl + ')'\"\n              class=\"rtsee-peer-photo-image\"\n        ></div>\n        <img *ngIf=\"!peer.imageUrl\" [src]=\"\" alt=\"peer_photo\" class=\"rtsee-peer-photo-image\">\n      </div>\n      <div class=\"rtsee-peer-info\">\n        <p class=\"rtsee-peer-name\" *ngIf=\"peer.name\">{{peer.name}}</p>\n      </div>\n    </div>\n      <video #videoOutput\n             class=\"rtsee-peer-video\"\n             [autoplay]=\"true\"\n             [srcObject]=\"peer.remoteVideoStream\"\n             playsinline=\"true\"\n      >\n      </video>\n    <div class=\"rtsee-peer-soundbar\">\n      <ngx-rtsee-soundbar [peer]=\"peer\"></ngx-rtsee-soundbar>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { audioOutput: [{
                 type: ViewChild,
                 args: ['audioOutput']
@@ -234,7 +221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         RtseeSettingsComponent,
                         RtseePeerComponent,
-                        RTSeeControlsComponent
+                        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" }]
         }], ctorParameters: () => [], propDecorators: { rtSee: [{
                 type: Input
@@ -257,16 +244,13 @@ class RTSeeAuthService {
             .pipe(tap((res) => this.rtseeAuth.authenticate(res)));
     }
     signUp(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials);
     }
     forgotPassword(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), credentials);
     }
     resetPassword(credentials) {
-        return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, providedIn: 'root' }); }
@@ -274,7 +258,7 @@ class RTSeeAuthService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
@@ -314,14 +298,7 @@ class ProfileComponent {
 }
 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,
-                        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      @if (messenger.myPeer.plan) {\n        <p-message severity=\"success\">\n          <span>{{messenger.myPeer.plan.productName}}</span>\n        </p-message>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                  (click)=\"messenger.openManagePlanPage()\"\n        ></p-button>\n      } @else {\n        <div class=\"rtsee-subscribe-button\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n                    (click)=\"messenger.openPaymentPage()\"\n          ></p-button>\n        </div>\n      }\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" }]
+            args: [{ selector: 'rtsee-profile', imports: [Button, Message, 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      @if (messenger.myPeer.plan) {\n        <p-message severity=\"success\">\n          <span>{{messenger.myPeer.plan.productName}}</span>\n        </p-message>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                  (click)=\"messenger.openManagePlanPage()\"\n        ></p-button>\n      } @else {\n        <div class=\"rtsee-subscribe-button\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n                    (click)=\"messenger.openPaymentPage()\"\n          ></p-button>\n        </div>\n      }\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: [{
@@ -358,10 +335,7 @@ class MessengerHeaderComponent {
 }
 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      >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</p>\n      <rtsee-profile [messenger]=\"messenger\"\n                     [peer]=\"messenger.myPeer\"\n      ></rtsee-profile>\n    }\n  </div>\n</div>\n" }]
+            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      >{{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
             }] } });
@@ -492,11 +466,7 @@ class MessageTimeAndStatusComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageTimeAndStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-message-time-and-status', imports: [
-                        NgIf,
-                        NgClass,
-                        PreloaderComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-message-time-and-status\">\n  <span class=\"rtsee-messenger-message-status\" *ngIf=\"!hideStatus\" [ngClass]=\"{'showing-status-inside-chat': inChat }\">\n    <span *ngIf=\"message.status === 'pending'\"><rtsee-preloader [diameter]=\"5\"></rtsee-preloader></span>\n    <span *ngIf=\"message.status === 'sent'\" class=\"material-icons-outlined rtsee-message-sent-status\">check</span>\n    <span *ngIf=\"message.status === 'delivered'\" class=\"material-icons-outlined rtsee-message-delivered-status\">check</span>\n    <span *ngIf=\"message.status === 'seen'\" class=\"material-icons-outlined rtsee-message-seen-status\">done_all</span>\n  </span>\n  <span class=\"rtsee-messenger-message-time\">{{timeFormatService.formatTimeOrDate(message.createdAt)}}</span>\n</div>\n" }]
+            args: [{ selector: 'rtsee-message-time-and-status', imports: [NgIf, NgClass, PreloaderComponent], standalone: true, template: "<div class=\"rtsee-messenger-message-time-and-status\">\n  <span class=\"rtsee-messenger-message-status\" *ngIf=\"!hideStatus\" [ngClass]=\"{'showing-status-inside-chat': inChat }\">\n    <span *ngIf=\"message.status === 'pending'\"><rtsee-preloader [diameter]=\"5\"></rtsee-preloader></span>\n    <span *ngIf=\"message.status === 'sent'\" class=\"material-icons-outlined rtsee-message-sent-status\">check</span>\n    <span *ngIf=\"message.status === 'delivered'\" class=\"material-icons-outlined rtsee-message-delivered-status\">check</span>\n    <span *ngIf=\"message.status === 'seen'\" class=\"material-icons-outlined rtsee-message-seen-status\">done_all</span>\n  </span>\n  <span class=\"rtsee-messenger-message-time\">{{timeFormatService.formatTimeOrDate(message.createdAt)}}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { message: [{
                 type: Input
             }], hideStatus: [{
@@ -513,7 +483,7 @@ const COMMON_CONSTANTS = {
     customDateFormatDaysJs: 'DD/MM/YYYY',
     customDateTimeFormat: 'dd/MM/YYYY HH:mm',
     defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png',
-    mobileBreakpoint: 800
+    mobileBreakpoint: 800,
 };
 
 class ChatThumbnailComponent {
@@ -527,11 +497,7 @@ class ChatThumbnailComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chat-thumbnail', imports: [
-                        MessageTimeAndStatusComponent,
-                        NgClass,
-                        NgIf
-                    ], standalone: true, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.chatImageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\" alt=\"chat-img\">\n  </div>\n  <div class=\"rtsee-chat-thumbnail-left\">\n    <div class=\"rtsee-chat-thumbnail-name\">\n      <span>{{ chat.chatName }}</span>\n      <div class=\"rtsee-chat-thumbnail-status\">\n        <rtsee-message-time-and-status [message]=\"chat\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </rtsee-message-time-and-status>\n      </div>\n    </div>\n    <div class=\"rtsee-chat-thumbnail-last-message\"\n         [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n         rtseeShave>\n      <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n            *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n      >{{chat.senderName}}</span>\n      <span class=\"rtsee-chat-thumbnail-last-message-text\"\n            *ngIf=\"chat.text\"\n      >{{chat.text}}</span>\n      <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n        <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-chat-thumbnail', imports: [MessageTimeAndStatusComponent, NgClass, NgIf], standalone: true, template: "<div class=\"rtsee-chat-thumbnail\" (click)=\"messenger.openChatById(chat.chatId)\">\n  <div class=\"rtsee-chat-thumbnail-image\">\n    <img [src]=\"chat.chatImageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\" alt=\"chat-img\">\n  </div>\n  <div class=\"rtsee-chat-thumbnail-left\">\n    <div class=\"rtsee-chat-thumbnail-name\">\n      <span>{{ chat.chatName }}</span>\n      <div class=\"rtsee-chat-thumbnail-status\">\n        <rtsee-message-time-and-status [message]=\"chat\"\n                                       [hideStatus]=\"chat && !!(chat.unreadMessagesCount)\">\n        </rtsee-message-time-and-status>\n      </div>\n    </div>\n    <div class=\"rtsee-chat-thumbnail-last-message\"\n         [ngClass]=\"{'rtsee-has-unread': chat.unreadMessagesCount}\"\n         rtseeShave>\n      <span class=\"rtsee-chat-thumbnail-last-message-sender\"\n            *ngIf=\"chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName\"\n      >{{chat.senderName}}</span>\n      <span class=\"rtsee-chat-thumbnail-last-message-text\"\n            *ngIf=\"chat.text\"\n      >{{chat.text}}</span>\n      <div class=\"rtsee-messenger-thumbnail-unread\" *ngIf=\"chat.unreadMessagesCount\">\n        <span class=\"rtsee-messenger-thumbnail-unread-count\">{{chat.unreadMessagesCount}}</span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
@@ -547,10 +513,7 @@ class ChatsListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chats-list', imports: [
-                        NgForOf,
-                        ChatThumbnailComponent
-                    ], standalone: true, template: "<div class=\"rtsee-chats-list\">\n  <div class=\"rtsee-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n<!--    <div class=\"rtsee-chat-thumbnail-separator\" *ngIf=\"!last\"></div>-->\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-chats-list', imports: [NgForOf, ChatThumbnailComponent], standalone: true, template: "<div class=\"rtsee-chats-list\">\n  <div class=\"rtsee-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n<!--    <div class=\"rtsee-chat-thumbnail-separator\" *ngIf=\"!last\"></div>-->\n  </div>\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chats: [{
@@ -568,15 +531,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[widgetHost]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
+class RatingComponent {
+    constructor() {
+        this.stars = [];
+        this.mutable = false;
+        this.rateValue = 0;
+    }
+    ngOnInit() {
+        this.init();
+    }
+    init() {
+        if (this.rate) {
+            this.initStars(this.rate.value, this.rate.maxValue);
+            this.rateValue = this.rate.value;
+        }
+        else if (this.config) {
+            this.mutable = true;
+            this.initStars(this.config.rate?.value || 0, this.config.maxRateValue);
+            this.rateValue = this.config.rate?.value || 0;
+        }
+        else {
+            throw new Error(`Neither rate nor vote config provided!`);
+        }
+    }
+    initStars(value, maxValue) {
+        const stars = [];
+        const full = Math.floor(value);
+        const hasHalf = value - full >= 0.25;
+        for (let i = 0; i < full; i++) {
+            stars.push('full');
+        }
+        if (hasHalf) {
+            stars.push('half');
+        }
+        while (stars.length < maxValue) {
+            stars.push('empty');
+        }
+        this.stars = stars;
+    }
+    onStarClicked(index) {
+        if (!this.config || !this.config.rate) {
+            return;
+        }
+        this.config.rate.value = index + 1;
+        this.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingComponent, isStandalone: true, selector: "rtsee-rating", inputs: { config: "config", rate: "rate" }, ngImport: i0, template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\">{{ rateValue }}</span>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rating', imports: [NgClass], template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\">{{ rateValue }}</span>\n  }\n</div>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], rate: [{
+                type: Input
+            }] } });
+
 class CallWidgetComponent {
     ngOnInit() { }
     joinCall() {
         console.log('message data: ', this.message.data);
-        if (!this.messenger || (!this.message.data?.roomId && !this.chat.conferenceRoom)) {
+        if (!this.messenger ||
+            (!this.message.data?.roomId && !this.chat.conferenceRoom)) {
             console.log('No Room Id specified or no messenger!');
             return;
         }
@@ -592,9 +613,7 @@ class CallWidgetComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CallWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-call-widget', imports: [
-                        NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-call-widget\">\n  <p> The call has started</p>\n  <button class=\"rtsee-join-call-btn\"\n          (click)=\"joinCall()\">\n    Join Call\n  </button>\n</div>\n" }]
+            args: [{ selector: 'ngx-call-widget', imports: [NgClass], standalone: true, template: "<div class=\"rtsee-call-widget\">\n  <p> The call has started</p>\n  <button class=\"rtsee-join-call-btn\"\n          (click)=\"joinCall()\">\n    Join Call\n  </button>\n</div>\n" }]
         }], propDecorators: { message: [{
                 type: Input
             }], messenger: [{
@@ -634,6 +653,7 @@ class MessageComponent {
         this.componentFactoryResolver = componentFactoryResolver;
         this.timeFormatService = timeFormatService;
     }
+    ngOnInit() { }
     ngAfterViewInit() {
         /* eslint-disable */
         if (this.message.widget) {
@@ -660,7 +680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{ selector: 'rtsee-message', imports: [
                         NgClass,
                         MessageTimeAndStatusComponent,
-                        WidgetDirective
+                        WidgetDirective,
+                        RatingComponent,
                     ], standalone: true, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: MessageWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }], propDecorators: { chat: [{
                 type: Input
@@ -689,20 +710,17 @@ class MessagesListComponent {
     }
     onWindowScroll(event) {
         // Get the vertical scroll position
-        const verticalOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
+        const verticalOffset = window.pageYOffset ||
+            this.document.documentElement.scrollTop ||
+            this.document.body.scrollTop ||
+            0;
         if (window.innerWidth >= COMMON_CONSTANTS.mobileBreakpoint) {
             return;
         }
         // You can add logic here, e.g., show a 'scroll to top' button
         if (verticalOffset < 300) {
-            // Logic to show button
-            console.log('scrolled to top');
             this.onScrolledToTop();
         }
-        else {
-            console.log('scrolled to bottom');
-            // Logic to hide button
-        }
     }
     ngOnInit() {
         this.chat.on(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
@@ -730,10 +748,6 @@ class MessagesListComponent {
         this.chat.loadRemoteMessages('back');
     }
     onScroll() {
-        // if (this.scrollContainer.nativeElement.scrollTop < 1) {
-        //   this.scrollContainer.nativeElement.scrollTop = 1;
-        // }
-        console.log('scroll down');
         if (this.chat.messagesLoadInProgress) {
             return;
         }
@@ -749,7 +763,6 @@ class MessagesListComponent {
                 this.scroller.scrollToPosition([0, document.body.scrollHeight]);
             }
             if (!this.scrollContainer?.nativeElement?.scrollHeight) {
-                console.log('scrollToBottom early return');
                 return;
             }
             try {
@@ -801,14 +814,14 @@ class MessagesListComponent {
                     throw new Error('Either m.id or m.temporary id is required');
                 }
                 const isFromMe = message.from.id === this.messenger.clientId;
-                const isSenderVisible = (this.chat.type !== RTSeeChatTypes.INDIVIDUAL && !isFromMe)
-                    || this.chat.type === RTSeeChatTypes.COMMENTS
-                    || this.chat.type === RTSeeChatTypes.RATINGS;
+                const isSenderVisible = (this.chat.type !== RTSeeChatTypes.INDIVIDUAL && !isFromMe) ||
+                    this.chat.type === RTSeeChatTypes.COMMENTS ||
+                    this.chat.type === RTSeeChatTypes.RATINGS;
                 currentGroup = {
                     id: message.id || message.temporaryId,
                     sender: message.from,
                     senderVisible: isSenderVisible,
-                    messages: [message]
+                    messages: [message],
                 };
             }
         }
@@ -880,18 +893,17 @@ class MessagesListComponent {
         if (!this.chat.messages.length) {
             return null;
         }
-        return [this.chat.messages[0], this.chat.messages[this.chat.messages.length - 1]];
+        return [
+            this.chat.messages[0],
+            this.chat.messages[this.chat.messages.length - 1],
+        ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i2$1.ViewportScroller }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessagesListComponent, isStandalone: true, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-messages-list', imports: [
-                        InfiniteScrollDirective,
-                        MessageComponent,
-                        NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-messages-list', imports: [InfiniteScrollDirective, MessageComponent, NgClass], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -941,10 +953,7 @@ class ChatInputComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chat-input', imports: [
-                        ReactiveFormsModule,
-                        Textarea
-                    ], standalone: true, template: "<div #chatInput\n     class=\"rtsee-chat-input\"\n     xmlns=\"http://www.w3.org/1999/html\"\n>\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keyup)=\"onKeyUp($event)\"\n                formControlName=\"message\"\n                pTextarea\n                placeholder=\"Type a message...\"\n                class=\"rtsee-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\"\n  >\n    <span class=\"pi pi-send\"></span>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'rtsee-chat-input', imports: [ReactiveFormsModule, Textarea], standalone: true, template: "<div #chatInput\n     class=\"rtsee-chat-input\"\n     xmlns=\"http://www.w3.org/1999/html\"\n>\n  <div class=\"rtsee-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rtsee-chat-input-form\">\n      <textarea [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keyup)=\"onKeyUp($event)\"\n                formControlName=\"message\"\n                pTextarea\n                placeholder=\"Type a message...\"\n                class=\"rtsee-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <button (click)=\"sendMessage()\"\n          class=\"rtsee-send-message-button\"\n          type=\"submit\"\n  >\n    <span class=\"pi pi-send\"></span>\n  </button>\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chat: [{
@@ -965,10 +974,10 @@ class ViewportObserverDirective {
         const options = {
             root: null, // observing relative to the document's viewport
             rootMargin: '0px',
-            threshold: 0
+            threshold: 0,
         };
         this.observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
+            entries.forEach((entry) => {
                 // entry.isIntersecting is true if the element is in the viewport
                 this.inViewport.emit(entry.isIntersecting);
             });
@@ -987,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[rtseeViewportObserver]',
-                    standalone: true // Use `standalone: true` in modern Angular
+                    standalone: true, // Use `standalone: true` in modern Angular
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inViewport: [{
                 type: Output
@@ -1003,7 +1012,10 @@ class ChatComponent {
             console.log(`Either chat ot chatData is required!`);
         }
         if (!this.chat && this.chatData) {
-            this.chat = this.messenger.addStandaloneChat(this.chatData);
+            this.chat = this.messenger.addStandaloneChat({
+                ...this.chatData,
+                utilitiesSignalingClient: this.entity?.signalingClient,
+            });
             this.chat.loadRemoteMessages('back');
         }
     }
@@ -1013,7 +1025,7 @@ class ChatComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -1021,12 +1033,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MessagesListComponent,
                         ChatInputComponent,
                         ViewportObserverDirective,
-                        NgClass
+                        NgClass,
                     ], standalone: true, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
             }], chatData: [{
                 type: Input
+            }], entity: [{
+                type: Input
             }], messenger: [{
                 type: Input
             }] } });
@@ -1036,8 +1050,7 @@ class RTSeeCropperComponent {
         this.loadInProgress = true;
         this.nextClicked = new EventEmitter();
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     onCropperReady() {
         this.loadInProgress = false;
         this.cropper.setCropperElem(this.imageCropper);
@@ -1059,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         RadioButton,
                         PreloaderComponent,
-                        Button
+                        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
@@ -1102,11 +1115,7 @@ class RTSeeImageUploaderComponent {
 }
 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" }]
+            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]
@@ -1122,16 +1131,16 @@ class ManageProfileComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(141)
-                ]
+                    Validators.maxLength(141),
+                ],
             }),
             lastName: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(141)
-                ]
-            })
+                    Validators.maxLength(141),
+                ],
+            }),
         });
     }
     ngOnInit() {
@@ -1150,7 +1159,7 @@ class ManageProfileComponent {
         }
         await this.manageProfile.save({
             firstName: this.firstNameField.getRawValue(),
-            lastName: this.lastNameField.getRawValue()
+            lastName: this.lastNameField.getRawValue(),
         });
     }
     get firstNameField() {
@@ -1171,7 +1180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Message,
                         RTSeeImageUploaderComponent,
                         ReactiveFormsModule,
-                        InputText
+                        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
@@ -1191,10 +1200,7 @@ class PaymentProductSnippetComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-payment-product-snippet', imports: [
-                        Card,
-                        Button
-                    ], template: "<div class=\"rtsee-payment-product-snippet\">\n  <p-card [header]=\"product.name\">\n    <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-product-price\">\n          <p-card [header]=\"price.label\" >\n            <p>{{price.description}}</p>\n            <p-button label=\"Select Plan\"\n                      (click)=\"selectPrice(price)\"\n            ></p-button>\n          </p-card>\n        </div>\n      }\n    </div>\n  </p-card>\n</div>\n" }]
+            args: [{ selector: 'rtsee-payment-product-snippet', imports: [Card, Button], template: "<div class=\"rtsee-payment-product-snippet\">\n  <p-card [header]=\"product.name\">\n    <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-product-price\">\n          <p-card [header]=\"price.label\" >\n            <p>{{price.description}}</p>\n            <p-button label=\"Select Plan\"\n                      (click)=\"selectPrice(price)\"\n            ></p-button>\n          </p-card>\n        </div>\n      }\n    </div>\n  </p-card>\n</div>\n" }]
         }], propDecorators: { product: [{
                 type: Input
             }], priceSelected: [{
@@ -1213,17 +1219,16 @@ class PaymentsService {
     }
     createSession(options) {
         if (!this.paymentsConfig) {
-            throw new Error("Payments not configured");
+            throw new Error('Payments not configured');
         }
-        return this.http
-            .post(this.paymentsConfig.createSessionEndpoint, options);
+        return this.http.post(this.paymentsConfig.createSessionEndpoint, options);
     }
     getSession() {
         if (!this.paymentsConfig) {
-            throw new Error("Payments not configured");
+            throw new Error('Payments not configured');
         }
         if (!this.paymentsConfig.sessionId) {
-            throw new Error("No SessionId provided");
+            throw new Error('No SessionId provided');
         }
         return this.http
             .get(`${this.paymentsConfig.getSessionEndpoint}/?sessionId=${this.paymentsConfig.sessionId}`)
@@ -1234,7 +1239,7 @@ class PaymentsService {
     }
     getProducts() {
         if (!this.paymentsConfig || !this.paymentsConfig.appId) {
-            throw new Error("Payments Config not initialized!");
+            throw new Error('Payments Config not initialized!');
         }
         this.paymentsConfig.setProductsLoadInProgress(true);
         return this.http
@@ -1243,11 +1248,10 @@ class PaymentsService {
     }
     unsubscribe(subscriptionId) {
         if (!this.paymentsConfig || !this.paymentsConfig.appId) {
-            throw new Error("Payments Config not initialized!");
+            throw new Error('Payments Config not initialized!');
         }
-        return this.http
-            .post(`${this.paymentsConfig?.unsubscribeEndpoint}`, {
-            subscriptionId
+        return this.http.post(`${this.paymentsConfig?.unsubscribeEndpoint}`, {
+            subscriptionId,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1256,7 +1260,7 @@ class PaymentsService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
@@ -1271,7 +1275,9 @@ class PaymentPageComponent {
         if (!this.paymentsService.paymentsConfig?.publicKey) {
             return;
         }
-        this.stripe = await loadStripe(this.paymentsService.paymentsConfig.publicKey) || undefined;
+        this.stripe =
+            (await loadStripe(this.paymentsService.paymentsConfig.publicKey)) ||
+                undefined;
         this.getProducts();
     }
     getProducts() {
@@ -1279,7 +1285,8 @@ class PaymentPageComponent {
     }
     selectPlan(price) {
         const priceId = price.priceId;
-        if (!this.messenger.payments || !this.messenger.payments.createSessionEndpoint) {
+        if (!this.messenger.payments ||
+            !this.messenger.payments.createSessionEndpoint) {
             console.log('No payments config.');
             return;
         }
@@ -1289,12 +1296,14 @@ class PaymentPageComponent {
         }
         this.planSelected = true;
         this.loadInProgress = true;
-        this.paymentsService.createSession({
+        this.paymentsService
+            .createSession({
             priceId: priceId,
             userId: this.messenger.myPeer.clientId,
             route: `/profile/${this.messenger.myPeer.clientId}`,
-            applicationId: this.messenger.myPeer.rtseeAppId
-        }).subscribe((response) => {
+            applicationId: this.messenger.myPeer.rtseeAppId,
+        })
+            .subscribe((response) => {
             void this.initCheckout(response.clientSecret);
         });
     }
@@ -1304,7 +1313,7 @@ class PaymentPageComponent {
             return;
         }
         const checkout = await this.stripe.initEmbeddedCheckout({
-            clientSecret: secret
+            clientSecret: secret,
         });
         if (!checkout) {
             return;
@@ -1327,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ReactiveFormsModule,
                         ProgressSpinner,
                         PaymentProductSnippetComponent,
-                        Button
+                        Button,
                     ], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments && !planSelected) {\n    @if (messenger.payments.products) {\n      <div class=\"rtsee-payment-page-products\">\n        @for (product of messenger.payments.products ; track product.id) {\n          <rtsee-payment-product-snippet [product]=\"product\"\n                                         (priceSelected)=\"selectPlan($event)\"\n          ></rtsee-payment-product-snippet>\n        }\n      </div>\n    } @else {\n      <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n    }\n  }\n  @if (loadInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
                 type: Input
@@ -1346,7 +1355,9 @@ class PaymentValidationPageComponent {
         if (!this.paymentsService.paymentsConfig?.publicKey) {
             return;
         }
-        this.stripe = await loadStripe(this.paymentsService.paymentsConfig.publicKey) || undefined;
+        this.stripe =
+            (await loadStripe(this.paymentsService.paymentsConfig.publicKey)) ||
+                undefined;
         this.validatePayment();
     }
     validatePayment() {
@@ -1365,11 +1376,7 @@ class PaymentValidationPageComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-payment-validation-page', imports: [
-                        ReactiveFormsModule,
-                        ProgressSpinner,
-                        Button
-                    ], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments?.validationInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-payment-validation-page', imports: [ReactiveFormsModule, ProgressSpinner, Button], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n  @if (messenger.payments?.validationInProgress) {\n    <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n              (click)=\"messenger.closePaymentPage()\"\n              severity=\"warn\"\n    ></p-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
                 type: Input
             }], checkoutContainer: [{
@@ -1400,11 +1407,7 @@ class ManagePlanComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManagePlanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-plan', imports: [
-                        Card,
-                        Divider,
-                        Button
-                    ], template: "<div class=\"rtsee-manage-plan\">\n  <h2>{{messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]}}</h2>\n  <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n            severity=\"secondary\"\n            (click)=\"messenger.closeManagePlanPage()\"\n  ></p-button>\n  @if (plan) {\n    <p-card [header]=\"plan.productName\">\n      <p>{{plan.productDescription}}</p>\n      <p-divider></p-divider>\n      <div class=\"rtsee-manage-plan-info\">\n        <p>Active From: {{activeFromFormated}}</p>\n        <p>Active To: {{activeToFormated}}</p>\n      </div>\n      <p-button [label]=\"'Unsubscribe'\"\n                (click)=\"onUnsubscribeClicked()\"\n      ></p-button>\n    </p-card>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-manage-plan', imports: [Card, Divider, Button], template: "<div class=\"rtsee-manage-plan\">\n  <h2>{{messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]}}</h2>\n  <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n            severity=\"secondary\"\n            (click)=\"messenger.closeManagePlanPage()\"\n  ></p-button>\n  @if (plan) {\n    <p-card [header]=\"plan.productName\">\n      <p>{{plan.productDescription}}</p>\n      <p-divider></p-divider>\n      <div class=\"rtsee-manage-plan-info\">\n        <p>Active From: {{activeFromFormated}}</p>\n        <p>Active To: {{activeToFormated}}</p>\n      </div>\n      <p-button [label]=\"'Unsubscribe'\"\n                (click)=\"onUnsubscribeClicked()\"\n      ></p-button>\n    </p-card>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
                 type: Input
             }] } });
@@ -1414,7 +1417,7 @@ class MessengerComponent {
         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  'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\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\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\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"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
+    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  'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\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\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\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", "entity", "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"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -1429,7 +1432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ManageProfileComponent,
                         PaymentPageComponent,
                         PaymentValidationPageComponent,
-                        ManagePlanComponent
+                        ManagePlanComponent,
                     ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded,\n  'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\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\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rtsee-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\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" }]
         }], propDecorators: { messenger: [{
                 type: Input
@@ -1520,10 +1523,7 @@ class EventThumbnailComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-event-thumbnail', imports: [
-                        WidgetDirective,
-                        NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail\"\n         [ngClass]=\"{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">{{event.name}}</div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.data) {\n          <div class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n               [title]=\"tooltip\"\n          >\n          <span class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n          >info</span>\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-event-thumbnail', imports: [WidgetDirective, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail\"\n         [ngClass]=\"{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">{{event.name}}</div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.data) {\n          <div class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n               [title]=\"tooltip\"\n          >\n          <span class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n          >info</span>\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: EventsWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }, { type: i0.ChangeDetectorRef }], propDecorators: { event: [{
                 type: Input
             }], widgetHost: [{
@@ -1540,11 +1540,7 @@ class RtseeEventsDashboardSessionComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [
-                        NgIf,
-                        EventThumbnailComponent,
-                        SlicePipe
-                    ], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\" *ngIf=\"session.info\">\n    <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n    <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n    <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n      <span *ngIf=\"session.info.deviceType === 'smartphone' && !session.info.botName\"\n        class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n      >phone_iphone</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'tablet' && !session.info.botName\"\n      >tablet_mac</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'desktop' && !session.info.botName\"\n      >computer</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.botName\"\n      >smart_toy</span>\n    </div>\n  </div>\n  <ul *ngIf=\"session.events && session.events.length\"\n      class=\"rtsee-events-dashboard-session-events-list\"\n  >\n    @for (event of session.events | slice:0:5; track event.id) {\n      <li class=\"rtsee-events-dashboard-session-event\">\n        <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n      </li>\n    }\n  </ul>\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [NgIf, EventThumbnailComponent, SlicePipe], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\" *ngIf=\"session.info\">\n    <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n    <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n    <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n      <span *ngIf=\"session.info.deviceType === 'smartphone' && !session.info.botName\"\n        class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n      >phone_iphone</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'tablet' && !session.info.botName\"\n      >tablet_mac</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'desktop' && !session.info.botName\"\n      >computer</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.botName\"\n      >smart_toy</span>\n    </div>\n  </div>\n  <ul *ngIf=\"session.events && session.events.length\"\n      class=\"rtsee-events-dashboard-session-events-list\"\n  >\n    @for (event of session.events | slice:0:5; track event.id) {\n      <li class=\"rtsee-events-dashboard-session-event\">\n        <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n      </li>\n    }\n  </ul>\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { session: [{
                 type: Input
             }] } });
@@ -1563,9 +1559,7 @@ class RtseeEventsDashboardClientThumbnailComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-rtsee-events-dashboard-client-thumbnail', imports: [
-                        RtseeEventsDashboardSessionComponent
-                    ], standalone: true, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div class=\"rtsee-dashboard-client-header-image\"\n           [style.background-image]=\"'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{ client.name || client.id }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\">chat_bubble</span>\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ngx-rtsee-events-dashboard-client-thumbnail', imports: [RtseeEventsDashboardSessionComponent], standalone: true, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div class=\"rtsee-dashboard-client-header-image\"\n           [style.background-image]=\"'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{ client.name || client.id }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\">chat_bubble</span>\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: DefaultImagesService }], propDecorators: { dashboard: [{
                 type: Input
             }], client: [{
@@ -1578,9 +1572,7 @@ class RtseeEventsDashboardComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-events-dashboard', imports: [
-                        RtseeEventsDashboardClientThumbnailComponent
-                    ], standalone: true, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-events-dashboard', imports: [RtseeEventsDashboardClientThumbnailComponent], standalone: true, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { eventsDashboard: [{
                 type: Input
             }] } });
@@ -1596,7 +1588,7 @@ class JoinCallComponent {
         this.messageService.add({
             severity: 'success',
             summary: 'Link Copied!',
-            detail: 'The link was copied to clipboard!'
+            detail: 'The link was copied to clipboard!',
         });
         this.recentlyCopied = true;
         setTimeout(() => {
@@ -1608,12 +1600,7 @@ class JoinCallComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-join-call', imports: [
-                        Button,
-                        CdkCopyToClipboard,
-                        Message,
-                        Toast
-                    ], providers: [MessageService], template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-join-call', imports: [Button, CdkCopyToClipboard, Message, Toast], providers: [MessageService], template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.MessageService }], propDecorators: { presentation: [{
                 type: Input
             }], room: [{
@@ -1625,54 +1612,15 @@ class PresentationHeaderComponent {
         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: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\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</header>\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: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\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 || undefined\"\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</header>\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,
-            args: [{ selector: 'rtsee-presentation-header', imports: [
-                        Button,
-                        NgClass,
-                        Chip,
-                        JoinCallComponent
-                    ], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\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</header>\n" }]
+            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\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 || undefined\"\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</header>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
 
-class RatingComponent {
-    constructor() {
-        this.stars = [];
-    }
-    ngOnInit() {
-        this.initStars();
-    }
-    initStars() {
-        const stars = [];
-        const full = Math.floor(this.rating.value);
-        const hasHalf = this.rating.value - full >= 0.25;
-        for (let i = 0; i < full; i++) {
-            stars.push('full');
-        }
-        if (hasHalf) {
-            stars.push('half');
-        }
-        while (stars.length < this.rating.max) {
-            stars.push('empty');
-        }
-        this.stars = stars;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingComponent, isStandalone: true, selector: "rtsee-rating", inputs: { rating: "rating" }, ngImport: i0, template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\" [ngClass]=\"{\n      'rtsee-rating-star-full': star === 'full',\n      'rtsee-rating-star-half': star === 'half',\n      'rtsee-rating-star-empty': star === 'empty',\n    }\">\u2605</span>\n  }\n  <span class=\"rtsee-rating-number\">{{ rating.value }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-rating', imports: [
-                        NgClass
-                    ], template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\" [ngClass]=\"{\n      'rtsee-rating-star-full': star === 'full',\n      'rtsee-rating-star-half': star === 'half',\n      'rtsee-rating-star-empty': star === 'empty',\n    }\">\u2605</span>\n  }\n  <span class=\"rtsee-rating-number\">{{ rating.value }}</span>\n</div>\n" }]
-        }], propDecorators: { rating: [{
-                type: Input
-            }] } });
-
 class StoryThumbnailComponent {
     constructor() {
         this.progressPercent = 0;
@@ -1680,18 +1628,15 @@ class StoryThumbnailComponent {
     }
     ngOnInit() {
         if (this.story.preselectedSlideNumber) {
-            this.progressPercent = Math
-                .round((this.story.preselectedSlideNumber / this.story.totalSlides) * 100);
+            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    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\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    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      <rtsee-rating [rating]=\"{max: 5, value: 3.5}\"></rtsee-rating>\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-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        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["rating"] }] }); }
+    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    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\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    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-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        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-thumbnail', imports: [
-                        RatingComponent
-                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\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    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      <rtsee-rating [rating]=\"{max: 5, value: 3.5}\"></rtsee-rating>\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-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        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\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    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-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        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }] } });
@@ -1712,8 +1657,7 @@ class SlideComponent {
         }
     }
     ngAfterViewInit() {
-        const parentSlideEl = this.elementRef.nativeElement
-            .closest('.story-player-slide-container');
+        const parentSlideEl = this.elementRef.nativeElement.closest('.story-player-slide-container');
         if (!parentSlideEl) {
             return;
         }
@@ -1730,7 +1674,7 @@ class SlideComponent {
     }
     handleScroll(position, scrollHeight, clientHeight) {
         const BUFFER = 50;
-        const isAtBottom = Math.abs((scrollHeight - position) - clientHeight) < 10;
+        const isAtBottom = Math.abs(scrollHeight - position - clientHeight) < 10;
         if (position > this.lastScrollPosition + BUFFER) {
             if (!this.scrollingDown) {
                 this.scrollingDown = true;
@@ -1757,12 +1701,7 @@ class SlideComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-slide', imports: [
-                        NgStyle,
-                        WidgetDirective,
-                        Button,
-                        NgClass
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-slide', imports: [NgStyle, WidgetDirective, Button, NgClass], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n                  (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { story: [{
                 type: Input
             }], slide: [{
@@ -1781,7 +1720,7 @@ class StoryPlayerComponent {
     ngAfterViewInit() {
         const swiper = new Swiper(this.swiperEl.nativeElement, {
             effect: 'cards',
-            grabCursor: true
+            grabCursor: true,
         });
         this.story.initSwiper(swiper);
     }
@@ -1790,10 +1729,7 @@ class StoryPlayerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-player', imports: [
-                        NgClass,
-                        SlideComponent
-                    ], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-player', imports: [NgClass, SlideComponent], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { story: [{
                 type: Input
             }], settings: [{
@@ -1803,33 +1739,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['swiperContainer']
             }] } });
 
-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                        (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,
-            args: [{ selector: 'rtsee-autocomplete', imports: [
-                        AutoCompleteModule,
-                        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                        (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
-            }] } });
-
 class ManageSlidesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlidesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ManageSlidesComponent, isStandalone: true, selector: "rtsee-manage-slides", inputs: { manageSlides: "manageSlides" }, ngImport: i0, template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n                 [disabled]=\"manageSlides.loadInProgress\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n", dependencies: [{ 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"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlidesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-slides', imports: [
-                        OrderList,
-                        Button,
-                        NgClass
-                    ], template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n                 [disabled]=\"manageSlides.loadInProgress\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-manage-slides', imports: [OrderList, Button, NgClass], template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n                 [disabled]=\"manageSlides.loadInProgress\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n" }]
         }], propDecorators: { manageSlides: [{
                 type: Input
             }] } });
@@ -1842,9 +1758,9 @@ class ManageSlideComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131000)
-                ]
-            })
+                    Validators.maxLength(131000),
+                ],
+            }),
         });
     }
     ngOnInit() {
@@ -1876,200 +1792,384 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         InputGroup,
                         Message,
                         Textarea,
-                        Button
+                        Button,
                     ], template: "<div class=\"rtsee-presentation-manage-story-slide\">\n  <div class=\"rtsee-manage-story-slide-info rtsee-form-container\">\n    <div class=\"rtsee-manage-story-image\">\n      <rtsee-image-uploader [imageUploader]=\"manageSlide.imageUploader\"\n      ></rtsee-image-uploader>\n    </div>\n\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"slideForm\"\n          (ngSubmit)=\"submit()\"\n    >\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"textField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"textField.invalid && textField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-description-field\">Text</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (textField.hasError('required') && textField.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      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageSlide.cancel()\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageSlide: [{
                 type: Input
             }] } });
 
-class ManageStoryComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.storyForm = this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
-            }),
-            description: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
-            }),
-            averageReadTime: this.formBuilder.control(0),
-            isPublished: this.formBuilder.control(false),
-            isDiscussable: this.formBuilder.control(false)
-        });
-    }
-    submit() {
-        if (this.storyForm.valid) {
-            void this.manageStory.save({
-                name: this.nameField.value,
-                description: this.descriptionField.value,
-                averageReadTime: this.averageReadTimeField.value,
-                commentsEnabled: this.isDiscussableField.value,
-                isPublished: this.isPublishedField.value
-            });
-        }
-        else {
-            this.storyForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
-        }
-    }
-    ngOnInit() {
-        this.nameField.setValue(this.manageStory.story.name);
-        this.descriptionField.setValue(this.manageStory.story.description || '');
-        this.averageReadTimeField.setValue(this.manageStory.story.averageReadTime || 0);
-        this.isPublishedField.setValue(this.manageStory.story.isPublished || false);
-        this.isDiscussableField.setValue(this.manageStory.story.commentsEnabled || false);
-    }
-    get nameField() {
-        return this.storyForm.get('name');
-    }
-    get descriptionField() {
-        return this.storyForm.get('description');
-    }
-    get averageReadTimeField() {
-        return this.storyForm.get('averageReadTime');
-    }
-    get isPublishedField() {
-        return this.storyForm.get('isPublished');
-    }
-    get isDiscussableField() {
-        return this.storyForm.get('isDiscussable');
-    }
-    disableFormFields() {
-        this.nameField.disable();
-        this.descriptionField.disable();
-        this.averageReadTimeField.disable();
+class TextFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
     }
-    enableFormFields() {
-        this.nameField.disable();
-        this.descriptionField.disable();
-        this.averageReadTimeField.disable();
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\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]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">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        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-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-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              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { 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: "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.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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { 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: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TextFieldComponent, isStandalone: true, selector: "rtsee-field-text", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             pInputText\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-story', imports: [
-                        FloatLabel,
-                        FormsModule,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        ReactiveFormsModule,
-                        Textarea,
-                        InputNumber,
-                        RTSeeImageUploaderComponent,
-                        Button,
-                        AutocompleteComponent,
-                        ManageSlidesComponent,
-                        ManageSlideComponent,
-                        Divider,
-                        ToggleSwitch
-                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\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]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">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        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-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-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              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageStory: [{
+            args: [{ selector: "rtsee-field-text", standalone: true, imports: [FormsModule, InputText, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             pInputText\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
                 type: Input
+            }], fieldChanged: [{
+                type: Output
             }] } });
 
-class ManageStoriesComponent {
-    ngOnInit() {
-        this.manageStories.init();
+class TextareaFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { 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: 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TextareaFieldComponent, isStandalone: true, selector: "rtsee-field-textarea", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <textarea [id]=\"field.name\"\n                class=\"rtsee-form-field\"\n                pTextarea\n                rows=\"3\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></textarea>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-stories', imports: [
-                        ManageStoryComponent,
-                        Button,
-                        OrderList,
-                        NgClass
-                    ], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { manageStories: [{
+            args: [{ selector: "rtsee-field-textarea", standalone: true, imports: [FormsModule, Textarea, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <textarea [id]=\"field.name\"\n                class=\"rtsee-form-field\"\n                pTextarea\n                rows=\"3\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></textarea>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
                 type: Input
+            }], fieldChanged: [{
+                type: Output
             }] } });
 
-class ManageCategoryComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.categoryForm = this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
-            }),
-            description: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
-            })
-        });
-    }
-    ngOnInit() {
-        this.nameField.setValue(this.manageCategory.category.name);
-        this.descriptionField.setValue(this.manageCategory.category.description || '');
-    }
-    submit() {
-        if (this.categoryForm.valid) {
-            void this.manageCategory.save({
-                name: this.nameField.value,
-                description: this.descriptionField.value
-            });
-        }
-        else {
-            this.categoryForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
-        }
-    }
-    get nameField() {
-        return this.categoryForm.get('name');
+class CheckboxFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
     }
-    get descriptionField() {
-        return this.categoryForm.get('description');
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoryComponent, isStandalone: true, selector: "rtsee-manage-category", inputs: { manageCategory: "manageCategory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\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]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">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-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-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      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.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: "ngmodule", type: FormsModule }, { 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: "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: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxFieldComponent, isStandalone: true, selector: "rtsee-field-checkbox", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container flex items-center\">\n  <p-checkbox [inputId]=\"field.name\"\n              [binary]=\"true\"\n              [(ngModel)]=\"field.value\"\n              (ngModelChange)=\"onModelChange()\"\n  ></p-checkbox>\n  <label [for]=\"field.name\" class=\"ml-2\">{{ field.name }}</label>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ 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: 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-category', imports: [
-                        Button,
-                        FloatLabel,
-                        FormsModule,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        Textarea,
-                        ReactiveFormsModule
-                    ], template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\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]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">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-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-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      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageCategory: [{
+            args: [{ selector: "rtsee-field-checkbox", standalone: true, imports: [FormsModule, Checkbox, Message], template: "<div class=\"rtsee-form-field-container flex items-center\">\n  <p-checkbox [inputId]=\"field.name\"\n              [binary]=\"true\"\n              [(ngModel)]=\"field.value\"\n              (ngModelChange)=\"onModelChange()\"\n  ></p-checkbox>\n  <label [for]=\"field.name\" class=\"ml-2\">{{ field.name }}</label>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
                 type: Input
+            }], fieldChanged: [{
+                type: Output
             }] } });
 
-class ManageCategoriesComponent {
-    ngOnInit() {
-        this.manageCategories.init();
+class RadioFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoriesComponent, isStandalone: true, selector: "rtsee-manage-categories", inputs: { manageCategories: "manageCategories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.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: ManageCategoryComponent, selector: "rtsee-manage-category", inputs: ["manageCategory"] }] }); }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioFieldComponent, isStandalone: true, selector: "rtsee-field-radio", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-radio-group-label font-semibold\">{{ field.name }}</div>\n  @for (option of field.radioOptions; track option.value) {\n    <div class=\"flex items-center mt-2\">\n      <p-radioButton [name]=\"field.name\"\n                     [value]=\"option.value\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [inputId]=\"field.name + '_' + option.value\"\n      ></p-radioButton>\n      <label [for]=\"field.name + '_' + option.value\" class=\"ml-2\">{{ option.label }}</label>\n    </div>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ 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: 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: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-categories', imports: [
-                        Button,
-                        ManageCategoryComponent
-                    ], template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { manageCategories: [{
+            args: [{ selector: "rtsee-field-radio", standalone: true, imports: [FormsModule, RadioButton, Message], template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-radio-group-label font-semibold\">{{ field.name }}</div>\n  @for (option of field.radioOptions; track option.value) {\n    <div class=\"flex items-center mt-2\">\n      <p-radioButton [name]=\"field.name\"\n                     [value]=\"option.value\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [inputId]=\"field.name + '_' + option.value\"\n      ></p-radioButton>\n      <label [for]=\"field.name + '_' + option.value\" class=\"ml-2\">{{ option.label }}</label>\n    </div>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class NumberFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: NumberFieldComponent, isStandalone: true, selector: "rtsee-field-number", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ 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: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NumberFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-number", standalone: true, imports: [FormsModule, InputNumber, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+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]=\"true\"\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,
+            args: [{ selector: 'rtsee-autocomplete', imports: [AutoCompleteModule, 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]=\"true\"\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
+            }] } });
+
+class AutocompleteFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.field.autocomplete.on("select", () => {
+            this.onModelChange();
+        });
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AutocompleteFieldComponent, isStandalone: true, selector: "rtsee-field-autocomplete", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-autocomplete [config]=\"field.autocomplete\"></rtsee-autocomplete>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-autocomplete", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-autocomplete [config]=\"field.autocomplete\"></rtsee-autocomplete>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class RecursiveSelectComponent {
+    constructor() {
+        this.value = undefined;
+    }
+    ngOnInit() {
+        this.value = this.selectModel.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectComponent, isStandalone: true, selector: "rtsee-recursive-select", inputs: { selectModel: "selectModel" }, ngImport: i0, template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-recursive-select', imports: [Select, FormsModule], template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { selectModel: [{
+                type: Input
+            }] } });
+
+class RecursiveSelectFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngDoCheck() {
+        if (this.field.recursiveSelect.value !== this.lastValue) {
+            this.lastValue = this.field.recursiveSelect.value;
+            this.onModelChange();
+        }
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectFieldComponent, isStandalone: true, selector: "rtsee-field-recursive-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RecursiveSelectComponent, selector: "rtsee-recursive-select", inputs: ["selectModel"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-recursive-select", standalone: true, imports: [RecursiveSelectComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class ImageUploaderFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.field.imageUploader.on("completed", () => {
+            this.onModelChange();
+        });
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageUploaderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ImageUploaderFieldComponent, isStandalone: true, selector: "rtsee-field-image-uploader", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-image-uploader-label font-semibold mb-2\">{{ field.name }}</div>\n  <rtsee-image-uploader [imageUploader]=\"field.imageUploader\"></rtsee-image-uploader>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageUploaderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-image-uploader", standalone: true, imports: [RTSeeImageUploaderComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-image-uploader-label font-semibold mb-2\">{{ field.name }}</div>\n  <rtsee-image-uploader [imageUploader]=\"field.imageUploader\"></rtsee-image-uploader>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FormFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onFieldChanged() {
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n", dependencies: [{ kind: "component", type: TextFieldComponent, selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: TextareaFieldComponent, selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: CheckboxFieldComponent, selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RadioFieldComponent, selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: NumberFieldComponent, selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: AutocompleteFieldComponent, selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RecursiveSelectFieldComponent, selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: ImageUploaderFieldComponent, selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-form-field", standalone: true, imports: [
+                        TextFieldComponent,
+                        TextareaFieldComponent,
+                        CheckboxFieldComponent,
+                        RadioFieldComponent,
+                        NumberFieldComponent,
+                        AutocompleteFieldComponent,
+                        RecursiveSelectFieldComponent,
+                        ImageUploaderFieldComponent
+                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FormComponent {
+    constructor() {
+        this.formSubmit = new EventEmitter();
+    }
+    submit() {
+        this.formSubmit.emit(this.form);
+    }
+    onFieldChanged() {
+        this.form.evaluateIsValid();
+        this.form.evaluateIsDirty();
+        this.form.evaluateIsChanged();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
+        }], propDecorators: { form: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class ManageStoryComponent {
+    ngOnInit() {
+        if (!this.manageStory.activeStoryForm) {
+            this.manageStory.initForm();
+        }
+        if (!this.manageStory.activeStoryForm) {
+            throw new Error(`Active story form should be selected`);
+        }
+    }
+    submit() {
+        if (!this.manageStory.activeStoryForm) {
+            return;
+        }
+        this.manageStory.activeStoryForm.submit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      @if (manageStory.activeStoryForm) {\n        <rtsee-form [form]=\"manageStory.activeStoryForm\" (formSubmit)=\"submit()\">\n          <p-button type=\"submit\"\n                    [label]=\"'Save'\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          ></p-button>\n          <p-button [label]=\"'Cancel'\"\n                    severity=\"secondary\"\n                    (click)=\"manageStory.cancel()\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          />\n        </rtsee-form>\n\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n      }\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\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: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-manage-story", standalone: true, imports: [
+                        Button,
+                        ManageSlidesComponent,
+                        ManageSlideComponent,
+                        Divider,
+                        FormComponent,
+                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      @if (manageStory.activeStoryForm) {\n        <rtsee-form [form]=\"manageStory.activeStoryForm\" (formSubmit)=\"submit()\">\n          <p-button type=\"submit\"\n                    [label]=\"'Save'\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          ></p-button>\n          <p-button [label]=\"'Cancel'\"\n                    severity=\"secondary\"\n                    (click)=\"manageStory.cancel()\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          />\n        </rtsee-form>\n\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n      }\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { manageStory: [{
+                type: Input
+            }] } });
+
+class ManageStoriesComponent {
+    ngOnInit() {
+        this.manageStories.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { 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: 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-stories', imports: [ManageStoryComponent, Button, OrderList, NgClass], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { manageStories: [{
+                type: Input
+            }] } });
+
+class ManageCategoryComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.categoryForm = this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131),
+                ],
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244),
+                ],
+            }),
+        });
+    }
+    ngOnInit() {
+        this.nameField.setValue(this.manageCategory.category.name);
+        this.descriptionField.setValue(this.manageCategory.category.description || '');
+    }
+    submit() {
+        if (this.categoryForm.valid) {
+            void this.manageCategory.save({
+                name: this.nameField.value,
+                description: this.descriptionField.value,
+            });
+        }
+        else {
+            this.categoryForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    get nameField() {
+        return this.categoryForm.get('name');
+    }
+    get descriptionField() {
+        return this.categoryForm.get('description');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoryComponent, isStandalone: true, selector: "rtsee-manage-category", inputs: { manageCategory: "manageCategory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\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]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">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-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-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      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.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: "ngmodule", type: FormsModule }, { 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: "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: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-category', imports: [
+                        Button,
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        Textarea,
+                        ReactiveFormsModule,
+                    ], template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\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]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">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-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-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      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageCategory: [{
+                type: Input
+            }] } });
+
+class ManageCategoriesComponent {
+    ngOnInit() {
+        this.manageCategories.init();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoriesComponent, isStandalone: true, selector: "rtsee-manage-categories", inputs: { manageCategories: "manageCategories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.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: ManageCategoryComponent, selector: "rtsee-manage-category", inputs: ["manageCategory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-categories', imports: [Button, ManageCategoryComponent], template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageCategories: [{
                 type: Input
             }] } });
 
@@ -2081,23 +2181,23 @@ class ManageLabelComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
+                    Validators.maxLength(131),
+                ],
             }),
             description: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
+                    Validators.maxLength(244),
+                ],
             }),
             symbol: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(1),
-                    Validators.maxLength(244)
-                ]
-            })
+                    Validators.maxLength(244),
+                ],
+            }),
         });
     }
     ngOnInit() {
@@ -2140,7 +2240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Message,
                         Textarea,
                         ReactiveFormsModule,
-                        ColorPicker
+                        ColorPicker,
                     ], template: "<div class=\"rtsee-manage-story-label\">\n  <div class=\"rtsee-manage-story-label-info rtsee-form-container\">\n    <form class=\"rtsee-story-label-form rtsee-form\"\n          [formGroup]=\"labelForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-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-label-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-label-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-label-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-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"symbolField\"\n                   [class.p-invalid]=\"symbolField.invalid && symbolField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (symbolField.hasError('required') && symbolField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-colorPicker [(ngModel)]=\"manageLabel.label.color\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageLabel.cancel()\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageLabel: [{
                 type: Input
@@ -2155,10 +2255,7 @@ class ManageLabelsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageLabelsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-labels', imports: [
-                        Button,
-                        ManageLabelComponent
-                    ], template: "<div class=\"rtsee-manage-stories-labels\">\n  <div class=\"rtsee-manage-stories-labels-header\">\n    @if (!manageLabels.selectedLabel) {\n      <p-button (click)=\"manageLabels.selectNewLabel()\"\n                label=\"Create A New Label\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-labels-body\">\n    @if (manageLabels.selectedLabel) {\n      <rtsee-manage-label [manageLabel]=\"manageLabels.selectedLabel\"\n      ></rtsee-manage-label>\n    }\n    @if (!manageLabels.selectedLabel) {\n      @for (label of manageLabels.labels; track label.id) {\n        <p (click)=\"manageLabels.selectLabel(label.id)\">{{label.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-manage-labels', imports: [Button, ManageLabelComponent], template: "<div class=\"rtsee-manage-stories-labels\">\n  <div class=\"rtsee-manage-stories-labels-header\">\n    @if (!manageLabels.selectedLabel) {\n      <p-button (click)=\"manageLabels.selectNewLabel()\"\n                label=\"Create A New Label\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-labels-body\">\n    @if (manageLabels.selectedLabel) {\n      <rtsee-manage-label [manageLabel]=\"manageLabels.selectedLabel\"\n      ></rtsee-manage-label>\n    }\n    @if (!manageLabels.selectedLabel) {\n      @for (label of manageLabels.labels; track label.id) {\n        <p (click)=\"manageLabels.selectLabel(label.id)\">{{label.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { manageLabels: [{
                 type: Input
             }] } });
@@ -2171,23 +2268,23 @@ class ManageTopicComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
+                    Validators.maxLength(131),
+                ],
             }),
             key: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(1),
-                    Validators.maxLength(244)
-                ]
+                    Validators.maxLength(244),
+                ],
             }),
             description: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
-            })
+                    Validators.maxLength(244),
+                ],
+            }),
         });
     }
     ngOnInit() {
@@ -2230,7 +2327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ReactiveFormsModule,
                         Textarea,
                         AutocompleteComponent,
-                        OrderList
+                        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
@@ -2245,10 +2342,7 @@ class ManageTopicsComponent {
 }
 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" }]
+            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
             }] } });
@@ -2270,7 +2364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Button,
                         Chip,
                         ManageLabelsComponent,
-                        ManageTopicsComponent
+                        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
@@ -2281,40 +2375,304 @@ class PresentationSettingsComponent {
         this.COMMON_CONSTANTS = COMMON_CONSTANTS;
         this.window = window;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-presentation-settings', imports: [
+                        Slider,
+                        Fieldset,
+                        FormsModule,
+                        Button,
+                        Chip,
+                        Message,
+                        Tag,
+                        Listbox,
+                        JoinCallComponent,
+                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }] } });
+
+class RtseeEntityCommentsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityCommentsComponent, isStandalone: true, selector: "rtsee-entity-comments", inputs: { messenger: "messenger", chat: "chat", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n                [entity]=\"entity\"\n    ></rtsee-chat>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entity-comments', imports: [ChatComponent], template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n                [entity]=\"entity\"\n    ></rtsee-chat>\n  }\n</div>\n" }]
+        }], propDecorators: { messenger: [{
+                type: Input
+            }], chat: [{
+                type: Input
+            }], entity: [{
+                type: Input
+            }] } });
+
+class RtseeEntityTagsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityTagsComponent, isStandalone: true, selector: "rtsee-entity-tags", inputs: { entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entity-tags', imports: [Chip], template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { entity: [{
+                type: Input
+            }] } });
+
+class RateInputComponent {
+    constructor() {
+        this.sendRateForm = new FormGroup({
+            comment: new FormControl(''),
+        });
+        this.showMissingRateError = false;
+    }
+    set config(value) {
+        this._config = value;
+        this.updateCommentControl();
+    }
+    get config() {
+        return this._config;
+    }
+    ngOnInit() {
+        this.updateCommentControl();
+    }
+    ngOnDestroy() {
+        this.commentSubscription?.unsubscribe();
+    }
+    updateCommentControl() {
+        this.commentSubscription?.unsubscribe();
+        if (this._config && this._config.rate) {
+            this.sendRateForm
+                .get('comment')
+                ?.setValue(this._config.rate.text || '', { emitEvent: false });
+            this.commentSubscription = this.sendRateForm
+                .get('comment')
+                ?.valueChanges.subscribe((value) => {
+                if (this._config.rate) {
+                    this._config.rate.text = value || '';
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RateInputComponent, isStandalone: true, selector: "rtsee-rate-input", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-rate-input\">\n  <div class=\"rtsee-rate-input-header\">\n    <h3 class=\"rtsee-rate-input-name\">{{ config.name }}</h3>\n    @if (config.description) {\n      <p class=\"rtsee-rate-input-description\">{{ config.description }}</p>\n    }\n  </div>\n  <div class=\"rtsee-rate-form-container\">\n    <form [formGroup]=\"sendRateForm\" class=\"rtsee-rate-form\">\n      <textarea\n        [invalid]=\"false\"\n        [autoResize]=\"true\"\n        formControlName=\"comment\"\n        pTextarea\n        placeholder=\"Your comment here...\"\n        class=\"rtsee-rate-comment-field\"\n        rows=\"1\"\n        cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <div class=\"rtsee-rate-select-container\">\n    <rtsee-rating [config]=\"config\"></rtsee-rating>\n    @if (!config.rate?.value && showMissingRateError) {\n      <p-message severity=\"error\">Please add your rate!</p-message>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rate-input', imports: [ReactiveFormsModule, Textarea, RatingComponent, Message], standalone: true, template: "<div class=\"rtsee-rate-input\">\n  <div class=\"rtsee-rate-input-header\">\n    <h3 class=\"rtsee-rate-input-name\">{{ config.name }}</h3>\n    @if (config.description) {\n      <p class=\"rtsee-rate-input-description\">{{ config.description }}</p>\n    }\n  </div>\n  <div class=\"rtsee-rate-form-container\">\n    <form [formGroup]=\"sendRateForm\" class=\"rtsee-rate-form\">\n      <textarea\n        [invalid]=\"false\"\n        [autoResize]=\"true\"\n        formControlName=\"comment\"\n        pTextarea\n        placeholder=\"Your comment here...\"\n        class=\"rtsee-rate-comment-field\"\n        rows=\"1\"\n        cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <div class=\"rtsee-rate-select-container\">\n    <rtsee-rating [config]=\"config\"></rtsee-rating>\n    @if (!config.rate?.value && showMissingRateError) {\n      <p-message severity=\"error\">Please add your rate!</p-message>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class RateItemComponent {
+    constructor() {
+        this.showActions = false;
+        this.edit = new EventEmitter();
+        this.delete = new EventEmitter();
+    }
+    onEdit(event) {
+        event.stopPropagation();
+        this.edit.emit();
+    }
+    onDelete(event) {
+        event.stopPropagation();
+        this.delete.emit();
+    }
+    getRatingConfigName(configId) {
+        if (!this.rater) {
+            return '';
+        }
+        const config = this.rater.ratingConfigurations.find((c) => c.id === configId);
+        return config ? config.name : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RateItemComponent, isStandalone: true, selector: "rtsee-rate-item", inputs: { group: "group", rater: "rater", showActions: "showActions" }, outputs: { edit: "edit", delete: "delete" }, ngImport: i0, template: "<div class=\"rtsee-rates-group-item\">\n  <div class=\"rtsee-rates-group-header\">\n    <div class=\"rtsee-rates-group-user-info\">\n      @if (group.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rates-group-avatar\"\n          [src]=\"group.peer.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rates-group-avatar-fallback\">\n          {{ (group.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <span class=\"rtsee-rates-group-peer-name\">{{\n        group.peer?.name || group.peerId\n      }}</span>\n    </div>\n\n    <div class=\"rtsee-rates-group-right-header\">\n      <span class=\"rtsee-rates-group-date\">{{\n        group.createdAt | date: \"short\"\n      }}</span>\n\n      @if (showActions) {\n        <div class=\"rtsee-rates-group-actions\">\n          <p-button\n            (click)=\"onEdit($event)\"\n            [severity]=\"'secondary'\"\n            [text]=\"true\"\n            class=\"rtsee-rates-group-btn-edit\"\n          >\n            <span class=\"pi pi-pencil\"></span>\n          </p-button>\n          <p-button\n            (click)=\"onDelete($event)\"\n            [severity]=\"'danger'\"\n            [text]=\"true\"\n            class=\"rtsee-rates-group-btn-delete\"\n          >\n            <span class=\"pi pi-trash\"></span>\n          </p-button>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"rtsee-rates-group-body\">\n    @for (rate of group.rates; track rate.id) {\n      <div class=\"rtsee-rates-group-rate-item-container\">\n        <div class=\"rtsee-rates-group-rate-item\">\n          <span class=\"rtsee-rates-group-rate-config-name\">{{\n            getRatingConfigName(rate.configurationId)\n          }}</span>\n          <rtsee-rating [rate]=\"rate\"></rtsee-rating>\n        </div>\n        @if (rate.text) {\n          <p class=\"rtsee-rates-group-rate-comment\">\"{{ rate.text }}\"</p>\n        }\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { 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: "pipe", type: DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rate-item', imports: [RatingComponent, DatePipe, Button], template: "<div class=\"rtsee-rates-group-item\">\n  <div class=\"rtsee-rates-group-header\">\n    <div class=\"rtsee-rates-group-user-info\">\n      @if (group.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rates-group-avatar\"\n          [src]=\"group.peer.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rates-group-avatar-fallback\">\n          {{ (group.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <span class=\"rtsee-rates-group-peer-name\">{{\n        group.peer?.name || group.peerId\n      }}</span>\n    </div>\n\n    <div class=\"rtsee-rates-group-right-header\">\n      <span class=\"rtsee-rates-group-date\">{{\n        group.createdAt | date: \"short\"\n      }}</span>\n\n      @if (showActions) {\n        <div class=\"rtsee-rates-group-actions\">\n          <p-button\n            (click)=\"onEdit($event)\"\n            [severity]=\"'secondary'\"\n            [text]=\"true\"\n            class=\"rtsee-rates-group-btn-edit\"\n          >\n            <span class=\"pi pi-pencil\"></span>\n          </p-button>\n          <p-button\n            (click)=\"onDelete($event)\"\n            [severity]=\"'danger'\"\n            [text]=\"true\"\n            class=\"rtsee-rates-group-btn-delete\"\n          >\n            <span class=\"pi pi-trash\"></span>\n          </p-button>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"rtsee-rates-group-body\">\n    @for (rate of group.rates; track rate.id) {\n      <div class=\"rtsee-rates-group-rate-item-container\">\n        <div class=\"rtsee-rates-group-rate-item\">\n          <span class=\"rtsee-rates-group-rate-config-name\">{{\n            getRatingConfigName(rate.configurationId)\n          }}</span>\n          <rtsee-rating [rate]=\"rate\"></rtsee-rating>\n        </div>\n        @if (rate.text) {\n          <p class=\"rtsee-rates-group-rate-comment\">\"{{ rate.text }}\"</p>\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { group: [{
+                type: Input
+            }], rater: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }] } });
+
+class RaterComponent {
+    constructor() {
+        this.isEditing = false;
+    }
+    ngOnInit() {
+        this.getRatingConfigurations()
+            .then(() => {
+            console.log('Getting rating configurations...');
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    async sendRate() {
+        const rates = this.rater.configsWithRates
+            .map((config) => config.rate)
+            .filter((r) => !!r);
+        if (this.rater.userRateGroup) {
+            await this.rater.editRateGroup({
+                ...this.rater.userRateGroup,
+                rates,
+            });
+        }
+        else {
+            await this.rater.createRateGroup({
+                entityId: this.rater.entityId,
+                peerId: this.rater.peer.clientId,
+                rates,
+                applicationId: this.rater.applicationId,
+                createdAt: new Date(),
+                peer: this.rater.peer,
+            });
+        }
+        this.isEditing = false;
+    }
+    async deleteRate() {
+        if (this.rater.userRateGroup) {
+            await this.rater.deleteRateGroup(this.rater.userRateGroup.id);
+        }
+    }
+    startEdit() {
+        this.isEditing = true;
+    }
+    async getRatingConfigurations() {
+        if (!this.rater || !this.entity) {
+            console.log('No rater or entity found.');
+            return [];
+        }
+        const rates = await this.rater.getRates();
+        console.log('Rates found.', rates);
+        return rates;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\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: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { entity: [{
+                type: Input
+            }], rater: [{
+                type: Input
+            }] } });
+
+class RatesListComponent {
+    ngOnInit() {
+        if (this.rater) {
+            this.rater
+                .loadOtherUsersRateGroups(true)
+                .then(() => {
+                console.log('Other users rate groups loaded.');
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+    }
+    onScroll() {
+        if (this.rater) {
+            this.rater
+                .loadOtherUsersRateGroups()
+                .then(() => {
+                console.log('More other users rate groups loaded.');
+            })
+                .catch((err) => {
+                console.error(err);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatesListComponent, isStandalone: true, selector: "rtsee-rates-list", inputs: { rater: "rater", entity: "entity" }, ngImport: i0, template: "<div\n  class=\"rtsee-rates-list\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  [scrollWindow]=\"false\"\n  (scrolled)=\"onScroll()\"\n>\n  @for (group of rater.otherUsersRateGroups; track group.id) {\n    <rtsee-rate-item\n      [group]=\"group\"\n      [rater]=\"rater\"\n      [showActions]=\"false\"\n    ></rtsee-rate-item>\n  }\n  @if (rater.loadingRatesGroups) {\n    <div class=\"rtsee-rates-list-loading\">Loading more...</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rates-list', imports: [InfiniteScrollDirective, RateItemComponent], template: "<div\n  class=\"rtsee-rates-list\"\n  infiniteScroll\n  [infiniteScrollDistance]=\"2\"\n  [infiniteScrollThrottle]=\"50\"\n  [scrollWindow]=\"false\"\n  (scrolled)=\"onScroll()\"\n>\n  @for (group of rater.otherUsersRateGroups; track group.id) {\n    <rtsee-rate-item\n      [group]=\"group\"\n      [rater]=\"rater\"\n      [showActions]=\"false\"\n    ></rtsee-rate-item>\n  }\n  @if (rater.loadingRatesGroups) {\n    <div class=\"rtsee-rates-list-loading\">Loading more...</div>\n  }\n</div>\n" }]
+        }], propDecorators: { rater: [{
+                type: Input
+            }], entity: [{
+                type: Input
+            }] } });
+
+class RatingSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RatingSectionComponent, isStandalone: true, selector: "rtsee-rating-section", inputs: { rater: "rater", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\"\n                    [entity]=\"entity\"\n  ></rtsee-rates-list>\n</div>\n", dependencies: [{ kind: "component", type: RaterComponent, selector: "rtsee-rater", inputs: ["entity", "rater"] }, { kind: "component", type: RatesListComponent, selector: "rtsee-rates-list", inputs: ["rater", "entity"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rating-section', imports: [RaterComponent, RatesListComponent], template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\"\n                    [entity]=\"entity\"\n  ></rtsee-rates-list>\n</div>\n" }]
+        }], propDecorators: { rater: [{
+                type: Input
+            }], entity: [{
+                type: Input
+            }] } });
+
+class RtseeEntityPreviewComponent {
+    constructor() {
+        this.rater = null;
+        this.showRating = true;
+    }
+    ngOnInit() {
+        void this.entity.reload();
+        this.rater = new RTSeeRater({
+            entityId: this.entity.id,
+            entityConfigurationId: this.entity.configurationId,
+            ...this.entity.getHandlerCommonOptions(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityPreviewComponent, isStandalone: true, selector: "rtsee-entity-preview", inputs: { entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: RtseeEntityCommentsComponent, selector: "rtsee-entity-comments", inputs: ["messenger", "chat", "entity"] }, { kind: "component", type: RtseeEntityTagsComponent, selector: "rtsee-entity-tags", inputs: ["entity"] }, { kind: "component", type: RatingSectionComponent, selector: "rtsee-rating-section", inputs: ["rater", "entity"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-presentation-settings', imports: [
-                        Slider,
-                        Fieldset,
-                        FormsModule,
-                        Button,
-                        Chip,
-                        Message,
-                        Tag,
-                        Listbox,
-                        JoinCallComponent
-                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
-        }], propDecorators: { settings: [{
+            args: [{ selector: 'rtsee-entity-preview', imports: [
+                        RtseeEntityCommentsComponent,
+                        RtseeEntityTagsComponent,
+                        RatingSectionComponent,
+                    ], template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { entity: [{
                 type: Input
-            }], presentation: [{
+            }], messenger: [{
                 type: Input
             }] } });
 
 class StoryDetailsComponent {
+    getStarArray(rating) {
+        const stars = [];
+        const val = rating || 0;
+        for (let i = 1; i <= 5; i++) {
+            if (val >= i) {
+                stars.push('full');
+            }
+            else if (val + 0.5 >= i) {
+                stars.push('half');
+            }
+            else {
+                stars.push('empty');
+            }
+        }
+        return stars;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-details', imports: [
-                        Chip,
-                        Tag,
-                        Button,
-                        ChatComponent
-                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -2340,7 +2698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PreloaderComponent,
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
-                        StoryDetailsComponent
+                        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\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\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, story.preselectedSlideNumber || undefined)\"\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        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\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
@@ -2371,12 +2729,9 @@ class RtseeNavComponent {
             console.log('RTSeeContainer: user peer not found');
             return false;
         }
-        const profileRoute = this.config.routes
-            .find((r) => r.rtseeRoute === RTSeeRoutesList.PROFILE) || null;
-        const dashboardRoute = this.config.routes
-            .find((r) => r.rtseeRoute === RTSeeRoutesList.EVENTS_DASHBOARD) || null;
-        const messengerRoute = this.config.routes
-            .find((r) => r.rtseeRoute === RTSeeRoutesList.MESSENGER) || null;
+        const profileRoute = this.config.routes.find((r) => r.rtseeRoute === RTSeeRoutesList.PROFILE) || null;
+        const dashboardRoute = this.config.routes.find((r) => r.rtseeRoute === RTSeeRoutesList.EVENTS_DASHBOARD) || null;
+        const messengerRoute = this.config.routes.find((r) => r.rtseeRoute === RTSeeRoutesList.MESSENGER) || null;
         if (dashboardRoute) {
             dashboardRoute.isEnabled = hasPermission(peer, RTSeePeerPermissions.ACCESS_EVENTS_DASHBOARD);
         }
@@ -2403,7 +2758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Avatar,
                         Image,
                         Divider,
-                        Tooltip
+                        Tooltip,
                     ], standalone: true, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n              [routerLink]=\"profileLink\"\n              routerLinkActive=\"rtsee-nav-item-active\"\n              [routerLinkActiveOptions]=\"{exact: true}\"\n              [queryParams]=\"queryParams\"\n    ></p-avatar>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { config: [{
                 type: Input
@@ -2421,9 +2776,11 @@ class RTSeeContainerComponent {
     }
     ngOnInit() {
         this.authService.init(this.auth);
-        this.routeSubscription = this.router.events.pipe(
+        this.routeSubscription = this.router.events
+            .pipe(
         // Filter for the NavigationEnd event to know when navigation is complete
-        filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+        filter((event) => event instanceof NavigationEnd))
+            .subscribe((event) => {
             this.defineSideNavState(event.url);
         });
     }
@@ -2433,12 +2790,12 @@ class RTSeeContainerComponent {
     defineSideNavState(url) {
         const isBase = url === '/' || url.startsWith('/?');
         const routeUrlSplit = url.split('/');
-        const rootRoutePath = isBase ? '' : (routeUrlSplit[1] || null);
+        const rootRoutePath = isBase ? '' : routeUrlSplit[1] || null;
         if (!rootRoutePath && !isBase) {
             return;
         }
-        const rtseeRoute = this.navigationConfig.routes
-            .find((rn) => rn.link === rootRoutePath) || null;
+        const rtseeRoute = this.navigationConfig.routes.find((rn) => rn.link === rootRoutePath) ||
+            null;
         if (!rtseeRoute) {
             return;
         }
@@ -2456,7 +2813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MessengerComponent,
                         RtseeEventsDashboardComponent,
                         PresentationComponent,
-                        RtseeNavComponent
+                        RtseeNavComponent,
                     ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { rtsee: [{
                 type: Input
@@ -2472,11 +2829,13 @@ class RtseeTagsAccordionMenuComponent {
         this.onTagClicked = output();
     }
     ngOnInit() {
-        this.manageTags.loadTags()
+        this.manageTags
+            .loadTags()
             .then(() => {
             this.items = this.tagsToItems(this.manageTags.tags);
             console.log(this.items);
-        }).catch((err) => {
+        })
+            .catch((err) => {
             console.log(err);
         });
     }
@@ -2489,7 +2848,7 @@ class RtseeTagsAccordionMenuComponent {
                 isSelected: false,
                 command: () => {
                     this.onTagClicked.emit(t);
-                }
+                },
             };
         });
     }
@@ -2498,33 +2857,11 @@ class RtseeTagsAccordionMenuComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagsAccordionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-tags-accordion', imports: [
-                        PanelMenu
-                    ], template: "<div class=\"rtsee-tags-accordion\">\n  <p-panel-menu [model]=\"items\"/>\n</div>\n" }]
+            args: [{ selector: 'rtsee-tags-accordion', imports: [PanelMenu], template: "<div class=\"rtsee-tags-accordion\">\n  <p-panel-menu [model]=\"items\"/>\n</div>\n" }]
         }], propDecorators: { manageTags: [{
                 type: Input
             }] } });
 
-class RecursiveSelectComponent {
-    constructor() {
-        this.value = undefined;
-    }
-    ngOnInit() {
-        this.value = this.selectModel.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectComponent, isStandalone: true, selector: "rtsee-recursive-select", inputs: { selectModel: "selectModel" }, ngImport: i0, template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-recursive-select', imports: [
-                        Select,
-                        FormsModule
-                    ], template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { selectModel: [{
-                type: Input
-            }] } });
-
 class RtseeTagManageComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
@@ -2541,7 +2878,7 @@ class RtseeTagManageComponent {
         this.presetFields(this.manageTags.activeTag);
     }
     async presetParent() {
-        console.log("presetParent", this.manageTags.activeTag);
+        console.log('presetParent', this.manageTags.activeTag);
         if (!this.manageTags.activeTag) {
             return;
         }
@@ -2559,7 +2896,7 @@ class RtseeTagManageComponent {
                     return Promise.resolve(null);
                 }
                 return this.manageTags.getTag(tag.parentId);
-            }
+            },
         };
         console.log('active tag', this.manageTags.activeTag);
         if (this.manageTags.activeTag.parentId) {
@@ -2568,7 +2905,9 @@ class RtseeTagManageComponent {
         this.tagsRecursiveSelect = new RecursiveSelect(selectOptions);
     }
     async submit() {
-        if (this.tagForm.invalid || !this.manageTags.peer.rtseeAppId || !this.manageTags.activeTag) {
+        if (this.tagForm.invalid ||
+            !this.manageTags.peer.rtseeAppId ||
+            !this.manageTags.activeTag) {
             console.log('Form Invalid!');
             return;
         }
@@ -2577,12 +2916,12 @@ class RtseeTagManageComponent {
             name: this.nameField.getRawValue(),
             description: this.descriptionField.getRawValue(),
             applicationId: this.manageTags.applicationId,
-            parentId
+            parentId,
         };
         if (this.manageTags.activeTag.id) {
             const options = {
                 id: this.manageTags.activeTag.id,
-                ...tagParams
+                ...tagParams,
             };
             await this.manageTags.updateTag(options);
         }
@@ -2606,28 +2945,22 @@ class RtseeTagManageComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
+                    Validators.maxLength(131),
+                ],
             }),
             description: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
+                    Validators.maxLength(244),
+                ],
             }),
             iconClass: this.formBuilder.control('', {
-                validators: [
-                    Validators.minLength(1),
-                    Validators.maxLength(244)
-                ]
+                validators: [Validators.minLength(1), Validators.maxLength(244)],
             }),
             value: this.formBuilder.control('', {
-                validators: [
-                    Validators.minLength(1),
-                    Validators.maxLength(244)
-                ]
-            })
+                validators: [Validators.minLength(1), Validators.maxLength(244)],
+            }),
         });
     }
     get nameField() {
@@ -2657,7 +2990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Textarea,
                         ReactiveFormsModule,
                         RecursiveSelectComponent,
-                        Divider
+                        Divider,
                     ], template: "<div class=\"rtsee-manage-tag\">\n  <div class=\"rtsee-manage-tag-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-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-label-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      @if (tagsRecursiveSelect && manageTags.activeTag) {\n        <div class=\"rtsee-select-tag-container\">\n          <p-divider></p-divider>\n          <p>Parent Tag</p>\n          <rtsee-recursive-select [selectModel]=\"tagsRecursiveSelect\"\n          ></rtsee-recursive-select>\n          <p-divider></p-divider>\n        </div>\n      }\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-story-label-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-label-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-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"iconClassField\"\n                   [class.p-invalid]=\"iconClassField.invalid && iconClassField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (iconClassField.hasError('required') && iconClassField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageTags: [{
                 type: Input
@@ -2670,15 +3003,17 @@ class RtseeTagGroupsManageComponent {
         this.onTagGroupClicked = output();
     }
     ngOnInit() {
-        this.manageTagGroups.loadTagGroups()
+        this.manageTagGroups
+            .loadTagGroups()
             .then(() => {
             this.items = this.tagGroupsToItems(this.manageTagGroups.tagGroups);
-        }).catch((err) => {
+        })
+            .catch((err) => {
             console.log(err);
         });
     }
     tagGroupsToItems(tagGroups) {
-        console.log("tagGroupsToItems", tagGroups);
+        console.log('tagGroupsToItems', tagGroups);
         return tagGroups.map((tg) => {
             return {
                 label: tg.name,
@@ -2686,7 +3021,7 @@ class RtseeTagGroupsManageComponent {
                 command: () => {
                     this.selectedTagGroup = tg;
                     this.onTagGroupClicked.emit(tg);
-                }
+                },
             };
         });
     }
@@ -2695,9 +3030,7 @@ class RtseeTagGroupsManageComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagGroupsManageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rtsee-tag-groups-manage', imports: [
-                        Menu
-                    ], template: "<div class=\"rtsee-manage-tag-groups\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+            args: [{ selector: 'rtsee-rtsee-tag-groups-manage', imports: [Menu], template: "<div class=\"rtsee-manage-tag-groups\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
         }], propDecorators: { manageTagGroups: [{
                 type: Input
             }] } });
@@ -2728,12 +3061,12 @@ class RtseeTagGroupManageComponent {
         const tagGroupParams = {
             name: this.nameField.getRawValue(),
             description: this.descriptionField.getRawValue(),
-            applicationId: this.manageTagGroups.peer.rtseeAppId
+            applicationId: this.manageTagGroups.peer.rtseeAppId,
         };
         if (this.manageTagGroups.activeTagGroup.id) {
             await this.manageTagGroups.updateTagGroup({
                 ...tagGroupParams,
-                id: this.manageTagGroups.activeTagGroup.id
+                id: this.manageTagGroups.activeTagGroup.id,
             });
         }
         else {
@@ -2753,16 +3086,16 @@ class RtseeTagGroupManageComponent {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
+                    Validators.maxLength(131),
+                ],
             }),
             description: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
-            })
+                    Validators.maxLength(244),
+                ],
+            }),
         });
     }
     get nameField() {
@@ -2784,7 +3117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Message,
                         ReactiveFormsModule,
                         Textarea,
-                        AutocompleteComponent
+                        AutocompleteComponent,
                     ], template: "<div class=\"rtsee-manage-tag-group\">\n  <div class=\"rtsee-manage-tag-group-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagGroupForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-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-label-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-label-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-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\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\n      @if (manageTagGroups && manageTagGroups.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageTagGroups.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageTagGroups: [{
                 type: Input
@@ -2796,15 +3129,17 @@ class EntitiesConfigurationsListComponent {
         this.onConfigurationClicked = output();
     }
     ngOnInit() {
-        this.manageEntityConfigurations.loadEntityConfigurations()
+        this.manageEntityConfigurations
+            .loadEntityConfigurations()
             .then(() => {
             this.items = this.configurationsToItems(this.manageEntityConfigurations.entityConfigurations);
-        }).catch((err) => {
+        })
+            .catch((err) => {
             console.log(err);
         });
     }
     configurationsToItems(entityConfigurations) {
-        console.log("entityConfigsToItems", entityConfigurations);
+        console.log('entityConfigsToItems', entityConfigurations);
         return entityConfigurations.map((ec) => {
             return {
                 label: ec.name,
@@ -2812,7 +3147,7 @@ class EntitiesConfigurationsListComponent {
                 command: () => {
                     this.selectedEntityConfiguration = ec;
                     this.onConfigurationClicked.emit(ec);
-                }
+                },
             };
         });
     }
@@ -2821,118 +3156,189 @@ class EntitiesConfigurationsListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesConfigurationsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-entities-configurations-list', imports: [
-                        Menu
-                    ], template: "<div class=\"rtsee-entities-configurations-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+            args: [{ selector: 'rtsee-entities-configurations-list', imports: [Menu], template: "<div class=\"rtsee-entities-configurations-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
         }], propDecorators: { manageEntityConfigurations: [{
                 type: Input
             }] } });
 
-class ManageEntityConfigurationComponent {
+class ManageRatingConfigurationComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this.entityConfigurationForm = this.getEntityConfigurationForm();
+        this.ratingConfigurationForm = this.getRatingConfigurationForm();
     }
     ngOnInit() {
-        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
-            this.manageEntityConfigurations.setBlankActiveEntityConfiguration();
-        }
-        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
-            throw new Error(`Active entityConfig should be selected`);
+        this.presetFields();
+    }
+    presetFields() {
+        if (!this.ratingConfiguration) {
+            return;
         }
-        this.presetFields(this.manageEntityConfigurations.activeEntityConfiguration);
-        void this.manageEntityConfigurations.initMultiselect();
+        this.nameField.setValue(this.ratingConfiguration.name);
+        this.descriptionField.setValue(this.ratingConfiguration.description || '');
+        this.maxRateField.setValue(this.ratingConfiguration.maxRateValue || 5);
+        this.stepField.setValue(this.ratingConfiguration.stepValue || 1);
     }
     async submit() {
-        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
-            throw new Error(`Active entityConfiguration should be selected`);
+        if (!this.manageRatingConfigurations.entityConfigurationId) {
+            throw new Error(`No entity config id found`);
         }
-        if (this.entityConfigurationForm.invalid || !this.manageEntityConfigurations.peer.rtseeAppId) {
+        if (this.ratingConfigurationForm.invalid ||
+            !this.manageRatingConfigurations.applicationId) {
             console.log('Form Invalid!');
             return;
         }
         const configurationParams = {
             name: this.nameField.getRawValue(),
             description: this.descriptionField.getRawValue(),
-            applicationId: this.manageEntityConfigurations.peer.rtseeAppId,
-            taggingEnabled: this.taggingEnabledField.getRawValue(),
-            commentsEnabled: this.commentsEnabledField.getRawValue(),
-            ratingEnabled: this.ratingEnabledField.getRawValue(),
+            entityConfigurationId: this.manageRatingConfigurations.entityConfigurationId,
+            applicationId: this.manageRatingConfigurations.applicationId,
+            maxRateValue: this.maxRateField.getRawValue(),
+            stepValue: this.stepField.getRawValue(),
         };
-        if (this.manageEntityConfigurations.activeEntityConfiguration.id) {
-            await this.manageEntityConfigurations.updateEntityConfiguration({
+        if (this.ratingConfiguration?.id) {
+            await this.manageRatingConfigurations.updateRatingConfiguration({
                 ...configurationParams,
-                id: this.manageEntityConfigurations.activeEntityConfiguration.id
+                id: this.ratingConfiguration.id,
             });
         }
         else {
-            await this.manageEntityConfigurations.createEntityConfiguration(configurationParams);
+            await this.manageRatingConfigurations.createRatingConfiguration(configurationParams);
         }
     }
     cancel() {
-        console.log('Cancel');
+        console.log('cancel');
     }
-    presetFields(entityConfiguration) {
-        this.nameField.setValue(entityConfiguration.name);
-        this.descriptionField.setValue(entityConfiguration.description || '');
-        this.taggingEnabledField.setValue(entityConfiguration.taggingEnabled || false);
-        this.commentsEnabledField.setValue(entityConfiguration.commentsEnabled || false);
-        this.ratingEnabledField.setValue(entityConfiguration.ratingEnabled || false);
-    }
-    getEntityConfigurationForm() {
+    getRatingConfigurationForm() {
         return this.formBuilder.group({
             name: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
+                    Validators.maxLength(131),
+                ],
             }),
             description: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
                     Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
+                    Validators.maxLength(244),
+                ],
+            }),
+            maxRate: this.formBuilder.control(5, {
+                validators: [Validators.required, Validators.min(4)],
+            }),
+            step: this.formBuilder.control(1, {
+                validators: [Validators.required, Validators.min(1)],
             }),
-            taggingEnabled: this.formBuilder.control(false),
-            commentsEnabled: this.formBuilder.control(false),
-            ratingEnabled: this.formBuilder.control(false)
         });
     }
     get nameField() {
-        return this.entityConfigurationForm.get('name');
+        return this.ratingConfigurationForm.get('name');
     }
     get descriptionField() {
-        return this.entityConfigurationForm.get('description');
-    }
-    get taggingEnabledField() {
-        return this.entityConfigurationForm.get('taggingEnabled');
+        return this.ratingConfigurationForm.get('description');
     }
-    get commentsEnabledField() {
-        return this.entityConfigurationForm.get('commentsEnabled');
+    get maxRateField() {
+        return this.ratingConfigurationForm.get('maxRate');
     }
-    get ratingEnabledField() {
-        return this.entityConfigurationForm.get('ratingEnabled');
+    get stepField() {
+        return this.ratingConfigurationForm.get('step');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityConfigurationComponent, isStandalone: true, selector: "rtsee-manage-entity-configuration", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-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-entity-config-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-entity-config-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-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\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\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { 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: "ngmodule", type: FormsModule }, { 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: "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: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageRatingConfigurationComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageRatingConfigurationComponent, isStandalone: true, selector: "rtsee-manage-rating-configuration", inputs: { manageRatingConfigurations: "manageRatingConfigurations", ratingConfiguration: "ratingConfiguration" }, ngImport: i0, template: "<div class=\"rtsee-manage-rating-configuration\">\n  <div class=\"rtsee-form-container\">\n    <form class=\"rtsee-rating-configuration-form rtsee-form\"\n          [formGroup]=\"ratingConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-rating-configuration-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-rating-configuration-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\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-rating-configuration-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-rating-configuration-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\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            <p-inputNumber [formControl]=\"maxRateField\"\n                           [min]=\"1\"\n                           [max]=\"10\"\n                           id=\"rtsee-rating-configuration-max-rate-field\"\n                           [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            />\n            <label for=\"rtsee-rating-configuration-max-rate-field\">Max Rate</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (maxRateField.hasError('required') && maxRateField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Max rate is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <p-inputNumber [formControl]=\"stepField\"\n                           [min]=\"1\"\n                           [max]=\"2\"\n                           id=\"rtsee-rating-configuration-step-field\"\n                           [class.p-invalid]=\"stepField.invalid && stepField.touched\"\n            />\n            <label for=\"rtsee-rating-configuration-step-field\">Max Rate</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (maxRateField.hasError('required') && maxRateField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Step is required</p-message>\n        }\n      </div>\n\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageRatingConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageRatingConfigurations.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: "ngmodule", type: FormsModule }, { 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: "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.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: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageRatingConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-entity-configuration', imports: [
-                        AutocompleteComponent,
+            args: [{ selector: 'rtsee-manage-rating-configuration', imports: [
                         Button,
                         FloatLabel,
                         FormsModule,
                         InputGroup,
                         InputText,
                         Message,
-                        Textarea,
                         ReactiveFormsModule,
-                        ToggleSwitch
-                    ], template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-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-entity-config-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-entity-config-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-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\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\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntityConfigurations: [{
+                        Textarea,
+                        InputNumber,
+                    ], template: "<div class=\"rtsee-manage-rating-configuration\">\n  <div class=\"rtsee-form-container\">\n    <form class=\"rtsee-rating-configuration-form rtsee-form\"\n          [formGroup]=\"ratingConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-rating-configuration-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-rating-configuration-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\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-rating-configuration-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-rating-configuration-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\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            <p-inputNumber [formControl]=\"maxRateField\"\n                           [min]=\"1\"\n                           [max]=\"10\"\n                           id=\"rtsee-rating-configuration-max-rate-field\"\n                           [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            />\n            <label for=\"rtsee-rating-configuration-max-rate-field\">Max Rate</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (maxRateField.hasError('required') && maxRateField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Max rate is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <p-inputNumber [formControl]=\"stepField\"\n                           [min]=\"1\"\n                           [max]=\"2\"\n                           id=\"rtsee-rating-configuration-step-field\"\n                           [class.p-invalid]=\"stepField.invalid && stepField.touched\"\n            />\n            <label for=\"rtsee-rating-configuration-step-field\">Max Rate</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (maxRateField.hasError('required') && maxRateField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Step is required</p-message>\n        }\n      </div>\n\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageRatingConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageRatingConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageRatingConfigurations: [{
+                type: Input
+            }], ratingConfiguration: [{
+                type: Input
+            }] } });
+
+class RatingConfigurationsListComponent {
+    constructor() {
+        this.items = [];
+        this.onRatingConfigurationClicked = output();
+    }
+    ngOnInit() {
+        this.manageRatingConfigurations
+            .loadRatingConfigurations(this.entityConfiguration.id)
+            .then(() => {
+            this.items = this.ratingConfigurationsToItems(this.manageRatingConfigurations.ratingConfigurations);
+        })
+            .catch((err) => {
+            console.log(err);
+        });
+    }
+    onCreateClicked() {
+        this.manageRatingConfigurations.setBlankActiveConfiguration();
+        this.selectedRatingConfiguration =
+            this.manageRatingConfigurations.activeRatingConfiguration || undefined;
+    }
+    ratingConfigurationsToItems(ratingConfigurations) {
+        return ratingConfigurations.map((rc) => {
+            return {
+                label: rc.name,
+                isSelected: false,
+                command: () => {
+                    this.selectedRatingConfiguration = rc;
+                    this.onRatingConfigurationClicked.emit(rc);
+                },
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingConfigurationsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingConfigurationsListComponent, isStandalone: true, selector: "rtsee-rating-configurations-list", inputs: { entityConfiguration: "entityConfiguration", manageRatingConfigurations: "manageRatingConfigurations" }, outputs: { onRatingConfigurationClicked: "onRatingConfigurationClicked" }, ngImport: i0, template: "<div class=\"rtsee-rating-configurations-list\">\n  <p-divider></p-divider>\n  <p>Rating Configurations</p>\n  @if (selectedRatingConfiguration) {\n    <rtsee-manage-rating-configuration [manageRatingConfigurations]=\"manageRatingConfigurations\"\n                                       [ratingConfiguration]=\"selectedRatingConfiguration\"\n    ></rtsee-manage-rating-configuration>\n  } @else {\n    <div class=\"rtsee-rating-configurations-controls\">\n      <p-button label=\"Create\" (click)=\"onCreateClicked()\"></p-button>\n    </div>\n    <div class=\"rtsee-rating-configurations-list-items\">\n      <p-menu [model]=\"items\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { 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: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: ManageRatingConfigurationComponent, selector: "rtsee-manage-rating-configuration", inputs: ["manageRatingConfigurations", "ratingConfiguration"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingConfigurationsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rating-configurations-list', imports: [Menu, Button, Divider, ManageRatingConfigurationComponent], template: "<div class=\"rtsee-rating-configurations-list\">\n  <p-divider></p-divider>\n  <p>Rating Configurations</p>\n  @if (selectedRatingConfiguration) {\n    <rtsee-manage-rating-configuration [manageRatingConfigurations]=\"manageRatingConfigurations\"\n                                       [ratingConfiguration]=\"selectedRatingConfiguration\"\n    ></rtsee-manage-rating-configuration>\n  } @else {\n    <div class=\"rtsee-rating-configurations-controls\">\n      <p-button label=\"Create\" (click)=\"onCreateClicked()\"></p-button>\n    </div>\n    <div class=\"rtsee-rating-configurations-list-items\">\n      <p-menu [model]=\"items\" />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { entityConfiguration: [{
+                type: Input
+            }], manageRatingConfigurations: [{
+                type: Input
+            }] } });
+
+class ManageEntityConfigurationComponent {
+    ngOnInit() {
+        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
+            this.manageEntityConfigurations.setBlankActiveEntityConfiguration();
+        }
+        if (!this.manageEntityConfigurations.activeEntityConfigurationForm) {
+            throw new Error(`Active entityConfig form should be selected`);
+        }
+    }
+    submit() {
+        if (!this.manageEntityConfigurations.activeEntityConfigurationForm) {
+            return;
+        }
+        this.manageEntityConfigurations.activeEntityConfigurationForm.submit();
+    }
+    cancel() {
+        this.manageEntityConfigurations.flushActiveEntityConfiguration();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityConfigurationComponent, isStandalone: true, selector: "rtsee-manage-entity-configuration", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    @if (manageEntityConfigurations.activeEntityConfigurationForm) {\n      <rtsee-form [form]=\"manageEntityConfigurations.activeEntityConfigurationForm\" (formSubmit)=\"submit()\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        ></p-button>\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"cancel()\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        />\n      </rtsee-form>\n\n      @if (manageEntityConfigurations.activeEntityConfiguration && manageEntityConfigurations.activeEntityConfiguration.id) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\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: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }, { kind: "component", type: RatingConfigurationsListComponent, selector: "rtsee-rating-configurations-list", inputs: ["entityConfiguration", "manageRatingConfigurations"], outputs: ["onRatingConfigurationClicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-manage-entity-configuration", standalone: true, imports: [
+                        Button,
+                        FormComponent,
+                        RatingConfigurationsListComponent,
+                    ], template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    @if (manageEntityConfigurations.activeEntityConfigurationForm) {\n      <rtsee-form [form]=\"manageEntityConfigurations.activeEntityConfigurationForm\" (formSubmit)=\"submit()\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        ></p-button>\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"cancel()\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        />\n      </rtsee-form>\n\n      @if (manageEntityConfigurations.activeEntityConfiguration && manageEntityConfigurations.activeEntityConfiguration.id) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageEntityConfigurations: [{
                 type: Input
             }] } });
 
@@ -2942,15 +3348,17 @@ class EntitiesListComponent {
         this.onEntityClicked = output();
     }
     ngOnInit() {
-        this.manageEntities.loadEntities()
+        this.manageEntities
+            .loadEntities()
             .then(() => {
             this.items = this.entitiesToItems(this.manageEntities.entities);
-        }).catch((err) => {
+        })
+            .catch((err) => {
             console.log(err);
         });
     }
     entitiesToItems(entityConfigurations) {
-        console.log("entityConfigsToItems", entityConfigurations);
+        console.log('entityConfigsToItems', entityConfigurations);
         return entityConfigurations.map((et) => {
             return {
                 label: et.name,
@@ -2958,7 +3366,7 @@ class EntitiesListComponent {
                 command: () => {
                     this.selectedEntity = et;
                     this.onEntityClicked.emit(et);
-                }
+                },
             };
         });
     }
@@ -2967,160 +3375,39 @@ class EntitiesListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-entities-list', imports: [
-                        Menu
-                    ], template: "<div class=\"rtsee-entities-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+            args: [{ selector: 'rtsee-entities-list', imports: [Menu], template: "<div class=\"rtsee-entities-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
         }], propDecorators: { manageEntities: [{
                 type: Input
             }] } });
 
 class ManageEntityComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.entityForm = this.getEntityForm();
-    }
     ngOnInit() {
         if (!this.manageEntities.activeEntity) {
             this.manageEntities.setBlankActiveEntity();
         }
-        if (!this.manageEntities.activeEntity) {
-            throw new Error(`Active entity should be selected`);
+        if (!this.manageEntities.activeEntityForm) {
+            throw new Error(`Active entity form should be selected`);
         }
-        this.presetFields(this.manageEntities.activeEntity);
-        void this.manageEntities.initMultiselect();
     }
-    async submit() {
-        if (!this.manageEntities.activeEntity) {
-            throw new Error(`Active entity should be selected`);
-        }
-        if (this.entityForm.invalid || !this.manageEntities.peer.rtseeAppId) {
-            console.log('Form Invalid!');
+    submit() {
+        if (!this.manageEntities.activeEntityForm) {
             return;
         }
-        const entityParams = {
-            name: this.nameField.getRawValue(),
-            applicationId: this.manageEntities.peer.rtseeAppId,
-            configurationId: this.configurationIdField.getRawValue(),
-            imageUrl: this.imageUrlField.getRawValue(),
-            tags: [],
-            tagIds: []
-        };
-        if (this.manageEntities.activeEntity.id) {
-            await this.manageEntities.updateEntity({
-                ...entityParams,
-                id: this.manageEntities.activeEntity.id
-            });
-        }
-        else {
-            await this.manageEntities.createEntity(entityParams);
-        }
-    }
-    configurationInputChanged() {
-        console.log('Configuration Input Changed');
+        this.manageEntities.activeEntityForm.submit();
     }
     cancel() {
-        console.log('Cancel');
-    }
-    presetFields(entityConfiguration) {
-        this.nameField.setValue(entityConfiguration.name);
-        this.imageUrlField.setValue(entityConfiguration.imageUrl || '');
-        this.configurationIdField.setValue(entityConfiguration.configurationId || '');
-    }
-    getEntityForm() {
-        return this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131)
-                ]
-            }),
-            configurationId: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                ]
-            }),
-            imageUrl: this.formBuilder.control('', {
-                validators: [
-                    Validators.minLength(6),
-                    Validators.maxLength(244)
-                ]
-            })
-        });
-    }
-    get nameField() {
-        return this.entityForm.get('name');
-    }
-    get imageUrlField() {
-        return this.entityForm.get('imageUrl');
+        this.manageEntities.flushActiveEntity();
     }
-    get configurationIdField() {
-        return this.entityForm.get('configurationId');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityComponent, isStandalone: true, selector: "rtsee-manage-entity", inputs: { manageEntities: "manageEntities" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-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-entity-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      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { 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: "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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityComponent, isStandalone: true, selector: "rtsee-manage-entity", inputs: { manageEntities: "manageEntities" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity\">\n  @if (manageEntities.activeEntityForm) {\n    <rtsee-form [form]=\"manageEntities.activeEntityForm\" (formSubmit)=\"submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </rtsee-form>\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: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-entity', imports: [
-                        AutocompleteComponent,
+            args: [{ selector: "rtsee-manage-entity", standalone: true, imports: [
                         Button,
-                        FloatLabel,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        ReactiveFormsModule,
-                        Select,
-                        FormsModule
-                    ], template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-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-entity-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      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntities: [{
-                type: Input
-            }] } });
-
-class RtseeEntityCommentsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityCommentsComponent, isStandalone: true, selector: "rtsee-entity-comments", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n    ></rtsee-chat>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-entity-comments', imports: [
-                        ChatComponent
-                    ], template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n    ></rtsee-chat>\n  }\n</div>\n" }]
-        }], propDecorators: { messenger: [{
-                type: Input
-            }], chat: [{
-                type: Input
-            }] } });
-
-class RtseeEntityTagsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityTagsComponent, isStandalone: true, selector: "rtsee-entity-tags", inputs: { entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-entity-tags', imports: [
-                        Chip
-                    ], template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { entity: [{
-                type: Input
-            }] } });
-
-class RtseeEntityPreviewComponent {
-    ngOnInit() {
-        void this.entity.reload();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityPreviewComponent, isStandalone: true, selector: "rtsee-entity-preview", inputs: { entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n  <div class=\"rtsee-entity-preview-comments\">\n    @if (entity.comments && messenger) {\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n      ></rtsee-entity-comments>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEntityCommentsComponent, selector: "rtsee-entity-comments", inputs: ["messenger", "chat"] }, { kind: "component", type: RtseeEntityTagsComponent, selector: "rtsee-entity-tags", inputs: ["entity"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-entity-preview', imports: [
-                        RtseeEntityCommentsComponent,
-                        RtseeEntityTagsComponent
-                    ], template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n  <div class=\"rtsee-entity-preview-comments\">\n    @if (entity.comments && messenger) {\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n      ></rtsee-entity-comments>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { entity: [{
-                type: Input
-            }], messenger: [{
+                        FormComponent
+                    ], template: "<div class=\"rtsee-manage-entity\">\n  @if (manageEntities.activeEntityForm) {\n    <rtsee-form [form]=\"manageEntities.activeEntityForm\" (formSubmit)=\"submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </rtsee-form>\n  }\n</div>\n" }]
+        }], propDecorators: { manageEntities: [{
                 type: Input
             }] } });
 
@@ -3132,13 +3419,13 @@ class SignInComponent {
         this.signInForm = this.formBuilder.group({
             username: this.formBuilder.nonNullable.control({
                 value: '',
-                disabled: false
+                disabled: false,
             }, {
-                validators: [Validators.required, Validators.email]
+                validators: [Validators.required, Validators.email],
             }),
             password: this.formBuilder.nonNullable.control({
                 value: '',
-                disabled: false
+                disabled: false,
             }, { validators: [Validators.required] }),
             remember: this.formBuilder.nonNullable.control(false),
         });
@@ -3160,23 +3447,22 @@ class SignInComponent {
     login() {
         if (this.signInForm.valid) {
             this.disableFormFields();
-            this.authService.signIn(this.signInForm.getRawValue())
-                .subscribe({
-                next: (() => {
+            this.authService.signIn(this.signInForm.getRawValue()).subscribe({
+                next: () => {
                     void this.router.navigate(this.authService.rtseeAuth.authConfiguration.defaultPostLoginRoute);
                     this.enableFormFields();
                     setTimeout(() => {
                         window.location.reload();
                     }, 100);
-                }),
-                error: ((error) => {
+                },
+                error: (error) => {
                     console.log(error);
                     this.showServerSideErrorForXSeconds(error.error.message);
                     this.enableFormFields();
-                }),
-                complete: (() => {
+                },
+                complete: () => {
                     this.enableFormFields();
-                })
+                },
             });
         }
         else {
@@ -3217,14 +3503,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         FloatLabel,
                         Checkbox,
                         Message,
-                        ProgressSpinner
+                        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\">{{ 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 {
-    constructor() {
-    }
+    constructor() { }
     static getKeysAsValueObject(obj) {
+        // object was {}
         if (obj) {
             return Object.keys(obj).reduce((result, value) => {
                 result[value] = value;
@@ -3239,7 +3525,7 @@ class UtilsService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
@@ -3258,7 +3544,7 @@ class ConfirmPasswordValidator {
         const passwordConfirmation = passwordConfirmationField.getRawValue();
         if (password !== passwordConfirmation) {
             return {
-                confirmPassword: true
+                confirmPassword: true,
             };
         }
         return null;
@@ -3275,16 +3561,18 @@ class SignUpComponent {
         this.errorMessage = '';
         this.AuthEndpointsKeys = AuthEndpointsKeys;
         this.signUpForm = this.formBuilder.group({
-            email: this.formBuilder.control('', { validators: [Validators.required, Validators.email] }),
-            password: this.formBuilder.control('', { validators: [Validators.required, Validators.minLength(6)] }),
+            email: this.formBuilder.control('', {
+                validators: [Validators.required, Validators.email],
+            }),
+            password: this.formBuilder.control('', {
+                validators: [Validators.required, Validators.minLength(6)],
+            }),
             passwordConfirmation: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(6)
-                ]
+                validators: [Validators.required, Validators.minLength(6)],
             }),
-            terms: this.formBuilder.control(false, { nonNullable: true,
-                validators: [Validators.requiredTrue]
+            terms: this.formBuilder.control(false, {
+                nonNullable: true,
+                validators: [Validators.requiredTrue],
             }),
         }, { validators: [ConfirmPasswordValidator.MatchFields] });
         this.signUpFormKeys = UtilsService.getKeysAsValueObject(this.signUpForm.getRawValue());
@@ -3309,22 +3597,27 @@ class SignUpComponent {
             this.errorMessage = '';
             this.successMessage = '';
             const formValues = this.signUpForm.getRawValue();
-            this.authService.signUp({
+            this.authService
+                .signUp({
                 email: formValues.email,
                 password: formValues.password,
-                terms: formValues.terms
-            }).subscribe({
+                terms: formValues.terms,
+            })
+                .subscribe({
                 next: (response) => {
                     this.loadInProgress = false;
-                    this.successMessage = 'Registration successful! You can now sign in.';
+                    this.successMessage =
+                        'Registration successful! You can now sign in.';
                     void this.router.navigate(this.authConfiguration.getRoutePathSplit(this.AuthEndpointsKeys.SIGN_IN));
                     console.log('User registered successfully', response);
                 },
                 error: (error) => {
                     this.loadInProgress = false;
-                    this.errorMessage = error.error?.message || 'Error during registration. Please try again.';
+                    this.errorMessage =
+                        error.error?.message ||
+                            'Error during registration. Please try again.';
                     console.error('Error during registration', error);
-                }
+                },
             });
         }
     }
@@ -3344,7 +3637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         FloatLabel,
                         Checkbox,
                         Message,
-                        ProgressSpinner
+                        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\">Personal Account Registration</h2>\n  <p class=\"auth-title-description\">Create your personal account to view stories</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <input id=\"sign-up-email\"\n                 pInputText\n                 [formControl]=\"emailField\"\n                 [class.p-invalid]=\"emailField.invalid && emailField.touched\"\n          />\n          <label for=\"sign-up-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (emailField.hasError('required') && emailField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is required</p-message>\n      }\n      @if (emailField.hasError('email') && emailField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Please enter a valid email address</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"sign-up-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n                      [styleClass]=\"(passwordField.invalid && passwordField.touched) || (signUpForm.hasError('confirmPassword') && passwordField.touched) ? 'p-invalid' : ''\"\n          />\n          <label for=\"sign-up-password\">Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (passwordField.hasError('required') && 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 (passwordField.hasError('minlength') && passwordField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password must be at least 6 characters long</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"confirm-password\"\n                      [formControl]=\"passwordConfirmationField\"\n                      [feedback]=\"false\"\n                      [styleClass]=\"(passwordConfirmationField.invalid && passwordConfirmationField.touched) || (signUpForm.hasError('confirmPassword') && passwordConfirmationField.touched) ? 'p-invalid' : ''\"\n          />\n          <label for=\"confirm-password\">Confirm Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (passwordConfirmationField.hasError('required') && passwordConfirmationField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password confirmation is required</p-message>\n      }\n      @if (passwordConfirmationField.hasError('minlength') && passwordConfirmationField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password confirmation must be at least 6 characters long</p-message>\n      }\n      @if (signUpForm.hasError('confirmPassword') && passwordConfirmationField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Passwords do not match</p-message>\n      }\n    </div>\n\n    @if (successMessage) {\n      <p-message class=\"rtsee-form-success-message\"\n                 severity=\"success\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ successMessage }}</p-message>\n    }\n\n    @if (errorMessage) {\n      <p-message class=\"rtsee-form-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ errorMessage }}</p-message>\n    }\n    <div class=\"rtsee-form-field-container\">\n      <p-checkbox inputId=\"terms\" [binary]=\"true\" [formControl]=\"termsField\" />\n      <label for=\"terms\" class=\"ml-2\">I agree to the&nbsp;<a href=\"#\" [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.PRIVACY_POLICY)\" class=\"auth-deep-blue-sm-medium\">terms of use</a></label>\n      @if (termsField.hasError('required') && termsField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >You must accept the terms and conditions</p-message>\n      }\n    </div>\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Sign Up\"\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\n  <p class=\"rtsee-form-label\">\n    <span>Already have an account?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Sign In</a>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.Router }, { type: RTSeeAuthService }] });
 
@@ -3358,7 +3651,9 @@ class ForgotPasswordComponent {
         this.errorMessage = '';
         this.AuthEndpointsKeys = AuthEndpointsKeys;
         this.emailForm = this.formBuilder.group({
-            email: this.formBuilder.nonNullable.control('', { validators: [Validators.required, Validators.email] }),
+            email: this.formBuilder.nonNullable.control('', {
+                validators: [Validators.required, Validators.email],
+            }),
         });
         this.forgotPasswordFormKeys = UtilsService.getKeysAsValueObject(this.emailForm.getRawValue());
         this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
@@ -3373,18 +3668,23 @@ class ForgotPasswordComponent {
             this.errorMessage = '';
             this.successMessage = '';
             const email = this.emailForm.getRawValue().email;
-            this.authService.forgotPassword({ email }).subscribe({
+            this.authService
+                .forgotPassword({ email })
+                .subscribe({
                 next: (response) => {
                     this.isLoading = false;
-                    this.successMessage = response.message || 'Password reset email sent successfully!';
+                    this.successMessage =
+                        response.message || 'Password reset email sent successfully!';
                     console.log('Password reset email sent successfully', response);
                     void this.router.navigate(this.authConfiguration.getRoutePathSplit(this.AuthEndpointsKeys.SIGN_IN));
                 },
                 error: (error) => {
                     this.isLoading = false;
-                    this.errorMessage = error.error?.message || 'Error sending password reset email. Please try again.';
+                    this.errorMessage =
+                        error.error?.message ||
+                            'Error sending password reset email. Please try again.';
                     console.error('Error sending password reset email', error);
-                }
+                },
             });
         }
     }
@@ -3402,7 +3702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         InputText,
                         FloatLabel,
                         Message,
-                        ProgressSpinner
+                        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\">Password Recovery</h2>\n  <p class=\"auth-title-description\">Enter your email address to receive password reset instructions</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"emailForm\" (ngSubmit)=\"submitEmail()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <input id=\"forgot-password-email\"\n                 pInputText\n                 [formControl]=\"emailField\"\n                 [class.p-invalid]=\"emailField.invalid && emailField.touched\"\n          />\n          <label for=\"forgot-password-email\">Email</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (emailField.hasError('required') && emailField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Email is required</p-message>\n      }\n      @if (emailField.hasError('email') && emailField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Please enter a valid email address</p-message>\n      }\n    </div>\n\n    @if (successMessage) {\n      <p-message class=\"rtsee-form-success-message\"\n                 severity=\"success\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ successMessage }}</p-message>\n    }\n\n    @if (errorMessage) {\n      <p-message class=\"rtsee-form-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ errorMessage }}</p-message>\n    }\n\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Send\"\n                [disabled]=\"isLoading\"\n      />\n      @if (isLoading) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n\n  <p class=\"rtsee-form-label\">\n    <span>Remember your password?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\"\n       [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n       class=\"auth-deep-blue-sm-medium\"\n    >Sign In</a>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.Router }, { type: RTSeeAuthService }] });
 
@@ -3427,13 +3727,25 @@ class ResetPasswordComponent {
         this.errorMessage = '';
         this.hidePassword = {
             password: true,
-            passwordConfirm: true
+            passwordConfirm: true,
         };
         this.FormErrorKey = FormErrorKey;
         this.AuthEndpointsKeys = AuthEndpointsKeys;
         this.resetPasswordForm = this.formBuilder.group({
-            password: this.formBuilder.control('', { validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true }),
-            passwordConfirm: this.formBuilder.control('', { validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true }),
+            password: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(COMMON_CONSTANTS.minPasswordLength),
+                ],
+                nonNullable: true,
+            }),
+            passwordConfirm: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(COMMON_CONSTANTS.minPasswordLength),
+                ],
+                nonNullable: true,
+            }),
         }, { validators: [this.passwordMatchValidator()] });
         this.passwordFormKeys = UtilsService.getKeysAsValueObject(this.resetPasswordForm.value);
         this.authConfiguration = this.authService.authConfiguration;
@@ -3454,22 +3766,27 @@ class ResetPasswordComponent {
             this.errorMessage = '';
             this.successMessage = '';
             const formValues = this.resetPasswordForm.getRawValue();
-            this.authService.resetPassword({
+            this.authService
+                .resetPassword({
                 password: formValues.password,
                 passwordConfirm: formValues.passwordConfirm,
-                token: this.token
-            }).subscribe({
+                token: this.token,
+            })
+                .subscribe({
                 next: (response) => {
                     this.isLoading = false;
-                    this.successMessage = response.message || 'Password reset successfully!';
+                    this.successMessage =
+                        response.message || 'Password reset successfully!';
                     console.log('Password reset successfully', response);
                     void this.router.navigate(this.authConfiguration.getRoutePathSplit(this.AuthEndpointsKeys.SIGN_IN));
                 },
                 error: (error) => {
                     this.isLoading = false;
-                    this.errorMessage = error.error?.message || 'Error resetting password. Please try again.';
+                    this.errorMessage =
+                        error.error?.message ||
+                            'Error resetting password. Please try again.';
                     console.error('Error resetting password', error);
-                }
+                },
             });
         }
     }
@@ -3480,10 +3797,14 @@ class ResetPasswordComponent {
             const passwordConfirm = form.value.passwordConfirm;
             if (password !== passwordConfirm) {
                 if (form.controls.password.valid) {
-                    form.controls.password.setErrors({ [FormErrorKey.passwordsMismatch]: true });
+                    form.controls.password.setErrors({
+                        [FormErrorKey.passwordsMismatch]: true,
+                    });
                 }
                 if (form.controls.passwordConfirm.valid) {
-                    form.controls.passwordConfirm.setErrors({ [FormErrorKey.passwordsMismatch]: true });
+                    form.controls.passwordConfirm.setErrors({
+                        [FormErrorKey.passwordsMismatch]: true,
+                    });
                 }
                 return { [FormErrorKey.passwordsMismatch]: true };
             }
@@ -3509,7 +3830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Password,
                         FloatLabel,
                         Message,
-                        ProgressSpinner
+                        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\">Password Reset</h2>\n  <p class=\"auth-title-description\">Please enter a new password for your account.</p>\n\n  <form class=\"auth-form rtsee-form\" [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"new-password\"\n                      [formControl]=\"passwordField\"\n                      [feedback]=\"false\"\n                      [class]=\"(passwordField.invalid && passwordField.touched) || (resetPasswordForm.hasError(FormErrorKey.passwordsMismatch) && passwordField.touched) ? 'p-invalid' : ''\"\n          />\n          <label for=\"new-password\">New Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\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    </div>\n    <div class=\"rtsee-form-field-container\">\n      <p-inputgroup>\n        <p-floatlabel variant=\"on\">\n          <p-password id=\"confirm-password\"\n                      [formControl]=\"passwordConfirmField\"\n                      [feedback]=\"false\"\n                      [class]=\"(passwordConfirmField.invalid && passwordConfirmField.touched) || (resetPasswordForm.hasError(FormErrorKey.passwordsMismatch) && passwordConfirmField.touched) ? 'p-invalid' : ''\"\n          />\n          <label for=\"confirm-password\">Confirm Password</label>\n        </p-floatlabel>\n      </p-inputgroup>\n      @if (!passwordConfirmField.valid && passwordConfirmField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Password confirmation is required</p-message>\n      }\n      @if (resetPasswordForm.hasError(FormErrorKey.passwordsMismatch) && passwordConfirmField.touched) {\n        <p-message class=\"rtsee-form-field-error-message\"\n                   severity=\"error\"\n                   variant=\"simple\"\n                   size=\"small\"\n        >Passwords do not match</p-message>\n      }\n    </div>\n\n    @if (successMessage) {\n      <p-message class=\"rtsee-form-success-message\"\n                 severity=\"success\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ successMessage }}</p-message>\n    }\n\n    @if (errorMessage) {\n      <p-message class=\"rtsee-form-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ errorMessage }}</p-message>\n    }\n\n    <div class=\"rtsee-form-submit-container\">\n      <p-button type=\"submit\"\n                label=\"Reset Password\"\n                [disabled]=\"isLoading\"\n      />\n      @if (isLoading) {\n        <p-progress-spinner class=\"rtsee-progress-spinner rtsee-progress-spinner-sm\"></p-progress-spinner>\n      }\n    </div>\n  </form>\n\n  <p class=\"rtsee-form-label\">\n    <span>Remember your password?</span>\n    <span>&nbsp;</span>\n    <a href=\"#\" class=\"auth-deep-blue-sm-medium\">Sign In</a>\n  </p>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: RTSeeAuthService }] });
 
@@ -3519,10 +3840,7 @@ class PrivacyPolicyComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-privacy-policy', imports: [
-                        ButtonModule,
-                        MessageModule
-                    ], standalone: true, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"] }]
+            args: [{ selector: 'rtsee-privacy-policy', imports: [ButtonModule, MessageModule], standalone: true, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"] }]
         }] });
 
 class RTSeeAuthComponent {
@@ -3538,8 +3856,7 @@ class RTSeeAuthComponent {
         else if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.FORGOT_PASSWORD])) {
             this.activeComponent = 'forgot-password';
         }
-        else if (window.location.pathname
-            .includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.RESET_PASSWORD].split('/')[0])) {
+        else if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.RESET_PASSWORD].split('/')[0])) {
             this.activeComponent = 'reset-password';
         }
         else if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.PRIVACY_POLICY])) {
@@ -3559,7 +3876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         SignUpComponent,
                         ForgotPasswordComponent,
                         ResetPasswordComponent,
-                        PrivacyPolicyComponent
+                        PrivacyPolicyComponent,
                     ], standalone: true, template: "<div class=\"rtsee-auth\">\n  @if (authService.rtseeAuth) {\n    @if (activeComponent === 'sign-in') {\n      <rtsee-sign-in></rtsee-sign-in>\n    }\n    @if (activeComponent === 'sign-up') {\n      <rtsee-sign-up></rtsee-sign-up>\n    }\n    @if (activeComponent === 'forgot-password') {\n      <rtsee-forgot-password></rtsee-forgot-password>\n    }\n    @if (activeComponent === 'reset-password') {\n      <rtsee-reset-password></rtsee-reset-password>\n    }\n    @if (activeComponent === 'privacy-policy') {\n      <rtsee-privacy-policy></rtsee-privacy-policy>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { auth: [{
                 type: Input
@@ -3610,11 +3927,7 @@ class SearchComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-search', imports: [
-                        ReactiveFormsModule,
-                        PreloaderComponent,
-                        NgForOf
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-search\">\n  <input type=\"text\"\n         [formControl]=\"queryControl\"\n         class=\"rtsee-messenger-search-input\"\n         placeholder=\"Search\"/>\n</div>\n\n<div class=\"rtsee-messenger-search-results\">\n  <rtsee-preloader [diameter]=\"50\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         class=\"rtsee-messenger-search-results-chat-wrapper\">\n      <p>{{chat.name}}</p>\n    </div>\n  </div>\n  <p>Messages</p>\n  <div class=\"rtsee-messenger-search-results-messages\">\n    <div *ngFor=\"let message of search.results.messages\" class=\"rtsee-messenger-search-results-message-wrapper\">\n      <p>{{message.chatName || message.senderName }}</p>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-search', imports: [ReactiveFormsModule, PreloaderComponent, NgForOf], standalone: true, template: "<div class=\"rtsee-messenger-search\">\n  <input type=\"text\"\n         [formControl]=\"queryControl\"\n         class=\"rtsee-messenger-search-input\"\n         placeholder=\"Search\"/>\n</div>\n\n<div class=\"rtsee-messenger-search-results\">\n  <rtsee-preloader [diameter]=\"50\"\n                   *ngIf=\"search.searchInProgress\"\n  ></rtsee-preloader>\n  <p>Chats</p>\n  <div class=\"rtsee-messenger-search-results-chats\">\n    <div *ngFor=\"let chat of search.results.chats\"\n         class=\"rtsee-messenger-search-results-chat-wrapper\">\n      <p>{{chat.name}}</p>\n    </div>\n  </div>\n  <p>Messages</p>\n  <div class=\"rtsee-messenger-search-results-messages\">\n    <div *ngFor=\"let message of search.results.messages\" class=\"rtsee-messenger-search-results-message-wrapper\">\n      <p>{{message.chatName || message.senderName }}</p>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { search: [{
                 type: Input
             }] } });
@@ -3641,9 +3954,7 @@ class ContactsMultiselectComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ContactsMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-contacts-multiselect', imports: [
-                        SearchComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n" }]
+            args: [{ selector: 'rtsee-contacts-multiselect', imports: [SearchComponent], standalone: true, template: "<div class=\"rtsee-messenger-contacts-multiselect\">\n  <rtsee-search [search]=\"search\"></rtsee-search>\n</div>\n" }]
         }], propDecorators: { menuState: [{
                 type: Input
             }], search: [{
@@ -3672,7 +3983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgIf,
                         SearchComponent,
                         ManageChatComponent,
-                        ContactsMultiselectComponent
+                        ContactsMultiselectComponent,
                     ], standalone: true, template: "<div class=\"rtsee-messenger-main-menu\">\n  <div class=\"rtsee-messenger-main-menu-home\" *ngIf=\"state.activePanel === MainMenuPanels.HOME\">\n    <ul class=\"rtsee-messenger-controls\">\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewGroupClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">people</span>\n          </div>\n          <span>New Group</span>\n        </div>\n      </li>\n      <li>\n        <div class=\"rtsee-messenger-control-item\" (click)=\"onNewChannelClicked()\">\n          <div class=\"rtsee-messenger-control-icon\">\n            <span class=\"material-icons-outlined\">campaign</span>\n          </div>\n          <span>New Channel</span>\n        </div>\n      </li>\n    </ul>\n    <rtsee-search [search]=\"search\" ></rtsee-search>\n  </div>\n\n  <rtsee-manage-chat *ngIf=\"state.activePanel === MainMenuPanels.MANAGE_CHAT\"\n                     [messenger]=\"messenger\"\n                     [menuState]=\"state\"\n  ></rtsee-manage-chat>\n  <rtsee-contacts-multiselect [search]=\"search\"\n                              [menuState]=\"state\"\n                              *ngIf=\"state.activePanel === MainMenuPanels.CONTACTS_SELECT\"\n  ></rtsee-contacts-multiselect>\n</div>\n" }]
         }], propDecorators: { search: [{
                 type: Input
@@ -3695,7 +4006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             type: Directive,
             args: [{
                     selector: '[rtseeShave]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
@@ -3760,20 +4071,22 @@ class RTSeeModule {
             NgOptimizedImage,
             RouterLink,
             RouterLinkActive,
-            NgxCaptchaModule], exports: [RTSeeConferenceComponent,
+            NgxCaptchaModule,
+            FormComponent], exports: [RTSeeConferenceComponent,
             MessengerComponent,
             RtseeEventsDashboardComponent,
             RTSeeContainerComponent,
             PresentationComponent,
             RTSeeAuthComponent,
-            PaymentProductSnippetComponent] }); }
+            PaymentProductSnippetComponent,
+            FormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeModule, providers: [
             provideAnimationsAsync(),
             providePrimeNG({
                 theme: {
-                    preset: Aura
-                }
-            })
+                    preset: Aura,
+                },
+            }),
         ], imports: [RTSeeAuthComponent,
             ForgotPasswordComponent,
             SignInComponent,
@@ -3800,7 +4113,8 @@ class RTSeeModule {
             AutosizeModule,
             InfiniteScrollModule,
             FormsModule,
-            NgxCaptchaModule] }); }
+            NgxCaptchaModule,
+            FormComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeModule, decorators: [{
             type: NgModule,
@@ -3809,9 +4123,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         provideAnimationsAsync(),
                         providePrimeNG({
                             theme: {
-                                preset: Aura
-                            }
-                        })
+                                preset: Aura,
+                            },
+                        }),
                     ],
                     declarations: [],
                     imports: [
@@ -3865,7 +4179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgOptimizedImage,
                         RouterLink,
                         RouterLinkActive,
-                        NgxCaptchaModule
+                        NgxCaptchaModule,
+                        FormComponent,
                     ],
                     exports: [
                         RTSeeConferenceComponent,
@@ -3874,11 +4189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RTSeeContainerComponent,
                         PresentationComponent,
                         RTSeeAuthComponent,
-                        PaymentProductSnippetComponent
+                        PaymentProductSnippetComponent,
+                        FormComponent,
                     ],
-                    schemas: [
-                        CUSTOM_ELEMENTS_SCHEMA,
-                    ]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
@@ -3890,5 +4204,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map