@rtsee/ngx 0.0.92 → 0.0.94

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

@@ -37,11 +37,11 @@ import * as i1$2 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
+import { OrderList } from 'primeng/orderlist';
+import { Checkbox } from 'primeng/checkbox';
 import { InputNumber } from 'primeng/inputnumber';
 import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import { OrderList } from 'primeng/orderlist';
-import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
@@ -56,7 +56,6 @@ import { Tooltip } from 'primeng/tooltip';
 import { PanelMenu } from 'primeng/panelmenu';
 import { Menu } from 'primeng/menu';
 import { Password } from 'primeng/password';
-import { Checkbox } from 'primeng/checkbox';
 import { AutosizeModule } from 'ngx-autosize';
 import { debounceTime } from 'rxjs/operators';
 import shave from 'shave';
@@ -1537,11 +1536,11 @@ class RtseeEventsDashboardSessionComponent {
         this.timeFormatService = timeFormatService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardSessionComponent, isStandalone: true, selector: "rtsee-rtsee-events-dashboard-session", inputs: { session: "session" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\" *ngIf=\"session.info\">\n    <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n    <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n    <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n      <span *ngIf=\"session.info.deviceType === 'smartphone' && !session.info.botName\"\n        class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n      >phone_iphone</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'tablet' && !session.info.botName\"\n      >tablet_mac</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'desktop' && !session.info.botName\"\n      >computer</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.botName\"\n      >smart_toy</span>\n    </div>\n  </div>\n  <ul *ngIf=\"session.events && session.events.length\"\n      class=\"rtsee-events-dashboard-session-events-list\"\n  >\n    @for (event of session.events | slice:0:5; track event.id) {\n      <li class=\"rtsee-events-dashboard-session-event\">\n        <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n      </li>\n    }\n  </ul>\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: ["event"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardSessionComponent, isStandalone: true, selector: "rtsee-rtsee-events-dashboard-session", inputs: { session: "session" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-session\">\n  @if (session.info) {\n    <div class=\"rtsee-events-dashboard-session-header\">\n      <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n      <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n      <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n        @if (session.info.deviceType === 'smartphone' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >phone_iphone</span>\n        }\n        @if (session.info.deviceType === 'tablet' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >tablet_mac</span>\n        }\n        @if (session.info.deviceType === 'desktop' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >computer</span>\n        }\n        @if (session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >smart_toy</span>\n        }\n      </div>\n    </div>\n  }\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\"\n    >\n      @for (event of session.events | slice:0:5; track event.id) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: ["event"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [NgIf, EventThumbnailComponent, SlicePipe], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\" *ngIf=\"session.info\">\n    <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n    <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n    <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n      <span *ngIf=\"session.info.deviceType === 'smartphone' && !session.info.botName\"\n        class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n      >phone_iphone</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'tablet' && !session.info.botName\"\n      >tablet_mac</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.deviceType === 'desktop' && !session.info.botName\"\n      >computer</span>\n      <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            *ngIf=\"session.info.botName\"\n      >smart_toy</span>\n    </div>\n  </div>\n  <ul *ngIf=\"session.events && session.events.length\"\n      class=\"rtsee-events-dashboard-session-events-list\"\n  >\n    @for (event of session.events | slice:0:5; track event.id) {\n      <li class=\"rtsee-events-dashboard-session-event\">\n        <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n      </li>\n    }\n  </ul>\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [NgIf, EventThumbnailComponent, SlicePipe], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  @if (session.info) {\n    <div class=\"rtsee-events-dashboard-session-header\">\n      <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n      <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n      <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n        @if (session.info.deviceType === 'smartphone' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >phone_iphone</span>\n        }\n        @if (session.info.deviceType === 'tablet' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >tablet_mac</span>\n        }\n        @if (session.info.deviceType === 'desktop' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >computer</span>\n        }\n        @if (session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >smart_toy</span>\n        }\n      </div>\n    </div>\n  }\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\"\n    >\n      @for (event of session.events | slice:0:5; track event.id) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { session: [{
                 type: Input
             }] } });
@@ -1613,11 +1612,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) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
+            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !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" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
@@ -1740,17 +1739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['swiperContainer']
             }] } });
 
