@koobiq/components 19.5.0 → 19.6.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,9 +1,11 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, InjectionToken, DestroyRef, EventEmitter, output, afterNextRender, isDevMode, ElementRef, TemplateRef, numberAttribute, Input, Output, ContentChild, ContentChildren, ViewChildren, ViewChild, Optional, Host, Self, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1 from '@koobiq/components/progress-spinner';
+import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { ContentObserver } from '@angular/cdk/observers';
 import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import * as i0 from '@angular/core';
-import { inject, Directive, InjectionToken, DestroyRef, EventEmitter, afterNextRender, isDevMode, ElementRef, TemplateRef, booleanAttribute, numberAttribute, Input, Output, ContentChild, ContentChildren, ViewChildren, ViewChild, Optional, Host, Self, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import * as i1 from '@koobiq/components/core';
-import { KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqVirtualOption, KbqComponentColors, KBQ_VALIDATION, KBQ_WINDOW, defaultOffsetY, isUndefined, getKbqSelectNonArrayValueError, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, kbqSelectAnimations, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
+import * as i1$1 from '@koobiq/components/core';
+import { KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqVirtualOption, KbqComponentColors, KBQ_VALIDATION, KBQ_WINDOW, defaultOffsetY, isUndefined, getKbqSelectNonArrayValueError, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, kbqSelectAnimations, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOption, KbqOptgroup, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
 import * as i3 from '@angular/cdk/bidi';
@@ -27,6 +29,97 @@ import { SizeXxs } from '@koobiq/design-tokens';
 import { Subject, defer, merge, Subscription, BehaviorSubject, fromEvent } from 'rxjs';
 import { switchMap, take, filter, map, delay, debounceTime, distinctUntilChanged, startWith, takeUntil } from 'rxjs/operators';
 
+class KbqSelectLoading {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqSelectLoading, isStandalone: true, selector: "kbq-select-loading, [kbq-select-loading]", host: { classAttribute: "kbq-select-loading" }, exportAs: ["kbqSelectLoading"], ngImport: i0, template: `
+        <ng-content select="kbq-progress-spinner">
+            <div class="layout-row layout-margin-top-4xl layout-margin-bottom-4xl layout-align-center-center">
+                <kbq-progress-spinner [mode]="'indeterminate'" />
+            </div>
+        </ng-content>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i1.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectLoading, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-select-loading, [kbq-select-loading]',
+                    imports: [
+                        KbqProgressSpinnerModule
+                    ],
+                    template: `
+        <ng-content select="kbq-progress-spinner">
+            <div class="layout-row layout-margin-top-4xl layout-margin-bottom-4xl layout-align-center-center">
+                <kbq-progress-spinner [mode]="'indeterminate'" />
+            </div>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kbqSelectLoading',
+                    host: {
+                        class: 'kbq-select-loading'
+                    }
+                }]
+        }] });
+/**
+ * This component renders the error for a Select component.
+ * The error message can be displayed in two visual variants: a default centered layout (when [paging] is falsy)
+ * or a variant with left‑aligned text suitable for pagination controls (when [paging] is truthy).
+ */
+class KbqSelectError {
+    constructor() {
+        /** Indicates whether styles for pagination controls should be used. */
+        this.paging = input(false, { transform: booleanAttribute });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: KbqSelectError, isStandalone: true, selector: "kbq-select-error, [kbq-select-error]", inputs: { paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-select-error_default": "!paging()", "class.kbq-select-error_paging": "paging()" }, classAttribute: "kbq-select-error" }, exportAs: ["kbqSelectError"], ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectError, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-select-error, [kbq-select-error]', template: `
+        <ng-content />
+    `, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqSelectError', host: {
+                        class: 'kbq-select-error',
+                        '[class.kbq-select-error_default]': '!paging()',
+                        '[class.kbq-select-error_paging]': 'paging()'
+                    }, styles: [":host{display:flex;flex-direction:column}:host.kbq-select-error_default{align-items:center;justify-content:center;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl)}:host.kbq-select-error_paging{justify-content:start}:host.kbq-select-error_paging ::ng-deep .kbq-select-error__text{padding-left:var(--kbq-size-l)}::ng-deep .kbq-select-error__text{margin-top:var(--kbq-size-xs);margin-bottom:var(--kbq-size-3xs);color:var(--kbq-foreground-error)}\n"] }]
+        }] });
+/**
+ * Marks an element as the error text container for a *KbqSelect* component.
+ */
+class KbqSelectErrorText {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqSelectErrorText, isStandalone: true, selector: "[kbq-select-error-text]", host: { classAttribute: "kbq-select-error__text" }, exportAs: ["kbqSelectErrorText"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectErrorText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbq-select-error-text]',
+                    exportAs: 'kbqSelectErrorText',
+                    host: {
+                        class: 'kbq-select-error__text'
+                    }
+                }]
+        }] });
+/**
+ * Component that represents the empty state of a select dropdown.
+ */
+class KbqSelectNoOptions {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqSelectNoOptions, isStandalone: true, selector: "kbq-select-no-options, [kbq-select-no-options]", host: { classAttribute: "kbq-select-no-options" }, exportAs: ["kbqSelectNoOptions"], ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--kbq-size-3xl);padding-top:var(--kbq-size-3xl);color:var(--kbq-foreground-contrast-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-select-no-options, [kbq-select-no-options]', template: `
+        <ng-content />
+    `, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqSelectNoOptions', host: {
+                        class: 'kbq-select-no-options'
+                    }, styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--kbq-size-3xl);padding-top:var(--kbq-size-3xl);color:var(--kbq-foreground-contrast-secondary)}\n"] }]
+        }] });
+
 class KbqOptionTooltip extends KbqTooltipTrigger {
     get textElement() {
         return this.option.textElement.nativeElement;
@@ -73,10 +166,10 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
         this.disabled = true;
         this.hide();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqOptionTooltip, deps: [{ token: i1.KbqOption }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqOptionTooltip, deps: [{ token: i1$1.KbqOption }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqOptionTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqOptionTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-option',
@@ -87,7 +180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         '(blur)': 'onBlur()'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i1.KbqOption }] });
+        }], ctorParameters: () => [{ type: i1$1.KbqOption }] });
 
 let nextUniqueId = 0;
 /** Change event object that is emitted when the select value has changed. */
@@ -106,11 +199,15 @@ const kbqSelectOptionsProvider = (options) => {
         useValue: options
     };
 };
+/** Delay in milliseconds before displaying a result when there are no options. */
+const delayBeforeDisplayingResultWithoutOptions = 101;
+/** Minimum time in milliseconds to display the loading state. */
+const minimumTimeToDisplayLoading = 300;
 class KbqSelect extends KbqAbstractSelect {
     /**
      * Controls when the search functionality is displayed based on the number of available options.
      *
-     * Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
+     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
      * @default undefined
      */
     set searchMinOptionsThreshold(value) {
@@ -121,12 +218,20 @@ class KbqSelect extends KbqAbstractSelect {
     get searchMinOptionsThreshold() {
         return this._searchMinOptionsThreshold;
     }
+    /**
+     * Whether the overlay should have a backdrop.
+     * When true, clicking the backdrop will close the select.
+     */
     get hasBackdrop() {
         return this._hasBackdrop;
     }
     set hasBackdrop(value) {
         this._hasBackdrop = coerceBooleanProperty(value);
     }
+    /**
+     * Placeholder text to be shown when no value is selected.
+     * Displayed in the trigger when the select is closed and no value is selected.
+     */
     get placeholder() {
         return this._placeholder;
     }
@@ -134,6 +239,9 @@ class KbqSelect extends KbqAbstractSelect {
         this._placeholder = value;
         this.stateChanges.next();
     }
+    /**
+     * Whether the select is required. Affects validation and display of placeholder.
+     */
     get required() {
         return this._required;
     }
@@ -141,6 +249,10 @@ class KbqSelect extends KbqAbstractSelect {
         this._required = coerceBooleanProperty(value);
         this.stateChanges.next();
     }
+    /**
+     * Whether multiple options can be selected.
+     * Note: This cannot be changed dynamically after initialization.
+     */
     get multiple() {
         return this._multiple;
     }
@@ -151,9 +263,11 @@ class KbqSelect extends KbqAbstractSelect {
         this._multiple = value;
     }
     /**
-     * Function to compare the option values with the selected values. The first argument
-     * is a value from an option. The second is a value from the selection. A boolean
-     * should be returned.
+     * Function to compare the option values with the selected values.
+     * The first argument is a value from an option.
+     * The second is a value from the selection.
+     * Should return true if the values match.
+     * Defaults to strict equality comparison.
      */
     get compareWith() {
         return this._compareWith;
@@ -169,7 +283,10 @@ class KbqSelect extends KbqAbstractSelect {
         }
     }
     /**
-     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used.
+     * Function for handling the Ctrl + A (select all) keyboard combination.
+     * By default, the internal handler selects all options.
+     * @param event The keyboard event that triggered the handler.
+     * @param select Reference to this select component.
      */
     get selectAllHandler() {
         return this._selectAllHandler;
@@ -180,7 +297,7 @@ class KbqSelect extends KbqAbstractSelect {
         }
         this._selectAllHandler = fn;
     }
-    /** Value of the select control. */
+    /** Value of the select control. Can be a single value or array of values for multiple selection. */
     get value() {
         return this._value;
     }
@@ -190,6 +307,10 @@ class KbqSelect extends KbqAbstractSelect {
             this._value = newValue;
         }
     }
+    /**
+     * Unique identifier for the select component.
+     * Auto-generates an ID if not provided.
+     */
     get id() {
         return this._id;
     }
@@ -197,12 +318,20 @@ class KbqSelect extends KbqAbstractSelect {
         this._id = value || this.uid;
         this.stateChanges.next();
     }
+    /**
+     * Sets the tabIndex of the select element.
+     * Automatically set to -1 when disabled.
+     */
     get tabIndex() {
         return this.disabled ? -1 : this._tabIndex;
     }
     set tabIndex(value) {
         this._tabIndex = value;
     }
+    /**
+     * Whether the select is disabled.
+     * When disabled, the select cannot be opened and its value cannot be changed.
+     */
     get disabled() {
         return this._disabled;
     }
@@ -225,15 +354,19 @@ class KbqSelect extends KbqAbstractSelect {
     set focused(value) {
         this._focused = value;
     }
+    /** Whether the search returned no results. */
     get isEmptySearchResult() {
         return this.search && this.options.filter((option) => option.selectable).length === 0 && !!this.search.value();
     }
+    /** Whether the cleaner (clear button) should be shown. */
     get canShowCleaner() {
         return !this.disabled && this.cleaner && this.selectionModel.hasValue();
     }
+    /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected() {
         return this.multiSelection ? this.selectionModel.selected : this.selectionModel.selected[0];
     }
+    /** Returns the display value for the trigger element. */
     get triggerValue() {
         if (this.empty)
             return '';
@@ -242,6 +375,7 @@ class KbqSelect extends KbqAbstractSelect {
         }
         return this.selectionModel.selected[0].viewValue;
     }
+    /** Returns all selected options in display order. */
     get triggerValues() {
         if (this.empty) {
             return [];
@@ -252,12 +386,19 @@ class KbqSelect extends KbqAbstractSelect {
         }
         return selectedOptions;
     }
+    /** Whether no option is currently selected. */
     get empty() {
         return !!this.selectionModel?.isEmpty();
     }
+    /** Whether there are no options available. */
+    get noOptions() {
+        return this.options?.length === 0;
+    }
+    /** Returns the first selected option that is not disabled. */
     get firstSelected() {
         return this.selectionModel.selected.filter((option) => !option.disabled)[0] || null;
     }
+    /** Whether the first selected option is filtered (not visible in the list). */
     get firstFiltered() {
         return !this.options.find((option) => option === this.firstSelected);
     }
@@ -270,7 +411,7 @@ class KbqSelect extends KbqAbstractSelect {
             ? KbqComponentColors.Error
             : KbqComponentColors.ContrastFade;
     }
-    /** Whether multiple choice is enabled or not. True if multiple or multiline */
+    /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
     get multiSelection() {
         return this.multiple || this.multiline;
     }
@@ -306,10 +447,11 @@ class KbqSelect extends KbqAbstractSelect {
         /** A name for this control that can be used by `kbq-form-field`. */
         this.controlType = 'select';
         this.hiddenItems = 0;
-        /** The cached font-size of the trigger element. */
+        /** The cached font-size of the trigger element in pixels. */
         this.triggerFontSize = 0;
+        /** Previously selected options before the current selection was made. */
         this.previousSelectionModelSelected = [];
-        /** The value of the select panel's transform-origin property. */
+        /** The value of the select panel's transform-origin property for animations. */
         this.transformOrigin = 'top';
         /** Emits when the panel element is finished transforming in. */
         this.panelDoneAnimatingStream = new Subject();
@@ -317,7 +459,7 @@ class KbqSelect extends KbqAbstractSelect {
         this.scrollStrategy = this.scrollStrategyFactory();
         /**
          * The y-offset of the overlay panel in relation to the trigger's top start corner.
-         * This must be adjusted to align the selected option text over the trigger text.
+         * This must be adjusted to align the selected option text over the trigger text
          * when the panel opens. Will change based on the y-position of the selected option.
          */
         this.offsetY = defaultOffsetY;
@@ -343,10 +485,13 @@ class KbqSelect extends KbqAbstractSelect {
                 offsetY: -this.offsetY
             }
         ];
+        /** Template string for hidden items text. Supports {{ number }} placeholder. */
         this.hiddenItemsText = '+{{ number }}';
+        /** Classes to be passed to the overlay backdrop. */
         this.backdropClass = 'cdk-overlay-transparent-backdrop';
         /**
-         * Whether to use a multiline matcher or not. Default is false
+         * Whether to use a multiline matcher or not. Default is false.
+         * When true, allows multiple lines of text in the selected value display.
          */
         this.multiline = false;
         this._searchMinOptionsThreshold = this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
@@ -357,8 +502,10 @@ class KbqSelect extends KbqAbstractSelect {
             }
             return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
         });
-        /** Event emitted when the select panel has been toggled. */
+        /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */
         this.openedChange = new EventEmitter();
+        /** Event emitted before the select panel starts opening. */
+        this.beforeOpened = output();
         /** Event emitted when the select has been opened. */
         this.openedStream = this.openedChange.pipe(filter((o) => o), map(() => { }));
         /** Event emitted when the select has been closed. */
@@ -380,24 +527,33 @@ class KbqSelect extends KbqAbstractSelect {
          */
         this.panelWidth = this.defaultOptions?.panelWidth || null;
         /**
-         * Minimum width of the panel.
+         * Minimum width of the panel in pixels.
          * If minWidth is larger than window width, it will be ignored.
          */
         this.panelMinWidth = this.defaultOptions?.panelMinWidth ?? 200;
         this._tabIndex = 0;
         this._disabled = false;
+        /** Whether the select panel is currently open. */
         this.panelOpen = false;
         this._focused = false;
+        /** Subscription to the close event of the overlay. */
         this.closeSubscription = Subscription.EMPTY;
         /** The scroll position of the overlay panel, calculated to center the selected option. */
         this.scrollTop = 0;
-        /** Unique id for this input. */
+        /** Unique id for this input. Auto-incremented for each instance. */
         this.uid = `kbq-select-${nextUniqueId++}`;
+        /** Subject that emits when the component visibility changes. */
         this.visibleChanges = new BehaviorSubject(false);
+        /** Flag indicating if the dropdown class has been added to the overlay container. */
+        this.classAddedToOverlayContainer = false;
         /** `View -> model callback called when value changes` */
         this.onChange = () => { };
         /** `View -> model callback called when select has been touched` */
         this.onTouched = () => { };
+        /**
+         * Calculates the number of hidden items in multiple selection mode.
+         * Updates the hiddenItems property and triggers change detection.
+         */
         this.calculateHiddenItems = () => {
             if (!this.isBrowser ||
                 this.customTrigger ||
@@ -429,6 +585,7 @@ class KbqSelect extends KbqAbstractSelect {
             }
             this._changeDetectorRef.markForCheck();
         };
+        /** Updates locale parameters from the locale service. */
         this.updateLocaleParams = () => {
             this.hiddenItemsText = this.localeService?.getParams('select').hiddenItemsText;
             this._changeDetectorRef.markForCheck();
@@ -451,6 +608,7 @@ class KbqSelect extends KbqAbstractSelect {
             }
         });
     }
+    /** Lifecycle hook called after component initialization. Initializes selection model and subscriptions. */
     ngOnInit() {
         this.selectionModel = new SelectionModel(this.multiSelection);
         this.stateChanges.next();
@@ -481,12 +639,14 @@ class KbqSelect extends KbqAbstractSelect {
             }
         }, 0));
     }
+    /** Lifecycle hook for change detection. Updates visibility and error state. */
     ngDoCheck() {
         this.visibleChanges.next(this.isVisible());
         if (this.ngControl) {
             this.updateErrorState();
         }
     }
+    /** Lifecycle hook after content initialization. Sets up key manager and option subscriptions. */
     ngAfterContentInit() {
         this.withVirtualScroll = !!this.cdkVirtualForOf;
         this.initKeyManager();
@@ -502,10 +662,13 @@ class KbqSelect extends KbqAbstractSelect {
             .pipe(takeUntilDestroyed(this.destroyRef), delay(0), filter(() => !this.keyManager.activeItem))
             .subscribe(() => this.keyManager.updateActiveItem(0));
     }
+    /** Lifecycle hook when component is destroyed. Cleans up subscriptions. */
     ngOnDestroy() {
         this.stateChanges.complete();
         this.closeSubscription.unsubscribe();
+        clearTimeout(this.openPanelTimeout);
     }
+    /** Updates the error state based on the error state matcher. */
     updateErrorState() {
         const oldState = this.errorState;
         const parent = this.parentFormGroup || this.parentForm;
@@ -517,9 +680,19 @@ class KbqSelect extends KbqAbstractSelect {
             this.stateChanges.next();
         }
     }
+    /**
+     * Formats the hidden items text with the number of hidden items.
+     * @param hiddenItemsText Template string with {{ number }} placeholder.
+     * @param hiddenItems Number of hidden items to display.
+     * @returns Formatted string with the number of hidden items.
+     */
     hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) {
         return hiddenItemsText.replace('{{ number }}', hiddenItems.toString());
     }
+    /**
+     * Clears the current selection.
+     * @param $event Mouse event to prevent default behavior.
+     */
     clearValue($event) {
         // need to prevent opening
         $event.stopPropagation();
@@ -530,6 +703,7 @@ class KbqSelect extends KbqAbstractSelect {
         this.propagateChanges();
         this.focus();
     }
+    /** Resets the search component if present. */
     resetSearch() {
         if (!this.search) {
             return;
@@ -551,11 +725,32 @@ class KbqSelect extends KbqAbstractSelect {
             this.open();
         }
     }
-    /** Opens the overlay panel. */
+    /**
+     * Triggers the opening of the panel component.
+     * If the component is disabled or the panel is already open, the call is ignored.
+     * Otherwise, the (beforeOpened) event is emitted.
+     * When no options are available, the panel is opened after a short delay;
+     * if options exist, it opens immediately.
+     */
     open() {
-        if (this.disabled || !this.options?.length || this.panelOpen) {
+        if (this.disabled || this.panelOpen)
             return;
+        this.beforeOpened.emit();
+        if (this.noOptions) {
+            clearTimeout(this.openPanelTimeout);
+            this.openPanelTimeout = setTimeout(() => this.openPanel(), delayBeforeDisplayingResultWithoutOptions);
         }
+        else {
+            this.openPanel();
+        }
+    }
+    /**
+     * Internal method to open the panel. Handles overlay positioning and sizing.
+     * Sets up the overlay dimensions based on trigger size and configured options.
+     */
+    openPanel() {
+        if (!this.trigger)
+            return;
         // add check for form-field bounding rectangles, since it adds extra padding around the trigger
         this.triggerRect = (this.parentFormField?.getConnectedOverlayOrigin().nativeElement || this.trigger.nativeElement).getBoundingClientRect();
         // Note: The computed font-size will be a string pixel value (e.g. "16px").
@@ -588,24 +783,20 @@ class KbqSelect extends KbqAbstractSelect {
             if (this.triggerFontSize && this.overlayDir.overlayRef && this.overlayDir.overlayRef.overlayElement) {
                 this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this.triggerFontSize}px`;
             }
-            const overlayContainer = this.overlayContainer?.getContainerElement();
-            if (overlayContainer.childNodes.length === 1) {
-                this._renderer.addClass(overlayContainer, 'cdk-overlay-container_dropdown');
-            }
+            this.addClassToOverlayContainer();
         });
     }
     /** Closes the overlay panel and focuses the host element. */
     close() {
-        if (!this.panelOpen) {
+        if (!this.panelOpen)
             return;
-        }
         // the order of calls is important
         this.resetSearch();
         this.panelOpen = false;
         this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
         this._changeDetectorRef.markForCheck();
         this.onTouched();
-        this._renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
+        this.removeClassFromOverlayContainer();
     }
     /**
      * Sets the select's value. Part of the ControlValueAccessor interface
@@ -650,13 +841,21 @@ class KbqSelect extends KbqAbstractSelect {
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
     }
+    /**
+     * Checks if the current direction is RTL (right-to-left).
+     * @returns True if RTL mode is active, false otherwise.
+     */
     isRtl() {
         return this._dir ? this._dir.value === 'rtl' : false;
     }
