@rtsee/ngx 0.0.99 → 0.0.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,7 +12,7 @@ import { interval, tap, map, filter } from 'rxjs';
12
12
  import { RTSeeTextLabelKeys, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
13
13
  import * as i2$2 from 'primeng/message';
14
14
  import { Message, MessageModule } from 'primeng/message';
15
- import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
15
+ import { AuthEndpointsKeys, LS_TOKEN_LABEL, LS_USER_LABEL, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
16
16
  import * as i2 from '@angular/router';
17
17
  import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
18
18
  import { Divider } from 'primeng/divider';
@@ -28,7 +28,6 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
28
28
  import { RadioButton } from 'primeng/radiobutton';
29
29
  import { InputText } from 'primeng/inputtext';
30
30
  import { loadStripe } from '@stripe/stripe-js';
31
- import { ProgressSpinner } from 'primeng/progressspinner';
32
31
  import { Card } from 'primeng/card';
33
32
  import { Chip } from 'primeng/chip';
34
33
  import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
@@ -57,6 +56,7 @@ import { Tooltip } from 'primeng/tooltip';
57
56
  import { PanelMenu } from 'primeng/panelmenu';
58
57
  import { Menu } from 'primeng/menu';
59
58
  import { Password } from 'primeng/password';
59
+ import { ProgressSpinner } from 'primeng/progressspinner';
60
60
  import { AutosizeModule } from 'ngx-autosize';
61
61
  import { debounceTime } from 'rxjs/operators';
62
62
  import shave from 'shave';
@@ -307,11 +307,11 @@ class ProfileComponent {
307
307
  }, 200);
308
308
  }
309
309
  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 }); }
310
- 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=\"rtsee-messenger-profile\">\n @if (!messenger.ownProfileOpened) {\n <ul class=\"rtsee-messenger-profile-actions\">\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"call()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-phone\"\n />\n </li>\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"videoCall()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-video\"\n />\n </li>\n </ul>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n <div class=\"rtsee-messenger-profile-info\">\n <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n <div class=\"rtsee-messenger-profile-info-language\">\n <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\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=\"rtsee-messenger-profile-info-language-select\"\n />\n </div>\n <div class=\"rtsee-messenger-profile-edit\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n (click)=\"messenger.openManageProfile()\"\n ></p-button>\n </div>\n <p-divider></p-divider>\n @if (messenger.myPeer.plan) {\n <p-message severity=\"success\">\n <span>{{messenger.myPeer.plan.productName}}</span>\n </p-message>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n (click)=\"messenger.openManagePlanPage()\"\n ></p-button>\n } @else {\n <div class=\"rtsee-subscribe-button\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n (click)=\"messenger.openPaymentPage()\"\n ></p-button>\n </div>\n }\n <p-divider></p-divider>\n </div>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n <div class=\"rtsee-messenger-profile-auth\">\n <div class=\"rtsee-messenger-profile-anon-message\">\n @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n <p-message severity=\"warn\">\n <span>This is an anonymous identity we've generated for you.</span>\n <span>&nbsp;</span>\n <span>You can use it to play around.</span>\n <span>&nbsp;</span>\n <span>But we are guilty of erasing these time after time.</span>\n <span>&nbsp;</span>\n <span>So please Sign Up if you're looking for something more stable :)</span>\n </p-message>\n } @else if (messenger.currentLanguage === 'ua') {\n <p-message severity=\"warn\">\n <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n <span>&nbsp;</span>\n <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n <span>&nbsp;</span>\n <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n <span>&nbsp;</span>\n <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n </p-message>\n }\n </div>\n\n <div class=\"rtsee-messenger-profile-auth-buttons\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n severity=\"primary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n severity=\"secondary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n </div>\n </div>\n } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n severity=\"danger\"\n (click)=\"logOut()\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: 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"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
310
+ 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=\"rtsee-messenger-profile\">\n @if (!messenger.ownProfileOpened) {\n <ul class=\"rtsee-messenger-profile-actions\">\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"call()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-phone\"\n />\n </li>\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"videoCall()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-video\"\n />\n </li>\n </ul>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n <div class=\"rtsee-messenger-profile-info\">\n <div class=\"rtsee-messenger-profile-glass-card\">\n <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n <div class=\"rtsee-messenger-profile-info-language\">\n <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\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=\"rtsee-messenger-profile-info-language-select\"\n />\n </div>\n <div class=\"rtsee-messenger-profile-edit-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n (click)=\"messenger.openManageProfile()\"\n ></p-button>\n </div>\n </div>\n\n @if (messenger.myPeer.plan) {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-glass-card\">\n <div class=\"rtsee-messenger-profile-plan-status\">\n <p-message severity=\"success\">\n <span>{{messenger.myPeer.plan.productName}}</span>\n </p-message>\n </div>\n <div class=\"rtsee-messenger-profile-manage-plan-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n (click)=\"messenger.openManagePlanPage()\"\n ></p-button>\n </div>\n </div>\n } @else {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-subscribe-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n (click)=\"messenger.openPaymentPage()\"\n ></p-button>\n </div>\n }\n </div>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n <div class=\"rtsee-messenger-profile-auth\">\n <div class=\"rtsee-messenger-profile-anon-message\">\n @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n <p-message severity=\"warn\">\n <span>This is an anonymous identity we've generated for you.</span>\n <span>&nbsp;</span>\n <span>You can use it to play around.</span>\n <span>&nbsp;</span>\n <span>But we are guilty of erasing these time after time.</span>\n <span>&nbsp;</span>\n <span>So please Sign Up if you're looking for something more stable :)</span>\n </p-message>\n } @else if (messenger.currentLanguage === 'ua') {\n <p-message severity=\"warn\">\n <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n <span>&nbsp;</span>\n <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n <span>&nbsp;</span>\n <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n <span>&nbsp;</span>\n <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n </p-message>\n }\n </div>\n\n <div class=\"rtsee-messenger-profile-auth-buttons\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n severity=\"primary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n severity=\"secondary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n </div>\n </div>\n } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-logout-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n severity=\"danger\"\n (click)=\"logOut()\"\n ></p-button>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { 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"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
311
311
  }
