@rtsee/ngx 0.0.66 → 0.0.67

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

@@ -10,24 +10,37 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { RTSeeChatEvents } from '@rtsee/messenger';
 import { debounceTime } from 'rxjs/operators';
+import * as i4 from 'primeng/button';
+import { Button, ButtonModule } from 'primeng/button';
+import Swiper from 'swiper';
+import { EffectCards, Manipulation } from 'swiper/modules';
+import { FloatLabel } from 'primeng/floatlabel';
+import { InputGroup } from 'primeng/inputgroup';
+import { InputText } from 'primeng/inputtext';
+import * as i2$1 from 'primeng/message';
+import { Message, MessageModule } from 'primeng/message';
+import { Textarea } from 'primeng/textarea';
+import { InputNumber } from 'primeng/inputnumber';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+import { RadioButton } from 'primeng/radiobutton';
+import * as i1$1 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { OrderList } from 'primeng/orderlist';
+import { Divider } from 'primeng/divider';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
+import { Chip } from 'primeng/chip';
+import { ColorPicker } from 'primeng/colorpicker';
 import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
-import { Divider } from 'primeng/divider';
+import { Tooltip } from 'primeng/tooltip';
 import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
-import * as i4 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputText } from 'primeng/inputtext';
 import { Password } from 'primeng/password';
-import { FloatLabel } from 'primeng/floatlabel';
 import { Checkbox } from 'primeng/checkbox';
-import * as i2$1 from 'primeng/message';
-import { Message, MessageModule } from 'primeng/message';
 import { ProgressSpinner } from 'primeng/progressspinner';
-import * as i1$1 from '@angular/common/http';
-import * as i1$2 from 'primeng/api';
+import * as i1$2 from '@angular/common/http';
+import * as i1$3 from 'primeng/api';
 import { AutosizeModule } from 'ngx-autosize';
 import shave from 'shave';
 import { NgxCaptchaModule } from 'ngx-captcha';
@@ -980,13 +993,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PresentationHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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  <div class=\"rtsee-presentation-room-block\">\n    <div class=\"rtsee-presentation-active-room\" *ngIf=\"presentation.activeRoom\">\n      <p>{{presentation.activeRoom.id}}</p>\n      <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n    </div>\n  </div>\n  <div class=\"rtsee-story-info\" *ngIf=\"presentation.activeStory\">\n    <p>{{presentation.activeStory.name}}</p>\n    <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n          (click)=\"presentation.disableActiveStory()\"\n    >close</span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p>{{presentation.activeRoom.id}}</p>\n        <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-story-info\">\n      <p>{{presentation.activeStory.name}}</p>\n      <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n            (click)=\"presentation.disableActiveStory()\"\n      >close</span>\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-presentation-header', imports: [
-                        NgIf
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\">\n  <div class=\"rtsee-presentation-room-block\">\n    <div class=\"rtsee-presentation-active-room\" *ngIf=\"presentation.activeRoom\">\n      <p>{{presentation.activeRoom.id}}</p>\n      <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n    </div>\n  </div>\n  <div class=\"rtsee-story-info\" *ngIf=\"presentation.activeStory\">\n    <p>{{presentation.activeStory.name}}</p>\n    <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n          (click)=\"presentation.disableActiveStory()\"\n    >close</span>\n  </div>\n</div>\n" }]
+                        Button,
+                        NgClass
+                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  <div class=\"rtsee-presentation-room-block\">\n    @if (presentation.activeRoom) {\n      <div class=\"rtsee-presentation-active-room\">\n        <p>{{presentation.activeRoom.id}}</p>\n        <button (click)=\"presentation.emitJoinRoomCallEvent()\">Join Video Call</button>\n      </div>\n    }\n  </div>\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-story-info\">\n      <p>{{presentation.activeStory.name}}</p>\n      <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n            (click)=\"presentation.disableActiveStory()\"\n      >close</span>\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
             }] } });
