@rtsee/ngx 0.0.74 → 0.0.76

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

@@ -1,12 +1,14 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, ViewChild, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
-import { NgClass, NgForOf, NgIf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { interval, tap } from 'rxjs';
+import { Select } from 'primeng/select';
+import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
+import { interval, tap } from 'rxjs';
 import * as i2$2 from 'primeng/message';
 import { Message, MessageModule } from 'primeng/message';
 import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
@@ -20,25 +22,28 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { RTSeeChatEvents } from '@rtsee/messenger';
 import { Textarea } from 'primeng/textarea';
 import { Chip } from 'primeng/chip';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { Toast } from 'primeng/toast';
+import * as i1$2 from 'primeng/api';
+import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
-import { FloatLabel } from 'primeng/floatlabel';
 import { InputGroup } from 'primeng/inputgroup';
 import { InputText } from 'primeng/inputtext';
 import { InputNumber } from 'primeng/inputnumber';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import { RadioButton } from 'primeng/radiobutton';
-import * as i1$2 from 'primeng/autocomplete';
+import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { OrderList } from 'primeng/orderlist';
 import { Divider } from 'primeng/divider';
+import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
 import { Fieldset } from 'primeng/fieldset';
 import { Tag } from 'primeng/tag';
 import { Listbox } from 'primeng/listbox';
-import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
@@ -47,7 +52,6 @@ import { hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 import { Password } from 'primeng/password';
 import { Checkbox } from 'primeng/checkbox';
 import { ProgressSpinner } from 'primeng/progressspinner';
-import * as i1$3 from 'primeng/api';
 import { AutosizeModule } from 'ngx-autosize';
 import { debounceTime } from 'rxjs/operators';
 import shave from 'shave';
@@ -77,13 +81,13 @@ class RTSeeControlsComponent {
             : this.rtsee.startScreenShare();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeControlsComponent, isStandalone: true, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0, 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:35px;width:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 9px;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 .mdc-icon-button{background-color:red}.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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeControlsComponent, isStandalone: true, selector: "ngx-rtsee-controls", inputs: { rtsee: "rtsee", fullScreenMode: "fullScreenMode" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 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:35px;width:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 9px;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 .mdc-icon-button{background-color:red}.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"] }]
+                    ], 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: [{
@@ -91,11 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RtseeSettingsComponent {
-    constructor() {
-        this.availableAudioInputDevices = [];
-        this.availableVideoInputDevices = [];
-        this.availableAudioOutputDevices = [];
-    }
+    constructor() { }
     ngOnInit() {
         this.refreshSelectOptions();
     }
@@ -103,34 +103,26 @@ class RtseeSettingsComponent {
         void this.rtSee.refreshMediaDevicesList();
     }
     audioInputChanged() {
-        if (!this.audioInputDeviceId) {
-            return;
-        }
-        this.rtSee.setAudioInputDevice(this.audioInputDeviceId);
-        console.log(this.audioInputDeviceId);
+        this.rtSee.setAudioInputDevice();
     }
     audioOutputChanged() {
-        if (!this.audioOutputDeviceId) {
-            return;
-        }
-        this.rtSee.setAudioOutputDevice(this.audioOutputDeviceId);
+        this.rtSee.setAudioOutputDevice();
     }
     videoInputChanged() {
-        if (!this.videoInputDeviceId) {
-            return;
-        }
-        this.rtSee.setVideoInputDevice(this.videoInputDeviceId);
+        this.rtSee.setVideoInputDevice();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RtseeSettingsComponent, isStandalone: true, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices\">\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"audioInputChanged()\"\n              [(ngModel)]=\"audioInputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"audio-input\"\n      >\n        <option *ngFor=\"let device of rtSee.audioInputDevices\"\n                [value]=\"device.deviceId\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"audioOutputChanged()\"\n              [(ngModel)]=\"audioOutputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"audio-output\"\n      >\n        <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" >\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"videoInputChanged()\"\n              [(ngModel)]=\"videoInputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"video-input\"\n      >\n        <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RtseeSettingsComponent, isStandalone: true, selector: "ngx-rtsee-settings", inputs: { rtSee: "rtSee", fullScreenMode: "fullScreenMode" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-rtsee-settings', imports: [
                         NgClass,
                         FormsModule,
-                        NgForOf
-                    ], standalone: true, template: "<div class=\"rtsee-settings\" [ngClass]=\"{'rtsee-full-screen-settings' : fullScreenMode}\">\n  <div class=\"rtsee-devices\">\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-input\">Audio Input:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"audioInputChanged()\"\n              [(ngModel)]=\"audioInputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"audio-input\"\n      >\n        <option *ngFor=\"let device of rtSee.audioInputDevices\"\n                [value]=\"device.deviceId\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"audio-output\">Audio Output:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"audioOutputChanged()\"\n              [(ngModel)]=\"audioOutputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"audio-output\"\n      >\n        <option *ngFor=\"let device of rtSee.audioOutputDevices\" [value]=\"device.deviceId\" >\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n    <div class=\"rtsee-device-select-wrapper\">\n      <label class=\"rtsee-select-label\" for=\"video-input\">Video Input:</label>\n      <select (click)=\"refreshSelectOptions()\"\n              (ngModelChange)=\"videoInputChanged()\"\n              [(ngModel)]=\"videoInputDeviceId\"\n              class=\"rtsee-select\"\n              id=\"video-input\"\n      >\n        <option *ngFor=\"let device of rtSee.videoInputDevices\" [value]=\"device.deviceId\">\n          {{device.label}}\n        </option>\n      </select>\n    </div>\n  </div>\n</div>\n", styles: [".rtsee-settings{box-sizing:border-box;background-color:#404040;border-bottom:1px solid;max-height:180px;padding:16px 0;overflow:auto;color:#fff}.rtsee-settings .rtsee-device-select-wrapper{padding:0 10px}.rtsee-settings .rtsee-device-select-wrapper .rtsee-select-label{font-family:monospace;display:inline-block;margin:8px}.rtsee-settings.rtsee-full-screen-settings{max-height:unset;overflow:unset}\n"] }]
+                        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: [{
@@ -229,7 +221,7 @@ class RTSeeConferenceComponent {
         this.rtSee.uiControls.toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeConferenceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeConferenceComponent, isStandalone: true, selector: "rtsee-conference", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleFullScreenMode()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">open_in_full</span>\n    </button>\n  </div>\n  @if (settingsViewEnabled) {\n    <div class=\"rtsee-settings-container\">\n      <button mat-icon-button matSuffix\n              type=\"button\"\n              (click)=\"this.toggleSettings()\"\n              class=\"rtsee-close-settings-button\"\n      >\n        <span class=\"material-icons-outlined\">close</span>\n      </button>\n      <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n    </div>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeConferenceComponent, isStandalone: true, selector: "rtsee-conference", inputs: { rtSee: "rtSee" }, ngImport: i0, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RtseeSettingsComponent, selector: "ngx-rtsee-settings", inputs: ["rtSee", "fullScreenMode"] }, { kind: "component", type: RtseePeerComponent, selector: "ngx-rtsee-peer", inputs: ["peer"] }, { kind: "component", type: RTSeeControlsComponent, selector: "ngx-rtsee-controls", inputs: ["rtsee", "fullScreenMode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeConferenceComponent, decorators: [{
             type: Component,
@@ -238,7 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeSettingsComponent,
                         RtseePeerComponent,
                         RTSeeControlsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n    <button mat-icon-button matSuffix\n            type=\"button\"\n            (click)=\"this.toggleFullScreenMode()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">open_in_full</span>\n    </button>\n  </div>\n  @if (settingsViewEnabled) {\n    <div class=\"rtsee-settings-container\">\n      <button mat-icon-button matSuffix\n              type=\"button\"\n              (click)=\"this.toggleSettings()\"\n              class=\"rtsee-close-settings-button\"\n      >\n        <span class=\"material-icons-outlined\">close</span>\n      </button>\n      <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n    </div>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-conference-shell\" [ngClass]=\"{\n'rtsee-conference-shell-expanded': rtSee.uiControls.isExpanded,\n'rtsee-conference-shell-no-companions': !rtSee.rtcPeerConnections.connections?.length\n}\">\n  @if (rtSee.localStream && rtSee.camera) {\n    <div class=\"rtsee-local-peer\">\n      <video class=\"rtsee-local-video\"\n             [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.localStream\"\n             playsinline=\"true\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-window-controls\">\n    <button type=\"button\"\n            (click)=\"rtSee.toggleSettings()\"\n            class=\"rtsee-window-controls-button rtsee-ripple-button\"\n    >\n      <span class=\"material-icons-outlined\">settings</span>\n    </button>\n  </div>\n  @if (rtSee.settingsOpened) {\n    <ngx-rtsee-settings [rtSee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-settings>\n  }\n  @if (rtSee.screenSharePeer) {\n    <div class=\"rtsee-screen-share\">\n      <video [autoplay]=\"true\"\n             [muted]=\"true\"\n             [srcObject]=\"rtSee.screenSharePeer.remoteVideoStream\"\n             playsinline=\"true\"\n             class=\"rtsee-screen-share-video\"\n      ></video>\n    </div>\n  }\n  <div class=\"rtsee-peers\" [ngClass]=\"{\n    'rtsee-peers-alone': !rtSee.rtcPeerConnections.connections?.length,\n    'rtsee-peers-one': rtSee.rtcPeerConnections.connections?.length === 1,\n    'rtsee-peers-three-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 1\n      && rtSee.rtcPeerConnections.connections.length < 4,\n    'rtsee-peers-six-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length > 3\n      && rtSee.rtcPeerConnections.connections.length < 7,\n    'rtsee-peers-nine-grid': rtSee.rtcPeerConnections.connections?.length\n      && rtSee.rtcPeerConnections.connections.length >= 7\n  }\">\n    @for (peer of rtSee.rtcPeerConnections.connections; track peer.clientId) {\n      <div class=\"rtsee-peer-wrapper\">\n        <ngx-rtsee-peer [peer]=\"peer\"></ngx-rtsee-peer>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-peers-list\"></div>\n  <div class=\"rtsee-controls-wrapper\">\n    <ngx-rtsee-controls [rtsee]=\"rtSee\" [fullScreenMode]=\"rtSee.uiControls.isExpanded\"></ngx-rtsee-controls>\n  </div>\n</div>\n\n" }]
         }], ctorParameters: () => [], propDecorators: { rtSee: [{
                 type: Input
             }] } });
@@ -678,7 +670,9 @@ class MessagesListComponent {
         this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
     }
     ngAfterViewInit() {
-        console.log(this.chat.messages.length);
+        if (this.chat.isStandalone) {
+            return;
+        }
         this.scrollToBottom();
     }
     onMessageSent() {
@@ -705,6 +699,9 @@ class MessagesListComponent {
         this.chat.loadRemoteMessages('front');
     }
     scrollToBottom() {
+        if (this.chat.isStandalone) {
+            return;
+        }
         setTimeout(() => {
             this.scroller.scrollToPosition([0, document.body.scrollHeight]);
             if (!this.scrollContainer?.nativeElement?.scrollHeight) {
@@ -789,18 +786,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['chatInput']
             }] } });
 
+class ViewportObserverDirective {
+    constructor(element) {
+        this.element = element;
+        this.inViewport = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        // Options for the observer: 0.2 means 20% of the element must be visible
+        // to trigger the callback
+        const options = {
+            root: null, // observing relative to the document's viewport
+            rootMargin: '0px',
+            threshold: 0
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                // entry.isIntersecting is true if the element is in the viewport
+                this.inViewport.emit(entry.isIntersecting);
+            });
+        }, options);
+        this.observer.observe(this.element.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewportObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: ViewportObserverDirective, isStandalone: true, selector: "[rtseeViewportObserver]", outputs: { inViewport: "inViewport" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewportObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtseeViewportObserver]',
+                    standalone: true // Use `standalone: true` in modern Angular
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inViewport: [{
+                type: Output
+            }] } });
+
 class ChatComponent {
+    onInViewPortChange(value) {
+        console.log('Received inViewPortChange', value);
+        this.chat.isInViewPort = value;
+    }
+    ngOnInit() {
+        if (!this.chat && !this.chatData) {
+            console.log(`Either chat ot chatData is required!`);
+        }
+        if (!this.chat && this.chatData) {
+            this.chat = this.messenger.addStandaloneChat(this.chatData);
+            this.chat.loadRemoteMessages('back');
+        }
+    }
+    ngOnDestroy() {
+        if (this.chat.isStandalone) {
+            this.messenger.removeStandaloneChat(this.chat.id);
+        }
+    }
     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", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\">\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-chat', imports: [
                         MessagesListComponent,
-                        ChatInputComponent
-                    ], standalone: true, template: "<div class=\"rtsee-chat\">\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n" }]
+                        ChatInputComponent,
+                        ViewportObserverDirective,
+                        NgClass
+                    ], standalone: true, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
+            }], chatData: [{
+                type: Input
             }], messenger: [{
                 type: Input
             }] } });