312
312
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, decorators: [{
313
313
  type: Component,
314
- args: [{ selector: 'rtsee-profile', imports: [Button, Message, RouterLink, Select, FormsModule, Divider], standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n @if (!messenger.ownProfileOpened) {\n <ul class=\"rtsee-messenger-profile-actions\">\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"call()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-phone\"\n />\n </li>\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"videoCall()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-video\"\n />\n </li>\n </ul>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n <div class=\"rtsee-messenger-profile-info\">\n <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n <div class=\"rtsee-messenger-profile-info-language\">\n <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\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=\"rtsee-messenger-profile-info-language-select\"\n />\n </div>\n <div class=\"rtsee-messenger-profile-edit\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n (click)=\"messenger.openManageProfile()\"\n ></p-button>\n </div>\n <p-divider></p-divider>\n @if (messenger.myPeer.plan) {\n <p-message severity=\"success\">\n <span>{{messenger.myPeer.plan.productName}}</span>\n </p-message>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n (click)=\"messenger.openManagePlanPage()\"\n ></p-button>\n } @else {\n <div class=\"rtsee-subscribe-button\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n (click)=\"messenger.openPaymentPage()\"\n ></p-button>\n </div>\n }\n <p-divider></p-divider>\n </div>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n <div class=\"rtsee-messenger-profile-auth\">\n <div class=\"rtsee-messenger-profile-anon-message\">\n @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n <p-message severity=\"warn\">\n <span>This is an anonymous identity we've generated for you.</span>\n <span>&nbsp;</span>\n <span>You can use it to play around.</span>\n <span>&nbsp;</span>\n <span>But we are guilty of erasing these time after time.</span>\n <span>&nbsp;</span>\n <span>So please Sign Up if you're looking for something more stable :)</span>\n </p-message>\n } @else if (messenger.currentLanguage === 'ua') {\n <p-message severity=\"warn\">\n <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n <span>&nbsp;</span>\n <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n <span>&nbsp;</span>\n <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n <span>&nbsp;</span>\n <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n </p-message>\n }\n </div>\n\n <div class=\"rtsee-messenger-profile-auth-buttons\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n severity=\"primary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n severity=\"secondary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n </div>\n </div>\n } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n severity=\"danger\"\n (click)=\"logOut()\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n }\n</div>\n" }]
314
+ args: [{ selector: 'rtsee-profile', imports: [Button, Message, RouterLink, Select, FormsModule, Divider], standalone: true, template: "<div class=\"rtsee-messenger-profile\">\n @if (!messenger.ownProfileOpened) {\n <ul class=\"rtsee-messenger-profile-actions\">\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"call()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-phone\"\n />\n </li>\n <li class=\"rtsee-messenger-profile-actions-item\">\n <p-button\n (click)=\"videoCall()\"\n size=\"large\"\n severity=\"secondary\"\n icon=\"pi pi-video\"\n />\n </li>\n </ul>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n <div class=\"rtsee-messenger-profile-info\">\n <div class=\"rtsee-messenger-profile-glass-card\">\n <p class=\"rtsee-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n <div class=\"rtsee-messenger-profile-info-language\">\n <p class=\"rtsee-messenger-profile-info-language-label\">Language:</p>\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=\"rtsee-messenger-profile-info-language-select\"\n />\n </div>\n <div class=\"rtsee-messenger-profile-edit-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n (click)=\"messenger.openManageProfile()\"\n ></p-button>\n </div>\n </div>\n\n @if (messenger.myPeer.plan) {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-glass-card\">\n <div class=\"rtsee-messenger-profile-plan-status\">\n <p-message severity=\"success\">\n <span>{{messenger.myPeer.plan.productName}}</span>\n </p-message>\n </div>\n <div class=\"rtsee-messenger-profile-manage-plan-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n (click)=\"messenger.openManagePlanPage()\"\n ></p-button>\n </div>\n </div>\n } @else {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-subscribe-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n (click)=\"messenger.openPaymentPage()\"\n ></p-button>\n </div>\n }\n </div>\n }\n\n @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n <div class=\"rtsee-messenger-profile-auth\">\n <div class=\"rtsee-messenger-profile-anon-message\">\n @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n <p-message severity=\"warn\">\n <span>This is an anonymous identity we've generated for you.</span>\n <span>&nbsp;</span>\n <span>You can use it to play around.</span>\n <span>&nbsp;</span>\n <span>But we are guilty of erasing these time after time.</span>\n <span>&nbsp;</span>\n <span>So please Sign Up if you're looking for something more stable :)</span>\n </p-message>\n } @else if (messenger.currentLanguage === 'ua') {\n <p-message severity=\"warn\">\n <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n <span>&nbsp;</span>\n <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n <span>&nbsp;</span>\n <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n <span>&nbsp;</span>\n <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n </p-message>\n }\n </div>\n\n <div class=\"rtsee-messenger-profile-auth-buttons\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n severity=\"primary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n severity=\"secondary\"\n [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n class=\"rtsee-messenger-profile-auth-button\"\n ></p-button>\n </div>\n </div>\n } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n <p-divider></p-divider>\n <div class=\"rtsee-messenger-profile-logout-btn\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n severity=\"danger\"\n (click)=\"logOut()\"\n ></p-button>\n </div>\n }\n</div>\n" }]
315
315
  }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { messenger: [{
316
316
  type: Input
317
317
  }], peer: [{
@@ -495,7 +495,7 @@ const COMMON_CONSTANTS = {
495
495
  customDateFormat: 'dd/MM/YYYY',
496
496
  customDateFormatDaysJs: 'DD/MM/YYYY',
497
497
  customDateTimeFormat: 'dd/MM/YYYY HH:mm',
498
- defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png',
498
+ defaultProfileImgUrl: 'https://rtsee-local-files-vault.s3.us-east-1.amazonaws.com/0e58dbea-568c-4007-9a55-3d6f0c859ffb_default-profile-image.png',
499
499
  mobileBreakpoint: 800,
500
500
  };
501
501
 
@@ -1203,19 +1203,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
1203
1203
 
1204
1204
  class PaymentProductSnippetComponent {
1205
1205
  constructor() {
1206
+ this.theme = 'dark';
1206
1207
  this.priceSelected = new EventEmitter();
1207
1208
  }
1208
1209
  selectPrice(price) {
1209
1210
  this.priceSelected.emit(price);
1210
1211
  }
1211
1212
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1212
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentProductSnippetComponent, isStandalone: true, selector: "rtsee-payment-product-snippet", inputs: { product: "product" }, outputs: { priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"rtsee-payment-product-snippet\">\n <p-card [header]=\"product.name\">\n <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n <div class=\"rtsee-payment-product-prices\">\n @for (price of product.prices; track price.id) {\n <div class=\"rtsee-payment-product-price\">\n <p-card [header]=\"price.label\" >\n <p>{{price.description}}</p>\n <p-button label=\"Select Plan\"\n (click)=\"selectPrice(price)\"\n ></p-button>\n </p-card>\n </div>\n }\n </div>\n </p-card>\n</div>\n", dependencies: [{ kind: "component", type: Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { 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"] }] }); }
1213
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentProductSnippetComponent, isStandalone: true, selector: "rtsee-payment-product-snippet", inputs: { product: "product", theme: "theme" }, outputs: { priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"rtsee-payment-product-snippet\">\n <div class=\"rtsee-payment-product-card\">\n <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n <div class=\"rtsee-payment-product-prices\">\n @for (price of product.prices; track price.id) {\n <div class=\"rtsee-payment-price-card\">\n <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n <button class=\"rtsee-payment-select-plan-btn\"\n (click)=\"selectPrice(price)\"\n >Select Plan</button>\n </div>\n }\n </div>\n </div>\n</div>\n" }); }
1213
1214
  }
1214
1215
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, decorators: [{
1215
1216
  type: Component,
1216
- args: [{ selector: 'rtsee-payment-product-snippet', imports: [Card, Button], template: "<div class=\"rtsee-payment-product-snippet\">\n <p-card [header]=\"product.name\">\n <p class=\"rtsee-payment-product-snippet-description\">{{product.description}}</p>\n <div class=\"rtsee-payment-product-prices\">\n @for (price of product.prices; track price.id) {\n <div class=\"rtsee-payment-product-price\">\n <p-card [header]=\"price.label\" >\n <p>{{price.description}}</p>\n <p-button label=\"Select Plan\"\n (click)=\"selectPrice(price)\"\n ></p-button>\n </p-card>\n </div>\n }\n </div>\n </p-card>\n</div>\n" }]
1217
+ args: [{ selector: 'rtsee-payment-product-snippet', imports: [], template: "<div class=\"rtsee-payment-product-snippet\">\n <div class=\"rtsee-payment-product-card\">\n <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n <div class=\"rtsee-payment-product-prices\">\n @for (price of product.prices; track price.id) {\n <div class=\"rtsee-payment-price-card\">\n <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n <button class=\"rtsee-payment-select-plan-btn\"\n (click)=\"selectPrice(price)\"\n >Select Plan</button>\n </div>\n }\n </div>\n </div>\n</div>\n" }]
1217
1218
  }], propDecorators: { product: [{
1218
1219
  type: Input
1220
+ }], theme: [{
1221
+ type: Input
1219
1222
  }], priceSelected: [{
1220
1223
  type: Output
1221
1224
  }] } });
@@ -1225,10 +1228,12 @@ class PaymentsService {
1225
1228
  this.http = http;
1226
1229
  this.paymentsConfig = null;
1227
1230
  this.isInitialized = false;
1231
+ this.userId = null;
1228
1232
  }
1229
- init(configuration) {
1233
+ init(configuration, userId) {
1230
1234
  this.paymentsConfig = configuration;
1231
1235
  this.isInitialized = true;
1236
+ this.userId = userId;
1232
1237
  }
1233
1238
  createSession(options) {
1234
1239
  if (!this.paymentsConfig) {
@@ -1244,7 +1249,12 @@ class PaymentsService {
1244
1249
  throw new Error('No SessionId provided');
1245
1250
  }
1246
1251
  return this.http
1247
- .get(`${this.paymentsConfig.getSessionEndpoint}/?sessionId=${this.paymentsConfig.sessionId}`)
1252
+ .get(`${this.paymentsConfig.getSessionEndpoint}`, {
1253
+ params: {
1254
+ sessionId: this.paymentsConfig.sessionId,
1255
+ userId: this.userId || ''
1256
+ }
1257
+ })
1248
1258
  .pipe(tap((res) => {
1249
1259
  console.log('tap here', res);
1250
1260
  this.paymentsConfig?.setValidationInProgress(false);
@@ -1284,6 +1294,7 @@ class PaymentPageComponent {
1284
1294
  this.paymentsService = paymentsService;
1285
1295
  this.planSelected = false;
1286
1296
  this.loadInProgress = false;
1297
+ this.theme = 'dark';
1287
1298
  this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
1288
1299
  }
1289
1300
  async init() {
@@ -1327,43 +1338,51 @@ class PaymentPageComponent {
1327
1338
  console.log('Stripe not yet initialized!');
1328
1339
  return;
1329
1340
  }
1330
- const checkout = await this.stripe.initEmbeddedCheckout({
1331
- clientSecret: secret,
1341
+ this.checkout = await this.stripe.initEmbeddedCheckout({
1342
+ clientSecret: secret
1332
1343
  });
1333
- if (!checkout) {
1344
+ if (!this.checkout) {
1334
1345
  return;
1335
1346
  }
1336
1347
  this.loadInProgress = false;
1337
- checkout.mount(this.checkoutContainer.nativeElement);
1348
+ this.checkout.mount(this.checkoutContainer.nativeElement);
1338
1349
  }
1339
1350
  ngOnInit() {
1340
- if (!this.paymentsService.isInitialized && this.messenger.payments) {
1341
- this.paymentsService.init(this.messenger.payments);
1351
+ if (!this.paymentsService.isInitialized && this.messenger.payments && this.messenger.myPeer?.clientId) {
1352
+ this.paymentsService.init(this.messenger.payments, this.messenger.myPeer.clientId);
1342
1353
  }
1343
1354
  void this.init();
1344
1355
  }
1356
+ ngOnDestroy() {
1357
+ if (this.checkout) {
1358
+ this.checkout.destroy();
1359
+ }
1360
+ }
1345
1361
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentPageComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
1346
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentPageComponent, isStandalone: true, selector: "rtsee-payment-page", inputs: { messenger: "messenger" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n @if (messenger.payments && !planSelected) {\n @if (messenger.payments.products) {\n <div class=\"rtsee-payment-page-products\">\n @for (product of messenger.payments.products ; track product.id) {\n <rtsee-payment-product-snippet [product]=\"product\"\n (priceSelected)=\"selectPlan($event)\"\n ></rtsee-payment-product-snippet>\n }\n </div>\n } @else {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n }\n @if (loadInProgress) {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n <div class=\"rtsee-payment-page-footer\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n (click)=\"messenger.closePaymentPage()\"\n severity=\"warn\"\n ></p-button>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: PaymentProductSnippetComponent, selector: "rtsee-payment-product-snippet", inputs: ["product"], outputs: ["priceSelected"] }, { 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"] }] }); }
1362
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentPageComponent, isStandalone: true, selector: "rtsee-payment-page", inputs: { messenger: "messenger", theme: "theme" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n @if (messenger.payments && !planSelected) {\n @if (messenger.payments.products) {\n <div class=\"rtsee-payment-page-products\">\n @for (product of messenger.payments.products ; track product.id) {\n <rtsee-payment-product-snippet [product]=\"product\"\n [theme]=\"theme\"\n (priceSelected)=\"selectPlan($event)\"\n ></rtsee-payment-product-snippet>\n }\n </div>\n } @else {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n }\n @if (loadInProgress) {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n <div class=\"rtsee-payment-page-footer\">\n <button class=\"rtsee-payment-cancel-btn\"\n (click)=\"messenger.closePaymentPage()\"\n >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PaymentProductSnippetComponent, selector: "rtsee-payment-product-snippet", inputs: ["product", "theme"], outputs: ["priceSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1347
1363
  }
1348
1364
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentPageComponent, decorators: [{
1349
1365
  type: Component,
1350
1366
  args: [{ selector: 'rtsee-payment-page', imports: [
1351
1367
  ReactiveFormsModule,
1352
- ProgressSpinner,
1353
1368
  PaymentProductSnippetComponent,
1354
- Button,
1355
- ], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n @if (messenger.payments && !planSelected) {\n @if (messenger.payments.products) {\n <div class=\"rtsee-payment-page-products\">\n @for (product of messenger.payments.products ; track product.id) {\n <rtsee-payment-product-snippet [product]=\"product\"\n (priceSelected)=\"selectPlan($event)\"\n ></rtsee-payment-product-snippet>\n }\n </div>\n } @else {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n }\n @if (loadInProgress) {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n <div class=\"rtsee-payment-page-footer\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n (click)=\"messenger.closePaymentPage()\"\n severity=\"warn\"\n ></p-button>\n </div>\n</div>\n" }]
1369
+ NgClass,
1370
+ ], template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n @if (messenger.payments && !planSelected) {\n @if (messenger.payments.products) {\n <div class=\"rtsee-payment-page-products\">\n @for (product of messenger.payments.products ; track product.id) {\n <rtsee-payment-product-snippet [product]=\"product\"\n [theme]=\"theme\"\n (priceSelected)=\"selectPlan($event)\"\n ></rtsee-payment-product-snippet>\n }\n </div>\n } @else {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n }\n @if (loadInProgress) {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n <div #checkoutContainer class=\"stripe-checkout-container\"></div>\n <div class=\"rtsee-payment-page-footer\">\n <button class=\"rtsee-payment-cancel-btn\"\n (click)=\"messenger.closePaymentPage()\"\n >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n </div>\n</div>\n" }]
1356
1371
  }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
1357
1372
  type: Input
1373
+ }], theme: [{
1374
+ type: Input
1358
1375
  }], checkoutContainer: [{
1359
1376
  type: ViewChild,
1360
1377
  args: ['checkoutContainer']
1361
1378
  }] } });
1362
1379
 
1363
1380
  class PaymentValidationPageComponent {
1364
- constructor(paymentsService) {
1381
+ constructor(paymentsService, router) {
1365
1382
  this.paymentsService = paymentsService;
1383
+ this.router = router;
1366
1384
  this.loadInProgress = false;
1385
+ this.theme = 'dark';
1367
1386
  this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
1368
1387
  }
1369
1388
  async init() {
@@ -1377,22 +1396,31 @@ class PaymentValidationPageComponent {
1377
1396
  }
1378
1397
  validatePayment() {
1379
1398
  this.paymentsService.getSession().subscribe((res) => {
1380
- this.messenger.closePaymentValidationPage();
1399
+ // this.messenger.closePaymentValidationPage();
1400
+ if (res.user && res.token) {
1401
+ localStorage.setItem(LS_TOKEN_LABEL, res.token);
1402
+ localStorage.setItem(LS_USER_LABEL, JSON.stringify(JSON.stringify(res.user)));
1403
+ setTimeout(() => {
1404
+ window.location.href = document.baseURI;
1405
+ }, 1000);
1406
+ }
1381
1407
  });
1382
1408
  }
1383
1409
  ngOnInit() {
1384
- if (!this.paymentsService.isInitialized && this.messenger.payments) {
1385
- this.paymentsService.init(this.messenger.payments);
1410
+ if (!this.paymentsService.isInitialized && this.messenger.payments && this.messenger.myPeer?.clientId) {
1411
+ this.paymentsService.init(this.messenger.payments, this.messenger.myPeer.clientId);
1386
1412
  }
1387
1413
  void this.init();
1388
1414
  }
1389
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, deps: [{ token: PaymentsService }], target: i0.ɵɵFactoryTarget.Component }); }
1390
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentValidationPageComponent, isStandalone: true, selector: "rtsee-payment-validation-page", inputs: { messenger: "messenger" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n @if (messenger.payments?.validationInProgress) {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n <div class=\"rtsee-payment-page-footer\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n (click)=\"messenger.closePaymentPage()\"\n severity=\"warn\"\n ></p-button>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { 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"] }] }); }
1415
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, deps: [{ token: PaymentsService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
1416
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentValidationPageComponent, isStandalone: true, selector: "rtsee-payment-validation-page", inputs: { messenger: "messenger", theme: "theme" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n @if (messenger.payments?.validationInProgress) {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n <div class=\"rtsee-payment-page-footer\">\n <button class=\"rtsee-payment-cancel-btn\"\n (click)=\"messenger.closePaymentPage()\"\n >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1391
1417
  }
1392
1418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, decorators: [{
1393
1419
  type: Component,
1394
- args: [{ selector: 'rtsee-payment-validation-page', imports: [ReactiveFormsModule, ProgressSpinner, Button], template: "<div class=\"rtsee-payment-page rtsee-form-container\">\n @if (messenger.payments?.validationInProgress) {\n <p-progress-spinner strokeWidth=\"8\"></p-progress-spinner>\n }\n <div class=\"rtsee-payment-page-footer\">\n <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]\"\n (click)=\"messenger.closePaymentPage()\"\n severity=\"warn\"\n ></p-button>\n </div>\n</div>\n" }]
1395
- }], ctorParameters: () => [{ type: PaymentsService }], propDecorators: { messenger: [{
1420
+ args: [{ selector: 'rtsee-payment-validation-page', imports: [ReactiveFormsModule, NgClass], template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n @if (messenger.payments?.validationInProgress) {\n <div class=\"rtsee-payment-spinner\">\n <div class=\"rtsee-payment-spinner-ring\"></div>\n </div>\n }\n <div class=\"rtsee-payment-page-footer\">\n <button class=\"rtsee-payment-cancel-btn\"\n (click)=\"messenger.closePaymentPage()\"\n >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n </div>\n</div>\n" }]
1421
+ }], ctorParameters: () => [{ type: PaymentsService }, { type: i2.Router }], propDecorators: { messenger: [{
1422
+ type: Input
1423
+ }], theme: [{
1396
1424
  type: Input
1397
1425
  }], checkoutContainer: [{
1398
1426
  type: ViewChild,
@@ -1414,8 +1442,8 @@ class ManagePlanComponent {
1414
1442
  if (!this.messenger.myPeer || !this.messenger.myPeer.plan) {
1415
1443
  throw new Error('No Plans found.');
1416
1444
  }
1417
- if (!this.paymentsService.isInitialized && this.messenger.payments) {
1418
- this.paymentsService.init(this.messenger.payments);
1445
+ if (!this.paymentsService.isInitialized && this.messenger.payments && this.messenger.myPeer?.clientId) {
1446
+ this.paymentsService.init(this.messenger.payments, this.messenger.myPeer?.clientId);
1419
1447
  }
1420
1448
  this.plan = this.messenger.myPeer.plan;
1421
1449
  this.activeFromFormated = dayjs(this.messenger.myPeer.plan.activeFrom).format('DD-MM-YYYY');
@@ -1436,7 +1464,7 @@ class MessengerComponent {
1436
1464
  this.messenger.loadChats();
1437
1465
  }
1438
1466
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1439
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n 'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n 'rtsee-messenger-folded': messenger.folded,\n 'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n @if (messenger.manageProfile) {\n <div class=\"rtsee-manage-profile\">\n <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n [messenger]=\"messenger\"\n ></rtsee-manage-profile>\n </div>\n }\n\n @if (messenger.isPaymentPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n </div>\n }\n\n @if (messenger.isPaymentValidationPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n </div>\n }\n\n @if (messenger.isManagePlanPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n </div>\n }\n\n <div class=\"rtsee-messenger-header-container\">\n <rtsee-messenger-header [messenger]=\"messenger\"\n ></rtsee-messenger-header>\n </div>\n <div class=\"rtsee-messenger-body-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolled)=\"onScroll()\"\n >\n @if (messenger.openedChat) {\n <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n } @else if (!messenger.openedChat) {\n <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n } @else if (messenger.openedProfile) {\n <rtsee-profile></rtsee-profile>\n }\n @if (messenger.loadingChatsInProgress) {\n <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n }\n </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
1467
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n 'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n 'rtsee-messenger-folded': messenger.folded,\n 'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n @if (messenger.manageProfile) {\n <div class=\"rtsee-manage-profile\">\n <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n [messenger]=\"messenger\"\n ></rtsee-manage-profile>\n </div>\n }\n\n @if (messenger.isPaymentPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n </div>\n }\n\n @if (messenger.isPaymentValidationPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n </div>\n }\n\n @if (messenger.isManagePlanPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n </div>\n }\n\n <div class=\"rtsee-messenger-header-container\">\n <rtsee-messenger-header [messenger]=\"messenger\"\n ></rtsee-messenger-header>\n </div>\n <div class=\"rtsee-messenger-body-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolled)=\"onScroll()\"\n >\n @if (messenger.openedChat) {\n <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n } @else if (!messenger.openedChat) {\n <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n } @else if (messenger.openedProfile) {\n <rtsee-profile></rtsee-profile>\n }\n @if (messenger.loadingChatsInProgress) {\n <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n }\n </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger", "theme"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger", "theme"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
1440
1468
  }
1441
1469
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
1442
1470
  type: Component,
@@ -1452,7 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
1452
1480
  PaymentPageComponent,
1453
1481
  PaymentValidationPageComponent,
1454
1482
  ManagePlanComponent,
1455
- ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n 'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n 'rtsee-messenger-folded': messenger.folded,\n 'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n @if (messenger.manageProfile) {\n <div class=\"rtsee-manage-profile\">\n <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n [messenger]=\"messenger\"\n ></rtsee-manage-profile>\n </div>\n }\n\n @if (messenger.isPaymentPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-page [messenger]=\"messenger\"></rtsee-payment-page>\n </div>\n }\n\n @if (messenger.isPaymentValidationPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-validation-page [messenger]=\"messenger\"></rtsee-payment-validation-page>\n </div>\n }\n\n @if (messenger.isManagePlanPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n </div>\n }\n\n <div class=\"rtsee-messenger-header-container\">\n <rtsee-messenger-header [messenger]=\"messenger\"\n ></rtsee-messenger-header>\n </div>\n <div class=\"rtsee-messenger-body-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolled)=\"onScroll()\"\n >\n @if (messenger.openedChat) {\n <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n } @else if (!messenger.openedChat) {\n <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n } @else if (messenger.openedProfile) {\n <rtsee-profile></rtsee-profile>\n }\n @if (messenger.loadingChatsInProgress) {\n <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n }\n </div>\n</div>\n\n\n" }]
1483
+ ], standalone: true, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n 'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n 'rtsee-messenger-folded': messenger.folded,\n 'rtsee-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n @if (messenger.manageProfile) {\n <div class=\"rtsee-manage-profile\">\n <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n [messenger]=\"messenger\"\n ></rtsee-manage-profile>\n </div>\n }\n\n @if (messenger.isPaymentPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n </div>\n }\n\n @if (messenger.isPaymentValidationPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n </div>\n }\n\n @if (messenger.isManagePlanPageOpened) {\n <div class=\"rtsee-payment-page-container\">\n <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n </div>\n }\n\n <div class=\"rtsee-messenger-header-container\">\n <rtsee-messenger-header [messenger]=\"messenger\"\n ></rtsee-messenger-header>\n </div>\n <div class=\"rtsee-messenger-body-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [scrollWindow]=\"false\"\n (scrolled)=\"onScroll()\"\n >\n @if (messenger.openedChat) {\n <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n } @else if (!messenger.openedChat) {\n <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n } @else if (messenger.openedProfile) {\n <rtsee-profile></rtsee-profile>\n }\n @if (messenger.loadingChatsInProgress) {\n <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n }\n </div>\n</div>\n\n\n" }]
1456
1484
  }], propDecorators: { messenger: [{
1457
1485
  type: Input
1458
1486
  }] } });
@@ -1631,11 +1659,11 @@ class PresentationHeaderComponent {
1631
1659
  this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
1632
1660
  }
1633
1661
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1634
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentations-header-title\">\n <div class=\"rtsee-presentations-header-title-overlay\"></div>\n <div class=\"rtsee-presentations-header-title-content\">\n <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n <p class=\"rtsee-presentations-header-title-subtitle\">\n <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n </p>\n </div>\n </div>\n }\n\n @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentation-room-block\">\n <rtsee-join-call [room]=\"presentation.activeRoom\"\n [presentation]=\"presentation\"\n ></rtsee-join-call>\n </div>\n }\n\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-details\">\n <p-chip [label]=\"presentation.activeStory.name\"\n [image]=\"presentation.activeStory.imageUrl || undefined\"\n class=\"rtsee-presentation-header-active-story-name\"\n alt=\"Story image\" />\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-settings\"\n (click)=\"presentation.settings.expand()\"\n >\n <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n </div>\n </div>\n }\n @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n (click)=\"presentation.toggleDashboardState()\"\n ></p-button>\n }\n</header>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
1662
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentations-header-title\">\n <div class=\"rtsee-presentations-header-title-overlay\"></div>\n <div class=\"rtsee-presentations-header-title-content\">\n <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n <p class=\"rtsee-presentations-header-title-subtitle\">\n <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n </p>\n </div>\n </div>\n }\n\n @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentation-room-block\">\n <rtsee-join-call [room]=\"presentation.activeRoom\"\n [presentation]=\"presentation\"\n ></rtsee-join-call>\n </div>\n }\n\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-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: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
1635
1663
  }
1636
1664
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
1637
1665
  type: Component,
1638
- args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentations-header-title\">\n <div class=\"rtsee-presentations-header-title-overlay\"></div>\n <div class=\"rtsee-presentations-header-title-content\">\n <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n <p class=\"rtsee-presentations-header-title-subtitle\">\n <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n </p>\n </div>\n </div>\n }\n\n @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentation-room-block\">\n <rtsee-join-call [room]=\"presentation.activeRoom\"\n [presentation]=\"presentation\"\n ></rtsee-join-call>\n </div>\n }\n\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-details\">\n <p-chip [label]=\"presentation.activeStory.name\"\n [image]=\"presentation.activeStory.imageUrl || undefined\"\n class=\"rtsee-presentation-header-active-story-name\"\n alt=\"Story image\" />\n </div>\n <div class=\"rtsee-presentation-header-active-story-info-settings\"\n (click)=\"presentation.settings.expand()\"\n >\n <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n </div>\n </div>\n }\n @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n (click)=\"presentation.toggleDashboardState()\"\n ></p-button>\n }\n</header>\n" }]
1666
+ args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n [ngClass]=\"{\n 'rtsee-presentation-header-convertable': presentation.activeStory,\n 'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n }\"\n>\n @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentations-header-title\">\n <div class=\"rtsee-presentations-header-title-overlay\"></div>\n <div class=\"rtsee-presentations-header-title-content\">\n <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n <p class=\"rtsee-presentations-header-title-subtitle\">\n <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n </p>\n </div>\n </div>\n }\n\n @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n <div class=\"rtsee-presentation-room-block\">\n <rtsee-join-call [room]=\"presentation.activeRoom\"\n [presentation]=\"presentation\"\n ></rtsee-join-call>\n </div>\n }\n\n @if (presentation.activeStory) {\n <div class=\"rtsee-presentation-header-active-story-info\">\n <div class=\"rtsee-presentation-header-active-story-info-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.disableActiveStory()\"\n >\n <i class=\"pi pi-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" }]
1639
1667
  }], propDecorators: { presentation: [{
1640
1668
  type: Input
1641
1669
  }] } });
@@ -1644,6 +1672,7 @@ class StoryThumbnailComponent {
1644
1672
  constructor() {
1645
1673
  this.progressPercent = 0;
1646
1674
  this.Math = Math;
1675
+ this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
1647
1676
  }
1648
1677
  ngOnInit() {
1649
1678
  if (this.story.preselectedSlideNumber) {
@@ -1651,11 +1680,11 @@ class StoryThumbnailComponent {
1651
1680
  }
1652
1681
  }
1653
1682
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1654
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story", presentation: "presentation" }, ngImport: i0, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\">\n <div class=\"rtsee-story-thumbnail-image\">\n <img [src]=\"story.imageUrl\"\n [alt]=\"story.name\"\n class=\"rtsee-story-thumbnail-image\"\n />\n </div>\n @if (story.preselectedSlideNumber) {\n <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n <div class=\"rtsee-story-thumbnail-progress-bar\">\n <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n [style.width]=\"progressPercent + '%'\"\n ></div>\n </div>\n </div>\n }\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n <div class=\"rtsee-story-thumbnail-body-meta\">\n @if (story.rating) {\n <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n }\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-thumbnail-time-container\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n </span>\n }\n @if (story.recommendedAge) {\n <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n }\n </div>\n </div>\n</a>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
1683
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story", presentation: "presentation" }, ngImport: i0, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\">\n <div class=\"rtsee-story-thumbnail-image\">\n <img [src]=\"story.imageUrl\"\n [alt]=\"story.name\"\n class=\"rtsee-story-thumbnail-image\"\n />\n </div>\n @if (story.preselectedSlideNumber) {\n <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n <div class=\"rtsee-story-thumbnail-progress-bar\">\n <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n [style.width]=\"progressPercent + '%'\"\n ></div>\n </div>\n </div>\n }\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n <div class=\"rtsee-story-thumbnail-body-meta\">\n @if (story.rating) {\n <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n }\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-thumbnail-time-container\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">\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.recommendedAge) {\n <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n }\n </div>\n </div>\n</a>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
1655
1684
  }
1656
1685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
1657
1686
  type: Component,
1658
- args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent, RouterLink], standalone: true, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\">\n <div class=\"rtsee-story-thumbnail-image\">\n <img [src]=\"story.imageUrl\"\n [alt]=\"story.name\"\n class=\"rtsee-story-thumbnail-image\"\n />\n </div>\n @if (story.preselectedSlideNumber) {\n <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n <div class=\"rtsee-story-thumbnail-progress-bar\">\n <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n [style.width]=\"progressPercent + '%'\"\n ></div>\n </div>\n </div>\n }\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n <div class=\"rtsee-story-thumbnail-body-meta\">\n @if (story.rating) {\n <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n }\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-thumbnail-time-container\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n </span>\n }\n @if (story.recommendedAge) {\n <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n }\n </div>\n </div>\n</a>\n" }]
1687
+ args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent, RouterLink], standalone: true, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" class=\"rtsee-story-thumbnail\">\n <div class=\"rtsee-story-thumbnail-image-container\">\n <div class=\"rtsee-story-thumbnail-image\">\n <img [src]=\"story.imageUrl\"\n [alt]=\"story.name\"\n class=\"rtsee-story-thumbnail-image\"\n />\n </div>\n @if (story.preselectedSlideNumber) {\n <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n <div class=\"rtsee-story-thumbnail-progress-bar\">\n <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n [style.width]=\"progressPercent + '%'\"\n ></div>\n </div>\n </div>\n }\n </div>\n <div class=\"rtsee-story-thumbnail-body-container\">\n <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n <div class=\"rtsee-story-thumbnail-body-meta\">\n @if (story.rating) {\n <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n }\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-thumbnail-time-container\">\n <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n <span class=\"rtsee-story-thumbnail-info-read-time\">\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.recommendedAge) {\n <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n }\n </div>\n </div>\n</a>\n" }]
1659
1688
  }], propDecorators: { story: [{
1660
1689
  type: Input
1661
1690
  }], presentation: [{
@@ -1668,6 +1697,7 @@ class SlideComponent {
1668
1697
  this.hideRewindControls = true;
1669
1698
  this.lastScrollPosition = 0;
1670
1699
  this.scrollingDown = false;
1700
+ this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
1671
1701
  }
1672
1702
  slideRewindClicked(forward) {
1673
1703
  if (forward) {
@@ -1718,12 +1748,14 @@ class SlideComponent {
1718
1748
  }
1719
1749
  }
1720
1750
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
1721
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { story: "story", slide: "slide", settings: "settings" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n label=\"Next Page\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1751
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideComponent, isStandalone: true, selector: "rtsee-slide", inputs: { presentation: "presentation", story: "story", slide: "slide", settings: "settings" }, ngImport: i0, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n [label]=\"presentation.labels[RTSeeTextLabelKeys.PREVIOUS_SLIDE_LABEL]\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n [label]=\"presentation.labels[RTSeeTextLabelKeys.NEXT_SLIDE_LABEL]\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n @if (\n presentation.messenger\n && story.activeSlideNumber === this.story.totalSlides\n && !presentation.myPeer.plan\n ) {\n <div class=\"rtsee-presentation-slide-payment\">\n <rtsee-payment-page [messenger]=\"presentation.messenger\" theme=\"light\"></rtsee-payment-page>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger", "theme"] }] }); }
1722
1752
  }
