ngx-wapp-components 3.2.33-alpha.6 → 3.2.33-alpha.7

package/fesm2022/ngx-wapp-components.mjs

@@ -99,6 +99,8 @@ import { InputGroupModule } from 'primeng/inputgroup';
 import * as i5 from 'primeng/inputgroupaddon';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { DataViewModule } from 'primeng/dataview';
+import * as i3$7 from 'primeng/password';
+import { PasswordModule } from 'primeng/password';
 import * as i3$5 from 'powerbi-client-angular';
 import { PowerBIReportEmbedComponent, PowerBIEmbedModule } from 'powerbi-client-angular';
 import * as i2$2 from 'ngx-highlightjs';
@@ -133,7 +135,7 @@ import * as i2$d from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$9 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i3$7 from '@angular/platform-browser';
+import * as i3$8 from '@angular/platform-browser';
 import { NoopScrollStrategy } from '@angular/cdk/overlay';
 import * as i7$3 from 'ng-flex-layout/flex';
 import * as i9$4 from '@angular/material/button';
@@ -619,6 +621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 class WClipboardComponent {
     constructor(clipboard) {
         this.clipboard = clipboard;
+        this.onlyButton = false;
         this.icon = 'pi pi-copy';
     }
     copyToClipboard() {
@@ -637,17 +640,23 @@ class WClipboardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WClipboardComponent, deps: [{ token: i1$3.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: WClipboardComponent, isStandalone: false, selector: "w-clipboard", inputs: { codeText: "codeText", language: "language" }, ngImport: i0, template: "<div class=\"card relative\">\r\n    <div class=\"absolute top-0 right-0 pr-3 pt-3\">\r\n        <w-button [icon]=\"icon\" type=\"secondary\"\r\n            (onClick)=\"copyToClipboard()\">\r\n        </w-button>\r\n    </div>\r\n    <pre id=\"text\" class=\"-mb-2 ml-3\">\r\n        <code [highlight]=\"codeText\" [language]=\"language\"></code>\r\n    </pre>\r\n</div>", styles: [".p-button-icon{color:#fff!important}.hljs{background:transparent}pre code.hljs{overflow-x:auto;padding:0rem!important}\n"], dependencies: [{ kind: "directive", type: i2$2.Highlight, selector: "[highlight]", inputs: ["highlight", "language", "ignoreIllegals"], outputs: ["highlighted"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "iconPos", "tooltipPosition", "tooltip", "disabled", "loading", "buttonClass"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WClipboardComponent, isStandalone: false, selector: "w-clipboard", inputs: { codeText: "codeText", language: "language", onlyButton: "onlyButton", label: "label" }, ngImport: i0, template: "@if(onlyButton) {\r\n    <w-button [icon]=\"icon\" [label]=\"label\" type=\"secondary\"\r\n        (onClick)=\"copyToClipboard()\">\r\n    </w-button>\r\n\r\n} @else {\r\n    <div class=\"card relative\">\r\n        <div class=\"absolute top-0 right-0 pr-3 pt-3\">\r\n            <w-button [label]=\"label\" [icon]=\"icon\" type=\"secondary\"\r\n                (onClick)=\"copyToClipboard()\">\r\n            </w-button>\r\n        </div>\r\n        <pre id=\"text\" class=\"-mb-2 ml-3\">\r\n            <code [highlight]=\"codeText\" [language]=\"language\"></code>\r\n        </pre>\r\n    </div>\r\n}", styles: [".p-button-icon{color:#fff!important}.hljs{background:transparent}pre code.hljs{overflow-x:auto;padding:0rem!important}\n"], dependencies: [{ kind: "directive", type: i2$2.Highlight, selector: "[highlight]", inputs: ["highlight", "language", "ignoreIllegals"], outputs: ["highlighted"] }, { kind: "component", type: WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "iconPos", "tooltipPosition", "tooltip", "disabled", "loading", "buttonClass"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WClipboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-clipboard', standalone: false, template: "<div class=\"card relative\">\r\n    <div class=\"absolute top-0 right-0 pr-3 pt-3\">\r\n        <w-button [icon]=\"icon\" type=\"secondary\"\r\n            (onClick)=\"copyToClipboard()\">\r\n        </w-button>\r\n    </div>\r\n    <pre id=\"text\" class=\"-mb-2 ml-3\">\r\n        <code [highlight]=\"codeText\" [language]=\"language\"></code>\r\n    </pre>\r\n</div>", styles: [".p-button-icon{color:#fff!important}.hljs{background:transparent}pre code.hljs{overflow-x:auto;padding:0rem!important}\n"] }]
+            args: [{ selector: 'w-clipboard', standalone: false, template: "@if(onlyButton) {\r\n    <w-button [icon]=\"icon\" [label]=\"label\" type=\"secondary\"\r\n        (onClick)=\"copyToClipboard()\">\r\n    </w-button>\r\n\r\n} @else {\r\n    <div class=\"card relative\">\r\n        <div class=\"absolute top-0 right-0 pr-3 pt-3\">\r\n            <w-button [label]=\"label\" [icon]=\"icon\" type=\"secondary\"\r\n                (onClick)=\"copyToClipboard()\">\r\n            </w-button>\r\n        </div>\r\n        <pre id=\"text\" class=\"-mb-2 ml-3\">\r\n            <code [highlight]=\"codeText\" [language]=\"language\"></code>\r\n        </pre>\r\n    </div>\r\n}", styles: [".p-button-icon{color:#fff!important}.hljs{background:transparent}pre code.hljs{overflow-x:auto;padding:0rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Clipboard }], propDecorators: { codeText: [{
                 type: Input,
                 args: ['codeText']
             }], language: [{
                 type: Input,
                 args: ['language']
+            }], onlyButton: [{
+                type: Input,
+                args: ['onlyButton']
+            }], label: [{
+                type: Input,
+                args: ['label']
             }] } });
 
 class WIconsComponent {
@@ -11891,6 +11900,144 @@ function provideMonacoEditor(config = {}) {
     ]);
 }
 
+class WPasswordComponent {
+    constructor() {
+        this.value = '';
+        this.showLabel = true;
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.size = 'small';
+        this.toggleMask = true;
+        this.feedback = false;
+        this.autocomplete = 'off';
+        this.autofocus = false;
+        this.styleClass = '';
+        this.inputStyleClass = '';
+        this.valueChange = new EventEmitter();
+        this.onInput = new EventEmitter();
+        this.onBlur = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.isTouched = false;
+        this.onChange = (_) => { };
+        this.onTouch = () => { this.isTouched = true; };
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onModelChange(newValue) {
+        this.value = newValue;
+        this.onChange(this.value);
+        this.valueChange.emit(this.value);
+    }
+    onInputElement(event) {
+        this.onInput.emit(event);
+    }
+    onInputBlur(event) {
+        this.onTouch();
+        this.onBlur.emit(event);
+    }
+    onInputFocus(event) {
+        this.onFocus.emit(event);
+    }
+    isRequiredValidNgModel() {
+        return !(this.required && (this.value == null || this.value.toString().trim() === ''));
+    }
+    getSizeName(value) {
+        return SizeType[value];
+    }
+    get sizeType() {
+        return SizeType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WPasswordComponent, isStandalone: false, selector: "w-password", inputs: { label: "label", showLabel: "showLabel", placeholder: "placeholder", disabled: "disabled", required: "required", size: "size", tooltip: "tooltip", tooltipPosition: "tooltipPosition", toggleMask: "toggleMask", feedback: "feedback", autocomplete: "autocomplete", maxlength: "maxlength", minlength: "minlength", autofocus: "autofocus", styleClass: "styleClass", inputStyleClass: "inputStyleClass" }, outputs: { valueChange: "valueChange", onInput: "onInput", onBlur: "onBlur", onFocus: "onFocus" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WPasswordComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"w-password-field p-fluid field\">\r\n  @if (showLabel && label) {\r\n    <w-input-label\r\n      [label]=\"label\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [size]=\"size\"\r\n      [tooltip]=\"tooltip\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      [validated]=\"isRequiredValidNgModel()\">\r\n    </w-input-label>\r\n  }\r\n\r\n  <p-password\r\n    [ngModel]=\"value\"\r\n    (ngModelChange)=\"onModelChange($event)\"\r\n    [feedback]=\"feedback\"\r\n    [toggleMask]=\"toggleMask\"\r\n    [placeholder]=\"placeholder\"\r\n    [disabled]=\"disabled\"\r\n    [required]=\"required\"\r\n    [autocomplete]=\"autocomplete\"\r\n    [maxLength]=\"maxlength\"\r\n    [autofocus]=\"autofocus\"\r\n    [styleClass]=\"styleClass\"\r\n    [inputStyleClass]=\"inputStyleClass\"\r\n    [ngClass]=\"{'w-password-error': required && !value && isTouched}\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onFocus)=\"onInputFocus($event)\"\r\n    (onInput)=\"onInputElement($event)\"\r\n    class=\"w-password-control\">\r\n  </p-password>\r\n</div>\r\n", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:700}.heading5,.w-sidebar-title-text{font-size:1.5rem;line-height:1.8333333333rem;font-weight:700}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:700}.subtitle1,.w-tab-text,.w-panel-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:700}.subtitle2,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:600}.body,.w-image-file-uploader-navigators-text,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:400}.caption,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,:host ::ng-deep .p-password .p-password-input:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:-moz-placeholder,:host ::ng-deep .p-password .p-password-input::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-error-message,.w-input-error-alert-text,.w-input-warning-alert-text,.w-button-small-label-text-typography-sm{font-size:.8333333333rem;line-height:1rem;font-weight:400}.textMainColor{color:#1f2224}.textSoftColor{color:#5f6468}.textSofterColor{color:#9aa0a7}.textSoftestColor{color:#e8ebee}.textInverseColor{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXSMDivider{height:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.panel-title-gap-divider{height:20px}.panel-section-gap-divider{height:32px}.input-vertical-gap-divider{height:24px}.input-label-gap-divider{height:6px}.focusedInput,:host ::ng-deep .p-password .p-password-input:focus,:host ::ng-deep .p-password .p-inputtext:focus{border:1px solid rgba(0,157,253,.25);box-shadow:0 0 10px #00b3eb40}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b3eb}.hoveredInput,:host ::ng-deep .p-password .p-password-input:hover,:host ::ng-deep .p-password .p-inputtext:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error,:host ::ng-deep .p-password.w-password-error .p-password-input,:host ::ng-deep .p-password.w-password-error .p-inputtext{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-label-text-typography,.w-button-small-tertiary-label-text,.w-button-small-label-text-typography-sm{font-weight:600}.w-button-small-tertiary-label-text{color:#5f6468}.w-button-small-text-label-text{color:#1f2224}.w-button-small-icon-text{font-size:12px;font-weight:600}.w-table-button-small-icon-text{font-size:12px;color:#9aa0a7}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:600;line-height:16px}.w-button-medium-tertiary-label-text{color:#1f2224}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:600;line-height:24px}.w-button-large-tertiary-label-text{color:#1f2224}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text{color:#1f2224}.w-view-small-value-text{color:#5f6468}.w-input-no-label-height{height:14px}.w-input-disabled,:host ::ng-deep .p-password .p-password-input:disabled,:host ::ng-deep .p-password .p-inputtext:disabled{background-color:#f8f9fa!important;border-color:#e8ebee!important;opacity:.6!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:fit-content}.w-input-small-label-text,.w-input-small-label-disabled{color:#1f2224}.w-input-small-label-disabled{color:#9aa0a7}.w-input-small-label-text-content{padding:12px 8px 8px 0;margin:0}.w-input-small-label-text-content-no-top{padding-top:0}.w-input-small-placeholder-text,:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext{color:#1f2224}.w-input-small-placeholder-text-only-color{color:#9aa0a7;line-height:1.3333333333rem}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6468}.w-input-small-text-icon,.w-input-small-select-options-text{color:#1f2224}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#1f2224}.w-input-medium-label-disabled{color:#9aa0a7}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#1f2224}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6468}.w-input-medium-text-icon{color:#1f2224}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#1f2224}.w-input-success-alert-text{color:#00db5d;padding:8px 8px 0;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:0 4px;margin-top:-2px}.w-input-error-alert-text{color:#e50000;padding:0 4px;margin-top:-2px}.w-input-alert-message-height{height:32px}.w-error-message{color:#e50000;padding:0 4px;margin-top:-2px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#1f2224}.w-panel-content{color:#5f6468}.w-tab-text,.w-chip-text{color:#1f2224}.w-badge-text{font-size:10px;font-weight:700;line-height:8px}.w-table-th-text{color:#1f2224}.w-table-td-text{color:#5f6468}.w-table-height{padding:6px 8px 5px}.w-table-no-buttons-height{padding:16px 8px 15px!important}.w-tree-table-height{padding:8px 8px 7px}.w-image-file-uploader-navigators-text{font-size:12px;color:#fff}.grid{margin:0}::ng-deep .p-tooltip,.p-tooltip{filter:0px 0px 1px 0px rgba(0,0,0,.1) inset,1px 1px 5px rgba(0,0,0,.06),1px 1px 1px rgba(0,0,0,.08)}::ng-deep .p-tooltip .p-tooltip-text,.p-tooltip .p-tooltip-text{background:#fff!important;color:#1f2224;padding:12px 16px;max-width:192px;width:max-content;margin-left:3px;pointer-events:none}::ng-deep .p-tooltip.p-tooltip-left,.p-tooltip.p-tooltip-left{margin-right:6px;width:max-content;transform:translate(-6px)}::ng-deep .p-tooltip.p-tooltip-left .p-tooltip-arrow,.p-tooltip.p-tooltip-left .p-tooltip-arrow{border-left-color:#fff!important;top:50%;right:-3px;margin-top:-4px;border-width:4px 0 4px 6px!important}::ng-deep .p-tooltip.p-tooltip-right,.p-tooltip.p-tooltip-right{margin-left:6px;width:max-content;transform:translateY(-1px)}::ng-deep .p-tooltip.p-tooltip-right .p-tooltip-arrow,.p-tooltip.p-tooltip-right .p-tooltip-arrow{border-right-color:#fff!important;top:50%;left:0;margin-top:-4px;border-width:4px 6px 4px 0!important}::ng-deep .p-tooltip.p-tooltip-bottom .p-tooltip-arrow,.p-tooltip.p-tooltip-bottom .p-tooltip-arrow{border-bottom-color:#fff!important;border-width:0 4px 6px 4px!important;margin-top:-3px}.w-password-field{margin:0;display:grid;gap:6px!important;width:100%}:host{display:block;width:100%}:host ::ng-deep .p-password{width:100%;display:flex;position:relative}:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext{width:100%;height:28px!important;background-color:#fff;border:1px solid #e8ebee;border-radius:8px;padding:0 28px 0 8px;font-size:.9166666667rem}:host ::ng-deep .p-password .p-password-input:focus,:host ::ng-deep .p-password .p-inputtext:focus{border-radius:8px}:host ::ng-deep .p-password .p-password-input::-webkit-input-placeholder,:host ::ng-deep .p-password .p-inputtext::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext::-moz-placeholder{color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:-ms-input-placeholder,:host ::ng-deep .p-password .p-inputtext:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:-moz-placeholder{color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:focus::-webkit-input-placeholder,:host ::ng-deep .p-password .p-password-input:focus::-moz-placeholder,:host ::ng-deep .p-password .p-password-input:focus:-ms-input-placeholder,:host ::ng-deep .p-password .p-password-input:focus:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:focus::-webkit-input-placeholder,:host ::ng-deep .p-password .p-inputtext:focus::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:focus:-ms-input-placeholder,:host ::ng-deep .p-password .p-inputtext:focus:-moz-placeholder{color:transparent!important}:host ::ng-deep .p-password .p-password-toggle-mask-icon,:host ::ng-deep .p-password .p-password-icon,:host ::ng-deep .p-password .p-input-icon,:host ::ng-deep .p-password i{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer;color:#5f6468;font-size:.85rem;z-index:1;margin-top:0}:host ::ng-deep .p-password .p-password-toggle-mask-icon:hover,:host ::ng-deep .p-password .p-password-icon:hover,:host ::ng-deep .p-password .p-input-icon:hover,:host ::ng-deep .p-password i:hover{color:#005c7a}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$7.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: WInputLabelComponent, selector: "w-input-label", inputs: ["label", "disabled", "required", "validated", "tooltip", "tooltipPosition", "size", "labelStyleClass", "message"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'w-password', standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WPasswordComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"w-password-field p-fluid field\">\r\n  @if (showLabel && label) {\r\n    <w-input-label\r\n      [label]=\"label\"\r\n      [required]=\"required\"\r\n      [disabled]=\"disabled\"\r\n      [size]=\"size\"\r\n      [tooltip]=\"tooltip\"\r\n      [tooltipPosition]=\"tooltipPosition\"\r\n      [validated]=\"isRequiredValidNgModel()\">\r\n    </w-input-label>\r\n  }\r\n\r\n  <p-password\r\n    [ngModel]=\"value\"\r\n    (ngModelChange)=\"onModelChange($event)\"\r\n    [feedback]=\"feedback\"\r\n    [toggleMask]=\"toggleMask\"\r\n    [placeholder]=\"placeholder\"\r\n    [disabled]=\"disabled\"\r\n    [required]=\"required\"\r\n    [autocomplete]=\"autocomplete\"\r\n    [maxLength]=\"maxlength\"\r\n    [autofocus]=\"autofocus\"\r\n    [styleClass]=\"styleClass\"\r\n    [inputStyleClass]=\"inputStyleClass\"\r\n    [ngClass]=\"{'w-password-error': required && !value && isTouched}\"\r\n    (onBlur)=\"onInputBlur($event)\"\r\n    (onFocus)=\"onInputFocus($event)\"\r\n    (onInput)=\"onInputElement($event)\"\r\n    class=\"w-password-control\">\r\n  </p-password>\r\n</div>\r\n", styles: [".heading1{font-size:2.6666666667rem;line-height:3rem;font-weight:700}.heading2{font-size:2.3333333333rem;line-height:2.6666666667rem;font-weight:700}.heading3{font-size:2rem;line-height:2.3333333333rem;font-weight:700}.heading4{font-size:1.6666666667rem;line-height:2rem;font-weight:700}.heading5,.w-sidebar-title-text{font-size:1.5rem;line-height:1.8333333333rem;font-weight:700}.heading6{font-size:1.3333333333rem;line-height:1.6666666667rem;font-weight:700}.subtitle1,.w-tab-text,.w-panel-title-text{font-size:1.1666666667rem;line-height:1.3333333333rem;font-weight:700}.subtitle2,.w-table-th-text,.w-panel-subtitle-text,.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled,.w-view-small-label-text-typography,.w-view-small-label-text,.w-button-small-text-label-text-typography,.w-button-small-text-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:600}.body,.w-image-file-uploader-navigators-text,.w-table-td-text,.w-chip-text,.w-panel-content,.w-input-small-select-options-text,.w-input-small-placeholder-text-typography,.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text,:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext,.w-view-small-value-text-typography,.w-view-small-value-text,.w-button-small-label-text-typography,.w-button-small-tertiary-label-text{font-size:1rem;line-height:1.1666666667rem;font-weight:400}.caption,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,:host ::ng-deep .p-password .p-password-input:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:-moz-placeholder,:host ::ng-deep .p-password .p-password-input::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-error-message,.w-input-error-alert-text,.w-input-warning-alert-text,.w-button-small-label-text-typography-sm{font-size:.8333333333rem;line-height:1rem;font-weight:400}.textMainColor{color:#1f2224}.textSoftColor{color:#5f6468}.textSofterColor{color:#9aa0a7}.textSoftestColor{color:#e8ebee}.textInverseColor{color:#fff}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXSMDivider{height:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.panel-title-gap-divider{height:20px}.panel-section-gap-divider{height:32px}.input-vertical-gap-divider{height:24px}.input-label-gap-divider{height:6px}.focusedInput,:host ::ng-deep .p-password .p-password-input:focus,:host ::ng-deep .p-password .p-inputtext:focus{border:1px solid rgba(0,157,253,.25);box-shadow:0 0 10px #00b3eb40}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b3eb}.hoveredInput,:host ::ng-deep .p-password .p-password-input:hover,:host ::ng-deep .p-password .p-inputtext:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error,:host ::ng-deep .p-password.w-password-error .p-password-input,:host ::ng-deep .p-password.w-password-error .p-inputtext{border-radius:8px;border:1px solid #FFBDBD}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-button-small-label-text-typography,.w-button-small-tertiary-label-text,.w-button-small-label-text-typography-sm{font-weight:600}.w-button-small-tertiary-label-text{color:#5f6468}.w-button-small-text-label-text{color:#1f2224}.w-button-small-icon-text{font-size:12px;font-weight:600}.w-table-button-small-icon-text{font-size:12px;color:#9aa0a7}.w-control-button-small-label-text{font-size:12px;font-weight:600;line-height:16px}.w-control-button-x-small-icon-text{font-size:10px;font-weight:700}.w-control-button-small-icon-text{font-size:8px;font-weight:700}.w-button-medium-label-text-typography,.w-button-medium-tertiary-label-text{font-size:16px;font-weight:600;line-height:16px}.w-button-medium-tertiary-label-text{color:#1f2224}.w-button-medium-icon-text{font-size:16px}.w-control-button-medium-label-text{font-size:14px;font-weight:600;line-height:16px}.w-control-button-medium-icon-text{font-size:12px;font-weight:700}.w-button-large-label-text-typography,.w-button-large-tertiary-label-text{font-size:20px;font-weight:600;line-height:24px}.w-button-large-tertiary-label-text{color:#1f2224}.w-button-x-small-label-text{font-size:10px;font-weight:600;line-height:10px}.w-button-small-only-label-text{font-size:12px;font-weight:600;line-height:16px}.w-button-large-icon-text{font-size:24px}.w-view-small-label-text{color:#1f2224}.w-view-small-value-text{color:#5f6468}.w-input-no-label-height{height:14px}.w-input-disabled,:host ::ng-deep .p-password .p-password-input:disabled,:host ::ng-deep .p-password .p-inputtext:disabled{background-color:#f8f9fa!important;border-color:#e8ebee!important;opacity:.6!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:fit-content}.w-input-small-label-text,.w-input-small-label-disabled{color:#1f2224}.w-input-small-label-disabled{color:#9aa0a7}.w-input-small-label-text-content{padding:12px 8px 8px 0;margin:0}.w-input-small-label-text-content-no-top{padding-top:0}.w-input-small-placeholder-text,:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext{color:#1f2224}.w-input-small-placeholder-text-only-color{color:#9aa0a7;line-height:1.3333333333rem}.w-input-small-placeholder-text-disabled,.w-input-small-placeholder-text-disabled-only-color{color:#5f6468}.w-input-small-text-icon,.w-input-small-select-options-text{color:#1f2224}.w-input-medium-label-text-typography,.w-input-medium-label-text,.w-input-medium-label-disabled{font-size:14px;font-weight:600;line-height:16px}.w-input-medium-label-text,.w-input-medium-label-disabled{color:#1f2224}.w-input-medium-label-disabled{color:#9aa0a7}.w-input-medium-placeholder-text-typography,.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,.w-input-medium-placeholder-text-only-color{color:#1f2224}.w-input-medium-placeholder-text-disabled,.w-input-medium-placeholder-text-disabled-only-color{color:#5f6468}.w-input-medium-text-icon{color:#1f2224}.w-input-medium-select-options-text{font-size:16px;font-weight:400;line-height:24px;color:#1f2224}.w-input-success-alert-text{color:#00db5d;padding:8px 8px 0;margin-top:0}.w-input-warning-alert-text{color:#eeae00;padding:0 4px;margin-top:-2px}.w-input-error-alert-text{color:#e50000;padding:0 4px;margin-top:-2px}.w-input-alert-message-height{height:32px}.w-error-message{color:#e50000;padding:0 4px;margin-top:-2px}.w-sidebar-title-text,.w-panel-title-text,.w-panel-subtitle-text{color:#1f2224}.w-panel-content{color:#5f6468}.w-tab-text,.w-chip-text{color:#1f2224}.w-badge-text{font-size:10px;font-weight:700;line-height:8px}.w-table-th-text{color:#1f2224}.w-table-td-text{color:#5f6468}.w-table-height{padding:6px 8px 5px}.w-table-no-buttons-height{padding:16px 8px 15px!important}.w-tree-table-height{padding:8px 8px 7px}.w-image-file-uploader-navigators-text{font-size:12px;color:#fff}.grid{margin:0}::ng-deep .p-tooltip,.p-tooltip{filter:0px 0px 1px 0px rgba(0,0,0,.1) inset,1px 1px 5px rgba(0,0,0,.06),1px 1px 1px rgba(0,0,0,.08)}::ng-deep .p-tooltip .p-tooltip-text,.p-tooltip .p-tooltip-text{background:#fff!important;color:#1f2224;padding:12px 16px;max-width:192px;width:max-content;margin-left:3px;pointer-events:none}::ng-deep .p-tooltip.p-tooltip-left,.p-tooltip.p-tooltip-left{margin-right:6px;width:max-content;transform:translate(-6px)}::ng-deep .p-tooltip.p-tooltip-left .p-tooltip-arrow,.p-tooltip.p-tooltip-left .p-tooltip-arrow{border-left-color:#fff!important;top:50%;right:-3px;margin-top:-4px;border-width:4px 0 4px 6px!important}::ng-deep .p-tooltip.p-tooltip-right,.p-tooltip.p-tooltip-right{margin-left:6px;width:max-content;transform:translateY(-1px)}::ng-deep .p-tooltip.p-tooltip-right .p-tooltip-arrow,.p-tooltip.p-tooltip-right .p-tooltip-arrow{border-right-color:#fff!important;top:50%;left:0;margin-top:-4px;border-width:4px 6px 4px 0!important}::ng-deep .p-tooltip.p-tooltip-bottom .p-tooltip-arrow,.p-tooltip.p-tooltip-bottom .p-tooltip-arrow{border-bottom-color:#fff!important;border-width:0 4px 6px 4px!important;margin-top:-3px}.w-password-field{margin:0;display:grid;gap:6px!important;width:100%}:host{display:block;width:100%}:host ::ng-deep .p-password{width:100%;display:flex;position:relative}:host ::ng-deep .p-password .p-password-input,:host ::ng-deep .p-password .p-inputtext{width:100%;height:28px!important;background-color:#fff;border:1px solid #e8ebee;border-radius:8px;padding:0 28px 0 8px;font-size:.9166666667rem}:host ::ng-deep .p-password .p-password-input:focus,:host ::ng-deep .p-password .p-inputtext:focus{border-radius:8px}:host ::ng-deep .p-password .p-password-input::-webkit-input-placeholder,:host ::ng-deep .p-password .p-inputtext::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext::-moz-placeholder{color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:-ms-input-placeholder,:host ::ng-deep .p-password .p-inputtext:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:-moz-placeholder{color:#9aa0a7!important}:host ::ng-deep .p-password .p-password-input:focus::-webkit-input-placeholder,:host ::ng-deep .p-password .p-password-input:focus::-moz-placeholder,:host ::ng-deep .p-password .p-password-input:focus:-ms-input-placeholder,:host ::ng-deep .p-password .p-password-input:focus:-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:focus::-webkit-input-placeholder,:host ::ng-deep .p-password .p-inputtext:focus::-moz-placeholder,:host ::ng-deep .p-password .p-inputtext:focus:-ms-input-placeholder,:host ::ng-deep .p-password .p-inputtext:focus:-moz-placeholder{color:transparent!important}:host ::ng-deep .p-password .p-password-toggle-mask-icon,:host ::ng-deep .p-password .p-password-icon,:host ::ng-deep .p-password .p-input-icon,:host ::ng-deep .p-password i{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer;color:#5f6468;font-size:.85rem;z-index:1;margin-top:0}:host ::ng-deep .p-password .p-password-toggle-mask-icon:hover,:host ::ng-deep .p-password .p-password-icon:hover,:host ::ng-deep .p-password .p-input-icon:hover,:host ::ng-deep .p-password i:hover{color:#005c7a}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: ['label']
+            }], showLabel: [{
+                type: Input,
+                args: ['showLabel']
+            }], placeholder: [{
+                type: Input,
+                args: ['placeholder']
+            }], disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], required: [{
+                type: Input,
+                args: ['required']
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], tooltip: [{
+                type: Input,
+                args: ['tooltip']
+            }], tooltipPosition: [{
+                type: Input,
+                args: ['tooltipPosition']
+            }], toggleMask: [{
+                type: Input,
+                args: ['toggleMask']
+            }], feedback: [{
+                type: Input,
+                args: ['feedback']
+            }], autocomplete: [{
+                type: Input,
+                args: ['autocomplete']
+            }], maxlength: [{
+                type: Input,
+                args: ['maxlength']
+            }], minlength: [{
+                type: Input,
+                args: ['minlength']
+            }], autofocus: [{
+                type: Input,
+                args: ['autofocus']
+            }], styleClass: [{
+                type: Input,
+                args: ['styleClass']
+            }], inputStyleClass: [{
+                type: Input,
+                args: ['inputStyleClass']
+            }], valueChange: [{
+                type: Output,
+                args: ['valueChange']
+            }], onInput: [{
+                type: Output,
+                args: ['onInput']
+            }], onBlur: [{
+                type: Output,
+                args: ['onBlur']
+            }], onFocus: [{
+                type: Output,
+                args: ['onFocus']
+            }] } });
+
 var WappingServiceType;
 (function (WappingServiceType) {
     WappingServiceType[WappingServiceType["Identity"] = 1] = "Identity";
@@ -12506,13 +12653,13 @@ class WappMaterialServiceViewComponent {
         var element = document.getElementById("serviceDescription");
         return element != null ? element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: MaterialModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$8.DomSanitizer }, { token: MaterialModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WappMaterialServiceViewComponent, isStandalone: false, selector: "wapp-material-service-view", inputs: { wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService" }, ngImport: i0, template: "@if(wappingService){\r\n  <wapp-main-title title=\"{{wappingService.tile3}}\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(wappingService.tile1){\r\n          <div class=\"service-image-title\"\r\n              [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n              [style.color]=\"wappingService.tile1ForegroundColor\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div>{{wappingService.tile1}}</div>\r\n            @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              class=\"service-tile\"\r\n              [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n              [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n              [style.color]=\"wappingService.tile2ForegroundColor\">\r\n            <div>{{wappingService.tile2}}</div>\r\n            @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n          </div>\r\n        }\r\n        \r\n        @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\"  >\r\n                {{ wappingServicesTranslations.scheduledLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\" >\r\n                {{ wappingServicesTranslations.sendLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        @if(isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\" >\r\n                {{ wappingServicesTranslations.receivedLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(showButtonService){\r\n          <button mat-flat-button \r\n                  class=\"service-view-button\"\r\n                  color=\"accent\"\r\n                  fxFlex=\"100\" fxHide fxShow.xs\r\n                  [disabled]=\"disabledButtonService\"\r\n                  (click)=\"pressButtonService()\">\r\n\r\n              <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n                        <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                    </div>\r\n              <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n                  <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                  <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n              </div>\r\n              <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    @if(wappingService.tile3 || wappingService.tile4){\r\n      <div class=\"service-info-container\" fxLayout=\"column\">\r\n          <div class=\"service-description-container\">\r\n          <!--tile 3-->\r\n          @if(wappingService.tile3){\r\n            <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n                {{wappingService.tile3}}\r\n            </div>\r\n          }\r\n          <!--tile 4-->\r\n          @if(wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n            <div class=\"service-description\" id=\"serviceDescription\">\r\n                {{wappingService.tile4}}\r\n            </div>\r\n          }\r\n          @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n            <div class=\"service-description\">\r\n                {{ wappingServicesTranslations.cardGenerated }}\r\n            </div>\r\n          }\r\n          <!--show more-->\r\n          @if(isOverflown()){\r\n            <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n                <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n            </div>\r\n          }\r\n          </div>\r\n          <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n          <!--tileDetail 1-->\r\n          @if(wappingService.tileDetail1){\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n                <span>{{wappingService.tileDetail1}}</span>\r\n            </div>\r\n          }\r\n          <!--tileDetail 2-->\r\n          @if(wappingService.tileDetail2){\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n                <span>{{wappingService.tileDetail2}}</span>\r\n            </div>\r\n          }\r\n          </div>\r\n          <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n              <button mat-flat-button\r\n                      class=\"service-view-button\"\r\n                      color=\"accent\"\r\n                      [disabled]=\"disabledButtonService\"\r\n                      (click)=\"pressButtonService()\">\r\n\r\n                  <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n                      <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                  </div>\r\n                  <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n                      <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                      <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                  </div>\r\n                  <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n              </button>\r\n          </div>\r\n          <!--link-->\r\n          @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n            <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n            </div>\r\n          }\r\n      </div>\r\n    }\r\n</div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$3.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$3.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$3.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$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappMaterialServiceViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wapp-material-service-view', standalone: false, template: "@if(wappingService){\r\n  <wapp-main-title title=\"{{wappingService.tile3}}\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n    fxLayout=\"row\" fxLayout.xs=\"column\" fxLayout.sm=\"column\">\r\n    <!--service image-->\r\n    <div class=\"service-view\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(wappingService.tile1){\r\n          <div class=\"service-image-title\"\r\n              [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n              [style.color]=\"wappingService.tile1ForegroundColor\"\r\n              fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div>{{wappingService.tile1}}</div>\r\n            @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel [images]=\"wappingServiceImages\"></wapp-carousel>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              class=\"service-tile\"\r\n              [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4}\"\r\n              [style.background-color]=\"wappingService.tile2BackgroundColor\"\r\n              [style.color]=\"wappingService.tile2ForegroundColor\">\r\n            <div>{{wappingService.tile2}}</div>\r\n            @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n          </div>\r\n        }\r\n        \r\n        @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend) && wappingService?.enumTypeStatusECardID == ecardStatus.sent! ){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\"  >\r\n                {{ wappingServicesTranslations.scheduledLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        @if(isSendGiftCard && (wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration) && wappingService?.enumTypeStatusECardID == ecardStatus.sent){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\" >\r\n                {{ wappingServicesTranslations.sendLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        @if(isSendGiftCard && wappingService?.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent && wappingService?.enumTypeStatusECardID == ecardStatus.activated){\r\n          <div class=\"card-header-status-container sendLabel-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n            <div class=\"sendLabel\" >\r\n                {{ wappingServicesTranslations.receivedLabel }}\r\n            </div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(showButtonService){\r\n          <button mat-flat-button \r\n                  class=\"service-view-button\"\r\n                  color=\"accent\"\r\n                  fxFlex=\"100\" fxHide fxShow.xs\r\n                  [disabled]=\"disabledButtonService\"\r\n                  (click)=\"pressButtonService()\">\r\n\r\n              <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n                        <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                    </div>\r\n              <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n                  <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                  <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n              </div>\r\n              <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n          </button>\r\n        }\r\n        \r\n    </div>\r\n    <!--service info-->\r\n    @if(wappingService.tile3 || wappingService.tile4){\r\n      <div class=\"service-info-container\" fxLayout=\"column\">\r\n          <div class=\"service-description-container\">\r\n          <!--tile 3-->\r\n          @if(wappingService.tile3){\r\n            <div class=\"service-name mat-title\" fxHide fxShow.xs>\r\n                {{wappingService.tile3}}\r\n            </div>\r\n          }\r\n          <!--tile 4-->\r\n          @if(wappingService.tile4 && wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n            <div class=\"service-description\" id=\"serviceDescription\">\r\n                {{wappingService.tile4}}\r\n            </div>\r\n          }\r\n          @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n            <div class=\"service-description\">\r\n                {{ wappingServicesTranslations.cardGenerated }}\r\n            </div>\r\n          }\r\n          <!--show more-->\r\n          @if(isOverflown()){\r\n            <div class=\"service-show-more-container\" (click)=\"openModalShowMoreDescription();\">\r\n                <span>{{wappingServicesTranslations.showMore }}</span><mat-icon class=\"service-show-more-vector\" svgIcon=\"vector_right\"></mat-icon>\r\n            </div>\r\n          }\r\n          </div>\r\n          <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n          <!--tileDetail 1-->\r\n          @if(wappingService.tileDetail1){\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"calendar\"></mat-icon>\r\n                <span>{{wappingService.tileDetail1}}</span>\r\n            </div>\r\n          }\r\n          <!--tileDetail 2-->\r\n          @if(wappingService.tileDetail2){\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <mat-icon class=\"service-tile-detail-icon\" svgIcon=\"tickets\"></mat-icon>\r\n                <span>{{wappingService.tileDetail2}}</span>\r\n            </div>\r\n          }\r\n          </div>\r\n          <div class=\"service-view-container-button\" fxHide.xs *ngIf=\"showButtonService\">\r\n              <button mat-flat-button\r\n                      class=\"service-view-button\"\r\n                      color=\"accent\"\r\n                      [disabled]=\"disabledButtonService\"\r\n                      (click)=\"pressButtonService()\">\r\n\r\n                  <div class=\"service-view-icon\" *ngIf=\"isMemberGetMember\">\r\n                      <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                  </div>\r\n                  <div class=\"service-view-icon\" *ngIf=\"isDraw\">\r\n                      <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                      <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                  </div>\r\n                  <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n              </button>\r\n          </div>\r\n          <!--link-->\r\n          @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n            <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n            </div>\r\n          }\r\n      </div>\r\n    }\r\n</div>\r\n}", styles: [":host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-title{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left}.service-info-container{width:100%}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:12px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: MaterialModalService }], propDecorators: { wappingServicesTranslations: [{
+        }], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$8.DomSanitizer }, { type: MaterialModalService }], propDecorators: { wappingServicesTranslations: [{
                 type: Input,
                 args: ['wappingServicesTranslations']
             }], disabledButtonService: [{
@@ -12734,13 +12881,13 @@ class WMaterialServiceCardComponent {
     isWFileImage(obj) {
         return obj.base64 !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$8.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WMaterialServiceCardComponent, isStandalone: false, 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" }, providers: [DialogService], usesOnChanges: true, ngImport: i0, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" \r\n  [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        tile1\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    } -->\r\n    @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-image-title\">\r\n        <div class=\"tile-no-html\" \r\n            [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title service-card-image-title-html\">\r\n        <div class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\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\" class=\"card-header\">\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n      </div>\r\n      <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: ["@media(max-width:599px){.service-card{width:100%}}@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-tile2{word-break:break-word}.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;-moz-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: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$3.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$3.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$3.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: 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: "21.2.5", ngImport: i0, type: WMaterialServiceCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'w-material-service-card', standalone: false, providers: [DialogService], template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"isDevModeActive ? setImage() : cardOnClick(wappingService)\" \r\n  [pTooltip]=\"onHoverImageTooltip\" tooltipPosition=\"top\" [tooltipDisabled]=\"!isDevModeActive\">\r\n  <div class=\"service-card-header\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    <!-- @if(wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title\"\r\n          fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        tile1\r\n        <div [ngClass]=\"{'tile-no-html': !hasHtml(wappingService.tile1)}\" class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    } -->\r\n    @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-image-title\">\r\n        <div class=\"tile-no-html\" \r\n            [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\r\n    @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != ''){\r\n      <div class=\"service-card-image-title service-card-image-title-html\">\r\n        <div class=\"service-card-tile1\"\r\n          [innerHtml]=\"wappingService.tile1\"></div>\r\n      </div>\r\n    }\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\" class=\"card-header\">\r\n      <div class=\"card-header-benefits\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <div class=\"service-card-tile2\" [innerHTML]=\"wappingService.tile2\"></div>\r\n      </div>\r\n      <div fxflex=\"\" style=\"flex: 1 1 0%; box-sizing: border-box;\"></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!--tile3-->\r\n    @if(wappingService.tile3){\r\n      <div class=\"card-header-description\">\r\n          <div [innerHtml]=\"wappingService.tile3\"></div>\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}\r\n", styles: ["@media(max-width:599px){.service-card{width:100%}}@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-tile2{word-break:break-word}.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;-moz-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: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { isDevModeActive: [{
+        }], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$8.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { isDevModeActive: [{
                 type: Input
             }], wappingServicesTranslations: [{
                 type: Input
@@ -12843,13 +12990,13 @@ class WappMaterialServiceCardComponent {
     cardOnClick(service) {
         this.cardClicked.emit(service);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappMaterialServiceCardComponent, deps: [{ token: i1$6.Router }, { token: i2$d.MatIconRegistry }, { token: i3$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WappMaterialServiceCardComponent, isStandalone: false, selector: "wapp-material-service-card", inputs: { wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    @if(wappingService.tile1){\r\n      <div class=\"service-card-image-title\"\r\n           [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n           [style.color]=\"wappingService.tile1ForegroundColor\"\r\n           fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <!--tile1-->\r\n        <div>{{wappingService.tile1}}</div>\r\n        @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n      </div>\r\n    }\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        @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(!wappingService.allowSelect && wappingService.type != 6){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n        </div>\r\n      }\r\n      @if(!allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend){\r\n            <div class=\"sendLabel\"  >\r\n              {{ wappingTranslations.scheduledLabel }}\r\n            </div>\r\n          }\r\n          @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration){\r\n            <div class=\"sendLabel\" >\r\n              {{ wappingTranslations.sendLabel }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\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    @if(wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n      <div class=\"card-header-detail\">\r\n        {{wappingService.tile4}}\r\n      </div>\r\n    }\r\n    @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n      <div class=\"card-header-detail\">\r\n        {{ wappingTranslations.cardGenerated }}\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}", styles: ["@media(max-width:599px){.service-card{width:100%}}@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;-moz-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;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"], dependencies: [{ kind: "component", type: i7$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7$4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$3.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$3.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$3.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$3.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: "21.2.5", ngImport: i0, type: WappMaterialServiceCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wapp-material-service-card', standalone: false, template: "@if(wappingServiceReady){\r\n<mat-card class=\"service-card\" (click)=\"cardOnClick(wappingService)\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n    @if(wappingService.tile1){\r\n      <div class=\"service-card-image-title\"\r\n           [style.background-color]=\"wappingService.tile1BackgroundColor\"\r\n           [style.color]=\"wappingService.tile1ForegroundColor\"\r\n           fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n        <!--tile1-->\r\n        <div>{{wappingService.tile1}}</div>\r\n        @if(wappingService.showTile1Label){<div>{{wappingService.tile1Label}}</div>}\r\n      </div>\r\n    }\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        @if(wappingService.showTile2Label){<div>{{wappingService.tile2Label}}</div>}\r\n      </div>\r\n      <div fxFlex></div>\r\n      <!--status-->\r\n      @if(wappingService.allowSelect && allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(!wappingService.allowSelect && wappingService.type != 6){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n          @if(!wappingService.active){\r\n            <div class=\"card-header-status\">\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          }\r\n        </div>\r\n      }\r\n      @if(!allowSelectSendGiftCard){\r\n        <div class=\"card-header-status-container\" fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n          @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.ScheduledToSend){\r\n            <div class=\"sendLabel\"  >\r\n              {{ wappingTranslations.scheduledLabel }}\r\n            </div>\r\n          }\r\n          @if(wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.Sent || wappingService.dataReqToSendCard!.enumSendingStatusId == enumSendingStatus.PendingRegistration){\r\n            <div class=\"sendLabel\" >\r\n              {{ wappingTranslations.sendLabel }}\r\n            </div>\r\n          }\r\n        </div>\r\n      }\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    @if(wappingService.enumTypeStatusECardID != ecardStatus.generated){\r\n      <div class=\"card-header-detail\">\r\n        {{wappingService.tile4}}\r\n      </div>\r\n    }\r\n    @if(wappingService.enumTypeStatusECardID == ecardStatus.generated){\r\n      <div class=\"card-header-detail\">\r\n        {{ wappingTranslations.cardGenerated }}\r\n      </div>\r\n    }\r\n  </mat-card-header>\r\n</mat-card>\r\n}", styles: ["@media(max-width:599px){.service-card{width:100%}}@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;-moz-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;-moz-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }], propDecorators: { wappingServicesTranslations: [{
+        }], ctorParameters: () => [{ type: i1$6.Router }, { type: i2$d.MatIconRegistry }, { type: i3$8.DomSanitizer }], propDecorators: { wappingServicesTranslations: [{
                 type: Input
             }], wappingService: [{
                 type: Input
@@ -13103,13 +13250,13 @@ class WMaterialServiceViewComponent {
     isWFileImage(obj) {
         return obj.base64 !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$7.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i2$d.MatIconRegistry }, { token: i3$8.DomSanitizer }, { token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WMaterialServiceViewComponent, isStandalone: false, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", disabledButtonService: "disabledButtonService", showButtonService: "showButtonService", showToggle: "showToggle", lotteryEvent: "lotteryEvent", wappingService: "wappingService", isDevModeActive: "isDevModeActive", defaultImage: "defaultImage", croppedImageConfiguration: "croppedImageConfiguration", croppedDialogTranslations: "croppedDialogTranslations", isNoImage: "isNoImage", onHoverImageTooltip: "onHoverImageTooltip" }, outputs: { wappingServiceSelected: "wappingServiceSelected", triggerButtonService: "triggerButtonService", onDefaultImageEvent: "onDefaultImageEvent" }, providers: [DialogService], usesOnChanges: true, ngImport: i0, template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\r\n          <div class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n\r\n        @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\r\n          <div class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel *ngIf=\"!isStampBookletService\"\r\n          [isDevModeActive]=\"isDevModeActive\" \r\n          [forceMobile]=\"forceMobile\" \r\n          [images]=\"wappingServiceImages\" \r\n          [isNoImage]=\"isNoImage\" \r\n          (onSetImageEvent)=\"setImage()\" \r\n          [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n        <!--stamp booklet-->\r\n        <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n          [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\">\r\n              <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(showButtonService){\r\n          <button mat-flat-button \r\n                  class=\"service-view-button\"\r\n                  color=\"accent\"\r\n                  fxFlex=\"100\" fxHide fxShow.xs\r\n                  [disabled]=\"disabledButtonService\"\r\n                  (click)=\"pressButtonService()\">\r\n              @if(isMemberGetMember){\r\n                <div class=\"service-view-icon\">\r\n                    <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                </div>\r\n              }\r\n              @if(isDrawService){\r\n                <div class=\"service-view-icon\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n              }\r\n              <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n          </button>\r\n        }        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            @if(!forceMobile){\r\n              <div \r\n                  [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                  class=\"service-name mat-title\">\r\n              </div>\r\n            }\r\n            @if(forceMobile){\r\n              <div \r\n                  [innerHtml]=\"wappingService.tile3\"\r\n                  class=\"service-name mat-title\">\r\n              </div>\r\n            }\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            @if(showButtonService){\r\n              <div class=\"service-view-container-button\" fxHide.xs>\r\n                  <button mat-flat-button\r\n                          class=\"service-view-button\"\r\n                          color=\"accent\"\r\n                          [disabled]=\"disabledButtonService\"\r\n                          (click)=\"pressButtonService()\">\r\n                      @if(isMemberGetMember){\r\n                        <div class=\"service-view-icon\">\r\n                            <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                        </div>\r\n                      }\r\n                      @if(isDrawService){\r\n                        <div class=\"service-view-icon\">\r\n                            <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                            <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                        </div>\r\n                      }\r\n                      <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                  </button>\r\n              </div>\r\n            }\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}.mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button.mdc-button{border-radius:6px!important}.service-view-button .mdc-button__label{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-icon{display:flex}@media(max-width:599px){.service-view-button{margin:8px 12px!important}}@media(min-width:600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$d.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$3.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$3.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$3.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$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i9$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height", "isDevModeActive", "isNoImage", "onHoverImageTooltip"], outputs: ["onSetImageEvent"] }, { kind: "component", type: WStampBookletComponent, selector: "w-stamp-booklet", inputs: ["config"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'w-material-service-view', standalone: false, encapsulation: ViewEncapsulation.None, providers: [DialogService], template: "@if(wappingService && (!forceMobile)){\r\n  <wapp-main-title [title]=\"wappingService.tile3\" fxHide.xs></wapp-main-title>\r\n}\r\n@if(wappingService){\r\n<div class=\"service-detail-center\" \r\n        [ngClass]=\"{'force-mobile': forceMobile}\"\r\n        [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n        [fxLayout.xs]=\"'column'\"\r\n        [fxLayout.sm]=\"'column'\">\r\n    <!--service image-->\r\n    <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n        <!--tile 1-->\r\n        @if(!hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\r\n          <div class=\"service-image-title\">\r\n            <div class=\"service-view-tile1-no-html\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n\r\n        @if(hasHtml(wappingService.tile1) && wappingService.tile1 && wappingService.tile1 != '' && !isStampBookletService){\r\n          <div class=\"template-service-image-tile service-card-image-title\">\r\n            <div class=\"service-view-tile1\" [innerHTML]=\"wappingService.tile1\"></div>\r\n          </div>\r\n        }\r\n        <!--slideshow-->\r\n        <wapp-carousel *ngIf=\"!isStampBookletService\"\r\n          [isDevModeActive]=\"isDevModeActive\" \r\n          [forceMobile]=\"forceMobile\" \r\n          [images]=\"wappingServiceImages\" \r\n          [isNoImage]=\"isNoImage\" \r\n          (onSetImageEvent)=\"setImage()\" \r\n          [onHoverImageTooltip]=\"onHoverImageTooltip\"></wapp-carousel>\r\n\r\n        <!--stamp booklet-->\r\n        <w-stamp-booklet *ngIf=\"isStampBookletService\"\r\n          [config]=\"wappingService.stampBookletConfig!\"></w-stamp-booklet>\r\n        <!--tile 2-->\r\n        @if(wappingService.tile2 && wappingService.tile2 != '' && !isStampBookletService){\r\n          <div fxFlex fxLayout=\"row\"\r\n              fxLayoutAlign=\"center center\"\r\n              fxLayoutGap=\"5px\"\r\n              [ngClass]=\"{'template-service-tile': hasHtml(wappingService.tile2),\r\n                  'service-tile' : !hasHtml(wappingService.tile2)}\">\r\n              <div class=\"service-view-tile2\" [innerHtml]=\"wappingService.tile2\"></div>\r\n          </div>\r\n        }\r\n        <!--activate toggle-->\r\n        @if(wappingService.allowSelect && allowSelectSendGiftCard && !showButtonService && showToggle){\r\n          <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n                          [disabled]=\"disabledToggle\"\r\n                          [(ngModel)]=\"wappingService.active\"\r\n                          (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n        }\r\n        @if(showButtonService){\r\n          <button mat-flat-button \r\n                  class=\"service-view-button\"\r\n                  color=\"accent\"\r\n                  fxFlex=\"100\" fxHide fxShow.xs\r\n                  [disabled]=\"disabledButtonService\"\r\n                  (click)=\"pressButtonService()\">\r\n              @if(isMemberGetMember){\r\n                <div class=\"service-view-icon\">\r\n                    <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                </div>\r\n              }\r\n              @if(isDrawService){\r\n                <div class=\"service-view-icon\">\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                    <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                </div>\r\n              }\r\n              <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n          </button>\r\n        }        \r\n    </div>\r\n    <!--service info-->\r\n    <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n        <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n        <!--tile 3-->\r\n            @if(!forceMobile){\r\n              <div \r\n                  [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n                  class=\"service-name mat-title\">\r\n              </div>\r\n            }\r\n            @if(forceMobile){\r\n              <div \r\n                  [innerHtml]=\"wappingService.tile3\"\r\n                  class=\"service-name mat-title\">\r\n              </div>\r\n            }\r\n            <!--tileDetail 1-->\r\n            <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n                <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n            </div>\r\n            @if(showButtonService){\r\n              <div class=\"service-view-container-button\" fxHide.xs>\r\n                  <button mat-flat-button\r\n                          class=\"service-view-button\"\r\n                          color=\"accent\"\r\n                          [disabled]=\"disabledButtonService\"\r\n                          (click)=\"pressButtonService()\">\r\n                      @if(isMemberGetMember){\r\n                        <div class=\"service-view-icon\">\r\n                            <mat-icon class=\"member-get-member-share-button-icon\">share</mat-icon>\r\n                        </div>\r\n                      }\r\n                      @if(isDrawService){\r\n                        <div class=\"service-view-icon\">\r\n                            <mat-icon class=\"service-view-participation-icon\" *ngIf=\"firstParticipation\" svgIcon=\"participate\"></mat-icon>\r\n                            <mat-icon class=\"service-view-participation-icon\" *ngIf=\"!firstParticipation\" svgIcon=\"participate-again\"></mat-icon>\r\n                        </div>\r\n                      }\r\n                      <span class=\"service-view-button-label\">{{ wappingServicesTranslations?.buttonService }}</span>\r\n                  </button>\r\n              </div>\r\n            }\r\n        </div>\r\n        <!--link-->\r\n        @if(wappingService.titleLinkUrl && wappingService.linkUrl){\r\n          <div class=\"service-link-container\">\r\n            <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n                <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n            </a>\r\n          </div>\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}.mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}.mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}.mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media(max-width:959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media(min-width:600px)and (max-width:959px){.service-view{margin-right:0;width:100%}}@media(max-width:599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute!important;width:100%!important;min-height:32px!important;top:0!important;z-index:9!important}.service-image-title{position:absolute;top:0!important;right:0!important;left:0!important;z-index:2;margin:0 60px!important;min-height:22px!important;border-radius:0 0 4.3118px 4.3118px!important;background-color:#0e0c0c;color:#fff;display:flex;justify-content:center;align-items:center;padding:4px}.service-view-tile1-no-html{justify-content:center!important;align-items:center!important;display:flex!important;text-align:center!important}.service-view-tile1{width:100%;min-height:32px}.service-tile{background-color:#0e0c0c;color:#fff;padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.template-service-tile{max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-view-tile2{width:100%}::ng-deep .service-view-tile2 *{box-sizing:border-box!important}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-view-button{padding:10px 20px!important;align-items:center;justify-content:center}.service-view-button.mdc-button{border-radius:6px!important}.service-view-button .mdc-button__label{display:flex!important;align-items:center;justify-content:center;gap:8px}.service-view-button .service-view-icon{display:flex}@media(max-width:599px){.service-view-button{margin:8px 12px!important}}@media(min-width:600px){.service-view-button{padding:10px 34px!important;height:auto!important;line-height:normal!important;min-width:150px}}.service-view-container-button{display:flex;justify-content:flex-start;align-items:start;margin:12px 0}.service-info-container{width:100%}.service-info-container-padding{padding-right:15px;padding-left:15px}@media(max-width:599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-name{margin-top:30px;margin-right:0}}@media(max-width:599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;-moz-box-orient:vertical}@media(min-width:600px)and (max-width:959px){.service-description{margin-top:20px;margin-right:0}}@media(max-width:599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media(max-width:599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media(max-width:599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media(max-width:599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media(max-width:599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media(min-width:600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media(max-width:599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}.participation-detail-container{margin:16px 0;width:100%}.participation-detail-desktop-bar{border-radius:8px;padding:12px 24px;box-shadow:0 2px 4px #0000000d;gap:8px;display:flex;justify-content:flex-start;align-items:center}.participation-detail-value{margin-right:auto}.participation-detail-date{margin-left:4px}.participation-detail-container-mobile{padding:4px 12px!important}.participation-detail-mobile-card{border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:4px}.participation-date-row{width:100%;text-align:center;padding-bottom:8px}.card-bottom-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.numbers-section{display:flex;flex-direction:column;flex:1}.numbers-list-vertical{display:flex;flex-direction:column;margin-top:4px;max-height:120px;overflow-y:auto}.number-item{padding:2px 0}.numbers-title{margin:0;text-transform:none}.card-icon-right{display:flex;justify-content:center;align-items:center;margin-left:10px}.card-icon-right mat-icon{width:50px!important;height:50px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$7.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { forceMobile: [{
+        }], ctorParameters: () => [{ type: i2$d.MatIconRegistry }, { type: i3$8.DomSanitizer }, { type: i1$8.DialogService }], propDecorators: { forceMobile: [{
                 type: Input
             }], wappingServicesTranslations: [{
                 type: Input,
@@ -13302,6 +13449,7 @@ class WappComponentsModule {
             QueryEmptyWarningDirective,
             QueryArrowIconDirective,
             WDataviewComponent,
+            WPasswordComponent,
             CarouselComponent,
             WStampBookletComponent], imports: [InputTextModule,
             FormsModule,
@@ -13334,6 +13482,7 @@ class WappComponentsModule {
             SelectButtonModule,
             InputGroupModule,
             InputGroupAddonModule,
+            PasswordModule,
             ImageModule,
             FileUploadModule,
             SliderModule,
@@ -13492,6 +13641,8 @@ class WappComponentsModule {
             InputIconModule,
             InputGroupModule,
             InputGroupAddonModule,
+            PasswordModule,
+            WPasswordComponent,
             DataViewModule,
             WDataviewComponent,
             WStampBookletComponent,
@@ -13536,6 +13687,7 @@ class WappComponentsModule {
             SelectButtonModule,
             InputGroupModule,
             InputGroupAddonModule,
+            PasswordModule,
             ImageModule,
             FileUploadModule,
             SliderModule,
@@ -13590,6 +13742,7 @@ class WappComponentsModule {
             InputIconModule,
             InputGroupModule,
             InputGroupAddonModule,
+            PasswordModule,
             DataViewModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WappComponentsModule, decorators: [{
@@ -13702,6 +13855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         QueryEmptyWarningDirective,
                         QueryArrowIconDirective,
                         WDataviewComponent,
+                        WPasswordComponent,
                         CarouselComponent,
                         WStampBookletComponent
                     ],
@@ -13832,6 +13986,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         InputIconModule,
                         InputGroupModule,
                         InputGroupAddonModule,
+                        PasswordModule,
+                        WPasswordComponent,
                         DataViewModule,
                         WDataviewComponent,
                         WStampBookletComponent,
@@ -13869,6 +14025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         SelectButtonModule,
                         InputGroupModule,
                         InputGroupAddonModule,
+                        PasswordModule,
                         ImageModule,
                         FileUploadModule,
                         SliderModule,
@@ -14066,5 +14223,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddressEnum, CONTROL_VALUE_ACCESSOR, CardStatus, CarouselComponent, ClipboardService, ColorService, ColorTextPipe, CronCharactersType, CronFieldType, CronPeriodicityType, CustomColor, DataTypeEnum, DateConversionService, FileService, FormControlService, MainTitleComponent, ModalService, NotificationsEventEnum, NumberConversionService, OperatorEnum, PeriodSelectEnum, QBDataTypeEnum, QueryArrowIconDirective, QueryBuilderComponent, QueryButtonGroupDirective, QueryEmptyWarningDirective, QueryEntityDirective, QueryFieldDirective, QueryInputDirective, QueryOperatorDirective, QueryRemoveButtonDirective, QueryResultType, QuerySwitchGroupDirective, SendingStatus, SessionStorageService, TableColumnFilterTypes, TableColumnTypes, TreeService, TypeMedia, VALIDATOR, WAddressFieldComponent, WAutocompleteSearchComponent, WBadgeComponent, WBodyComponent, WBodyContainerComponent, WBodyGridComponent, WButtonComponent, WButtonTabviewComponent, WButtonWeekComponent, WButtonsFooterComponent, WCardComponent, WChartBarComponent, WChipComponent, WClipboardComponent, WCodeBlockComponent, WContainerComponent, WCronExpressionsComponent, WCurrencyPipe, WDataviewComponent, WDatePipe, WDatePipeFormatType, WDatePipeReturnType, WEditCalendarComponent, WEditCalendarMonthComponent, WEditCheckboxComponent, WEditInputColorpickerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditInputgroupComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFileGeneratorComponent, WFileUploaderComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputLabelComponent, WInputSearchComponent, WInputVerticalGapDividerComponent, WLogosComponent, WMapsComponent, WMaterialServiceCardComponent, WMaterialServiceViewComponent, WNavbarComponent, WNotificationsEventFieldComponent, WPanelComponent, WPanelGridComponent, WPanelSectionGapDividerComponent, WPanelSubtitleComponent, WPanelTitleComponent, WParameterSelectorComponent, WPercentagePipe, WPeriodSelectFieldComponent, WPowerbiReportComponent, WPreviewImageComponent, WRadioButtonComponent, WSelectButtonComponent, WSidebarComponent, WSkeletonEditComponent, WSkeletonEditProductComponent, WSkeletonFormComponent, WSkeletonGenericComponent, WSkeletonIframeComponent, WSkeletonInputGenericComponent, WSkeletonListComponent, WSkeletonPowerbiReportComponent, WSkeletonProfileSidebarComponent, WSkeletonQueryBuilderComponent, WSkeletonSidebarComponent, WSkeletonTimelineComponent, WSkeletonTreeComponent, WSkeletonUserProfileInfoSidebarComponent, WStampBookletComponent, WSummaryPipe, WTableComponent, WTableLazyComponent, WTabviewComponent, WTimelineComponent, WToggleButtonComponent, WTreeComponent, WTreeFieldComponent, WTreeTableComponent, WViewBadgeComponent, WViewBooleanComponent, WViewTextComponent, WWizardComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappMaterialServiceCardComponent, WappMaterialServiceViewComponent, WappModalCloseButtonComponent, WappModalTitleComponent, WappServiceDescriptionComponent, WappTableColumnAlignTypes, WappingServiceAppViewType, WappingServiceSubtype, WappingServiceType };
+export { AddressEnum, CONTROL_VALUE_ACCESSOR, CardStatus, CarouselComponent, ClipboardService, ColorService, ColorTextPipe, CronCharactersType, CronFieldType, CronPeriodicityType, CustomColor, DataTypeEnum, DateConversionService, FileService, FormControlService, MainTitleComponent, ModalService, NotificationsEventEnum, NumberConversionService, OperatorEnum, PeriodSelectEnum, QBDataTypeEnum, QueryArrowIconDirective, QueryBuilderComponent, QueryButtonGroupDirective, QueryEmptyWarningDirective, QueryEntityDirective, QueryFieldDirective, QueryInputDirective, QueryOperatorDirective, QueryRemoveButtonDirective, QueryResultType, QuerySwitchGroupDirective, SendingStatus, SessionStorageService, TableColumnFilterTypes, TableColumnTypes, TreeService, TypeMedia, VALIDATOR, WAddressFieldComponent, WAutocompleteSearchComponent, WBadgeComponent, WBodyComponent, WBodyContainerComponent, WBodyGridComponent, WButtonComponent, WButtonTabviewComponent, WButtonWeekComponent, WButtonsFooterComponent, WCardComponent, WChartBarComponent, WChipComponent, WClipboardComponent, WCodeBlockComponent, WContainerComponent, WCronExpressionsComponent, WCurrencyPipe, WDataviewComponent, WDatePipe, WDatePipeFormatType, WDatePipeReturnType, WEditCalendarComponent, WEditCalendarMonthComponent, WEditCheckboxComponent, WEditInputColorpickerComponent, WEditInputNumberComponent, WEditInputTextComponent, WEditInputTextareaComponent, WEditInputgroupComponent, WEditMultiselectComponent, WEditSelectComponent, WEditToggleComponent, WEditTreeselectComponent, WFileGeneratorComponent, WFileUploaderComponent, WFilterPanelComponent, WFooterComponent, WHeaderPanelComponent, WIconsComponent, WImageCropperComponent, WImageFileUploaderComponent, WInputLabelComponent, WInputSearchComponent, WInputVerticalGapDividerComponent, WLogosComponent, WMapsComponent, WMaterialServiceCardComponent, WMaterialServiceViewComponent, WNavbarComponent, WNotificationsEventFieldComponent, WPanelComponent, WPanelGridComponent, WPanelSectionGapDividerComponent, WPanelSubtitleComponent, WPanelTitleComponent, WParameterSelectorComponent, WPasswordComponent, WPercentagePipe, WPeriodSelectFieldComponent, WPowerbiReportComponent, WPreviewImageComponent, WRadioButtonComponent, WSelectButtonComponent, WSidebarComponent, WSkeletonEditComponent, WSkeletonEditProductComponent, WSkeletonFormComponent, WSkeletonGenericComponent, WSkeletonIframeComponent, WSkeletonInputGenericComponent, WSkeletonListComponent, WSkeletonPowerbiReportComponent, WSkeletonProfileSidebarComponent, WSkeletonQueryBuilderComponent, WSkeletonSidebarComponent, WSkeletonTimelineComponent, WSkeletonTreeComponent, WSkeletonUserProfileInfoSidebarComponent, WStampBookletComponent, WSummaryPipe, WTableComponent, WTableLazyComponent, WTabviewComponent, WTimelineComponent, WToggleButtonComponent, WTreeComponent, WTreeFieldComponent, WTreeTableComponent, WViewBadgeComponent, WViewBooleanComponent, WViewTextComponent, WWizardComponent, WappComponentsComponent, WappComponentsModule, WappComponentsService, WappMaterialServiceCardComponent, WappMaterialServiceViewComponent, WappModalCloseButtonComponent, WappModalTitleComponent, WappServiceDescriptionComponent, WappTableColumnAlignTypes, WappingServiceAppViewType, WappingServiceSubtype, WappingServiceType };
 //# sourceMappingURL=ngx-wapp-components.mjs.map