ngx-wapp-components 2.1.19 → 2.1.21

package/fesm2015/ngx-wapp-components.mjs

@@ -9562,6 +9562,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     }] }];
     } });
 
+const ICON_NUMBER = '<svg width="20" height="20" viewBox="0 0 20 20" fill="#C4C4C4" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM12.873 5C12.5614 5 12.2927 5.21984 12.2314 5.52539L11.9082 7.14355H9.24023L9.5127 5.78223C9.59353 5.37761 9.28371 5.00007 8.87109 5C8.55944 5 8.29076 5.21985 8.22949 5.52539L7.90625 7.14355H6.38184C5.98722 7.14355 5.66711 7.46381 5.66699 7.8584C5.66699 8.25309 5.98715 8.57324 6.38184 8.57324H7.62012L7.04883 11.4316H5.71484C5.32017 11.4316 5.00002 11.7518 5 12.1465C5 12.5412 5.32016 12.8613 5.71484 12.8613H6.7627L6.49023 14.2227C6.4093 14.6274 6.71912 15.0049 7.13184 15.0049C7.44348 15.0048 7.71226 14.7851 7.77344 14.4795L8.09668 12.8613H10.7646L10.4922 14.2227C10.4112 14.6274 10.7211 15.0049 11.1338 15.0049C11.4455 15.0048 11.7142 14.7851 11.7754 14.4795L12.0986 12.8613H13.623C14.0177 12.8613 14.3379 12.5412 14.3379 12.1465C14.3379 11.7518 14.0177 11.4316 13.623 11.4316H12.3848L12.9561 8.57324H14.29C14.6847 8.57324 15.0049 8.25309 15.0049 7.8584C15.0048 7.46381 14.6847 7.14355 14.29 7.14355H13.2422L13.5146 5.78223C13.5955 5.37757 13.2857 5 12.873 5ZM11.6221 8.57324L11.0508 11.4316H8.38281L8.9541 8.57324H11.6221Z" fill="#C4C4C4"/></svg>';
+const PARTICIPATE_AGAIN = '<svg width="27" height="20" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.2725 11.3643C20.2076 9.43363 23.3446 9.47452 25.2812 11.4111C26.5036 12.6339 26.9684 14.3304 26.6641 15.9004C26.4846 16.8256 26.0377 17.7091 25.3242 18.4229C23.7148 20.0322 21.2682 20.2752 19.3789 19.1973C18.8998 18.9235 18.7336 18.3134 19.0068 17.834C19.2805 17.3545 19.8905 17.1867 20.3701 17.46C21.5128 18.1119 22.9663 17.9515 23.9092 17.0088C24.3307 16.5871 24.5948 16.0684 24.7012 15.5205C24.8829 14.5837 24.6057 13.5653 23.8672 12.8262C22.6912 11.6502 20.8204 11.6489 19.6865 12.7783L20.9512 14.0439C21.254 14.3469 21.0601 14.8658 20.6328 14.8965L16.4473 15.1963C16.1436 15.2181 15.8905 14.9658 15.9121 14.6621L16.2129 10.4766C16.2436 10.0494 16.7625 9.8555 17.0654 10.1582L18.2725 11.3643ZM21.75 0C22.3467 0 22.9189 0.237223 23.3408 0.65918C23.7628 1.08114 24 1.65326 24 2.25V4.5C24 4.69891 23.9209 4.88962 23.7803 5.03027C23.6396 5.17093 23.4489 5.25 23.25 5.25C22.8389 5.25 22.4405 5.36431 22.0938 5.57227C21.7356 5.52624 21.3707 5.5 21 5.5C19.3735 5.5 17.8543 5.95766 16.5625 6.75H16.5V6.79004C14.0985 8.29209 12.5 10.9586 12.5 14C12.5 14.3384 12.5221 14.6719 12.5605 15H2.25C1.65326 15 1.08114 14.7628 0.65918 14.3408C0.237223 13.9189 0 13.3467 0 12.75V10.5C0 10.3011 0.0790745 10.1104 0.219727 9.96973C0.360379 9.82907 0.551088 9.75 0.75 9.75C1.34674 9.75 1.91886 9.51278 2.34082 9.09082C2.76278 8.66886 3 8.09674 3 7.5C3 6.90326 2.76278 6.33114 2.34082 5.90918C1.91886 5.48722 1.34674 5.25 0.75 5.25C0.551088 5.25 0.360379 5.17093 0.219727 5.03027C0.0790743 4.88962 0 4.69891 0 4.5V2.25C0 1.65326 0.237223 1.08114 0.65918 0.65918C1.08114 0.237223 1.65326 0 2.25 0H21.75ZM6 14.25H7.5V12.75H6V14.25ZM6 11.25H7.5V9.75H6V11.25ZM6 8.25H7.5V6.75H6V8.25ZM6 5.25H7.5V3.75H6V5.25ZM16.5 5.25H18V3.75H16.5V5.25ZM6 2.25H7.5V0.75H6V2.25ZM16.5 2.25H18V0.75H16.5V2.25Z" fill="white"/></svg>';
+const PARTICIPATE = '<svg width="24" height="15" viewBox="0 0 24 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 2.25C0 1.65326 0.237053 1.08097 0.65901 0.65901C1.08097 0.237053 1.65326 0 2.25 0H21.75C22.3467 0 22.919 0.237053 23.341 0.65901C23.7629 1.08097 24 1.65326 24 2.25V4.5C24 4.69891 23.921 4.88968 23.7803 5.03033C23.6397 5.17098 23.4489 5.25 23.25 5.25C22.6533 5.25 22.081 5.48705 21.659 5.90901C21.2371 6.33097 21 6.90326 21 7.5C21 8.09674 21.2371 8.66903 21.659 9.09099C22.081 9.51295 22.6533 9.75 23.25 9.75C23.4489 9.75 23.6397 9.82902 23.7803 9.96967C23.921 10.1103 24 10.3011 24 10.5V12.75C24 13.3467 23.7629 13.919 23.341 14.341C22.919 14.7629 22.3467 15 21.75 15H2.25C1.65326 15 1.08097 14.7629 0.65901 14.341C0.237053 13.919 0 13.3467 0 12.75L0 10.5C0 10.3011 0.0790176 10.1103 0.21967 9.96967C0.360322 9.82902 0.551088 9.75 0.75 9.75C1.34674 9.75 1.91903 9.51295 2.34099 9.09099C2.76295 8.66903 3 8.09674 3 7.5C3 6.90326 2.76295 6.33097 2.34099 5.90901C1.91903 5.48705 1.34674 5.25 0.75 5.25C0.551088 5.25 0.360322 5.17098 0.21967 5.03033C0.0790176 4.88968 0 4.69891 0 4.5V2.25ZM6 0.75V2.25H7.5V0.75H6ZM7.5 5.25V3.75H6V5.25H7.5ZM18 5.25V3.75H16.5V5.25H18ZM16.5 2.25H18V0.75H16.5V2.25ZM7.5 6.75H6V8.25H7.5V6.75ZM18 8.25V6.75H16.5V8.25H18ZM7.5 9.75H6V11.25H7.5V9.75ZM18 11.25V9.75H16.5V11.25H18ZM6 12.75V14.25H7.5V12.75H6ZM16.5 14.25H18V12.75H16.5V14.25Z" fill="white"/></svg>';
+const CALENDAR = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 216.374 216.374" style="enable-background:new 0 0 216.374 216.374;" xml:space="preserve"><g><path d="M207.374,30.135h-25.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9v16.703H52.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9v16.703H9c-4.971,0-9,4.029-9,9v163.808c0,4.971,4.029,9,9,9h198.374c4.971,0,9-4.029,9-9V39.135C216.374,34.164,212.345,30.135,207.374,30.135z M198.374,48.135v19.997H18V48.135H198.374z M18,193.942V86.132h180.374v107.811H18z"/><path d="M140.288,102.718L89.82,153.186l-13.734-13.734c-3.515-3.514-9.213-3.514-12.728,0c-3.515,3.515-3.514,9.214,0,12.729l20.098,20.098c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l56.832-56.831c3.515-3.515,3.515-9.214,0-12.729C149.502,99.205,143.803,99.204,140.288,102.718z"/></g></svg>';
+
 class MaterialModalService {
     constructor(dialog, breakpointObserver, isIframe) {
         this.dialog = dialog;
@@ -9936,10 +9941,10 @@ class WappMaterialServiceViewComponent {
         this.isDraw = false;
         this.hasParticipations = false;
         this.disabledParticipationsModal = false;
-        this.matIconRegistry.addSvgIcon("calendar", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/wappIcons/mat-calendar.svg"));
-        this.matIconRegistry.addSvgIcon("number", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-number.svg"));
-        this.matIconRegistry.addSvgIcon("participate", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-participate.svg"));
-        this.matIconRegistry.addSvgIcon("participate-again", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-participate-again.svg"));
+        this.matIconRegistry.addSvgIconLiteral("calendar", this.domSanitizer.bypassSecurityTrustHtml(CALENDAR));
+        this.matIconRegistry.addSvgIconLiteral("number", this.domSanitizer.bypassSecurityTrustHtml(ICON_NUMBER));
+        this.matIconRegistry.addSvgIconLiteral("participate", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE));
+        this.matIconRegistry.addSvgIconLiteral("participate-again", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE_AGAIN));
     }
     ngOnInit() {
     }
@@ -10064,10 +10069,10 @@ class WappMaterialServiceViewComponent {
     }
 }
 WappMaterialServiceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceViewComponent, deps: [{ token: i1$7.MatIconRegistry }, { token: i2$8.DomSanitizer }, { token: MaterialModalService }], target: i0.ɵɵFactoryTarget.Component });
-WappMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceViewComponent, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService" }, ngImport: i0, template: "<wapp-main-title title=\"{{wappingService.tile3}}\" *ngIf=\"wappingService\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div class=\"service-image-title\"\r\n            *ngIf=\"wappingService.tile1\"\r\n            [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n            [style.color]=\"wappingService.tile1ForegroundColor\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile1}}</div>\r\n        <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            class=\"service-tile\"\r\n            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n            [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n            [style.color]=\"wappingService.tile2ForegroundColor\"\r\n            *ngIf=\"wappingService.tile2\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n        </div>\r\n        \r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! \" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\"  >\r\n            {{ wappingServicesTranslations.scheduledLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.sendLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.receivedLabel }}\r\n        </div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">El ganador se decidir\u00E1 el </span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate | date:'dd/MM/yyyy' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">Tus n\u00FAmeros</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <!--service info-->\r\n    <div *ngIf=\"wappingService.tile3 || wappingService.tile4\" class=\"service-info-container\" fxLayout=\"column\">\r\n        <div class=\"service-description-container\">\r\n        <!--tile 3-->\r\n        <div *ngIf=\"wappingService.tile3\" class=\"service-name mat-title\" fxHide fxShow.xs>\r\n            {{wappingService.tile3}}\r\n        </div>\r\n        <!--tile 4-->\r\n        <div *ngIf=\"wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated\" class=\"service-description\" id=\"serviceDescription\">\r\n            {{wappingService.tile4}}\r\n        </div>\r\n        <div class=\"service-description\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n            {{ wappingServicesTranslations.cardGenerated }}\r\n        </div>\r\n        <!--show more-->\r\n        <div *ngIf=\"isOverflown()\" class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n            <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail1\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n            <span>{{wappingService.tileDetail1}}</span>\r\n        </div>\r\n        <!--tileDetail 2-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail2\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n            <span>{{wappingService.tileDetail2}}</span>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n            <button mat-flat-button\r\n                    class=\"service-view-button\"\r\n                    color=\"accent\"\r\n                    [disabled]=\"disabledButtonService\"\r\n                    (click)=\"pressButtonService()\">\r\n                <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n                <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n            </button>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n        <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n            <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n        </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media (min-width:600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap;mat-icon {width: 24px;}}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto;&::-webkit-scrollbar{display:none}}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$2.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+WappMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceViewComponent, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService" }, ngImport: i0, template: "<wapp-main-title title=\"{{wappingService.tile3}}\" *ngIf=\"wappingService\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-date-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div class=\"service-image-title\"\r\n            *ngIf=\"wappingService.tile1\"\r\n            [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n            [style.color]=\"wappingService.tile1ForegroundColor\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile1}}</div>\r\n        <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            class=\"service-tile\"\r\n            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n            [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n            [style.color]=\"wappingService.tile2ForegroundColor\"\r\n            *ngIf=\"wappingService.tile2\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n        </div>\r\n        \r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! \" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\"  >\r\n            {{ wappingServicesTranslations.scheduledLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.sendLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.receivedLabel }}\r\n        </div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">El ganador se decidir\u00E1 el </span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate | date:'dd/MM/yyyy' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">Tus n\u00FAmeros</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <!--service info-->\r\n    <div *ngIf=\"wappingService.tile3 || wappingService.tile4\" class=\"service-info-container\" fxLayout=\"column\">\r\n        <div class=\"service-description-container\">\r\n        <!--tile 3-->\r\n        <div *ngIf=\"wappingService.tile3\" class=\"service-name mat-title\" fxHide fxShow.xs>\r\n            {{wappingService.tile3}}\r\n        </div>\r\n        <!--tile 4-->\r\n        <div *ngIf=\"wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated\" class=\"service-description\" id=\"serviceDescription\">\r\n            {{wappingService.tile4}}\r\n        </div>\r\n        <div class=\"service-description\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n            {{ wappingServicesTranslations.cardGenerated }}\r\n        </div>\r\n        <!--show more-->\r\n        <div *ngIf=\"isOverflown()\" class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n            <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail1\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n            <span>{{wappingService.tileDetail1}}</span>\r\n        </div>\r\n        <!--tileDetail 2-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail2\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n            <span>{{wappingService.tileDetail2}}</span>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n            <button mat-flat-button\r\n                    class=\"service-view-button\"\r\n                    color=\"accent\"\r\n                    [disabled]=\"disabledButtonService\"\r\n                    (click)=\"pressButtonService()\">\r\n                <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n                <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n            </button>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n        <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n            <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n        </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media (min-width:600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap;mat-icon {width: 24px;}}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$2.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wapp-material-service-view', template: "<wapp-main-title title=\"{{wappingService.tile3}}\" *ngIf=\"wappingService\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div class=\"service-image-title\"\r\n            *ngIf=\"wappingService.tile1\"\r\n            [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n            [style.color]=\"wappingService.tile1ForegroundColor\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile1}}</div>\r\n        <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            class=\"service-tile\"\r\n            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n            [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n            [style.color]=\"wappingService.tile2ForegroundColor\"\r\n            *ngIf=\"wappingService.tile2\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n        </div>\r\n        \r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! \" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\"  >\r\n            {{ wappingServicesTranslations.scheduledLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.sendLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.receivedLabel }}\r\n        </div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">El ganador se decidir\u00E1 el </span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate | date:'dd/MM/yyyy' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">Tus n\u00FAmeros</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <!--service info-->\r\n    <div *ngIf=\"wappingService.tile3 || wappingService.tile4\" class=\"service-info-container\" fxLayout=\"column\">\r\n        <div class=\"service-description-container\">\r\n        <!--tile 3-->\r\n        <div *ngIf=\"wappingService.tile3\" class=\"service-name mat-title\" fxHide fxShow.xs>\r\n            {{wappingService.tile3}}\r\n        </div>\r\n        <!--tile 4-->\r\n        <div *ngIf=\"wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated\" class=\"service-description\" id=\"serviceDescription\">\r\n            {{wappingService.tile4}}\r\n        </div>\r\n        <div class=\"service-description\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n            {{ wappingServicesTranslations.cardGenerated }}\r\n        </div>\r\n        <!--show more-->\r\n        <div *ngIf=\"isOverflown()\" class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n            <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail1\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n            <span>{{wappingService.tileDetail1}}</span>\r\n        </div>\r\n        <!--tileDetail 2-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail2\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n            <span>{{wappingService.tileDetail2}}</span>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n            <button mat-flat-button\r\n                    class=\"service-view-button\"\r\n                    color=\"accent\"\r\n                    [disabled]=\"disabledButtonService\"\r\n                    (click)=\"pressButtonService()\">\r\n                <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n                <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n            </button>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n        <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n            <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n        </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media (min-width:600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap;mat-icon {width: 24px;}}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto;&::-webkit-scrollbar{display:none}}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
+            args: [{ selector: 'wapp-material-service-view', template: "<wapp-main-title title=\"{{wappingService.tile3}}\" *ngIf=\"wappingService\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-date-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div class=\"service-image-title\"\r\n            *ngIf=\"wappingService.tile1\"\r\n            [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n            [style.color]=\"wappingService.tile1ForegroundColor\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile1}}</div>\r\n        <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            class=\"service-tile\"\r\n            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n            [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n            [style.color]=\"wappingService.tile2ForegroundColor\"\r\n            *ngIf=\"wappingService.tile2\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n        </div>\r\n        \r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! \" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\"  >\r\n            {{ wappingServicesTranslations.scheduledLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.sendLabel }}\r\n        </div>\r\n        </div>\r\n        <div class=\"card-header-status-container sendLabel-container\" *ngIf=\"isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"sendLabel\" >\r\n            {{ wappingServicesTranslations.receivedLabel }}\r\n        </div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">El ganador se decidir\u00E1 el </span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate | date:'dd/MM/yyyy' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">Tus n\u00FAmeros</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <!--service info-->\r\n    <div *ngIf=\"wappingService.tile3 || wappingService.tile4\" class=\"service-info-container\" fxLayout=\"column\">\r\n        <div class=\"service-description-container\">\r\n        <!--tile 3-->\r\n        <div *ngIf=\"wappingService.tile3\" class=\"service-name mat-title\" fxHide fxShow.xs>\r\n            {{wappingService.tile3}}\r\n        </div>\r\n        <!--tile 4-->\r\n        <div *ngIf=\"wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated\" class=\"service-description\" id=\"serviceDescription\">\r\n            {{wappingService.tile4}}\r\n        </div>\r\n        <div class=\"service-description\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n            {{ wappingServicesTranslations.cardGenerated }}\r\n        </div>\r\n        <!--show more-->\r\n        <div *ngIf=\"isOverflown()\" class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n            <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tileDetail 1-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail1\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n            <span>{{wappingService.tileDetail1}}</span>\r\n        </div>\r\n        <!--tileDetail 2-->\r\n        <div class=\"service-tile-detail\" *ngIf=\"wappingService.tileDetail2\" fxLayout=\"row\">\r\n            <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n            <span>{{wappingService.tileDetail2}}</span>\r\n        </div>\r\n        </div>\r\n        <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n            <button mat-flat-button\r\n                    class=\"service-view-button\"\r\n                    color=\"accent\"\r\n                    [disabled]=\"disabledButtonService\"\r\n                    (click)=\"pressButtonService()\">\r\n                <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n                <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n            </button>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n        <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n            <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n        </a>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media (min-width:600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width:600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap;mat-icon {width: 24px;}}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$7.MatIconRegistry }, { type: i2$8.DomSanitizer }, { type: MaterialModalService }]; }, propDecorators: { wappingServicesTranslations: [{
                 type: Input,
                 args: ['wappingServicesTranslations']
@@ -10411,10 +10416,10 @@ class WMaterialServiceViewComponent {
         this.isDraw = false;
         this.hasParticipations = false;
         this.disabledParticipationsModal = false;
-        this.matIconRegistry.addSvgIcon("calendar", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-calendar.svg"));
-        this.matIconRegistry.addSvgIcon("number", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-number.svg"));
-        this.matIconRegistry.addSvgIcon("participate", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-participate.svg"));
-        this.matIconRegistry.addSvgIcon("participate-again", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-participate-again.svg"));
+        this.matIconRegistry.addSvgIconLiteral("calendar", this.domSanitizer.bypassSecurityTrustHtml(CALENDAR));
+        this.matIconRegistry.addSvgIconLiteral("number", this.domSanitizer.bypassSecurityTrustHtml(ICON_NUMBER));
+        this.matIconRegistry.addSvgIconLiteral("participate", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE));
+        this.matIconRegistry.addSvgIconLiteral("participate-again", this.domSanitizer.bypassSecurityTrustHtml(PARTICIPATE_AGAIN));
     }
     ngOnInit() {
         this.getImage();
@@ -10578,10 +10583,10 @@ class WMaterialServiceViewComponent {
     }
 }
 WMaterialServiceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i1$7.MatIconRegistry }, { token: i2$8.DomSanitizer }, { token: i1$6.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-WMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceViewComponent, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            <div *ngIf=\"!forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <div *ngIf=\"forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\"\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n                <button mat-flat-button\r\n                        class=\"service-view-button\"\r\n                        color=\"accent\"\r\n                        [disabled]=\"disabledButtonService\"\r\n                        (click)=\"pressButtonService()\">\r\n                    <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                    </div>\r\n                    <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    \r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button .mat-button-wrapper{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-participate{display:flex}@media (max-width: 599px){.service-view-button{margin:8px 12px!important}}@media (min-width: 600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.numbers-list-vertical::-webkit-scrollbar{display:none}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$2.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
+WMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceViewComponent, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-date-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            <div *ngIf=\"!forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <div *ngIf=\"forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\"\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n                <button mat-flat-button\r\n                        class=\"service-view-button\"\r\n                        color=\"accent\"\r\n                        [disabled]=\"disabledButtonService\"\r\n                        (click)=\"pressButtonService()\">\r\n                    <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                    </div>\r\n                    <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    \r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button .mat-button-wrapper{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-participate{display:flex}@media (max-width: 599px){.service-view-button{margin:8px 12px!important}}@media (min-width: 600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$2.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-view', encapsulation: ViewEncapsulation.None, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            <div *ngIf=\"!forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <div *ngIf=\"forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\"\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n                <button mat-flat-button\r\n                        class=\"service-view-button\"\r\n                        color=\"accent\"\r\n                        [disabled]=\"disabledButtonService\"\r\n                        (click)=\"pressButtonService()\">\r\n                    <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                    </div>\r\n                    <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    \r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button .mat-button-wrapper{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-participate{display:flex}@media (max-width: 599px){.service-view-button{margin:8px 12px!important}}@media (min-width: 600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.numbers-list-vertical::-webkit-scrollbar{display:none}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
+            args: [{ selector: 'w-material-service-view', encapsulation: ViewEncapsulation.None, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"participation-detail-container\" fxLayout=\"row\" fxHide.xs fxLayoutAlign=\"center center\" *ngIf=\"isDraw && hasParticipations\">\r\n\r\n  <div class=\"participation-detail-desktop-bar\" fxFlex=\"100\" xLayout=\"row\" fxLayoutAlign=\"center center\">\r\n    <span class=\"participation-detail-label\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n    <span class=\"participation-detail-value\">\r\n        {{ lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds?.join(', ') }}\r\n    </span>\r\n    <span class=\"participation-detail-date-label\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n    <span class=\"participation-detail-date\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n  </div>\r\n\r\n</div>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [isDevModeActive]=\"isDevModeActive\" [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\" [isNoImage]=\"isNoImage\" (onSetImageEvent)=\"setImage()\" [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        <div fxFlex fxLayout=\"row\"\r\n            fxLayoutAlign=\"center center\"\r\n            fxLayoutGap=\"5px\"\r\n            [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n        </div>\r\n        <!--activate toggle-->\r\n        <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                        *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <button mat-flat-button *ngIf=\"showButtonService\"\r\n                color=\"accent\"\r\n                class=\"service-view-button\"\r\n                fxFlex=\"100\" fxHide fxShow.xs\r\n                [disabled]=\"disabledButtonService\"\r\n                (click)=\"pressButtonService()\">\r\n            <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n            </div>\r\n            <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n        </button>\r\n        <div class=\"participation-detail-container-mobile\" fxHide fxShow.xs *ngIf=\"isDraw && hasParticipations\">\r\n  \r\n            <div class=\"participation-detail-mobile-card\">\r\n                <div class=\"participation-date-row\">\r\n                    <span class=\"label-light\">{{ wappingServicesTranslations?.winnerDate }}</span>\r\n                    <span class=\"date-bold\">{{ lotteryEvent?.lotteryEventNextDraw?.drawDate + 'Z' | date:'dd/MM/yyyy HH:mm' }}</span>\r\n                </div>\r\n\r\n                <div class=\"card-bottom-content\">\r\n                    <div class=\"numbers-section\">\r\n                        <span class=\"numbers-title\">{{ wappingServicesTranslations?.yourNumbers }}</span>\r\n                        <div class=\"numbers-list-vertical\">\r\n                            <div class=\"number-item\" *ngFor=\"let id of lotteryEvent?.lotteryEventNextDraw?.skyWappCardTransactionIds\">\r\n                                {{ id }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"card-icon-right\">\r\n                        <mat-icon svgIcon=\"number\"></mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            <div *ngIf=\"!forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <div *ngIf=\"forceMobile\"\r\n                [innerHtml]=\"wappingService.tile3\"\r\n                class=\"service-name mat-title\">\r\n            </div>\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n                <button mat-flat-button\r\n                        class=\"service-view-button\"\r\n                        color=\"accent\"\r\n                        [disabled]=\"disabledButtonService\"\r\n                        (click)=\"pressButtonService()\">\r\n                    <div class=\"service-view-participate\" *ngIf=\"isDraw\">\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                        <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                    </div>\r\n                    <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <!--link-->\r\n        <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    \r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button .mat-button-wrapper{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-participate{display:flex}@media (max-width: 599px){.service-view-button{margin:8px 12px!important}}@media (min-width: 600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$7.MatIconRegistry }, { type: i2$8.DomSanitizer }, { type: i1$6.DialogService }]; }, propDecorators: { forceMobile: [{
                 type: Input
             }], wappingServicesTranslations: [{