ngx-wapp-components 2.1.4 → 2.1.5-alpha.1

package/fesm2020/ngx-wapp-components.mjs

@@ -9439,6 +9439,7 @@ var WappingServiceType;
     WappingServiceType[WappingServiceType["Promotion"] = 4] = "Promotion";
     WappingServiceType[WappingServiceType["Cuponing"] = 5] = "Cuponing";
     WappingServiceType[WappingServiceType["Post"] = 6] = "Post";
+    WappingServiceType[WappingServiceType["Draws"] = 7] = "Draws";
 })(WappingServiceType || (WappingServiceType = {}));
 var WappingServiceSubtype;
 (function (WappingServiceSubtype) {
@@ -9856,6 +9857,7 @@ class WappMaterialServiceViewComponent {
         this.allowSelectSendGiftCard = true;
         this.enumSendingStatus = SendingStatus;
         this.ecardStatus = CardStatus;
+        this.isDrawService = false;
         this.wappingServicesTranslations = {
             activedService: 'Activada',
             disabledService: 'Desactivada',
@@ -9864,9 +9866,12 @@ class WappMaterialServiceViewComponent {
             cardGenerated: 'Tu tarjeta estará disponible para el envío en breves instantes',
             receivedLabel: "Enviada por {{name}}",
             showMore: "Mostrar más",
-            title: "Descripción"
+            title: "Descripción",
+            participate: "Participate"
         };
+        this.canParticipateDraw = false;
         this.wappingServiceSelected = new EventEmitter();
+        this.participateDraw = new EventEmitter();
         this.matIconRegistry.addSvgIcon("calendar", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-calendar.svg"));
     }
     ngOnInit() {
@@ -9885,6 +9890,9 @@ class WappMaterialServiceViewComponent {
         }
         if (this.wappingService.enumTypeStatusECardID == this.ecardStatus.generated)
             this.allowSelectSendGiftCard = false;
+        if (this.wappingService.type == WappingServiceType.Draws) {
+            this.isDrawService = true;
+        }
         this.getWappingServiceTiles();
         this.getWappingServiceImages();
     }
@@ -9967,24 +9975,33 @@ class WappMaterialServiceViewComponent {
         };
         this.materialModal.open(WappServiceDescriptionComponent, modalSize, dialogConfig);
     }
+    triggerParticipate() {
+        this.participateDraw.emit();
+    }
     isOverflown() {
         var element = document.getElementById("serviceDescription");
         return element != null ? element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth : false;
     }
 }
 WappMaterialServiceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceViewComponent, deps: [{ token: i2$8.MatIconRegistry }, { token: i3$d.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", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected" }, 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\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\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        <!--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}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
+WappMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceViewComponent, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", canParticipateDraw: "canParticipateDraw", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", participateDraw: "participateDraw" }, 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 && !isDrawService\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <w-button class=\"service-select-toggle\" color=\"accent\" *ngIf=\"isDrawService\"\r\n            [label]=\"wappingServicesTranslations?.participate ?? ''\"\r\n            [disabled]=\"!canParticipateDraw\"\r\n            (onClick)=\"triggerParticipate()\">\r\n        </w-button>\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        <!--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}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "iconPos", "tooltipPosition", "tooltip", "disabled", "loading", "buttonClass"], outputs: ["onClick"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
 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\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\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        <!--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}}\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=\"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 && !isDrawService\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <w-button class=\"service-select-toggle\" color=\"accent\" *ngIf=\"isDrawService\"\r\n            [label]=\"wappingServicesTranslations?.participate ?? ''\"\r\n            [disabled]=\"!canParticipateDraw\"\r\n            (onClick)=\"triggerParticipate()\">\r\n        </w-button>\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        <!--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}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$8.MatIconRegistry }, { type: i3$d.DomSanitizer }, { type: MaterialModalService }]; }, propDecorators: { wappingServicesTranslations: [{
                 type: Input,
                 args: ['wappingServicesTranslations']
