@rtsee/ngx 0.0.116 → 0.0.117

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

@@ -38,19 +38,20 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import shave from 'shave';
 import { loadStripe } from '@stripe/stripe-js';
 import { Card } from 'primeng/card';
-import { Chip } from 'primeng/chip';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { Toast } from 'primeng/toast';
 import * as i1$3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
-import { EffectCards, Manipulation } from 'swiper/modules';
+import { Virtual, EffectCards } from 'swiper/modules';
 import { OrderList } from 'primeng/orderlist';
 import { RTSeeIllustrator, RTSeeStoryEditorSection } from '@rtsee/presentation';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
+import { Chip } from 'primeng/chip';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
 import { Tag } from 'primeng/tag';
+import { SelectButton } from 'primeng/selectbutton';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
@@ -367,11 +368,11 @@ class ProfileComponent {
         }, 200);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\">Language</label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n  }\n\n  <!-- language selection is available to every user (anonymous included) -->\n  @if (!isOtherUser && messenger.myPeer) {\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\" for=\"rts-profile-language-select\">\n          {{ messenger.labels[RTSeeTextLabelKeys.LANGUAGE_LABEL] || 'Language' }}\n        </label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  inputId=\"rts-profile-language-select\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: ProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-profile', imports: [RouterLink, Select, FormsModule], standalone: true, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\">Language</label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-profile', imports: [RouterLink, Select, FormsModule], standalone: true, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n  }\n\n  <!-- language selection is available to every user (anonymous included) -->\n  @if (!isOtherUser && messenger.myPeer) {\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\" for=\"rts-profile-language-select\">\n          {{ messenger.labels[RTSeeTextLabelKeys.LANGUAGE_LABEL] || 'Language' }}\n        </label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  inputId=\"rts-profile-language-select\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { messenger: [{
                 type: Input
             }], peer: [{
@@ -4902,11 +4903,11 @@ class PresentationHeaderComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times 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-cog-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: "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: 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        'rtsee-presentation-header-theme-dark': presentation.activeStory && presentation.settings.isDarkReadingTheme,\n        'rtsee-presentation-header-theme-light': presentation.activeStory && !presentation.settings.isDarkReadingTheme\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.activeStory; as story) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <button type=\"button\"\n              class=\"rtsee-presentation-header-icon-btn rtsee-presentation-header-active-story-info-close\"\n              [routerLink]=\"[presentation.homePage]\"\n              (click)=\"presentation.disableActiveStory()\"\n              [attr.aria-label]=\"presentation.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n              [title]=\"presentation.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n      >\n        <i class=\"pi pi-arrow-left\" aria-hidden=\"true\"></i>\n      </button>\n\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        @if (story.imageUrl) {\n          <img class=\"rtsee-presentation-header-active-story-cover\"\n               [src]=\"story.imageUrl\"\n               alt=\"\"\n               width=\"34\"\n               height=\"34\"\n               decoding=\"async\"\n          />\n        }\n        <div class=\"rtsee-presentation-header-active-story-text\">\n          <span class=\"rtsee-presentation-header-active-story-name\" [title]=\"story.name\">\n            {{ story.name }}\n          </span>\n          @if (story.totalSlides) {\n            <span class=\"rtsee-presentation-header-active-story-progress-label\">\n              {{ story.activeSlideNumber || 1 }} / {{ story.totalSlides }}\n            </span>\n          }\n        </div>\n      </div>\n\n      <button type=\"button\"\n              class=\"rtsee-presentation-header-icon-btn rtsee-presentation-header-active-story-info-settings\"\n              (click)=\"presentation.settings.expand()\"\n              [attr.aria-label]=\"presentation.labels[RTSeeTextLabelKeys.READING_SETTINGS_LABEL]\"\n              [title]=\"presentation.labels[RTSeeTextLabelKeys.READING_SETTINGS_LABEL]\"\n      >\n        <!-- \"Aa\": the well known reading/display settings glyph (text size, theme) -->\n        <span class=\"rtsee-presentation-header-settings-glyph\" aria-hidden=\"true\">\n          <span class=\"rtsee-presentation-header-settings-glyph-big\">A</span><span class=\"rtsee-presentation-header-settings-glyph-small\">a</span>\n        </span>\n      </button>\n\n      @if (story.totalSlides) {\n        <div class=\"rtsee-presentation-header-active-story-progress\" aria-hidden=\"true\">\n          <div class=\"rtsee-presentation-header-active-story-progress-bar\"\n               [style.width.%]=\"((story.activeSlideNumber || 1) / story.totalSlides) * 100\"\n          ></div>\n        </div>\n      }\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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times 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-cog-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
+            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible,\n        'rtsee-presentation-header-theme-dark': presentation.activeStory && presentation.settings.isDarkReadingTheme,\n        'rtsee-presentation-header-theme-light': presentation.activeStory && !presentation.settings.isDarkReadingTheme\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.activeStory; as story) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <button type=\"button\"\n              class=\"rtsee-presentation-header-icon-btn rtsee-presentation-header-active-story-info-close\"\n              [routerLink]=\"[presentation.homePage]\"\n              (click)=\"presentation.disableActiveStory()\"\n              [attr.aria-label]=\"presentation.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n              [title]=\"presentation.labels[RTSeeTextLabelKeys.BACK_LABEL]\"\n      >\n        <i class=\"pi pi-arrow-left\" aria-hidden=\"true\"></i>\n      </button>\n\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        @if (story.imageUrl) {\n          <img class=\"rtsee-presentation-header-active-story-cover\"\n               [src]=\"story.imageUrl\"\n               alt=\"\"\n               width=\"34\"\n               height=\"34\"\n               decoding=\"async\"\n          />\n        }\n        <div class=\"rtsee-presentation-header-active-story-text\">\n          <span class=\"rtsee-presentation-header-active-story-name\" [title]=\"story.name\">\n            {{ story.name }}\n          </span>\n          @if (story.totalSlides) {\n            <span class=\"rtsee-presentation-header-active-story-progress-label\">\n              {{ story.activeSlideNumber || 1 }} / {{ story.totalSlides }}\n            </span>\n          }\n        </div>\n      </div>\n\n      <button type=\"button\"\n              class=\"rtsee-presentation-header-icon-btn rtsee-presentation-header-active-story-info-settings\"\n              (click)=\"presentation.settings.expand()\"\n              [attr.aria-label]=\"presentation.labels[RTSeeTextLabelKeys.READING_SETTINGS_LABEL]\"\n              [title]=\"presentation.labels[RTSeeTextLabelKeys.READING_SETTINGS_LABEL]\"\n      >\n        <!-- \"Aa\": the well known reading/display settings glyph (text size, theme) -->\n        <span class=\"rtsee-presentation-header-settings-glyph\" aria-hidden=\"true\">\n          <span class=\"rtsee-presentation-header-settings-glyph-big\">A</span><span class=\"rtsee-presentation-header-settings-glyph-small\">a</span>\n        </span>\n      </button>\n\n      @if (story.totalSlides) {\n        <div class=\"rtsee-presentation-header-active-story-progress\" aria-hidden=\"true\">\n          <div class=\"rtsee-presentation-header-active-story-progress-bar\"\n               [style.width.%]=\"((story.activeSlideNumber || 1) / story.totalSlides) * 100\"\n          ></div>\n        </div>\n      }\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
             }] } });
