@ascentgl/ads-ui 0.0.60 → 0.0.63
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/fesm2022/ascentgl-ads-ui.mjs +125 -15
- package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/components/form-fields/dropdowns/input-dropdown/input-dropdown.component.d.ts +3 -1
- package/lib/components/form-fields/input/input.component.d.ts +3 -1
- package/lib/components/form-fields/input/input.module.d.ts +2 -1
- package/lib/components/form-fields/time-field/index.d.ts +1 -0
- package/lib/components/form-fields/time-field/public-api.d.ts +2 -0
- package/lib/components/form-fields/time-field/time-field.component.d.ts +19 -0
- package/lib/components/form-fields/time-field/time-field.module.d.ts +20 -0
- package/package.json +9 -9
|
@@ -26,14 +26,14 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
26
26
|
import * as i5 from '@angular/material/core';
|
|
27
27
|
import { MatOption, NativeDateAdapter, DateAdapter, MatNativeDateModule, MatOptionModule } from '@angular/material/core';
|
|
28
28
|
import * as i2$2 from '@angular/material/form-field';
|
|
29
|
-
import { MatError, MatHint, MatFormFieldModule } from '@angular/material/form-field';
|
|
29
|
+
import { MatError, MatHint, MatFormFieldModule, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
|
|
30
30
|
import * as i8$1 from '@angular/material/tooltip';
|
|
31
31
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
32
32
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
33
33
|
import * as i3$1 from '@angular/material/input';
|
|
34
|
-
import { MatInputModule } from '@angular/material/input';
|
|
34
|
+
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
35
35
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
36
|
-
import * as
|
|
36
|
+
import * as i11 from 'ngx-mask';
|
|
37
37
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
38
38
|
import { MatDividerModule } from '@angular/material/divider';
|
|
39
39
|
import * as i6 from '@angular/material/autocomplete';
|
|
@@ -2905,11 +2905,11 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
|
|
|
2905
2905
|
this.toggleOption(option); // Update the option on checkbox change
|
|
2906
2906
|
}
|
|
2907
2907
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + $index + 1\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
|
|
2908
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
|
|
2909
2909
|
}
|
|
2910
2910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsDropdownComponent, decorators: [{
|
|
2911
2911
|
type: Component,
|
|
2912
|
-
args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + $index + 1\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"] }]
|
|
2912
|
+
args: [{ selector: 'ads-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px}\n"] }]
|
|
2913
2913
|
}], ctorParameters: () => [], propDecorators: { displayValueFormatter: [{
|
|
2914
2914
|
type: Input
|
|
2915
2915
|
}], mode: [{
|
|
@@ -3051,11 +3051,11 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
|
|
|
3051
3051
|
});
|
|
3052
3052
|
}
|
|
3053
3053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + $index + 1\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width"] }] }); }
|
|
3055
3055
|
}
|
|
3056
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
|
|
3057
3057
|
type: Component,
|
|
3058
|
-
args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + $index + 1\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3058
|
+
args: [{ selector: 'ads-multi-select-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"'ads-dropdown-panel' + (fitContent ? ' fit-content' : '')\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{ checkbox: isMultiselect && checkSelected }\"\n >\n @if (isMultiselect && checkSelected) {\n <ads-checkbox\n width=\"100%\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3059
3059
|
}], propDecorators: { showChips: [{
|
|
3060
3060
|
type: Input
|
|
3061
3061
|
}] } });
|
|
@@ -3127,6 +3127,8 @@ class AdsInputComponent extends AbstractInputComponent {
|
|
|
3127
3127
|
this.readonly = false;
|
|
3128
3128
|
/** mark input field as readonly */
|
|
3129
3129
|
this.isPasswordField = false;
|
|
3130
|
+
/** Add mask to the Input */
|
|
3131
|
+
this.mask = '';
|
|
3130
3132
|
/** @ignore */
|
|
3131
3133
|
this.hidePassword = true;
|
|
3132
3134
|
/** @ignore */
|
|
@@ -3151,11 +3153,11 @@ class AdsInputComponent extends AbstractInputComponent {
|
|
|
3151
3153
|
this.hidePassword = !this.hidePassword;
|
|
3152
3154
|
}
|
|
3153
3155
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", readonly: "readonly", isPasswordField: "isPasswordField" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n readonly: readonly,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [maxlength]=\"maxlength\"\n [readonly]=\"readonly\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (isPasswordField && !readonly) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }] }); }
|
|
3156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", readonly: "readonly", isPasswordField: "isPasswordField", mask: "mask" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n readonly: readonly,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [readonly]=\"readonly\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (isPasswordField && !readonly) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "directive", type: i11.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] }); }
|
|
3155
3157
|
}
|
|
3156
3158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsInputComponent, decorators: [{
|
|
3157
3159
|
type: Component,
|
|
3158
|
-
args: [{ selector: 'ads-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n readonly: readonly,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [maxlength]=\"maxlength\"\n [readonly]=\"readonly\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (isPasswordField && !readonly) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3160
|
+
args: [{ selector: 'ads-input', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\n readonly: readonly,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n #input\n matInput\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [readonly]=\"readonly\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n />\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n\n @if (isPasswordField && !readonly) {\n <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n <ads-icon\n class=\"visibility-eye\"\n [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n color=\"--color-medium\"\n />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3159
3161
|
}], propDecorators: { maxlength: [{
|
|
3160
3162
|
type: Input
|
|
3161
3163
|
}], type: [{
|
|
@@ -3168,6 +3170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3168
3170
|
type: Input
|
|
3169
3171
|
}], isPasswordField: [{
|
|
3170
3172
|
type: Input
|
|
3173
|
+
}], mask: [{
|
|
3174
|
+
type: Input
|
|
3171
3175
|
}], input: [{
|
|
3172
3176
|
type: ViewChild,
|
|
3173
3177
|
args: ['input']
|
|
@@ -3184,7 +3188,8 @@ class AdsInputModule {
|
|
|
3184
3188
|
MatIconButton,
|
|
3185
3189
|
AdsSuccessComponent,
|
|
3186
3190
|
AdsErrorComponent,
|
|
3187
|
-
AdsHintComponent
|
|
3191
|
+
AdsHintComponent,
|
|
3192
|
+
NgxMaskDirective], exports: [AdsInputComponent] }); }
|
|
3188
3193
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsInputModule, imports: [CommonModule,
|
|
3189
3194
|
MatFormFieldModule,
|
|
3190
3195
|
MatInputModule,
|
|
@@ -3209,6 +3214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3209
3214
|
AdsSuccessComponent,
|
|
3210
3215
|
AdsErrorComponent,
|
|
3211
3216
|
AdsHintComponent,
|
|
3217
|
+
NgxMaskDirective,
|
|
3212
3218
|
],
|
|
3213
3219
|
declarations: [AdsInputComponent],
|
|
3214
3220
|
exports: [AdsInputComponent],
|
|
@@ -3258,11 +3264,11 @@ class AdsPhoneFieldComponent extends AbstractInputComponent {
|
|
|
3258
3264
|
this.valueChangesSubscription?.unsubscribe();
|
|
3259
3265
|
}
|
|
3260
3266
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3261
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsPhoneFieldComponent, isStandalone: false, selector: "ads-phone-field", usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n [mask]=\"phoneMask()\"\n placeholder=\"Phone number\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"addPlusSignIfMissing()\"\n />\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
|
|
3267
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsPhoneFieldComponent, isStandalone: false, selector: "ads-phone-field", usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n [mask]=\"phoneMask()\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"addPlusSignIfMissing()\"\n />\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i11.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
|
|
3262
3268
|
}
|
|
3263
3269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsPhoneFieldComponent, decorators: [{
|
|
3264
3270
|
type: Component,
|
|
3265
|
-
args: [{ selector: 'ads-phone-field', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n [mask]=\"phoneMask()\"\n
|
|
3271
|
+
args: [{ selector: 'ads-phone-field', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n [mask]=\"phoneMask()\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"addPlusSignIfMissing()\"\n />\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3266
3272
|
}] });
|
|
3267
3273
|
|
|
3268
3274
|
class AdsPhoneFieldModule {
|
|
@@ -3404,6 +3410,8 @@ class AdsInputDropdownComponent extends AbstractInputComponent {
|
|
|
3404
3410
|
this.hasEmptyValue = true;
|
|
3405
3411
|
/** Set to true if you want dropdown items to fit content rather than dropdown width */
|
|
3406
3412
|
this.fitContent = true;
|
|
3413
|
+
/** Add mask to the Input */
|
|
3414
|
+
this.mask = '';
|
|
3407
3415
|
/** @ignore */
|
|
3408
3416
|
this.isSingleOptionSelected = false;
|
|
3409
3417
|
}
|
|
@@ -3431,11 +3439,11 @@ class AdsInputDropdownComponent extends AbstractInputComponent {
|
|
|
3431
3439
|
}
|
|
3432
3440
|
}
|
|
3433
3441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsInputDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3434
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsInputDropdownComponent, isStandalone: false, selector: "ads-input-dropdown", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", dropdownControl: "dropdownControl", dropdownId: "dropdownId", dropdownLabel: "dropdownLabel", dropdownPlaceholder: "dropdownPlaceholder", inputWidth: "inputWidth", dropdownWidth: "dropdownWidth", autoSelectSingleDropdownOption: "autoSelectSingleDropdownOption", options: "options", displayValueKey: "displayValueKey", hasEmptyValue: "hasEmptyValue", fitContent: "fitContent" }, viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: AdsDropdownComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n <div class=\"form-controls-wrapper\">\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: dropdownControl.invalid && dropdownControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: inputWidth }\"\n >\n <ads-input\n [control]=\"valueControl\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [pattern]=\"pattern\"\n [label]=\"label\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n </div>\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: dropdownWidth }\"\n >\n @if (isSingleOptionSelected) {\n <ads-input\n [control]=\"dropdownControl\"\n [id]=\"id\"\n [readonly]=\"true\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n } @else {\n <ads-dropdown\n [hasEmptyValue]=\"hasEmptyValue\"\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"options\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [displayValueKey]=\"displayValueKey\"\n [fitContent]=\"fitContent\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n }\n </div>\n </div>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "readonly", "isPasswordField"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
3442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsInputDropdownComponent, isStandalone: false, selector: "ads-input-dropdown", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", dropdownControl: "dropdownControl", dropdownId: "dropdownId", dropdownLabel: "dropdownLabel", dropdownPlaceholder: "dropdownPlaceholder", inputWidth: "inputWidth", dropdownWidth: "dropdownWidth", autoSelectSingleDropdownOption: "autoSelectSingleDropdownOption", options: "options", displayValueKey: "displayValueKey", hasEmptyValue: "hasEmptyValue", fitContent: "fitContent", mask: "mask" }, viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: AdsDropdownComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n <div class=\"form-controls-wrapper\">\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: dropdownControl.invalid && dropdownControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: inputWidth }\"\n >\n <ads-input\n [control]=\"valueControl\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [pattern]=\"pattern\"\n [label]=\"label\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [mask]=\"mask\"\n />\n </div>\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: dropdownWidth }\"\n >\n @if (isSingleOptionSelected) {\n <ads-input\n [control]=\"dropdownControl\"\n [id]=\"id\"\n [readonly]=\"true\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [mask]=\"mask\"\n />\n } @else {\n <ads-dropdown\n [hasEmptyValue]=\"hasEmptyValue\"\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"options\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [displayValueKey]=\"displayValueKey\"\n [fitContent]=\"fitContent\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n }\n </div>\n </div>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "readonly", "isPasswordField", "mask"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
|
|
3435
3443
|
}
|
|
3436
3444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsInputDropdownComponent, decorators: [{
|
|
3437
3445
|
type: Component,
|
|
3438
|
-
args: [{ selector: 'ads-input-dropdown', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n <div class=\"form-controls-wrapper\">\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: dropdownControl.invalid && dropdownControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: inputWidth }\"\n >\n <ads-input\n [control]=\"valueControl\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [pattern]=\"pattern\"\n [label]=\"label\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n </div>\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: dropdownWidth }\"\n >\n @if (isSingleOptionSelected) {\n <ads-input\n [control]=\"dropdownControl\"\n [id]=\"id\"\n [readonly]=\"true\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n } @else {\n <ads-dropdown\n [hasEmptyValue]=\"hasEmptyValue\"\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"options\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [displayValueKey]=\"displayValueKey\"\n [fitContent]=\"fitContent\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n }\n </div>\n </div>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3446
|
+
args: [{ selector: 'ads-input-dropdown', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n <div class=\"form-controls-wrapper\">\n <div\n class=\"text-box\"\n [ngClass]=\"{\n invalid: dropdownControl.invalid && dropdownControl.touched,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: inputWidth }\"\n >\n <ads-input\n [control]=\"valueControl\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [pattern]=\"pattern\"\n [label]=\"label\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [mask]=\"mask\"\n />\n </div>\n <div\n class=\"select-box\"\n [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n [ngStyle]=\"{ width: dropdownWidth }\"\n >\n @if (isSingleOptionSelected) {\n <ads-input\n [control]=\"dropdownControl\"\n [id]=\"id\"\n [readonly]=\"true\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [showFooter]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [mask]=\"mask\"\n />\n } @else {\n <ads-dropdown\n [hasEmptyValue]=\"hasEmptyValue\"\n [control]=\"dropdownControl\"\n [id]=\"dropdownId\"\n [options]=\"options\"\n [label]=\"dropdownLabel\"\n [placeholder]=\"dropdownPlaceholder\"\n [immediateValidation]=\"immediateValidation\"\n [displayValueKey]=\"displayValueKey\"\n [fitContent]=\"fitContent\"\n [showFooter]=\"false\"\n [checkSelected]=\"false\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n />\n }\n </div>\n </div>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n</div>\n@if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px}\n"] }]
|
|
3439
3447
|
}], propDecorators: { maxlength: [{
|
|
3440
3448
|
type: Input
|
|
3441
3449
|
}], type: [{
|
|
@@ -3464,6 +3472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3464
3472
|
type: Input
|
|
3465
3473
|
}], fitContent: [{
|
|
3466
3474
|
type: Input
|
|
3475
|
+
}], mask: [{
|
|
3476
|
+
type: Input
|
|
3467
3477
|
}], dropdownComponent: [{
|
|
3468
3478
|
type: ViewChild,
|
|
3469
3479
|
args: [AdsDropdownComponent]
|
|
@@ -6510,9 +6520,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
6510
6520
|
}]
|
|
6511
6521
|
}] });
|
|
6512
6522
|
|
|
6523
|
+
class AdsTimeFieldComponent extends AdsInputDropdownComponent {
|
|
6524
|
+
constructor() {
|
|
6525
|
+
super(...arguments);
|
|
6526
|
+
/** Enable military time, is "true" by default */
|
|
6527
|
+
/** @ignore */
|
|
6528
|
+
this.militaryTime = input(true);
|
|
6529
|
+
/** @ignore */
|
|
6530
|
+
this.periodControl = new FormControl(null, Validators.required);
|
|
6531
|
+
/** @ignore */
|
|
6532
|
+
this.periodOptions = ['AM', 'PM'];
|
|
6533
|
+
this.errorMessages = { mask: 'Time must be in the format HH:mm.' };
|
|
6534
|
+
}
|
|
6535
|
+
/** @ignore */
|
|
6536
|
+
onBlurUpdateTime() {
|
|
6537
|
+
let timeValue = this.valueControl.value;
|
|
6538
|
+
if (timeValue) {
|
|
6539
|
+
// Normalize the time value based on the mask
|
|
6540
|
+
if (timeValue.length === 3) {
|
|
6541
|
+
// Add a missing "0" to the minutes
|
|
6542
|
+
timeValue = timeValue.slice(0, 2) + ':0' + timeValue.slice(2);
|
|
6543
|
+
}
|
|
6544
|
+
else if (timeValue.length === 4 && timeValue.includes(':')) {
|
|
6545
|
+
// Add a trailing "0" to minutes if only one digit is present
|
|
6546
|
+
const [hours, minutes] = timeValue.split(':');
|
|
6547
|
+
if (minutes.length === 1) {
|
|
6548
|
+
timeValue = `${hours}:${minutes}0`;
|
|
6549
|
+
}
|
|
6550
|
+
}
|
|
6551
|
+
else if (timeValue.length === 4) {
|
|
6552
|
+
// If the value is 4 digits long, treat it as HHMM and split it into hours and minutes
|
|
6553
|
+
const hours = timeValue.slice(0, 2); // First two digits as hours
|
|
6554
|
+
const minutes = timeValue.slice(2); // Last two digits as minutes
|
|
6555
|
+
// Ensure the minutes are 2 digits
|
|
6556
|
+
timeValue = `${hours}:${minutes}`;
|
|
6557
|
+
}
|
|
6558
|
+
// Update the form control value in HH:mm format
|
|
6559
|
+
this.valueControl.setValue(timeValue, { emitEvent: false });
|
|
6560
|
+
}
|
|
6561
|
+
}
|
|
6562
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AdsTimeFieldComponent, isStandalone: false, selector: "ads-time-field", inputs: { militaryTime: { classPropertyName: "militaryTime", publicName: "militaryTime", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (militaryTime()) {\n <div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n mask=\"Hh:m0\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlurUpdateTime()\"\n />\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n </div>\n} @else {\n <ads-input-dropdown\n [width]=\"width\"\n [label]=\"label\"\n [options]=\"periodOptions\"\n [hasEmptyValue]=\"false\"\n [control]=\"valueControl\"\n [dropdownControl]=\"periodControl\"\n [placeholder]=\"placeholder\"\n [id]=\"id\"\n [dropdownId]=\"dropdownId\"\n [dropdownLabel]=\"'AM/PM'\"\n [dropdownPlaceholder]=\"dropdownPlaceholder\"\n [dropdownWidth]=\"'128px'\"\n [inputWidth]=\"inputWidth\"\n [tooltip]=\"tooltip\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n mask=\"Hh:m0\"\n />\n}\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputDropdownComponent, selector: "ads-input-dropdown", inputs: ["maxlength", "type", "pattern", "dropdownControl", "dropdownId", "dropdownLabel", "dropdownPlaceholder", "inputWidth", "dropdownWidth", "autoSelectSingleDropdownOption", "options", "displayValueKey", "hasEmptyValue", "fitContent", "mask"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i11.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
6564
|
+
}
|
|
6565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldComponent, decorators: [{
|
|
6566
|
+
type: Component,
|
|
6567
|
+
args: [{ selector: 'ads-time-field', standalone: false, template: "@if (militaryTime()) {\n <div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <input\n matInput\n [id]=\"id\"\n mask=\"Hh:m0\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlurUpdateTime()\"\n />\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n </button>\n }\n </mat-form-field>\n <div class=\"footer-container\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n }\n </div>\n} @else {\n <ads-input-dropdown\n [width]=\"width\"\n [label]=\"label\"\n [options]=\"periodOptions\"\n [hasEmptyValue]=\"false\"\n [control]=\"valueControl\"\n [dropdownControl]=\"periodControl\"\n [placeholder]=\"placeholder\"\n [id]=\"id\"\n [dropdownId]=\"dropdownId\"\n [dropdownLabel]=\"'AM/PM'\"\n [dropdownPlaceholder]=\"dropdownPlaceholder\"\n [dropdownWidth]=\"'128px'\"\n [inputWidth]=\"inputWidth\"\n [tooltip]=\"tooltip\"\n [size]=\"size\"\n [successMessage]=\"successMessage\"\n [errorMessages]=\"errorMessages\"\n [showExclamationOnError]=\"showExclamationOnError\"\n [showClearButton]=\"showClearButton\"\n [immediateValidation]=\"immediateValidation\"\n mask=\"Hh:m0\"\n />\n}\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 20px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 14px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
|
|
6568
|
+
}] });
|
|
6569
|
+
|
|
6570
|
+
class AdsTimeFieldModule {
|
|
6571
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6572
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldModule, declarations: [AdsTimeFieldComponent], imports: [CommonModule,
|
|
6573
|
+
AdsInputDropdownModule,
|
|
6574
|
+
AdsErrorComponent,
|
|
6575
|
+
AdsHintComponent,
|
|
6576
|
+
AdsSuccessComponent,
|
|
6577
|
+
AdsIconModule,
|
|
6578
|
+
AdsInputTooltipComponent,
|
|
6579
|
+
MatFormField,
|
|
6580
|
+
MatIconButton,
|
|
6581
|
+
MatInput,
|
|
6582
|
+
MatLabel,
|
|
6583
|
+
MatSuffix,
|
|
6584
|
+
NgxMaskDirective,
|
|
6585
|
+
ReactiveFormsModule,
|
|
6586
|
+
AdsInputModule], exports: [AdsTimeFieldComponent] }); }
|
|
6587
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldModule, imports: [CommonModule,
|
|
6588
|
+
AdsInputDropdownModule,
|
|
6589
|
+
AdsErrorComponent,
|
|
6590
|
+
AdsSuccessComponent,
|
|
6591
|
+
AdsIconModule,
|
|
6592
|
+
AdsInputTooltipComponent,
|
|
6593
|
+
MatFormField,
|
|
6594
|
+
MatIconButton,
|
|
6595
|
+
ReactiveFormsModule,
|
|
6596
|
+
AdsInputModule] }); }
|
|
6597
|
+
}
|
|
6598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AdsTimeFieldModule, decorators: [{
|
|
6599
|
+
type: NgModule,
|
|
6600
|
+
args: [{
|
|
6601
|
+
imports: [
|
|
6602
|
+
CommonModule,
|
|
6603
|
+
AdsInputDropdownModule,
|
|
6604
|
+
AdsErrorComponent,
|
|
6605
|
+
AdsHintComponent,
|
|
6606
|
+
AdsSuccessComponent,
|
|
6607
|
+
AdsIconModule,
|
|
6608
|
+
AdsInputTooltipComponent,
|
|
6609
|
+
MatFormField,
|
|
6610
|
+
MatIconButton,
|
|
6611
|
+
MatInput,
|
|
6612
|
+
MatLabel,
|
|
6613
|
+
MatSuffix,
|
|
6614
|
+
NgxMaskDirective,
|
|
6615
|
+
ReactiveFormsModule,
|
|
6616
|
+
AdsInputModule,
|
|
6617
|
+
],
|
|
6618
|
+
declarations: [AdsTimeFieldComponent],
|
|
6619
|
+
exports: [AdsTimeFieldComponent],
|
|
6620
|
+
}]
|
|
6621
|
+
}] });
|
|
6622
|
+
|
|
6513
6623
|
/**
|
|
6514
6624
|
* Generated bundle index. Do not edit.
|
|
6515
6625
|
*/
|
|
6516
6626
|
|
|
6517
|
-
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalStepperComponent, AdsVerticalStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, VerticalStepStatus, ViewportService, WindowService };
|
|
6627
|
+
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalStepperComponent, AdsVerticalStepperModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, VerticalStepStatus, ViewportService, WindowService };
|
|
6518
6628
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|