+            }], canParticipateDraw: [{
+                type: Input,
+                args: ['canParticipateDraw']
             }], wappingService: [{
                 type: Input
             }], wappingServiceSelected: [{
                 type: Output,
                 args: ['wappingServiceSelected']
+            }], participateDraw: [{
+                type: Output,
+                args: ['participateDraw']
             }] } });
 
 class WMaterialServiceCardComponent {
@@ -10169,6 +10186,7 @@ class WMaterialServiceViewComponent {
         this.allowSelectSendGiftCard = true;
         this.enumSendingStatus = SendingStatus;
         this.ecardStatus = CardStatus;
+        this.isDrawService = false;
         this.forceMobile = false;
         this.wappingServicesTranslations = {
             activedService: 'Activada',
@@ -10178,8 +10196,10 @@ class WMaterialServiceViewComponent {
             cardGenerated: 'Tu tarjeta estará disponible para el envío en breves instantes',
             receivedLabel: "Enviada por {{name}}",
             showMore: "Mostrar más",
+            participate: "Participar"
         };
         this.wappingServiceSelected = new EventEmitter();
+        this.participateDraw = new EventEmitter();
         this.matIconRegistry.addSvgIcon("calendar", this.domSanitizer.bypassSecurityTrustResourceUrl("/assets/wappIcons/mat-calendar.svg"));
     }
     ngOnInit() {
@@ -10198,6 +10218,9 @@ class WMaterialServiceViewComponent {
         }
         if (wappService.enumTypeStatusECardID == this.ecardStatus.generated)
             this.allowSelectSendGiftCard = false;
+        if (wappService.type == WappingServiceType.Draws) {
+            this.isDrawService = true;
+        }
         this.getWappingServiceTiles(this.wappingService);
         this.getWappingServiceImages();
     }
@@ -10240,12 +10263,15 @@ class WMaterialServiceViewComponent {
     hasHtml(value) {
         return /<\/?[a-z][\s\S]*>/i.test(value);
     }
+    triggerParticipate() {
+        this.participateDraw.emit();
+    }
 }
 WMaterialServiceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i2$8.MatIconRegistry }, { token: i3$d.DomSanitizer }], 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", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected" }, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\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 [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                        'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div [innerHtml]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [forceMobile]=\"forceMobile\" [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            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div [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\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\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>\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: [".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;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}.template-service-image-tile{position:relative;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,.template-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;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.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}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "directive", type: i4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
+WMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceViewComponent, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", participateDraw: "participateDraw" }, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\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 [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                        'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div [innerHtml]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [forceMobile]=\"forceMobile\" [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            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div [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 && !isDrawService\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <w-button class=\"service-select-toggle\" color=\"accent\" *ngIf=\"isDrawService\"\r\n            [label]=\"wappingServicesTranslations?.participate ?? ''\"\r\n            (onClick)=\"triggerParticipate()\">\r\n        </w-button>\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>\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: [".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;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}.template-service-image-tile{position:relative;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,.template-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;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.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}}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "directive", type: i4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "iconPos", "tooltipPosition", "tooltip", "disabled", "loading", "buttonClass"], outputs: ["onClick"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-view', template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\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 [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                        'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div [innerHtml]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [forceMobile]=\"forceMobile\" [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            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div [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\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\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>\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: [".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;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}.template-service-image-tile{position:relative;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,.template-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;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.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}}\n"] }]
+            args: [{ selector: 'w-material-service-view', template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\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 [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n                        'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div [innerHtml]=\"wappingService.tile1\"></div>\r\n        </div>\r\n        <!--slideshow-->\r\n        <wapp-carousel [forceMobile]=\"forceMobile\" [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            [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n                'template-service-tile': hasHtml(wappingService.tile2),\r\n                'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n            [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n            *ngIf=\"wappingService.tile2\">\r\n            <div [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 && !isDrawService\"\r\n                        [disabled]=\"disabledToggle\"\r\n                        [(ngModel)]=\"wappingService.active\"\r\n                        (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        <w-button class=\"service-select-toggle\" color=\"accent\" *ngIf=\"isDrawService\"\r\n            [label]=\"wappingServicesTranslations?.participate ?? ''\"\r\n            (onClick)=\"triggerParticipate()\">\r\n        </w-button>\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>\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: [".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;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}.template-service-image-tile{position:relative;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,.template-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;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.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}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$8.MatIconRegistry }, { type: i3$d.DomSanitizer }]; }, propDecorators: { forceMobile: [{
                 type: Input
             }], wappingServicesTranslations: [{
@@ -10256,6 +10282,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], wappingServiceSelected: [{
                 type: Output,
                 args: ['wappingServiceSelected']
+            }], participateDraw: [{
+                type: Output,
+                args: ['participateDraw']
             }] } });
 
 class WCodeBlockComponent {