@rtsee/ngx 0.0.114 → 0.0.116

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

@@ -1195,6 +1195,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+class TranslationsPanelComponent {
+    toggle() {
+        void this.panel.toggle();
+    }
+    selectLanguage(language) {
+        if (language.isOriginal) {
+            return;
+        }
+        this.panel.select(this.panel.selectedLanguageKey === language.key ? null : language.key);
+    }
+    onInput(field, event) {
+        const target = event.target;
+        this.panel.setValue(field.key, target.value);
+    }
+    save() {
+        void this.panel.save();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TranslationsPanelComponent, isStandalone: true, selector: "rtsee-translations-panel", inputs: { panel: "panel" }, ngImport: i0, template: "<section class=\"rtsee-translations-panel\" [class.rtsee-translations-panel--expanded]=\"panel.isExpanded\">\n  <button type=\"button\" class=\"rtsee-translations-panel__header\" (click)=\"toggle()\"\n          [attr.aria-expanded]=\"panel.isExpanded\" id=\"rtsee-translations-toggle-{{ panel.kind }}-{{ panel.targetId }}\">\n    <span class=\"rtsee-translations-panel__icon pi pi-language\"></span>\n    <span class=\"rtsee-translations-panel__title\">Translations</span>\n    @if (panel.isLoaded) {\n      <span class=\"rtsee-translations-panel__badge\">{{ panel.translatedCount }}</span>\n    }\n    <span class=\"rtsee-translations-panel__chevron pi pi-chevron-down\"></span>\n  </button>\n\n  @if (panel.isExpanded) {\n    <div class=\"rtsee-translations-panel__body\">\n      @if (panel.loadInProgress) {\n        <div class=\"rtsee-translations-panel__loading\">\n          <span class=\"pi pi-spin pi-spinner\"></span> Loading translations\u2026\n        </div>\n      } @else {\n        <div class=\"rtsee-translations-panel__languages\" role=\"listbox\" aria-label=\"Translation language\">\n          @for (language of panel.languages; track language.key) {\n            <button type=\"button\" role=\"option\"\n                    class=\"rtsee-translations-panel__language\"\n                    id=\"rtsee-translation-lang-{{ panel.targetId }}-{{ language.key }}\"\n                    [class.rtsee-translations-panel__language--translated]=\"language.hasTranslation\"\n                    [class.rtsee-translations-panel__language--selected]=\"panel.selectedLanguageKey === language.key\"\n                    [class.rtsee-translations-panel__language--original]=\"language.isOriginal\"\n                    [attr.aria-selected]=\"panel.selectedLanguageKey === language.key\"\n                    [disabled]=\"language.isOriginal\"\n                    [title]=\"language.isOriginal ? 'Original language' : (language.hasTranslation ? 'Translated' : 'Not translated yet')\"\n                    (click)=\"selectLanguage(language)\">\n              <span class=\"rtsee-translations-panel__language-dot\"></span>\n              <span class=\"rtsee-translations-panel__language-name\">{{ language.name }}</span>\n              <span class=\"rtsee-translations-panel__language-key\">{{ language.key }}</span>\n              @if (language.isOriginal) {\n                <span class=\"rtsee-translations-panel__language-tag\">original</span>\n              } @else if (language.hasTranslation) {\n                <span class=\"rtsee-translations-panel__language-tag pi pi-check\"></span>\n              }\n            </button>\n          } @empty {\n            <p class=\"rtsee-translations-panel__hint\">No languages configured.</p>\n          }\n        </div>\n\n        @if (panel.selectedLanguage; as selected) {\n          <div class=\"rtsee-translations-panel__form\">\n            <p class=\"rtsee-translations-panel__hint\">\n              {{ selected.hasTranslation ? 'Editing' : 'Adding' }} the <strong>{{ selected.name }}</strong> translation\n            </p>\n            @for (field of panel.fields; track field.key) {\n              <label class=\"rtsee-translations-panel__field\">\n                <span class=\"rts-form-label\">{{ field.label }}@if (field.required) {<span class=\"rtsee-translations-panel__required\">*</span>}</span>\n                @if (field.multiline) {\n                  <textarea class=\"rts-textarea\" rows=\"3\"\n                            id=\"rtsee-translation-{{ panel.targetId }}-{{ field.key }}\"\n                            [value]=\"panel.values[field.key] || ''\"\n                            (input)=\"onInput(field, $event)\"></textarea>\n                } @else {\n                  <input class=\"rts-input\" type=\"text\"\n                         id=\"rtsee-translation-{{ panel.targetId }}-{{ field.key }}\"\n                         [value]=\"panel.values[field.key] || ''\"\n                         (input)=\"onInput(field, $event)\" />\n                }\n              </label>\n            }\n            <div class=\"rtsee-translations-panel__actions\">\n              @if (panel.savedLanguageKey === selected.key) {\n                <span class=\"rtsee-translations-panel__saved\"><span class=\"pi pi-check-circle\"></span> Saved</span>\n              }\n              <p-button type=\"button\" label=\"Save translation\" icon=\"pi pi-save\"\n                        [disabled]=\"!panel.canSave\" [loading]=\"panel.saveInProgress\"\n                        (onClick)=\"save()\"></p-button>\n            </div>\n          </div>\n        } @else if (panel.languages.length) {\n          <p class=\"rtsee-translations-panel__hint\">\n            Select a language to add or edit its translation. Highlighted languages are already translated.\n          </p>\n        }\n      }\n\n      @if (panel.error) {\n        <p class=\"rtsee-translations-panel__error\">{{ panel.error }}</p>\n      }\n    </div>\n  }\n</section>\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationsPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-translations-panel", standalone: true, imports: [Button], template: "<section class=\"rtsee-translations-panel\" [class.rtsee-translations-panel--expanded]=\"panel.isExpanded\">\n  <button type=\"button\" class=\"rtsee-translations-panel__header\" (click)=\"toggle()\"\n          [attr.aria-expanded]=\"panel.isExpanded\" id=\"rtsee-translations-toggle-{{ panel.kind }}-{{ panel.targetId }}\">\n    <span class=\"rtsee-translations-panel__icon pi pi-language\"></span>\n    <span class=\"rtsee-translations-panel__title\">Translations</span>\n    @if (panel.isLoaded) {\n      <span class=\"rtsee-translations-panel__badge\">{{ panel.translatedCount }}</span>\n    }\n    <span class=\"rtsee-translations-panel__chevron pi pi-chevron-down\"></span>\n  </button>\n\n  @if (panel.isExpanded) {\n    <div class=\"rtsee-translations-panel__body\">\n      @if (panel.loadInProgress) {\n        <div class=\"rtsee-translations-panel__loading\">\n          <span class=\"pi pi-spin pi-spinner\"></span> Loading translations\u2026\n        </div>\n      } @else {\n        <div class=\"rtsee-translations-panel__languages\" role=\"listbox\" aria-label=\"Translation language\">\n          @for (language of panel.languages; track language.key) {\n            <button type=\"button\" role=\"option\"\n                    class=\"rtsee-translations-panel__language\"\n                    id=\"rtsee-translation-lang-{{ panel.targetId }}-{{ language.key }}\"\n                    [class.rtsee-translations-panel__language--translated]=\"language.hasTranslation\"\n                    [class.rtsee-translations-panel__language--selected]=\"panel.selectedLanguageKey === language.key\"\n                    [class.rtsee-translations-panel__language--original]=\"language.isOriginal\"\n                    [attr.aria-selected]=\"panel.selectedLanguageKey === language.key\"\n                    [disabled]=\"language.isOriginal\"\n                    [title]=\"language.isOriginal ? 'Original language' : (language.hasTranslation ? 'Translated' : 'Not translated yet')\"\n                    (click)=\"selectLanguage(language)\">\n              <span class=\"rtsee-translations-panel__language-dot\"></span>\n              <span class=\"rtsee-translations-panel__language-name\">{{ language.name }}</span>\n              <span class=\"rtsee-translations-panel__language-key\">{{ language.key }}</span>\n              @if (language.isOriginal) {\n                <span class=\"rtsee-translations-panel__language-tag\">original</span>\n              } @else if (language.hasTranslation) {\n                <span class=\"rtsee-translations-panel__language-tag pi pi-check\"></span>\n              }\n            </button>\n          } @empty {\n            <p class=\"rtsee-translations-panel__hint\">No languages configured.</p>\n          }\n        </div>\n\n        @if (panel.selectedLanguage; as selected) {\n          <div class=\"rtsee-translations-panel__form\">\n            <p class=\"rtsee-translations-panel__hint\">\n              {{ selected.hasTranslation ? 'Editing' : 'Adding' }} the <strong>{{ selected.name }}</strong> translation\n            </p>\n            @for (field of panel.fields; track field.key) {\n              <label class=\"rtsee-translations-panel__field\">\n                <span class=\"rts-form-label\">{{ field.label }}@if (field.required) {<span class=\"rtsee-translations-panel__required\">*</span>}</span>\n                @if (field.multiline) {\n                  <textarea class=\"rts-textarea\" rows=\"3\"\n                            id=\"rtsee-translation-{{ panel.targetId }}-{{ field.key }}\"\n                            [value]=\"panel.values[field.key] || ''\"\n                            (input)=\"onInput(field, $event)\"></textarea>\n                } @else {\n                  <input class=\"rts-input\" type=\"text\"\n                         id=\"rtsee-translation-{{ panel.targetId }}-{{ field.key }}\"\n                         [value]=\"panel.values[field.key] || ''\"\n                         (input)=\"onInput(field, $event)\" />\n                }\n              </label>\n            }\n            <div class=\"rtsee-translations-panel__actions\">\n              @if (panel.savedLanguageKey === selected.key) {\n                <span class=\"rtsee-translations-panel__saved\"><span class=\"pi pi-check-circle\"></span> Saved</span>\n              }\n              <p-button type=\"button\" label=\"Save translation\" icon=\"pi pi-save\"\n                        [disabled]=\"!panel.canSave\" [loading]=\"panel.saveInProgress\"\n                        (onClick)=\"save()\"></p-button>\n            </div>\n          </div>\n        } @else if (panel.languages.length) {\n          <p class=\"rtsee-translations-panel__hint\">\n            Select a language to add or edit its translation. Highlighted languages are already translated.\n          </p>\n        }\n      }\n\n      @if (panel.error) {\n        <p class=\"rtsee-translations-panel__error\">{{ panel.error }}</p>\n      }\n    </div>\n  }\n</section>\n" }]
+        }], propDecorators: { panel: [{
+                type: Input
+            }] } });
+
 class FormComponent {
     constructor() {
         this.formSubmit = new EventEmitter();
@@ -1208,11 +1235,11 @@ class FormComponent {
         this.form.evaluateIsChanged();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rts-form-title\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rts-form-description\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-form rts-form-group\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container rts-form-field\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container rts-form-actions\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    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=\"rts-form-title\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rts-form-description\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-form rts-form-group\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container rts-form-field\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container rts-form-actions\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n  @if (form.translatable && form.translations) {\n    <rtsee-translations-panel [panel]=\"form.translations\"></rtsee-translations-panel>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TranslationsPanelComponent, selector: "rtsee-translations-panel", inputs: ["panel"] }] }); }
 }
 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, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rts-form-title\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rts-form-description\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-form rts-form-group\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container rts-form-field\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container rts-form-actions\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, FormsModule, TranslationsPanelComponent], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rts-form-title\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rts-form-description\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-form rts-form-group\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container rts-form-field\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container rts-form-actions\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n  @if (form.translatable && form.translations) {\n    <rtsee-translations-panel [panel]=\"form.translations\"></rtsee-translations-panel>\n  }\n</div>\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], formSubmit: [{
@@ -5661,15 +5688,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class ManageStoriesComponent {
+    constructor() {
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     ngOnInit() {
         this.manageStories.init();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { kind: "component", type: InteractiveStoryEditorComponent, selector: "rtsee-interactive-story-editor", inputs: ["vm", "autoInit"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button [label]=\"manageStories.labels[RTSeeTextLabelKeys.EDIT_BUTTON] || 'Edit'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button [label]=\"manageStories.labels[RTSeeTextLabelKeys.DELETE_BUTTON] || 'Delete'\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { kind: "component", type: InteractiveStoryEditorComponent, selector: "rtsee-interactive-story-editor", inputs: ["vm", "autoInit"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-stories', imports: [ManageStoryComponent, InteractiveStoryEditorComponent, Button, OrderList, NgClass], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-manage-stories', imports: [ManageStoryComponent, InteractiveStoryEditorComponent, Button, OrderList, NgClass], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button [label]=\"manageStories.labels[RTSeeTextLabelKeys.EDIT_BUTTON] || 'Edit'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button [label]=\"manageStories.labels[RTSeeTextLabelKeys.DELETE_BUTTON] || 'Delete'\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { manageStories: [{
                 type: Input
             }] } });
@@ -5923,8 +5953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class PresentationsDashboardComponent {
+    constructor() {
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationsDashboardComponent, isStandalone: true, selector: "rtsee-presentations-dashboard", inputs: { dashboard: "dashboard" }, ngImport: i0, template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n        <p-tab value=\"topics\">Topics</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ManageStoriesComponent, selector: "rtsee-manage-stories", inputs: ["manageStories"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TabPanels, selector: "p-tabpanels" }, { kind: "component", type: TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: ManageCategoriesComponent, selector: "rtsee-manage-categories", inputs: ["manageCategories"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: ManageLabelsComponent, selector: "rtsee-manage-labels", inputs: ["manageLabels"] }, { kind: "component", type: ManageTopicsComponent, selector: "rtsee-manage-topics", inputs: ["manageTopics"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationsDashboardComponent, isStandalone: true, selector: "rtsee-presentations-dashboard", inputs: { dashboard: "dashboard" }, ngImport: i0, template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip [label]=\"dashboard.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON] || 'Presentation Dashboard'\" />\n    <p-button [label]=\"dashboard.labels[RTSeeTextLabelKeys.CLOSE_BUTTON] || 'Close'\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">{{ dashboard.labels[RTSeeTextLabelKeys.STORIES_LABEL] || 'Stories' }}</p-tab>\n        <p-tab value=\"categories\">{{ dashboard.labels[RTSeeTextLabelKeys.CATEGORIES_LABEL] || 'Categories' }}</p-tab>\n        <p-tab value=\"labels\">{{ dashboard.labels[RTSeeTextLabelKeys.LABELS_LABEL] || 'Labels' }}</p-tab>\n        <p-tab value=\"topics\">{{ dashboard.labels[RTSeeTextLabelKeys.TOPICS_LABEL] || 'Topics' }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ManageStoriesComponent, selector: "rtsee-manage-stories", inputs: ["manageStories"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TabPanels, selector: "p-tabpanels" }, { kind: "component", type: TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: ManageCategoriesComponent, selector: "rtsee-manage-categories", inputs: ["manageCategories"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: ManageLabelsComponent, selector: "rtsee-manage-labels", inputs: ["manageLabels"] }, { kind: "component", type: ManageTopicsComponent, selector: "rtsee-manage-topics", inputs: ["manageTopics"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationsDashboardComponent, decorators: [{
             type: Component,
@@ -5940,7 +5973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Chip,
                         ManageLabelsComponent,
                         ManageTopicsComponent,
-                    ], template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip label=\"Presentation Dashboard\" />\n    <p-button label=\"Close\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">Stories</p-tab>\n        <p-tab value=\"categories\">Categories</p-tab>\n        <p-tab value=\"labels\">Labels</p-tab>\n        <p-tab value=\"topics\">Topics</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"rtsee-presentations-dashboard\">\n  <div class=\"rtsee-presentations-dashboard-header\">\n    <p-chip [label]=\"dashboard.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON] || 'Presentation Dashboard'\" />\n    <p-button [label]=\"dashboard.labels[RTSeeTextLabelKeys.CLOSE_BUTTON] || 'Close'\"\n              (click)=\"dashboard.onCloseDashboardClicked()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"manage-stories-container\">\n    <p-tabs lazy value=\"stories\">\n      <p-tablist>\n        <p-tab value=\"stories\">{{ dashboard.labels[RTSeeTextLabelKeys.STORIES_LABEL] || 'Stories' }}</p-tab>\n        <p-tab value=\"categories\">{{ dashboard.labels[RTSeeTextLabelKeys.CATEGORIES_LABEL] || 'Categories' }}</p-tab>\n        <p-tab value=\"labels\">{{ dashboard.labels[RTSeeTextLabelKeys.LABELS_LABEL] || 'Labels' }}</p-tab>\n        <p-tab value=\"topics\">{{ dashboard.labels[RTSeeTextLabelKeys.TOPICS_LABEL] || 'Topics' }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"stories\">\n          <ng-template #content>\n            <rtsee-manage-stories [manageStories]=\"dashboard.manageStories\"></rtsee-manage-stories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"categories\">\n          <ng-template #content>\n            <rtsee-manage-categories [manageCategories]=\"dashboard.manageCategories\"></rtsee-manage-categories>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"labels\">\n          <ng-template #content>\n            <rtsee-manage-labels [manageLabels]=\"dashboard.manageLabels\"></rtsee-manage-labels>\n          </ng-template>\n        </p-tabpanel>\n        <p-tabpanel value=\"topics\">\n          <ng-template #content>\n            <rtsee-manage-topics [manageTopics]=\"dashboard.manageTopics\"></rtsee-manage-topics>\n          </ng-template>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </div>\n</div>\n" }]
         }], propDecorators: { dashboard: [{
                 type: Input
             }] } });
@@ -6247,11 +6280,11 @@ class StoryDetailsComponent {
         return stars;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.ratesCount }}</span>\n                <span>)</span>\n              </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              <span>\n                <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n                <span>&nbsp;</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n              </span>\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              <span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.totalSlides }}</span>\n              </span>\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 ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\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>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.ratesCount }}</span>\n                <span>)</span>\n              </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              <span>\n                <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n                <span>&nbsp;</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n              </span>\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              <span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.totalSlides }}</span>\n              </span>\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 ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\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>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\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              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\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=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.ratesCount }}</span>\n                <span>)</span>\n              </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              <span>\n                <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n                <span>&nbsp;</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n              </span>\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              <span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.totalSlides }}</span>\n              </span>\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 ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\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>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n    </div>\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink], template: "<div class=\"rtsee-story-details\">\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div class=\"rtsee-story-details-cover-rating\">\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.ratesCount }}</span>\n                <span>)</span>\n              </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              <span>\n                <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n                <span>&nbsp;</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n              </span>\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              <span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span>{{ story.totalSlides }}</span>\n              </span>\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 ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\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>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\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              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\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=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\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: [{
@@ -7669,5 +7702,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent };
+export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent, TranslationsPanelComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map