ngx-wapp-components 2.1.17 → 2.1.18

package/esm2020/lib/material/w-material-service-card/w-material-service-card.component.mjs

@@ -145,10 +145,10 @@ export class WMaterialServiceCardComponent {
     }
 }
 WMaterialServiceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceCardComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: i3.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-WMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceCardComponent, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.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: i8.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"] }] });
+WMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceCardComponent, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.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: i8.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"] }]
+            args: [{ selector: 'w-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }, { type: i3.DialogService }]; }, propDecorators: { isDevModeActive: [{
                 type: Input
             }], wappingServicesTranslations: [{

package/esm2020/lib/material/wapp-material-service-card/wapp-material-service-card.component.mjs

@@ -91,10 +91,10 @@ export class WappMaterialServiceCardComponent {
     }
 }
 WappMaterialServiceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceCardComponent, deps: [{ token: i1.Router }, { token: i2.MatIconRegistry }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-WappMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceCardComponent, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.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.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.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"] }] });
+WappMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceCardComponent, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i5.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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.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.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.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wapp-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"] }]
+            args: [{ selector: 'wapp-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.MatIconRegistry }, { type: i3.DomSanitizer }]; }, propDecorators: { wappingServicesTranslations: [{
                 type: Input
             }], wappingService: [{

package/fesm2015/ngx-wapp-components.mjs

@@ -10193,10 +10193,10 @@ class WMaterialServiceCardComponent {
     }
 }
 WMaterialServiceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceCardComponent, deps: [{ token: i1$7.MatIconRegistry }, { token: i2$8.DomSanitizer }, { token: i1$6.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-WMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceCardComponent, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.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"] }] });
+WMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceCardComponent, selector: "w-material-service-card", inputs: { isDevModeActive: "isDevModeActive", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { cardClicked: "cardClicked", onDefaultImageEvent: "onDefaultImageEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"] }]
+            args: [{ selector: 'w-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- tile1 -->\r\n    <div *ngIf=\"!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-image-title\">\r\n      <div class=\"tile-no-html\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div *ngIf=\"hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''\" class=\"service-card-image-title service-card-image-title-html\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <div class=\"service-card-tile1\"\r\n        [innerHtml]=\"wappingService.tile1\"></div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image  \r\n        [ngClass]=\"{'default-image' : isNoImage}\" \r\n        [src]=\"getImage()\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div *ngIf=\"wappingService.tile3\" class=\"card-header-description\">\r\n        <div [innerHtml]=\"wappingService.tile3\"></div>\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>\r\n", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-header{position:relative}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-card-image-title-html{position:absolute!important;width:100%!important;min-height:22px!important;top:0!important;z-index:99!important}.service-card-tile1{width:100%;min-height:22px}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px!important;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px!important;text-align:left;line-height:1.78;overflow-y:auto}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.tile-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.default-image{padding:68px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$7.MatIconRegistry }, { type: i2$8.DomSanitizer }, { type: i1$6.DialogService }]; }, propDecorators: { isDevModeActive: [{
                 type: Input
             }], wappingServicesTranslations: [{
@@ -10302,10 +10302,10 @@ class WappMaterialServiceCardComponent {
     }
 }
 WappMaterialServiceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceCardComponent, deps: [{ token: i1$4.Router }, { token: i1$7.MatIconRegistry }, { token: i2$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-WappMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceCardComponent, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+WappMaterialServiceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WappMaterialServiceCardComponent, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i6$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WappMaterialServiceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wapp-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: [":host ::ng-deep .service-card{width:380px}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"] }]
+            args: [{ selector: 'wapp-material-service-card', template: "<mat-card *ngIf=\"wappingServiceReady\" class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <div class=\"service-card-image-title\"\r\n         [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n         [style.color]=\"wappingService.tile1ForegroundColor\"\r\n         *ngIf=\"wappingService.tile1\"\r\n         fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n      <!--tile1-->\r\n      <div>{{wappingService.tile1}}</div>\r\n      <div *ngIf=\"wappingService.showTile1Label\">{{wappingService.tile1Label}}</div>\r\n    </div>\r\n    <div class=\"service-card-image\">\r\n      <img mat-card-image [src]=\"wappingService.imageUrl\">\r\n    </div>\r\n  </div>\r\n  <mat-card-header fxLayout=\"column\">\r\n    <div fxLayout=\"row\">\r\n      <!--tile2-->\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div>{{wappingService.tile2}}</div>\r\n        <div *ngIf=\"wappingService.showTile2Label\">{{wappingService.tile2Label}}</div>\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      <div class=\"card-header-status-container\" *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.allowSelect && wappingService.type != 6\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <div class=\"status\">{{ wappingTranslations.activedService }}</div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"activated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.activedService }}</span>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"!wappingService.active\">\r\n          <mat-icon class=\"card-header-status-icon\" svgIcon=\"deactivated\"></mat-icon>\r\n          <span class=\"status\">{{ wappingTranslations.disabledService }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"card-header-status-container\" *ngIf=\"!allowSelectSendGiftCard\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend\">\r\n          <div class=\"sendLabel\"  >\r\n            {{ wappingTranslations.scheduledLabel }}\r\n          </div>\r\n        </div>\r\n        <div class=\"card-header-status\" *ngIf=\"wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration\">\r\n          <div class=\"sendLabel\" >\r\n            {{ wappingTranslations.sendLabel }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--tile3-->\r\n    <div class=\"card-header-description\">\r\n      {{wappingService.tile3}}\r\n    </div>\r\n    <!--tile4-->\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID != ecardStatus.generated\">\r\n      {{wappingService.tile4}}\r\n    </div>\r\n    <div class=\"card-header-detail\" *ngIf=\"wappingService.enumTypeStatusECardID == ecardStatus.generated\">\r\n      {{ wappingTranslations.cardGenerated }}\r\n    </div>\r\n  </mat-card-header>\r\n</mat-card>", styles: ["@media (max-width: 599px){.service-card{width:30vh}}@media (min-width: 600px){.service-card{width:350px}}.mat-mdc-card{padding:0}.service-card{cursor:pointer;transition:none!important;box-shadow:1px 2px 8px #1f1f1f14}.service-card-image-title{position:absolute;width:75%;margin-left:40px;margin-right:40px;height:22px;top:0;z-index:99;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;display:flex}.service-card-image{font-size:0px;border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.mat-mdc-card-image{width:100%;margin:0;max-height:500px}.mat-mdc-card-image:first-child{margin:0}.mat-mdc-card-content{padding:5px}.mat-mdc-card-header{height:130px;padding:16px 15px;background-color:#eee6;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.mat-mdc-card-header .mat-mdc-card-title{margin:0!important}.card-header-benefits{align-items:center;text-transform:uppercase}.card-header-status{display:flex;align-items:center}.card-header-status-icon{margin-right:5px;width:10px}.status{text-transform:uppercase}.card-header-description{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:clip;text-overflow:ellipsis;white-space:pre-line}.card-header-detail{margin-top:10px;text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$7.MatIconRegistry }, { type: i2$8.DomSanitizer }]; }, propDecorators: { wappingServicesTranslations: [{
                 type: Input
             }], wappingService: [{