@@ -996,19 +1010,24 @@ class StoryThumbnailComponent {
         this.Math = Math;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    <div class=\"rtsee-story-thumbnail-info-container\" *ngIf=\"story.averageReadTime\">\n      <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n      <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-story-thumbnail', imports: [
-                        NgStyle,
-                        NgIf
-                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    <div class=\"rtsee-story-thumbnail-info-container\" *ngIf=\"story.averageReadTime\">\n      <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n      <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n    </div>\n  </div>\n</div>\n" }]
+                        NgStyle
+                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }] } });
 
 class SlideComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.hideRewindControls = true;
+        this.lastScrollPosition = 0;
+        this.scrollingDown = false;
+    }
     slideRewindClicked(forward) {
         if (forward) {
             this.story.nextSlide();
@@ -1017,58 +1036,556 @@ class SlideComponent {
             this.story.previousSlide();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\">\n      @if (story.activeSlideNumber !== 1) {\n        <button class=\"slide-navigation-btn navigation-prev\"\n                (click)=\"slideRewindClicked(false)\"\n        >\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">arrow_back_ios</span>\n        </button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <button class=\"slide-navigation-btn navigation-next\"\n                (click)=\"slideRewindClicked(true)\"\n        >\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n        >arrow_forward_ios</span>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
+    ngAfterViewInit() {
+        const parentSlideEl = this.elementRef.nativeElement
+            .closest('.story-player-slide-container');
+        if (!parentSlideEl) {
+            return;
+        }
+        this.story.onNewSlideRendered(this.slide.slideNumber, parentSlideEl);
+        this.scrollingDown = !this.story.headerVisible;
+        setTimeout(() => {
+            this.hideRewindControls = false;
+        }, 500);
+    }
+    onScroll(target) {
+        if (target && target instanceof HTMLElement) {
+            this.handleScroll(target.scrollTop);
+        }
+    }
+    handleScroll(position) {
+        const BUFFER = 50;
+        if (position > this.lastScrollPosition + BUFFER) {
+            if (!this.scrollingDown) {
+                this.scrollingDown = true;
+                console.log('started scrolling down');
+                this.story.toggleHeader(false);
+            }
+            this.lastScrollPosition = position;
+        }
+        else if (position + BUFFER < this.lastScrollPosition) {
+            if (this.scrollingDown) {
+                this.scrollingDown = false;
+                console.log('scrolled up');
+                this.story.toggleHeader(true);
+            }
+            this.lastScrollPosition = position;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n\n                (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-slide', imports: [
                         NgStyle,
-                        WidgetDirective
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-slide\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\">\n      @if (story.activeSlideNumber !== 1) {\n        <button class=\"slide-navigation-btn navigation-prev\"\n                (click)=\"slideRewindClicked(false)\"\n        >\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">arrow_back_ios</span>\n        </button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <button class=\"slide-navigation-btn navigation-next\"\n                (click)=\"slideRewindClicked(true)\"\n        >\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\"\n        >arrow_forward_ios</span>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { story: [{
+                        WidgetDirective,
+                        Button,
+                        NgClass
+                    ], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n  @if (slide.widget) {\n    <ng-template widgetHost></ng-template>\n  }\n  <div class=\"rtsee-presentation-slide-default\">\n    @if (slide.imageUrl) {\n      <div class=\"rtsee-presentation-slide-image-container\"\n           [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n      >\n      </div>\n    }\n    <div class=\"rtsee-presentation-slide-text\">\n      <p>{{slide.text}}</p>\n    </div>\n    <div class=\"rtsee-presentation-slide-controls\"\n         [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n    >\n      @if (story.activeSlideNumber !== 1) {\n        <p-button class=\"slide-navigation-btn navigation-prev\"\n                  label=\"Previous Page\"\n                  icon=\"pi pi-arrow-left\"\n                  [severity]=\"'secondary'\"\n                  [iconPos]=\"'left'\"\n\n                (click)=\"slideRewindClicked(false)\"\n        >\n        </p-button>\n      }\n      @if (story.activeSlideNumber !== this.story.totalSlides) {\n        <p-button class=\"slide-navigation-btn navigation-next\"\n                  label=\"Next Page\"\n                  icon=\"pi pi-arrow-right\"\n                  [iconPos]=\"'right'\"\n                  (click)=\"slideRewindClicked(true)\"\n        >\n        </p-button>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { story: [{
                 type: Input
             }], slide: [{
                 type: Input
             }] } });
 
 class StoryPlayerComponent {
+    constructor() {
+        Swiper.use([EffectCards, Manipulation]);
+    }
     ngOnInit() {
         console.log('Story Player: Story = ', this.story);
     }
+    ngAfterViewInit() {
+        const swiper = new Swiper(this.swiperEl.nativeElement, {
+            effect: 'cards',
+            grabCursor: true
+        });
+        this.story.initSwiper(swiper);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider\">\n    <div class=\"story-player-slide-container\"\n         *ngFor=\"let slide of story.slides\"\n         [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n    >\n      <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["story", "slide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["story", "slide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-story-player', imports: [
-                        NgForOf,
                         NgClass,
                         SlideComponent
-                    ], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider\">\n    <div class=\"story-player-slide-container\"\n         *ngFor=\"let slide of story.slides\"\n         [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n    >\n      <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { story: [{
+                    ], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\" [story]=\"story\"></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { story: [{
+                type: Input
+            }], swiperEl: [{
+                type: ViewChild,
+                args: ['swiperContainer']
+            }] } });
+
+class RTSeeCropperComponent {
+    constructor() {
+        this.loadInProgress = true;
+        this.nextClicked = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onCropperReady() {
+        this.loadInProgress = false;
+        this.cropper.setCropperElem(this.imageCropper);
+    }
+    onImageCropped(event) {
+        if (!event.blob) {
+            console.log('ImageCropped no Blob after Cropped event');
+            return;
+        }
+        this.cropper.onCropped(event.blob);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeCropperComponent, isStandalone: true, selector: "rtsee-cropper", inputs: { cropper: "cropper" }, outputs: { nextClicked: "nextClicked" }, viewQueries: [{ propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <button (click)=\"cropper.onNextButtonClicked()\">\n        Next\n      </button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n", dependencies: [{ kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeCropperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-cropper', imports: [
+                        ImageCropperComponent,
+                        NgClass,
+                        RadioButton,
+                        PreloaderComponent
+                    ], standalone: true, template: "<div class=\"rtsee-image-cropper-container\"\n     [ngClass]=\"{'rtsee-image-cropper-loading': loadInProgress}\"\n>\n  @if (cropper.activeImage) {\n    <div class=\"rtsee-image-cropper-container-inner\">\n      <image-cropper style=\"visibility: hidden\"\n                     [imageFile]=\"cropper.activeImage.file\"\n                     [maintainAspectRatio]=\"true\"\n                     [aspectRatio]=\"cropper.aspectRatio\"\n                     [resizeToWidth]=\"cropper.resizeToWidth\"\n                     [autoCrop]=\"false\"\n                     (imageCropped)=\"onImageCropped($event)\"\n                     (cropperReady)=\"onCropperReady()\"\n                     [imageQuality]=\"70\"\n                     format='jpeg'\n      ></image-cropper>\n    </div>\n  }\n  @if (cropper.aspectRatioConfigurable) {\n    <div class=\"rtsee-select-aspect-ratio-container\">\n      <span class=\"radio-btn title-text\">Aspect Ratio:</span>\n\n      <p-radio-button name=\"pizza\" value=\"Cheese\" inputId=\"ingredient1\" />\n      <label for=\"ingredient1\" class=\"ml-2\">Cheese</label>\n    </div>\n  }\n\n  @if (!loadInProgress) {\n    <div class=\"image-cropper-actions\">\n      <button (click)=\"cropper.onNextButtonClicked()\">\n        Next\n      </button>\n    </div>\n  }\n\n  <rtsee-preloader [diameter]=\"5\"></rtsee-preloader>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { cropper: [{
+                type: Input
+            }], nextClicked: [{
+                type: Output
+            }], imageCropper: [{
+                type: ViewChild,
+                args: [ImageCropperComponent]
+            }] } });
+
+class RTSeeUploaderComponent {
+    ngOnInit() {
+        this.uploader.show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RTSeeUploaderComponent, isStandalone: true, selector: "rtsee-uploader", inputs: { uploader: "uploader" }, ngImport: i0, template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-uploader', imports: [], template: "<div id=\"rtsee-drag-drop-area\"></div>\n\n" }]
+        }], propDecorators: { uploader: [{
+                type: Input
+            }] } });
+
+class RTSeeImageUploaderComponent {
+    ngOnInit() {
+        this.attachEventHandlers();
+    }
+    attachEventHandlers() {
+        this.imageUploader.on('completed', this.onImagesUploaded.bind(this));
+    }
+    onNextButtonClicked() {
+        this.imageUploader.onNextClicked();
+    }
+    onImagesUploaded(response) {
+        console.log(response);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-image-uploader', imports: [
+                        RTSeeUploaderComponent,
+                        RTSeeCropperComponent
+                    ], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\"></div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { cropperComponent: [{
+                type: ViewChild,
+                args: [RTSeeCropperComponent]
+            }], imageUploader: [{
+                type: Input
+            }] } });
+
+class AutocompleteComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-autocomplete', imports: [
+                        AutoCompleteModule,
+                        FloatLabel,
+                        InputGroup,
+                        FormsModule
+                    ], template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class ManageSlidesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlidesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ManageSlidesComponent, isStandalone: true, selector: "rtsee-manage-slides", inputs: { manageSlides: "manageSlides" }, ngImport: i0, template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlidesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-slides', imports: [
+                        OrderList,
+                        Button,
+                        NgClass
+                    ], template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageSlides: [{
+                type: Input
+            }] } });
+
+class ManageSlideComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.slideForm = this.formBuilder.group({
+            text: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131000)
+                ]
+            })
+        });
+    }
+    ngOnInit() {
+        this.textField.setValue(this.manageSlide.slide.text);
+    }
+    get textField() {
+        return this.slideForm.get('text');
+    }
+    submit() {
+        if (this.slideForm.valid) {
+            void this.manageSlide.save({
+                text: this.textField.value,
+            });
+        }
+        else {
+            this.slideForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlideComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageSlideComponent, isStandalone: true, selector: "rtsee-manage-slide", inputs: { manageSlide: "manageSlide" }, ngImport: i0, template: "<div class=\"rtsee-presentation-manage-story-slide\">\n  <div class=\"rtsee-manage-story-slide-info rtsee-form-container\">\n    <div class=\"rtsee-manage-story-image\">\n      <rtsee-image-uploader [imageUploader]=\"manageSlide.imageUploader\"\n      ></rtsee-image-uploader>\n    </div>\n\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"slideForm\"\n          (ngSubmit)=\"submit()\"\n    >\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"textField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"textField.invalid && textField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-description-field\">Text</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (textField.hasError('required') && textField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageSlide.cancel()\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { 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: "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: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { 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: ManageSlideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-slide', imports: [
+                        RTSeeImageUploaderComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FloatLabel,
+                        InputGroup,
+                        Message,
+                        Textarea,
+                        Button
+                    ], template: "<div class=\"rtsee-presentation-manage-story-slide\">\n  <div class=\"rtsee-manage-story-slide-info rtsee-form-container\">\n    <div class=\"rtsee-manage-story-image\">\n      <rtsee-image-uploader [imageUploader]=\"manageSlide.imageUploader\"\n      ></rtsee-image-uploader>\n    </div>\n\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"slideForm\"\n          (ngSubmit)=\"submit()\"\n    >\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"textField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"textField.invalid && textField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-description-field\">Text</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (textField.hasError('required') && textField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageSlide.cancel()\"\n                [disabled]=\"manageSlide.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageSlide: [{
+                type: Input
+            }] } });
+
+class ManageStoryComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.storyForm = this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            }),
+            averageReadTime: this.formBuilder.control(0)
+        });
+    }
+    submit() {
+        if (this.storyForm.valid) {
+            void this.manageStory.save({
+                name: this.nameField.value,
+                description: this.descriptionField.value,
+                averageReadTime: this.averageReadTimeField.value,
+            });
+        }
+        else {
+            this.storyForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    ngOnInit() {
+        this.nameField.setValue(this.manageStory.story.name);
+        this.descriptionField.setValue(this.manageStory.story.description || '');
+        this.averageReadTimeField.setValue(this.manageStory.story.averageReadTime || 0);
+    }
+    get nameField() {
+        return this.storyForm.get('name');
+    }
+    get descriptionField() {
+        return this.storyForm.get('description');
+    }
+    get averageReadTimeField() {
+        return this.storyForm.get('averageReadTime');
+    }
+    disableFormFields() {
+        this.nameField.disable();
+        this.descriptionField.disable();
+        this.averageReadTimeField.disable();
+    }
+    enableFormFields() {
+        this.nameField.disable();
+        this.descriptionField.disable();
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-story', imports: [
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        ReactiveFormsModule,
+                        Textarea,
+                        InputNumber,
+                        RTSeeImageUploaderComponent,
+                        Button,
+                        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" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageStory: [{
+                type: Input
+            }] } });
+
+class ManageStoriesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-stories', imports: [
+                        ManageStoryComponent,
+                        Button,
+                        OrderList,
+                        NgClass
+                    ], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { manageStories: [{
+                type: Input
+            }] } });
+
+class ManageCategoryComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.categoryForm = this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    ngOnInit() {
+        this.nameField.setValue(this.manageCategory.category.name);
+        this.descriptionField.setValue(this.manageCategory.category.description || '');
+    }
+    submit() {
+        if (this.categoryForm.valid) {
+            void this.manageCategory.save({
+                name: this.nameField.value,
+                description: this.descriptionField.value
+            });
+        }
+        else {
+            this.categoryForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    get nameField() {
+        return this.categoryForm.get('name');
+    }
+    get descriptionField() {
+        return this.categoryForm.get('description');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoryComponent, isStandalone: true, selector: "rtsee-manage-category", inputs: { manageCategory: "manageCategory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-category', imports: [
+                        Button,
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        Textarea,
+                        ReactiveFormsModule
+                    ], template: "<div class=\"rtsee-manage-story-category\">\n  <div class=\"rtsee-manage-category-info rtsee-form-container\">\n    <form class=\"rtsee-story-form rtsee-form\"\n          [formGroup]=\"categoryForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"sign-up-email\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageCategory.cancel()\"\n                [disabled]=\"manageCategory.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageCategory: [{
+                type: Input
+            }] } });
+
+class ManageCategoriesComponent {
+    ngAfterViewInit() {
+        console.log('ngAfterViewInit Cats');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageCategoriesComponent, isStandalone: true, selector: "rtsee-manage-categories", inputs: { manageCategories: "manageCategories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.name}}</p>\n      }\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ManageCategoryComponent, selector: "rtsee-manage-category", inputs: ["manageCategory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageCategoriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-categories', imports: [
+                        Button,
+                        ManageCategoryComponent
+                    ], template: "<div class=\"rtsee-manage-stories-categories\">\n  <div class=\"rtsee-manage-stories-categories-header\">\n    @if (!manageCategories.selectedCategory) {\n      <p-button (click)=\"manageCategories.selectNewCategory()\"\n                label=\"Create A New Category\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-categories-body\">\n    @if (manageCategories.selectedCategory) {\n      <rtsee-manage-category [manageCategory]=\"manageCategories.selectedCategory\"\n      ></rtsee-manage-category>\n    }\n    @if (!manageCategories.selectedCategory) {\n      @for (category of manageCategories.categories; track category.id) {\n        <p (click)=\"manageCategories.selectCategory(category.id)\">{{category.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageCategories: [{
+                type: Input
+            }] } });
+
+class ManageLabelComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.labelForm = this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            }),
+            symbol: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    ngOnInit() {
+        this.nameField.setValue(this.manageLabel.label.name);
+        this.descriptionField.setValue(this.manageLabel.label.description || '');
+        this.descriptionField.setValue(this.manageLabel.label.description || '');
+    }
+    submit() {
+        if (this.labelForm.valid) {
+            void this.manageLabel.save({
+                name: this.nameField.value,
+                description: this.descriptionField.value,
+                color: '',
+                symbol: this.symbolField.value,
+            });
+        }
+        else {
+            this.labelForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+        }
+    }
+    get nameField() {
+        return this.labelForm.get('name');
+    }
+    get descriptionField() {
+        return this.labelForm.get('description');
+    }
+    get symbolField() {
+        return this.labelForm.get('symbol');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageLabelComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageLabelComponent, isStandalone: true, selector: "rtsee-manage-label", inputs: { manageLabel: "manageLabel" }, ngImport: i0, template: "<div class=\"rtsee-manage-story-label\">\n  <div class=\"rtsee-manage-story-label-info rtsee-form-container\">\n    <form class=\"rtsee-story-label-form rtsee-form\"\n          [formGroup]=\"labelForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-label-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"symbolField\"\n                   [class.p-invalid]=\"symbolField.invalid && symbolField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (symbolField.hasError('required') && symbolField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-colorPicker [(ngModel)]=\"manageLabel.label.color\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageLabel.cancel()\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "inline", "format", "tabindex", "inputId", "autoZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus", "defaultColor", "appendTo"], outputs: ["onChange", "onShow", "onHide"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-label', imports: [
+                        Button,
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        Textarea,
+                        ReactiveFormsModule,
+                        ColorPicker
+                    ], template: "<div class=\"rtsee-manage-story-label\">\n  <div class=\"rtsee-manage-story-label-info rtsee-form-container\">\n    <form class=\"rtsee-story-label-form rtsee-form\"\n          [formGroup]=\"labelForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-label-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"symbolField\"\n                   [class.p-invalid]=\"symbolField.invalid && symbolField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (symbolField.hasError('required') && symbolField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-colorPicker [(ngModel)]=\"manageLabel.label.color\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"manageLabel.cancel()\"\n                [disabled]=\"manageLabel.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageLabel: [{
+                type: Input
+            }] } });
+
+class ManageLabelsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageLabelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageLabelsComponent, isStandalone: true, selector: "rtsee-manage-labels", inputs: { manageLabels: "manageLabels" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories-labels\">\n  <div class=\"rtsee-manage-stories-labels-header\">\n    @if (!manageLabels.selectedLabel) {\n      <p-button (click)=\"manageLabels.selectNewLabel()\"\n                label=\"Create A New Label\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-labels-body\">\n    @if (manageLabels.selectedLabel) {\n      <rtsee-manage-label [manageLabel]=\"manageLabels.selectedLabel\"\n      ></rtsee-manage-label>\n    }\n    @if (!manageLabels.selectedLabel) {\n      @for (label of manageLabels.labels; track label.id) {\n        <p (click)=\"manageLabels.selectLabel(label.id)\">{{label.name}}</p>\n      }\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ManageLabelComponent, selector: "rtsee-manage-label", inputs: ["manageLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageLabelsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-labels', imports: [
+                        Button,
+                        ManageLabelComponent
+                    ], template: "<div class=\"rtsee-manage-stories-labels\">\n  <div class=\"rtsee-manage-stories-labels-header\">\n    @if (!manageLabels.selectedLabel) {\n      <p-button (click)=\"manageLabels.selectNewLabel()\"\n                label=\"Create A New Label\"\n      ></p-button>\n    }\n  </div>\n  <div class=\"rtsee-manage-stories-labels-body\">\n    @if (manageLabels.selectedLabel) {\n      <rtsee-manage-label [manageLabel]=\"manageLabels.selectedLabel\"\n      ></rtsee-manage-label>\n    }\n    @if (!manageLabels.selectedLabel) {\n      @for (label of manageLabels.labels; track label.id) {\n        <p (click)=\"manageLabels.selectLabel(label.id)\">{{label.name}}</p>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageLabels: [{
+                type: Input
+            }] } });
+
+class PresentationsDashboardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationsDashboardComponent, isStandalone: true, selector: "rtsee-presentations-dashboard", inputs: { dashboard: "dashboard" }, ngImport: i0, template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ManageStoriesComponent, selector: "rtsee-manage-stories", inputs: ["manageStories"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TabPanels, selector: "p-tabpanels" }, { kind: "component", type: TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: ManageCategoriesComponent, selector: "rtsee-manage-categories", inputs: ["manageCategories"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: ManageLabelsComponent, selector: "rtsee-manage-labels", inputs: ["manageLabels"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-presentations-dashboard', imports: [
+                        ManageStoriesComponent,
+                        Tabs,
+                        TabList,
+                        Tab,
+                        TabPanels,
+                        TabPanel,
+                        ManageCategoriesComponent,
+                        Button,
+                        Chip,
+                        ManageLabelsComponent
+                    ], template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n" }]
+        }], propDecorators: { dashboard: [{
                 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  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentation-stories-list\">\n      @for (story of presentation.stories; track story.id) {\n        <div class=\"rtsee-presentation-story-thumbnail-container\"\n             (click)=\"presentation.setActiveStory(story)\"\n        >\n          <rtsee-story-thumbnail\n            [story]=\"story\"\n          ></rtsee-story-thumbnail>\n        </div>\n      }\n    </div>\n  }\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story"] }] }); }