-class AutocompleteComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n                        (onSelect)=\"config.onSelect($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-autocomplete', imports: [AutoCompleteModule, FloatLabel, InputGroup, FormsModule], template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"config.allowMultipleSelections\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n                        (onSelect)=\"config.onSelect($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n" }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
 class ManageSlidesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageSlidesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ManageSlidesComponent, isStandalone: true, selector: "rtsee-manage-slides", inputs: { manageSlides: "manageSlides" }, ngImport: i0, template: "<div class=\"rtsee-presentation-manage-slides\">\n  <div class=\"rtsee-presentation-manage-slides-header\">\n    <p-button (click)=\"manageSlides.selectNewSlide()\"\n              label=\"Create A New Slide\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-manage-slides-list rtsee-ordered-list\">\n    <p-orderList [value]=\"manageSlides.slides\"\n                 dataKey=\"id\"\n                 [dragdrop]=\"true\"\n                 [responsive]=\"true\"\n                 scrollHeight=\"40rem\"\n                 controlsPosition=\"right\"\n                 (onReorder)=\"manageSlides.onReorder($event)\"\n                 [disabled]=\"manageSlides.loadInProgress\"\n    >\n      <ng-template let-option let-selected=\"selected\" #item>\n        <div class=\"rtsee-presentation-manage-slides-list-item rtsee-ordered-list-item\">\n          <img\n            [src]=\"option.imageUrl\"\n            [alt]=\"'slide_image'\"\n            [style.width]=\"'60px'\"\n            class=\"rtsee-presentation-manage-slides-list-item-image rtsee-ordered-list-item-image\"\n          />\n          <div class=\"rtsee-presentation-manage-slides-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n                  class=\"rtsee-ordered-list-item-info-label\"\n            >{{ option.slideNumber }}</span>\n            <div class=\"rtsee-ordered-list-item-info-buttons\">\n              <p-button label=\"Edit\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n                        (click)=\"manageSlides.selectSlide(option.slideNumber)\"\n              ></p-button>\n              <p-button label=\"Delete\"\n                        severity=\"warn\"\n                        class=\"rtsee-ordered-list-item-info-button\"\n              ></p-button>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </p-orderList>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