@@ -5006,27 +5007,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Story slides player.
+ *
+ * Uses Swiper's Virtual module with `renderExternal`, so Angular only renders the few
+ * slides around the active one (Safari crashed when animating 20+ card slides at once).
+ * Swiper is aware of ALL the story slides (1..totalSlides) from the start, while the
+ * slide contents are lazy loaded by the story; slides not loaded yet render a placeholder.
+ */
 class StoryPlayerComponent {
-    constructor() {
-        Swiper.use([EffectCards, Manipulation]);
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.swiper = null;
+        /** slide numbers currently rendered by the virtual swiper */
+        this.virtualData = { offset: 0, from: 0, to: -1, slides: [] };
     }
     ngOnInit() {
         console.log('Story Player: Story = ', this.story);
     }
     ngAfterViewInit() {
-        const swiper = new Swiper(this.swiperEl.nativeElement, {
+        this.swiper = new Swiper(this.swiperEl.nativeElement, {
+            // Virtual must be registered before the effect: on "setTranslate" the virtual
+            // slides are rendered first, then the cards effect transforms them
+            modules: [Virtual, EffectCards],
             effect: 'cards',
             grabCursor: true,
+            virtual: {
+                enabled: true,
+                slides: this.getVirtualSlides(),
+                // keep a couple of neighbours rendered so the cards stack looks natural
+                addSlidesBefore: 1,
+                addSlidesAfter: 2,
+                // DOM is rendered by Angular; Swiper is updated manually once it's done
+                renderExternal: (data) => this.renderVirtualSlides(data),
+                renderExternalUpdate: false,
+            },
         });
-        this.story.initSwiper(swiper);
+        this.story.initSwiper(this.swiper, { virtual: true });
+    }
+    /** grows the virtual slides list when the slides count becomes known / changes */
+    ngDoCheck() {
+        if (!this.swiper || this.swiper.destroyed) {
+            return;
+        }
+        const total = this.getSlidesCount();
+        if (this.swiper.virtual.slides.length !== total) {
+            this.swiper.virtual.slides = this.getVirtualSlides();
+            this.swiper.virtual.update(true);
+        }
+    }
+    ngOnDestroy() {
+        if (!this.swiper) {
+            return;
+        }
+        if (this.story.swiper === this.swiper) {
+            this.story.swiper = null;
+        }
+        this.swiper.destroy(true, false);
+        this.swiper = null;
+    }
+    getLoadedSlide(slideNumber) {
+        return this.story.slides.find((s) => s.slideNumber === slideNumber) || null;
+    }
+    renderVirtualSlides(data) {
+        this.virtualData = data;
+        // render synchronously: Swiper measures the slides right after this callback
+        this.cdr.detectChanges();
+        const swiper = this.swiper;
+        // during init (beforeInit) `this.swiper` is not assigned yet and Swiper runs these updates by itself
+        if (!swiper || swiper.destroyed) {
+            return;
+        }
+        swiper.updateSlides();
+        swiper.updateProgress();
+        swiper.updateSlidesClasses();
+        // lets the cards effect re-apply transforms to the freshly rendered slides
+        swiper.emit('_virtualUpdated');
+    }
+    getSlidesCount() {
+        const lastLoaded = this.story.slides.length
+            ? this.story.slides[this.story.slides.length - 1].slideNumber
+            : 0;
+        return Math.max(this.story.totalSlides || 0, lastLoaded);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story", settings: "settings", presentation: "presentation" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track (slide.id || slide.slideNumber)) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["presentation", "story", "slide", "settings"] }] }); }
+    /** virtual slides are just the slide numbers: 1..N */
+    getVirtualSlides() {
+        return Array.from({ length: this.getSlidesCount() }, (_, i) => i + 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story", settings: "settings", presentation: "presentation" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\"\n     [class.rtsee-story-player-theme-dark]=\"settings.isDarkReadingTheme\"\n     [class.rtsee-story-player-theme-light]=\"!settings.isDarkReadingTheme\"\n>\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      <!-- only the virtual window (a few slides around the active one) is rendered -->\n      @for (slideNumber of virtualData.slides; track slideNumber; let i = $index) {\n        @let slide = getLoadedSlide(slideNumber);\n        <div class=\"story-player-slide-container swiper-slide\"\n             [attr.data-swiper-slide-index]=\"virtualData.from + i\"\n             [style.left.px]=\"virtualData.offset\"\n             [ngClass]=\"{'story-player-slide-active': slide?.isActive}\"\n        >\n          @if (slide) {\n            <rtsee-slide [slide]=\"slide\"\n                         [story]=\"story\"\n                         [presentation]=\"presentation\"\n                         [settings]=\"settings\"\n            ></rtsee-slide>\n          } @else {\n            <div class=\"story-player-slide-placeholder\" aria-busy=\"true\">\n              <span class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["presentation", "story", "slide", "settings"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-player', imports: [NgClass, SlideComponent], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track (slide.id || slide.slideNumber)) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { story: [{
+            args: [{ selector: 'rtsee-story-player', imports: [NgClass, SlideComponent], standalone: true, template: "<div class=\"rtsee-story-player\"\n     [class.rtsee-story-player-theme-dark]=\"settings.isDarkReadingTheme\"\n     [class.rtsee-story-player-theme-light]=\"!settings.isDarkReadingTheme\"\n>\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      <!-- only the virtual window (a few slides around the active one) is rendered -->\n      @for (slideNumber of virtualData.slides; track slideNumber; let i = $index) {\n        @let slide = getLoadedSlide(slideNumber);\n        <div class=\"story-player-slide-container swiper-slide\"\n             [attr.data-swiper-slide-index]=\"virtualData.from + i\"\n             [style.left.px]=\"virtualData.offset\"\n             [ngClass]=\"{'story-player-slide-active': slide?.isActive}\"\n        >\n          @if (slide) {\n            <rtsee-slide [slide]=\"slide\"\n                         [story]=\"story\"\n                         [presentation]=\"presentation\"\n                         [settings]=\"settings\"\n            ></rtsee-slide>\n          } @else {\n            <div class=\"story-player-slide-placeholder\" aria-busy=\"true\">\n              <span class=\"pi pi-spin pi-spinner\" aria-hidden=\"true\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { story: [{
                 type: Input
             }], settings: [{
                 type: Input
@@ -5980,11 +6054,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PresentationSettingsComponent {
     constructor() {
+        this.readingThemeOptions = [
+            { label: 'Light', value: 'light', icon: 'pi pi-sun' },
+            { label: 'Dark', value: 'dark', icon: 'pi pi-moon' },
+        ];
         this.COMMON_CONSTANTS = COMMON_CONSTANTS;
         this.window = window;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-reading-theme-settings\">\n    <p-fieldset legend=\"Reading Theme\">\n      <p-selectbutton\n        [options]=\"readingThemeOptions\"\n        [ngModel]=\"settings.readingTheme\"\n        (ngModelChange)=\"settings.setReadingTheme($event)\"\n        [allowEmpty]=\"false\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        class=\"rtsee-presentation-reading-theme-toggle\"\n      >\n        <ng-template #item let-option>\n          <span [class]=\"option.icon\" aria-hidden=\"true\"></span>\n          <span>{{ option.label }}</span>\n        </ng-template>\n      </p-selectbutton>\n      <div class=\"rtsee-presentation-reading-theme-example\"\n           [class.rtsee-presentation-reading-theme-example-dark]=\"settings.isDarkReadingTheme\"\n           [style.font-size]=\"settings.fontSize + 'rem'\"\n      >\n        Once upon a time, under a sky full of stars...\n      </div>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, decorators: [{
             type: Component,
@@ -5995,8 +6073,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Button,
                         Chip,
                         Message,
-                        Tag
-                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
+                        Tag,
+                        SelectButton,
+                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-reading-theme-settings\">\n    <p-fieldset legend=\"Reading Theme\">\n      <p-selectbutton\n        [options]=\"readingThemeOptions\"\n        [ngModel]=\"settings.readingTheme\"\n        (ngModelChange)=\"settings.setReadingTheme($event)\"\n        [allowEmpty]=\"false\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        class=\"rtsee-presentation-reading-theme-toggle\"\n      >\n        <ng-template #item let-option>\n          <span [class]=\"option.icon\" aria-hidden=\"true\"></span>\n          <span>{{ option.label }}</span>\n        </ng-template>\n      </p-selectbutton>\n      <div class=\"rtsee-presentation-reading-theme-example\"\n           [class.rtsee-presentation-reading-theme-example-dark]=\"settings.isDarkReadingTheme\"\n           [style.font-size]=\"settings.fontSize + 'rem'\"\n      >\n        Once upon a time, under a sky full of stars...\n      </div>\n    </p-fieldset>\n  </div>\n</div>\n" }]
         }], propDecorators: { settings: [{
                 type: Input
             }], presentation: [{
@@ -6243,7 +6322,7 @@ class RtseeEntityPreviewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityPreviewComponent, isStandalone: true, selector: "rtsee-entity-preview", inputs: { entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: RtseeEntityCommentsComponent, selector: "rtsee-entity-comments", inputs: ["messenger", "chat", "entity"] }, { kind: "component", type: RtseeEntityTagsComponent, selector: "rtsee-entity-tags", inputs: ["entity"] }, { kind: "component", type: RatingSectionComponent, selector: "rtsee-rating-section", inputs: ["rater", "entity"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityPreviewComponent, isStandalone: true, selector: "rtsee-entity-preview", inputs: { entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-entity-preview\">\n  @if (false) {\n    <div class=\"rtsee-entity-preview-tags\">\n      <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n    </div>\n  }\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: RtseeEntityCommentsComponent, selector: "rtsee-entity-comments", inputs: ["messenger", "chat", "entity"] }, { kind: "component", type: RtseeEntityTagsComponent, selector: "rtsee-entity-tags", inputs: ["entity"] }, { kind: "component", type: RatingSectionComponent, selector: "rtsee-rating-section", inputs: ["rater", "entity"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, decorators: [{
             type: Component,
@@ -6251,13 +6330,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEntityCommentsComponent,
                         RtseeEntityTagsComponent,
                         RatingSectionComponent,
-                    ], template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"rtsee-entity-preview\">\n  @if (false) {\n    <div class=\"rtsee-entity-preview-tags\">\n      <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n    </div>\n  }\n\n  @if (showRating && rater) {\n    <rtsee-rating-section [entity]=\"entity\"\n                          [rater]=\"rater\"\n    ></rtsee-rating-section>\n  } @else if (!showRating && entity.comments && messenger) {\n    <div class=\"rtsee-entity-preview-comments\">\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n                             [entity]=\"entity\"\n      ></rtsee-entity-comments>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { entity: [{
                 type: Input
             }], messenger: [{
                 type: Input
             }] } });
 
+let nextThumbnailId = 0;
+/**
+ * SEO-friendly thumbnail of a story element (author, character, artifact, location).
+ * Renders schema.org microdata so the element is attached to the parent CreativeWork
+ * through the given `itemProp` (e.g. "author", "character", "contentLocation", "mentions").
+ * Only exposes public fields: name, description & image.
+ *
+ * Layout: small image in the top-left corner, name & description to the right.
+ * The description is only clamped visually (CSS line-clamp), the full text always stays
+ * in the DOM so it's indexable; a "show more / less" toggle appears when it overflows.
+ */
+class StoryElementThumbnailComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.name = '';
+        this.schemaType = 'Thing';
+        /** featured layout (bigger image), used for single items like the author */
+        this.horizontal = false;
+        this.showMoreLabel = 'Show more';
+        this.showLessLabel = 'Show less';
+        this.descriptionId = `rtsee-story-element-description-${nextThumbnailId++}`;
+        this.imageFailed = false;
+        this.expanded = false;
+        /** the clamped description overflows (toggle is needed) */
+        this.truncatable = false;
+        this.resizeObserver = null;
+        this.destroyed = false;
+    }
+    get schemaUrl() {
+        return `https://schema.org/${this.schemaType}`;
+    }
+    get initial() {
+        return (this.name || '?').trim().charAt(0).toUpperCase();
+    }
+    get showImage() {
+        return !!this.imageUrl && !this.imageFailed;
+    }
+    ngOnChanges(changes) {
+        if (changes['description'] && !changes['description'].firstChange) {
+            this.expanded = false;
+            this.scheduleMeasure();
+        }
+        if (changes['imageUrl']) {
+            this.imageFailed = false;
+        }
+    }
+    ngAfterViewInit() {
+        this.scheduleMeasure();
+        if (typeof ResizeObserver !== 'undefined' && this.descriptionEl) {
+            this.resizeObserver = new ResizeObserver(() => this.measure());
+            this.resizeObserver.observe(this.descriptionEl.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    toggle() {
+        if (!this.truncatable) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        if (!this.expanded) {
+            // re-check after collapsing (the width may have changed meanwhile)
+            this.scheduleMeasure();
+        }
+    }
+    onImageError() {
+        this.imageFailed = true;
+    }
+    scheduleMeasure() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            return;
+        }
+        requestAnimationFrame(() => this.measure());
+    }
+    /** compares the clamped height with the full content height */
+    measure() {
+        if (this.destroyed || this.expanded || !this.descriptionEl) {
+            return;
+        }
+        const el = this.descriptionEl.nativeElement;
+        const truncatable = el.scrollHeight - el.clientHeight > 1;
+        if (truncatable !== this.truncatable) {
+            this.truncatable = truncatable;
+            this.cdr.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryElementThumbnailComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryElementThumbnailComponent, isStandalone: true, selector: "rtsee-story-element-thumbnail", inputs: { name: "name", description: "description", imageUrl: "imageUrl", itemProp: "itemProp", schemaType: "schemaType", horizontal: "horizontal", showMoreLabel: "showMoreLabel", showLessLabel: "showLessLabel" }, viewQueries: [{ propertyName: "descriptionEl", first: true, predicate: ["descriptionEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<article\n  class=\"rtsee-story-element-thumbnail\"\n  [class.rtsee-story-element-thumbnail-featured]=\"horizontal\"\n  [class.rtsee-story-element-thumbnail-expanded]=\"expanded\"\n  [attr.itemprop]=\"itemProp || null\"\n  itemscope\n  [attr.itemtype]=\"schemaUrl\"\n>\n  <figure class=\"rtsee-story-element-thumbnail-media\">\n    @if (showImage) {\n      <img\n        class=\"rtsee-story-element-thumbnail-image\"\n        [src]=\"imageUrl\"\n        [alt]=\"name\"\n        itemprop=\"image\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        width=\"144\"\n        height=\"144\"\n        (error)=\"onImageError()\"\n      />\n    } @else {\n      <span class=\"rtsee-story-element-thumbnail-placeholder\" aria-hidden=\"true\">\n        {{ initial }}\n      </span>\n    }\n  </figure>\n  <div class=\"rtsee-story-element-thumbnail-body\">\n    <h3 class=\"rtsee-story-element-thumbnail-name\" itemprop=\"name\">{{ name }}</h3>\n    @if (description) {\n      <!-- full text always stays in the DOM (indexable), it's only clamped visually -->\n      <div class=\"rtsee-story-element-thumbnail-description-wrapper\">\n        <p\n          #descriptionEl\n          class=\"rtsee-story-element-thumbnail-description\"\n          [class.rtsee-story-element-thumbnail-description-truncatable]=\"truncatable\"\n          [id]=\"descriptionId\"\n          itemprop=\"description\"\n          (click)=\"toggle()\"\n        >{{ description }}</p>\n        <!-- kept outside of the itemprop element so the label doesn't pollute the description -->\n        @if (truncatable) {\n          <button\n            type=\"button\"\n            class=\"rtsee-story-element-thumbnail-toggle\"\n            [class.rtsee-story-element-thumbnail-toggle-more]=\"!expanded\"\n            [class.rtsee-story-element-thumbnail-toggle-less]=\"expanded\"\n            [attr.aria-expanded]=\"expanded\"\n            [attr.aria-controls]=\"descriptionId\"\n            (click)=\"toggle()\"\n          >{{ expanded ? showLessLabel : showMoreLabel }}</button>\n        }\n      </div>\n    }\n  </div>\n</article>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryElementThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-element-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"rtsee-story-element-thumbnail\"\n  [class.rtsee-story-element-thumbnail-featured]=\"horizontal\"\n  [class.rtsee-story-element-thumbnail-expanded]=\"expanded\"\n  [attr.itemprop]=\"itemProp || null\"\n  itemscope\n  [attr.itemtype]=\"schemaUrl\"\n>\n  <figure class=\"rtsee-story-element-thumbnail-media\">\n    @if (showImage) {\n      <img\n        class=\"rtsee-story-element-thumbnail-image\"\n        [src]=\"imageUrl\"\n        [alt]=\"name\"\n        itemprop=\"image\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        width=\"144\"\n        height=\"144\"\n        (error)=\"onImageError()\"\n      />\n    } @else {\n      <span class=\"rtsee-story-element-thumbnail-placeholder\" aria-hidden=\"true\">\n        {{ initial }}\n      </span>\n    }\n  </figure>\n  <div class=\"rtsee-story-element-thumbnail-body\">\n    <h3 class=\"rtsee-story-element-thumbnail-name\" itemprop=\"name\">{{ name }}</h3>\n    @if (description) {\n      <!-- full text always stays in the DOM (indexable), it's only clamped visually -->\n      <div class=\"rtsee-story-element-thumbnail-description-wrapper\">\n        <p\n          #descriptionEl\n          class=\"rtsee-story-element-thumbnail-description\"\n          [class.rtsee-story-element-thumbnail-description-truncatable]=\"truncatable\"\n          [id]=\"descriptionId\"\n          itemprop=\"description\"\n          (click)=\"toggle()\"\n        >{{ description }}</p>\n        <!-- kept outside of the itemprop element so the label doesn't pollute the description -->\n        @if (truncatable) {\n          <button\n            type=\"button\"\n            class=\"rtsee-story-element-thumbnail-toggle\"\n            [class.rtsee-story-element-thumbnail-toggle-more]=\"!expanded\"\n            [class.rtsee-story-element-thumbnail-toggle-less]=\"expanded\"\n            [attr.aria-expanded]=\"expanded\"\n            [attr.aria-controls]=\"descriptionId\"\n            (click)=\"toggle()\"\n          >{{ expanded ? showLessLabel : showMoreLabel }}</button>\n        }\n      </div>\n    }\n  </div>\n</article>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], description: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], itemProp: [{
+                type: Input
+            }], schemaType: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }], showMoreLabel: [{
+                type: Input
+            }], showLessLabel: [{
+                type: Input
+            }], descriptionEl: [{
+                type: ViewChild,
+                args: ['descriptionEl']
+            }] } });
+
+/**
+ * "You are about to read N slides" teaser:
+ * a stack of circular slide illustrations followed by the slides count
+ * and the approximate reading time.
+ */
+class StorySlidesPreviewComponent {
+    constructor() {
+        /** e.g. "slides" */
+        this.slidesLabel = '';
+        /** e.g. "min" */
+        this.minuteLabel = '';
+        /** number of circles to show */
+        this.count = 3;
+        this.skeletons = [0, 1, 2];
+        this.cache = null;
+    }
+    ngOnChanges(changes) {
+        if (changes['story'] && this.story) {
+            void this.story.loadPreviewSlides(this.count);
+        }
+    }
+    /** story.averageReadTime is in seconds */
+    get readTimeMinutes() {
+        return this.story.averageReadTime ? Math.ceil(this.story.averageReadTime / 60) : 0;
+    }
+    get previews() {
+        const source = this.story.previewSlides;
+        const loading = this.story.previewSlidesLoading;
+        const cover = this.story.imageUrl || null;
+        if (this.cache &&
+            this.cache.source === source &&
+            this.cache.loading === loading &&
+            this.cache.cover === cover) {
+            return this.cache.result;
+        }
+        let result = (source || [])
+            .filter((s) => !!s.imageUrl)
+            .slice(0, this.count)
+            .map((s) => ({ imageUrl: s.imageUrl, slideNumber: s.slideNumber }));
+        // no illustrated slides: fall back to the story cover
+        if (!result.length && !loading && cover) {
+            result = [{ imageUrl: cover, slideNumber: 1 }];
+        }
+        this.cache = { source, loading, cover, result };
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorySlidesPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StorySlidesPreviewComponent, isStandalone: true, selector: "rtsee-story-slides-preview", inputs: { story: "story", slidesLabel: "slidesLabel", minuteLabel: "minuteLabel", count: "count" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rtsee-story-slides-preview\">\n  <span class=\"rtsee-story-slides-preview-stack\" aria-hidden=\"true\">\n    @if (story.previewSlidesLoading && !previews.length) {\n      @for (s of skeletons; track s) {\n        <span class=\"rtsee-story-slides-preview-circle rtsee-story-slides-preview-circle-skeleton\"></span>\n      }\n    } @else {\n      @for (preview of previews; track preview.slideNumber) {\n        <span class=\"rtsee-story-slides-preview-circle\">\n          <img\n            [src]=\"preview.imageUrl\"\n            [alt]=\"story.name + ' #' + preview.slideNumber\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            width=\"52\"\n            height=\"52\"\n          />\n        </span>\n      }\n    }\n  </span>\n  <span class=\"rtsee-story-slides-preview-text\">\n    <span class=\"rtsee-story-slides-preview-total\">\n      <span class=\"rtsee-story-slides-preview-count\">{{ story.totalSlides }}</span>\n      <span class=\"rtsee-story-slides-preview-label\">{{ slidesLabel }}</span>\n    </span>\n    @if (readTimeMinutes) {\n      <span class=\"rtsee-story-slides-preview-time\">\n        <span class=\"pi pi-clock\" aria-hidden=\"true\"></span>\n        <span>~{{ readTimeMinutes }} {{ minuteLabel }}</span>\n      </span>\n    }\n  </span>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorySlidesPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-slides-preview', changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"rtsee-story-slides-preview\">\n  <span class=\"rtsee-story-slides-preview-stack\" aria-hidden=\"true\">\n    @if (story.previewSlidesLoading && !previews.length) {\n      @for (s of skeletons; track s) {\n        <span class=\"rtsee-story-slides-preview-circle rtsee-story-slides-preview-circle-skeleton\"></span>\n      }\n    } @else {\n      @for (preview of previews; track preview.slideNumber) {\n        <span class=\"rtsee-story-slides-preview-circle\">\n          <img\n            [src]=\"preview.imageUrl\"\n            [alt]=\"story.name + ' #' + preview.slideNumber\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            width=\"52\"\n            height=\"52\"\n          />\n        </span>\n      }\n    }\n  </span>\n  <span class=\"rtsee-story-slides-preview-text\">\n    <span class=\"rtsee-story-slides-preview-total\">\n      <span class=\"rtsee-story-slides-preview-count\">{{ story.totalSlides }}</span>\n      <span class=\"rtsee-story-slides-preview-label\">{{ slidesLabel }}</span>\n    </span>\n    @if (readTimeMinutes) {\n      <span class=\"rtsee-story-slides-preview-time\">\n        <span class=\"pi pi-clock\" aria-hidden=\"true\"></span>\n        <span>~{{ readTimeMinutes }} {{ minuteLabel }}</span>\n      </span>\n    }\n  </span>\n</div>\n" }]
+        }], propDecorators: { story: [{
+                type: Input,
+                args: [{ required: true }]
+            }], slidesLabel: [{
+                type: Input
+            }], minuteLabel: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }] } });
+
 class StoryDetailsComponent {
     constructor() {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
@@ -6280,11 +6539,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\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"] }] }); }
+    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\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/CreativeWork\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\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 && false) {\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\" itemprop=\"name\">{{ 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      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\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        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\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\" itemprop=\"description\">\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    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\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"] }, { kind: "component", type: StoryElementThumbnailComponent, selector: "rtsee-story-element-thumbnail", inputs: ["name", "description", "imageUrl", "itemProp", "schemaType", "horizontal", "showMoreLabel", "showLessLabel"] }, { kind: "component", type: StorySlidesPreviewComponent, selector: "rtsee-story-slides-preview", inputs: ["story", "slidesLabel", "minuteLabel", "count"] }] }); }
 }
 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\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" }]
+            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink, StoryElementThumbnailComponent, StorySlidesPreviewComponent], template: "<div\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/CreativeWork\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\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 && false) {\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\" itemprop=\"name\">{{ 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      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\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        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\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\" itemprop=\"description\">\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    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header 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            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\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: [{
@@ -6303,7 +6562,7 @@ class PresentationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n                          [presentation]=\"presentation\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story", "presentation"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings", "presentation"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\"\n         [class.rtsee-presentation-story-viewer-container-dark]=\"presentation.settings.isDarkReadingTheme\"\n    >\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n                          [presentation]=\"presentation\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story", "presentation"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings", "presentation"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -6316,7 +6575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
                         StoryDetailsComponent,
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n                          [presentation]=\"presentation\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\"\n         [class.rtsee-presentation-story-viewer-container-dark]=\"presentation.settings.isDarkReadingTheme\"\n    >\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n                          [presentation]=\"presentation\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }], messenger: [{