@ascentgl/ads-ui 0.0.151 → 0.0.152

package/fesm2022/ascentgl-ads-ui.mjs

@@ -3587,6 +3587,8 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         this.preventClick = false;
         /** @ignore */
         this.closePanelEnabled = true;
+        /** @ignore */
+        this.trimValue = true;
         /** Object, containing key=>value pairs for errors and their translated messages */
         this.errorMessages = {};
         /** Optional "id" attribute for input field */
@@ -3781,16 +3783,21 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
     /** @ignore */
     onInput(eventTarget) {
         if (eventTarget instanceof HTMLInputElement) {
-            const value = eventTarget.value.trim();
-            /**
-             * if new trimmed value is different from current trimmed value and new trimmed value is either empty or
-             * fits min length - use it
-             * NOTE: this allows to avoid reacting on empty strings being input
-             * also spaces in the end of the string will be ignored until they are followed by a different character
-             */
-            //if (value !== this.getDisplayedValueAsString(false).trim() && (!value || value.length >= this.minValueLength)) {
-            this.displayControl.setValue(eventTarget.value);
-            //}
+            if (this.trimValue) {
+                const value = eventTarget.value.trim();
+                /**
+                 * if new trimmed value is different from current trimmed value and new trimmed value is either empty or
+                 * fits min length - use it
+                 * NOTE: this allows to avoid reacting on empty strings being input
+                 * also spaces in the end of the string will be ignored until they are followed by a different character
+                 */
+                if (value !== this.getDisplayedValueAsString(false).trim() && (!value || value.length >= this.minValueLength)) {
+                    this.displayControl.setValue(eventTarget.value);
+                }
+            }
+            else {
+                this.displayControl.setValue(eventTarget.value);
+            }
         }
     }
     /** @ignore */