+    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\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-stories-list\">\n      @for (story of presentation.stories; track story.id) {\n        <div class=\"rtsee-presentation-story-thumbnail-container\"\n             (click)=\"presentation.setActiveStory(story)\"\n        >\n          <rtsee-story-thumbnail\n            [story]=\"story\"\n          ></rtsee-story-thumbnail>\n        </div>\n      }\n    </div>\n\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.setActiveStory(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-presentation', imports: [
                         PresentationHeaderComponent,
                         StoryThumbnailComponent,
-                        StoryPlayerComponent
-                    ], 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  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentation-stories-list\">\n      @for (story of presentation.stories; track story.id) {\n        <div class=\"rtsee-presentation-story-thumbnail-container\"\n             (click)=\"presentation.setActiveStory(story)\"\n        >\n          <rtsee-story-thumbnail\n            [story]=\"story\"\n          ></rtsee-story-thumbnail>\n        </div>\n      }\n    </div>\n  }\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
+                        StoryPlayerComponent,
+                        PreloaderComponent,
+                        PreloaderComponent,
+                        PresentationsDashboardComponent
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-stories-list\">\n      @for (story of presentation.stories; track story.id) {\n        <div class=\"rtsee-presentation-story-thumbnail-container\"\n             (click)=\"presentation.setActiveStory(story)\"\n        >\n          <rtsee-story-thumbnail\n            [story]=\"story\"\n          ></rtsee-story-thumbnail>\n        </div>\n      }\n    </div>\n\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.setActiveStory(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }] } });
 
 class RtseeNavComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeNavComponent, isStandalone: true, selector: "rtsee-nav", inputs: { config: "config", rtsee: "rtsee" }, ngImport: i0, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeNavComponent, isStandalone: true, selector: "rtsee-nav", inputs: { config: "config", rtsee: "rtsee" }, ngImport: i0, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "appendTo"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeNavComponent, decorators: [{
             type: Component,
@@ -1078,8 +1595,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         Avatar,
                         Image,
-                        Divider
-                    ], standalone: true, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n" }]
+                        Divider,
+                        Tooltip
+                    ], standalone: true, template: "<div class=\"rtsee-nav\">\n  @if (config.siteLogo) {\n    <div class=\"rtsee-site-logo\">\n      <p-image [src]=\"config.siteLogo.src\" class=\"rtsee-site-logo-image\"></p-image>\n      <p-divider class=\"rtsee-site-logo-divider\" />\n    </div>\n  }\n  <div class=\"rtsee-nav-bar\">\n    @for (route of config.routes; track route.name) {\n      <a [routerLink]=\"route.link\"\n         routerLinkActive=\"rtsee-nav-item-active\"\n         [ngClass]=\"{'rtsee-nav-item-hidden': !route.isEnabled || !route.iconClassName}\"\n         [routerLinkActiveOptions]=\"{ exact: route.exactActiveLinkMatcher || false }\"\n         class=\"rtsee-nav-item\"\n         [pTooltip]=\"route.name\"\n      >\n        <span [ngClass]=\"route.iconClassName\"\n          class=\"rtsee-nav-item-icon\" >\n        </span>\n      </a>\n    }\n    <p-avatar [image]=\"rtsee.socketConnection?.myPeer?.imageUrl\"\n              class=\"rtsee-nav-item rtsee-nav-image rtsee-nav-profile\"\n    ></p-avatar>\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], rtsee: [{
@@ -1138,7 +1656,7 @@ class RTSeeAuthService {
         return this.http
             .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, decorators: [{
@@ -1146,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
 
 class SignInComponent {
     constructor(formBuilder, router, authService) {
@@ -1544,7 +2062,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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <div class=\"flex justify-content-center align-items-center\">\n                    <h1>Terms of Use & Privacy Policy</h1>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", styles: ["@charset \"UTF-8\";.privacy-policy-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem 1rem}.privacy-policy-container .policy-card{max-width:1000px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.privacy-policy-container .policy-card:hover{transform:translateY(-5px);box-shadow:0 25px 50px #00000026}.privacy-policy-container .header-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;position:relative;overflow:hidden}.privacy-policy-container .header-section:before{content:\"\";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"25\" cy=\"25\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"75\" cy=\"75\" r=\"1\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"50\" cy=\"10\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"10\" cy=\"60\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/><circle cx=\"90\" cy=\"40\" r=\"0.5\" fill=\"white\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grain)\"/></svg>');opacity:.3}.privacy-policy-container .header-section .header-content{position:relative;z-index:1}.privacy-policy-container .header-section h1{font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-policy-container .content-section{padding:3rem}.privacy-policy-container .content-section .info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:none;border-radius:15px;box-shadow:0 5px 15px #2196f31a;margin-bottom:2rem}.privacy-policy-container .content-section .info-banner .p-message-content{padding:1.5rem}.privacy-policy-container .content-section .info-banner .p-message-content .last-updated{font-size:1.1rem;font-weight:600;color:#1976d2;margin-bottom:1rem}.privacy-policy-container .content-section .info-banner .p-message-content p{color:#424242;line-height:1.6;margin:0}.privacy-policy-container .content-section h2{color:#2c3e50;font-size:1.8rem;font-weight:600;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:3px solid #667eea;position:relative}.privacy-policy-container .content-section h2:before{content:\"\";position:absolute;bottom:-3px;left:0;width:50px;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.privacy-policy-container .content-section h3{color:#34495e;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem;padding-left:1rem;border-left:4px solid #667eea;background:linear-gradient(90deg,rgba(102,126,234,.1),transparent);padding:.75rem 1rem;border-radius:0 8px 8px 0}.privacy-policy-container .content-section p{color:#555;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.privacy-policy-container .content-section ul{margin:1rem 0 2rem;padding-left:0}.privacy-policy-container .content-section ul li{color:#555;line-height:1.6;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:1rem}.privacy-policy-container .content-section ul li:before{content:\"\\25b6\";position:absolute;left:0;color:#667eea;font-size:.8rem;top:.2rem}.privacy-policy-container .content-section ul li strong{color:#2c3e50;font-weight:600}.privacy-policy-container .content-section .contact-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:2rem;margin-top:3rem;border:1px solid #dee2e6;box-shadow:0 5px 15px #0000000d}.privacy-policy-container .content-section .contact-section h2{color:#2c3e50;margin-top:0;border-bottom:3px solid #28a745}.privacy-policy-container .content-section .contact-section h2:before{background:linear-gradient(90deg,#28a745,#20c997)}.privacy-policy-container .content-section .contact-section ul li:before{color:#28a745}.privacy-policy-container .content-section .footer-section{text-align:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #e9ecef}.privacy-policy-container .content-section .footer-section p{color:#6c757d;font-style:italic;font-size:.9rem;margin:0}@media (max-width: 768px){.privacy-policy-container{padding:1rem .5rem}.privacy-policy-container .policy-card{border-radius:15px}.privacy-policy-container .header-section{padding:1.5rem}.privacy-policy-container .header-section h1{font-size:2rem}.privacy-policy-container .content-section{padding:2rem 1.5rem}.privacy-policy-container .content-section h2{font-size:1.5rem}.privacy-policy-container .content-section h3{font-size:1.2rem}}@media (max-width: 480px){.privacy-policy-container .header-section h1{font-size:1.8rem}.privacy-policy-container .content-section{padding:1.5rem 1rem}.privacy-policy-container .content-section h2{font-size:1.3rem}.privacy-policy-container .content-section h3{font-size:1.1rem}}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$1.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,
@@ -1720,6 +2238,10 @@ class RTSeeModule {
             RtseeSettingsComponent,
             MainMenuComponent,
             SearchComponent,
+            PresentationComponent,
+            StoryPlayerComponent,
+            SlideComponent,
+            PresentationHeaderComponent,
             CommonModule,
             ReactiveFormsModule,
             AutosizeModule,