ngx-wapp-components 1.0.20 → 1.0.21
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.
- package/esm2020/lib/button/w-button/w-button.component.mjs +2 -2
- package/esm2020/lib/button/w-buttons-footer/w-buttons-footer.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-input-number/w-edit-input-number.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-input-text/w-edit-input-text.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-input-textarea/w-edit-input-textarea.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-multiselect/w-edit-multiselect.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-select/w-edit-select.component.mjs +2 -2
- package/esm2020/lib/edit/w-edit-treeselect/w-edit-treeselect.component.mjs +2 -2
- package/esm2020/lib/layout/w-body/w-body.component.mjs +2 -2
- package/esm2020/lib/layout/w-body-container/w-body-container.component.mjs +2 -2
- package/esm2020/lib/layout/w-container/w-container.component.mjs +2 -2
- package/esm2020/lib/layout/w-footer/w-footer.component.mjs +2 -2
- package/esm2020/lib/layout/w-grid/w-grid.component.mjs +2 -2
- package/esm2020/lib/layout/w-header-panel/w-header-panel.component.mjs +18 -8
- package/esm2020/lib/layout/w-navbar/w-navbar.component.mjs +2 -2
- package/esm2020/lib/layout/w-panel/w-panel.component.mjs +2 -2
- package/esm2020/lib/layout/w-panel-title/w-panel-title.component.mjs +2 -2
- package/esm2020/lib/misc/w-filter-panel/w-filter-panel.component.mjs +2 -2
- package/esm2020/lib/search/w-input-search/w-input-search.component.mjs +2 -2
- package/esm2020/lib/sidebar/w-sidebar/w-sidebar.component.mjs +2 -2
- package/esm2020/lib/tables/w-table/w-table.component.mjs +2 -2
- package/esm2020/lib/tables/w-table-lazy/w-table-lazy.component.mjs +2 -2
- package/esm2020/lib/tables/w-tree-table/w-tree-table.component.mjs +2 -2
- package/fesm2015/ngx-wapp-components.mjs +59 -50
- package/fesm2015/ngx-wapp-components.mjs.map +1 -1
- package/fesm2020/ngx-wapp-components.mjs +59 -50
- package/fesm2020/ngx-wapp-components.mjs.map +1 -1
- package/lib/layout/w-header-panel/w-header-panel.component.d.ts +7 -1
- package/package.json +1 -1
|
@@ -57,7 +57,7 @@ WEditInputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
57
57
|
useExisting: forwardRef(() => WEditInputNumberComponent),
|
|
58
58
|
multi: true
|
|
59
59
|
}
|
|
60
|
-
], ngImport: i0, template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\"></p-inputNumber>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (onInput)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder,.input-generic-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:hover,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-label-disabled,.input-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-field{margin:0}.input-number-height{height:76px!important}:host ::ng-deep .input-height .p-inputnumber .p-inputnumber-input{height:40px!important}.input-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-number{width:100%}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:16px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}.input-label-disabled{color:#bdc1c6}:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:16px}.input-number-height-small{height:32px!important}:host ::ng-deep .input-height-small .p-inputnumber .p-inputnumber-input{height:32px!important}.w-input-number-small{width:100%}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:12px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"], dependencies: [{ 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.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: "component", type: i3.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] });
|
|
60
|
+
], ngImport: i0, template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\"></p-inputNumber>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (onInput)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder,.input-generic-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:hover,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-label-disabled,.input-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-field{margin:0}.input-number-height{height:76px!important}:host ::ng-deep .input-height .p-inputnumber .p-inputnumber-input{height:40px!important}.input-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-number{width:100%}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:16px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}.input-label-disabled{color:#bdc1c6}:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:16px}.input-number-height-small{height:32px!important}:host ::ng-deep .input-height-small .p-inputnumber .p-inputnumber-input{height:32px!important}.w-input-number-small{width:100%}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:12px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"], dependencies: [{ 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.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: "component", type: i3.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] });
|
|
61
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WEditInputNumberComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{ selector: 'w-edit-input-number', providers: [
|
|
@@ -66,7 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
|
|
|
66
66
|
useExisting: forwardRef(() => WEditInputNumberComponent),
|
|
67
67
|
multi: true
|
|
68
68
|
}
|
|
69
|
-
], template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\"></p-inputNumber>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (onInput)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder,.input-generic-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:hover,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-label-disabled,.input-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-field{margin:0}.input-number-height{height:76px!important}:host ::ng-deep .input-height .p-inputnumber .p-inputnumber-input{height:40px!important}.input-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-number{width:100%}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:16px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}.input-label-disabled{color:#bdc1c6}:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:16px}.input-number-height-small{height:32px!important}:host ::ng-deep .input-height-small .p-inputnumber .p-inputnumber-input{height:32px!important}.w-input-number-small{width:100%}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:12px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
69
|
+
], template: "<div *ngIf=\"formControl != null; else noNgControl\" class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-number-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-number-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-number-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\"></p-inputNumber>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" [ngClass]=\"{ 'input-label': !isDisabled,\r\n 'input-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.medium) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number input-height\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (onInput)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n <p-inputNumber *ngIf=\"getSizeName(sizeType.small) == size\" [disabled]=\"isDisabled\"\r\n [required]=\"isRequired\"\r\n class=\"w-input-number-small input-height-small\"\r\n styleClass=\"flex flex-1\"\r\n id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"></p-inputNumber>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder,.input-generic-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:hover,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-label-disabled,.input-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:-ms-input-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-moz-placeholder,:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-valid .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-warning .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus,:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-field{margin:0}.input-number-height{height:76px!important}:host ::ng-deep .input-height .p-inputnumber .p-inputnumber-input{height:40px!important}.input-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-number{width:100%}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:16px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}.input-label-disabled{color:#bdc1c6}:host ::ng-deep .w-input-number-error .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:16px}.input-number-height-small{height:32px!important}:host ::ng-deep .input-height-small .p-inputnumber .p-inputnumber-input{height:32px!important}.w-input-number-small{width:100%}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input{border-radius:8px;border-width:2px;padding-left:12px;width:100%;border:2px solid #e8eaed}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus::-webkit-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-ms-input-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:focus:-moz-placeholder{color:transparent}:host ::ng-deep .w-input-number-small .p-inputnumber .p-inputnumber-input:disabled{background-color:#e8eaed}:host ::ng-deep .w-input-number-valid-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-warning-small .p-inputnumber .p-inputnumber-input:focus{padding-left:12px}:host ::ng-deep .w-input-number-error-small .p-inputnumber .p-inputnumber-input:focus{box-shadow:0 0 2px 2px #ffbdbd!important;padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
70
70
|
}], propDecorators: { label: [{
|
|
71
71
|
type: Input,
|
|
72
72
|
args: ['label']
|
|
@@ -61,7 +61,7 @@ WEditInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
61
61
|
useExisting: forwardRef(() => WEditInputTextComponent),
|
|
62
62
|
multi: true
|
|
63
63
|
}
|
|
64
|
-
], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size;\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\"\r\n class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"\r\n [autofocus]=\"autofocus\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\" [autofocus]=\"autofocus\">\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-text-label-disabled-small,.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-small:hover,.w-input-text:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-text-label-disabled,.input-text-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text:-moz-placeholder,.w-input-text:-ms-input-placeholder,.w-input-text::-moz-placeholder,.w-input-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,.w-input-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-valid-small,.w-input-text-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-valid-small:focus,.w-input-text-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-warning-small,.w-input-text-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-warning-small:focus,.w-input-text-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-error-small,.w-input-text-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-select-field{margin:0}.input-label-height{height:76px!important}.height-input{height:40px!important}.input-text-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-text{border-radius:8px;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-text:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text:focus::-webkit-input-placeholder{color:transparent}.w-input-text:focus::-moz-placeholder{color:transparent}.w-input-text:focus:-ms-input-placeholder{color:transparent}.w-input-text:focus:-moz-placeholder{color:transparent}.w-input-text:disabled{background-color:#e8eaed}.input-text-label-disabled{padding:8px 8px 12px;margin:0;color:#bdc1c6}.input-label-height .p-input-icon-right>i:last-of-type{right:16px!important}.height-label-small,.input-height-small{height:32px!important}.input-height-small .p-input-icon-right>i:last-of-type{right:12px}.w-input-text-small{border-radius:8px;border-width:2px;padding-left:12px;border:2px solid #e8eaed}.w-input-text-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-small:focus::-moz-placeholder{color:transparent}.w-input-text-small:disabled{background-color:#e8eaed}.input-text-label-disabled-small{color:#bdc1c6}.w-input-text-valid-small:focus{padding-left:12px}.w-input-text-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"], dependencies: [{ kind: "directive", type: i1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
64
|
+
], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size;\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\"\r\n class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"\r\n [autofocus]=\"autofocus\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\" [autofocus]=\"autofocus\">\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-text-label-disabled-small,.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-small:hover,.w-input-text:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-text-label-disabled,.input-text-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text:-moz-placeholder,.w-input-text:-ms-input-placeholder,.w-input-text::-moz-placeholder,.w-input-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-valid-small,.w-input-text-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-valid-small:focus,.w-input-text-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-warning-small,.w-input-text-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-warning-small:focus,.w-input-text-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-error-small,.w-input-text-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-select-field{margin:0}.input-label-height{height:76px!important}.height-input{height:40px!important}.input-text-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-text{border-radius:8px;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-text:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text:focus::-webkit-input-placeholder{color:transparent}.w-input-text:focus::-moz-placeholder{color:transparent}.w-input-text:focus:-ms-input-placeholder{color:transparent}.w-input-text:focus:-moz-placeholder{color:transparent}.w-input-text:disabled{background-color:#e8eaed}.input-text-label-disabled{padding:8px 8px 12px;margin:0;color:#bdc1c6}.input-label-height .p-input-icon-right>i:last-of-type{right:16px!important}.height-label-small,.input-height-small{height:32px!important}.input-height-small .p-input-icon-right>i:last-of-type{right:12px}.w-input-text-small{border-radius:8px;border-width:2px;padding-left:12px;border:2px solid #e8eaed}.w-input-text-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-small:focus::-moz-placeholder{color:transparent}.w-input-text-small:disabled{background-color:#e8eaed}.input-text-label-disabled-small{color:#bdc1c6}.w-input-text-valid-small:focus{padding-left:12px}.w-input-text-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"], dependencies: [{ kind: "directive", type: i1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
65
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WEditInputTextComponent, decorators: [{
|
|
66
66
|
type: Component,
|
|
67
67
|
args: [{ selector: 'w-edit-input-text', providers: [
|
|
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
|
|
|
70
70
|
useExisting: forwardRef(() => WEditInputTextComponent),
|
|
71
71
|
multi: true
|
|
72
72
|
}
|
|
73
|
-
], template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size;\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\"\r\n class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"\r\n [autofocus]=\"autofocus\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\" [autofocus]=\"autofocus\">\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-text-label-disabled-small,.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-small:hover,.w-input-text:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-text-label-disabled,.input-text-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text:-moz-placeholder,.w-input-text:-ms-input-placeholder,.w-input-text::-moz-placeholder,.w-input-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,.w-input-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-valid-small,.w-input-text-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-valid-small:focus,.w-input-text-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-warning-small,.w-input-text-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-warning-small:focus,.w-input-text-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-error-small,.w-input-text-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-select-field{margin:0}.input-label-height{height:76px!important}.height-input{height:40px!important}.input-text-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-text{border-radius:8px;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-text:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text:focus::-webkit-input-placeholder{color:transparent}.w-input-text:focus::-moz-placeholder{color:transparent}.w-input-text:focus:-ms-input-placeholder{color:transparent}.w-input-text:focus:-moz-placeholder{color:transparent}.w-input-text:disabled{background-color:#e8eaed}.input-text-label-disabled{padding:8px 8px 12px;margin:0;color:#bdc1c6}.input-label-height .p-input-icon-right>i:last-of-type{right:16px!important}.height-label-small,.input-height-small{height:32px!important}.input-height-small .p-input-icon-right>i:last-of-type{right:12px}.w-input-text-small{border-radius:8px;border-width:2px;padding-left:12px;border:2px solid #e8eaed}.w-input-text-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-small:focus::-moz-placeholder{color:transparent}.w-input-text-small:disabled{background-color:#e8eaed}.input-text-label-disabled-small{color:#bdc1c6}.w-input-text-valid-small:focus{padding-left:12px}.w-input-text-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
73
|
+
], template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size;\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size;\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText\r\n [ngClass]=\"{'w-input-text-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [formControl]=\"formControl\">\r\n </span>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\"\r\n class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \"\r\n class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\"\r\n class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-select-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\"\r\n [ngClass]=\"{ 'input-text-label': !isDisabled,\r\n 'input-text-label-disabled': isDisabled}\" for=\"w-text\">\r\n {{label}}\r\n </label>\r\n <span *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 height-input w-input-text\" id=\"w-textarea\" [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\"\r\n [autofocus]=\"autofocus\">\r\n </span>\r\n <span *ngIf=\"getSizeName(sizeType.small) == size\" class=\"p-input-icon-right\">\r\n <i *ngIf=\"inputIcon != ''\" class=\"pi {{inputIcon}}\"></i>\r\n <input pInputText minlength=\"{{minlength}}\" maxlength=\"{{maxlength}}\" [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 input-height-small w-input-text-small\" id=\"w-textarea\"\r\n [placeholder]=\"placeholder\" [required]=\"isRequired\" [(ngModel)]=\"value\" (input)=\"onValueChanged()\"\r\n [disabled]=\"isDisabled\" [autofocus]=\"autofocus\">\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-text-label-disabled-small,.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-small:hover,.w-input-text:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.input-text-label-disabled,.input-text-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text:-moz-placeholder,.w-input-text:-ms-input-placeholder,.w-input-text::-moz-placeholder,.w-input-text::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-text{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-small:-moz-placeholder,.w-input-text-small:-ms-input-placeholder,.w-input-text-small::-moz-placeholder,.w-input-text-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-valid-small,.w-input-text-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-valid-small:focus,.w-input-text-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-warning-small,.w-input-text-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-warning-small:focus,.w-input-text-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-error-small,.w-input-text-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.w-input-select-field{margin:0}.input-label-height{height:76px!important}.height-input{height:40px!important}.input-text-label{padding:8px 8px 12px;margin:0}.label-height{height:36px}.w-input-text{border-radius:8px;border-width:2px;padding-left:16px!important;border:2px solid #e8eaed}.w-input-text:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text:focus::-webkit-input-placeholder{color:transparent}.w-input-text:focus::-moz-placeholder{color:transparent}.w-input-text:focus:-ms-input-placeholder{color:transparent}.w-input-text:focus:-moz-placeholder{color:transparent}.w-input-text:disabled{background-color:#e8eaed}.input-text-label-disabled{padding:8px 8px 12px;margin:0;color:#bdc1c6}.input-label-height .p-input-icon-right>i:last-of-type{right:16px!important}.height-label-small,.input-height-small{height:32px!important}.input-height-small .p-input-icon-right>i:last-of-type{right:12px}.w-input-text-small{border-radius:8px;border-width:2px;padding-left:12px;border:2px solid #e8eaed}.w-input-text-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-small:focus::-moz-placeholder{color:transparent}.w-input-text-small:disabled{background-color:#e8eaed}.input-text-label-disabled-small{color:#bdc1c6}.w-input-text-valid-small:focus{padding-left:12px}.w-input-text-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
74
74
|
}], propDecorators: { label: [{
|
|
75
75
|
type: Input,
|
|
76
76
|
args: ['label']
|
|
@@ -59,7 +59,7 @@ WEditInputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
59
59
|
useExisting: forwardRef(() => WEditInputTextareaComponent),
|
|
60
60
|
multi: true
|
|
61
61
|
}
|
|
62
|
-
], 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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '') }\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.text-area-label-disabled-small,.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-area-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-area-small:hover,.w-input-text-area:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.text-area-label-small,.text-area-label-disabled,.text-area-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text-area:-moz-placeholder,.w-input-text-area:-ms-input-placeholder,.w-input-text-area::-moz-placeholder,.w-input-text-area::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,.w-input-text-area{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-area-valid-small,.w-input-text-area-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-area-valid-small:focus,.w-input-text-area-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-area-warning-small,.w-input-text-area-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-area-warning-small:focus,.w-input-text-area-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-area-error-small,.w-input-text-area-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.height-text-area{height:180px!important}.text-area-label{padding:8px 8px 12px;margin:0}.w-input-text-area{border-radius:8px;padding:8px 16px 16px;border:2px solid #e8eaed}.w-input-text-area:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text-area:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area:focus::-moz-placeholder{color:transparent}.w-input-text-area:focus:-ms-input-placeholder{color:transparent}.w-input-text-area:focus:-moz-placeholder{color:transparent}.w-input-text-area:disabled{background-color:#f1f3f4;border:2px solid #e8eaed}.text-area-label-disabled{color:#bdc1c6}.height-text-area-small{height:84px!important}.w-input-text-area-small{border-radius:8px;border-width:2px;padding:8px 12px 12px;border:2px solid #e8eaed}.w-input-text-area-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-area-small:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area-small:focus::-moz-placeholder{color:transparent}.w-input-text-area-small:focus:-ms-input-placeholder{color:transparent}.w-input-text-area-small:focus:-moz-placeholder{color:transparent}.w-input-text-area-small:disabled{background-color:#e8eaed}.text-area-label-disabled-small{color:#bdc1c6}.w-input-text-area-valid-small:focus{padding-left:12px}.w-input-text-area-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\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.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"] }] });
|
|
62
|
+
], 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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '') }\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.text-area-label-disabled-small,.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-area-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-area-small:hover,.w-input-text-area:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.text-area-label-small,.text-area-label-disabled,.text-area-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text-area:-moz-placeholder,.w-input-text-area:-ms-input-placeholder,.w-input-text-area::-moz-placeholder,.w-input-text-area::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-text-area{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-area-valid-small,.w-input-text-area-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-area-valid-small:focus,.w-input-text-area-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-area-warning-small,.w-input-text-area-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-area-warning-small:focus,.w-input-text-area-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-area-error-small,.w-input-text-area-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.height-text-area{height:180px!important}.text-area-label{padding:8px 8px 12px;margin:0}.w-input-text-area{border-radius:8px;padding:8px 16px 16px;border:2px solid #e8eaed}.w-input-text-area:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text-area:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area:focus::-moz-placeholder{color:transparent}.w-input-text-area:focus:-ms-input-placeholder{color:transparent}.w-input-text-area:focus:-moz-placeholder{color:transparent}.w-input-text-area:disabled{background-color:#f1f3f4;border:2px solid #e8eaed}.text-area-label-disabled{color:#bdc1c6}.height-text-area-small{height:84px!important}.w-input-text-area-small{border-radius:8px;border-width:2px;padding:8px 12px 12px;border:2px solid #e8eaed}.w-input-text-area-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-area-small:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area-small:focus::-moz-placeholder{color:transparent}.w-input-text-area-small:focus:-ms-input-placeholder{color:transparent}.w-input-text-area-small:focus:-moz-placeholder{color:transparent}.w-input-text-area-small:disabled{background-color:#e8eaed}.text-area-label-disabled-small{color:#bdc1c6}.w-input-text-area-valid-small:focus{padding-left:12px}.w-input-text-area-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\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.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"] }] });
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WEditInputTextareaComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'w-edit-input-textarea', providers: [
|
|
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
|
|
|
68
68
|
useExisting: forwardRef(() => WEditInputTextareaComponent),
|
|
69
69
|
multi: true
|
|
70
70
|
}
|
|
71
|
-
], template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '') }\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.text-area-label-disabled-small,.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-area-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-area-small:hover,.w-input-text-area:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.text-area-label-small,.text-area-label-disabled,.text-area-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text-area:-moz-placeholder,.w-input-text-area:-ms-input-placeholder,.w-input-text-area::-moz-placeholder,.w-input-text-area::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,.w-input-text-area{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-area-valid-small,.w-input-text-area-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-area-valid-small:focus,.w-input-text-area-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-area-warning-small,.w-input-text-area-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-area-warning-small:focus,.w-input-text-area-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-area-error-small,.w-input-text-area-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.height-text-area{height:180px!important}.text-area-label{padding:8px 8px 12px;margin:0}.w-input-text-area{border-radius:8px;padding:8px 16px 16px;border:2px solid #e8eaed}.w-input-text-area:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text-area:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area:focus::-moz-placeholder{color:transparent}.w-input-text-area:focus:-ms-input-placeholder{color:transparent}.w-input-text-area:focus:-moz-placeholder{color:transparent}.w-input-text-area:disabled{background-color:#f1f3f4;border:2px solid #e8eaed}.text-area-label-disabled{color:#bdc1c6}.height-text-area-small{height:84px!important}.w-input-text-area-small{border-radius:8px;border-width:2px;padding:8px 12px 12px;border:2px solid #e8eaed}.w-input-text-area-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-area-small:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area-small:focus::-moz-placeholder{color:transparent}.w-input-text-area-small:focus:-ms-input-placeholder{color:transparent}.w-input-text-area-small:focus:-moz-placeholder{color:transparent}.w-input-text-area-small:disabled{background-color:#e8eaed}.text-area-label-disabled-small{color:#bdc1c6}.w-input-text-area-valid-small:focus{padding-left:12px}.w-input-text-area-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
71
|
+
], template: "<div *ngIf=\"formControl; else noNgControl\">\r\n <div *ngIf=\"getSizeName(sizeType.medium) == size; else inputSmall\">\r\n <div class=\"flex flex-column height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '') }\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n [ngClass]=\"{'w-input-text-area-error-small': formControl.hasError('required') && formControl.dirty && requiredErrorDescription != '',\r\n 'w-input-text-area-valid-small': formControl.valid && formControl.touched && successMessage != '',\r\n 'w-input-text-area-warning-small': formControl.invalid && !formControl.hasError('required') && formControl.touched && (minlengthErrorDescription != '' || maxlengthErrorDescription != '')}\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [formControl]=\"formControl\">\r\n </textarea>\r\n </div>\r\n <div class=\"alert-message-height\">\r\n <small *ngIf=\"formControl.valid && formControl.touched\" class=\"success-alert-text\">{{successMessage}}</small>\r\n <small *ngIf=\"formControl.invalid && !formControl.hasError('required') && formControl.touched \" class=\"warning-alert-text\">{{maxlengthErrorDescription}}</small>\r\n <small *ngIf=\"formControl.hasError('required') && formControl.dirty\" class=\"error-alert-text\">{{requiredErrorDescription}}</small>\r\n </div>\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 height-text-area\">\r\n <label [ngClass]=\"{'text-area-label': !isDisabled,\r\n 'text-area-label-disabled': isDisabled }\" \r\n for=\"w-textarea\">\r\n {{label}}\r\n </label>\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" (input)=\"onValueChanged()\" [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </div>\r\n <ng-template #inputSmall>\r\n <div class=\"flex flex-column height-text-area-small\">\r\n <textarea pInputTextarea\r\n [disabled]=\"isDisabled\"\r\n minlength=\"{{minlength}}\" \r\n maxlength=\"{{maxlength}}\"\r\n [autoResize]=\"autoResize\" \r\n [required]=\"isRequired\"\r\n [rows]=\"rows\"\r\n class=\"flex flex-1 col-12 h-max w-input-text-area-small\"\r\n id=\"w-textarea\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"isRequired\"\r\n [(ngModel)]=\"value\" \r\n (input)=\"onValueChanged()\" \r\n [disabled]=\"isDisabled\">\r\n </textarea>\r\n </div>\r\n <!-- <div class=\"alert-message-height\"></div> -->\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.text-area-label-disabled-small,.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder,.input-generic-small,.w-input-text-area-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover,.w-input-text-area-small:hover,.w-input-text-area:hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.text-area-label-small,.text-area-label-disabled,.text-area-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder,.w-input-text-area:-moz-placeholder,.w-input-text-area:-ms-input-placeholder,.w-input-text-area::-moz-placeholder,.w-input-text-area::-webkit-input-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,.w-input-text-area{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small,.w-input-text-area-small:-moz-placeholder,.w-input-text-area-small:-ms-input-placeholder,.w-input-text-area-small::-moz-placeholder,.w-input-text-area-small::-webkit-input-placeholder{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid,.w-input-text-area-valid-small,.w-input-text-area-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus,.w-input-text-area-valid-small:focus,.w-input-text-area-valid:focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning,.w-input-text-area-warning-small,.w-input-text-area-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus,.w-input-text-area-warning-small:focus,.w-input-text-area-warning:focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error,.w-input-text-area-error-small,.w-input-text-area-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.height-text-area{height:180px!important}.text-area-label{padding:8px 8px 12px;margin:0}.w-input-text-area{border-radius:8px;padding:8px 16px 16px;border:2px solid #e8eaed}.w-input-text-area:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:16px}.w-input-text-area:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area:focus::-moz-placeholder{color:transparent}.w-input-text-area:focus:-ms-input-placeholder{color:transparent}.w-input-text-area:focus:-moz-placeholder{color:transparent}.w-input-text-area:disabled{background-color:#f1f3f4;border:2px solid #e8eaed}.text-area-label-disabled{color:#bdc1c6}.height-text-area-small{height:84px!important}.w-input-text-area-small{border-radius:8px;border-width:2px;padding:8px 12px 12px;border:2px solid #e8eaed}.w-input-text-area-small:focus{border-radius:8px;border:2px #e0f5fc;box-shadow:0 0 4px 4px #00a6e940!important;padding-left:12px}.w-input-text-area-small:focus::-webkit-input-placeholder{color:transparent}.w-input-text-area-small:focus::-moz-placeholder{color:transparent}.w-input-text-area-small:focus:-ms-input-placeholder{color:transparent}.w-input-text-area-small:focus:-moz-placeholder{color:transparent}.w-input-text-area-small:disabled{background-color:#e8eaed}.text-area-label-disabled-small{color:#bdc1c6}.w-input-text-area-valid-small:focus{padding-left:12px}.w-input-text-area-warning-small:focus{padding-left:12px}.success-alert-text{color:#00db5d;padding:8px}.warning-alert-text{color:#eeae00;padding:8px}.error-alert-text{color:#e50000;padding:8px}.alert-message-height{height:32px}\n"] }]
|
|
72
72
|
}], propDecorators: { label: [{
|
|
73
73
|
type: Input,
|
|
74
74
|
args: ['label']
|
|
@@ -51,7 +51,7 @@ WEditMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
51
51
|
useExisting: forwardRef(() => WEditMultiselectComponent),
|
|
52
52
|
multi: true
|
|
53
53
|
}
|
|
54
|
-
], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <div class=\"w-error-message-container w-full\">\r\n <small *ngIf=\"getSizeName(sizeType.medium) == size && formControl.hasError('required') && formControl.touched\" class=\"w-error-message p-error block\">{{errorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\"> \r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,.w-error-message{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:8px}.icon-small-x-size,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token .p-multiselect-token-icon,:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus,:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.w-input-multiselect-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect .p-multiselect-label{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-token{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{font-size:12px;line-height:16px;font-weight:700}.w-input-multiselect-field{margin:0}.w-input-multiselect-label{padding:8px 8px 12px;margin:0;color:#2e3134}.w-input-multiselect-label-disabled.w-input-multiselect-label{color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect .p-multiselect-label{padding:6px 0 6px 16px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 16px}:host ::ng-deep .w-input-multiselect .p-multiselect-token{height:24px;padding:6px 12px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items{padding:6px 6px 14px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:8px 16px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{width:24px;margin-right:12px}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:24px;height:24px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-header{padding:6px 22px}:host ::ng-deep .w-input-multiselect .p-disabled{background:#f1f3f4;opacity:1}:host ::ng-deep .w-input-multiselect .p-disabled .p-inputtext{color:#bdc1c6}:host ::ng-deep p-multiselect.w-input-multiselect.ng-dirty.ng-invalid>.p-multiselect{border-color:#ffbdbd}.w-error-message-container{height:32px}.w-error-message{color:#e50000;padding:8px;margin-top:0}:host ::ng-deep .w-input-multiselect-small .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{padding:6px 0 6px 12px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 12px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{height:16px;padding:2px 12px;border-radius:8px;border-width:2px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items{padding:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:6px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{margin-right:8px;width:16px}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:16px;height:16px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-header{padding:6px 14px}:host ::ng-deep .w-input-multiselect-small .p-disabled{background:#f1f3f4;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: i3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }] });
|
|
54
|
+
], ngImport: i0, template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <div class=\"w-error-message-container w-full\">\r\n <small *ngIf=\"getSizeName(sizeType.medium) == size && formControl.hasError('required') && formControl.touched\" class=\"w-error-message p-error block\">{{errorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\"> \r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,.w-error-message{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:8px}.icon-small-x-size,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token .p-multiselect-token-icon,:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus,:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.w-input-multiselect-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect .p-multiselect-label{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-token{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{font-size:12px;line-height:16px;font-weight:700}.w-input-multiselect-field{margin:0}.w-input-multiselect-label{padding:8px 8px 12px;margin:0;color:#2e3134}.w-input-multiselect-label-disabled.w-input-multiselect-label{color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect .p-multiselect-label{padding:6px 0 6px 16px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 16px}:host ::ng-deep .w-input-multiselect .p-multiselect-token{height:24px;padding:6px 12px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items{padding:6px 6px 14px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:8px 16px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{width:24px;margin-right:12px}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:24px;height:24px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-header{padding:6px 22px}:host ::ng-deep .w-input-multiselect .p-disabled{background:#f1f3f4;opacity:1}:host ::ng-deep .w-input-multiselect .p-disabled .p-inputtext{color:#bdc1c6}:host ::ng-deep p-multiselect.w-input-multiselect.ng-dirty.ng-invalid>.p-multiselect{border-color:#ffbdbd}.w-error-message-container{height:32px}.w-error-message{color:#e50000;padding:8px;margin-top:0}:host ::ng-deep .w-input-multiselect-small .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{padding:6px 0 6px 12px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 12px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{height:16px;padding:2px 12px;border-radius:8px;border-width:2px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items{padding:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:6px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{margin-right:8px;width:16px}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:16px;height:16px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-header{padding:6px 14px}:host ::ng-deep .w-input-multiselect-small .p-disabled{background:#f1f3f4;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "component", type: i3.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WEditMultiselectComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
57
|
args: [{ selector: 'w-edit-multiselect', providers: [
|
|
@@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
|
|
|
60
60
|
useExisting: forwardRef(() => WEditMultiselectComponent),
|
|
61
61
|
multi: true
|
|
62
62
|
}
|
|
63
|
-
], template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <div class=\"w-error-message-container w-full\">\r\n <small *ngIf=\"getSizeName(sizeType.medium) == size && formControl.hasError('required') && formControl.touched\" class=\"w-error-message p-error block\">{{errorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\"> \r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,.w-error-message{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:8px}.icon-small-x-size,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token .p-multiselect-token-icon,:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus,:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.w-input-multiselect-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important}.input-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect .p-multiselect-label{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-token{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{font-size:12px;line-height:16px;font-weight:700}.w-input-multiselect-field{margin:0}.w-input-multiselect-label{padding:8px 8px 12px;margin:0;color:#2e3134}.w-input-multiselect-label-disabled.w-input-multiselect-label{color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect .p-multiselect-label{padding:6px 0 6px 16px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 16px}:host ::ng-deep .w-input-multiselect .p-multiselect-token{height:24px;padding:6px 12px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items{padding:6px 6px 14px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:8px 16px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{width:24px;margin-right:12px}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:24px;height:24px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-header{padding:6px 22px}:host ::ng-deep .w-input-multiselect .p-disabled{background:#f1f3f4;opacity:1}:host ::ng-deep .w-input-multiselect .p-disabled .p-inputtext{color:#bdc1c6}:host ::ng-deep p-multiselect.w-input-multiselect.ng-dirty.ng-invalid>.p-multiselect{border-color:#ffbdbd}.w-error-message-container{height:32px}.w-error-message{color:#e50000;padding:8px;margin-top:0}:host ::ng-deep .w-input-multiselect-small .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{padding:6px 0 6px 12px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 12px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{height:16px;padding:2px 12px;border-radius:8px;border-width:2px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items{padding:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:6px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{margin-right:8px;width:16px}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:16px;height:16px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-header{padding:6px 14px}:host ::ng-deep .w-input-multiselect-small .p-disabled{background:#f1f3f4;opacity:1}\n"] }]
|
|
63
|
+
], template: "<div *ngIf=\"formControl; else noNgControl\" class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"formControl\"\r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n <div class=\"w-error-message-container w-full\">\r\n <small *ngIf=\"getSizeName(sizeType.medium) == size && formControl.hasError('required') && formControl.touched\" class=\"w-error-message p-error block\">{{errorDescription}}</small>\r\n </div>\r\n</div>\r\n<ng-template #noNgControl>\r\n <div class=\"w-input-multiselect-field p-fluid field\">\r\n <label *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect-label body\" [ngClass]=\"{'w-input-multiselect-label-disabled' : disabled}\">{{label}}</label>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.medium) == size\" class=\"w-input-multiselect\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\" \r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\"> \r\n </p-multiSelect>\r\n <p-multiSelect *ngIf=\"getSizeName(sizeType.small) == size\" class=\"w-input-multiselect-small\" \r\n [options]=\"options\" \r\n display=\"chip\" \r\n [optionLabel]=\"optionLabel\" \r\n [optionValue]=\"optionValue\" \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\" \r\n [(ngModel)]=\"ngModelValue\" \r\n (ngModelChange)=\"onOptionSelected()\" \r\n [appendTo]=\"appendTo\">\r\n </p-multiSelect>\r\n </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption,.w-error-message{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.icon-small-size,:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:8px}.icon-small-x-size,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token .p-multiselect-token-icon,:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus,:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus,:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:2px solid #0085c7}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label,.w-input-multiselect-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#bdc1c6!important;opacity:unset!important}.input-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item,:host ::ng-deep .w-input-multiselect .p-multiselect-label{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 2px 2px #b3ffd3!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 2px 2px #ffecb8!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px solid #FFBDBD}.tag-generic,:host ::ng-deep .w-input-multiselect .p-multiselect-token{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small,:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{font-size:12px;line-height:16px;font-weight:700}.w-input-multiselect-field{margin:0}.w-input-multiselect-label{padding:8px 8px 12px;margin:0;color:#2e3134}.w-input-multiselect-label-disabled.w-input-multiselect-label{color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect .p-multiselect-label{padding:6px 0 6px 16px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 16px}:host ::ng-deep .w-input-multiselect .p-multiselect-token{height:24px;padding:6px 12px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items{padding:6px 6px 14px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:8px 16px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{width:24px;margin-right:12px}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:24px;height:24px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect .p-multiselect-panel .p-multiselect-header{padding:6px 22px}:host ::ng-deep .w-input-multiselect .p-disabled{background:#f1f3f4;opacity:1}:host ::ng-deep .w-input-multiselect .p-disabled .p-inputtext{color:#bdc1c6}:host ::ng-deep p-multiselect.w-input-multiselect.ng-dirty.ng-invalid>.p-multiselect{border-color:#ffbdbd}.w-error-message-container{height:32px}.w-error-message{color:#e50000;padding:8px;margin-top:0}:host ::ng-deep .w-input-multiselect-small .p-multiselect{border:2px solid #e8eaed;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect:hover{border:2px solid #0085c7}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-focus{border:2px solid #e0f5fc}:host ::ng-deep .w-input-multiselect-small .p-multiselect-label{padding:6px 0 6px 12px;color:#bdc1c6}:host ::ng-deep .w-input-multiselect-small .p-multiselect.p-multiselect-chip .p-multiselect-label{padding:6px 0 6px 12px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-token{height:16px;padding:2px 12px;border-radius:8px;border-width:2px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel{border:2px solid #e8eaed}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items{padding:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item{padding:6px;margin-bottom:4px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover{background:#e0f5fc;border-radius:8px}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox{margin-right:8px;width:16px}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box{border:2px solid #e8eaed;width:16px;height:16px;color:#e8eaed;border-radius:4px;align-self:center}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box .p-checkbox-icon{font-weight:700}:host ::ng-deep .w-input-multiselect-small .p-checkbox .p-checkbox-box.p-highlight{border-color:#0085c7!important;background:#0085c7;color:#0085c7!important}:host ::ng-deep .w-input-multiselect-small .p-multiselect-panel .p-multiselect-header{padding:6px 14px}:host ::ng-deep .w-input-multiselect-small .p-disabled{background:#f1f3f4;opacity:1}\n"] }]
|
|
64
64
|
}], propDecorators: { label: [{
|
|
65
65
|
type: Input,
|
|
66
66
|
args: ['label']
|