@koobiq/components 19.8.0 → 20.0.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,37 +1,32 @@
 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 { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, InjectionToken, ChangeDetectorRef, NgZone, Renderer2, ElementRef, DestroyRef, viewChild, contentChild, TemplateRef, contentChildren, EventEmitter, output, numberAttribute, afterNextRender, isDevMode, Input, Output, ContentChildren, ViewChildren, ViewChild, 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 i1$1 from '@koobiq/components/core';
-import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, KBQ_VALIDATION, KBQ_WINDOW, defaultOffsetY, isUndefined, getKbqSelectNonArrayValueError, KbqVirtualOption, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, kbqSelectAnimations, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptgroup, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
+import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_WINDOW, defaultOffsetY, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, isUndefined, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, KbqVirtualOption, ActiveDescendantKeyManager, kbqSelectAnimations, 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 { Subscription, throttleTime, Subject, defer, merge, EMPTY, BehaviorSubject, fromEvent } from 'rxjs';
 import { debounceTime, switchMap, startWith, take, filter, map, delay, distinctUntilChanged, auditTime, takeUntil } from 'rxjs/operators';
 import { CdkMonitorFocus, A11yModule } from '@angular/cdk/a11y';
-import * as i3 from '@angular/cdk/bidi';
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i2 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { OverlayContainer, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i4 from '@angular/forms';
-import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE } from '@koobiq/cdk/keycodes';
-import * as i5 from '@koobiq/components/form-field';
-import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i6 from '@koobiq/components/icon';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { KbqFormField, KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import * as i1$1 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqTag, KbqTagsModule } from '@koobiq/components/tags';
 import { SizeXxs } from '@koobiq/design-tokens';
 
 class KbqSelectLoading {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectLoading, isStandalone: true, selector: "kbq-select-loading, [kbq-select-loading]", host: { classAttribute: "kbq-select-loading" }, exportAs: ["kbqSelectLoading"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", 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'" />
@@ -39,7 +34,7 @@ class KbqSelectLoading {
         </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.21", ngImport: i0, type: KbqSelectLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectLoading, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-select-loading, [kbq-select-loading]',
@@ -54,10 +49,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    exportAs: 'kbqSelectLoading',
                     host: {
                         class: 'kbq-select-loading'
-                    }
+                    },
+                    exportAs: 'kbqSelectLoading'
                 }]
         }] });
 /**
@@ -68,56 +63,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class KbqSelectError {
     constructor() {
         /** Indicates whether styles for pagination controls should be used. */
