npm - @ascentgl/ads-ui - Versions diffs - 0.0.18 → 0.0.20 - Mend

@ascentgl/ads-ui 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/esm2022/lib/components/form-fields/search-fields/search-dropdown/search-dropdown.component.mjs CHANGED Viewed

@@ -608,11 +608,11 @@ export class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", type: AdsSearchDropdownComponent, 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", control: "control", errorMessages: "errorMessages", hint: "hint", id: "id", label: "label", placeholder: "placeholder" }, outputs: { 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 class=\"form-control-row\" [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  >\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 [ngTemplateOutlet]=\"extraOptionValue\" [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\" />\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 name=\"chevron_down\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"chevron-down\" />\n      </button>\n    }\n    @if (!staticOptions && loading()) {\n      <mat-spinner matTextSuffix diameter=\"22\" />\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  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n\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", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mdc-filled-text-field-label-text-color: var(--color-error);--mdc-filled-text-field-hover-label-text-color: var(--color-error);--mdc-filled-text-field-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(--mdc-filled-text-field-error-label-text-color)!important;color:var(--mdc-filled-text-field-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}mat-spinner{margin:13px}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i13.AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSearchDropdownComponent, 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", control: "control", errorMessages: "errorMessages", hint: "hint", id: "id", label: "label", placeholder: "placeholder" }, outputs: { 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 class=\"form-control-row\" [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  >\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 [ngTemplateOutlet]=\"extraOptionValue\" [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\" />\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 name=\"chevron_down\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"chevron-down\" />\n      </button>\n    }\n    @if (!staticOptions && loading()) {\n      <mat-spinner matTextSuffix diameter=\"22\" />\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  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n\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", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mdc-filled-text-field-label-text-color: var(--color-error);--mdc-filled-text-field-hover-label-text-color: var(--color-error);--mdc-filled-text-field-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(--mdc-filled-text-field-error-label-text-color)!important;color:var(--mdc-filled-text-field-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}mat-spinner{margin:13px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i13.AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSearchDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-search-dropdown', template: "<div class=\"form-control-row\" [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  >\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 [ngTemplateOutlet]=\"extraOptionValue\" [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\" />\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 name=\"chevron_down\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"chevron-down\" />\n      </button>\n    }\n    @if (!staticOptions && loading()) {\n      <mat-spinner matTextSuffix diameter=\"22\" />\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  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n\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", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mdc-filled-text-field-label-text-color: var(--color-error);--mdc-filled-text-field-hover-label-text-color: var(--color-error);--mdc-filled-text-field-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(--mdc-filled-text-field-error-label-text-color)!important;color:var(--mdc-filled-text-field-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}mat-spinner{margin:13px}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-search-dropdown', template: "<div class=\"form-control-row\" [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  >\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 [ngTemplateOutlet]=\"extraOptionValue\" [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\" />\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 name=\"chevron_down\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"chevron-down\" />\n      </button>\n    }\n    @if (!staticOptions && loading()) {\n      <mat-spinner matTextSuffix diameter=\"22\" />\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  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n\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", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field{width:100%}mat-form-field.invalid ::ng-deep{--mdc-filled-text-field-label-text-color: var(--color-error);--mdc-filled-text-field-hover-label-text-color: var(--color-error);--mdc-filled-text-field-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(--mdc-filled-text-field-error-label-text-color)!important;color:var(--mdc-filled-text-field-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}mat-spinner{margin:13px}\n", ".footer-container{min-height:20px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { maxlength: [{
                 type: Input
             }], panelClass: [{

package/esm2022/lib/components/form-fields/search-fields/search-input/search-input.component.mjs CHANGED Viewed

@@ -30,11 +30,11 @@ export class AdsSearchInputComponent extends AdsInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSearchInputComponent, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: 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      [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    <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  </mat-form-field>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSearchInputComponent, selector: "ads-search-input", inputs: { searchCallback: "searchCallback", isIconClickable: "isIconClickable" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: 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      [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    <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  </mat-form-field>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-search-input', template: "<div [ngStyle]=\"{ minWidth: 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      [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    <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  </mat-form-field>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-search-input', template: "<div [ngStyle]=\"{ minWidth: 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      [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    <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  </mat-form-field>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchCallback: [{
                 type: Input
             }], isIconClickable: [{

package/esm2022/lib/components/form-fields/selection-fields/checkbox/checkbox.component.mjs CHANGED Viewed

@@ -34,11 +34,11 @@ export class AdsCheckboxComponent extends AbstractBaseComponent {
         this.valueControl.setValue(!this.valueControl.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: { indeterminate: "indeterminate", width: "width" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ width: width }\">\n  <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n    <div class=\"checkbox-ripple\">\n      <div class=\"checkbox-container\">\n        @if (valueControl.value && !indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"12\"\n            viewBox=\"0 0 14 12\"\n            fill=\"none\"\n            class=\"check-icon\"\n          >\n            <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n\n        @if (indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"4\"\n            viewBox=\"0 0 12 4\"\n            fill=\"none\"\n            class=\"indeterminate-icon\"\n          >\n            <path\n              d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n    @if (label) {\n      <span class=\"checkbox-label\">{{ label }}</span>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i3.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: { indeterminate: "indeterminate", width: "width" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ width: width }\">\n  <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n    <div class=\"checkbox-ripple\">\n      <div class=\"checkbox-container\">\n        @if (valueControl.value && !indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"12\"\n            viewBox=\"0 0 14 12\"\n            fill=\"none\"\n            class=\"check-icon\"\n          >\n            <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n\n        @if (indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"4\"\n            viewBox=\"0 0 12 4\"\n            fill=\"none\"\n            class=\"indeterminate-icon\"\n          >\n            <path\n              d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n    @if (label) {\n      <span class=\"checkbox-label\">{{ label }}</span>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i3.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-checkbox', template: "<div [ngStyle]=\"{ width: width }\">\n  <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n    <div class=\"checkbox-ripple\">\n      <div class=\"checkbox-container\">\n        @if (valueControl.value && !indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"12\"\n            viewBox=\"0 0 14 12\"\n            fill=\"none\"\n            class=\"check-icon\"\n          >\n            <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n\n        @if (indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"4\"\n            viewBox=\"0 0 12 4\"\n            fill=\"none\"\n            class=\"indeterminate-icon\"\n          >\n            <path\n              d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n    @if (label) {\n      <span class=\"checkbox-label\">{{ label }}</span>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-checkbox', template: "<div [ngStyle]=\"{ width: width }\">\n  <div class=\"ads-checkbox\" (click)=\"toggleCheck()\" [ngClass]=\"{ disabled: valueControl.disabled }\">\n    <div class=\"checkbox-ripple\">\n      <div class=\"checkbox-container\">\n        @if (valueControl.value && !indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"12\"\n            viewBox=\"0 0 14 12\"\n            fill=\"none\"\n            class=\"check-icon\"\n          >\n            <path d=\"M2 6L5.75 10.5L12 1.5\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        }\n\n        @if (indeterminate) {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"4\"\n            viewBox=\"0 0 12 4\"\n            fill=\"none\"\n            class=\"indeterminate-icon\"\n          >\n            <path\n              d=\"M11.5385 0.5H0.461538C0.206638 0.5 0 0.723858 0 1V3C0 3.27614 0.206638 3.5 0.461538 3.5H11.5385C11.7934 3.5 12 3.27614 12 3V1C12 0.723858 11.7934 0.5 11.5385 0.5Z\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n    @if (label) {\n      <span class=\"checkbox-label\">{{ label }}</span>\n    }\n  </div>\n\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n", styles: [".ads-checkbox{display:flex;align-items:center;cursor:pointer;gap:4px;height:48px}.ads-checkbox:not(.disabled) .checkbox-ripple:hover{background-color:var(--color-light-opacity-50)}.ads-checkbox:not(.disabled) .checkbox-ripple:active{background-color:var(--color-medium-opacity-50)}.ads-checkbox:not(.disabled):hover .checkbox-container{outline-color:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .check-icon{stroke:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):hover .checkbox-container .indeterminate-icon{fill:var(--color-secondary-hover)!important}.ads-checkbox:not(.disabled):active .checkbox-container{outline-color:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .check-icon{stroke:var(--color-secondary-pressed)!important}.ads-checkbox:not(.disabled):active .checkbox-container .indeterminate-icon{fill:var(--color-secondary-pressed)!important}.ads-checkbox.disabled{cursor:default}.ads-checkbox .checkbox-ripple{width:32px;height:32px;border-radius:80px;display:flex;align-items:center;justify-content:center}.ads-checkbox .checkbox-ripple .checkbox-container{width:20px;height:20px;background-color:var(--color-white);outline:1px solid var(--color-secondary);outline-offset:-1px;display:flex;justify-content:center;align-items:center;border-radius:2px}.ads-checkbox .checkbox-ripple .checkbox-container .check-icon{width:12px;height:12px;stroke:var(--color-secondary)}.ads-checkbox .checkbox-ripple .checkbox-container .indeterminate-icon{width:12px;height:12px;fill:var(--color-secondary)}.ads-checkbox.disabled .checkbox-container{background-color:var(--color-muted-50);outline-color:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .check-icon{stroke:var(--color-muted-30)!important}.ads-checkbox.disabled .checkbox-container .indeterminate-icon{fill:var(--color-muted-30)!important}.ads-checkbox span{font-size:16px;line-height:21px;color:var(--color-dark)}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { indeterminate: [{
                 type: Input
             }], width: [{

package/esm2022/lib/components/form-fields/selection-fields/radio-button/radio-button.component.mjs CHANGED Viewed

@@ -38,11 +38,11 @@ export class AdsRadioButtonComponent extends AdsDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsRadioButtonComponent, selector: "ads-radio-button", inputs: { vertical: "vertical", sortOptions: "sortOptions", useOptionTemplate: "useOptionTemplate" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n  <mat-radio-group\n    [id]=\"id\"\n    [ngClass]=\"{\n      vertical: vertical,\n      'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n    }\"\n    [formControl]=\"valueControl\"\n  >\n    @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n      <mat-radio-button [value]=\"option.key\">\n        @if (useOptionTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"optionRef()\"\n            [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n          ></ng-template>\n        } @else {\n          {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n        }\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i5.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i6.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i7.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsRadioButtonComponent, selector: "ads-radio-button", inputs: { vertical: "vertical", sortOptions: "sortOptions", useOptionTemplate: "useOptionTemplate" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n  <mat-radio-group\n    [id]=\"id\"\n    [ngClass]=\"{\n      vertical: vertical,\n      'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n    }\"\n    [formControl]=\"valueControl\"\n  >\n    @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n      <mat-radio-button [value]=\"option.key\">\n        @if (useOptionTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"optionRef()\"\n            [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n          ></ng-template>\n        } @else {\n          {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n        }\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i4.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i5.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i6.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i7.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-radio-button', template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n  <mat-radio-group\n    [id]=\"id\"\n    [ngClass]=\"{\n      vertical: vertical,\n      'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n    }\"\n    [formControl]=\"valueControl\"\n  >\n    @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n      <mat-radio-button [value]=\"option.key\">\n        @if (useOptionTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"optionRef()\"\n            [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n          ></ng-template>\n        } @else {\n          {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n        }\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-radio-button', template: "<div class=\"form-control-row\" [ngStyle]=\"{ minWidth: width }\">\n  <mat-radio-group\n    [id]=\"id\"\n    [ngClass]=\"{\n      vertical: vertical,\n      'radio-invalid': valueControl.invalid && (valueControl.touched || immediateValidation),\n    }\"\n    [formControl]=\"valueControl\"\n  >\n    @for (option of displayedOptions | keyvalue: applySorting; track $index) {\n      <mat-radio-button [value]=\"option.key\">\n        @if (useOptionTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"optionRef()\"\n            [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\n          ></ng-template>\n        } @else {\n          {{ displayValueFormatter ? displayValueFormatter(option.key) : option.value }}\n        }\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n  @if (showFooter) {\n    <div class=\"footer-container\">\n      @if (canShowError()) {\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n      } @else if (canShowSuccess()) {\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n      } @else if (hint) {\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n      }\n    </div>\n  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: ["mat-radio-group{display:flex;gap:10px;height:48px;align-items:center}mat-radio-group.radio-invalid .mdc-label{color:var(--mdc-filled-text-field-error-label-text-color);-webkit-font-smoothing:antialiased}mat-radio-group.vertical{display:inline-block}mat-radio-group.vertical mat-radio-button{display:block}.mat-mdc-radio-button{--mat-radio-label-text-color: var(--color-dark);--mdc-form-field-label-text-line-height: 21px !important;--mat-radio-label-text-size: 16px;--mat-radio-checked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-unchecked-ripple-color: var(--color-medium-opacity-50) !important;--mat-radio-ripple-color: var(--color-light-opacity-50);--mdc-radio-state-layer-size: 32px !important;--mdc-radio-selected-icon-color: var(--color-secondary);--mdc-radio-selected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-selected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-selected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-icon-color: var(--color-secondary);--mdc-radio-unselected-hover-icon-color: var(--color-secondary-hover);--mdc-radio-unselected-pressed-icon-color: var(--color-secondary-pressed);--mdc-radio-unselected-focus-icon-color: var(--color-secondary-pressed);--mdc-radio-disabled-selected-icon-color: var(--color-medium-30);--mdc-radio-disabled-unselected-icon-color: var(--color-medium-30)}.mat-mdc-radio-button ::ng-deep .mdc-radio__outer-circle{border-width:1px}.mat-mdc-radio-button ::ng-deep .mdc-label{cursor:pointer}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.7)}.mat-mdc-radio-button ::ng-deep .mdc-radio__background:before{opacity:1!important}.mat-mdc-radio-button ::ng-deep .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--color-muted-50)}.mat-mdc-radio-button ::ng-deep .mat-internal-form-field>label{padding-left:2px}.mat-mdc-radio-button:hover ::ng-deep .mdc-radio__outer-circle{background-color:var(--color-white)}.mat-mdc-radio-button:active{--mat-radio-ripple-color: var(--color-medium-opacity-50) !important}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { vertical: [{
                 type: Input
             }], sortOptions: [{

package/esm2022/lib/components/form-fields/selection-fields/slide-toggle/slide-toggle.component.mjs CHANGED Viewed

@@ -39,11 +39,11 @@ export class AdsSlideToggleComponent extends AbstractBaseComponent {
         this.valueControl.setValue(!this.valueControl.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: { control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n  <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n    <div class=\"toggle-track\">\n      <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n    </div>\n    <div class=\"toggle-handle\"></div>\n  </div>\n\n  @if (label) {\n    <span class=\"label\"> {{ label }} </span>\n  }\n</div>\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", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i3.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: { control: "control", label: "label", id: "id", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n  <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n    <div class=\"toggle-track\">\n      <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n    </div>\n    <div class=\"toggle-handle\"></div>\n  </div>\n\n  @if (label) {\n    <span class=\"label\"> {{ label }} </span>\n  }\n</div>\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", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i3.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i4.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSlideToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-slide-toggle', template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n  <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n    <div class=\"toggle-track\">\n      <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n    </div>\n    <div class=\"toggle-handle\"></div>\n  </div>\n\n  @if (label) {\n    <span class=\"label\"> {{ label }} </span>\n  }\n</div>\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", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-slide-toggle', template: "<div class=\"ads-toggle\" [class.disabled]=\"valueControl.disabled\" (click)=\"toggle()\" [ngStyle]=\"{ width: width }\">\n  <div class=\"toggle-container\" [class.checked]=\"valueControl.value\">\n    <div class=\"toggle-track\">\n      <span class=\"toggle-label\">{{ valueControl.value ? 'On' : 'Off' }}</span>\n    </div>\n    <div class=\"toggle-handle\"></div>\n  </div>\n\n  @if (label) {\n    <span class=\"label\"> {{ label }} </span>\n  }\n</div>\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", styles: [".ads-toggle{height:48px;display:flex;align-items:center}.ads-toggle .label{padding:8px;cursor:pointer;font-size:1rem;line-height:21px;color:var(--color-dark);transition:transform .3s ease,color .3s ease}.ads-toggle:not(.disabled) .toggle-container{background-color:var(--color-medium);border-radius:48px;height:20px;width:40px;display:flex;align-items:center;position:relative;transition:background-color .3s ease;cursor:pointer}.ads-toggle:not(.disabled) .toggle-container .toggle-handle{position:absolute;width:16px;height:16px;background-color:var(--color-white);border-radius:50%;border:1px solid var(--color-medium);transform:translate(2px);transition:transform .3s ease,border-color .3s ease}.ads-toggle:not(.disabled) .toggle-container .toggle-track{position:absolute;right:4px;height:100%;display:flex;align-items:center;justify-content:flex-end;font-size:10px;line-height:13px;color:var(--color-white);transition:transform .3s ease}.ads-toggle:not(.disabled) .toggle-container.checked{background-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-handle{transform:translate(21px);border-color:var(--color-secondary)}.ads-toggle:not(.disabled) .toggle-container.checked .toggle-track{transform:translate(-20px)}.ads-toggle:not(.disabled) .toggle-container:hover .toggle-handle{box-shadow:0 0 0 6px var(--color-light-30)}.ads-toggle:not(.disabled) .toggle-container:hover.checked .toggle-handle{border-color:var(--color-secondary-hover)}.ads-toggle.disabled .toggle-container{cursor:default;background-color:var(--color-medium-50)}.ads-toggle.disabled .toggle-container .toggle-handle{border-color:var(--color-medium-50)}.ads-toggle.disabled .label{cursor:default;color:var(--color-medium-30)}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], label: [{