+    /**
+     * Handles all keyboard events for the select.
+     * Delegates to appropriate handler based on panel state.
+     * @param event The keyboard event to handle.
+     */
     handleKeydown(event) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
         if (this.panelOpen) {
             this.handleOpenKeydown(event);
         }
@@ -664,6 +863,7 @@ class KbqSelect extends KbqAbstractSelect {
             this.handleClosedKeydown(event);
         }
     }
+    /** Handles focus event on the select element. */
     onFocus() {
         if (!this.disabled) {
             this._focused = true;
@@ -689,6 +889,7 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /**
      * Callback that is invoked when the overlay panel has been attached.
+     * Sets up position change subscription and closing actions.
      */
     onAttached() {
         this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
@@ -700,7 +901,7 @@ class KbqSelect extends KbqAbstractSelect {
         this.options.changes.pipe(delay(1)).subscribe(() => this.setOverlayPosition());
         this.closeSubscription = this.closingActions().subscribe(() => this.close());
     }
-    /** Returns the theme to be used on the panel. */
+    /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme() {
         return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
     }
@@ -715,14 +916,27 @@ class KbqSelect extends KbqAbstractSelect {
     onContainerClick() {
         this.focus();
     }
-    /** Invoked when an option is clicked. */
+    /**
+     * Handles removal of a matched item in the trigger.
+     * @param option The option to remove from selection.
+     * @param $event The mouse event that triggered the removal.
+     */
     onRemoveMatcherItem(option, $event) {
         $event.stopPropagation();
         option.deselect();
     }
+    /**
+     * Gets the height of a single option item.
+     * @returns The height in pixels of the first option, or 0 if no options exist.
+     */
     getItemHeight() {
         return this.options.first ? this.options.first.getHeight() : 0;
     }
+    /**
+     * Handles click events on the select.
+     * Closes the panel if click is inside the footer.
+     * @param $event The mouse event to handle.
+     */
     handleClick($event) {
         if (this.footer?.nativeElement.contains($event.target)) {
             this.close();
@@ -761,20 +975,29 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** @docs-private */
     shouldShowSearch() {
-        return isUndefined(this.searchMinOptionsThreshold) || this.options.length >= this.searchMinOptionsThreshold;
+        return (isUndefined(this.searchMinOptionsThreshold) ||
+            !!this.search.value() ||
+            this.options.length >= this.searchMinOptionsThreshold);
     }
+    /** Checks if the component is currently visible in the viewport. */
     isVisible() {
         return this.elementRef.nativeElement.offsetTop < this.elementRef.nativeElement.offsetHeight;
     }
+    /** Gets the current overlay position index in the container. */
     currentOverlayPosition() {
         const element = this.overlayDir.overlayRef.hostElement;
         return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((node) => {
             return node.firstChild?.['id'] === element.firstChild?.['id'];
         });
     }
+    /** Gets the position index of modal overlay in the container. */
     modalOverlayPosition() {
         return Array.from(this.overlayContainer.getContainerElement().childNodes).findIndex((childNode) => childNode.classList.contains('kbq-modal-overlay'));
     }
+    /**
+     * Creates an observable of actions that should close the select panel.
+     * Includes outside pointer events and overlay detachments.
+     */
     closingActions() {
         // used for calling toggle on select from outside of component
         const outsidePointerEvents = this.overlayDir
@@ -788,15 +1011,18 @@ class KbqSelect extends KbqAbstractSelect {
         }));
         return merge(outsidePointerEvents, this.overlayDir.overlayRef.detachments());
     }
+    /** Gets the height of the options container element. */
     getHeightOfOptionsContainer() {
         return this.optionsContainer.nativeElement.getClientRects()[0]?.height;
     }
+    /** Updates the keyboard manager scroll size based on options container height. */
     updateScrollSize() {
         if (!this.options.first) {
             return;
         }
         this.keyManager.withScrollSize(Math.floor(this.getHeightOfOptionsContainer() / this.options.first.getHeight()));
     }
+    /** Calculates the total width of all selected items in the matcher. */
     getTotalItemsWidthInMatcher() {
         const triggerClone = this.buildTriggerClone();
         triggerClone.querySelector('.kbq-select__match-hidden-text')?.remove();
@@ -807,6 +1033,11 @@ class KbqSelect extends KbqAbstractSelect {
         triggerClone.remove();
         return totalItemsWidth;
     }
+    /**
+     * Calculates the width of a single item including margins.
+     * @param element The DOM element to measure.
+     * @returns Total width including margins and gap.
+     */
     getItemWidth(element) {
         const computedStyle = this.window.getComputedStyle(element);
         const width = parseInt(computedStyle.width);
@@ -828,7 +1059,7 @@ class KbqSelect extends KbqAbstractSelect {
             this.keyManager.onKeydown(event);
         }
     }
-    /** Handles keyboard events when the selected is open. */
+    /** Handles keyboard events when the select is open. */
     handleOpenKeydown(event) {
         const keyCode = event.keyCode;
         const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
@@ -879,6 +1110,10 @@ class KbqSelect extends KbqAbstractSelect {
             }
         }
     }
+    /**
+     * Initializes the selection based on the current value.
+     * Defers execution to avoid change detection errors.
+     */
     initializeSelection() {
         // Defer setting the value in order to avoid the "Expression
         // has changed after it was checked" errors from Angular.
@@ -887,8 +1122,9 @@ class KbqSelect extends KbqAbstractSelect {
         });
     }
     /**
-     * Sets the selected option based on a value. If no option can be
-     * found with the designated value, the select trigger is cleared.
+     * Sets the selected option based on a value.
+     * If no option can be found with the designated value, the select trigger is cleared.
+     * @param value The value to select. Can be a single value or array for multiple selection.
      */
     setSelectionByValue(value) {
         this.previousSelectionModelSelected = this.selectionModel.selected;
@@ -911,6 +1147,11 @@ class KbqSelect extends KbqAbstractSelect {
         }
         this._changeDetectorRef.markForCheck();
     }
+    /**
+     * Finds the option that corresponds to the given value.
+     * @param value The value to find.
+     * @returns The matching option or undefined if not found.
+     */
     getCorrespondOption(value) {
         return [
             ...this.options.toArray(),
@@ -1013,7 +1254,7 @@ class KbqSelect extends KbqAbstractSelect {
         }
         this.stateChanges.next();
     }
-    /** Sorts the selected values in the selected based on their order in the panel. */
+    /** Sorts the selected values based on their order in the panel. */
     sortValues() {
         if (this.multiSelection) {
             const options = this.options.toArray();
@@ -1075,6 +1316,10 @@ class KbqSelect extends KbqAbstractSelect {
             }
         });
     }
+    /**
+     * Calculates the total width and count of visible items.
+     * @returns Tuple of [totalVisibleItemsWidth, visibleItemsCount].
+     */
     getTotalVisibleItems() {
         const triggerClone = this.buildTriggerClone();
         this._renderer.setStyle(triggerClone.querySelector('.kbq-select__match-hidden-text'), 'display', 'block');
@@ -1090,6 +1335,10 @@ class KbqSelect extends KbqAbstractSelect {
         triggerClone.remove();
         return [totalVisibleItemsWidth, visibleItemsCount];
     }
+    /**
+     * Creates a hidden clone of the trigger element for width calculations.
+     * @returns Clone of the trigger element positioned off-screen.
+     */
     buildTriggerClone() {
         const triggerClone = this.trigger.nativeElement.cloneNode(true);
         this._renderer.setStyle(triggerClone, 'position', 'absolute');
@@ -1098,17 +1347,31 @@ class KbqSelect extends KbqAbstractSelect {
         this._renderer.setStyle(triggerClone, 'left', '0');
         return triggerClone;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i2.OverlayContainer }, { token: i3.Directionality, optional: true }, { token: i4.NgForm, optional: true }, { token: i4.FormGroupDirective, optional: true }, { token: i5.KbqFormField, host: true, optional: true }, { token: i4.NgControl, optional: true, self: true }, { token: KBQ_SELECT_SCROLL_STRATEGY }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: "hiddenItemsText", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", multiline: ["multiline", "multiline", booleanAttribute], searchMinOptionsThreshold: "searchMinOptionsThreshold", hasBackdrop: "hasBackdrop", placeholder: "placeholder", required: "required", multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", selectAllHandler: "selectAllHandler", panelWidth: "panelWidth", panelMinWidth: ["panelMinWidth", "panelMinWidth", numberAttribute], value: "value", id: "id", tabIndex: ["tabIndex", "tabIndex", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], hiddenItemsTextFormatter: "hiddenItemsTextFormatter" }, outputs: { openedChange: "openedChange", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
+    /** Adds the dropdown class to the overlay container when first select opens. */
+    addClassToOverlayContainer() {
+        const overlayContainer = this.overlayContainer?.getContainerElement();
+        if (overlayContainer.childNodes.length === 1) {
+            this.classAddedToOverlayContainer = true;
+            this._renderer.addClass(overlayContainer, 'cdk-overlay-container_dropdown');
+        }
+    }
+    /** Removes the dropdown class from the overlay container when select closes. */
+    removeClassFromOverlayContainer() {
+        if (this.classAddedToOverlayContainer) {
+            this._renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i2.OverlayContainer }, { token: i3.Directionality, optional: true }, { token: i4.NgForm, optional: true }, { token: i4.FormGroupDirective, optional: true }, { token: i5.KbqFormField, host: true, optional: true }, { token: i4.NgControl, optional: true, self: true }, { token: KBQ_SELECT_SCROLL_STRATEGY }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: "hiddenItemsText", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", multiline: ["multiline", "multiline", booleanAttribute], searchMinOptionsThreshold: "searchMinOptionsThreshold", hasBackdrop: "hasBackdrop", placeholder: "placeholder", required: "required", multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", selectAllHandler: "selectAllHandler", panelWidth: "panelWidth", panelMinWidth: ["panelMinWidth", "panelMinWidth", numberAttribute], value: "value", id: "id", tabIndex: ["tabIndex", "tabIndex", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], hiddenItemsTextFormatter: "hiddenItemsTextFormatter" }, outputs: { openedChange: "openedChange", beforeOpened: "beforeOpened", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-select_multiple": "multiple", "class.kbq-select_multiline": "multiline", "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState" }, classAttribute: "kbq-select" }, providers: [
             { provide: KbqFormFieldControl, useExisting: KbqSelect },
             { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
             { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
-        ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        cdkMonitorSubtreeFocus\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <div class=\"kbq-select__no-options-message\">\n                    <ng-content select=\"[kbq-select-search-empty-result]\" />\n                </div>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 40px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], animations: [
+        ], queries: [{ propertyName: "footer", first: true, predicate: KbqSelectFooter, descendants: true, read: ElementRef }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }, { propertyName: "searchEmpty", first: true, predicate: KbqSelectSearchEmptyResult, descendants: true }, { propertyName: "options", predicate: KbqOption, descendants: true }, { propertyName: "optionGroups", predicate: KbqOptgroup }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqSelect"], usesInheritance: true, ngImport: i0, template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        cdkMonitorSubtreeFocus\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 40px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["editable", "preventEditSubmit", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["editChange", "selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], animations: [
             kbqSelectAnimations.transformPanel,
             kbqSelectAnimations.fadeInContent
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelect, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select', imports: [
                         CdkOverlayOrigin,
@@ -1137,8 +1400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         { provide: KbqFormFieldControl, useExisting: KbqSelect },
                         { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
                         { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
-                    ], template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        cdkMonitorSubtreeFocus\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <div class=\"kbq-select__no-options-message\">\n                    <ng-content select=\"[kbq-select-search-empty-result]\" />\n                </div>\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 40px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i2.OverlayContainer }, { type: i3.Directionality, decorators: [{
+                    ], template: "<div\n    #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n    #trigger\n    cdkOverlayOrigin\n    class=\"kbq-select__trigger\"\n    [class.kbq-select__trigger_empty]=\"empty\"\n    [class.kbq-select__trigger_multiline]=\"multiline\"\n    [class.kbq-select__trigger_multiple]=\"multiple\"\n    [class.kbq-select__trigger_single]=\"!multiple\"\n>\n    @if (!!customMatcher) {\n        <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n    } @else {\n        <div class=\"kbq-select__matcher\">\n            @if (empty) {\n                <span class=\"kbq-select__placeholder\">\n                    {{ placeholder || '\\u00A0' }}\n                </span>\n            } @else {\n                @if (!!customTrigger) {\n                    <ng-content select=\"kbq-select-trigger, [kbq-select-trigger]\" />\n                } @else {\n                    <div class=\"kbq-select__match-container\">\n                        @if (multiSelection) {\n                            <div\n                                [class.kbq-select__match-list]=\"!multiline\"\n                                [class.kbq-select__multiline-match-list]=\"multiline\"\n                            >\n                                @if (!customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <kbq-tag\n                                            [color]=\"colorForState\"\n                                            [disabled]=\"option.disabled || disabled\"\n                                            [selectable]=\"false\"\n                                        >\n                                            {{ option.viewValue }}\n                                            @if (!option.disabled && !disabled) {\n                                                <i\n                                                    kbq-icon=\"kbq-xmark-s_16\"\n                                                    kbqTagRemove\n                                                    (click)=\"onRemoveMatcherItem(option, $event)\"\n                                                ></i>\n                                            }\n                                        </kbq-tag>\n                                    }\n                                }\n                                @if (customTagTemplateRef) {\n                                    @for (option of triggerValues; track option) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"$any(customTagTemplateRef)\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n                                        />\n                                    }\n                                }\n                            </div>\n\n                            @if (!multiline) {\n                                <div\n                                    class=\"kbq-select__match-hidden-text\"\n                                    [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n                                >\n                                    {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n                                </div>\n                            }\n                        } @else {\n                            <span class=\"kbq-select__matcher-text\">\n                                {{ triggerValue }}\n                            </span>\n                        }\n                    </div>\n                }\n            }\n\n            @if (canShowCleaner) {\n                <div\n                    class=\"kbq-select__cleaner\"\n                    (click)=\"clearValue($event)\"\n                    (keydown.enter)=\"clearValue($event)\"\n                    (keydown.space)=\"clearValue($event)\"\n                >\n                    <ng-content select=\"kbq-cleaner\" />\n                </div>\n            }\n\n            <div class=\"kbq-select__arrow-wrapper\">\n                <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"kbq-select__arrow\" [color]=\"colorForState\"></i>\n            </div>\n        </div>\n    }\n</div>\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayLockPosition\n    [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n    [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n    [cdkConnectedOverlayMinWidth]=\"overlayMinWidth\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        class=\"kbq-select__panel {{ getPanelTheme() }}\"\n        cdkMonitorSubtreeFocus\n        [ngClass]=\"panelClass\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.transformOrigin]=\"transformOrigin\"\n        (click)=\"handleClick($event)\"\n        (keydown)=\"handleKeydown($event)\"\n    >\n        @if (search && shouldShowSearch()) {\n            <div class=\"kbq-select__search-container\">\n                <ng-content select=\"[kbqSelectSearch]\" />\n            </div>\n        }\n\n        <div\n            #optionsContainer\n            class=\"kbq-select__content\"\n            [class.kbq-scrollbar]=\"!withVirtualScroll\"\n            [@fadeInContent]=\"'showing'\"\n            (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n        >\n            @if (isEmptySearchResult) {\n                <ng-content select=\"[kbq-select-search-empty-result]\" />\n            }\n            <ng-content />\n        </div>\n\n        <ng-content select=\"kbq-select-footer,[kbq-select-footer]\" />\n    </div>\n</ng-template>\n", styles: [".kbq-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;min-height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline){height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-border-width) * 2)}.kbq-select .kbq-select__trigger:not(.kbq-select__trigger_multiline) .kbq-select__matcher{overflow:hidden;white-space:nowrap}.kbq-select .kbq-select__matcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-grow:1;align-items:center}.kbq-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right) var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right) var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);max-height:calc(var(--kbq-form-field-size-height) - var(--kbq-select-size-multiple-padding-vertical) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__match-container{flex-direction:column}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__matcher{max-width:100%;padding:calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-right) calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width)) var(--kbq-select-size-multiple-padding-left)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__cleaner,.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__arrow-wrapper{align-self:flex-start;align-items:center;height:calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));min-width:var(--kbq-form-field-size-addon-width)}.kbq-select .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) .kbq-select__multiline-match-list{display:flex;flex-direction:row;flex-wrap:wrap;margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));gap:var(--kbq-size-xxs)}.kbq-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 40px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-select kbq-select-trigger,.kbq-select [kbq-select-trigger]{width:100%}.kbq-select .kbq-select__arrow-wrapper{display:flex;align-self:center;justify-content:center;min-width:var(--kbq-form-field-size-addon-width)}.kbq-form-field-appearance-fill .kbq-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-select__panel .kbq-option{font-size:inherit}.kbq-select__panel .kbq-select__no-options-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;position:relative;margin-bottom:var(--kbq-size-3xl);margin-top:var(--kbq-size-3xl);max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-select__panel .kbq-select__search-container{padding:var(--kbq-size-xxs);border-bottom-width:1px;border-bottom-style:solid}.kbq-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:var(--kbq-size-xxs);overflow:hidden auto}.kbq-select__panel .kbq-select__footer{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-l)}.kbq-select__content{box-sizing:initial}.kbq-select__content .kbq-option{position:relative}.kbq-select__content .kbq-option:before,.kbq-select__content .kbq-option:after{position:absolute;content:\"\";width:var(--kbq-size-xxs);height:calc(100% + var(--kbq-size-3xs) * 2)}.kbq-select__content .kbq-option:before{right:calc(100% + var(--kbq-size-3xs))}.kbq-select__content .kbq-option:after{left:calc(100% + var(--kbq-size-3xs))}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport{min-height:var(--kbq-select-panel-size-max-height, 256px);max-height:var(--kbq-select-panel-size-max-height, 256px)}.kbq-select__content:not(:has(>.kbq-select__no-options-message)) .cdk-virtual-scroll-viewport.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{max-width:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-select{color:var(--kbq-foreground-contrast)}.kbq-select.kbq-control_has-validate-directive.ng-invalid,.kbq-select.kbq-invalid{color:var(--kbq-foreground-error)}.kbq-select.kbq-control_has-validate-directive.ng-invalid .kbq-select__placeholder,.kbq-select.kbq-invalid .kbq-select__placeholder{color:var(--kbq-form-field-states-error-placeholder)}.kbq-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select.kbq-disabled .kbq-select__placeholder{color:var(--kbq-form-field-states-disabled-placeholder)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-form-field-default-placeholder)}.kbq-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__search-container{border-bottom-color:var(--kbq-divider-color, var(--kbq-line-contrast-less))}.kbq-select__no-options-message{color:var(--kbq-foreground-contrast-secondary)}.kbq-select,.kbq-select__panel{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-select,.kbq-tree-select,.kbq-select__panel{--kbq-select-size-single-padding-left: var(--kbq-form-field-size-infix-padding);--kbq-select-size-single-padding-right: var(--kbq-form-field-size-suffix-padding);--kbq-select-size-single-padding-vertical: var(--kbq-size-xs);--kbq-select-size-single-content-gap: var(--kbq-size-xxs);--kbq-select-size-multiple-padding-left: 0;--kbq-select-size-multiple-padding-right: 0;--kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);--kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);--kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);--kbq-select-panel-size-max-height: 256px;--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i2.OverlayContainer }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i4.NgForm, decorators: [{
                     type: Optional
@@ -1155,7 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_SELECT_SCROLL_STRATEGY]
-                }] }, { type: i1.KbqLocaleService, decorators: [{
+                }] }, { type: i1$1.KbqLocaleService, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1202,6 +1465,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }], search: [{
                 type: ContentChild,
                 args: [KbqSelectSearch, { static: false }]
+            }], searchEmpty: [{
+                type: ContentChild,
+                args: [KbqSelectSearchEmptyResult, { static: false }]
             }], hiddenItemsText: [{
                 type: Input
             }], panelClass: [{
@@ -1262,8 +1528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
             }] } });
 
 class KbqSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -1277,7 +1543,11 @@ class KbqSelectModule {
             NgTemplateOutlet,
             A11yModule,
             KbqSelect,
-            KbqOptionTooltip], exports: [KbqSelect,
+            KbqOptionTooltip,
+            KbqSelectLoading,
+            KbqSelectError,
+            KbqSelectNoOptions,
+            KbqSelectErrorText], exports: [KbqSelect,
             KbqOptionTooltip,
             KbqOptionModule,
             KbqSelectSearch,
@@ -1285,17 +1555,22 @@ class KbqSelectModule {
             KbqSelectMatcher,
             KbqSelectTrigger,
             KbqSelectSearchEmptyResult,
-            KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule,
+            KbqSelectLoading,
+            KbqFormFieldModule,
+            KbqSelectError,
+            KbqSelectNoOptions,
+            KbqSelectErrorText] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
             KbqToolTipModule,
             A11yModule,
-            KbqSelect, KbqOptionModule,
+            KbqSelect,
+            KbqSelectLoading, KbqOptionModule,
             KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KbqSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1313,7 +1588,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         NgTemplateOutlet,
                         A11yModule,
                         KbqSelect,
-                        KbqOptionTooltip
+                        KbqOptionTooltip,
+                        KbqSelectLoading,
+                        KbqSelectError,
+                        KbqSelectNoOptions,
+                        KbqSelectErrorText
                     ],
                     exports: [
                         KbqSelect,
@@ -1324,7 +1603,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                         KbqSelectMatcher,
                         KbqSelectTrigger,
                         KbqSelectSearchEmptyResult,
-                        KbqFormFieldModule
+                        KbqSelectLoading,
+                        KbqFormFieldModule,
+                        KbqSelectError,
+                        KbqSelectNoOptions,
+                        KbqSelectErrorText
                     ],
                     providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER]
                 }]
@@ -1334,5 +1617,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_SELECT_OPTIONS, KbqOptionTooltip, KbqSelect, KbqSelectChange, KbqSelectModule, kbqSelectOptionsProvider };
+export { KBQ_SELECT_OPTIONS, KbqOptionTooltip, KbqSelect, KbqSelectChange, KbqSelectError, KbqSelectErrorText, KbqSelectLoading, KbqSelectModule, KbqSelectNoOptions, delayBeforeDisplayingResultWithoutOptions, kbqSelectOptionsProvider, minimumTimeToDisplayLoading };
 //# sourceMappingURL=koobiq-components-select.mjs.map