\n
\n\n","export * from \"./menu-button.component\";\n","import { ChangeDetectionStrategy, Component, Input } from \"@angular/core\";\nimport { CarouselUserActionType } from \"@app-cfs/shared/models\";\nimport { CarouselService } from \"@app-cfs/shared/services\";\nimport { CfsMenuItemModel } from \"clearline-api\";\n\n@Component({\n selector: \"app-menu-button\",\n templateUrl: \"./menu-button.component.html\",\n styleUrls: [\"./menu-button.component.scss\"],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MenuButtonComponent {\n @Input() menuList: CfsMenuItemModel[] = [];\n\n constructor(private carouselService: CarouselService) {}\n\n onClick(): void {\n this.carouselService.sendUserAction({\n actionType: CarouselUserActionType.menu\n });\n }\n}\n","\n","import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from \"@angular/core\";\nimport { AccountConfigurationDto, CarouselUserActionType } from \"@app-cfs/shared/models\";\nimport { CarouselService, CurrentAccountService } from \"@app-cfs/shared/services\";\nimport * as Hammer from \"hammerjs\";\nimport { map, take } from \"rxjs/operators\";\n\n@Component({\n selector: \"app-secret-gesture\",\n templateUrl: \"./secret-gesture.component.html\",\n styleUrls: [\"./secret-gesture.component.scss\"]\n})\nexport class SecretGestureComponent implements OnInit, AfterViewInit {\n @ViewChild(\"gesture\", { static: true }) gestureElement: ElementRef | null = null;\n\n private destinationUrl = \"\";\n private isPincodeAvailable = false;\n\n constructor(private accountService: CurrentAccountService, private carouselService: CarouselService) {}\n\n ngOnInit(): void {\n this.accountService\n .getCurrentAccount()\n .pipe(\n take(1),\n map((account) => account.configuration)\n )\n .subscribe((configuration: AccountConfigurationDto) => {\n this.destinationUrl = configuration.urlsConfiguration?.secretGestureDestinationUrl || \"\";\n this.isPincodeAvailable = !!configuration.security?.isPinCodeEnabled;\n });\n }\n\n ngAfterViewInit(): void {\n const hammerManager = new Hammer.Manager(this.gestureElement?.nativeElement, {});\n const secretTap = new Hammer.Tap({\n event: \"secretTap\",\n taps: 5,\n interval: 2000,\n posThreshold: 100\n });\n\n hammerManager.add([secretTap]);\n hammerManager.on(\"secretTap\", this.onClick.bind(this));\n }\n\n onClick(): void {\n if (this.destinationUrl) {\n this.carouselService.sendUserAction({\n actionType: this.isPincodeAvailable ? CarouselUserActionType.pincode : CarouselUserActionType.gestureDestination,\n redirectUrl: this.destinationUrl,\n confirmActivity: true,\n trackActivity: true\n });\n }\n }\n}\n","\n","import { CommonModule } from \"@angular/common\";\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from \"@angular/core\";\nimport { FormControl, FormGroup, ReactiveFormsModule, Validators } from \"@angular/forms\";\nimport { MatDialog, MatDialogModule } from \"@angular/material/dialog\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { CarouselUserActionData, CarouselUserActionFeatureConfig } from \"@app-cfs/shared/models\";\nimport { TranslocoModule } from \"@ngneat/transloco\";\nimport { CfsMenuAction, CfsMenuItemData, PagesLoyaltyProgramCheckInPostDto, PagesWidgetQrCodeDataDto } from \"clearline-api\";\nimport {\n CheckInBalanceData,\n CheckInResult,\n ExternalCfsFeatureEvent,\n IframeMessageData,\n IframeMessageTypes,\n SendingOptionsComponent,\n SendingOptionsResult\n} from \"clearline-common\";\nimport { BehaviorSubject, Observable } from \"rxjs\";\nimport { filter, switchMap, take } from \"rxjs/operators\";\nimport { FormComponentsModule, QrCodeReaderModule } from \"ui-kit\";\nimport { QrCodeRendererComponent } from \"../qr-code-renderer\";\nimport { CheckInAppService } from \"./check-in-app.service\";\nimport { CheckInBalanceComponent } from \"./check-in-balance/check-in-balance.component\";\n\nenum ScreenMode {\n Balance = \"Balance\",\n JoinWith = \"JoinWith\",\n Main = \"Main\"\n}\n\n@Component({\n selector: \"app-check-in-app\",\n templateUrl: \"./check-in-app.component.html\",\n styleUrls: [\"./check-in-app.component.scss\"],\n standalone: true,\n imports: [\n CommonModule,\n MatDialogModule,\n TranslocoModule,\n ReactiveFormsModule,\n QrCodeRendererComponent,\n FormComponentsModule,\n QrCodeReaderModule,\n CheckInBalanceComponent\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [CheckInAppService]\n})\nexport class CheckInAppComponent implements OnInit {\n @Input() set data(data: CarouselUserActionData) {\n const { featureConfig, ...actionData } = data;\n\n this.actionData = actionData;\n this.featureConfig = featureConfig;\n }\n\n protected balanceData: CheckInBalanceData | null = null;\n protected qrCodeData$: Observable\n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n\n\n \n \n\n\n \n \n
\n","import { Injectable } from \"@angular/core\";\nimport { ToastService } from \"@app-cfs/shared/components\";\nimport { TranslocoService } from \"@ngneat/transloco\";\nimport {\n CfsMenuItemData,\n PagesLoyaltyProgramCheckInGetDto,\n PagesLoyaltyProgramCheckInPostDto,\n PagesLoyaltyProgramService,\n PagesWidgetCompletePostDto,\n PagesWidgetQrCodeDataDto,\n PagesWidgetService\n} from \"clearline-api\";\nimport { CheckInResult, ExternalCfsFeatureEvent, IframePostMessageService, SendingOptionsResult, WidgetType } from \"clearline-common\";\nimport { alertApiError } from \"core-kit\";\nimport { Observable, of } from \"rxjs\";\nimport { catchError, map, tap } from \"rxjs/operators\";\n\n@Injectable()\nexport class CheckInAppService {\n constructor(\n private widgetApi: PagesWidgetService,\n private toaster: ToastService,\n private transloco: TranslocoService,\n private loyaltyProgramApi: PagesLoyaltyProgramService,\n private postMessageService: IframePostMessageService\n ) {}\n\n getQrCodeData(locationId: number): Observable\n
\n\n {{ t('title') }}
\n\n{{ t('description') }}
\n \n
\n \n \n
\n\n \n \n\n \n {{ t('buttonRegisterNow') }}\n \n
\n \n
\n \n
\n\n \n\n \n \n
\n\n
\n","import { Injectable } from \"@angular/core\";\nimport { ToastService } from \"@app-cfs/shared/components/app-toaster\";\nimport { TranslocoService } from \"@ngneat/transloco\";\nimport { PagesLoyaltyProgramApplyRewardPostDto, PagesLoyaltyProgramCheckInGetDto, PagesLoyaltyProgramService } from \"clearline-api\";\nimport {\n BalanceInfo,\n loyaltyConfigurationToMembershipCardView,\n MembershipCardView,\n RewardCardView,\n rewardsDtoToRewardCardList\n} from \"clearline-common\";\nimport { alertApiError } from \"core-kit\";\nimport { Observable } from \"rxjs\";\nimport { tap } from \"rxjs/operators\";\n\n@Injectable()\nexport class CheckInBalanceService {\n constructor(private api: PagesLoyaltyProgramService, private transloco: TranslocoService, private toaster: ToastService) {}\n\n applyReward(payload: PagesLoyaltyProgramApplyRewardPostDto): Observable\n \n \n \n
\n\n \n
\n\n {{ balance.fullName }}
\n\n \n {{ balance.phoneNumber }}\n
\n \n \n {{ balance.email }}\n
\n \n \n {{ balance.uniqueCode }}\n
\n \n ![\"Card]()
\n
\n\n \n\n
\n 0\">\n {{ t('availableRewards') }}\n \n \n\n \n \n
\n\n {{ t('membershipCardType') }}:\n {{ card.cardType }}\n
\n \n {{ t('descriptionLabel') }}:\n {{ card.description }}\n
\n \n {{ t('discountLabel') }}:\n {{ card.discount }}%\n
\n \n \n \n
\n","import { Injectable } from \"@angular/core\";\nimport { ToastService } from \"@app-cfs/shared/components\";\nimport { TranslocoService } from \"@ngneat/transloco\";\nimport { CfsMenuItemData, PagesWidgetCompletePostDto, PagesWidgetQrCodeDataDto, PagesWidgetService } from \"clearline-api\";\nimport { SendingOptionsResult, WidgetType } from \"clearline-common\";\nimport { alertApiError } from \"core-kit\";\nimport { Observable } from \"rxjs\";\nimport { tap } from \"rxjs/operators\";\n\n@Injectable()\nexport class MarketingAppsService {\n constructor(private widgetApi: PagesWidgetService, private toaster: ToastService, private transloco: TranslocoService) {}\n\n getQrCodeData({ widgetType, locationId }: CfsMenuItemData): Observable\n
\n\n {{ data.widgetName }}
\n\n
\n \n
\n\n \n \n \n \n \n \n \n \n
\n `,\n styles: [\n `\n :host {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n left: 0;\n top: 0;\n }\n .placeholder {\n width: 100%;\n height: 100%;\n background: #eee;\n border-radius: 10px;\n padding: 10px;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n }\n .placeholder > * {\n margin-bottom: 10px;\n }\n .placeholder > *:last-child {\n margin-bottom: 0;\n }\n .image {\n flex-grow: 1;\n width: 100%;\n background: #ccc;\n border-radius: 10px;\n }\n .text {\n height: 20px;\n background: #ccc;\n border-radius: 5px;\n }\n .text:nth-child(1),\n .text:nth-child(2) {\n width: 100%;\n }\n .text:nth-child(3) {\n width: 25%;\n }\n .text:nth-child(4) {\n width: 70%;\n }\n .button {\n height: 45px;\n width: 100%;\n background: #bbb;\n border-radius: 10px;\n }\n .shimmer::before {\n content: \"\";\n position: absolute;\n width: 200%;\n height: 100%;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%);\n animation: shimmer 1.5s infinite;\n }\n @keyframes shimmer {\n 0% {\n transform: translateX(-100%) translateY(0);\n }\n 100% {\n transform: translateX(100%) translateY(0);\n }\n }\n `\n ]\n})\nexport class QrCodePlaceholderComponent {}\n","import { AsyncPipe, NgIf } from \"@angular/common\";\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnInit, ViewChild } from \"@angular/core\";\nimport { DomSanitizer, SafeHtml } from \"@angular/platform-browser\";\nimport { SettingsHandlerService } from \"@app-cfs/shared/services\";\nimport { TranslocoModule } from \"@ngneat/transloco\";\nimport { PagesWidgetQrCodeDataDto, QrCodeConfiguration } from \"clearline-api\";\nimport QRCodeStyling from \"qr-code-styling\";\nimport { BehaviorSubject } from \"rxjs\";\nimport { computeQrCodeLayoutScale, MAPP_QR_CODE_LAYOUT, QrCodeLayoutSizeType } from \"./constants\";\nimport { QrCodePlaceholderComponent } from \"./qr-code-placeholder.component\";\n\n/** This component is an implementation of the `wwwroot/qrcode-template/normal.html`. */\n@Component({\n selector: \"app-qr-code-renderer\",\n templateUrl: \"./qr-code-renderer.component.html\",\n standalone: true,\n imports: [NgIf, AsyncPipe, TranslocoModule, QrCodePlaceholderComponent],\n styleUrls: [\"./qr-code-renderer.component.scss\"],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class QrCodeRendererComponent implements OnInit {\n @Input() templateSizeType: QrCodeLayoutSizeType = \"large\";\n\n @Input() set data(data: PagesWidgetQrCodeDataDto) {\n this.qrData = data;\n }\n\n @ViewChild(\"qrCodeCanvas\", { static: true }) qrCodeCanvas!: ElementRef;\n @ViewChild(\"qrCodeImg\", { static: true }) qrCodeImg!: ElementRef;\n\n protected qr: QrCodeConfiguration = this.settingsHandler.qrCodeConfiguration;\n protected isQrReady$ = new BehaviorSubject\n
\n\n \n \n
\n\n \n
\n\n {{ secondaryText }}
\n \n
\n \n
\n \n
\n \n ![\"QR]()
\n
\n \n
\n\n \n\n {{ t(\"text\") }}\n\n \n {{ secondsLeft$ | async }} {{ t(\"seconds\") }}\n \n
\n \n
\n","import { Component } from \"@angular/core\";\nimport { SpinnerService } from \"./spinner.service\";\n\n@Component({\n selector: \"app-spinner\",\n templateUrl: \"./spinner.component.html\",\n styleUrls: [\"./spinner.component.scss\"]\n})\nexport class SpinnerComponent {\n isVisible$ = this.spinnerService.isVisible$;\n\n constructor(private spinnerService: SpinnerService) {}\n}\n","import { Injectable } from \"@angular/core\";\nimport { BehaviorSubject } from \"rxjs\";\n\n@Injectable({\n providedIn: \"root\"\n})\nexport class SpinnerService {\n private isVisibleSrc = new BehaviorSubject\n
\n\n \n
\n \n
`;\n\n const noTemplatesGeneratedBody = `\n ![\"\"](\"assets/images/splash-screen.svg\")
\n\n \n
\n \n\n \n \n
`;\n\n const generatedBody = contentWithLoading ? loadingGeneratedBody : noTemplatesGeneratedBody;\n\n return {\n id: 0,\n templateId: 0,\n name: \"Splash Screen\",\n globalTemplateType: GlobalTemplateType.Custom,\n enabled: true,\n generatedBody,\n isSplashScreen: true\n };\n }\n}\n","import { Injectable } from \"@angular/core\";\nimport { CashRegister, CashRegisterPairingStatusPostDto, CashRegisterStatusPostDto } from \"cfs-communication-pack\";\nimport { ApiService } from \"clearline-api\";\nimport { Observable } from \"rxjs\";\n\n@Injectable({ providedIn: \"root\" })\nexport class CashRegisterService {\n serviceUrl = \"cashregister\";\n\n constructor(private http: ApiService) {}\n\n getById(id: number): Observable\n ![\"\"](\"assets/images/empty-carousel.svg\")
\n\n
\n \n\n ${this.translateService.translate(\"splashScreen.noTemplates\")}
\n\n
\n","import { Component } from \"@angular/core\";\n\n@Component({\n selector: \"app-terminal-pairing-steps\",\n templateUrl: \"./terminal-pairing-steps.component.html\",\n styleUrls: [\"./terminal-pairing-steps.component.scss\"]\n})\nexport class TerminalPairingStepsComponent {\n readonly steps = [1, 2, 3];\n}\n","export * from \"./terminal-status.component\";\n","import { Component, Input } from \"@angular/core\";\nimport { CashRegisterUtilsService, CFSStatusInfo, ConnectionStatus, NetworkStatus } from \"cfs-communication-pack\";\n\n@Component({\n selector: \"app-terminal-status\",\n templateUrl: \"./terminal-status.component.html\",\n styleUrls: [\"./terminal-status.component.scss\"]\n})\nexport class TerminalStatusComponent {\n constructor(private cashRegisterUtils: CashRegisterUtilsService) {}\n\n private _status?: ConnectionStatus;\n private _networkStatus?: NetworkStatus;\n\n statusInfo: CFSStatusInfo | null = null;\n\n @Input() set status(status: ConnectionStatus) {\n this._status = status;\n\n if (this._networkStatus || this._status === ConnectionStatus.UNAVAILABLE) {\n this.statusInfo = this.cashRegisterUtils.getCashregisterStatusLabel(this._status, this._networkStatus);\n }\n }\n\n @Input() set networkStatus(networkStatus: NetworkStatus) {\n this._networkStatus = networkStatus;\n\n if (this._networkStatus || this._status === ConnectionStatus.UNAVAILABLE) {\n this.statusInfo = this.cashRegisterUtils.getCashregisterStatusLabel(this._status, this._networkStatus);\n }\n }\n}\n","\n
\n\n
\n {{ tr(\"steps.stepTitle\" + i) }}
\n {{ tr(\"steps.stepBody\" + i) }}
\n \n {{ statusInfo.label | transloco }}\n
\n","import { ConnectionStatus, ContentProviderType, NetworkStatus } from \"cfs-communication-pack\";\n\nexport interface CashRegister {\n id?: number;\n name?: string;\n cfsCode?: string;\n enabled?: boolean;\n terminalId?: string;\n locationId?: number;\n displayTypeId?: number;\n paringStatus?: CashRegisterParingStatuses;\n networkStatus?: CashRegisterNetworkStatuses;\n pairedBy?: number;\n pairedOn?: string;\n createdBy?: number;\n createdOn?: string;\n modifiedBy?: number;\n modifiedOn?: string;\n lastOnlineDate?: string;\n createdByName?: string;\n modifiedByName?: string;\n pairedByName?: string;\n externalConnection: CashRegisterExternalConnectionDto;\n}\n\nexport interface CashRegisterBaseConnectionInfo {\n cfsCode: string;\n id: number;\n locationId: number;\n}\n\nexport interface ClientCashRegister extends CashRegister {\n locationName?: string;\n clientStatus?: ConnectionStatus;\n clientNetworkStatus?: NetworkStatus;\n pairingDate?: number;\n displayType?: string;\n contentProviders?: CashRegisterContentProviderDto[];\n\n // todo: remove or rename, it is temporary names to use for dev env only:\n backEndStatus?: ConnectionStatus;\n backEndNetworkStatus?: NetworkStatus;\n backEndPairingDate?: number;\n backEndLastOnlineDate?: number;\n}\n\nexport interface ClientCashRegisterBackEndStatuses {\n backEndStatus?: ConnectionStatus;\n backEndNetworkStatus?: NetworkStatus;\n backEndPairingDate?: number;\n backEndLastOnlineDate?: number;\n}\n\nexport interface CashRegisterStatusGetResponseDto {\n id: number;\n pairedBy?: number; // Paired by user id\n pairedOn?: string;\n pairedByName?: string;\n paringStatus: CashRegisterParingStatuses;\n networkStatus: CashRegisterNetworkStatuses;\n lastOnlineDate?: string;\n}\n\nexport interface CashRegisterStatusPostDto {\n status: CashRegisterStatuses;\n message?: string;\n}\n\nexport interface CashRegisterPairingStatusPostDto {\n paringStatus: CashRegisterParingStatuses;\n message?: string;\n}\n\nexport interface CashRegisterStatusGetInfo {\n id: number;\n postDto: CashRegisterStatusPostDto | CashRegisterPairingStatusPostDto;\n}\n\nexport enum CashRegisterParingStatuses {\n Paired = \"Paired\",\n NotPaired = \"NotPaired\"\n}\nexport enum CashRegisterNetworkStatuses {\n Online = \"Online\",\n Offline = \"Offline\",\n Unavailable = \"Unavailable\"\n}\n\nexport enum CashRegisterStatuses {\n Online = \"Online\",\n CfsRefresh = \"CfsRefresh\",\n CarouselRefresh = \"CarouselRefresh\",\n Reset = \"Reset\",\n Error = \"Error\"\n}\n\nexport enum CfsStatusError {\n FailedReset = \"FailedReset\",\n FailedCfsRefresh = \"FailedCfsRefresh\"\n}\n\nexport interface CashRegisterExternalConnectionDto {\n contentProviders?: CashRegisterContentProviderDto[];\n}\n\nexport interface CashRegisterContentProviderDto {\n title?: string;\n providerType: ContentProviderType;\n contentUrl?: string;\n pairedBy: number;\n pairedByName?: string;\n pairedOn: string;\n}\n\nexport interface ContentProviderConnectCashRegisterRequestDto {\n contentUrl: string;\n contentProviderCode?: string;\n}\n\nexport interface ContentProviderConnectCashRegisterResponseDto {\n hasError: boolean;\n error: string;\n}\n\nexport interface CashRegisterExtendedGetDto extends CashRegister {}\n","import { CashRegister } from \"./cashregister\";\n\nexport enum ConnectionStatus {\n PAIRED = \"paired\",\n NOT_PAIRED = \"not_paired\",\n UNAVAILABLE = \"unavailable\"\n}\n\nexport enum NetworkStatus {\n ONLINE = \"online\",\n OFFLINE = \"offline\"\n}\n\nexport interface CFSConnectionModalResult {\n closingReason: \"confirm\" | \"dismiss\";\n updatedCashRegister?: CashRegister;\n oldCode?: string;\n state?: CFSPairingState;\n}\n\nexport interface CFSStatuses {\n status: ConnectionStatus;\n networkStatus?: NetworkStatus;\n pairingDate?: number;\n}\n\nexport interface CFSStatusInfo {\n label: string;\n type: \"successStatus\" | \"alertStatus\" | \"inertStatus\";\n}\n\nexport interface CFSConnectionMessage {\n type?: CFSMessageType;\n pinCode?: string;\n status?: ConnectionStatus;\n connectedCode?: string;\n generateQrCodeInfo?: CFSQrCodeInfo;\n hideQrCodeInfo?: DisplayQrCodeInfo;\n qrCodeScannedInfo?: DisplayQrCodeInfo;\n scanQrCodeInfo?: CFSScanQrCodeInfo;\n settings?: CFSConnectionSettings;\n templateInfo?: ShowCfsTemplateInfo;\n accountTemplateId?: number;\n result?: any;\n noEffect?: boolean;\n showWidgetSettings?: ShowWidgetSettings\n
\n\n","export * from \"./cfs-menu-items.component\";\n","import { CommonModule } from \"@angular/common\";\nimport { Component, EventEmitter, HostListener, Input, Output, ViewChild } from \"@angular/core\";\nimport { DomSanitizer, SafeHtml } from \"@angular/platform-browser\";\nimport { BehaviorSubject, of } from \"rxjs\";\nimport { CfsTemplateBaseComponent, CFSTemplateType, Template, TemplateAnimationType, TemplatePreviewOptions, TemplateProperties } from \"../../../models\";\nimport { DigitalAssetGetDto, DigitalAssetScreenSize, DigitalAssetType, MediaContentDto } from \"clearline-api\";\nimport { HtmlTemplateComponent } from \"../html-template\";\nimport { LottieTemplateComponent } from \"../lottie-template\";\nimport { defaultCfsTemplateMediaConfig } from \"../cfs-template.config\";\nimport { VideoTemplateComponent } from \"../video-template\";\nimport { getDigitalAssetScreenSize, getDisplayTimeByTemplate, getIsMediaScreenSizeResponsive } from \"../cfs-template.utils\";\nimport { take } from \"rxjs/operators\";\nimport { TemplatePreviewService } from \"../template-preview.service\";\nimport { GeneratedHtmlTemplateComponent } from \"../generated-html-template\";\n\ninterface SetTemplateTypeParams {\n parsedTemplateType?: CFSTemplateType | null;\n mediaContent?: MediaContentDto | null;\n digitalAsset?: DigitalAssetGetDto | null;\n}\n\n@Component({\n selector: \"lib-cfs-template-preview\",\n templateUrl: \"./cfs-template-preview.component.html\",\n styleUrls: [\"./cfs-template-preview.component.scss\"],\n standalone: true,\n imports: [CommonModule, LottieTemplateComponent, HtmlTemplateComponent, VideoTemplateComponent, GeneratedHtmlTemplateComponent]\n})\nexport class CfsTemplatePreviewComponent implements CfsTemplateBaseComponent {\n @Input() index = 0;\n @Input() animationType: TemplateAnimationType = TemplateAnimationType.Animated;\n @Input() fullScreen = true;\n @Input() isPrintView = false;\n @Input() responsive = false;\n @Input() isLowResolutionScreen = false;\n @Input() fullMediaConfig = defaultCfsTemplateMediaConfig;\n\n @Input() set screenSize(screenSize: DigitalAssetScreenSize) {\n this.setScreenSize(screenSize || DigitalAssetScreenSize.Full);\n }\n\n @Input() set template(template: Template | null) {\n if (template) {\n const { generatedBody, templateProperties } = template;\n\n const parsedTemplateType: CFSTemplateType | null = this.getParsedTemplateType(generatedBody as string);\n this.templateProperties = templateProperties || null;\n this.generatedBody = generatedBody ? this.sanitizer.bypassSecurityTrustHtml(generatedBody as string) : \"\";\n this.displayTime = getDisplayTimeByTemplate(template);\n\n if (parsedTemplateType === CFSTemplateType.Lottie) {\n const previewOptions$ = template?.previewOptions ? of(template.previewOptions) : this.templatePreviewService.getLottieOptions(template);\n\n previewOptions$.pipe(take(1)).subscribe((previewOptions: TemplatePreviewOptions | null) => {\n const { mediaContent } = previewOptions || {};\n this.isScreenSizeResponsive = getIsMediaScreenSizeResponsive(mediaContent);\n\n this.setTemplateType({ parsedTemplateType, mediaContent });\n this.previewOptions$.next(previewOptions);\n this.setScreenSize();\n });\n } else {\n this.setTemplateType({ parsedTemplateType });\n }\n }\n }\n\n @Input() set options(options: TemplatePreviewOptions | null) {\n if (options) {\n const { mediaContent, htmlBody, digitalAsset } = options;\n const parsedTemplateType: CFSTemplateType | null = this.getParsedTemplateType(htmlBody || \"\");\n\n this.setTemplateType({ parsedTemplateType, mediaContent, digitalAsset });\n this.previewOptions$.next(options);\n\n if (htmlBody) {\n this.generatedBody = this.sanitizer.bypassSecurityTrustHtml(htmlBody);\n }\n }\n }\n\n @Output() printReady = new EventEmitter();\n @Output() ready = new EventEmitter();\n\n @ViewChild(\"currentTemplate\") currentTemplateComponent?: CfsTemplateBaseComponent;\n\n readonly DigitalAssetType = DigitalAssetType;\n readonly CFSTemplateType = CFSTemplateType;\n\n templateType: CFSTemplateType | null = null;\n templateProperties: TemplateProperties | null = null;\n templateScreenSize: DigitalAssetScreenSize = DigitalAssetScreenSize.Full;\n displayTime = 0;\n generatedBody: SafeHtml = \"\";\n\n previewOptions$ = new BehaviorSubject\n
\n\n \n {{ menuInfo.brand.name }} {{ t(\"title\") }}\n
\n\n{{ t(\"subtitle\") }}
\n\n \n\n
\n \n \n
\n \n ![\"icon\"]()
\n \n
\n \n \n \n
\n \n\n\n = 0\">Index: {{ index }}; \n Template name: {{ title }}; \n Content duration: {{ contentDuration / 1000 }}; \n Display Time: {{ displayTime / 1000 }}; \n
\n","import { CfsTemplateMediaConfig } from \"clearline-common\";\n\nexport const defaultCfsTemplateMediaConfig: CfsTemplateMediaConfig = {\n muted: true,\n autoplay: false,\n loop: false,\n fullscreen: false,\n coverParent: false\n};\n\nexport const mediaReadyDelay = 1000;\n","import { CfsQrCodeContentAsset, HtmlTemplateOptions, QrCodeContentSettings, ResponsiveAssetsInfo, Template, TemplateCustomDestinationDto, TemplateDestinationDto, TemplatePreviewOptions, TemplateProperties, UrlContentSettings } from \"../../models\";\nimport { DigitalAssetGetDto, DigitalAssetScreenSize, KeyValueAsset, KeyValueDto, MediaContentDto } from \"clearline-api\";\n\nenum LetterWidthCategory {\n narrow = \"narrow\",\n medium = \"medium\",\n wide = \"wide\"\n}\n\nexport const getTemplateDestination = (\n triggerDestination?: TemplateCustomDestinationDto,\n defaultDestination?: TemplateDestinationDto\n): TemplateDestinationDto | undefined => {\n if (!triggerDestination || triggerDestination.useDefaultDestination) return defaultDestination;\n return triggerDestination.customDestination;\n};\n\nexport const getContentDurationByTemplate = (template: Template): number => {\n const templateProperties: TemplateProperties | null = template?.templateProperties || null;\n\n return Number((templateProperties as UrlContentSettings)?.ContentDuration) ?? 0;\n};\n\nexport const getDisplayTimeByTemplate = (template: Template): number => {\n return template?.configuration?.options?.displayTime ?? 0;\n};\n\nexport const getDigitalAssetScreenSize = (isLowResolutionScreen: boolean, withTablet = false): DigitalAssetScreenSize => {\n const smallScreen = 768;\n const mobileScreen = 576;\n let updatedScreenSize: DigitalAssetScreenSize = DigitalAssetScreenSize.Full;\n\n if (!isLowResolutionScreen) {\n if (window.innerWidth <= smallScreen) {\n if (withTablet) {\n updatedScreenSize = window.innerWidth <= mobileScreen ? DigitalAssetScreenSize.Compact : DigitalAssetScreenSize.Tablet;\n } else {\n updatedScreenSize = DigitalAssetScreenSize.Compact;\n }\n } else if (window.innerHeight >= window.innerWidth) {\n updatedScreenSize = DigitalAssetScreenSize.Vertical;\n }\n }\n\n return updatedScreenSize;\n};\n\nexport const getIsMediaScreenSizeResponsive = (mediaContent?: MediaContentDto): boolean => {\n return (\n mediaContent?.digitalAssets?.some(\n (item: DigitalAssetGetDto) => item.configuration?.screenSize && item.configuration.screenSize !== DigitalAssetScreenSize.Full\n ) || false\n );\n};\n\nexport const getLottieColorByHex = (hex: string): string => {\n const rgb = hexToRgb(hex);\n\n return rgb ? getLottieColorByRgb(rgb) : \"\";\n};\n\nexport const parseHtmlQrCodeContentAsset = (allParams: KeyValueAsset): HtmlTemplateOptions => {\n const htmlTemplateOptions: HtmlTemplateOptions = {};\n\n Object.keys(CfsQrCodeContentAsset).forEach((key) => {\n const assetKey = CfsQrCodeContentAsset[key as keyof typeof CfsQrCodeContentAsset];\n const value = allParams[assetKey];\n const formattedKey = key.replace(/\"/g, \"\") as keyof HtmlTemplateOptions;\n\n switch (formattedKey) {\n case \"backgroundColor\":\n case \"buttonTextColor\":\n case \"buttonBackgroundColor\":\n case \"subtitleColor\":\n case \"qrActionColor\":\n case \"qrCodePrimaryColor\":\n case \"qrCodeSecondaryColor\":\n case \"qrCodeBackground\":\n case \"titleColor\":\n htmlTemplateOptions[formattedKey] = lottieColorToHex(value);\n break;\n case \"buttonWidth\":\n htmlTemplateOptions[formattedKey] = +value;\n break;\n case \"backgroundImage\":\n case \"logoUrl\":\n case \"imageUrl\":\n case \"qrCodeUrl\":\n case \"buttonText\":\n case \"qrActionText\":\n case \"subtitleText\":\n case \"titleText\":\n htmlTemplateOptions[formattedKey] = value;\n }\n });\n\n return htmlTemplateOptions;\n};\n\nexport const getResponsiveAssetsInfo = (options: TemplatePreviewOptions): ResponsiveAssetsInfo => {\n const { digitalAsset, mediaContent } = options;\n\n if (mediaContent) {\n const digitalAssets = mediaContent.digitalAssets;\n\n return Object.values(DigitalAssetScreenSize).reduce((acc: ResponsiveAssetsInfo, size: string) => {\n const itemDigitalAsset: DigitalAssetGetDto | undefined = digitalAssets.find((item: DigitalAssetGetDto) => {\n const itemScreenSize = item.configuration?.screenSize;\n return itemScreenSize === size || (!itemScreenSize && size === DigitalAssetScreenSize.Full);\n });\n\n return {\n ...acc,\n [size]: itemDigitalAsset\n };\n }, {} as ResponsiveAssetsInfo);\n } else {\n return {\n [DigitalAssetScreenSize.Full]: digitalAsset,\n [DigitalAssetScreenSize.Compact]: null,\n [DigitalAssetScreenSize.Vertical]: null\n };\n }\n};\n\nexport const parseQrCodeSettingValue = (key: keyof QrCodeContentSettings, value: string): QrCodeContentSettings[keyof QrCodeContentSettings] => {\n switch (key) {\n case \"backgroundColor\":\n case \"buttonTextColor\":\n case \"buttonBackgroundColor\":\n case \"subtitleColor\":\n case \"qrActionColor\":\n case \"qrCodePrimaryColor\":\n case \"qrCodeSecondaryColor\":\n case \"qrCodeBackground\":\n case \"titleColor\": {\n return rgbToHex(JSON.parse(value));\n }\n case \"qrCodeHasFrame\": {\n return value === \"true\";\n }\n case \"buttonWidth\":\n case \"qrCodeLogoType\": {\n return +value;\n }\n default:\n return value;\n }\n};\n\nexport const getAllKeyValueAssetParams = (options?: TemplatePreviewOptions, digitalDefaultParams: KeyValueDto[] = []): KeyValueAsset => {\n const { defaultParameters, mediaContent } = options || {};\n\n const assetParameters: KeyValueAsset = getKeyValueAsset(digitalDefaultParams);\n const mediaParams: KeyValueAsset = getKeyValueAsset(mediaContent?.configuration.defaultParameters);\n\n return { ...assetParameters, ...mediaParams, ...defaultParameters };\n};\n\nexport const parseQrCodeContentAsset = (templateDefaultParameters: KeyValueAsset): QrCodeContentSettings => {\n if (!templateDefaultParameters) return {};\n\n const cfsQrCodeContentAssetEnumKeyByValue: { [key: string]: keyof typeof CfsQrCodeContentAsset } = {};\n\n for (const key in CfsQrCodeContentAsset) {\n if (CfsQrCodeContentAsset.hasOwnProperty(key)) {\n const assetKey = key as keyof typeof CfsQrCodeContentAsset;\n cfsQrCodeContentAssetEnumKeyByValue[CfsQrCodeContentAsset[assetKey]] = assetKey;\n }\n }\n\n return Object.keys(templateDefaultParameters).reduce((acc: QrCodeContentSettings, key: string) => {\n const enumKey = cfsQrCodeContentAssetEnumKeyByValue[key];\n if (enumKey) {\n (acc[enumKey] as QrCodeContentSettings[keyof QrCodeContentSettings]) = parseQrCodeSettingValue(\n enumKey,\n templateDefaultParameters[key]\n );\n }\n return acc;\n }, {} as QrCodeContentSettings);\n};\n\nexport const getLottieTextWidth = (text: string): number => {\n let width = 0;\n\n for (let i = 0; i < text.length; i++) {\n width += getLetterWidth(text[i]);\n }\n\n return width;\n};\n\nexport const getQrCodeContentAsset = (qrCodeContentSettings: QrCodeContentSettings): KeyValueAsset => {\n if (!qrCodeContentSettings) return {};\n\n return Object.keys(qrCodeContentSettings).reduce((acc: KeyValueAsset, key: string) => {\n const assetKey = key as keyof typeof CfsQrCodeContentAsset;\n\n if (CfsQrCodeContentAsset[assetKey]) {\n acc[CfsQrCodeContentAsset[assetKey]] = serializeQrCodeSettingValue(assetKey, qrCodeContentSettings[assetKey]);\n }\n\n return acc;\n }, {} as KeyValueAsset);\n};\n\nexport const capitalizeFirstLetter = (value: string): string => {\n if (value && typeof value === \"string\") {\n const firstLetter: string = value.slice(0, 1).toUpperCase();\n const restValue: string = value.slice(1);\n\n return `${firstLetter}${restValue}`;\n }\n\n return \"\";\n};\n\n\n// Private functions:\n\nconst getLottieColorListByHex = (hex: string): string => {\n return `[${getLottieColorByHex(hex)}]`;\n};\n\nconst hexToRgb = (hex: any) => {\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, (m: any, r: any, g: any, b: any) => r + r + g + g + b + b);\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n }\n : null;\n};\n\nconst getLottieColorByRgb = (rgb: any): string => {\n return Object.keys(rgb)\n .map((key: string) => {\n const rgbItem = rgb[key];\n const lottieColorPart = rgbItem ? rgbItem / 255 : 0;\n return `${lottieColorPart}`;\n })\n .join(\",\");\n};\n\nconst rgbToHex = (rgbArray: [number, number, number], maxColorValue = 255): string => {\n const hexComponents: string[] = rgbArray.map((value) => {\n const hex = Math.round(maxColorValue * value).toString(16);\n return hex.length === 1 ? `0${hex}` : hex;\n });\n\n return hexComponents?.length ? `#${hexComponents.join(\"\")}` : \"\";\n};\n\nconst lottieColorToRgb = (lottieColor: [number, number, number]): { r: number; g: number; b: number } => {\n return {\n r: Math.round(lottieColor[0] * 255),\n g: Math.round(lottieColor[1] * 255),\n b: Math.round(lottieColor[2] * 255)\n };\n};\n\nconst lottieColorToHex = (lottieColorString: string): string => {\n const lottieColor = parseLottieColor(lottieColorString);\n\n if (!lottieColor.length) {\n return \"\";\n }\n\n const rgb = lottieColorToRgb(lottieColor);\n\n return rgbToHex([rgb.r, rgb.g, rgb.b], 1);\n};\n\nconst getKeyValueAsset = (params: KeyValueDto[] = []): KeyValueAsset => {\n return params?.reduce((acc: KeyValueAsset, item: KeyValueDto) => {\n const { key, value } = item;\n acc[key] = value;\n\n return acc;\n }, {} as KeyValueAsset);\n};\n\nconst parseLottieColor = (colorString: string): [number, number, number] | [] => {\n return colorString ? (JSON.parse(colorString) as [number, number, number]) : [];\n};\n\nconst serializeQrCodeSettingValue = (key: keyof QrCodeContentSettings, value: QrCodeContentSettings[keyof QrCodeContentSettings]): string => {\n switch (key) {\n case \"backgroundColor\":\n case \"buttonTextColor\":\n case \"buttonBackgroundColor\":\n case \"subtitleColor\":\n case \"qrActionColor\":\n case \"qrCodePrimaryColor\":\n case \"qrCodeSecondaryColor\":\n case \"qrCodeBackground\":\n case \"titleColor\": {\n return getLottieColorListByHex(value as string);\n }\n case \"qrCodeHasFrame\":\n case \"qrCodeLogoType\": {\n return value ? value.toString() : \"\";\n }\n case \"buttonWidth\": {\n return value || value === 0 ? `${+value}` : \"\";\n }\n default:\n return value as string;\n }\n};\n\nconst getLetterWidth = (char: string): number => {\n const letterWidthCategory = getLetterWideGroup(char);\n\n switch (letterWidthCategory) {\n case LetterWidthCategory.narrow:\n return 4;\n case LetterWidthCategory.medium:\n return 10;\n case LetterWidthCategory.wide:\n return 15.9;\n }\n};\n\nconst getLetterWideGroup = (char: string): LetterWidthCategory => {\n switch (char) {\n case \"!\":\n case \"f\":\n case \"i\":\n case \"j\":\n case \"l\":\n case \"r\":\n case \"t\":\n case \"I\":\n case \"J\": {\n return LetterWidthCategory.narrow;\n }\n case \"%\":\n case \"m\":\n case \"w\":\n case \"M\":\n case \"W\": {\n return LetterWidthCategory.wide;\n }\n default: {\n return LetterWidthCategory.medium;\n }\n }\n};\n","import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { SafeHtml } from \"@angular/platform-browser\";\nimport { BehaviorSubject } from \"rxjs\";\nimport { CfsTemplateBaseComponent, TemplateAnimationType } from \"clearline-common\";\n\n@Component({\n selector: \"lib-generated-html-template\",\n standalone: true,\n imports: [CommonModule],\n templateUrl: \"./generated-html-template.component.html\",\n styleUrls: [\"./generated-html-template.component.scss\"],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GeneratedHtmlTemplateComponent implements CfsTemplateBaseComponent, OnInit, AfterViewInit {\n @Input() generatedBody: SafeHtml = \"\";\n @Input() isPrintView = false;\n @Input() animationType = TemplateAnimationType.Animated;\n\n @Output() ready = new EventEmitter();\n\n protected animated$ = new BehaviorSubject\n
\n \n
\n\n \n
\n