@ascentgl/ads-ui 20.0.26 → 20.0.28

package/fesm2022/ascentgl-ads-ui.mjs

@@ -391,6 +391,7 @@ var Colors;
     Colors["SuccessHover"] = "success-hover";
     Colors["SuccessPressed"] = "success-pressed";
     Colors["Logo"] = "logo";
+    Colors["Alert"] = "alert";
 })(Colors || (Colors = {}));
 
 class AdsCardComponent {
@@ -3680,6 +3681,8 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         this.ref = ref;
         /** @ignore */
         this.optionRef = contentChild.required((TemplateRef));
+        this.externalButton = input(null, ...(ngDevMode ? [{ debugName: "externalButton" }] : []));
+        this.externalButtonClick = output();
         /** Maximum amount of characters in the input field */
         this.maxlength = 255;
         /** Set to additional paneClass if required*/
@@ -3782,6 +3785,11 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         return this.staticOptions && (!!this.displayedOptions.size || !!this.allOptions.size);
     }
     /** @ignore */
+    onExternalButtonClick(event) {
+        event.stopPropagation();
+        this.externalButtonClick.emit();
+    }
+    /** @ignore */
     onSearchIconClick(event) {
         event.stopPropagation();
         if (this.searchIconClickCallback) {
@@ -4263,11 +4271,11 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AdsSearchDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { maxlength: "maxlength", panelClass: "panelClass", options: "options", staticOptions: "staticOptions", filterOptions: "filterOptions", emitEmptyValues: "emitEmptyValues", loadSuggestionOnInit: "loadSuggestionOnInit", noDataOption: "noDataOption", moreDataOption: "moreDataOption", staticDataOption: "staticDataOption", onEnterKeyDown: "onEnterKeyDown", searchIconClickCallback: "searchIconClickCallback", displayValueFormatter: "displayValueFormatter", useOptionTemplate: "useOptionTemplate", minValueLength: "minValueLength", preventClick: "preventClick", closePanelEnabled: "closePanelEnabled", trimValue: "trimValue", control: "control", errorMessages: "errorMessages", hint: "hint", id: "id", label: "label", placeholder: "placeholder" }, outputs: { 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      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'is-open': trigger?.panelOpen,\n        invalid: canShowError(),\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      <input\n        #input\n        [disabled]=\"displayControl.disabled\"\n        (keydown.enter)=\"onKeyDown($event.target)\"\n        (blur)=\"onBlur()\"\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      <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 #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\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                [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 (!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    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n\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      [innerHTML]=\"option!.label\"\n    ></span>\n  </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}: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-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-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-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--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}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{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{border-color:var(--color-error)}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-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 ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px}::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: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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 }, 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 }, 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      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'is-open': trigger?.panelOpen,\n        invalid: canShowError(),\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      <input\n        #input\n        [disabled]=\"displayControl.disabled\"\n        (keydown.enter)=\"onKeyDown($event.target)\"\n        (blur)=\"onBlur()\"\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      <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 #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\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                [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 (!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      @if(externalButton()) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"onExternalButtonClick($event)\" 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        @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      [innerHTML]=\"option!.label\"\n    ></span>\n  </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}: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-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-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-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--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}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{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{border-color:var(--color-error)}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-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 ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px}::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: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AdsSearchDropdownComponent, decorators: [{
             type: Component,
-            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      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'is-open': trigger?.panelOpen,\n        invalid: canShowError(),\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      <input\n        #input\n        [disabled]=\"displayControl.disabled\"\n        (keydown.enter)=\"onKeyDown($event.target)\"\n        (blur)=\"onBlur()\"\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      <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 #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\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                [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 (!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    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n\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      [innerHTML]=\"option!.label\"\n    ></span>\n  </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}: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-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-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-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--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}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{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{border-color:var(--color-error)}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-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 ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            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      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'is-open': trigger?.panelOpen,\n        invalid: canShowError(),\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      <input\n        #input\n        [disabled]=\"displayControl.disabled\"\n        (keydown.enter)=\"onKeyDown($event.target)\"\n        (blur)=\"onBlur()\"\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      <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 #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\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                [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 (!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      @if(externalButton()) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"onExternalButtonClick($event)\" 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        @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      [innerHTML]=\"option!.label\"\n    ></span>\n  </ng-template>\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}: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-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-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-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--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}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{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{border-color:var(--color-error)}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-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 ::ng-deep .highlighted-text{font-weight:700}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { maxlength: [{
                 type: Input
             }], panelClass: [{