@rtsee/ngx 0.0.96 → 0.0.98

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, forwardRef, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, DatePipe, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -42,10 +42,11 @@ import { Checkbox } from 'primeng/checkbox';
 import { InputNumber } from 'primeng/inputnumber';
 import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { Fieldset } from 'primeng/fieldset';
+import { DatePicker } from 'primeng/datepicker';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
-import { Fieldset } from 'primeng/fieldset';
 import { Tag } from 'primeng/tag';
 import { Listbox } from 'primeng/listbox';
 import { RTSeeRater } from '@rtsee/utilities-ui';
@@ -240,17 +241,29 @@ class RTSeeAuthService {
     }
     signIn(credentials) {
         return this.http
-            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), credentials)
+            .post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), {
+            ...credentials,
+            rtseeAppId: this.authConfiguration.rtseeAppId
+        })
             .pipe(tap((res) => this.rtseeAuth.authenticate(res)));
     }
     signUp(credentials) {
-        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), {
+            ...credentials,
+            rtseeAppId: this.authConfiguration.rtseeAppId
+        });
     }
     forgotPassword(credentials) {
-        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.FORGOT_PASSWORD), {
+            ...credentials,
+            rtseeAppId: this.authConfiguration.rtseeAppId
+        });
     }
     resetPassword(credentials) {
-        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), credentials);
+        return this.http.post(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.RESET_PASSWORD), {
+            ...credentials,
+            rtseeAppId: this.authConfiguration.rtseeAppId
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeAuthService, providedIn: 'root' }); }
@@ -1250,9 +1263,11 @@ class PaymentsService {
         if (!this.paymentsConfig || !this.paymentsConfig.appId) {
             throw new Error('Payments Config not initialized!');
         }
-        return this.http.post(`${this.paymentsConfig?.unsubscribeEndpoint}`, {
-            subscriptionId,
-        });
+        return this.http
+            .post(`${this.paymentsConfig?.unsubscribeEndpoint}`, { subscriptionId })
+            .pipe(tap((res) => {
+            console.log('tap with plan here', res);
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentsService, providedIn: 'root' }); }
@@ -1392,15 +1407,19 @@ class ManagePlanComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     onUnsubscribeClicked() {
-        console.log(this.plan);
+        this.paymentsService.unsubscribe(this.plan.id)
+            .subscribe();
     }
     ngOnInit() {
         if (!this.messenger.myPeer || !this.messenger.myPeer.plan) {
             throw new Error('No Plans found.');
         }
+        if (!this.paymentsService.isInitialized && this.messenger.payments) {
+            this.paymentsService.init(this.messenger.payments);
+        }
         this.plan = this.messenger.myPeer.plan;
-        this.activeFromFormated = dayjs(this.messenger.myPeer.plan.activeFrom).format('YYYY-MM-DD');
-        this.activeToFormated = dayjs(this.messenger.myPeer.plan.activeTo).format('YYYY-MM-DD');
+        this.activeFromFormated = dayjs(this.messenger.myPeer.plan.activeFrom).format('DD-MM-YYYY');
+        this.activeToFormated = dayjs(this.messenger.myPeer.plan.activeTo).format('DD-MM-YYYY');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManagePlanComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManagePlanComponent, isStandalone: true, selector: "rtsee-manage-plan", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-manage-plan\">\n  <h2>{{messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]}}</h2>\n  <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n            severity=\"secondary\"\n            (click)=\"messenger.closeManagePlanPage()\"\n  ></p-button>\n  @if (plan) {\n    <p-card [header]=\"plan.productName\">\n      <p>{{plan.productDescription}}</p>\n      <p-divider></p-divider>\n      <div class=\"rtsee-manage-plan-info\">\n        <p>Active From: {{activeFromFormated}}</p>\n        <p>Active To: {{activeToFormated}}</p>\n      </div>\n      <p-button [label]=\"'Unsubscribe'\"\n                (click)=\"onUnsubscribeClicked()\"\n      ></p-button>\n    </p-card>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { 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"] }] }); }
@@ -1612,11 +1631,11 @@ class PresentationHeaderComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
+            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
@@ -1632,13 +1651,15 @@ class StoryThumbnailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story", presentation: "presentation" }, ngImport: i0, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</a>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent, RouterLink], standalone: true, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</a>\n" }]
         }], propDecorators: { story: [{
                 type: Input
+            }], presentation: [{
+                type: Input
             }] } });
 
 class SlideComponent {
@@ -2002,6 +2023,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+class DynamicFieldsFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicFieldsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DynamicFieldsFieldComponent, isStandalone: true, selector: "rtsee-dynamic-fields-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-dynamic-fields-field\">\n  <p-button label=\"Add a field\"\n            (click)=\"field.add()\"\n  ></p-button>\n\n  <div class=\"rtsee-dynamic-fields-definitions\">\n    @for (definition of field.fields; track definition.name) {\n      <p-divider></p-divider>\n      <p>dynamic field</p>\n      <rtsee-form [form]=\"definition.form\"></rtsee-form>\n      <p-button label=\"Add a field\"\n                (click)=\"field.remove($index)\"\n      ></p-button>\n      <p-divider></p-divider>\n    }\n  </div>\n\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }, { kind: "component", type: i0.forwardRef(() => Divider), selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicFieldsFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-dynamic-fields-field", standalone: true, imports: [
+                        Button,
+                        forwardRef(() => FormComponent),
+                        Divider
+                    ], template: "<div class=\"rtsee-dynamic-fields-field\">\n  <p-button label=\"Add a field\"\n            (click)=\"field.add()\"\n  ></p-button>\n\n  <div class=\"rtsee-dynamic-fields-definitions\">\n    @for (definition of field.fields; track definition.name) {\n      <p-divider></p-divider>\n      <p>dynamic field</p>\n      <rtsee-form [form]=\"definition.form\"></rtsee-form>\n      <p-button label=\"Add a field\"\n                (click)=\"field.remove($index)\"\n      ></p-button>\n      <p-divider></p-divider>\n    }\n  </div>\n\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FieldDefinitionFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldDefinitionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FieldDefinitionFieldComponent, isStandalone: true, selector: "rtsee-field-definition-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-field-definition\">\n  <div class=\"rtsee-form-field-container\">\n    <p-divider></p-divider>\n    <p>Custom Field</p>\n\n    <rtsee-form [form]=\"field.form\"></rtsee-form>\n    <p-divider></p-divider>\n  </div>\n</div>\n\n<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>Custom Field</p>\n\n  <p-select [options]=\"field.typeOptions\"\n            [optionLabel]=\"'friendlyName'\"\n  ></p-select>\n\n\n\n  <p-button label=\"remove\"\n            severity=\"warn\"\n  ></p-button>\n\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n  <p-divider></p-divider>\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => Divider), selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: i0.forwardRef(() => Select), selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldDefinitionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-definition-field", standalone: true, imports: [
+                        Message,
+                        Button,
+                        Divider,
+                        Select,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-field-definition\">\n  <div class=\"rtsee-form-field-container\">\n    <p-divider></p-divider>\n    <p>Custom Field</p>\n\n    <rtsee-form [form]=\"field.form\"></rtsee-form>\n    <p-divider></p-divider>\n  </div>\n</div>\n\n<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>Custom Field</p>\n\n  <p-select [options]=\"field.typeOptions\"\n            [optionLabel]=\"'friendlyName'\"\n  ></p-select>\n\n\n\n  <p-button label=\"remove\"\n            severity=\"warn\"\n  ></p-button>\n\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n  <p-divider></p-divider>\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class SelectFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectFieldComponent, isStandalone: true, selector: "rtsee-field-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-select [inputId]=\"field.name\"\n                class=\"rtsee-form-field\"\n                [options]=\"field.options\"\n                [optionLabel]=\"field.labelKey\"\n                [optionValue]=\"field.valueKey\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-select>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"c\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-select", standalone: true, imports: [FormsModule, InputGroup, FloatLabel, Message, Select], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-select [inputId]=\"field.name\"\n                class=\"rtsee-form-field\"\n                [options]=\"field.options\"\n                [optionLabel]=\"field.labelKey\"\n                [optionValue]=\"field.valueKey\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-select>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"c\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class LocationFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LocationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LocationFieldComponent, isStandalone: true, selector: "rtsee-field-location", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-location-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Location'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LocationFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-location", standalone: true, imports: [
+                        Fieldset,
+                        Message,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-location-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Location'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class TimeSlotFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TimeSlotFieldComponent, isStandalone: true, selector: "rtsee-field-time-slot", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-time-slot-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slot'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-time-slot", standalone: true, imports: [
+                        Fieldset,
+                        Message,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-time-slot-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slot'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class TimeSlotsFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TimeSlotsFieldComponent, isStandalone: true, selector: "rtsee-field-time-slots", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-time-slots-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slots'\">\n    <div class=\"mb-3\">\n      <p-button label=\"Add Time Slot\" (click)=\"field.add()\"></p-button>\n    </div>\n    @for (slotField of field.slotFields; track $index) {\n      <div class=\"p-3 border rounded mb-2\">\n        @if (slotField.form) {\n          <rtsee-form [form]=\"slotField.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n        }\n        <div class=\"mt-2 text-right\">\n          <p-button label=\"Remove Slot\" severity=\"warn\" (click)=\"field.remove($index)\"></p-button>\n        </div>\n      </div>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotsFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-time-slots", standalone: true, imports: [
+                        Button,
+                        Divider,
+                        Message,
+                        Fieldset,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-time-slots-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slots'\">\n    <div class=\"mb-3\">\n      <p-button label=\"Add Time Slot\" (click)=\"field.add()\"></p-button>\n    </div>\n    @for (slotField of field.slotFields; track $index) {\n      <div class=\"p-3 border rounded mb-2\">\n        @if (slotField.form) {\n          <rtsee-form [form]=\"slotField.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n        }\n        <div class=\"mt-2 text-right\">\n          <p-button label=\"Remove Slot\" severity=\"warn\" (click)=\"field.remove($index)\"></p-button>\n        </div>\n      </div>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class EntityFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.field.autocompleteField?.autocomplete) {
+            this.field.autocompleteField.autocomplete.on("select", () => {
+                this.onModelChange();
+            });
+        }
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntityFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EntityFieldComponent, isStandalone: true, selector: "rtsee-field-entity", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntityFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-entity", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class EntitiesListFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.field.autocompleteField?.autocomplete) {
+            this.field.autocompleteField.autocomplete.on("select", () => {
+                this.onModelChange();
+            });
+        }
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EntitiesListFieldComponent, isStandalone: true, selector: "rtsee-field-entities-list", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-entities-list", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class DateFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DateFieldComponent, isStandalone: true, selector: "rtsee-field-date", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-datePicker [inputId]=\"field.name\"\n                    class=\"rtsee-form-field\"\n                    [(ngModel)]=\"field.value\"\n                    (ngModelChange)=\"onModelChange()\"\n                    [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-datePicker>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-date", standalone: true, imports: [FormsModule, DatePicker, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-datePicker [inputId]=\"field.name\"\n                    class=\"rtsee-form-field\"\n                    [(ngModel)]=\"field.value\"\n                    (ngModelChange)=\"onModelChange()\"\n                    [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-datePicker>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class VarcharFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VarcharFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: VarcharFieldComponent, isStandalone: true, selector: "rtsee-field-varchar", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input pInputText\n             [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VarcharFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-varchar", standalone: true, imports: [FormsModule, InputText, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input pInputText\n             [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FloatFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FloatFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FloatFieldComponent, isStandalone: true, selector: "rtsee-field-float", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [minFractionDigits]=\"1\"\n                     [maxFractionDigits]=\"6\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FloatFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-float", standalone: true, imports: [FormsModule, InputNumber, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [minFractionDigits]=\"1\"\n                     [maxFractionDigits]=\"6\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
 class FormFieldComponent {
     constructor() {
         this.fieldChanged = new EventEmitter();
@@ -2010,7 +2289,7 @@ class FormFieldComponent {
         this.fieldChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n", dependencies: [{ kind: "component", type: TextFieldComponent, selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: TextareaFieldComponent, selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: CheckboxFieldComponent, selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RadioFieldComponent, selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: NumberFieldComponent, selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: AutocompleteFieldComponent, selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RecursiveSelectFieldComponent, selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: ImageUploaderFieldComponent, selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('varchar') {\n    <rtsee-field-varchar [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-varchar>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('integer') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('float4') {\n    <rtsee-field-float [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-float>\n  }\n  @case ('date') {\n    <rtsee-field-date [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-date>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('entity') {\n    <rtsee-field-entity [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entity>\n  }\n  @case ('entities-list') {\n    <rtsee-field-entities-list [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entities-list>\n  }\n  @case ('location') {\n    <rtsee-field-location [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-location>\n  }\n  @case ('time_slot') {\n    <rtsee-field-time-slot [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slot>\n  }\n  @case ('time_slots') {\n    <rtsee-field-time-slots [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slots>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('select') {\n    <rtsee-field-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n  @case ('field-definition') {\n    <rtsee-field-definition-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-definition-field>\n  }\n  @case ('dynamic-fields') {\n    <rtsee-dynamic-fields-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-dynamic-fields-field>\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => TextFieldComponent), selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TextareaFieldComponent), selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => CheckboxFieldComponent), selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => RadioFieldComponent), selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => NumberFieldComponent), selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => AutocompleteFieldComponent), selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => RecursiveSelectFieldComponent), selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => ImageUploaderFieldComponent), selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => FieldDefinitionFieldComponent), selector: "rtsee-field-definition-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => DynamicFieldsFieldComponent), selector: "rtsee-dynamic-fields-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => SelectFieldComponent), selector: "rtsee-field-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => LocationFieldComponent), selector: "rtsee-field-location", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TimeSlotFieldComponent), selector: "rtsee-field-time-slot", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TimeSlotsFieldComponent), selector: "rtsee-field-time-slots", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => EntityFieldComponent), selector: "rtsee-field-entity", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => EntitiesListFieldComponent), selector: "rtsee-field-entities-list", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => DateFieldComponent), selector: "rtsee-field-date", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => VarcharFieldComponent), selector: "rtsee-field-varchar", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => FloatFieldComponent), selector: "rtsee-field-float", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -2022,8 +2301,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NumberFieldComponent,
                         AutocompleteFieldComponent,
                         RecursiveSelectFieldComponent,