@@ -811,7 +869,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}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -981,17 +1039,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class JoinCallComponent {
+    constructor(messageService) {
+        this.messageService = messageService;
+        this.recentlyCopied = false;
+        this.window = window;
+    }
+    copyClicked() {
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Link Copied!',
+            detail: 'The link was copied to clipboard!'
+        });
+        this.recentlyCopied = true;
+        setTimeout(() => {
+            this.recentlyCopied = false;
+        }, 2000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, deps: [{ token: i1$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: JoinCallComponent, isStandalone: true, selector: "rtsee-join-call", inputs: { presentation: "presentation", room: "room" }, providers: [MessageService], ngImport: i0, template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button label=\"Start A Call\"\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", 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: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { 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: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+}
+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=\"Start A Call\"\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: [{
+                type: Input
+            }] } });
+
 class PresentationHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom && !presentation.activeStory) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p-button (click)=\"presentation.emitJoinRoomCallEvent()\"\n                  label=\"Join Video Call\"\n        ></p-button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
 }
 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
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom && !presentation.activeStory) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p-button (click)=\"presentation.emitJoinRoomCallEvent()\"\n                  label=\"Join Video Call\"\n        ></p-button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
+                        Chip,
+                        JoinCallComponent
+                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"'Dashboard'\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
@@ -1202,7 +1295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class AutocompleteComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -1297,7 +1390,9 @@ class ManageStoryComponent {
                     Validators.maxLength(244)
                 ]
             }),