1723
1753
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideComponent, decorators: [{
1724
1754
  type: Component,
1725
- args: [{ selector: 'rtsee-slide', imports: [NgStyle, WidgetDirective, Button, NgClass], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n label=\"Previous Page\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n label=\"Next Page\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n </div>\n</div>\n" }]
1726
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { story: [{
1755
+ args: [{ selector: 'rtsee-slide', imports: [NgStyle, WidgetDirective, Button, NgClass, PaymentPageComponent], standalone: true, template: "<div class=\"rtsee-presentation-slide\" (scroll)=\"onScroll($event.target)\">\n @if (slide.widget) {\n <ng-template widgetHost></ng-template>\n }\n <div class=\"rtsee-presentation-slide-default\">\n @if (slide.imageUrl) {\n <div class=\"rtsee-presentation-slide-image-container\"\n [ngStyle]=\"{'background-image': 'url(' + slide.imageUrl + ')'}\"\n >\n </div>\n }\n <div class=\"rtsee-presentation-slide-text\">\n <p [style.font-size]=\"settings.fontSize + 'rem'\">{{slide.text}}</p>\n </div>\n <div class=\"rtsee-presentation-slide-controls\"\n [ngClass]=\"{'rtsee-presentation-slide-controls-hidden': hideRewindControls}\"\n >\n @if (story.activeSlideNumber !== 1) {\n <p-button class=\"slide-navigation-btn navigation-prev\"\n [label]=\"presentation.labels[RTSeeTextLabelKeys.PREVIOUS_SLIDE_LABEL]\"\n icon=\"pi pi-arrow-left\"\n [severity]=\"'secondary'\"\n [iconPos]=\"'left'\"\n (click)=\"slideRewindClicked(false)\"\n >\n </p-button>\n }\n @if (story.activeSlideNumber !== this.story.totalSlides) {\n <p-button class=\"slide-navigation-btn navigation-next\"\n [label]=\"presentation.labels[RTSeeTextLabelKeys.NEXT_SLIDE_LABEL]\"\n icon=\"pi pi-arrow-right\"\n [iconPos]=\"'right'\"\n (click)=\"slideRewindClicked(true)\"\n >\n </p-button>\n }\n </div>\n @if (\n presentation.messenger\n && story.activeSlideNumber === this.story.totalSlides\n && !presentation.myPeer.plan\n ) {\n <div class=\"rtsee-presentation-slide-payment\">\n <rtsee-payment-page [messenger]=\"presentation.messenger\" theme=\"light\"></rtsee-payment-page>\n </div>\n }\n </div>\n</div>\n" }]
1756
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { presentation: [{
1757
+ type: Input
1758
+ }], story: [{
1727
1759
  type: Input
1728
1760
  }], slide: [{
1729
1761
  type: Input
@@ -1746,15 +1778,17 @@ class StoryPlayerComponent {
1746
1778
  this.story.initSwiper(swiper);
1747
1779
  }
1748
1780
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1749
- 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" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n @for (slide of story.slides; track slide.id) {\n <div class=\"story-player-slide-container swiper-slide\"\n [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n >\n <rtsee-slide [slide]=\"slide\"\n [story]=\"story\"\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: ["story", "slide", "settings"] }] }); }
1781
+ 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) {\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"] }] }); }
1750
1782
  }
1751
1783
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
1752
1784
  type: Component,
1753
- 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) {\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 [settings]=\"settings\"\n ></rtsee-slide>\n </div>\n }\n </div>\n </div>\n</div>\n" }]
1785
+ 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) {\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" }]
1754
1786
  }], ctorParameters: () => [], propDecorators: { story: [{
1755
1787
  type: Input
1756
1788
  }], settings: [{
1757
1789
  type: Input
1790
+ }], presentation: [{
1791
+ type: Input
1758
1792
  }], swiperEl: [{
1759
1793
  type: ViewChild,
1760
1794
  args: ['swiperContainer']
@@ -2800,6 +2834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2800
2834
  class RaterComponent {
2801
2835
  constructor() {
2802
2836
  this.isEditing = false;
2837
+ this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
2803
2838
  }
2804
2839
  ngOnInit() {
2805
2840
  this.getRatingConfigurations()
@@ -2850,11 +2885,11 @@ class RaterComponent {
2850
2885
  return rates;
2851
2886
  }
2852
2887
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2853
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n @if (rater.userRateGroup && !isEditing) {\n <rtsee-rate-item\n [group]=\"rater.userRateGroup\"\n [rater]=\"rater\"\n [showActions]=\"true\"\n (edit)=\"startEdit()\"\n (delete)=\"deleteRate()\"\n ></rtsee-rate-item>\n } @else {\n <div class=\"rtsee-rater-user-header\">\n @if (rater.peer?.imageUrl) {\n <img\n class=\"rtsee-rater-avatar\"\n [src]=\"rater.peer?.imageUrl\"\n alt=\"User avatar\"\n />\n } @else {\n <div class=\"rtsee-rater-avatar-fallback\">\n {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n </div>\n }\n <div class=\"rtsee-rater-user-info\">\n <span class=\"rtsee-rater-user-name\">{{\n rater.peer?.name || \"Anonymous\"\n }}</span>\n <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n </div>\n </div>\n <hr class=\"rtsee-rater-divider\" />\n @for (config of rater.configsWithRates; track config.id) {\n <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n }\n <div class=\"rtsee-rater-actions\">\n @if (rater.userRateGroup) {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'success'\"\n [label]=\"'Update'\"\n type=\"submit\"\n class=\"rtsee-rater-btn-update rts-action-button\"\n >\n <span class=\"pi pi-check\"></span>\n </p-button>\n <p-button\n (click)=\"deleteRate()\"\n [severity]=\"'danger'\"\n [label]=\"'Delete'\"\n class=\"rtsee-rater-btn-delete rts-action-button\"\n >\n <span class=\"pi pi-trash\"></span>\n </p-button>\n } @else {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'primary'\"\n [label]=\"'Send'\"\n type=\"submit\"\n class=\"rtsee-rater-btn-send rts-action-button\"\n >\n <span class=\"pi pi-send\"></span>\n </p-button>\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2888
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n @if (rater.userRateGroup && !isEditing) {\n <rtsee-rate-item\n [group]=\"rater.userRateGroup\"\n [rater]=\"rater\"\n [showActions]=\"true\"\n (edit)=\"startEdit()\"\n (delete)=\"deleteRate()\"\n ></rtsee-rate-item>\n } @else {\n <div class=\"rtsee-rater-user-header\">\n @if (rater.peer?.imageUrl) {\n <img\n class=\"rtsee-rater-avatar\"\n [src]=\"rater.peer?.imageUrl\"\n alt=\"User avatar\"\n />\n } @else {\n <div class=\"rtsee-rater-avatar-fallback\">\n {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n </div>\n }\n <div class=\"rtsee-rater-user-info\">\n <span class=\"rtsee-rater-user-name\">{{\n rater.peer?.name || \"Anonymous\"\n }}</span>\n <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n </div>\n </div>\n <hr class=\"rtsee-rater-divider\" />\n @for (config of rater.configsWithRates; track config.id) {\n <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n }\n <div class=\"rtsee-rater-actions\">\n @if (rater.userRateGroup) {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'success'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n type=\"submit\"\n class=\"rtsee-rater-btn-update rts-action-button\"\n >\n <span class=\"pi pi-check\"></span>\n </p-button>\n <p-button\n (click)=\"deleteRate()\"\n [severity]=\"'danger'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n class=\"rtsee-rater-btn-delete rts-action-button\"\n >\n <span class=\"pi pi-trash\"></span>\n </p-button>\n } @else {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'primary'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n type=\"submit\"\n class=\"rtsee-rater-btn-send rts-action-button\"\n >\n <span class=\"pi pi-send\"></span>\n </p-button>\n }\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
2854
2889
  }
2855
2890
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, decorators: [{
2856
2891
  type: Component,
2857
- args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n @if (rater.userRateGroup && !isEditing) {\n <rtsee-rate-item\n [group]=\"rater.userRateGroup\"\n [rater]=\"rater\"\n [showActions]=\"true\"\n (edit)=\"startEdit()\"\n (delete)=\"deleteRate()\"\n ></rtsee-rate-item>\n } @else {\n <div class=\"rtsee-rater-user-header\">\n @if (rater.peer?.imageUrl) {\n <img\n class=\"rtsee-rater-avatar\"\n [src]=\"rater.peer?.imageUrl\"\n alt=\"User avatar\"\n />\n } @else {\n <div class=\"rtsee-rater-avatar-fallback\">\n {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n </div>\n }\n <div class=\"rtsee-rater-user-info\">\n <span class=\"rtsee-rater-user-name\">{{\n rater.peer?.name || \"Anonymous\"\n }}</span>\n <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n </div>\n </div>\n <hr class=\"rtsee-rater-divider\" />\n @for (config of rater.configsWithRates; track config.id) {\n <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n }\n <div class=\"rtsee-rater-actions\">\n @if (rater.userRateGroup) {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'success'\"\n [label]=\"'Update'\"\n type=\"submit\"\n class=\"rtsee-rater-btn-update rts-action-button\"\n >\n <span class=\"pi pi-check\"></span>\n </p-button>\n <p-button\n (click)=\"deleteRate()\"\n [severity]=\"'danger'\"\n [label]=\"'Delete'\"\n class=\"rtsee-rater-btn-delete rts-action-button\"\n >\n <span class=\"pi pi-trash\"></span>\n </p-button>\n } @else {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'primary'\"\n [label]=\"'Send'\"\n type=\"submit\"\n class=\"rtsee-rater-btn-send rts-action-button\"\n >\n <span class=\"pi pi-send\"></span>\n </p-button>\n }\n </div>\n }\n</div>\n" }]
2892
+ args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n @if (rater.userRateGroup && !isEditing) {\n <rtsee-rate-item\n [group]=\"rater.userRateGroup\"\n [rater]=\"rater\"\n [showActions]=\"true\"\n (edit)=\"startEdit()\"\n (delete)=\"deleteRate()\"\n ></rtsee-rate-item>\n } @else {\n <div class=\"rtsee-rater-user-header\">\n @if (rater.peer?.imageUrl) {\n <img\n class=\"rtsee-rater-avatar\"\n [src]=\"rater.peer?.imageUrl\"\n alt=\"User avatar\"\n />\n } @else {\n <div class=\"rtsee-rater-avatar-fallback\">\n {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n </div>\n }\n <div class=\"rtsee-rater-user-info\">\n <span class=\"rtsee-rater-user-name\">{{\n rater.peer?.name || \"Anonymous\"\n }}</span>\n <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n </div>\n </div>\n <hr class=\"rtsee-rater-divider\" />\n @for (config of rater.configsWithRates; track config.id) {\n <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n }\n <div class=\"rtsee-rater-actions\">\n @if (rater.userRateGroup) {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'success'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n type=\"submit\"\n class=\"rtsee-rater-btn-update rts-action-button\"\n >\n <span class=\"pi pi-check\"></span>\n </p-button>\n <p-button\n (click)=\"deleteRate()\"\n [severity]=\"'danger'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n class=\"rtsee-rater-btn-delete rts-action-button\"\n >\n <span class=\"pi pi-trash\"></span>\n </p-button>\n } @else {\n <p-button\n (click)=\"sendRate()\"\n [severity]=\"'primary'\"\n [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n type=\"submit\"\n class=\"rtsee-rater-btn-send rts-action-button\"\n >\n <span class=\"pi pi-send\"></span>\n </p-button>\n }\n </div>\n }\n</div>\n" }]
2858
2893
  }], propDecorators: { entity: [{
2859
2894
  type: Input
2860
2895
  }], rater: [{
@@ -2920,6 +2955,7 @@ class RtseeEntityPreviewComponent {
2920
2955
  void this.entity.reload();
2921
2956
  this.rater = new RTSeeRater({
2922
2957
  entityId: this.entity.id,
2958
+ messenger: this.messenger,
2923
2959
  entityConfigurationId: this.entity.configurationId,
2924
2960
  ...this.entity.getHandlerCommonOptions(),
2925
2961
  });
@@ -2941,6 +2977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2941
2977
  }] } });
2942
2978
 
2943
2979
  class StoryDetailsComponent {
2980
+ constructor() {
2981
+ this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
2982
+ this.Math = Math;
2983
+ }
2944
2984
  getStarArray(rating) {
2945
2985
  const stars = [];
2946
2986
  const val = rating || 0;
@@ -2958,11 +2998,11 @@ class StoryDetailsComponent {
2958
2998
  return stars;
2959
2999
  }
2960
3000
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2961
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n <section\n class=\"rtsee-story-details-cover\"\n [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n >\n <button\n class=\"rtsee-story-details-btn-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.closeStoryDetails()\"\n aria-label=\"Close\"\n >\n <span class=\"pi pi-times\"></span>\n </button>\n <div class=\"rtsee-story-details-cover-overlay\"></div>\n <div class=\"rtsee-story-details-cover-content\">\n <div class=\"rtsee-story-details-cover-badges\">\n @if (story.categories?.length) {\n @for (category of story.categories; track category.id) {\n <span class=\"rtsee-story-details-tag-pill\">\n {{ category.name }}\n </span>\n }\n }\n @if (story.tags?.length) {\n @for (tag of story.tags; track tag.id) {\n <span\n class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n >\n @if (tag.symbol) {\n <span class=\"symbol\">{{ tag.symbol }}</span>\n }\n {{ tag.name }}\n </span>\n }\n }\n </div>\n\n <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n <div class=\"rtsee-story-details-cover-meta\">\n @if (story.rating !== null) {\n <div class=\"rtsee-story-details-cover-rating\">\n <span class=\"rtsee-story-details-stars\">\n @for (star of getStarArray(story.rating); track $index) {\n <span\n class=\"rtsee-story-details-star\"\n [class.rtsee-story-details-star-full]=\"star === 'full'\"\n [class.rtsee-story-details-star-half]=\"star === 'half'\"\n [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n >\n @if (star === \"full\") {\n \u2605\n } @else if (star === \"half\") {\n \u2605\n } @else {\n \u2606\n }\n </span>\n }\n </span>\n <span class=\"rtsee-story-details-rating-number\">{{\n story.rating\n }}</span>\n @if (story.ratesCount !== null) {\n <span class=\"rtsee-story-details-rating-count\"\n >({{ story.ratesCount }} ratings)</span\n >\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-cover-info-chips\">\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <polyline points=\"12 6 12 12 16 14\" />\n </svg>\n {{ story.averageReadTime }} min\n </span>\n }\n @if (story.totalSlides) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n {{ story.totalSlides }} slides\n </span>\n }\n </div>\n </div>\n </div>\n </section>\n\n <!-- CONTENT AREA -->\n <div class=\"rtsee-story-details-content-wrapper\">\n <div class=\"rtsee-story-details-cover-actions\">\n <p-button\n (click)=\"presentation.setActiveStory(story)\"\n [severity]=\"'primary'\"\n [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n class=\"rtsee-story-details-start-reading rts-action-button\"\n >\n </p-button>\n </div>\n <div class=\"rtsee-story-details-content-grid\">\n <!-- Description Card -->\n <article class=\"rtsee-story-details-glass-card\">\n <div class=\"rtsee-story-details-glass-card-header\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <h2>About This Story</h2>\n </div>\n <p class=\"rtsee-story-details-glass-card-text\">\n {{ story.description }}\n </p>\n </article>\n </div>\n\n @if (messenger) {\n <rtsee-entity-preview\n [entity]=\"story\"\n [messenger]=\"messenger\"\n ></rtsee-entity-preview>\n }\n\n @if (story.categories?.length && false) {\n <div class=\"rtsee-story-details-categories\">\n @for (category of story.categories; track category.id) {\n <p-tag [value]=\"category.name\"></p-tag>\n }\n </div>\n }\n\n @if (story.tags?.length && false) {\n <div class=\"rtsee-story-details-labels\">\n @for (tag of story.tags; track tag.id) {\n <p-chip class=\"rtsee-story-details-label\">\n @if (tag.symbol) {\n <span class=\"rtsee-story-details-label-left\">{{\n tag.symbol\n }}</span>\n }\n <span class=\"rtsee-story-details-label-right\">{{\n tag.name\n }}</span>\n </p-chip>\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-description-history\"></div>\n @if (story.isPublished && false) {\n <div class=\"rtsee-story-details-feedback\">\n <p>feedback here</p>\n </div>\n } @else if (messenger && story.discussion && false) {\n <div class=\"rtsee-story-details-votes\">\n <p class=\"rtsee-story-details-comments-label\">Comments</p>\n <rtsee-chat\n [messenger]=\"messenger\"\n [chatData]=\"story.discussion\"\n ></rtsee-chat>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
3001
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n <section\n class=\"rtsee-story-details-cover\"\n [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n >\n <button\n class=\"rtsee-story-details-btn-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.closeStoryDetails()\"\n aria-label=\"Close\"\n >\n <span class=\"pi pi-times\"></span>\n </button>\n <div class=\"rtsee-story-details-cover-overlay\"></div>\n <div class=\"rtsee-story-details-cover-content\">\n <div class=\"rtsee-story-details-cover-badges\">\n @if (story.categories?.length) {\n @for (category of story.categories; track category.id) {\n <span class=\"rtsee-story-details-tag-pill\">\n {{ category.name }}\n </span>\n }\n }\n @if (story.tags?.length) {\n @for (tag of story.tags; track tag.id) {\n <span\n class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n >\n @if (tag.symbol) {\n <span class=\"symbol\">{{ tag.symbol }}</span>\n }\n {{ tag.name }}\n </span>\n }\n }\n </div>\n\n <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n <div class=\"rtsee-story-details-cover-meta\">\n @if (story.rating !== null) {\n <div class=\"rtsee-story-details-cover-rating\">\n <span class=\"rtsee-story-details-stars\">\n @for (star of getStarArray(story.rating); track $index) {\n <span\n class=\"rtsee-story-details-star\"\n [class.rtsee-story-details-star-full]=\"star === 'full'\"\n [class.rtsee-story-details-star-half]=\"star === 'half'\"\n [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n >\n @if (star === \"full\") {\n \u2605\n } @else if (star === \"half\") {\n \u2605\n } @else {\n \u2606\n }\n </span>\n }\n </span>\n <span class=\"rtsee-story-details-rating-number\">{{\n story.rating\n }}</span>\n @if (story.ratesCount !== null) {\n <span class=\"rtsee-story-details-rating-count\">\n <span>(</span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n <span>&nbsp;</span>\n <span>{{ story.ratesCount }}</span>\n <span>)</span>\n </span\n >\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-cover-info-chips\">\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <polyline points=\"12 6 12 12 16 14\" />\n </svg>\n <span>\n <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n <span>&nbsp;</span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n </span>\n </span>\n }\n @if (story.totalSlides) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n <span>&nbsp;</span>\n <span>{{ story.totalSlides }}</span>\n </span>\n </span>\n }\n </div>\n </div>\n </div>\n </section>\n\n <!-- CONTENT AREA -->\n <div class=\"rtsee-story-details-content-wrapper\">\n <div class=\"rtsee-story-details-cover-actions\">\n <p-button\n (click)=\"presentation.setActiveStory(story)\"\n [severity]=\"'primary'\"\n [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n class=\"rtsee-story-details-start-reading rts-action-button\"\n >\n </p-button>\n </div>\n <div class=\"rtsee-story-details-content-grid\">\n <!-- Description Card -->\n <article class=\"rtsee-story-details-glass-card\">\n <div class=\"rtsee-story-details-glass-card-header\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n </div>\n <p class=\"rtsee-story-details-glass-card-text\">\n {{ story.description }}\n </p>\n </article>\n </div>\n\n @if (messenger) {\n <rtsee-entity-preview\n [entity]=\"story\"\n [messenger]=\"messenger\"\n ></rtsee-entity-preview>\n }\n\n @if (story.categories?.length && false) {\n <div class=\"rtsee-story-details-categories\">\n @for (category of story.categories; track category.id) {\n <p-tag [value]=\"category.name\"></p-tag>\n }\n </div>\n }\n\n @if (story.tags?.length && false) {\n <div class=\"rtsee-story-details-labels\">\n @for (tag of story.tags; track tag.id) {\n <p-chip class=\"rtsee-story-details-label\">\n @if (tag.symbol) {\n <span class=\"rtsee-story-details-label-left\">{{\n tag.symbol\n }}</span>\n }\n <span class=\"rtsee-story-details-label-right\">{{\n tag.name\n }}</span>\n </p-chip>\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-description-history\"></div>\n @if (story.isPublished && false) {\n <div class=\"rtsee-story-details-feedback\">\n <p>feedback here</p>\n </div>\n } @else if (messenger && story.discussion && false) {\n <div class=\"rtsee-story-details-votes\">\n <p class=\"rtsee-story-details-comments-label\">Comments</p>\n <rtsee-chat\n [messenger]=\"messenger\"\n [chatData]=\"story.discussion\"\n ></rtsee-chat>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
2962
3002
  }
2963
3003
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
2964
3004
  type: Component,
2965
- args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink], template: "<div class=\"rtsee-story-details\">\n <section\n class=\"rtsee-story-details-cover\"\n [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n >\n <button\n class=\"rtsee-story-details-btn-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.closeStoryDetails()\"\n aria-label=\"Close\"\n >\n <span class=\"pi pi-times\"></span>\n </button>\n <div class=\"rtsee-story-details-cover-overlay\"></div>\n <div class=\"rtsee-story-details-cover-content\">\n <div class=\"rtsee-story-details-cover-badges\">\n @if (story.categories?.length) {\n @for (category of story.categories; track category.id) {\n <span class=\"rtsee-story-details-tag-pill\">\n {{ category.name }}\n </span>\n }\n }\n @if (story.tags?.length) {\n @for (tag of story.tags; track tag.id) {\n <span\n class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n >\n @if (tag.symbol) {\n <span class=\"symbol\">{{ tag.symbol }}</span>\n }\n {{ tag.name }}\n </span>\n }\n }\n </div>\n\n <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n <div class=\"rtsee-story-details-cover-meta\">\n @if (story.rating !== null) {\n <div class=\"rtsee-story-details-cover-rating\">\n <span class=\"rtsee-story-details-stars\">\n @for (star of getStarArray(story.rating); track $index) {\n <span\n class=\"rtsee-story-details-star\"\n [class.rtsee-story-details-star-full]=\"star === 'full'\"\n [class.rtsee-story-details-star-half]=\"star === 'half'\"\n [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n >\n @if (star === \"full\") {\n \u2605\n } @else if (star === \"half\") {\n \u2605\n } @else {\n \u2606\n }\n </span>\n }\n </span>\n <span class=\"rtsee-story-details-rating-number\">{{\n story.rating\n }}</span>\n @if (story.ratesCount !== null) {\n <span class=\"rtsee-story-details-rating-count\"\n >({{ story.ratesCount }} ratings)</span\n >\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-cover-info-chips\">\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <polyline points=\"12 6 12 12 16 14\" />\n </svg>\n {{ story.averageReadTime }} min\n </span>\n }\n @if (story.totalSlides) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n {{ story.totalSlides }} slides\n </span>\n }\n </div>\n </div>\n </div>\n </section>\n\n <!-- CONTENT AREA -->\n <div class=\"rtsee-story-details-content-wrapper\">\n <div class=\"rtsee-story-details-cover-actions\">\n <p-button\n (click)=\"presentation.setActiveStory(story)\"\n [severity]=\"'primary'\"\n [label]=\"story.preselectedSlideNumber ? 'Continue Reading' : 'Start Reading'\"\n class=\"rtsee-story-details-start-reading rts-action-button\"\n >\n </p-button>\n </div>\n <div class=\"rtsee-story-details-content-grid\">\n <!-- Description Card -->\n <article class=\"rtsee-story-details-glass-card\">\n <div class=\"rtsee-story-details-glass-card-header\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <h2>About This Story</h2>\n </div>\n <p class=\"rtsee-story-details-glass-card-text\">\n {{ story.description }}\n </p>\n </article>\n </div>\n\n @if (messenger) {\n <rtsee-entity-preview\n [entity]=\"story\"\n [messenger]=\"messenger\"\n ></rtsee-entity-preview>\n }\n\n @if (story.categories?.length && false) {\n <div class=\"rtsee-story-details-categories\">\n @for (category of story.categories; track category.id) {\n <p-tag [value]=\"category.name\"></p-tag>\n }\n </div>\n }\n\n @if (story.tags?.length && false) {\n <div class=\"rtsee-story-details-labels\">\n @for (tag of story.tags; track tag.id) {\n <p-chip class=\"rtsee-story-details-label\">\n @if (tag.symbol) {\n <span class=\"rtsee-story-details-label-left\">{{\n tag.symbol\n }}</span>\n }\n <span class=\"rtsee-story-details-label-right\">{{\n tag.name\n }}</span>\n </p-chip>\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-description-history\"></div>\n @if (story.isPublished && false) {\n <div class=\"rtsee-story-details-feedback\">\n <p>feedback here</p>\n </div>\n } @else if (messenger && story.discussion && false) {\n <div class=\"rtsee-story-details-votes\">\n <p class=\"rtsee-story-details-comments-label\">Comments</p>\n <rtsee-chat\n [messenger]=\"messenger\"\n [chatData]=\"story.discussion\"\n ></rtsee-chat>\n </div>\n }\n </div>\n</div>\n" }]
3005
+ args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink], template: "<div class=\"rtsee-story-details\">\n <section\n class=\"rtsee-story-details-cover\"\n [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n >\n <button\n class=\"rtsee-story-details-btn-close\"\n [routerLink]=\"[presentation.homePage]\"\n (click)=\"presentation.closeStoryDetails()\"\n aria-label=\"Close\"\n >\n <span class=\"pi pi-times\"></span>\n </button>\n <div class=\"rtsee-story-details-cover-overlay\"></div>\n <div class=\"rtsee-story-details-cover-content\">\n <div class=\"rtsee-story-details-cover-badges\">\n @if (story.categories?.length) {\n @for (category of story.categories; track category.id) {\n <span class=\"rtsee-story-details-tag-pill\">\n {{ category.name }}\n </span>\n }\n }\n @if (story.tags?.length) {\n @for (tag of story.tags; track tag.id) {\n <span\n class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n >\n @if (tag.symbol) {\n <span class=\"symbol\">{{ tag.symbol }}</span>\n }\n {{ tag.name }}\n </span>\n }\n }\n </div>\n\n <h1 class=\"rtsee-story-details-cover-title\">{{ story.name }}</h1>\n\n <div class=\"rtsee-story-details-cover-meta\">\n @if (story.rating !== null) {\n <div class=\"rtsee-story-details-cover-rating\">\n <span class=\"rtsee-story-details-stars\">\n @for (star of getStarArray(story.rating); track $index) {\n <span\n class=\"rtsee-story-details-star\"\n [class.rtsee-story-details-star-full]=\"star === 'full'\"\n [class.rtsee-story-details-star-half]=\"star === 'half'\"\n [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n >\n @if (star === \"full\") {\n \u2605\n } @else if (star === \"half\") {\n \u2605\n } @else {\n \u2606\n }\n </span>\n }\n </span>\n <span class=\"rtsee-story-details-rating-number\">{{\n story.rating\n }}</span>\n @if (story.ratesCount !== null) {\n <span class=\"rtsee-story-details-rating-count\">\n <span>(</span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n <span>&nbsp;</span>\n <span>{{ story.ratesCount }}</span>\n <span>)</span>\n </span\n >\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-cover-info-chips\">\n @if (story.averageReadTime) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <polyline points=\"12 6 12 12 16 14\" />\n </svg>\n <span>\n <span>{{ Math.ceil(story.averageReadTime / 60) }}</span>\n <span>&nbsp;</span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL] }}</span>\n </span>\n </span>\n }\n @if (story.totalSlides) {\n <span class=\"rtsee-story-details-info-chip\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <span>\n <span>{{ presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL] }}:</span>\n <span>&nbsp;</span>\n <span>{{ story.totalSlides }}</span>\n </span>\n </span>\n }\n </div>\n </div>\n </div>\n </section>\n\n <!-- CONTENT AREA -->\n <div class=\"rtsee-story-details-content-wrapper\">\n <div class=\"rtsee-story-details-cover-actions\">\n <p-button\n (click)=\"presentation.setActiveStory(story)\"\n [severity]=\"'primary'\"\n [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n class=\"rtsee-story-details-start-reading rts-action-button\"\n >\n </p-button>\n </div>\n <div class=\"rtsee-story-details-content-grid\">\n <!-- Description Card -->\n <article class=\"rtsee-story-details-glass-card\">\n <div class=\"rtsee-story-details-glass-card-header\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n </div>\n <p class=\"rtsee-story-details-glass-card-text\">\n {{ story.description }}\n </p>\n </article>\n </div>\n\n @if (messenger) {\n <rtsee-entity-preview\n [entity]=\"story\"\n [messenger]=\"messenger\"\n ></rtsee-entity-preview>\n }\n\n @if (story.categories?.length && false) {\n <div class=\"rtsee-story-details-categories\">\n @for (category of story.categories; track category.id) {\n <p-tag [value]=\"category.name\"></p-tag>\n }\n </div>\n }\n\n @if (story.tags?.length && false) {\n <div class=\"rtsee-story-details-labels\">\n @for (tag of story.tags; track tag.id) {\n <p-chip class=\"rtsee-story-details-label\">\n @if (tag.symbol) {\n <span class=\"rtsee-story-details-label-left\">{{\n tag.symbol\n }}</span>\n }\n <span class=\"rtsee-story-details-label-right\">{{\n tag.name\n }}</span>\n </p-chip>\n }\n </div>\n }\n\n <div class=\"rtsee-story-details-description-history\"></div>\n @if (story.isPublished && false) {\n <div class=\"rtsee-story-details-feedback\">\n <p>feedback here</p>\n </div>\n } @else if (messenger && story.discussion && false) {\n <div class=\"rtsee-story-details-votes\">\n <p class=\"rtsee-story-details-comments-label\">Comments</p>\n <rtsee-chat\n [messenger]=\"messenger\"\n [chatData]=\"story.discussion\"\n ></rtsee-chat>\n </div>\n }\n </div>\n</div>\n" }]
2966
3006
  }], propDecorators: { story: [{
2967
3007
  type: Input
2968
3008
  }], presentation: [{
@@ -2981,7 +3021,7 @@ class PresentationComponent {
2981
3021
  }
2982
3022
  }
2983
3023
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2984
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n <div class=\"rtsee-presentation-header-block\">\n <rtsee-presentation-header [presentation]=\"presentation\"\n ></rtsee-presentation-header>\n </div>\n\n @if (presentation.storyLoadInProgress) {\n <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n }\n\n @if(presentation.isDashboardOpen && presentation.dashboard) {\n <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n ></rtsee-presentations-dashboard>\n }\n\n @if (presentation.settings.isExpanded) {\n <rtsee-presentation-settings [settings]=\"presentation.settings\"\n [presentation]=\"presentation\"\n ></rtsee-presentation-settings>\n }\n\n @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n <div class=\"rtsee-presentation-categories-list\">\n @if (presentation.categoriesLoadInProgress) {\n <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n }\n\n @if (presentation.activeSessionsStories.length) {\n <div class=\"rtsee-presentation-category-header\">\n <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n </div>\n <div class=\"rtsee-presentation-stories-list\">\n @for (story of presentation.activeSessionsStories; track story.id) {\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n (click)=\"onStoryThumbnailClicked(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n [presentation]=\"presentation\"\n ></rtsee-story-thumbnail>\n </div>\n }\n </div>\n }\n\n @for (category of presentation.categories; track category.id) {\n <div class=\"rtsee-presentation-category-header\">\n <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n </div>\n <div class=\"rtsee-presentation-stories-list\">\n @for (story of category.stories; track story.id) {\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n (click)=\"onStoryThumbnailClicked(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n [presentation]=\"presentation\"\n ></rtsee-story-thumbnail>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (presentation.activeStory && !presentation.isDashboardOpen) {\n <div class=\"rtsee-presentation-story-viewer-container\">\n <rtsee-story-player [story]=\"presentation.activeStory\"\n [settings]=\"presentation.settings\"\n ></rtsee-story-player>\n </div>\n } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n [presentation]=\"presentation\"\n [messenger]=\"messenger\"\n ></rtsee-story-details>\n }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story", "presentation"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
3024
+ 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"] }] }); }
2985
3025
  }
2986
3026
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
2987
3027
  type: Component,
@@ -2994,7 +3034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2994
3034
  PresentationsDashboardComponent,
2995
3035
  PresentationSettingsComponent,
2996
3036
  StoryDetailsComponent,
2997
- ], standalone: true, template: "<div class=\"rtsee-presentation\">\n <div class=\"rtsee-presentation-header-block\">\n <rtsee-presentation-header [presentation]=\"presentation\"\n ></rtsee-presentation-header>\n </div>\n\n @if (presentation.storyLoadInProgress) {\n <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n }\n\n @if(presentation.isDashboardOpen && presentation.dashboard) {\n <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n ></rtsee-presentations-dashboard>\n }\n\n @if (presentation.settings.isExpanded) {\n <rtsee-presentation-settings [settings]=\"presentation.settings\"\n [presentation]=\"presentation\"\n ></rtsee-presentation-settings>\n }\n\n @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n <div class=\"rtsee-presentation-categories-list\">\n @if (presentation.categoriesLoadInProgress) {\n <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n }\n\n @if (presentation.activeSessionsStories.length) {\n <div class=\"rtsee-presentation-category-header\">\n <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n </div>\n <div class=\"rtsee-presentation-stories-list\">\n @for (story of presentation.activeSessionsStories; track story.id) {\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n (click)=\"onStoryThumbnailClicked(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n [presentation]=\"presentation\"\n ></rtsee-story-thumbnail>\n </div>\n }\n </div>\n }\n\n @for (category of presentation.categories; track category.id) {\n <div class=\"rtsee-presentation-category-header\">\n <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n </div>\n <div class=\"rtsee-presentation-stories-list\">\n @for (story of category.stories; track story.id) {\n <div class=\"rtsee-presentation-story-thumbnail-container\"\n (click)=\"onStoryThumbnailClicked(story)\"\n >\n <rtsee-story-thumbnail\n [story]=\"story\"\n [presentation]=\"presentation\"\n ></rtsee-story-thumbnail>\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (presentation.activeStory && !presentation.isDashboardOpen) {\n <div class=\"rtsee-presentation-story-viewer-container\">\n <rtsee-story-player [story]=\"presentation.activeStory\"\n [settings]=\"presentation.settings\"\n ></rtsee-story-player>\n </div>\n } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n [presentation]=\"presentation\"\n [messenger]=\"messenger\"\n ></rtsee-story-details>\n }\n</div>\n" }]
3037
+ ], 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" }]
2998
3038
  }], ctorParameters: () => [], propDecorators: { presentation: [{
2999
3039
  type: Input
3000
3040
  }], messenger: [{
@@ -3098,7 +3138,7 @@ class RTSeeContainerComponent {
3098
3138
  this.isSidenavFullScreen = rtseeRoute.fullScreen || false;
3099
3139
  }
3100
3140
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
3101
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n [ngClass]=\"{\n 'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n 'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n 'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n 'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n 'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n 'rtsee-shell-side-nav-is-content': isSidenavContent,\n 'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\n }\"\n>\n <div class=\"rtsee-nav-block\">\n <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n </div>\n\n <div class=\"rtsee-shell-panel\">\n <div class=\"rtsee-shell-panel-inner\">\n @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n <div class=\"rtsee-conference-container\">\n <rtsee-conference [rtSee]=\"rtsee.conference\"\n ></rtsee-conference>\n </div>\n }\n\n @if (rtsee.messenger) {\n <div class=\"rtsee-messenger-container\">\n <rtsee-messenger [messenger]=\"rtsee.messenger\"\n ></rtsee-messenger>\n </div>\n }\n\n @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n <div class=\"rtsee-events-dashboard-container\">\n <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n ></rtsee-events-dashboard>\n </div>\n }\n\n @if (rtsee.presentation && rtsee.presentation.isActive) {\n <div class=\"rtsee-presentation-container\">\n <rtsee-presentation [presentation]=\"rtsee.presentation\"\n [messenger]=\"rtsee.messenger\"\n ></rtsee-presentation>\n </div>\n }\n </div>\n </div>\n\n <div class=\"rtsee-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
3141
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n [ngClass]=\"{\n 'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n 'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n 'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n 'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n 'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n 'rtsee-shell-side-nav-is-content': isSidenavContent,\n 'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n 'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n 'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n }\"\n>\n <div class=\"rtsee-nav-block\">\n <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n </div>\n\n <div class=\"rtsee-shell-panel\">\n <div class=\"rtsee-shell-panel-inner\">\n @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n <div class=\"rtsee-conference-container\">\n <rtsee-conference [rtSee]=\"rtsee.conference\"\n ></rtsee-conference>\n </div>\n }\n\n @if (rtsee.messenger) {\n <div class=\"rtsee-messenger-container\">\n <rtsee-messenger [messenger]=\"rtsee.messenger\"\n ></rtsee-messenger>\n </div>\n }\n\n @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n <div class=\"rtsee-events-dashboard-container\">\n <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n ></rtsee-events-dashboard>\n </div>\n }\n\n @if (rtsee.presentation && rtsee.presentation.isActive) {\n <div class=\"rtsee-presentation-container\">\n <rtsee-presentation [presentation]=\"rtsee.presentation\"\n [messenger]=\"rtsee.messenger\"\n ></rtsee-presentation>\n </div>\n }\n </div>\n </div>\n\n <div class=\"rtsee-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
3102
3142
  }
3103
3143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
3104
3144
  type: Component,
@@ -3109,7 +3149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
3109
3149
  RtseeEventsDashboardComponent,
3110
3150
  PresentationComponent,
3111
3151
  RtseeNavComponent,
3112
- ], standalone: true, template: "<div class=\"rtsee-shell\"\n [ngClass]=\"{\n 'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n 'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n 'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n 'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n 'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n 'rtsee-shell-side-nav-is-content': isSidenavContent,\n 'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\n }\"\n>\n <div class=\"rtsee-nav-block\">\n <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n </div>\n\n <div class=\"rtsee-shell-panel\">\n <div class=\"rtsee-shell-panel-inner\">\n @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n <div class=\"rtsee-conference-container\">\n <rtsee-conference [rtSee]=\"rtsee.conference\"\n ></rtsee-conference>\n </div>\n }\n\n @if (rtsee.messenger) {\n <div class=\"rtsee-messenger-container\">\n <rtsee-messenger [messenger]=\"rtsee.messenger\"\n ></rtsee-messenger>\n </div>\n }\n\n @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n <div class=\"rtsee-events-dashboard-container\">\n <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n ></rtsee-events-dashboard>\n </div>\n }\n\n @if (rtsee.presentation && rtsee.presentation.isActive) {\n <div class=\"rtsee-presentation-container\">\n <rtsee-presentation [presentation]=\"rtsee.presentation\"\n [messenger]=\"rtsee.messenger\"\n ></rtsee-presentation>\n </div>\n }\n </div>\n </div>\n\n <div class=\"rtsee-content\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
3152
+ ], standalone: true, template: "<div class=\"rtsee-shell\"\n [ngClass]=\"{\n 'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n 'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n 'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n 'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n 'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n 'rtsee-shell-side-nav-is-content': isSidenavContent,\n 'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n 'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n 'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n }\"\n>\n <div class=\"rtsee-nav-block\">\n <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n </div>\n\n <div class=\"rtsee-shell-panel\">\n <div class=\"rtsee-shell-panel-inner\">\n @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n <div class=\"rtsee-conference-container\">\n <rtsee-conference [rtSee]=\"rtsee.conference\"\n ></rtsee-conference>\n </div>\n }\n\n @if (rtsee.messenger) {\n <div class=\"rtsee-messenger-container\">\n <rtsee-messenger [messenger]=\"rtsee.messenger\"\n ></rtsee-messenger>\n </div>\n }\n\n @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n <div class=\"rtsee-events-dashboard-container\">\n <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n ></rtsee-events-dashboard>\n </div>\n }\n\n @if (rtsee.presentation && rtsee.presentation.isActive) {\n <div class=\"rtsee-presentation-container\">\n <rtsee-presentation [presentation]=\"rtsee.presentation\"\n [messenger]=\"rtsee.messenger\"\n ></rtsee-presentation>\n </div>\n }\n </div>\n </div>\n\n <div class=\"rtsee-content\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
3113
3153
  }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { rtsee: [{
3114
3154
  type: Input
3115
3155
  }], navigationConfig: [{
@@ -4296,7 +4336,6 @@ class RTSeeModule {
4296
4336
  StoryPlayerComponent,
4297
4337
  SlideComponent,
4298
4338
  PresentationHeaderComponent,
4299
- PaymentProductSnippetComponent,
4300
4339
  CommonModule,
4301
4340
  ReactiveFormsModule,
4302
4341
  AutosizeModule,