@ascentgl/ads-ui 21.62.0 → 21.63.1
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.
|
@@ -2452,9 +2452,15 @@ class AbstractBaseComponent {
|
|
|
2452
2452
|
}
|
|
2453
2453
|
}, 0);
|
|
2454
2454
|
});
|
|
2455
|
+
// Subscribe to status changes to update hadRequiredValidator when validators are externally added/removed
|
|
2456
|
+
// This ensures the asterisk is correctly shown/hidden after addValidators/removeValidators calls
|
|
2457
|
+
const statusSub = this.valueControl.statusChanges.subscribe(() => {
|
|
2458
|
+
this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
|
|
2459
|
+
});
|
|
2455
2460
|
this.destroyRef.onDestroy(() => {
|
|
2456
2461
|
subscription.unsubscribe();
|
|
2457
2462
|
valueSub.unsubscribe();
|
|
2463
|
+
statusSub.unsubscribe();
|
|
2458
2464
|
});
|
|
2459
2465
|
}
|
|
2460
2466
|
else {
|
|
@@ -2463,8 +2469,13 @@ class AbstractBaseComponent {
|
|
|
2463
2469
|
}
|
|
2464
2470
|
/** @ignore */
|
|
2465
2471
|
get required() {
|
|
2466
|
-
//
|
|
2467
|
-
|
|
2472
|
+
// When skipValidationWhenEmpty is active and value is empty, validators are temporarily removed.
|
|
2473
|
+
// In that case, use hadRequiredValidator to preserve the asterisk.
|
|
2474
|
+
// Otherwise, check the actual current validator state.
|
|
2475
|
+
if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value)) {
|
|
2476
|
+
return this.hadRequiredValidator;
|
|
2477
|
+
}
|
|
2478
|
+
return this.valueControl.hasValidator(Validators.required);
|
|
2468
2479
|
}
|
|
2469
2480
|
constructor() {
|
|
2470
2481
|
this._isStaticFooter = inject(ADS_UI_CONFIG, { optional: true })?.staticFormFieldFooter;
|
|
@@ -3262,11 +3273,11 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
|
|
|
3262
3273
|
return option && typeof option === 'object' && 'disableDropdownOption' in option && option.disableDropdownOption === true;
|
|
3263
3274
|
}
|
|
3264
3275
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, 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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, 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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3266
3277
|
}
|
|
3267
3278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, decorators: [{
|
|
3268
3279
|
type: Component,
|
|
3269
|
-
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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3280
|
+
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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3270
3281
|
}], ctorParameters: () => [], propDecorators: { displayValueFormatter: [{
|
|
3271
3282
|
type: Input
|
|
3272
3283
|
}], mode: [{
|
|
@@ -3421,11 +3432,11 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
|
|
|
3421
3432
|
});
|
|
3422
3433
|
}
|
|
3423
3434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4$2.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", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "borderColor", "borderWidth", "width", "id", "removable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3425
3436
|
}
|
|
3426
3437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
|
|
3427
3438
|
type: Component,
|
|
3428
|
-
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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3439
|
+
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 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\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]=\"panelClassList\"\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 } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\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]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-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;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3429
3440
|
}], propDecorators: { showChips: [{
|
|
3430
3441
|
type: Input
|
|
3431
3442
|
}] } });
|
|
@@ -3559,11 +3570,11 @@ class AdsInputComponent extends AbstractInputComponent {
|
|
|
3559
3570
|
}
|
|
3560
3571
|
}
|
|
3561
3572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3562
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", matAutocomplete: "matAutocomplete", showSearchIcon: "showSearchIcon", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, 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 [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\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 [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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) {\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\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n (click)=\"showHidePassword()\"\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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.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", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
|
|
3573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInputComponent, isStandalone: false, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", matAutocomplete: "matAutocomplete", showSearchIcon: "showSearchIcon", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, 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 [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\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 [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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) {\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\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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.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", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
|
|
3563
3574
|
}
|
|
3564
3575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInputComponent, decorators: [{
|
|
3565
3576
|
type: Component,
|
|
3566
|
-
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 [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\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 [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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) {\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\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n (click)=\"showHidePassword()\"\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n stroke=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3577
|
+
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 [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': canClear,\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 [suffix]=\"suffix\"\n [prefix]=\"prefix\"\n [mask]=\"mask\"\n [maxlength]=\"maxlength\"\n [dropSpecialCharacters]=\"dropSpecialCharacters\"\n [thousandSeparator]=\"thousandSeparator\"\n [decimalMarker]=\"decimalMarker\"\n [id]=\"id\"\n [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"restrictInput($event)\"\n (wheel)=\"preventScroll($event)\"\n [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n [attr.pattern]=\"pattern\"\n />\n @if (rightHint) {\n <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\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) {\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\n @if (showClockIcon) {\n <button\n type=\"button\"\n [disableRipple]=\"true\"\n mat-icon-button\n matTextSuffix\n class=\"action-icon time-picker-button\"\n >\n <ads-icon\n class=\"status_processing\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n theme=\"iconPrimary\"\n />\n </button>\n }\n\n @if (showSearchIcon) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disableRipple]=\"true\"\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3567
3578
|
}], propDecorators: { maxlength: [{
|
|
3568
3579
|
type: Input
|
|
3569
3580
|
}], type: [{
|
|
@@ -3743,11 +3754,11 @@ class AdsTextareaComponent extends AbstractInputComponent {
|
|
|
3743
3754
|
this.canResize = true;
|
|
3744
3755
|
}
|
|
3745
3756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3746
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTextareaComponent, isStandalone: false, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, 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 && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
3757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTextareaComponent, isStandalone: false, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, 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 && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
3747
3758
|
}
|
|
3748
3759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTextareaComponent, decorators: [{
|
|
3749
3760
|
type: Component,
|
|
3750
|
-
args: [{ selector: 'ads-textarea', 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 && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3761
|
+
args: [{ selector: 'ads-textarea', 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 && !showExclamation,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if(label || required) {\n <mat-label>{{ label }}</mat-label>\n }\n <textarea\n matInput\n [rows]=\"rows\"\n [maxlength]=\"maxlength\"\n [id]=\"id\"\n [formControl]=\"valueControl\"\n [required]=\"required\"\n [placeholder]=\"placeholder\"\n [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n >\n </textarea>\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 [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3751
3762
|
}], propDecorators: { maxlength: [{
|
|
3752
3763
|
type: Input
|
|
3753
3764
|
}], rows: [{
|
|
@@ -4498,7 +4509,7 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4498
4509
|
}
|
|
4499
4510
|
this.loading.set(this.canEmitValue(value));
|
|
4500
4511
|
}), debounce((value) => {
|
|
4501
|
-
return this.canEmitValue(value) && value ? timer(
|
|
4512
|
+
return this.canEmitValue(value) && value ? timer(200) : of({});
|
|
4502
4513
|
}))
|
|
4503
4514
|
.subscribe((value) => {
|
|
4504
4515
|
if (this.canEmitValue(value)) {
|
|
@@ -4616,8 +4627,10 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4616
4627
|
/**
|
|
4617
4628
|
* only emit event if value is a string, and we can emit empty values, or it is not empty
|
|
4618
4629
|
* NOTE: it disallows to emit explicitly selected "REAL" values
|
|
4630
|
+
* Trim the value to check if it's not just whitespace
|
|
4619
4631
|
*/
|
|
4620
|
-
|
|
4632
|
+
const trimmedValue = typeof value === 'string' ? value.trim() : '';
|
|
4633
|
+
return !this.staticOptions && typeof value == 'string' && (this.emitEmptyValues || !!trimmedValue);
|
|
4621
4634
|
}
|
|
4622
4635
|
/** @ignore */
|
|
4623
4636
|
setControlValueFromString(displayedValue) {
|
|
@@ -4758,11 +4771,11 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4758
4771
|
this.intersectionObserver.observe(this.hostEl.nativeElement);
|
|
4759
4772
|
}
|
|
4760
4773
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, staticOptions: { classPropertyName: "staticOptions", publicName: "staticOptions", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, emitEmptyValues: { classPropertyName: "emitEmptyValues", publicName: "emitEmptyValues", isSignal: false, isRequired: false, transformFunction: null }, loadSuggestionOnInit: { classPropertyName: "loadSuggestionOnInit", publicName: "loadSuggestionOnInit", isSignal: false, isRequired: false, transformFunction: null }, noDataOption: { classPropertyName: "noDataOption", publicName: "noDataOption", isSignal: false, isRequired: false, transformFunction: null }, moreDataOption: { classPropertyName: "moreDataOption", publicName: "moreDataOption", isSignal: false, isRequired: false, transformFunction: null }, staticDataOption: { classPropertyName: "staticDataOption", publicName: "staticDataOption", isSignal: false, isRequired: false, transformFunction: null }, onEnterKeyDown: { classPropertyName: "onEnterKeyDown", publicName: "onEnterKeyDown", isSignal: false, isRequired: false, transformFunction: null }, searchIconClickCallback: { classPropertyName: "searchIconClickCallback", publicName: "searchIconClickCallback", isSignal: false, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: false, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: false, isRequired: false, transformFunction: null }, displayValueFormatter: { classPropertyName: "displayValueFormatter", publicName: "displayValueFormatter", isSignal: false, isRequired: false, transformFunction: null }, useOptionTemplate: { classPropertyName: "useOptionTemplate", publicName: "useOptionTemplate", isSignal: false, isRequired: false, transformFunction: null }, minValueLength: { classPropertyName: "minValueLength", publicName: "minValueLength", isSignal: false, isRequired: false, transformFunction: null }, preventClick: { classPropertyName: "preventClick", publicName: "preventClick", isSignal: false, isRequired: false, transformFunction: null }, closePanelEnabled: { classPropertyName: "closePanelEnabled", publicName: "closePanelEnabled", isSignal: false, isRequired: false, transformFunction: null }, trimValue: { classPropertyName: "trimValue", publicName: "trimValue", isSignal: false, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { externalButtonClick: "externalButtonClick", focusInput: "focusInput", blurInput: "blurInput", emitSearchValueInput: "emitSearchValueInput" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "moreDataMatOption", first: true, predicate: ["moreDataMatOption"], descendants: true }, { propertyName: "noDataMatOption", first: true, predicate: ["noDataMatOption"], descendants: true }, { propertyName: "staticDataMatOption", first: true, predicate: ["staticDataMatOption"], descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], 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 (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\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 @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
|
|
4774
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, staticOptions: { classPropertyName: "staticOptions", publicName: "staticOptions", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, emitEmptyValues: { classPropertyName: "emitEmptyValues", publicName: "emitEmptyValues", isSignal: false, isRequired: false, transformFunction: null }, loadSuggestionOnInit: { classPropertyName: "loadSuggestionOnInit", publicName: "loadSuggestionOnInit", isSignal: false, isRequired: false, transformFunction: null }, noDataOption: { classPropertyName: "noDataOption", publicName: "noDataOption", isSignal: false, isRequired: false, transformFunction: null }, moreDataOption: { classPropertyName: "moreDataOption", publicName: "moreDataOption", isSignal: false, isRequired: false, transformFunction: null }, staticDataOption: { classPropertyName: "staticDataOption", publicName: "staticDataOption", isSignal: false, isRequired: false, transformFunction: null }, onEnterKeyDown: { classPropertyName: "onEnterKeyDown", publicName: "onEnterKeyDown", isSignal: false, isRequired: false, transformFunction: null }, searchIconClickCallback: { classPropertyName: "searchIconClickCallback", publicName: "searchIconClickCallback", isSignal: false, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", isSignal: false, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: false, isRequired: false, transformFunction: null }, displayValueFormatter: { classPropertyName: "displayValueFormatter", publicName: "displayValueFormatter", isSignal: false, isRequired: false, transformFunction: null }, useOptionTemplate: { classPropertyName: "useOptionTemplate", publicName: "useOptionTemplate", isSignal: false, isRequired: false, transformFunction: null }, minValueLength: { classPropertyName: "minValueLength", publicName: "minValueLength", isSignal: false, isRequired: false, transformFunction: null }, preventClick: { classPropertyName: "preventClick", publicName: "preventClick", isSignal: false, isRequired: false, transformFunction: null }, closePanelEnabled: { classPropertyName: "closePanelEnabled", publicName: "closePanelEnabled", isSignal: false, isRequired: false, transformFunction: null }, trimValue: { classPropertyName: "trimValue", publicName: "trimValue", isSignal: false, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { externalButtonClick: "externalButtonClick", focusInput: "focusInput", blurInput: "blurInput", emitSearchValueInput: "emitSearchValueInput" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "moreDataMatOption", first: true, predicate: ["moreDataMatOption"], descendants: true }, { propertyName: "noDataMatOption", first: true, predicate: ["noDataMatOption"], descendants: true }, { propertyName: "staticDataMatOption", first: true, predicate: ["staticDataMatOption"], descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], 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 (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\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 @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
|
|
4762
4775
|
}
|
|
4763
4776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchDropdownComponent, decorators: [{
|
|
4764
4777
|
type: Component,
|
|
4765
|
-
args: [{ selector: 'ads-search-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\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 @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4778
|
+
args: [{ selector: 'ads-search-dropdown', standalone: false, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (focusout)=\"onBlur($event)\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'is-open': trigger?.panelOpen,\n invalid: canShowError(),\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-invalid-when-empty': skipValidationWhenEmpty && !displayControl.value,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n @if (wrapOptionText) {\n <textarea\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n rows=\"1\"\n class=\"auto-resize-textarea\"\n ></textarea>\n } @else {\n <input\n #input\n [disabled]=\"displayControl.disabled\"\n (keydown.enter)=\"onKeyDown($event.target)\"\n (input)=\"onInput($event.target)\"\n (focus)=\"onFocus()\"\n type=\"text\"\n [autocomplete]=\"'none'\"\n [id]=\"id\"\n matInput\n [value]=\"getDisplayedValueAsString()\"\n [attr.maxlength]=\"maxlength\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n />\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n [disableRipple]=\"true\"\n [class]=\"\n 'ads-dropdown-panel' +\n (fitContent ? ' fit-content' : '') +\n (loading() ? ' loading' : '') +\n (preventClick ? '' : ' clickable') +\n ' ' +\n panelClass\n \"\n >\n @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n <mat-option\n #opt\n [value]=\"option\"\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n (mousedown)=\"onOptionMouseDown($event, opt)\"\n [matTooltip]=\"tooltipLabel(option)\"\n [matTooltipDisabled]=\"useOptionTemplate || !showTooltip\"\n >\n @if (useOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"optionRef()\"\n [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n ></ng-template>\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHtml]=\"\n displayValueFormatter\n ? displayValueFormatter(\n option!.value! | adsSearchDropdownHighlighter: displayControl.value,\n option.key\n )\n : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\n \"\n ></span>\n }\n </mat-option>\n }\n\n @if (canUseMoreDataOption) {\n <hr class=\"no-results-hr\" />\n <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseNoDataOption) {\n <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\n />\n </mat-option>\n }\n\n @if (canUseStaticOption) {\n @if (displayedOptions.size) {\n <hr class=\"no-results-hr\" />\n }\n <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\n <ng-container\n [ngTemplateOutlet]=\"extraOptionValue\"\n [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\n />\n </mat-option>\n }\n </mat-autocomplete>\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 @if (showDropdownIcon) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\n <ads-icon\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n }\n @if (showSearchIcon) {\n @if (!staticOptions && loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n }\n @if (!staticOptions && !loading()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canSearch\"\n (click)=\"canSearch ? onSearchIconClick($event) : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n }\n @if(externalButton()) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n tabindex=\"0\"\n (click)=\"onExternalButtonClick($event)\"\n class=\"action-icon external-button\">\n <ads-icon [name]=\"externalButton()!\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"external-icon\" />\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\n </div>\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n\n <ng-template #extraOptionValue let-option>\n <span\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\n >\n @if (isTemplateRef(option!.label)) {\n <ng-container\n [ngTemplateOutlet]=\"$any(option!.label)\"\n [ngTemplateOutletContext]=\"{ $implicit: displayControl.value }\"\n />\n } @else {\n <span [innerHTML]=\"option!.label\"></span>\n }\n </span>\n </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\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-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}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.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}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-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{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-selected-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:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{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{width:100%}mat-form-field.invalid ::ng-deep{--mat-form-field-filled-label-text-color: var(--color-error);--mat-form-field-filled-hover-label-text-color: var(--color-error);--mat-form-field-filled-focus-label-text-color: var(--color-error)}mat-form-field.invalid ::ng-deep .mdc-text-field{outline:2px solid var(--color-error);outline-offset:-2px}mat-form-field.invalid ::ng-deep .mdc-text-field ads-icon{stroke:var(--mat-form-field-filled-error-label-text-color)!important;color:var(--mat-form-field-filled-error-label-text-color)!important}mat-form-field.wrap-trigger-text ::ng-deep .auto-resize-textarea{resize:none;overflow:hidden;min-height:24px;max-height:120px;line-height:1.4;padding-top:12px;padding-bottom:12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{min-height:24px;padding-top:0;padding-bottom:0}mat-form-field.has-label.wrap-trigger-text ::ng-deep .auto-resize-textarea{padding-top:0;padding-bottom:0}mat-option.extra{opacity:1;font-size:.75rem;min-height:32px;display:flex}mat-option.extra ::ng-deep .mdc-list-item__primary-text{opacity:1}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4766
4779
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { optionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], externalButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalButton", required: false }] }], externalButtonClick: [{ type: i0.Output, args: ["externalButtonClick"] }], maxlength: [{
|
|
4767
4780
|
type: Input
|
|
4768
4781
|
}], panelClass: [{
|
|
@@ -4928,11 +4941,11 @@ class AdsSearchInputComponent extends AdsInputComponent {
|
|
|
4928
4941
|
return this.valueControl.value || this.searchEmptyValue;
|
|
4929
4942
|
}
|
|
4930
4943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchInputComponent, isStandalone: false, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable", searchEmptyValue: "searchEmptyValue", loading: "loading" }, 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 '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 (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
4944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSearchInputComponent, isStandalone: false, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable", searchEmptyValue: "searchEmptyValue", loading: "loading" }, 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 '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 (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
4932
4945
|
}
|
|
4933
4946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSearchInputComponent, decorators: [{
|
|
4934
4947
|
type: Component,
|
|
4935
|
-
args: [{ selector: 'ads-search-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 '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 (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4948
|
+
args: [{ selector: 'ads-search-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 '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 (keydown.enter)=\"onSearch()\"\n [maxlength]=\"maxlength\"\n [attr.pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"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 name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n\n @if (loading) {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"true\"\n class=\"action-icon\"\n >\n <ads-icon name=\"loading\" [stroke]=\"'iconPrimary'\" [size]=\"smallSize ? 'xxs' : 'xs'\" />\n </button>\n } @else {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n [disabled]=\"!canClick\"\n (click)=\"canClick ? onSearch() : null\"\n class=\"action-icon\"\n >\n <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n </button>\n }\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
4936
4949
|
}], ctorParameters: () => [], propDecorators: { searchCallback: [{
|
|
4937
4950
|
type: Input
|
|
4938
4951
|
}], isIconClickable: [{
|
|
@@ -5638,11 +5651,11 @@ class AdsDatetimepickerComponent extends AbstractInputComponent {
|
|
|
5638
5651
|
return this.removeOffset(value, this.getRequiredOffset(value));
|
|
5639
5652
|
}
|
|
5640
5653
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatetimepickerComponent, isStandalone: false, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat", timeInterval: "timeInterval", overlayCdkClass: "overlayCdkClass" }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], 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 [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
5654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatetimepickerComponent, isStandalone: false, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat", timeInterval: "timeInterval", overlayCdkClass: "overlayCdkClass" }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], 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 [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
5642
5655
|
}
|
|
5643
5656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatetimepickerComponent, decorators: [{
|
|
5644
5657
|
type: Component,
|
|
5645
|
-
args: [{ selector: 'ads-datetimepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5658
|
+
args: [{ selector: 'ads-datetimepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
5646
5659
|
}], ctorParameters: () => [], propDecorators: { picker: [{
|
|
5647
5660
|
type: ViewChild,
|
|
5648
5661
|
args: [MatDatetimepickerComponent]
|
|
@@ -6071,11 +6084,11 @@ class AdsDatepickerComponent extends AdsDatetimepickerComponent {
|
|
|
6071
6084
|
date.getDate() === day;
|
|
6072
6085
|
}
|
|
6073
6086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
|
|
6087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDatepickerComponent, isStandalone: false, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }] }); }
|
|
6075
6088
|
}
|
|
6076
6089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDatepickerComponent, decorators: [{
|
|
6077
6090
|
type: Component,
|
|
6078
|
-
args: [{ selector: 'ads-datepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6091
|
+
args: [{ selector: 'ads-datepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6079
6092
|
}], propDecorators: { customDisplayFormat: [{
|
|
6080
6093
|
type: Input
|
|
6081
6094
|
}], closeOnOutOfView: [{
|
|
@@ -6205,11 +6218,11 @@ class AdsTimepickerComponent extends AdsDatetimepickerComponent {
|
|
|
6205
6218
|
super.onSyncDisplayedValue(valueToApply);
|
|
6206
6219
|
}
|
|
6207
6220
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTimepickerComponent, isStandalone: false, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
6221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTimepickerComponent, isStandalone: false, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\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: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { 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: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }] }); }
|
|
6209
6222
|
}
|
|
6210
6223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTimepickerComponent, decorators: [{
|
|
6211
6224
|
type: Component,
|
|
6212
|
-
args: [{ selector: 'ads-timepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(.mat-form-field-disabled).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(--mat-form-field-filled-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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6225
|
+
args: [{ selector: 'ads-timepicker', 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': !showExclamation,\n invalid: canShowError(),\n manual: allowManualInput,\n 'success-label': canShowSuccess(),\n 'x-small': smallSize,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <mat-datetimepicker\n #datetimePicker\n (viewChanged)=\"onViewChanged($event)\"\n (opened)=\"onOpened()\"\n (closed)=\"onClosed()\"\n [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n [openOnFocus]=\"!allowManualInput\"\n [twelvehour]=\"twelveHour\"\n [timeInterval]=\"timeInterval\"\n [mode]=\"'portrait'\"\n />\n <input\n (dateChange)=\"onChanged($event)\"\n dateTimePickerFormat\n [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n [customDisplayFormat]=\"customDisplayFormatOverride\"\n #input\n matInput\n (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n (blur)=\"touchControls()\"\n [tabIndex]=\"allowManualInput ? 0 : -1\"\n [min]=\"minDate || null\"\n [readonly]=\"!allowManualInput\"\n [formControl]=\"displayControl\"\n [matDatetimepicker]=\"datetimePicker\"\n autocomplete=\"false\"\n [id]=\"id\"\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 (type === 'time') {\n <button\n matTextSuffix\n type=\"button\"\n mat-icon-button\n (click)=\"toggle($event)\"\n [disabled]=\"!showTimePicker\"\n class=\"action-icon\"\n >\n <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n </button>\n } @else {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'xs'\" [stroke]=\"'iconPrimary'\" />\n @if (type === 'datetime') {\n <ads-icon\n class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n name=\"status_processing\"\n [size]=\"smallSize ? 'xxxxs' : 'xxxs'\"\n [stroke]=\"'iconPrimary'\"\n />\n }\n </button>\n }\n </mat-form-field>\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\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 @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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(--mat-form-field-filled-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;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .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(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled).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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "button .sub-timepicker{position:absolute;top:0;left:5%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
6213
6226
|
}], ctorParameters: () => [], propDecorators: { customDisplayFormat: [{
|
|
6214
6227
|
type: Input
|
|
6215
6228
|
}] } });
|
|
@@ -9836,7 +9849,7 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
|
|
|
9836
9849
|
/** Enable military time, is "true" by default */
|
|
9837
9850
|
this.militaryTime = input(true, ...(ngDevMode ? [{ debugName: "militaryTime" }] : []));
|
|
9838
9851
|
/** Hide clock icon for military time */
|
|
9839
|
-
this.hideClockIcon = input(
|
|
9852
|
+
this.hideClockIcon = input(false, ...(ngDevMode ? [{ debugName: "hideClockIcon" }] : []));
|
|
9840
9853
|
/** @ignore */
|
|
9841
9854
|
this.periodControl = new FormControl(null);
|
|
9842
9855
|
/** @ignore */
|