-            averageReadTime: this.formBuilder.control(0)
+            averageReadTime: this.formBuilder.control(0),
+            isPublished: this.formBuilder.control(false),
+            isDiscussable: this.formBuilder.control(false)
         });
     }
     submit() {
@@ -1306,6 +1401,7 @@ class ManageStoryComponent {
                 name: this.nameField.value,
                 description: this.descriptionField.value,
                 averageReadTime: this.averageReadTimeField.value,
+                commentsEnabled: this.isDiscussableField.value
             });
         }
         else {
@@ -1316,6 +1412,8 @@ class ManageStoryComponent {
         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');
@@ -1326,6 +1424,12 @@ class ManageStoryComponent {
     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();
@@ -1337,7 +1441,7 @@ class ManageStoryComponent {
         this.averageReadTimeField.disable();
     }
     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]=\"100\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\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: 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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
             type: Component,
@@ -1355,8 +1459,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         AutocompleteComponent,
                         ManageSlidesComponent,
                         ManageSlideComponent,
-                        Divider
-                    ], 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]=\"100\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\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" }]
+                        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: [{
                 type: Input
             }] } });
@@ -1478,7 +1583,7 @@ class ManageLabelComponent {
             symbol: this.formBuilder.control('', {
                 validators: [
                     Validators.required,
-                    Validators.minLength(6),
+                    Validators.minLength(1),
                     Validators.maxLength(244)
                 ]
             })
@@ -1576,7 +1681,7 @@ class PresentationSettingsComponent {
         this.window = window;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <div class=\"rtsee-presentation-room-invite\">\n          <p-button label=\"Start A Call\"\n                    (click)=\"presentation.emitJoinRoomCallEvent()\"\n          ></p-button>\n          <div class=\"rtsee-presentation-room-invite-link\">\n            <p-button icon=\"pi pi-copy\"\n                      severity=\"secondary\"\n                      class=\"copy-btn\"\n                      [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + presentation.selectedRoom.id\"\n            ></p-button>\n            <span>{{ window.location.origin + '?room_id=' + presentation.selectedRoom.id }}</span>\n          </div>\n\n        </div>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }] }); }
+    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,
@@ -1589,18 +1694,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Message,
                         Tag,
                         Listbox,
-                        CdkCopyToClipboard
-                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <div class=\"rtsee-presentation-room-invite\">\n          <p-button label=\"Start A Call\"\n                    (click)=\"presentation.emitJoinRoomCallEvent()\"\n          ></p-button>\n          <div class=\"rtsee-presentation-room-invite-link\">\n            <p-button icon=\"pi pi-copy\"\n                      severity=\"secondary\"\n                      class=\"copy-btn\"\n                      [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + presentation.selectedRoom.id\"\n            ></p-button>\n            <span>{{ window.location.origin + '?room_id=' + presentation.selectedRoom.id }}</span>\n          </div>\n\n        </div>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
+                        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 StoryDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n      (click)=\"presentation.setActiveStory(story)\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title\">\n    <h1>{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description\">\n    <p>{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n    <div class=\"rtsee-story-details-votes\">\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+}
+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\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n      (click)=\"presentation.setActiveStory(story)\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title\">\n    <h1>{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description\">\n    <p>{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n    <div class=\"rtsee-story-details-votes\">\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { story: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }] } });
+
 class PresentationComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -1611,10 +1736,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PreloaderComponent,
                         PreloaderComponent,
                         PresentationsDashboardComponent,
-                        PresentationSettingsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p>{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
+                        PresentationSettingsComponent,
+                        StoryDetailsComponent
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
+            }], messenger: [{
+                type: Input
             }] } });
 
 class RtseeNavComponent {
@@ -1694,7 +1822,7 @@ class RTSeeContainerComponent {
         this.authService.init(this.auth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
             type: Component,
@@ -1705,7 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEventsDashboardComponent,
                         PresentationComponent,
                         RtseeNavComponent
-                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"></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" }]
+                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { rtsee: [{
                 type: Input
             }], navigationConfig: [{
@@ -2104,7 +2232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PrivacyPolicyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, decorators: [{
             type: Component,