@@ -4139,7 +4146,7 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", 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: "19.2.5", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { maxlength: "maxlength", panelClass: "panelClass", options: "options", staticOptions: "staticOptions", filterOptions: "filterOptions", emitEmptyValues: "emitEmptyValues", loadSuggestionOnInit: "loadSuggestionOnInit", noDataOption: "noDataOption", moreDataOption: "moreDataOption", staticDataOption: "staticDataOption", onEnterKeyDown: "onEnterKeyDown", searchIconClickCallback: "searchIconClickCallback", displayValueFormatter: "displayValueFormatter", useOptionTemplate: "useOptionTemplate", minValueLength: "minValueLength", preventClick: "preventClick", closePanelEnabled: "closePanelEnabled", 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 [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\r\n  <div [ngStyle]=\"{ width: width }\">\r\n    <mat-form-field\r\n      [ngClass]=\"{\r\n        'immediate-validation': immediateValidation,\r\n        'is-open': trigger?.panelOpen,\r\n        invalid: canShowError(),\r\n        'success-label': canShowSuccess(),\r\n        'x-small': smallSize,\r\n      }\"\r\n      [ngStyle]=\"{ width: width }\"\r\n    >\r\n      @if ((label || required) && !smallSize) {\r\n        <mat-label>{{ label }}</mat-label>\r\n      }\r\n      <input\r\n        #input\r\n        [disabled]=\"displayControl.disabled\"\r\n        (keydown.enter)=\"onKeyDown($event.target)\"\r\n        (blur)=\"onBlur()\"\r\n        (input)=\"onInput($event.target)\"\r\n        (focus)=\"onFocus()\"\r\n        type=\"text\"\r\n        [autocomplete]=\"'none'\"\r\n        [id]=\"id\"\r\n        matInput\r\n        [value]=\"getDisplayedValueAsString()\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"placeholder\"\r\n        [required]=\"required\"\r\n      />\r\n      <mat-autocomplete\r\n        #auto=\"matAutocomplete\"\r\n        [displayWith]=\"displayFn\"\r\n        [disableRipple]=\"true\"\r\n        [class]=\"\r\n          'ads-dropdown-panel' +\r\n          (fitContent ? ' fit-content' : '') +\r\n          (loading() ? ' loading' : '') +\r\n          (preventClick ? '' : ' clickable') +\r\n          ' ' +\r\n          panelClass\r\n        \"\r\n      >\r\n        @for (option of displayedOptions | keyvalue: applySorting; track $index) {\r\n          <mat-option #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\r\n            @if (useOptionTemplate) {\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionRef()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\r\n              ></ng-template>\r\n            } @else {\r\n              <span\r\n                [innerHtml]=\"\r\n                  displayValueFormatter\r\n                    ? displayValueFormatter(\r\n                        option!.value! | adsSearchDropdownHighlighter: displayControl.value,\r\n                        option.key\r\n                      )\r\n                    : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\r\n                \"\r\n              ></span>\r\n            }\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseMoreDataOption) {\r\n          <hr class=\"no-results-hr\" />\r\n          <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseNoDataOption) {\r\n          <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseStaticOption) {\r\n          @if (displayedOptions.size) {\r\n            <hr class=\"no-results-hr\" />\r\n          }\r\n          <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n\r\n      @if (canClear) {\r\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\r\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\r\n        </button>\r\n      }\r\n      @if (showDropdownIcon) {\r\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\r\n          <ads-icon\r\n            name=\"chevron_down\"\r\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\r\n            [theme]=\"'iconPrimary'\"\r\n            class=\"chevron-down\"\r\n          />\r\n        </button>\r\n      }\r\n      @if (!staticOptions && loading()) {\r\n        <ads-icon\r\n          name=\"loading\"\r\n          [stroke]=\"'iconPrimary'\"\r\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\r\n          class=\"loading-icon\"\r\n        />\r\n      }\r\n      @if (!staticOptions && !loading()) {\r\n        <button\r\n          matTextSuffix\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [disabled]=\"!canSearch\"\r\n          (click)=\"canSearch ? onSearchIconClick($event) : null\"\r\n          class=\"action-icon\"\r\n        >\r\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n    <div class=\"footer-container\">\r\n      @if (canShowError()) {\r\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\r\n      } @else if (canShowSuccess()) {\r\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\r\n      } @else if (hint) {\r\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (tooltip) {\r\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\r\n  }\r\n\r\n  <ng-template #extraOptionValue let-option>\r\n    <span\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\r\n      [innerHTML]=\"option!.label\"\r\n    ></span>\r\n  </ng-template>\r\n</div>\r\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-disabled-label-text-color: var(--color-medium);--mdc-filled-text-field-disabled-container-color: var(--color-muted) !important;--mdc-filled-text-field-disabled-input-text-color: var(--color-medium) !important;--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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}: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}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsSearchDropdownComponent, isStandalone: false, selector: "ads-search-dropdown", inputs: { maxlength: "maxlength", panelClass: "panelClass", options: "options", staticOptions: "staticOptions", filterOptions: "filterOptions", emitEmptyValues: "emitEmptyValues", loadSuggestionOnInit: "loadSuggestionOnInit", noDataOption: "noDataOption", moreDataOption: "moreDataOption", staticDataOption: "staticDataOption", onEnterKeyDown: "onEnterKeyDown", searchIconClickCallback: "searchIconClickCallback", displayValueFormatter: "displayValueFormatter", useOptionTemplate: "useOptionTemplate", minValueLength: "minValueLength", preventClick: "preventClick", closePanelEnabled: "closePanelEnabled", trimValue: "trimValue", control: "control", errorMessages: "errorMessages", hint: "hint", id: "id", label: "label", placeholder: "placeholder" }, outputs: { emitSearchValueInput: "emitSearchValueInput" }, queries: [{ propertyName: "optionRef", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "moreDataMatOption", first: true, predicate: ["moreDataMatOption"], descendants: true }, { propertyName: "noDataMatOption", first: true, predicate: ["noDataMatOption"], descendants: true }, { propertyName: "staticDataMatOption", first: true, predicate: ["staticDataMatOption"], descendants: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\r\n  <div [ngStyle]=\"{ width: width }\">\r\n    <mat-form-field\r\n      [ngClass]=\"{\r\n        'immediate-validation': immediateValidation,\r\n        'is-open': trigger?.panelOpen,\r\n        invalid: canShowError(),\r\n        'success-label': canShowSuccess(),\r\n        'x-small': smallSize,\r\n      }\"\r\n      [ngStyle]=\"{ width: width }\"\r\n    >\r\n      @if ((label || required) && !smallSize) {\r\n        <mat-label>{{ label }}</mat-label>\r\n      }\r\n      <input\r\n        #input\r\n        [disabled]=\"displayControl.disabled\"\r\n        (keydown.enter)=\"onKeyDown($event.target)\"\r\n        (blur)=\"onBlur()\"\r\n        (input)=\"onInput($event.target)\"\r\n        (focus)=\"onFocus()\"\r\n        type=\"text\"\r\n        [autocomplete]=\"'none'\"\r\n        [id]=\"id\"\r\n        matInput\r\n        [value]=\"getDisplayedValueAsString()\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"placeholder\"\r\n        [required]=\"required\"\r\n      />\r\n      <mat-autocomplete\r\n        #auto=\"matAutocomplete\"\r\n        [displayWith]=\"displayFn\"\r\n        [disableRipple]=\"true\"\r\n        [class]=\"\r\n          'ads-dropdown-panel' +\r\n          (fitContent ? ' fit-content' : '') +\r\n          (loading() ? ' loading' : '') +\r\n          (preventClick ? '' : ' clickable') +\r\n          ' ' +\r\n          panelClass\r\n        \"\r\n      >\r\n        @for (option of displayedOptions | keyvalue: applySorting; track $index) {\r\n          <mat-option #opt [value]=\"option\" (mousedown)=\"onOptionMouseDown($event, opt)\">\r\n            @if (useOptionTemplate) {\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"optionRef()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: option.key, value: option.value }\"\r\n              ></ng-template>\r\n            } @else {\r\n              <span\r\n                [innerHtml]=\"\r\n                  displayValueFormatter\r\n                    ? displayValueFormatter(\r\n                        option!.value! | adsSearchDropdownHighlighter: displayControl.value,\r\n                        option.key\r\n                      )\r\n                    : (option!.value! | adsSearchDropdownHighlighter: displayControl.value)\r\n                \"\r\n              ></span>\r\n            }\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseMoreDataOption) {\r\n          <hr class=\"no-results-hr\" />\r\n          <mat-option #moreDataMatOption class=\"extra\" [disabled]=\"!moreDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: moreDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseNoDataOption) {\r\n          <mat-option #noDataMatOption class=\"extra\" [disabled]=\"!noDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: noDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n\r\n        @if (canUseStaticOption) {\r\n          @if (displayedOptions.size) {\r\n            <hr class=\"no-results-hr\" />\r\n          }\r\n          <mat-option #staticDataMatOption class=\"extra\" [disabled]=\"!staticDataOption!.onClick\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extraOptionValue\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: staticDataOption }\"\r\n            />\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n\r\n      @if (canClear) {\r\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\r\n          <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\r\n        </button>\r\n      }\r\n      @if (showDropdownIcon) {\r\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"togglePanel($event)\" class=\"action-icon\">\r\n          <ads-icon\r\n            name=\"chevron_down\"\r\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\r\n            [theme]=\"'iconPrimary'\"\r\n            class=\"chevron-down\"\r\n          />\r\n        </button>\r\n      }\r\n      @if (!staticOptions && loading()) {\r\n        <ads-icon\r\n          name=\"loading\"\r\n          [stroke]=\"'iconPrimary'\"\r\n          [size]=\"smallSize ? 'xxs' : 'xs'\"\r\n          class=\"loading-icon\"\r\n        />\r\n      }\r\n      @if (!staticOptions && !loading()) {\r\n        <button\r\n          matTextSuffix\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [disabled]=\"!canSearch\"\r\n          (click)=\"canSearch ? onSearchIconClick($event) : null\"\r\n          class=\"action-icon\"\r\n        >\r\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\r\n        </button>\r\n      }\r\n    </mat-form-field>\r\n    <div class=\"footer-container\">\r\n      @if (canShowError()) {\r\n        <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\r\n      } @else if (canShowSuccess()) {\r\n        <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\r\n      } @else if (hint) {\r\n        <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (tooltip) {\r\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\r\n  }\r\n\r\n  <ng-template #extraOptionValue let-option>\r\n    <span\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"onStaticOptionMouseDown($event, option!)\"\r\n      [innerHTML]=\"option!.label\"\r\n    ></span>\r\n  </ng-template>\r\n</div>\r\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-disabled-label-text-color: var(--color-medium);--mdc-filled-text-field-disabled-container-color: var(--color-muted) !important;--mdc-filled-text-field-disabled-input-text-color: var(--color-medium) !important;--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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 18px}: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}\n", ".footer-container{min-height:20px}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AdsSearchDropdownHighlighterPipe, name: "adsSearchDropdownHighlighter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsSearchDropdownComponent, decorators: [{
             type: Component,
@@ -4178,6 +4185,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 type: Input
             }], closePanelEnabled: [{
                 type: Input
+            }], trimValue: [{
+                type: Input
             }], control: [{
                 type: Input
             }], errorMessages: [{