-        this.paging = input(false, { transform: booleanAttribute });
+        this.paging = input(false, ...(ngDevMode ? [{ debugName: "paging", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", 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.21", ngImport: i0, type: KbqSelectError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectError, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select-error, [kbq-select-error]', template: `
         <ng-content />
-    `, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqSelectError', host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }] });
+                    }, exportAs: 'kbqSelectError', 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"] }]
+        }], propDecorators: { paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }] } });
 /**
  * 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.21", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectErrorText, isStandalone: true, selector: "[kbq-select-error-text]", host: { classAttribute: "kbq-select-error__text" }, exportAs: ["kbqSelectErrorText"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", 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.21", ngImport: i0, type: KbqSelectErrorText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectErrorText, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-select-error-text]',
-                    exportAs: 'kbqSelectErrorText',
                     host: {
                         class: 'kbq-select-error__text'
-                    }
+                    },
+                    exportAs: 'kbqSelectErrorText'
                 }]
         }] });
 /**
  * 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.21", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectNoOptions, isStandalone: true, selector: "kbq-select-no-options, [kbq-select-no-options]", host: { classAttribute: "kbq-select-no-options" }, exportAs: ["kbqSelectNoOptions"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", 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.21", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    }, exportAs: 'kbqSelectNoOptions', 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 {
@@ -168,10 +163,10 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
     handleElementLeave() {
         this.disabled = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "handleElementLeave()" } }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "handleElementLeave()" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-option',
@@ -211,6 +206,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
      * @default undefined
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set searchMinOptionsThreshold(value) {
         this._searchMinOptionsThreshold =
             this.resolveSearchMinOptionsThreshold(value) ??
@@ -223,6 +220,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Whether the overlay should have a backdrop.
      * When true, clicking the backdrop will close the select.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get hasBackdrop() {
         return this._hasBackdrop;
     }
@@ -233,6 +232,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Placeholder text to be shown when no value is selected.
      * Displayed in the trigger when the select is closed and no value is selected.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get placeholder() {
         return this._placeholder;
     }
@@ -243,6 +244,8 @@ class KbqSelect extends KbqAbstractSelect {
     /**
      * Whether the select is required. Affects validation and display of placeholder.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get required() {
         return this._required;
     }
@@ -254,6 +257,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Whether multiple options can be selected.
      * Note: This cannot be changed dynamically after initialization.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get multiple() {
         return this._multiple;
     }
@@ -270,6 +275,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Should return true if the values match.
      * Defaults to strict equality comparison.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get compareWith() {
         return this._compareWith;
     }
@@ -289,6 +296,8 @@ class KbqSelect extends KbqAbstractSelect {
      * @param event The keyboard event that triggered the handler.
      * @param select Reference to this select component.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get selectAllHandler() {
         return this._selectAllHandler;
     }
@@ -299,6 +308,8 @@ class KbqSelect extends KbqAbstractSelect {
         this._selectAllHandler = fn;
     }
     /** Value of the select control. Can be a single value or array of values for multiple selection. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this._value;
     }
@@ -312,6 +323,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Unique identifier for the select component.
      * Auto-generates an ID if not provided.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get id() {
         return this._id;
     }
@@ -323,6 +336,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Sets the tabIndex of the select element.
      * Automatically set to -1 when disabled.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
         return this.disabled ? -1 : this._tabIndex;
     }
@@ -333,6 +348,8 @@ class KbqSelect extends KbqAbstractSelect {
      * Whether the select is disabled.
      * When disabled, the select cannot be opened and its value cannot be changed.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -341,7 +358,12 @@ class KbqSelect extends KbqAbstractSelect {
             this._disabled = value;
             if (this.parentFormField) {
                 Promise.resolve().then(() => {
-                    this._disabled ? this.parentFormField.stopFocusMonitor() : this.parentFormField.runFocusMonitor();
+                    if (this._disabled) {
+                        this.parentFormField.stopFocusMonitor();
+                    }
+                    else {
+                        this.parentFormField.runFocusMonitor();
+                    }
                 });
             }
             // Let the parent form field know to run change detection when the disabled state changes.
@@ -357,11 +379,12 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Whether the search returned no results. */
     get isEmptySearchResult() {
-        return this.search && this.options.filter((option) => option.selectable).length === 0 && !!this.search.value();
+        const search = this.search();
+        return !!search && this.options?.filter((option) => option.selectable()).length === 0 && !!search.value();
     }
     /** Whether the cleaner (clear button) should be shown. */
     get canShowCleaner() {
-        return !this.disabled && this.cleaner && this.selectionModel.hasValue();
+        return !this.disabled && !!this.cleaner() && this.selectionModel.hasValue();
     }
     /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected() {
@@ -382,7 +405,7 @@ class KbqSelect extends KbqAbstractSelect {
         if (this.isRtl()) {
             selectedOptions.reverse();
         }
-        return this.triggerValuesLimit > 0 ? selectedOptions.slice(0, this.triggerValuesLimit) : selectedOptions;
+        return this.triggerValuesLimit() > 0 ? selectedOptions.slice(0, this.triggerValuesLimit()) : selectedOptions;
     }
     /** Whether no option is currently selected. */
     get empty() {
@@ -411,24 +434,23 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
     get multiSelection() {
-        return this.multiple || this.multiline;
+        return this.multiple || this.multiline();
     }
-    constructor(_changeDetectorRef, _ngZone, _renderer, defaultErrorStateMatcher, elementRef, overlayContainer, _dir, parentForm, parentFormGroup, parentFormField, ngControl, scrollStrategyFactory, localeService) {
+    constructor() {
         super();
-        this._changeDetectorRef = _changeDetectorRef;
-        this._ngZone = _ngZone;
-        this._renderer = _renderer;
-        this.defaultErrorStateMatcher = defaultErrorStateMatcher;
-        this.elementRef = elementRef;
-        this.overlayContainer = overlayContainer;
-        this._dir = _dir;
-        this.parentForm = parentForm;
-        this.parentFormGroup = parentFormGroup;
-        this.parentFormField = parentFormField;
-        this.ngControl = ngControl;
-        this.scrollStrategyFactory = scrollStrategyFactory;
-        this.localeService = localeService;
-        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._ngZone = inject(NgZone);
+        this._renderer = inject(Renderer2);
+        this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        this.elementRef = inject(ElementRef);
+        this.overlayContainer = inject(OverlayContainer);
+        this._dir = inject(Directionality, { optional: true });
+        this.parentForm = inject(NgForm, { optional: true });
+        this.parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this.parentFormField = inject(KbqFormField, { host: true, optional: true });
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.scrollStrategyFactory = inject(KBQ_SELECT_SCROLL_STRATEGY);
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         /** @docs-private */
         this.destroyRef = inject(DestroyRef);
         this.isBrowser = inject(Platform).isBrowser;
@@ -483,24 +505,61 @@ class KbqSelect extends KbqAbstractSelect {
                 offsetY: -this.offsetY
             }
         ];
+        /**
+         * Trigger - is a clickable field to open select dropdown panel
+         */
+        this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+        /** Reference to the overlay panel element. */
+        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+        /** Reference to the container element that holds the options. */
+        this.optionsContainer = viewChild.required('optionsContainer');
+        /** Reference to the optional footer element in the panel. */
+        this.footer = contentChild(KbqSelectFooter, ...(ngDevMode ? [{ debugName: "footer", read: ElementRef }] : [{ read: ElementRef }]));
+        /** Reference to the CDK virtual scroll directive for virtual scrolling support. */
+        this.cdkVirtualForOf = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "cdkVirtualForOf" }] : []));
+        /** Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode. */
+        this.virtualScrollViewport = contentChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualScrollViewport" }] : []));
+        /** User-supplied override of the trigger element for custom rendering. */
+        this.customTrigger = contentChild(KbqSelectTrigger, ...(ngDevMode ? [{ debugName: "customTrigger" }] : []));
+        /** User-supplied matcher component for custom value matching logic. */
+        this.customMatcher = contentChild(KbqSelectMatcher, ...(ngDevMode ? [{ debugName: "customMatcher" }] : []));
+        /** Custom template reference for rendering tag content. */
+        this.customTagTemplateRef = contentChild('kbqSelectTagContent', ...(ngDevMode ? [{ debugName: "customTagTemplateRef", read: TemplateRef }] : [{ read: TemplateRef }]));
+        /** Reference to the optional cleaner element for clearing selection. */
+        this.cleaner = contentChild('kbqSelectCleaner', ...(ngDevMode ? [{ debugName: "cleaner" }] : []));
+        /** All of the defined groups of options. */
+        this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
+        /** Reference to the optional search component. */
+        this.search = contentChild(KbqSelectSearch, ...(ngDevMode ? [{ debugName: "search" }] : []));
+        /** Reference to the optional empty search result component. */
+        this.searchEmpty = contentChild(KbqSelectSearchEmptyResult, ...(ngDevMode ? [{ debugName: "searchEmpty" }] : []));
         /** Template string for hidden items text. Supports {{ number }} placeholder. */
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.hiddenItemsText = '+{{ number }}';
         /** Determines whether preselected values are displayed. */
-        this.showPreselectedValues = false;
+        this.showPreselectedValues = input(false, ...(ngDevMode ? [{ debugName: "showPreselectedValues" }] : []));
         /**
          * Specifies the maximum number of trigger values allowed.
          * This constant limits the size of the trigger values array to ensure performance
          * and prevent excessive memory usage.
          * A value of `0` indicates that there is no limit.
          */
-        this.triggerValuesLimit = 0;
+        this.triggerValuesLimit = input(0, ...(ngDevMode ? [{ debugName: "triggerValuesLimit" }] : []));
+        /** Classes to be passed to the select panel. Supports the same syntax as the `[class]` binding. */
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
         /** Classes to be passed to the overlay backdrop. */
-        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
+        /**
+         * Function used to sort the values in a select in multiple mode.
+         * Follows the same logic as `Array.prototype.sort`.
+         */
+        this.sortComparator = input(undefined, ...(ngDevMode ? [{ debugName: "sortComparator" }] : []));
         /**
          * 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.multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this._searchMinOptionsThreshold = this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
         /** Combined stream of all of the child options' change events. */
         this.optionSelectionChanges = defer(() => {
@@ -524,32 +583,50 @@ class KbqSelect extends KbqAbstractSelect {
         /** Event emitted when the select has been closed. */
         this.closedStream = this.openedChange.pipe(filter((o) => !o), map(() => { }));
         /** Event emitted when the selected value has been changed by the user. */
-        this.selectionChange = new EventEmitter();
+        this.selectionChange = output();
         /**
          * Event that emits whenever the raw value of the select changes. This is here primarily
          * to facilitate the two-way binding for the `value` input.
          * @docs-private
          */
-        this.valueChange = new EventEmitter();
+        this.valueChange = output();
         /**
          * Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires.
          * Default `0` — emits only when the panel is fully scrolled to the bottom.
          */
-        this.scrolledToBottomOffset = 0;
+        this.scrolledToBottomOffset = input(0, ...(ngDevMode ? [{ debugName: "scrolledToBottomOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /** Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom. */
-        this.scrolledToBottom = new EventEmitter();
+        this.scrolledToBottom = output();
         this._hasBackdrop = false;
         this._required = false;
         this._multiple = false;
+        /**
+         * Factory used to construct a `KbqVirtualOption` for selected values whose
+         * `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport,
+         * programmatically set initial value, `showPreselectedValues`).
+         *
+         * Required when option values are objects so the trigger (and tags in
+         * multiple mode) can render a human-readable label. Also lets consumers
+         * customise per-value `disabled` state or any future `KbqVirtualOption`
+         * fields without adding new `@Input`s.
+         *
+         * Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct
+         * for primitive values where `value` itself is the display label.
+         */
+        this.virtualOptionFactory = input(...(ngDevMode ? [undefined, { debugName: "virtualOptionFactory" }] : []));
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width.
          * If set to null or an empty string, the panel will grow to match the longest option's text.
          */
+        // TODO: Skipped for migration because:
+        //  The input cannot be migrated because the field is overridden by a subclass.
         this.panelWidth = this.defaultOptions?.panelWidth || null;
         /**
          * Minimum width of the panel in pixels.
          * If minWidth is larger than window width, it will be ignored.
          */
+        // TODO: Skipped for migration because:
+        //  The input cannot be migrated because the field is overridden by a subclass.
         this.panelMinWidth = this.defaultOptions?.panelMinWidth ?? 200;
         this._tabIndex = 0;
         this._disabled = false;
@@ -578,19 +655,23 @@ class KbqSelect extends KbqAbstractSelect {
          */
         this.calculateHiddenItems = () => {
             if (!this.isBrowser ||
-                this.customTrigger ||
-                this.customMatcher ||
+                this.customTrigger() ||
+                this.customMatcher() ||
                 this.empty ||
                 !this.multiple ||
-                this.multiline)
+                this.multiline())
                 return;
             const totalItemsWidth = this.getTotalItemsWidthInMatcher();
             const [totalVisibleItemsWidth, visibleItems] = this.getTotalVisibleItems();
             this.hiddenItems = this.selected.length - visibleItems;
             this._changeDetectorRef.detectChanges();
             if (this.hiddenItems) {
-                const itemsCounter = this.trigger.nativeElement.querySelector('.kbq-select__match-hidden-text');
-                const matcherList = this.trigger.nativeElement.querySelector('.kbq-select__match-list');
+                const itemsCounter = this.trigger().nativeElement.querySelector('.kbq-select__match-hidden-text');
+                const matcherList = this.trigger().nativeElement.querySelector('.kbq-select__match-list');
+                if (!itemsCounter || !matcherList) {
+                    this._changeDetectorRef.markForCheck();
+                    return;
+                }
                 const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
                 const itemsCounterWidth = Math.floor(itemsCounter.getBoundingClientRect().width);
                 const matcherListWidth = Math.floor(matcherList.getBoundingClientRect().width);
@@ -623,7 +704,7 @@ class KbqSelect extends KbqAbstractSelect {
         // Force setter to be called in case id was not specified.
         this.id = this.id;
         afterNextRender(() => {
-            if (this.multiple && !this.multiline) {
+            if (this.multiple && !this.multiline()) {
                 merge(fromEvent(this.window, 'resize'), this.tags.changes)
                     .pipe(delay(0), debounceTime(50), takeUntilDestroyed(this.destroyRef))
                     .subscribe(this.calculateHiddenItems);
@@ -642,8 +723,9 @@ class KbqSelect extends KbqAbstractSelect {
             .subscribe(() => {
             if (this.panelOpen) {
                 this.scrollTop = 0;
-                if (this.search) {
-                    this.search.focus();
+                const search = this.search();
+                if (search) {
+                    search.focus();
                 }
                 this.openedChange.emit(true);
             }
@@ -656,7 +738,7 @@ class KbqSelect extends KbqAbstractSelect {
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => setTimeout(() => {
             this.calculateHiddenItems();
-            if (this.multiline) {
+            if (this.multiline()) {
                 this.setOverlayPosition();
             }
         }, 0));
@@ -670,7 +752,7 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Lifecycle hook after content initialization. Sets up key manager and option subscriptions. */
     ngAfterContentInit() {
-        this.withVirtualScroll = !!this.cdkVirtualForOf;
+        this.withVirtualScroll = !!this.cdkVirtualForOf();
         this.initKeyManager();
         this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
             event.added.forEach((option) => option.select());
@@ -680,8 +762,8 @@ class KbqSelect extends KbqAbstractSelect {
             this.resetOptions();
             this.initializeSelection();
         });
-        this.search?.changes
-            .pipe(takeUntilDestroyed(this.destroyRef), delay(0), filter(() => {
+        this.search()
+            ?.changes.pipe(takeUntilDestroyed(this.destroyRef), delay(0), filter(() => {
             const activeItem = this.keyManager.activeItem;
             return !activeItem || !this.options.toArray().includes(activeItem);
         }))
@@ -730,16 +812,17 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Resets the search component if present. */
     resetSearch() {
-        if (!this.search) {
+        const search = this.search();
+        if (!search) {
             return;
         }
-        this.search.reset();
+        search.reset();
         /*
         todo the incorrect behaviour of keyManager is possible here
         to avoid first item selection (to provide correct options flipping on closed select)
         we should process options update like it is the first options appearance
         */
-        this.search.isSearchChanged = false;
+        search.isSearchChanged = false;
     }
     /** Toggles the overlay panel open or closed. */
     toggle() {
@@ -774,13 +857,14 @@ class KbqSelect extends KbqAbstractSelect {
      * Sets up the overlay dimensions based on trigger size and configured options.
      */
     openPanel() {
-        if (!this.trigger)
+        const trigger = this.trigger();
+        if (!trigger || !this.keyManager)
             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();
+        this.triggerRect = (this.parentFormField?.getConnectedOverlayOrigin().nativeElement || trigger.nativeElement).getBoundingClientRect();
         // Note: The computed font-size will be a string pixel value (e.g. "16px").
         // `parseInt` ignores the trailing 'px' and converts this to a number.
-        this.triggerFontSize = parseInt(this.window.getComputedStyle(this.trigger.nativeElement)['font-size']);
+        this.triggerFontSize = parseInt(this.window.getComputedStyle(trigger.nativeElement)['font-size']);
         // It's important that we read this as late as possible, because doing so earlier will
         // return a different element since it's based on queries in the form field which may
         // not have run yet. Also this needs to be assigned before we measure the overlay width.
@@ -809,8 +893,8 @@ class KbqSelect extends KbqAbstractSelect {
                 this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this.triggerFontSize}px`;
             }
             this.addClassToOverlayContainer();
-            if (this.search && !this.overlayWidth) {
-                const measuredPanelWidth = this.panel?.nativeElement.getBoundingClientRect().width;
+            if (this.search() && !this.overlayWidth) {
+                const measuredPanelWidth = this.panel()?.nativeElement.getBoundingClientRect().width;
                 if (measuredPanelWidth) {
                     this.overlayWidth = measuredPanelWidth;
                 }
@@ -857,7 +941,7 @@ class KbqSelect extends KbqAbstractSelect {
      *
      * @param fn Callback to be triggered when the component has been touched.
      */
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -911,11 +995,6 @@ class KbqSelect extends KbqAbstractSelect {
             this.onTouched();
             this._changeDetectorRef.markForCheck();
             this.stateChanges.next();
-            if (this.useLegacyValidation && this.ngControl?.control) {
-                const control = this.ngControl.control;
-                control.updateValueAndValidity({ emitEvent: false });
-                control.statusChanges.emit(control.status);
-            }
         }
     }
     /**
@@ -926,17 +1005,34 @@ class KbqSelect extends KbqAbstractSelect {
         this.overlayDir.positionChange.pipe(take(1)).subscribe(() => {
             this._changeDetectorRef.detectChanges();
             this.setOverlayPosition();
-            this.optionsContainer.nativeElement.scrollTop = this.scrollTop;
+            this.optionsContainer().nativeElement.scrollTop = this.scrollTop;
             this.updateScrollSize();
             this.subscribeToScrolledToBottom();
         });
-        this.options.changes.pipe(delay(1)).subscribe(() => this.setOverlayPosition());
+        this.options.changes
+            .pipe(delay(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.setOverlayPosition());
         this.closeSubscription = this.closingActions().subscribe(() => this.close());
     }
     /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme() {
         return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
     }
+    /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
+    getPanelClasses() {
+        const panelClass = this.panelClass();
+        const classes = ['kbq-select__panel', this.getPanelTheme()];
+        if (typeof panelClass === 'string') {
+            classes.push(panelClass);
+        }
+        else if (Array.isArray(panelClass) || panelClass instanceof Set) {
+            classes.push(...panelClass);
+        }
+        else if (panelClass) {
+            classes.push(...Object.keys(panelClass).filter((key) => panelClass[key]));
+        }
+        return classes.filter(Boolean).join(' ');
+    }
     /** Focuses the select element. */
     focus() {
         this.elementRef.nativeElement.focus();
@@ -970,13 +1066,13 @@ class KbqSelect extends KbqAbstractSelect {
      * @param $event The mouse event to handle.
      */
     handleClick($event) {
-        if (this.footer?.nativeElement.contains($event.target)) {
+        if (this.footer()?.nativeElement.contains($event.target)) {
             this.close();
         }
     }
     /** @docs-private */
     setSelectedOptionsByClick(option) {
-        if (this.multiple || this.multiline) {
+        if (this.multiple || this.multiline()) {
             this.keyManager.setActiveItem(option);
             const options = this.options.toArray();
             let fromIndex = this.keyManager.previousActiveItemIndex;
@@ -1008,7 +1104,7 @@ class KbqSelect extends KbqAbstractSelect {
     /** @docs-private */
     shouldShowSearch() {
         return (isUndefined(this.searchMinOptionsThreshold) ||
-            !!this.search.value() ||
+            !!this.search()?.value() ||
             this.options.length >= this.searchMinOptionsThreshold);
     }
     /** Checks if the component is currently visible in the viewport. */
@@ -1045,7 +1141,7 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Gets the height of the options container element. */
     getHeightOfOptionsContainer() {
-        return this.optionsContainer.nativeElement.getClientRects()[0]?.height;
+        return this.optionsContainer().nativeElement.getClientRects()[0]?.height;
     }
     /** Updates the keyboard manager scroll size based on options container height. */
     updateScrollSize() {
@@ -1062,17 +1158,18 @@ class KbqSelect extends KbqAbstractSelect {
      */
     subscribeToScrolledToBottom() {
         this.scrollSubscription.unsubscribe();
-        const distance = this.withVirtualScroll && this.virtualScrollViewport
-            ? this.virtualScrollViewport
+        const virtualScrollViewport = this.virtualScrollViewport();
+        const distance = this.withVirtualScroll && virtualScrollViewport
+            ? virtualScrollViewport
                 .elementScrolled()
-                .pipe(map(() => this.virtualScrollViewport.measureScrollOffset('bottom')))
-            : fromEvent(this.optionsContainer.nativeElement, 'scroll').pipe(map(() => {
-                const element = this.optionsContainer.nativeElement;
+                .pipe(map(() => this.virtualScrollViewport().measureScrollOffset('bottom')))
+            : fromEvent(this.optionsContainer().nativeElement, 'scroll').pipe(map(() => {
+                const element = this.optionsContainer().nativeElement;
                 return element.scrollHeight - element.scrollTop - element.clientHeight;
             }));
         this._ngZone.runOutsideAngular(() => {
             this.scrollSubscription = distance
-                .pipe(auditTime(SCROLLED_TO_BOTTOM_THROTTLE_TIME), map((distance) => distance <= this.scrolledToBottomOffset), distinctUntilChanged(), filter(Boolean), takeUntilDestroyed(this.destroyRef), takeUntil(this.closedStream))
+                .pipe(auditTime(SCROLLED_TO_BOTTOM_THROTTLE_TIME), map((distance) => distance <= this.scrolledToBottomOffset()), distinctUntilChanged(), filter(Boolean), takeUntilDestroyed(this.destroyRef), takeUntil(this.closedStream))
                 .subscribe(() => this._ngZone.run(() => this.scrolledToBottom.emit()));
         });
     }
@@ -1080,7 +1177,7 @@ class KbqSelect extends KbqAbstractSelect {
     getTotalItemsWidthInMatcher() {
         const triggerClone = this.buildTriggerClone();
         triggerClone.querySelector('.kbq-select__match-hidden-text')?.remove();
-        this._renderer.appendChild(this.trigger.nativeElement, triggerClone);
+        this._renderer.appendChild(this.trigger().nativeElement, triggerClone);
         let totalItemsWidth = 0;
         const selectedItemsViewValueContainers = triggerClone.querySelectorAll('kbq-tag');
         selectedItemsViewValueContainers.forEach((item) => (totalItemsWidth += this.getItemWidth(item)));
@@ -1162,10 +1259,11 @@ class KbqSelect extends KbqAbstractSelect {
             if (isArrowKey && this.keyManager.activeItemIndex === previouslyFocusedIndex) {
                 this.keyManager.activeItem?.focus();
             }
-            if (this.search && this.shouldShowSearch()) {
-                this.search.focus();
+            const search = this.search();
+            if (search && this.shouldShowSearch()) {
+                search.focus();
             }
-            if (this.search && (this.keyManager.isTyping() || [BACKSPACE, DELETE].includes(keyCode))) {
+            if (search && (this.keyManager.isTyping() || [BACKSPACE, DELETE].includes(keyCode))) {
                 setTimeout(() => this.highlightCorrectOption());
             }
         }
@@ -1241,13 +1339,13 @@ class KbqSelect extends KbqAbstractSelect {
             this.selectionModel.select(correspondingOption);
         }
         else if (this.withVirtualScroll) {
-            const source = this.cdkVirtualForOf?.cdkVirtualForOf;
+            const source = this.cdkVirtualForOf()?.cdkVirtualForOf;
             const correspondingOptionVirtual = source instanceof Array ? source.find((item) => this.compareWith(item, value)) : undefined;
             if (correspondingOptionVirtual) {
                 this.selectionModel.select(this.createVirtualOption(correspondingOptionVirtual));
             }
         }
-        else if (this.showPreselectedValues) {
+        else if (this.showPreselectedValues()) {
             this.selectionModel.select(this.createVirtualOption(value));
         }
         return correspondingOption;
@@ -1258,21 +1356,20 @@ class KbqSelect extends KbqAbstractSelect {
      * wraps the raw value with the select's current `disabled` state.
      */
     createVirtualOption(value) {
-        return this.virtualOptionFactory
-            ? this.virtualOptionFactory(value)
-            : new KbqVirtualOption(value, this.disabled);
+        const virtualOptionFactory = this.virtualOptionFactory();
+        return virtualOptionFactory ? virtualOptionFactory(value) : new KbqVirtualOption(value, this.disabled);
     }
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     initKeyManager() {
         const typeAheadDebounce = 200;
         this.keyManager = new ActiveDescendantKeyManager(this.options)
-            .withTypeAhead(typeAheadDebounce, this.search ? -1 : 0)
+            .withTypeAhead(typeAheadDebounce, this.search() ? -1 : 0)
             .withVerticalOrientation()
             .withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
         this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            if (this.panelOpen && this.panel) {
+            if (this.panelOpen && this.panel()) {
                 this.scrollActiveOptionIntoView();
-                this.search?.focus();
+                this.search()?.focus();
             }
             else if (!this.panelOpen && !this.multiSelection && this.keyManager.activeItem) {
                 this.keyManager.activeItem.selectViaInteraction();
@@ -1330,7 +1427,10 @@ class KbqSelect extends KbqAbstractSelect {
     sortValues() {
         if (this.multiSelection) {
             const options = this.options.toArray();
-            this.selectionModel.sort((a, b) => this.sortComparator ? this.sortComparator(a, b, options) : a.value - b.value);
+            this.selectionModel.sort((a, b) => {
+                const sortComparator = this.sortComparator();
+                return sortComparator ? sortComparator(a, b, options) : a.value - b.value;
+            });
             this.stateChanges.next();
         }
     }
@@ -1394,8 +1494,11 @@ class KbqSelect extends KbqAbstractSelect {
      */
     getTotalVisibleItems() {
         const triggerClone = this.buildTriggerClone();
-        this._renderer.setStyle(triggerClone.querySelector('.kbq-select__match-hidden-text'), 'display', 'block');
-        this._renderer.appendChild(this.trigger.nativeElement, triggerClone);
+        const hiddenText = triggerClone.querySelector('.kbq-select__match-hidden-text');
+        if (hiddenText) {
+            this._renderer.setStyle(hiddenText, 'display', 'block');
+        }
+        this._renderer.appendChild(this.trigger().nativeElement, triggerClone);
         let visibleItemsCount = 0;
         let totalVisibleItemsWidth = 0;
         triggerClone.querySelectorAll('kbq-tag').forEach((item) => {
@@ -1412,7 +1515,7 @@ class KbqSelect extends KbqAbstractSelect {
      * @returns Clone of the trigger element positioned off-screen.
      */
     buildTriggerClone() {
-        const triggerClone = this.trigger.nativeElement.cloneNode(true);
+        const triggerClone = this.trigger().nativeElement.cloneNode(true);
         this._renderer.setStyle(triggerClone, 'position', 'absolute');
         this._renderer.setStyle(triggerClone, 'visibility', 'hidden');
         this._renderer.setStyle(triggerClone, 'top', '-100%');
@@ -1434,17 +1537,17 @@ class KbqSelect extends KbqAbstractSelect {
             this._renderer.removeClass(this.overlayContainer.getContainerElement(), 'cdk-overlay-container_dropdown');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: "hiddenItemsText", showPreselectedValues: "showPreselectedValues", triggerValuesLimit: "triggerValuesLimit", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", multiline: ["multiline", "multiline", booleanAttribute], searchMinOptionsThreshold: "searchMinOptionsThreshold", scrolledToBottomOffset: ["scrolledToBottomOffset", "scrolledToBottomOffset", numberAttribute], hasBackdrop: "hasBackdrop", placeholder: "placeholder", required: "required", multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", virtualOptionFactory: "virtualOptionFactory", 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", scrolledToBottom: "scrolledToBottom" }, 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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSelect, isStandalone: true, selector: "kbq-select", inputs: { hiddenItemsText: { classPropertyName: "hiddenItemsText", publicName: "hiddenItemsText", isSignal: false, isRequired: false, transformFunction: null }, showPreselectedValues: { classPropertyName: "showPreselectedValues", publicName: "showPreselectedValues", isSignal: true, isRequired: false, transformFunction: null }, triggerValuesLimit: { classPropertyName: "triggerValuesLimit", publicName: "triggerValuesLimit", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, searchMinOptionsThreshold: { classPropertyName: "searchMinOptionsThreshold", publicName: "searchMinOptionsThreshold", isSignal: false, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, virtualOptionFactory: { classPropertyName: "virtualOptionFactory", publicName: "virtualOptionFactory", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: false, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: false, isRequired: false, transformFunction: numberAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hiddenItemsTextFormatter: { classPropertyName: "hiddenItemsTextFormatter", publicName: "hiddenItemsTextFormatter", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", beforeOpened: "beforeOpened", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange", scrolledToBottom: "scrolledToBottom" }, 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: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, 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: 0;--kbq-select-size-single-padding-right: 0;--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, isSignal: true }, { propertyName: "cdkVirtualForOf", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true, isSignal: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true, isSignal: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: KbqOptgroup, isSignal: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true, isSignal: true }, { propertyName: "searchEmpty", first: true, predicate: KbqSelectSearchEmptyResult, descendants: true, isSignal: true }, { propertyName: "options", predicate: KbqOption, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: 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                                } @else {\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        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\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: 0;--kbq-select-size-single-padding-right: 0;--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: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.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.21", ngImport: i0, type: KbqSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelect, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select', imports: [
                         CdkOverlayOrigin,
@@ -1452,14 +1555,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         NgTemplateOutlet,
                         CdkMonitorFocus,
                         CdkConnectedOverlay,
-                        NgClass,
                         KbqIconModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqSelect', host: {
+                    ], providers: [
+                        { provide: KbqFormFieldControl, useExisting: KbqSelect },
+                        { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
+                        { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
                         class: 'kbq-select',
                         '[class.kbq-select_multiple]': 'multiple',
-                        '[class.kbq-select_multiline]': 'multiline',
+                        '[class.kbq-select_multiline]': 'multiline()',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-invalid]': 'errorState',
                         '(click)': 'toggle()',
@@ -1469,118 +1575,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     }, animations: [
                         kbqSelectAnimations.transformPanel,
                         kbqSelectAnimations.fadeInContent
-                    ], providers: [
-                        { 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                <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: 0;--kbq-select-size-single-padding-right: 0;--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
-                }] }, { type: i4.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i5.KbqFormField, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: i4.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_SELECT_SCROLL_STRATEGY]
-                }] }, { type: i1$1.KbqLocaleService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_SERVICE]
-                }] }], propDecorators: { trigger: [{
-                type: ViewChild,
-                args: ['trigger', { static: false }]
-            }], panel: [{
-                type: ViewChild,
-                args: ['panel', { static: false }]
-            }], optionsContainer: [{
-                type: ViewChild,
-                args: ['optionsContainer', { static: false }]
-            }], overlayDir: [{
+                    ], exportAs: '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                                } @else {\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        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\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: 0;--kbq-select-size-single-padding-right: 0;--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: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionsContainer: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], overlayDir: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay, { static: false }]
-            }], footer: [{
-                type: ContentChild,
-                args: [KbqSelectFooter, { static: false, read: ElementRef }]
-            }], cdkVirtualForOf: [{
-                type: ContentChild,
-                args: [CdkVirtualForOf, { static: false }]
-            }], virtualScrollViewport: [{
-                type: ContentChild,
-                args: [CdkVirtualScrollViewport, { static: false }]
-            }], tags: [{
+            }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectFooter), { ...{ read: ElementRef }, isSignal: true }] }], cdkVirtualForOf: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], virtualScrollViewport: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], tags: [{
                 type: ViewChildren,
                 args: [KbqTag]
-            }], customTrigger: [{
-                type: ContentChild,
-                args: [KbqSelectTrigger, { static: false }]
-            }], customMatcher: [{
-                type: ContentChild,
-                args: [KbqSelectMatcher, { static: false }]
-            }], customTagTemplateRef: [{
-                type: ContentChild,
-                args: ['kbqSelectTagContent', { static: false, read: TemplateRef }]
-            }], cleaner: [{
-                type: ContentChild,
-                args: ['kbqSelectCleaner', { static: true }]
-            }], options: [{
+            }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectTrigger), { isSignal: true }] }], customMatcher: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectMatcher), { isSignal: true }] }], customTagTemplateRef: [{ type: i0.ContentChild, args: ['kbqSelectTagContent', { ...{ read: TemplateRef }, isSignal: true }] }], cleaner: [{ type: i0.ContentChild, args: ['kbqSelectCleaner', { isSignal: true }] }], options: [{
                 type: ContentChildren,
                 args: [KbqOption, { descendants: true }]
-            }], optionGroups: [{
-                type: ContentChildren,
-                args: [KbqOptgroup]
-            }], search: [{
-                type: ContentChild,
-                args: [KbqSelectSearch, { static: false }]
-            }], searchEmpty: [{
-                type: ContentChild,
-                args: [KbqSelectSearchEmptyResult, { static: false }]
-            }], hiddenItemsText: [{
-                type: Input
-            }], showPreselectedValues: [{
-                type: Input
-            }], triggerValuesLimit: [{
+            }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqOptgroup), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearch), { isSignal: true }] }], searchEmpty: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqSelectSearchEmptyResult), { isSignal: true }] }], hiddenItemsText: [{
                 type: Input
-            }], panelClass: [{
+            }], showPreselectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreselectedValues", required: false }] }], triggerValuesLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerValuesLimit", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], errorStateMatcher: [{
                 type: Input
-            }], backdropClass: [{
-                type: Input
-            }], errorStateMatcher: [{
-                type: Input
-            }], sortComparator: [{
-                type: Input
-            }], multiline: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchMinOptionsThreshold: [{
+            }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], searchMinOptionsThreshold: [{
                 type: Input
             }], openedChange: [{
                 type: Output
-            }], openedStream: [{
+            }], beforeOpened: [{ type: i0.Output, args: ["beforeOpened"] }], openedStream: [{
                 type: Output,
                 args: ['opened']
             }], closedStream: [{
                 type: Output,
                 args: ['closed']
-            }], selectionChange: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }], scrolledToBottomOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], scrolledToBottom: [{
-                type: Output
-            }], hasBackdrop: [{
+            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], hasBackdrop: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1591,9 +1610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], compareWith: [{
                 type: Input
-            }], virtualOptionFactory: [{
-                type: Input
-            }], selectAllHandler: [{
+            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllHandler: [{
                 type: Input
             }], panelWidth: [{
                 type: Input
@@ -1615,8 +1632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class KbqSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -1626,7 +1643,6 @@ class KbqSelectModule {
             KbqSelectMatcher,
             KbqSelectTrigger,
             KbqSelectSearchEmptyResult,
-            NgClass,
             NgTemplateOutlet,
             A11yModule,
             KbqSelect,
@@ -1647,7 +1663,7 @@ class KbqSelectModule {
             KbqSelectError,
             KbqSelectNoOptions,
             KbqSelectErrorText] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectModule, providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -1657,7 +1673,7 @@ class KbqSelectModule {
             KbqSelectLoading, KbqOptionModule,
             KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1671,7 +1687,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSelectMatcher,
                         KbqSelectTrigger,
                         KbqSelectSearchEmptyResult,
-                        NgClass,
                         NgTemplateOutlet,
                         A11yModule,
                         KbqSelect,
@@ -1681,6 +1696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSelectNoOptions,
                         KbqSelectErrorText
                     ],
+                    providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER],
                     exports: [
                         KbqSelect,
                         KbqOptionTooltip,
@@ -1695,8 +1711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSelectError,
                         KbqSelectNoOptions,
                         KbqSelectErrorText
-                    ],
-                    providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER]
+                    ]
                 }]
         }] });