-                        ImageUploaderFieldComponent
-                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n" }]
+                        ImageUploaderFieldComponent,
+                        forwardRef(() => FieldDefinitionFieldComponent),
+                        forwardRef(() => DynamicFieldsFieldComponent),
+                        SelectFieldComponent,
+                        LocationFieldComponent,
+                        TimeSlotFieldComponent,
+                        TimeSlotsFieldComponent,
+                        EntityFieldComponent,
+                        EntitiesListFieldComponent,
+                        DateFieldComponent,
+                        VarcharFieldComponent,
+                        FloatFieldComponent
+                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('varchar') {\n    <rtsee-field-varchar [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-varchar>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('integer') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('float4') {\n    <rtsee-field-float [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-float>\n  }\n  @case ('date') {\n    <rtsee-field-date [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-date>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('entity') {\n    <rtsee-field-entity [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entity>\n  }\n  @case ('entities-list') {\n    <rtsee-field-entities-list [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entities-list>\n  }\n  @case ('location') {\n    <rtsee-field-location [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-location>\n  }\n  @case ('time_slot') {\n    <rtsee-field-time-slot [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slot>\n  }\n  @case ('time_slots') {\n    <rtsee-field-time-slots [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slots>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('select') {\n    <rtsee-field-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n  @case ('field-definition') {\n    <rtsee-field-definition-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-definition-field>\n  }\n  @case ('dynamic-fields') {\n    <rtsee-dynamic-fields-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-dynamic-fields-field>\n  }\n}\n" }]
         }], propDecorators: { field: [{
                 type: Input
             }], fieldChanged: [{
@@ -2043,11 +2333,11 @@ class FormComponent {
         this.form.evaluateIsChanged();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], formSubmit: [{
@@ -2668,11 +2958,11 @@ class StoryDetailsComponent {
         return stars;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -2685,8 +2975,13 @@ class PresentationComponent {
     constructor() {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
+    onStoryThumbnailClicked(story) {
+        if (!story.friendlyUrl) {
+            void this.presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story", "presentation"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -2699,7 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
                         StoryDetailsComponent,
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }], messenger: [{
@@ -2788,7 +3083,7 @@ class RTSeeContainerComponent {
         this.isSidenavExpanded = !this.isSidenavExpanded;
     }
     defineSideNavState(url) {
-        const isBase = url === '/' || url.startsWith('/?');
+        const isBase = url === '/' || url.startsWith('/?') || url.startsWith('/story');
         const routeUrlSplit = url.split('/');
         const rootRoutePath = isBase ? '' : routeUrlSplit[1] || null;
         if (!rootRoutePath && !isBase) {
@@ -3561,7 +3856,9 @@ class ForgotPasswordComponent {
             this.successMessage = '';
             const email = this.emailForm.getRawValue().email;
             this.authService
-                .forgotPassword({ email })
+                .forgotPassword({
+                email
+            })
                 .subscribe({
                 next: (response) => {
                     this.isLoading = false;