ngx-wapp-components 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2020/lib/edit/w-edit-input-textarea/w-edit-input-textarea.component.mjs +2 -2
  2. package/esm2020/lib/material/w-material-service-view/w-material-service-view.component.mjs +2 -2
  3. package/fesm2015/ngx-wapp-components.mjs +4 -4
  4. package/fesm2015/ngx-wapp-components.mjs.map +1 -1
  5. package/fesm2020/ngx-wapp-components.mjs +4 -4
  6. package/fesm2020/ngx-wapp-components.mjs.map +1 -1
  7. package/package.json +1 -1
package/esm2020/lib/edit/w-edit-input-textarea/w-edit-input-textarea.component.mjs CHANGED
@@ -64,7 +64,7 @@ WEditInputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
64
64
  useExisting: forwardRef(() => WEditInputTextareaComponent),
65
65
  multi: true
66
66
  }
67
- ], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\"></w-input-label>\r\n <textarea pInputTextarea \r\n [ngClass]=\"{'w-edit-input-textarea-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-medium-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n class=\"w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message-height w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</small>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValid()\"></w-input-label> \r\n <textarea pInputTextarea\r\n [ngClass]=\"{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n [rows]=\"rows\"\r\n class=\"w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</span>\r\n <span *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\"\r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\" \r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.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,::ng-deep .w-edit-input-textarea-small.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-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,.w-edit-input-textarea-small:-moz-placeholder,.w-edit-input-textarea-small::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-input-alert-message,.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,.w-edit-input-textarea-medium:focus,.w-edit-input-textarea-small: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,.w-edit-input-textarea-medium:hover,.w-edit-input-textarea-small:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid,.w-edit-input-textarea-medium-valid,.w-edit-input-textarea-small-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus,.w-edit-input-textarea-medium-valid:focus,.w-edit-input-textarea-small-valid:focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning,.w-edit-input-textarea-medium-warning,.w-edit-input-textarea-small-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,.w-edit-input-textarea-medium.p-inputtext.ng-dirty.ng-invalid,.w-edit-input-textarea-small.p-inputtext.ng-dirty.ng-invalid{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,.w-edit-input-textarea-small:disabled{background-color:#f1f3f4!important;border-color:#e8ebee!important;opacity:1!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:-moz-fit-content;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,::ng-deep .w-edit-input-textarea-small.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,::ng-deep .w-edit-input-textarea-medium.p-inputtext{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,::ng-deep .w-edit-input-textarea-medium.p-inputtext{color:#1f2224}.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:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.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:#ffffff!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-edit-input-textarea-height{margin:0;display:grid;gap:6px!important}.w-edit-input-textarea-small-height{height:120px!important}::ng-deep .w-edit-input-textarea-small.p-inputtext{border-radius:8px;border-width:1px;padding:8px!important;border:1px solid #e8ebee;height:92px;overflow-y:auto!important}.w-edit-input-textarea-small::-webkit-scrollbar{width:8px}.w-edit-input-textarea-small::-webkit-scrollbar-track{background:#fcfcfc;border-radius:0 7px 7px 0}.w-edit-input-textarea-small::-webkit-scrollbar-thumb{background-color:silver;border-radius:7px}.w-edit-input-textarea-small::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small::-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small:-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:focus{border-radius:8px;padding-left:12px}.w-edit-input-textarea-small:focus::-webkit-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus::-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-ms-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small-valid:focus{padding-left:12px}.w-input-alert-message{margin-top:4px;padding:0 4px}.w-edit-input-textarea-medium-height{height:180px!important}::ng-deep .w-edit-input-textarea-medium.p-inputtext{border-radius:8px;padding:7px 15px 16px!important;border:1px solid #e8ebee}.w-edit-input-textarea-medium::-webkit-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium::-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-ms-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:focus{padding-left:16px}.w-edit-input-textarea-medium:focus::-webkit-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus::-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-ms-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:disabled{background-color:#f1f3f4;border:1px solid #e8ebee;color:#bdc1c6;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { 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: i5.WInputLabelComponent, selector: "w-input-label", inputs: ["label", "disabled", "required", "validated", "tooltip", "tooltipPosition", "size", "labelStyleClass", "message"] }] });
67
+ ], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\"></w-input-label>\r\n <textarea pInputTextarea \r\n [ngClass]=\"{'w-edit-input-textarea-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-medium-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n class=\"w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message-height w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</small>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValid()\"></w-input-label> \r\n <textarea pInputTextarea\r\n [ngClass]=\"{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n [rows]=\"rows\"\r\n class=\"w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</span>\r\n <span *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\"\r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\" \r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.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,::ng-deep .w-edit-input-textarea-small.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-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,.w-edit-input-textarea-small:-moz-placeholder,.w-edit-input-textarea-small::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-input-alert-message,.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,.w-edit-input-textarea-medium:focus,.w-edit-input-textarea-small: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,.w-edit-input-textarea-medium:hover,.w-edit-input-textarea-small:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid,.w-edit-input-textarea-medium-valid,.w-edit-input-textarea-small-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus,.w-edit-input-textarea-medium-valid:focus,.w-edit-input-textarea-small-valid:focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning,.w-edit-input-textarea-medium-warning,.w-edit-input-textarea-small-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,.w-edit-input-textarea-medium.p-inputtext.ng-dirty.ng-invalid,.w-edit-input-textarea-small.p-inputtext.ng-dirty.ng-invalid{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,.w-edit-input-textarea-small:disabled{background-color:#f1f3f4!important;border-color:#e8ebee!important;opacity:1!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:-moz-fit-content;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,::ng-deep .w-edit-input-textarea-small.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,::ng-deep .w-edit-input-textarea-medium.p-inputtext{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,::ng-deep .w-edit-input-textarea-medium.p-inputtext{color:#1f2224}.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:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.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:#ffffff!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-edit-input-textarea-height{margin:0;display:grid;gap:6px!important}.w-edit-input-textarea-small-height{height:120px!important}::ng-deep .w-edit-input-textarea-small.p-inputtext{border-radius:8px;border-width:1px;padding:8px!important;border:1px solid #e8ebee;min-height:92px;overflow-y:auto!important}.w-edit-input-textarea-small::-webkit-scrollbar{width:8px}.w-edit-input-textarea-small::-webkit-scrollbar-track{background:#fcfcfc;border-radius:0 7px 7px 0}.w-edit-input-textarea-small::-webkit-scrollbar-thumb{background-color:silver;border-radius:7px}.w-edit-input-textarea-small::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small::-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small:-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:focus{border-radius:8px;padding-left:12px}.w-edit-input-textarea-small:focus::-webkit-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus::-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-ms-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small-valid:focus{padding-left:12px}.w-input-alert-message{margin-top:4px;padding:0 4px}.w-edit-input-textarea-medium-height{height:180px!important}::ng-deep .w-edit-input-textarea-medium.p-inputtext{border-radius:8px;padding:7px 15px 16px!important;border:1px solid #e8ebee}.w-edit-input-textarea-medium::-webkit-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium::-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-ms-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:focus{padding-left:16px}.w-edit-input-textarea-medium:focus::-webkit-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus::-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-ms-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:disabled{background-color:#f1f3f4;border:1px solid #e8ebee;color:#bdc1c6;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { 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: i5.WInputLabelComponent, selector: "w-input-label", inputs: ["label", "disabled", "required", "validated", "tooltip", "tooltipPosition", "size", "labelStyleClass", "message"] }] });
68
68
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WEditInputTextareaComponent, decorators: [{
69
69
  type: Component,
70
70
  args: [{ selector: 'w-edit-input-textarea', providers: [
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
73
73
  useExisting: forwardRef(() => WEditInputTextareaComponent),
74
74
  multi: true
75
75
  }
76
- ], template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\"></w-input-label>\r\n <textarea pInputTextarea \r\n [ngClass]=\"{'w-edit-input-textarea-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-medium-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n class=\"w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message-height w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</small>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValid()\"></w-input-label> \r\n <textarea pInputTextarea\r\n [ngClass]=\"{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n [rows]=\"rows\"\r\n class=\"w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</span>\r\n <span *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\"\r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\" \r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.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,::ng-deep .w-edit-input-textarea-small.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-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,.w-edit-input-textarea-small:-moz-placeholder,.w-edit-input-textarea-small::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-input-alert-message,.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,.w-edit-input-textarea-medium:focus,.w-edit-input-textarea-small: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,.w-edit-input-textarea-medium:hover,.w-edit-input-textarea-small:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid,.w-edit-input-textarea-medium-valid,.w-edit-input-textarea-small-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus,.w-edit-input-textarea-medium-valid:focus,.w-edit-input-textarea-small-valid:focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning,.w-edit-input-textarea-medium-warning,.w-edit-input-textarea-small-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,.w-edit-input-textarea-medium.p-inputtext.ng-dirty.ng-invalid,.w-edit-input-textarea-small.p-inputtext.ng-dirty.ng-invalid{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,.w-edit-input-textarea-small:disabled{background-color:#f1f3f4!important;border-color:#e8ebee!important;opacity:1!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:-moz-fit-content;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,::ng-deep .w-edit-input-textarea-small.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,::ng-deep .w-edit-input-textarea-medium.p-inputtext{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,::ng-deep .w-edit-input-textarea-medium.p-inputtext{color:#1f2224}.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:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.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:#ffffff!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-edit-input-textarea-height{margin:0;display:grid;gap:6px!important}.w-edit-input-textarea-small-height{height:120px!important}::ng-deep .w-edit-input-textarea-small.p-inputtext{border-radius:8px;border-width:1px;padding:8px!important;border:1px solid #e8ebee;height:92px;overflow-y:auto!important}.w-edit-input-textarea-small::-webkit-scrollbar{width:8px}.w-edit-input-textarea-small::-webkit-scrollbar-track{background:#fcfcfc;border-radius:0 7px 7px 0}.w-edit-input-textarea-small::-webkit-scrollbar-thumb{background-color:silver;border-radius:7px}.w-edit-input-textarea-small::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small::-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small:-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:focus{border-radius:8px;padding-left:12px}.w-edit-input-textarea-small:focus::-webkit-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus::-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-ms-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small-valid:focus{padding-left:12px}.w-input-alert-message{margin-top:4px;padding:0 4px}.w-edit-input-textarea-medium-height{height:180px!important}::ng-deep .w-edit-input-textarea-medium.p-inputtext{border-radius:8px;padding:7px 15px 16px!important;border:1px solid #e8ebee}.w-edit-input-textarea-medium::-webkit-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium::-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-ms-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:focus{padding-left:16px}.w-edit-input-textarea-medium:focus::-webkit-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus::-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-ms-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:disabled{background-color:#f1f3f4;border:1px solid #e8ebee;color:#bdc1c6;opacity:1}\n"] }]
76
+ ], template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\"></w-input-label>\r\n <textarea pInputTextarea \r\n [ngClass]=\"{'w-edit-input-textarea-medium-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-medium-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-medium-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n class=\"w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message-height w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message-height w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</small>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValid()\"></w-input-label> \r\n <textarea pInputTextarea\r\n [ngClass]=\"{'w-edit-input-textarea-small-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-edit-input-textarea-small-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-edit-input-textarea-small-warning': formControl.invalid && (formControl.hasError('minlength') || formControl.hasError('maxlength') || formControl.hasError('pattern')),\r\n 'flex flex-1 h-max': !autoResize}\"\r\n [autoResize]=\"autoResize\"\r\n [rows]=\"rows\"\r\n class=\"w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <!-- <small *ngIf=\"formControl.valid && formControl.touched\" class=\"w-input-alert-message-height w-full w-input-success-alert-text p-error block\">{{successMessage}}</small> -->\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('maxlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{maxlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('minlength')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{minlengthErrorDescription}}</span>\r\n <span *ngIf=\"formControl.invalid && formControl.hasError('pattern')\" class=\"w-input-alert-message w-full w-input-warning-alert-text p-error block\">{{patternErrorDescription}}</span>\r\n <span *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"w-input-alert-message w-full w-input-error-alert-text p-error block\">{{requiredErrorDescription}}</span>\r\n </ng-template>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column w-edit-input-textarea-medium-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\"\r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-medium\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column w-edit-input-textarea-height\">\r\n <w-input-label [label]=\"label\" [required]=\"required\" [message]=\"message\" [disabled]=\"disabled\" [size]=\"size\" [tooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" *ngIf=\"showLabel\" [validated]=\"isRequiredValidNgModel()\"></w-input-label>\r\n <textarea pInputTextarea\r\n [disabled]=\"disabled\"\r\n minlength=\"{{minlength}}\"\r\n maxlength=\"{{maxlength}}\" \r\n pattern=\"{{pattern}}\"\r\n [autoResize]=\"autoResize\"\r\n [required]=\"required\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 h-max w-edit-input-textarea-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [(ngModel)]=\"value\"\r\n (input)=\"onValueChanged()\"\r\n [disabled]=\"disabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"w-input-alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.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,::ng-deep .w-edit-input-textarea-small.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-error-alert-text,.w-input-warning-alert-text,.w-input-success-alert-text{font-size:.6666666667rem;line-height:1rem;font-weight:400}.light,.w-edit-input-textarea-small:-moz-placeholder,.w-edit-input-textarea-small::-moz-placeholder,.w-input-small-placeholder-text-only-color{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300}.small,.w-input-alert-message,.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,.w-edit-input-textarea-medium:focus,.w-edit-input-textarea-small: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,.w-edit-input-textarea-medium:hover,.w-edit-input-textarea-small:hover{border-radius:8px;border:1px solid rgba(0,179,235,.5)}.input-generic-valid,.w-edit-input-textarea-medium-valid,.w-edit-input-textarea-small-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus,.w-edit-input-textarea-medium-valid:focus,.w-edit-input-textarea-small-valid:focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning,.w-edit-input-textarea-medium-warning,.w-edit-input-textarea-small-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,.w-edit-input-textarea-medium.p-inputtext.ng-dirty.ng-invalid,.w-edit-input-textarea-small.p-inputtext.ng-dirty.ng-invalid{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,.w-edit-input-textarea-small:disabled{background-color:#f1f3f4!important;border-color:#e8ebee!important;opacity:1!important}.w-input-small-label-text-typography,.w-input-small-label-text,.w-input-small-label-disabled{height:-moz-fit-content;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,::ng-deep .w-edit-input-textarea-small.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,::ng-deep .w-edit-input-textarea-medium.p-inputtext{font-size:16px;font-weight:400;line-height:24px}.w-input-medium-placeholder-text,::ng-deep .w-edit-input-textarea-medium.p-inputtext{color:#1f2224}.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:8px 8px 0;margin-top:0}.w-input-error-alert-text{color:#e50000;padding:8px 8px 0;margin-top:0}.w-input-alert-message-height{height:32px}.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:#ffffff!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-edit-input-textarea-height{margin:0;display:grid;gap:6px!important}.w-edit-input-textarea-small-height{height:120px!important}::ng-deep .w-edit-input-textarea-small.p-inputtext{border-radius:8px;border-width:1px;padding:8px!important;border:1px solid #e8ebee;min-height:92px;overflow-y:auto!important}.w-edit-input-textarea-small::-webkit-scrollbar{width:8px}.w-edit-input-textarea-small::-webkit-scrollbar-track{background:#fcfcfc;border-radius:0 7px 7px 0}.w-edit-input-textarea-small::-webkit-scrollbar-thumb{background-color:silver;border-radius:7px}.w-edit-input-textarea-small::-webkit-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small::-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:-ms-input-placeholder{font-size:.9166666667rem;line-height:1.0833333333rem;font-weight:300;color:#9aa0a7!important}.w-edit-input-textarea-small:-moz-placeholder{color:#9aa0a7!important}.w-edit-input-textarea-small:focus{border-radius:8px;padding-left:12px}.w-edit-input-textarea-small:focus::-webkit-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus::-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-ms-input-placeholder{color:transparent!important}.w-edit-input-textarea-small:focus:-moz-placeholder{color:transparent!important}.w-edit-input-textarea-small-valid:focus{padding-left:12px}.w-input-alert-message{margin-top:4px;padding:0 4px}.w-edit-input-textarea-medium-height{height:180px!important}::ng-deep .w-edit-input-textarea-medium.p-inputtext{border-radius:8px;padding:7px 15px 16px!important;border:1px solid #e8ebee}.w-edit-input-textarea-medium::-webkit-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium::-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-ms-input-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:-moz-placeholder{color:#5f6468!important}.w-edit-input-textarea-medium:focus{padding-left:16px}.w-edit-input-textarea-medium:focus::-webkit-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus::-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-ms-input-placeholder{color:transparent}.w-edit-input-textarea-medium:focus:-moz-placeholder{color:transparent}.w-edit-input-textarea-medium:disabled{background-color:#f1f3f4;border:1px solid #e8ebee;color:#bdc1c6;opacity:1}\n"] }]
77
77
  }], propDecorators: { label: [{
78
78
  type: Input,
79
79
  args: ['label']
package/esm2020/lib/material/w-material-service-view/w-material-service-view.component.mjs CHANGED
@@ -100,10 +100,10 @@ export class WMaterialServiceViewComponent {
100
100
  }
101
101
  }
102
102
  WMaterialServiceViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
103
- WMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceViewComponent, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected" }, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n [ngClass]=\"{'force-mobile': forceMobile}\"\r\n [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n [fxLayout.xs]=\"'column'\"\r\n [fxLayout.sm]=\"'column'\">\r\n <!--service image-->\r\n <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n <div [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n 'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div [innerHtml]=\"wappingService.tile1\"></div>\r\n </div>\r\n <!--slideshow-->\r\n <wapp-carousel [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\"></wapp-carousel>\r\n <!--tile 2-->\r\n <div fxFlex fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"5px\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n 'template-service-tile': hasHtml(wappingService.tile2),\r\n 'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n *ngIf=\"wappingService.tile2\">\r\n <div [innerHtml]=\"wappingService.tile2\"></div>\r\n </div>\r\n <!--activate toggle-->\r\n <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\"\r\n [disabled]=\"disabledToggle\"\r\n [(ngModel)]=\"wappingService.active\"\r\n (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n </div>\r\n <!--service info-->\r\n <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tile 3-->\r\n <div *ngIf=\"!forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n class=\"service-name mat-title\">\r\n </div>\r\n <div *ngIf=\"forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\"\r\n class=\"service-name mat-title\">\r\n </div>\r\n <!--tileDetail 1-->\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n </div>\r\n </div>\r\n <!--link-->\r\n <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.template-service-image-tile{position:relative;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7.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: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i7.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i8.MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: i9.CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
103
+ WMaterialServiceViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WMaterialServiceViewComponent, selector: "w-material-service-view", inputs: { forceMobile: "forceMobile", wappingServicesTranslations: "wappingServicesTranslations", wappingService: "wappingService" }, outputs: { wappingServiceSelected: "wappingServiceSelected" }, ngImport: i0, template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n [ngClass]=\"{'force-mobile': forceMobile}\"\r\n [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n [fxLayout.xs]=\"'column'\"\r\n [fxLayout.sm]=\"'column'\">\r\n <!--service image-->\r\n <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n <div [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n 'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div [innerHtml]=\"wappingService.tile1\"></div>\r\n </div>\r\n <!--slideshow-->\r\n <wapp-carousel [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\"></wapp-carousel>\r\n <!--tile 2-->\r\n <div fxFlex fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"5px\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n 'template-service-tile': hasHtml(wappingService.tile2),\r\n 'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n *ngIf=\"wappingService.tile2\">\r\n <div [innerHtml]=\"wappingService.tile2\"></div>\r\n </div>\r\n <!--activate toggle-->\r\n <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\"\r\n [disabled]=\"disabledToggle\"\r\n [(ngModel)]=\"wappingService.active\"\r\n (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n </div>\r\n <!--service info-->\r\n <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tile 3-->\r\n <div *ngIf=\"!forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n class=\"service-name mat-title\">\r\n </div>\r\n <div *ngIf=\"forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\"\r\n class=\"service-name mat-title\">\r\n </div>\r\n <!--tileDetail 1-->\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n </div>\r\n </div>\r\n <!--link-->\r\n <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.template-service-image-tile{position:relative;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i6.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7.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: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i7.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i8.MainTitleComponent, selector: "wapp-main-title", inputs: ["title", "extraClassToApply"] }, { kind: "component", type: i9.CarouselComponent, selector: "wapp-carousel", inputs: ["images", "allowThumbnail", "infiniteCarousel", "forceMobile", "height"] }] });
104
104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WMaterialServiceViewComponent, decorators: [{
105
105
  type: Component,
106
- args: [{ selector: 'w-material-service-view', template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n [ngClass]=\"{'force-mobile': forceMobile}\"\r\n [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n [fxLayout.xs]=\"'column'\"\r\n [fxLayout.sm]=\"'column'\">\r\n <!--service image-->\r\n <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n <div [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n 'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div [innerHtml]=\"wappingService.tile1\"></div>\r\n </div>\r\n <!--slideshow-->\r\n <wapp-carousel [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\"></wapp-carousel>\r\n <!--tile 2-->\r\n <div fxFlex fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"5px\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n 'template-service-tile': hasHtml(wappingService.tile2),\r\n 'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n *ngIf=\"wappingService.tile2\">\r\n <div [innerHtml]=\"wappingService.tile2\"></div>\r\n </div>\r\n <!--activate toggle-->\r\n <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\"\r\n [disabled]=\"disabledToggle\"\r\n [(ngModel)]=\"wappingService.active\"\r\n (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n </div>\r\n <!--service info-->\r\n <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tile 3-->\r\n <div *ngIf=\"!forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n class=\"service-name mat-title\">\r\n </div>\r\n <div *ngIf=\"forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\"\r\n class=\"service-name mat-title\">\r\n </div>\r\n <!--tileDetail 1-->\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n </div>\r\n </div>\r\n <!--link-->\r\n <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:70px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.template-service-image-tile{position:relative;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"] }]
106
+ args: [{ selector: 'w-material-service-view', template: "<wapp-main-title [title]=\"wappingService.tile3\" *ngIf=\"wappingService && (!forceMobile)\" fxHide.xs></wapp-main-title>\r\n<div class=\"service-detail-center\" *ngIf=\"wappingService\"\r\n [ngClass]=\"{'force-mobile': forceMobile}\"\r\n [fxLayout]=\"forceMobile ? 'column' : 'row'\"\r\n [fxLayout.xs]=\"'column'\"\r\n [fxLayout.sm]=\"'column'\">\r\n <!--service image-->\r\n <div [ngClass]=\"{'service-view-no-margin': forceMobile, 'service-view': !forceMobile}\" fxLayout=\"column\">\r\n <!--tile 1-->\r\n <div [ngClass]=\"{'service-image-tile' : !hasHtml(wappingService.tile1),\r\n 'template-service-image-tile' : hasHtml(wappingService.tile1)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile1) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n fxLayout=\"row\" fxLayoutGap=\"5px\">\r\n <div [innerHtml]=\"wappingService.tile1\"></div>\r\n </div>\r\n <!--slideshow-->\r\n <wapp-carousel [forceMobile]=\"forceMobile\" [images]=\"wappingServiceImages\"></wapp-carousel>\r\n <!--tile 2-->\r\n <div fxFlex fxLayout=\"row\"\r\n fxLayoutAlign=\"center center\"\r\n fxLayoutGap=\"5px\"\r\n [ngClass]=\"{'service-tile-border-bottom-radius': !wappingService.tile4,\r\n 'template-service-tile': hasHtml(wappingService.tile2),\r\n 'service-tile' : !hasHtml(wappingService.tile2)}\"\r\n [ngStyle]=\"!hasHtml(wappingService.tile2) ? { 'background-color': '#0e0c0c', 'color': '#fff' } : {'background-color': 'transparent !important', 'color': 'transparent !important'}\"\r\n *ngIf=\"wappingService.tile2\">\r\n <div [innerHtml]=\"wappingService.tile2\"></div>\r\n </div>\r\n <!--activate toggle-->\r\n <mat-slide-toggle class=\"service-select-toggle\" color=\"accent\"\r\n *ngIf=\"wappingService.allowSelect && allowSelectSendGiftCard\"\r\n [disabled]=\"disabledToggle\"\r\n [(ngModel)]=\"wappingService.active\"\r\n (change)=\"selectWappingService()\">{{ serviceStatus }}</mat-slide-toggle>\r\n </div>\r\n <!--service info-->\r\n <div class=\"service-info-container\" [ngClass]=\"{'service-info-container-padding': forceMobile}\" fxLayout=\"column\">\r\n <div class=\"service-tile-detail-container\" fxLayout=\"column\">\r\n <!--tile 3-->\r\n <div *ngIf=\"!forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\" fxHide fxShow.xs\r\n class=\"service-name mat-title\">\r\n </div>\r\n <div *ngIf=\"forceMobile\"\r\n [innerHtml]=\"wappingService.tile3\"\r\n class=\"service-name mat-title\">\r\n </div>\r\n <!--tileDetail 1-->\r\n <div class=\"service-tile-detail\" fxLayout=\"row\">\r\n <span [innerHtml]=\"wappingService.tileDetail1\"></span>\r\n </div>\r\n </div>\r\n <!--link-->\r\n <div class=\"service-link-container\" *ngIf=\"wappingService.titleLinkUrl && wappingService.linkUrl\">\r\n <a class=\"service-link\" href=\"{{wappingService.linkUrl}}\" target=\"_blank\">\r\n <mat-icon class=\"service-link-icon\" svgIcon=\"share_square\"></mat-icon><span>{{wappingService.titleLinkUrl}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n</div>", styles: [".back-button{width:20px!important;height:20px!important;background-color:#a5000000;padding:0;border:none;cursor:pointer}.back-button-over-image{width:37px!important;height:37px!important;background-color:#ffffffb0;position:absolute;top:13px;left:11px;z-index:10;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}::ng-deep .back-button .mat-button-wrapper,::ng-deep .back-button-over-image .mat-button-wrapper{padding:4px 0!important}.back-button .mat-button-wrapper,.back-button-over-image .mat-button-wrapper{line-height:14px!important}.back-button .mat-icon{width:20px;height:20px}.back-button-over-image .mat-icon{width:16px;height:16px}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:before{background:var(--mdc-switch-unselected-track-color, #a50000)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #fff))!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track:after{background:var(--mdc-switch-selected-hover-track-color, #10c638)!important}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle:after{background:var(--mdc-switch-unselected-handle-color, #fff)!important}:host ::ng-deep .mdc-form-field>label{font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch{margin-right:8px!important}@media (max-width: 959px){.service-detail-center{align-items:center}}.service-view{position:relative;margin-right:30px}.service-view-no-margin{position:relative;margin-right:0!important}@media (min-width: 600px) and (max-width: 959px){.service-view{margin-right:0;width:100%}}@media (max-width: 599px){.service-view{margin-right:0;width:100%}}.service-image-tile,.template-service-image-tile{position:absolute;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.template-service-image-tile{position:relative;margin-left:60px;margin-right:60px;height:32px;top:0;left:0;right:0;z-index:99;display:flex;border-radius:0 0 4.3118px 4.3118px;justify-content:center;align-items:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.service-tile,.template-service-tile{padding:14px;max-height:48px;display:flex;align-items:center;text-align:center;font:400 15px/17px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;text-transform:uppercase}.service-tile-border-bottom-radius{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.service-select-toggle{margin-top:25px;margin-right:auto;margin-left:auto;display:flex;align-items:center;text-align:left;max-width:none!important}.service-select-toggle *{max-width:none!important}.service-info-container{width:100%;height:250px}.service-info-container-padding{padding-right:15px;padding-left:15px}@media (max-width: 599px){.service-info-container{padding-right:15px;padding-left:15px}}.service-name{margin-top:0;text-align:justify;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-name{margin-top:30px;margin-right:0}}@media (max-width: 599px){.service-name{margin-top:30px;margin-right:0}}.service-description{margin-top:0;text-align:left;white-space:pre-line;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}@media (min-width: 600px) and (max-width: 959px){.service-description{margin-top:20px;margin-right:0}}@media (max-width: 599px){.service-description{margin-top:15px;margin-right:0}}.service-show-more-container{margin-top:5px;width:-moz-fit-content;width:fit-content;align-items:center;cursor:pointer;display:flex;text-align:left}.service-show-more-vector{width:5px!important;margin-left:10px}.service-tile-detail-container{margin-top:5px;display:flex;text-align:justify}@media (max-width: 599px){.service-tile-detail-container{margin-top:20px}}.service-tile-detail{margin-top:20px;font:400 14px/25px Inter,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}@media (max-width: 599px){.service-tile-detail{margin-top:20px}}.service-tile-detail-icon{margin-right:10px}.service-link-container{height:100%;justify-content:flex-end;align-items:flex-end;display:flex;text-align:justify}@media (max-width: 599px){.service-link-container{margin-top:20px;justify-content:flex-start}}.service-link{display:flex;align-items:center;cursor:pointer;text-decoration:none;color:inherit}.service-link-icon{margin-right:10px}.service-options-container{border-top:1px solid #eee;margin-top:80px}@media (max-width: 599px){.service-options-container{margin-top:40px;padding-right:15px;padding-left:15px}}.service-option{height:48px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;text-align:left}.service-option-vector{width:10px!important}.actions-container{margin-top:40px}.actions-button{display:flex;align-items:center;text-align:justify}.actions-button-text{margin-left:10px}.sendLabel{margin:10px auto;display:flex;justify-content:center;align-items:center;text-align:center}.sendCard-container{flex-wrap:wrap}.sendCard-container mat-icon{width:24px}@media (min-width: 600px){.sendCard-container{display:flex;justify-content:flex-end}.sentCard-container{display:flex;justify-content:end}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:8px}}@media (max-width: 599px){.sendCard-container{display:flex;justify-content:center}.send-button{width:auto;display:flex;justify-content:center;align-items:center;margin-left:0}.sentCard-container{display:flex;justify-content:space-evenly}}\n"] }]
107
107
  }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { forceMobile: [{
108
108
  type: Input
109
109
  }], wappingServicesTranslations: [{