@@ -1810,98 +1798,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
-class ManageStoryComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.storyForm = this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131),
-                ],
-            }),
-            description: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(6),
-                    Validators.maxLength(244),
-                ],
-            }),
-            averageReadTime: this.formBuilder.control(0),
-            isPublished: this.formBuilder.control(false),
-            isDiscussable: this.formBuilder.control(false),
+class TextFieldComponent {
+    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: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TextFieldComponent, isStandalone: true, selector: "rtsee-field-text", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             pInputText\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-text", standalone: true, imports: [FormsModule, InputText, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             pInputText\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class TextareaFieldComponent {
+    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: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TextareaFieldComponent, isStandalone: true, selector: "rtsee-field-textarea", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <textarea [id]=\"field.name\"\n                class=\"rtsee-form-field\"\n                pTextarea\n                rows=\"3\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></textarea>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-textarea", standalone: true, imports: [FormsModule, Textarea, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <textarea [id]=\"field.name\"\n                class=\"rtsee-form-field\"\n                pTextarea\n                rows=\"3\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></textarea>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class CheckboxFieldComponent {
+    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: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxFieldComponent, isStandalone: true, selector: "rtsee-field-checkbox", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container flex items-center\">\n  <p-checkbox [inputId]=\"field.name\"\n              [binary]=\"true\"\n              [(ngModel)]=\"field.value\"\n              (ngModelChange)=\"onModelChange()\"\n  ></p-checkbox>\n  <label [for]=\"field.name\" class=\"ml-2\">{{ field.name }}</label>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-checkbox", standalone: true, imports: [FormsModule, Checkbox, Message], template: "<div class=\"rtsee-form-field-container flex items-center\">\n  <p-checkbox [inputId]=\"field.name\"\n              [binary]=\"true\"\n              [(ngModel)]=\"field.value\"\n              (ngModelChange)=\"onModelChange()\"\n  ></p-checkbox>\n  <label [for]=\"field.name\" class=\"ml-2\">{{ field.name }}</label>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class RadioFieldComponent {
+    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: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioFieldComponent, isStandalone: true, selector: "rtsee-field-radio", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-radio-group-label font-semibold\">{{ field.name }}</div>\n  @for (option of field.radioOptions; track option.value) {\n    <div class=\"flex items-center mt-2\">\n      <p-radioButton [name]=\"field.name\"\n                     [value]=\"option.value\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [inputId]=\"field.name + '_' + option.value\"\n      ></p-radioButton>\n      <label [for]=\"field.name + '_' + option.value\" class=\"ml-2\">{{ option.label }}</label>\n    </div>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-radio", standalone: true, imports: [FormsModule, RadioButton, Message], template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-radio-group-label font-semibold\">{{ field.name }}</div>\n  @for (option of field.radioOptions; track option.value) {\n    <div class=\"flex items-center mt-2\">\n      <p-radioButton [name]=\"field.name\"\n                     [value]=\"option.value\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [inputId]=\"field.name + '_' + option.value\"\n      ></p-radioButton>\n      <label [for]=\"field.name + '_' + option.value\" class=\"ml-2\">{{ option.label }}</label>\n    </div>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class NumberFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: NumberFieldComponent, isStandalone: true, selector: "rtsee-field-number", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NumberFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-number", standalone: true, imports: [FormsModule, InputNumber, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class AutocompleteComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AutocompleteComponent, isStandalone: true, selector: "rtsee-autocomplete", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"true\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n                        (onSelect)=\"config.onSelect($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i1$3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-autocomplete', imports: [AutoCompleteModule, FloatLabel, InputGroup, FormsModule], template: "<div class=\"rtsee-autocomplete rtsee-form-field-container\">\n    <p-inputgroup>\n      <p-floatlabel variant=\"on\">\n        <p-autoComplete [(ngModel)]=\"config.selectedSuggestions\"\n                        [inputId]=\"config.inputId\"\n                        [multiple]=\"true\"\n                        [fluid]=\"config.fluid\"\n                        [suggestions]=\"config.visibleSuggestions\"\n                        [optionLabel]=\"config.suggestionLabel\"\n                        (completeMethod)=\"config.onQueryChanged($event)\"\n                        (onSelect)=\"config.onSelect($event)\"\n        ></p-autoComplete>\n        <label [for]=\"config.inputId\">{{config.inputName}}</label>\n      </p-floatlabel>\n    </p-inputgroup>\n</div>\n" }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class AutocompleteFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.field.autocomplete.on("select", () => {
+            this.onModelChange();
         });
     }
-    submit() {
-        if (this.storyForm.valid) {
-            void this.manageStory.save({
-                name: this.nameField.value,
-                description: this.descriptionField.value,
-                averageReadTime: this.averageReadTimeField.value,
-                commentsEnabled: this.isDiscussableField.value,
-                isPublished: this.isPublishedField.value,
-            });
-        }
-        else {
-            this.storyForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AutocompleteFieldComponent, isStandalone: true, selector: "rtsee-field-autocomplete", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-autocomplete [config]=\"field.autocomplete\"></rtsee-autocomplete>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-autocomplete", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-autocomplete [config]=\"field.autocomplete\"></rtsee-autocomplete>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class RecursiveSelectComponent {
+    constructor() {
+        this.value = undefined;
+    }
+    ngOnInit() {
+        this.value = this.selectModel.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectComponent, isStandalone: true, selector: "rtsee-recursive-select", inputs: { selectModel: "selectModel" }, ngImport: i0, template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-recursive-select', imports: [Select, FormsModule], template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { selectModel: [{
+                type: Input
+            }] } });
+
+class RecursiveSelectFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngDoCheck() {
+        if (this.field.recursiveSelect.value !== this.lastValue) {
+            this.lastValue = this.field.recursiveSelect.value;
+            this.onModelChange();
         }
     }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectFieldComponent, isStandalone: true, selector: "rtsee-field-recursive-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RecursiveSelectComponent, selector: "rtsee-recursive-select", inputs: ["selectModel"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-recursive-select", standalone: true, imports: [RecursiveSelectComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class ImageUploaderFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
     ngOnInit() {
-        this.nameField.setValue(this.manageStory.story.name);
-        this.descriptionField.setValue(this.manageStory.story.description || '');
-        this.averageReadTimeField.setValue(this.manageStory.story.averageReadTime || 0);
-        this.isPublishedField.setValue(this.manageStory.story.isPublished || false);
-        this.isDiscussableField.setValue(this.manageStory.story.commentsEnabled || false);
+        this.field.imageUploader.on("completed", () => {
+            this.onModelChange();
+        });
     }
-    get nameField() {
-        return this.storyForm.get('name');
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
     }
-    get descriptionField() {
-        return this.storyForm.get('description');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageUploaderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ImageUploaderFieldComponent, isStandalone: true, selector: "rtsee-field-image-uploader", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-image-uploader-label font-semibold mb-2\">{{ field.name }}</div>\n  <rtsee-image-uploader [imageUploader]=\"field.imageUploader\"></rtsee-image-uploader>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ImageUploaderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-image-uploader", standalone: true, imports: [RTSeeImageUploaderComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <div class=\"rtsee-image-uploader-label font-semibold mb-2\">{{ field.name }}</div>\n  <rtsee-image-uploader [imageUploader]=\"field.imageUploader\"></rtsee-image-uploader>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FormFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
     }
-    get averageReadTimeField() {
-        return this.storyForm.get('averageReadTime');
+    onFieldChanged() {
+        this.fieldChanged.emit();
     }
-    get isPublishedField() {
-        return this.storyForm.get('isPublished');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n", dependencies: [{ kind: "component", type: TextFieldComponent, selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: TextareaFieldComponent, selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: CheckboxFieldComponent, selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RadioFieldComponent, selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: NumberFieldComponent, selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: AutocompleteFieldComponent, selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RecursiveSelectFieldComponent, selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: ImageUploaderFieldComponent, selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-form-field", standalone: true, imports: [
+                        TextFieldComponent,
+                        TextareaFieldComponent,
+                        CheckboxFieldComponent,
+                        RadioFieldComponent,
+                        NumberFieldComponent,
+                        AutocompleteFieldComponent,
+                        RecursiveSelectFieldComponent,
+                        ImageUploaderFieldComponent
+                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FormComponent {
+    constructor() {
+        this.formSubmit = new EventEmitter();
     }
-    get isDiscussableField() {
-        return this.storyForm.get('isDiscussable');
+    submit() {
+        this.formSubmit.emit(this.form);
     }
-    disableFormFields() {
-        this.nameField.disable();
-        this.descriptionField.disable();
-        this.averageReadTimeField.disable();
+    onFieldChanged() {
+        this.form.evaluateIsValid();
+        this.form.evaluateIsDirty();
+        this.form.evaluateIsChanged();
     }
-    enableFormFields() {
-        this.nameField.disable();
-        this.descriptionField.disable();
-        this.averageReadTimeField.disable();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
+        }], propDecorators: { form: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class ManageStoryComponent {
+    ngOnInit() {
+        if (!this.manageStory.activeStoryForm) {
+            this.manageStory.initForm();
+        }
+        if (!this.manageStory.activeStoryForm) {
+            throw new Error(`Active story form should be selected`);
+        }
+    }
+    submit() {
+        if (!this.manageStory.activeStoryForm) {
+            return;
+        }
+        this.manageStory.activeStoryForm.submit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      @if (manageStory.activeStoryForm) {\n        <rtsee-form [form]=\"manageStory.activeStoryForm\" (formSubmit)=\"submit()\">\n          <p-button type=\"submit\"\n                    [label]=\"'Save'\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          ></p-button>\n          <p-button [label]=\"'Cancel'\"\n                    severity=\"secondary\"\n                    (click)=\"manageStory.cancel()\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          />\n        </rtsee-form>\n\n        @if (manageStory.story.id) {\n          <p-divider />\n          <div class=\"rtsee-story-slides-wrapper\">\n            <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-story', imports: [
-                        FloatLabel,
-                        FormsModule,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        ReactiveFormsModule,
-                        Textarea,
-                        InputNumber,
-                        RTSeeImageUploaderComponent,
+            args: [{ selector: "rtsee-manage-story", standalone: true, imports: [
                         Button,
-                        AutocompleteComponent,
                         ManageSlidesComponent,
                         ManageSlideComponent,
                         Divider,
-                        ToggleSwitch,
-                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageStory: [{
+                        FormComponent,
+                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      @if (manageStory.activeStoryForm) {\n        <rtsee-form [form]=\"manageStory.activeStoryForm\" (formSubmit)=\"submit()\">\n          <p-button type=\"submit\"\n                    [label]=\"'Save'\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          ></p-button>\n          <p-button [label]=\"'Cancel'\"\n                    severity=\"secondary\"\n                    (click)=\"manageStory.cancel()\"\n                    [disabled]=\"manageStory.saveInProgress\"\n          />\n        </rtsee-form>\n\n        @if (manageStory.story.id) {\n          <p-divider />\n          <div class=\"rtsee-story-slides-wrapper\">\n            <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n          </div>\n        }\n      }\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { manageStory: [{
                 type: Input
             }] } });
 
@@ -2380,11 +2560,11 @@ class RaterComponent {
         return rates;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"'Update'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"'Delete'\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"'Send'\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { entity: [{
                 type: Input
             }], rater: [{
@@ -2430,11 +2610,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class RatingSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RatingSectionComponent, isStandalone: true, selector: "rtsee-rating-section", inputs: { rater: "rater", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\" [entity]=\"entity\"></rtsee-rates-list>\n</div>\n", dependencies: [{ kind: "component", type: RaterComponent, selector: "rtsee-rater", inputs: ["entity", "rater"] }, { kind: "component", type: RatesListComponent, selector: "rtsee-rates-list", inputs: ["rater", "entity"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RatingSectionComponent, isStandalone: true, selector: "rtsee-rating-section", inputs: { rater: "rater", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\"\n                    [entity]=\"entity\"\n  ></rtsee-rates-list>\n</div>\n", dependencies: [{ kind: "component", type: RaterComponent, selector: "rtsee-rater", inputs: ["entity", "rater"] }, { kind: "component", type: RatesListComponent, selector: "rtsee-rates-list", inputs: ["rater", "entity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rating-section', imports: [RaterComponent, RatesListComponent], template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\" [entity]=\"entity\"></rtsee-rates-list>\n</div>\n" }]
+            args: [{ selector: 'rtsee-rating-section', imports: [RaterComponent, RatesListComponent], template: "<div class=\"rtsee-rating-section\">\n  <rtsee-rater [rater]=\"rater\"\n               [entity]=\"entity\"\n  ></rtsee-rater>\n  <rtsee-rates-list [rater]=\"rater\"\n                    [entity]=\"entity\"\n  ></rtsee-rates-list>\n</div>\n" }]
         }], propDecorators: { rater: [{
                 type: Input
             }], entity: [{
@@ -2488,11 +2668,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    <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.labels?.length) {\n          @for (label of story.labels; track label.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              <span class=\"symbol\">{{ label.symbol }}</span> {{ label.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\n      <div class=\"rtsee-story-details-cover-actions\">\n        <p-button\n          [label]=\"\n            story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\n          \"\n          class=\"rtsee-story-details-start-reading\"\n          (click)=\"presentation.setActiveStory(story)\"\n        ></p-button>\n        <p-button\n          label=\"Close\"\n          class=\"rtsee-story-details-close\"\n          severity=\"secondary\"\n          (click)=\"presentation.closeStoryDetails()\"\n        ></p-button>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\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    <!-- Keep Comments/Preview Sections completely intact below -->\n    @if (story.entity && messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story.entity\"\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.labels?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (label of story.labels; track label.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            <span class=\"rtsee-story-details-label-left\">{{\n              label.symbol\n            }}</span>\n            <span class=\"rtsee-story-details-label-right\">{{\n              label.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      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\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.labels?.length) {\n          @for (label of story.labels; track label.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              <span class=\"symbol\">{{ label.symbol }}</span> {{ label.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\n      <div class=\"rtsee-story-details-cover-actions\">\n        <p-button\n          [label]=\"\n            story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\n          \"\n          class=\"rtsee-story-details-start-reading\"\n          (click)=\"presentation.setActiveStory(story)\"\n        ></p-button>\n        <p-button\n          label=\"Close\"\n          class=\"rtsee-story-details-close\"\n          severity=\"secondary\"\n          (click)=\"presentation.closeStoryDetails()\"\n        ></p-button>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\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    <!-- Keep Comments/Preview Sections completely intact below -->\n    @if (story.entity && messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story.entity\"\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.labels?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (label of story.labels; track label.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            <span class=\"rtsee-story-details-label-left\">{{\n              label.symbol\n            }}</span>\n            <span class=\"rtsee-story-details-label-right\">{{\n              label.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], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\"\n                >({{ story.ratesCount }} ratings)</span\n              >\n            }\n          </div>\n        }\n\n        <div class=\"rtsee-story-details-cover-info-chips\">\n          @if (story.averageReadTime) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\n                <polyline points=\"12 6 12 12 16 14\" />\n              </svg>\n              {{ story.averageReadTime }} min\n            </span>\n          }\n          @if (story.totalSlides) {\n            <span class=\"rtsee-story-details-info-chip\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n                <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n              </svg>\n              {{ story.totalSlides }} slides\n            </span>\n          }\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <div class=\"rtsee-story-details-cover-actions\">\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </div>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>About This Story</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -2682,23 +2862,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
-class RecursiveSelectComponent {
-    constructor() {
-        this.value = undefined;
-    }
-    ngOnInit() {
-        this.value = this.selectModel.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectComponent, isStandalone: true, selector: "rtsee-recursive-select", inputs: { selectModel: "selectModel" }, ngImport: i0, template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rtsee-recursive-select', imports: [Select, FormsModule], template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { selectModel: [{
-                type: Input
-            }] } });
-
 class RtseeTagManageComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
@@ -3148,112 +3311,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class ManageEntityConfigurationComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.entityConfigurationForm = this.getEntityConfigurationForm();
-    }
     ngOnInit() {
         if (!this.manageEntityConfigurations.activeEntityConfiguration) {
             this.manageEntityConfigurations.setBlankActiveEntityConfiguration();
         }
-        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
-            throw new Error(`Active entityConfig should be selected`);
+        if (!this.manageEntityConfigurations.activeEntityConfigurationForm) {
+            throw new Error(`Active entityConfig form should be selected`);
         }
-        this.presetFields(this.manageEntityConfigurations.activeEntityConfiguration);
-        void this.manageEntityConfigurations.initMultiselect();
     }
-    async submit() {
-        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
-            throw new Error(`Active entityConfiguration should be selected`);
-        }
-        if (this.entityConfigurationForm.invalid ||
-            !this.manageEntityConfigurations.peer.rtseeAppId) {
-            console.log('Form Invalid!');
+    submit() {
+        if (!this.manageEntityConfigurations.activeEntityConfigurationForm) {
             return;
         }
-        const configurationParams = {
-            name: this.nameField.getRawValue(),
-            description: this.descriptionField.getRawValue(),
-            applicationId: this.manageEntityConfigurations.peer.rtseeAppId,
-            taggingEnabled: this.taggingEnabledField.getRawValue(),
-            commentsEnabled: this.commentsEnabledField.getRawValue(),
-            ratingEnabled: this.ratingEnabledField.getRawValue(),
-        };
-        if (this.manageEntityConfigurations.activeEntityConfiguration.id) {
-            await this.manageEntityConfigurations.updateEntityConfiguration({
-                ...configurationParams,
-                id: this.manageEntityConfigurations.activeEntityConfiguration.id,
-            });
-        }
-        else {
-            await this.manageEntityConfigurations.createEntityConfiguration(configurationParams);
-        }
+        this.manageEntityConfigurations.activeEntityConfigurationForm.submit();
     }
     cancel() {
-        console.log('Cancel');
-    }
-    presetFields(entityConfiguration) {
-        this.nameField.setValue(entityConfiguration.name);
-        this.descriptionField.setValue(entityConfiguration.description || '');
-        this.taggingEnabledField.setValue(entityConfiguration.taggingEnabled || false);
-        this.commentsEnabledField.setValue(entityConfiguration.commentsEnabled || false);
-        this.ratingEnabledField.setValue(entityConfiguration.ratingEnabled || false);
-    }
-    getEntityConfigurationForm() {
-        return this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131),
-                ],
-            }),
-            description: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(6),
-                    Validators.maxLength(244),
-                ],
-            }),
-            taggingEnabled: this.formBuilder.control(false),
-            commentsEnabled: this.formBuilder.control(false),
-            ratingEnabled: this.formBuilder.control(false),
-        });
-    }
-    get nameField() {
-        return this.entityConfigurationForm.get('name');
-    }
-    get descriptionField() {
-        return this.entityConfigurationForm.get('description');
-    }
-    get taggingEnabledField() {
-        return this.entityConfigurationForm.get('taggingEnabled');
-    }
-    get commentsEnabledField() {
-        return this.entityConfigurationForm.get('commentsEnabled');
+        this.manageEntityConfigurations.flushActiveEntityConfiguration();
     }
-    get ratingEnabledField() {
-        return this.entityConfigurationForm.get('ratingEnabled');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityConfigurationComponent, isStandalone: true, selector: "rtsee-manage-entity-configuration", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-config-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-entity-config-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      @if (manageEntityConfigurations.activeEntityConfiguration) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: RatingConfigurationsListComponent, selector: "rtsee-rating-configurations-list", inputs: ["entityConfiguration", "manageRatingConfigurations"], outputs: ["onRatingConfigurationClicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityConfigurationComponent, isStandalone: true, selector: "rtsee-manage-entity-configuration", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    @if (manageEntityConfigurations.activeEntityConfigurationForm) {\n      <rtsee-form [form]=\"manageEntityConfigurations.activeEntityConfigurationForm\" (formSubmit)=\"submit()\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        ></p-button>\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"cancel()\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        />\n      </rtsee-form>\n\n      @if (manageEntityConfigurations.activeEntityConfiguration && manageEntityConfigurations.activeEntityConfiguration.id) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\n      }\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }, { kind: "component", type: RatingConfigurationsListComponent, selector: "rtsee-rating-configurations-list", inputs: ["entityConfiguration", "manageRatingConfigurations"], outputs: ["onRatingConfigurationClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-entity-configuration', imports: [
-                        AutocompleteComponent,
+            args: [{ selector: "rtsee-manage-entity-configuration", standalone: true, imports: [
                         Button,
-                        FloatLabel,
-                        FormsModule,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        Textarea,
-                        ReactiveFormsModule,
-                        ToggleSwitch,
+                        FormComponent,
                         RatingConfigurationsListComponent,
-                    ], template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-config-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-entity-config-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      @if (manageEntityConfigurations.activeEntityConfiguration) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntityConfigurations: [{
+                    ], template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    @if (manageEntityConfigurations.activeEntityConfigurationForm) {\n      <rtsee-form [form]=\"manageEntityConfigurations.activeEntityConfigurationForm\" (formSubmit)=\"submit()\">\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        ></p-button>\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"cancel()\"\n                  [disabled]=\"manageEntityConfigurations.saveInProgress\"\n        />\n      </rtsee-form>\n\n      @if (manageEntityConfigurations.activeEntityConfiguration && manageEntityConfigurations.activeEntityConfiguration.id) {\n        <rtsee-rating-configurations-list [entityConfiguration]=\"manageEntityConfigurations.activeEntityConfiguration\"\n                                          [manageRatingConfigurations]=\"manageEntityConfigurations.activeEntityConfiguration.manageRatingConfigurations\"\n        ></rtsee-rating-configurations-list>\n      }\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { manageEntityConfigurations: [{
                 type: Input
             }] } });
 
@@ -3296,100 +3381,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class ManageEntityComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.entityForm = this.getEntityForm();
-    }
     ngOnInit() {
         if (!this.manageEntities.activeEntity) {
             this.manageEntities.setBlankActiveEntity();
         }
-        if (!this.manageEntities.activeEntity) {
-            throw new Error(`Active entity should be selected`);
+        if (!this.manageEntities.activeEntityForm) {
+            throw new Error(`Active entity form should be selected`);
         }
-        this.presetFields(this.manageEntities.activeEntity);
-        void this.manageEntities.initMultiselect();
     }
-    async submit() {
-        if (!this.manageEntities.activeEntity) {
-            throw new Error(`Active entity should be selected`);
-        }
-        if (this.entityForm.invalid || !this.manageEntities.peer.rtseeAppId) {
-            console.log('Form Invalid!');
+    submit() {
+        if (!this.manageEntities.activeEntityForm) {
             return;
         }
-        const entityParams = {
-            name: this.nameField.getRawValue(),
-            applicationId: this.manageEntities.peer.rtseeAppId,
-            configurationId: this.configurationIdField.getRawValue(),
-            imageUrl: this.imageUrlField.getRawValue(),
-            tags: [],
-            tagIds: [],
-        };
-        if (this.manageEntities.activeEntity.id) {
-            await this.manageEntities.updateEntity({
-                ...entityParams,
-                id: this.manageEntities.activeEntity.id,
-            });
-        }
-        else {
-            await this.manageEntities.createEntity(entityParams);
-        }
-    }
-    configurationInputChanged() {
-        console.log('Configuration Input Changed');
+        this.manageEntities.activeEntityForm.submit();
     }
     cancel() {
-        console.log('Cancel');
+        this.manageEntities.flushActiveEntity();
     }
-    presetFields(entityConfiguration) {
-        this.nameField.setValue(entityConfiguration.name);
-        this.imageUrlField.setValue(entityConfiguration.imageUrl || '');
-        this.configurationIdField.setValue(entityConfiguration.configurationId || '');
-    }
-    getEntityForm() {
-        return this.formBuilder.group({
-            name: this.formBuilder.control('', {
-                validators: [
-                    Validators.required,
-                    Validators.minLength(3),
-                    Validators.maxLength(131),
-                ],
-            }),
-            configurationId: this.formBuilder.control('', {
-                validators: [Validators.required],
-            }),
-            imageUrl: this.formBuilder.control('', {
-                validators: [Validators.minLength(6), Validators.maxLength(244)],
-            }),
-        });
-    }
-    get nameField() {
-        return this.entityForm.get('name');
-    }
-    get imageUrlField() {
-        return this.entityForm.get('imageUrl');
-    }
-    get configurationIdField() {
-        return this.entityForm.get('configurationId');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityComponent, isStandalone: true, selector: "rtsee-manage-entity", inputs: { manageEntities: "manageEntities" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityComponent, isStandalone: true, selector: "rtsee-manage-entity", inputs: { manageEntities: "manageEntities" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity\">\n  @if (manageEntities.activeEntityForm) {\n    <rtsee-form [form]=\"manageEntities.activeEntityForm\" (formSubmit)=\"submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </rtsee-form>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-entity', imports: [
-                        AutocompleteComponent,
+            args: [{ selector: "rtsee-manage-entity", standalone: true, imports: [
                         Button,
-                        FloatLabel,
-                        InputGroup,
-                        InputText,
-                        Message,
-                        ReactiveFormsModule,
-                        Select,
-                        FormsModule,
-                    ], template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntities: [{
+                        FormComponent
+                    ], template: "<div class=\"rtsee-manage-entity\">\n  @if (manageEntities.activeEntityForm) {\n    <rtsee-form [form]=\"manageEntities.activeEntityForm\" (formSubmit)=\"submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </rtsee-form>\n  }\n</div>\n" }]
+        }], propDecorators: { manageEntities: [{
                 type: Input
             }] } });
 
@@ -4053,13 +4071,15 @@ class RTSeeModule {
             NgOptimizedImage,
             RouterLink,
             RouterLinkActive,
-            NgxCaptchaModule], exports: [RTSeeConferenceComponent,
+            NgxCaptchaModule,
+            FormComponent], exports: [RTSeeConferenceComponent,
             MessengerComponent,
             RtseeEventsDashboardComponent,
             RTSeeContainerComponent,
             PresentationComponent,
             RTSeeAuthComponent,
-            PaymentProductSnippetComponent] }); }
+            PaymentProductSnippetComponent,
+            FormComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeModule, providers: [
             provideAnimationsAsync(),
             providePrimeNG({
@@ -4093,7 +4113,8 @@ class RTSeeModule {
             AutosizeModule,
             InfiniteScrollModule,
             FormsModule,
-            NgxCaptchaModule] }); }
+            NgxCaptchaModule,
+            FormComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeModule, decorators: [{
             type: NgModule,
@@ -4159,6 +4180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RouterLink,
                         RouterLinkActive,
                         NgxCaptchaModule,
+                        FormComponent,
                     ],
                     exports: [
                         RTSeeConferenceComponent,
@@ -4168,6 +4190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationComponent,
                         RTSeeAuthComponent,
                         PaymentProductSnippetComponent,
+                        FormComponent,
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -4181,5 +4204,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map