@koobiq/components 20.2.0 → 20.3.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,11 +1,11 @@
 import * as i0 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 { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, InjectionToken, ChangeDetectorRef, NgZone, Renderer2, ElementRef, DestroyRef, viewChild, contentChild, TemplateRef, QueryList, contentChildren, EventEmitter, output, numberAttribute, computed, effect, afterNextRender, 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 { Platform } from '@angular/cdk/platform';
-import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_WINDOW, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KBQ_PANEL_DEFAULT_MIN_WIDTH, isUndefined, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, toggleSelectAll, KbqSelectAllEvent, kbqSelectAnimations, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, KbqOptionModule, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
+import { KbqOption, KbqAbstractSelect, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getSelectAllState, KbqComponentColors, ErrorStateMatcher, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, defaultOffsetY, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, ruRULocaleData, KBQ_PANEL_DEFAULT_MIN_WIDTH, kbqResolvePanelMaxHeightToken, toggleSelectAll, KbqSelectAllEvent, isUndefined, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, isSelectAll, BACKSPACE, DELETE, getKbqSelectNonArrayValueError, runCompareWith, KbqVirtualOption, ActiveDescendantKeyManager, isInput, shouldSelectSearchText, kbqSelectAnimations, KbqPseudoCheckbox, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_POPUP, kbqSiblingPopupProvider, KbqOptionModule } 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';
@@ -18,15 +18,15 @@ import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrollin
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
-import { KbqFormField, KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KBQ_FORM_FIELD, KbqCleaner, KbqFormFieldControl, kbqCleanerFactoryProvider, 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: "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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectLoading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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'" />
@@ -34,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: "20.3.25", ngImport: i0, type: KbqSelectLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectLoading, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-select-loading, [kbq-select-loading]',
@@ -65,12 +65,12 @@ class KbqSelectError {
         /** Indicates whether styles for pagination controls should be used. */
         this.paging = input(false, ...(ngDevMode ? [{ debugName: "paging", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
-    /** @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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", 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: "20.3.25", ngImport: i0, type: KbqSelectError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectError, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select-error, [kbq-select-error]', template: `
         <ng-content />
@@ -84,10 +84,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * 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: "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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectErrorText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", 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: "20.3.25", ngImport: i0, type: KbqSelectErrorText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectErrorText, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-select-error-text]',
@@ -101,12 +101,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Component that represents the empty state of a select dropdown.
  */
 class KbqSelectNoOptions {
-    /** @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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectNoOptions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", 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: "20.3.25", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectNoOptions, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select-no-options, [kbq-select-no-options]', template: `
         <ng-content />
@@ -166,10 +166,10 @@ class KbqOptionTooltip extends KbqTooltipTrigger {
     handleElementLeave() {
         this.disabled = true;
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqOptionTooltip, isStandalone: true, selector: "kbq-option", host: { listeners: { "mouseenter": "handleElementEnter()", "mouseleave": "handleElementLeave()" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqOptionTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-option',
@@ -380,31 +380,86 @@ class KbqSelect extends KbqAbstractSelect {
     set focused(value) {
         this._focused = value;
     }
+    /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached() {
+        return this.panelOpen;
+    }
     /** Whether the search returned no results. */
     get isEmptySearchResult() {
         const search = this.search();
         return !!search && this.options?.filter((option) => option.selectable()).length === 0 && !!search.value();
     }
-    /** Whether the cleaner (clear button) should be shown. */
+    /**
+     * Whether the "select all" row is currently rendered.
+     *
+     * Unsupported whenever a selected value can exist as a synthetic `KbqVirtualOption` instead of a
+     * real, projected `KbqOption` (see `selectValue`) — under `withVirtualScroll` or
+     * `showPreselectedValues`. `selectAllTargets` can only see `this.options`, the currently-rendered
+     * `KbqOption`s, so a checkbox built on top of it would misreport "everything selected" after only
+     * touching the values that happen to have a rendered option.
+     */
+    get showSelectAll() {
+        return (this.selectAll() &&
+            this.multiSelection &&
+            !this.isEmptySearchResult &&
+            !this.withVirtualScroll &&
+            !this.showPreselectedValues());
+    }
+    /** Whether every option "select all" can act on is selected. */
+    get allOptionsSelected() {
+        const targets = this.selectAllTargets;
+        // `[].every()` is `true`: with nothing for "select all" to act on, claiming "all selected" would
+        // send the toggle down the deselect branch and check the master checkbox over an untouchable list.
+        return targets.length > 0 && targets.every((option) => option.selected);
+    }
+    /** State of the "select all" master checkbox. */
+    get selectAllState() {
+        return getSelectAllState(this.selectAllAdapter);
+    }
+    /**
+     * Options "select all" acts on, and the ones its checkbox state is derived from.
+     *
+     * `KbqOption.select()` and `deselect()` do not consult `disabled` or `selectable()`, so the
+     * filtering has to happen here rather than being left to the options themselves.
+     */
+    get selectAllTargets() {
+        return this.options?.filter((option) => option.selectable() && !option.disabled) ?? [];
+    }
+    /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
+    get selectAllAdapter() {
+        return {
+            items: this.selectAllTargets,
+            isSelectable: () => true,
+            isSelected: (option) => option.selected,
+            setSelected: (option, selected) => (selected ? option.select() : option.deselect())
+        };
+    }
+    /**
+     * Whether the cleaner (clear button) should be shown.
+     * @docs-private
+     */
     get canShowCleaner() {
-        return !this.disabled && !!this.cleaner() && this.selectionModel.hasValue();
+        return !!this.cleaner()?.canShow;
     }
     /** Returns the currently selected option(s). Single value or array for multiple selection. */
     get selected() {
-        return this.multiSelection ? this.selectionModel.selected : this.selectionModel.selected[0];
+        const selected = this.selectionModel.selected;
+        return this.multiSelection
+            ? selected.map((option) => this.resolveSelectedOption(option))
+            : selected[0] && this.resolveSelectedOption(selected[0]);
     }
     /** Returns the display value for the trigger element. */
     get triggerValue() {
         if (this.empty)
             return '';
-        return this.selectionModel.selected[0].viewValue;
+        return this.resolveSelectedOption(this.selectionModel.selected[0]).viewValue;
     }
     /** Returns all selected options in display order. */
     get triggerValues() {
         if (this.empty) {
             return [];
         }
-        const selectedOptions = this.selectionModel.selected;
+        const selectedOptions = this.selectionModel.selected.map((option) => this.resolveSelectedOption(option));
         if (this.isRtl()) {
             selectedOptions.reverse();
         }
@@ -420,7 +475,9 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** Returns the first selected option that is not disabled. */
     get firstSelected() {
-        return this.selectionModel.selected.filter((option) => !option.disabled)[0] || null;
+        return (this.selectionModel.selected
+            .map((option) => this.resolveSelectedOption(option))
+            .find((option) => !option.disabled) || null);
     }
     /** Whether the first selected option is filtered (not visible in the list). */
     get firstFiltered() {
@@ -450,7 +507,7 @@ class KbqSelect extends KbqAbstractSelect {
         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.parentFormField = inject(KBQ_FORM_FIELD, { 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 });
@@ -458,7 +515,6 @@ class KbqSelect extends KbqAbstractSelect {
         this.destroyRef = inject(DestroyRef);
         this.isBrowser = inject(Platform).isBrowser;
         this.defaultOptions = inject(KBQ_SELECT_OPTIONS, { optional: true });
-        this.window = inject(KBQ_WINDOW);
         /** Whether the component is in an error state. */
         this.errorState = false;
         /**
@@ -474,6 +530,12 @@ class KbqSelect extends KbqAbstractSelect {
         this.triggerFontSize = 0;
         /** Previously selected options before the current selection was made. */
         this.previousSelectionModelSelected = [];
+        /**
+         * Detached copies of the selected options, captured while the option was still rendered.
+         * `cdk-virtual-scroll` recycles option views, so a `KbqOption` kept in `selectionModel` can
+         * silently start carrying another item's value and label — the copy preserves the original ones.
+         */
+        this.selectedOptionCopies = new WeakMap();
         /** The value of the select panel's transform-origin property for animations. */
         this.transformOrigin = 'top';
         /** Emits when the panel element is finished transforming in. */
@@ -496,10 +558,10 @@ class KbqSelect extends KbqAbstractSelect {
          */
         this.viewportMargin = defaultOffsetY;
         /**
-         * This position config ensures that the top "start" corner of the overlay
-         * is aligned with the top "start" of the origin by default (overlapping
-         * the trigger completely). If the panel cannot fit below the trigger, it
-         * will fall back to a position above the trigger.
+         * Opens the panel below the trigger, falling back to above it when it does not fit.
+         *
+         * A third position is appended at runtime by `updatePanelAnchor`: a multiline trigger that has grown
+         * taller than the panel gets it anchored to its first row and drawn over the rest of it.
          */
         this.positions = [
             {
@@ -525,6 +587,8 @@ class KbqSelect extends KbqAbstractSelect {
         this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
         /** Reference to the container element that holds the options. */
         this.optionsContainer = viewChild.required('optionsContainer');
+        /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
+        this.selectAllOption = viewChild(KbqOption, ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
         /** 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. */
@@ -537,8 +601,21 @@ class KbqSelect extends KbqAbstractSelect {
         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" }] : []));
+        /**
+         * Reference to the optional cleaner element for clearing selection.
+         * @docs-private
+         */
+        this.cleaner = contentChild(KbqCleaner, ...(ngDevMode ? [{ debugName: "cleaner", descendants: false }] : [{ descendants: false }]));
+        /**
+         * Everything the key manager navigates: the built-in "select all" row first, then `options`.
+         *
+         * The row is rendered by the select's own template, so it never reaches the `options` content query.
+         * Kept as a separate list rather than folded into `options` because `options` is public API — the
+         * filter-bar pipes, `firstFiltered` and the tallies below all mean "the options the consumer
+         * projected", and a synthetic entry there would quietly corrupt every one of them.
+         * @docs-private
+         */
+        this.navigableOptions = new QueryList();
         /** All of the defined groups of options. */
         this.optionGroups = contentChildren(KbqOptgroup, ...(ngDevMode ? [{ debugName: "optionGroups" }] : []));
         /** Reference to the optional search component. */
@@ -549,6 +626,8 @@ class KbqSelect extends KbqAbstractSelect {
         // TODO: Skipped for migration because:
         //  Your application code writes to the input. This prevents migration.
         this.hiddenItemsText = '+{{ number }}';
+        /** Label of the "select all" row. Kept in step with the locale service. */
+        this.selectAllText = ruRULocaleData.select.selectAll;
         /** Determines whether preselected values are displayed. */
         this.showPreselectedValues = input(false, ...(ngDevMode ? [{ debugName: "showPreselectedValues" }] : []));
         /**
@@ -586,7 +665,12 @@ class KbqSelect extends KbqAbstractSelect {
             }
             return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
         });
-        /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */
+        /**
+         * Event emitted when the select panel has been toggled. Emits true when opened, false when closed.
+         * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
+         * this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see
+         * `ngOnInit`) matters beyond this output's original consumers.
+         */
         this.openedChange = new EventEmitter();
         /** Event emitted before the select panel starts opening. */
         this.beforeOpened = output();
@@ -633,6 +717,15 @@ class KbqSelect extends KbqAbstractSelect {
         this.virtualOptionFactory = input(...(ngDevMode ? [undefined, { debugName: "virtualOptionFactory" }] : []));
         /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
         this.selectAllToggle = input(false, ...(ngDevMode ? [{ debugName: "selectAllToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Whether to render the "select all" master checkbox above the options. Multiple selection only.
+         *
+         * The row acts on the options the user can actually toggle — rendered, enabled and selectable. Since
+         * search filtering removes options from the DOM, "select all" under an active query selects only the
+         * matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox
+         * never disagree (`selectAllToggle` is implied).
+         */
+        this.selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
          * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
@@ -652,16 +745,33 @@ class KbqSelect extends KbqAbstractSelect {
          * When null, the `--kbq-panel-size-width-max` token applies.
          */
         this.panelMaxWidth = input(this.defaultOptions?.panelMaxWidth === undefined ? null : this.defaultOptions.panelMaxWidth, ...(ngDevMode ? [{ debugName: "panelMaxWidth", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * Maximum height of the panel's scrollable option list, in pixels. Applied as the
+         * `--kbq-select-panel-size-max-height` custom property on the panel, so it also drives the pinned height
+         * of a `cdk-virtual-scroll-viewport` — with virtual scroll the value is an exact height, not a cap.
+         *
+         * The search field and the footer sit outside the scrollable area and add to the panel's total height.
+         * When null, the token default (256px) applies.
+         */
+        this.panelMaxHeight = input(this.defaultOptions?.panelMaxHeight === undefined ? null : this.defaultOptions.panelMaxHeight, ...(ngDevMode ? [{ debugName: "panelMaxHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * `panelMaxHeight` rendered as a CSS length for the `--kbq-select-panel-size-max-height` token.
+         * A non-finite value (e.g. `null`) leaves the stylesheet default in place.
+         * @docs-private
+         */
+        this.panelMaxHeightToken = computed(() => kbqResolvePanelMaxHeightToken(this.panelMaxHeight()), ...(ngDevMode ? [{ debugName: "panelMaxHeightToken" }] : []));
         this._tabIndex = 0;
         this._disabled = false;
         /** Whether the select panel is currently open. */
         this.panelOpen = false;
         this._focused = false;
+        /** Whether a "select all" batch is running, so the per-option changes propagate only once. */
+        this.selectAllInProgress = false;
         /** Subscription to the close event of the overlay. */
         this.closeSubscription = Subscription.EMPTY;
         /** Subscription to the options panel scroll event used by `scrolledToBottom`. */
         this.scrollSubscription = Subscription.EMPTY;
-        /** The scroll position of the overlay panel, calculated to center the selected option. */
+        /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
         this.scrollTop = 0;
         /** Unique id for this input. Auto-incremented for each instance. */
         this.uid = `kbq-select-${nextUniqueId++}`;
@@ -714,12 +824,23 @@ class KbqSelect extends KbqAbstractSelect {
         };
         /** Updates locale parameters from the locale service. */
         this.updateLocaleParams = () => {
-            this.hiddenItemsText = this.localeService?.getParams('select').hiddenItemsText;
+            // A consumer-supplied locale (`KBQ_LOCALE_DATA`/`addLocale`) may predate the `select` section
+            // entirely, not just the `selectAll` key within it — guard the lookup itself, not just its fields.
+            const params = this.localeService?.getParams('select');
+            this.hiddenItemsText = params?.hiddenItemsText ?? this.hiddenItemsText;
+            this.selectAllText = params?.selectAll ?? ruRULocaleData.select.selectAll;
             this._changeDetectorRef.markForCheck();
         };
         /** Comparison function to specify which option is displayed. Defaults to object equality. */
         this._compareWith = (o1, o2) => o1 === o2;
-        this.localeService?.changes.subscribe(this.updateLocaleParams);
+        this.localeService?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateLocaleParams);
+        // The "select all" row only exists while the panel is attached, so the key manager's list has to
+        // be rebuilt whenever the view query resolves or drops it — `options.changes` alone never fires
+        // for it.
+        effect(() => {
+            this.selectAllOption();
+            this.syncNavigableOptions();
+        });
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of
             // the `providers` to avoid running into a circular import.
@@ -759,13 +880,20 @@ class KbqSelect extends KbqAbstractSelect {
             }
         });
         merge(this.optionSelectionChanges, this.visibleChanges)
-            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => setTimeout(() => {
+            // `delay(0)` rather than a `setTimeout` inside the subscriber: `takeUntilDestroyed` cancels a
+            // scheduled emission, but not a timer the subscriber has already started, which would then run
+            // its measurements against a destroyed view.
+            .pipe(distinctUntilChanged(), delay(0), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             this.calculateHiddenItems();
             if (this.multiline()) {
+                // A multiline trigger grows with every selected option, and this is the one signal
+                // guaranteed to arrive for it. The trigger's height has changed whatever the anchor
+                // decides, so the panel is repositioned either way.
+                this.updatePanelAnchor();
                 this.setOverlayPosition();
             }
-        }, 0));
+        });
     }
     /** Lifecycle hook for change detection. Updates visibility and error state. */
     ngDoCheck() {
@@ -783,20 +911,24 @@ class KbqSelect extends KbqAbstractSelect {
             event.removed.forEach((option) => option.deselect());
         });
         this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.syncNavigableOptions();
             this.resetOptions();
             this.initializeSelection();
         });
         this.search()
-            ?.changes.pipe(takeUntilDestroyed(this.destroyRef), delay(0), filter(() => {
-            const activeItem = this.keyManager.activeItem;
-            return !activeItem || !this.options.toArray().includes(activeItem);
-        }))
+            ?.changes.pipe(takeUntilDestroyed(this.destroyRef), delay(0), 
+        // Only while the panel is open. `beforeOpened` gives consumers a chance to (re)load
+        // options, and with no options the panel itself opens with a delay, so search changes
+        // can land while the panel is still closed. Moving the highlight then is read as
+        // keyboard navigation of a closed select and silently overwrites the value.
+        filter(() => this.panelOpen && this.isActiveItemStale()))
             .subscribe(() => this.keyManager.setFirstItemActive());
     }
     /** Lifecycle hook when component is destroyed. Cleans up subscriptions. */
     ngOnDestroy() {
         this.stateChanges.complete();
         this.closeSubscription.unsubscribe();
+        this.unsubscribeFromPanelResize();
         clearTimeout(this.openPanelTimeout);
     }
     /** Updates the error state based on the error state matcher. */
@@ -820,19 +952,55 @@ class KbqSelect extends KbqAbstractSelect {
     hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) {
         return hiddenItemsText.replace('{{ number }}', hiddenItems.toString());
     }
+    /**
+     * Selects every option "select all" can act on, or deselects them all when they are already selected.
+     *
+     * Backs both the master checkbox and Ctrl/Cmd + A while `selectAll` is on. Emits a single
+     * `selectionChange` for the whole batch, followed by `onSelectAll`.
+     */
+    toggleSelectAll() {
+        const targets = this.selectAllTargets;
+        if (!targets.length)
+            return;
+        // The per-option selection events are what keep `selectionModel` in step, but each of them would
+        // otherwise propagate a value of its own. Suppressing that and propagating once at the end turns
+        // N events into the single change the user actually performed.
+        this.selectAllInProgress = true;
+        try {
+            toggleSelectAll(this.selectAllAdapter, { allowDeselect: true });
+        }
+        finally {
+            this.selectAllInProgress = false;
+        }
+        this.propagateChanges();
+        this.stateChanges.next();
+        this.onSelectAll.emit(new KbqSelectAllEvent(this, targets, this.allOptionsSelected));
+    }
     /**
      * Clears the current selection.
-     * @param $event Mouse event to prevent default behavior.
+     * @docs-private
      */
-    clearValue($event) {
-        // need to prevent opening
-        $event.stopPropagation();
-        // need to prevent scrolling
-        $event.preventDefault();
+    clear() {
         this.selectionModel.clear();
         this.keyManager.setActiveItem(-1);
         this.propagateChanges();
-        this.focus();
+    }
+    /**
+     * Clears the current selection.
+     * @deprecated Activate the projected `KbqCleaner` instead.
+     * @docs-private
+     */
+    clearValue(event) {
+        const cleaner = this.cleaner();
+        if (cleaner) {
+            cleaner.clear(event);
+        }
+        else {
+            event.stopPropagation();
+            event.preventDefault();
+            this.clear();
+            this.focus();
+        }
     }
     /** Resets the search component if present. */
     resetSearch() {
@@ -922,6 +1090,10 @@ class KbqSelect extends KbqAbstractSelect {
         // the order of calls is important
         this.resetSearch();
         this.panelOpen = false;
+        this.unsubscribeFromPanelResize();
+        // Back to the two default sides, so the next open is not resolved against a first row that has since
+        // changed height.
+        this.positions = this.withOverlapPosition(this.positions, null) ?? this.positions;
         this.keyManager.withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
         this._changeDetectorRef.markForCheck();
         this.onTouched();
@@ -1022,12 +1194,32 @@ class KbqSelect extends KbqAbstractSelect {
             this.optionsContainer().nativeElement.scrollTop = this.scrollTop;
             this.updateScrollSize();
             this.subscribeToScrolledToBottom();
+            // Deliberately out of this frame — see `reanchorPanel`. A microtask still lands before paint.
+            queueMicrotask(() => this.reanchorPanel());
         });
-        this.options.changes
-            .pipe(delay(1), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.setOverlayPosition());
+        // The option list drives the panel's height, so a change to it can settle the anchor question
+        // differently — and the panel is realigned on every such change regardless.
+        this.options.changes.pipe(delay(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.updatePanelAnchor();
+            this.setOverlayPosition();
+        });
+        this.subscribeToPanelResize();
         this.closeSubscription = this.closingActions().subscribe(() => this.close());
     }
+    /** Element the overlay is positioned and sized against. */
+    getOverlayOriginElement() {
+        return this.parentFormField?.getConnectedOverlayOrigin().nativeElement ?? this.trigger()?.nativeElement;
+    }
+    isPanelOpen() {
+        return this.panelOpen;
+    }
+    /**
+     * A `cdk-virtual-scroll-viewport` pins its height to `--kbq-select-panel-size-max-height` in both
+     * directions, so its `scrollHeight` follows the cap rather than the content.
+     */
+    isListHeightPinnedToCap() {
+        return this.withVirtualScroll;
+    }
     /** Returns the theme to be used on the panel based on parent form field color. */
     getPanelTheme() {
         return this.parentFormField ? `kbq-${this.parentFormField.color}` : '';
@@ -1086,12 +1278,22 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /** @docs-private */
     setSelectedOptionsByClick(option) {
+        // `KbqOption.handleClick` routes a shift-click straight here, skipping the `disabled`/`selectable`
+        // check that `selectViaInteraction` applies to a plain click — so the guard has to live here.
+        // It precedes `setActiveItem` deliberately: the range anchor must not come to rest on an option
+        // the user cannot toggle, or the next shift-range would take its direction from that option's
+        // (unchangeable) selected state. Mirrors `KbqTreeSelection.setSelectedOptionsByClick`.
+        if (option.disabled || !option.selectable()) {
+            return;
+        }
         if (this.multiple || this.multiline()) {
             this.keyManager.setActiveItem(option);
-            const options = this.options.toArray();
+            // The key manager's list, not `options`: with the "select all" row rendered the two are offset
+            // by one, and a range read off `options` would land on the wrong options entirely.
+            const options = this.navigableOptions.toArray();
             let fromIndex = this.keyManager.previousActiveItemIndex;
             let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
-            const selectedOptionState = options[fromIndex].selected;
+            const selectedOptionState = options[fromIndex]?.selected;
             if (toIndex === fromIndex) {
                 this.selectionModel.toggle(option);
                 return;
@@ -1101,7 +1303,7 @@ class KbqSelect extends KbqAbstractSelect {
             }
             options
                 .slice(fromIndex, toIndex + 1)
-                .filter((item) => !item.disabled)
+                .filter((item) => !item.disabled && item.selectable())
                 .forEach((option) => {
                 if (selectedOptionState) {
                     option.select();
@@ -1202,14 +1404,20 @@ class KbqSelect extends KbqAbstractSelect {
     }
     /**
      * Calculates the width of a single item including margins.
+     *
+     * The elements measured here are `kbq-tag`s, which are `border-box` and carry horizontal
+     * padding. `getComputedStyle().width` resolves to the used content-box width whatever
+     * `box-sizing` says, so it dropped that padding from every tag and the matcher believed more
+     * tags fit than actually do. `getBoundingClientRect()` is always the border box — the same fix
+     * `kbqGetPanelWidthOrigin()` carries for the dropdown trigger.
      * @param element The DOM element to measure.
      * @returns Total width including margins and gap.
      */
     getItemWidth(element) {
         const computedStyle = this.window.getComputedStyle(element);
-        const width = parseInt(computedStyle.width);
-        const marginLeft = parseInt(computedStyle.marginLeft);
-        const marginRight = parseInt(computedStyle.marginRight);
+        const width = element.getBoundingClientRect().width;
+        const marginLeft = parseFloat(computedStyle.marginLeft) || 0;
+        const marginRight = parseFloat(computedStyle.marginRight) || 0;
         return width + marginLeft + marginRight + parseInt(SizeXxs);
     }
     /** Handles keyboard events while the select is closed. */
@@ -1233,6 +1441,10 @@ class KbqSelect extends KbqAbstractSelect {
         if ((isArrowKey && event.altKey) || keyCode === ESCAPE || keyCode === TAB) {
             // Close the select on ALT + arrow key to match the native <select>
             event.preventDefault();
+            // Prevent ESCAPE from bubbling to ancestor (when inside overlay)
+            if (keyCode === ESCAPE) {
+                event.stopPropagation();
+            }
             this.close();
             this.focus();
         }
@@ -1254,7 +1466,15 @@ class KbqSelect extends KbqAbstractSelect {
         }
         else if ((keyCode === ENTER || keyCode === SPACE) && this.keyManager.activeItem) {
             event.preventDefault();
-            this.keyManager.activeItem.selectViaInteraction();
+            // The row is not selectable, so `selectViaInteraction()` would be a no-op on it. Handling it
+            // here covers both focus positions — the row itself and the search field the panel keeps
+            // focus in while the row is merely active.
+            if (this.keyManager.activeItem === this.selectAllOption()) {
+                this.toggleSelectAll();
+            }
+            else {
+                this.keyManager.activeItem.selectViaInteraction();
+            }
         }
         else if (this.multiSelection && isSelectAll(event)) {
             this.selectAllHandler(event, this);
@@ -1295,6 +1515,32 @@ class KbqSelect extends KbqAbstractSelect {
             this.setSelectionByValue(this.ngControl ? this.ngControl.value : this._value);
         });
     }
+    /** Whether the key manager has no active item, or its active item is missing from the current options list. */
+    isActiveItemStale() {
+        const activeItem = this.keyManager.activeItem;
+        return !activeItem || !this.navigableOptions.some((option) => option === activeItem);
+    }
+    /**
+     * Rebuilds the key manager's list — the "select all" row first, then the projected options — and
+     * re-applies the panel's initial highlight whenever the row is what just joined that list.
+     *
+     * Both callers have to be able to do the second part: whichever of the view query and
+     * `options.changes` runs first is the one that brings the row in, and the other then sees a list
+     * it is already part of.
+     */
+    syncNavigableOptions() {
+        const selectAllOption = this.selectAllOption();
+        const options = this.options?.toArray() ?? [];
+        // The row is created together with the overlay, so the highlight `openPanel()` applies is
+        // computed against a list that does not hold it yet and lands on the option below it instead.
+        // Re-apply it the moment the row takes the lead — the call is idempotent for every other case.
+        const selectAllOptionAppeared = !!selectAllOption && this.navigableOptions.first !== selectAllOption;
+        this.navigableOptions.reset(selectAllOption ? [selectAllOption, ...options] : options);
+        this.navigableOptions.notifyOnChanges();
+        if (selectAllOptionAppeared && this.panelOpen) {
+            this.highlightCorrectOption();
+        }
+    }
     /**
      * Sets the selected option based on a value.
      * If no option can be found with the designated value, the select trigger is cleared.
@@ -1315,7 +1561,11 @@ class KbqSelect extends KbqAbstractSelect {
             const correspondingOption = this.selectValue(value);
             // Shift focus to the active item. Note that we shouldn't do this in multiple
             // mode, because we don't know what option the user interacted with last.
-            if (correspondingOption && !this.withVirtualScroll) {
+            // While the panel is open and the user is already navigating a still-present
+            // active item, keep it as is: `options.changes` re-runs this method on every
+            // appended chunk (e.g. paging), and re-activating the selected option would
+            // focus it and scroll the list back to it.
+            if (correspondingOption && !this.withVirtualScroll && (!this.panelOpen || this.isActiveItemStale())) {
                 this.keyManager.setActiveItem(correspondingOption);
             }
         }
@@ -1329,42 +1579,49 @@ class KbqSelect extends KbqAbstractSelect {
     getCorrespondOption(value) {
         return [
             ...this.options.toArray(),
-            ...this.previousSelectionModelSelected
-        ].find((option) => {
-            try {
-                // Treat null as a special reset value.
-                return option.value != null && this.compareWith(option.value, value);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    // Notify developers of errors in their comparator.
-                    // eslint-disable-next-line no-console
-                    console.warn(error);
-                }
-                return false;
-            }
-        });
+            ...this.previousSelectionModelSelected.map((option) => this.resolveSelectedOption(option))
+            // Treat null as a special reset value.
+        ].find((option) => option.value != null && runCompareWith(this.compareWith, option.value, value));
     }
     /**
-     * Finds and selects and option based on its value.
-     * @returns Option that has the corresponding value.
+     * Finds and selects an option based on its value.
+     * @returns Option that has the corresponding value, when it is currently rendered.
      */
     selectValue(value) {
         const correspondingOption = this.getCorrespondOption(value);
         if (correspondingOption) {
             this.selectionModel.select(correspondingOption);
+            this.captureSelectedOptionCopy(correspondingOption);
+            // Only a currently rendered option can be activated in the key manager.
+            return this.options.find((option) => option === correspondingOption);
         }
-        else if (this.withVirtualScroll) {
+        const virtualOption = this.createVirtualOptionForValue(value);
+        if (virtualOption) {
+            this.selectionModel.select(virtualOption);
+        }
+        return undefined;
+    }
+    /**
+     * Builds a detached option for a value whose `KbqOption` is not rendered, or returns `undefined`
+     * when the value cannot be resolved and the consumer gave no way to render it.
+     */
+    createVirtualOptionForValue(value) {
+        // Treat null as a special reset value, the same way `getCorrespondOption` does.
+        if (value == null)
+            return undefined;
+        if (this.withVirtualScroll) {
             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));
+                return this.createVirtualOption(correspondingOptionVirtual);
             }
+            // The value is missing from the currently loaded data (server-side search, a narrowed down
+            // source) — it can still be rendered when a `virtualOptionFactory` maps it to a label.
+            return this.virtualOptionFactory() ? this.createVirtualOption(value) : undefined;
         }
-        else if (this.showPreselectedValues()) {
-            this.selectionModel.select(this.createVirtualOption(value));
-        }
-        return correspondingOption;
+        // Without virtual scroll the whole list is rendered, so a value that matched nothing is only
+        // kept in the selection when the consumer opted into unresolved values.
+        return this.showPreselectedValues() ? this.createVirtualOption(value) : undefined;
     }
     /**
      * Single entry point for building a `KbqVirtualOption` from a raw value.
@@ -1375,10 +1632,28 @@ class KbqSelect extends KbqAbstractSelect {
         const virtualOptionFactory = this.virtualOptionFactory();
         return virtualOptionFactory ? virtualOptionFactory(value) : new KbqVirtualOption(value, this.disabled);
     }
+    /**
+     * Remembers the value and the label of a selected option while its view is still live, so that the
+     * selection survives the view being recycled by `cdk-virtual-scroll` for another item.
+     */
+    captureSelectedOptionCopy(option) {
+        if (option instanceof KbqVirtualOption)
+            return;
+        this.selectedOptionCopies.set(option, new KbqVirtualOption(option.value, option.disabled, option.viewValue));
+    }
+    /** Copy of `option` when its view has been recycled for another item, otherwise `option` itself. */
+    resolveSelectedOption(option) {
+        const copy = this.selectedOptionCopies.get(option);
+        if (!copy)
+            return option;
+        // A value that no longer matches the copy means the view was recycled for another item. A
+        // comparator that throws reads as "no match" here too, falling back to the value actually selected.
+        return runCompareWith(this.compareWith, option.value, copy.value) ? option : copy;
+    }
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     initKeyManager() {
         const typeAheadDebounce = 200;
-        this.keyManager = new ActiveDescendantKeyManager(this.options)
+        this.keyManager = new ActiveDescendantKeyManager(this.navigableOptions)
             .withTypeAhead(typeAheadDebounce, this.search() ? -1 : 0)
             .withVerticalOrientation()
             .withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
@@ -1423,6 +1698,7 @@ class KbqSelect extends KbqAbstractSelect {
         else {
             if (option.selected) {
                 this.selectionModel.select(option);
+                this.captureSelectedOptionCopy(option);
             }
             else {
                 this.selectionModel.deselect(option);
@@ -1434,7 +1710,8 @@ class KbqSelect extends KbqAbstractSelect {
                 this.sortValues();
             }
         }
-        if (wasSelected !== this.selectionModel.isSelected(option)) {
+        // `toggleSelectAll` propagates once for the whole batch instead.
+        if (!this.selectAllInProgress && wasSelected !== this.selectionModel.isSelected(option)) {
             this.propagateChanges();
         }
         this.stateChanges.next();
@@ -1479,7 +1756,6 @@ class KbqSelect extends KbqAbstractSelect {
             }
         }
     }
-    /** Scrolls the active option into view. */
     scrollActiveOptionIntoView() {
         this.keyManager.activeItem?.focus();
     }
@@ -1492,11 +1768,19 @@ class KbqSelect extends KbqAbstractSelect {
             return;
         }
         event.preventDefault();
+        // With the master checkbox on screen the shortcut has to behave exactly like clicking it,
+        // otherwise the same action would leave the checkbox showing something the selection contradicts.
+        if (select.selectAll()) {
+            select.toggleSelectAll();
+            return;
+        }
         const options = select.options.toArray();
-        const selectableOptions = options.filter((option) => !option.disabled);
+        const selectableOptions = options.filter((option) => !option.disabled && option.selectable());
         toggleSelectAll({
             items: options,
-            isSelectable: (option) => !option.disabled,
+            // A non-selectable option is not one the user could ever toggle by hand — sweeping it up
+            // here would select the consumer's own "select all" row along with the real options.
+            isSelectable: (option) => !option.disabled && option.selectable(),
             isSelected: (option) => option.selected,
             setSelected: (option, selected) => (selected ? option.select() : option.deselect())
         }, { allowDeselect: select.selectAllToggle() });
@@ -1555,17 +1839,31 @@ 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: "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 }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, 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", onSelectAll: "onSelectAll", 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.30", ngImport: i0, type: KbqSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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 }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMinWidth: { classPropertyName: "panelMinWidth", publicName: "panelMinWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, 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", onSelectAll: "onSelectAll", 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 },
+            kbqCleanerFactoryProvider((() => {
+                const select = inject(KbqSelect);
+                return {
+                    get control() {
+                        return select;
+                    },
+                    get keydownTarget() {
+                        return select.elementRef.nativeElement;
+                    },
+                    clearByEscape: false,
+                    clear: (() => select.clear())
+                };
+            })),
             { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
-            { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
-        ], 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    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\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.max-width.px]=\"panelMaxWidth()\"\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 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);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%;max-width:var(--kbq-panel-size-width-max, 640px);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: [
+            { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect },
+            kbqSiblingPopupProvider(KbqSelect)
+        ], 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: KbqCleaner, 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: "selectAllOption", first: true, predicate: KbqOption, 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                                #multilineMatchList\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 class=\"kbq-select__cleaner\">\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    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\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            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.role]=\"'checkbox'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\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{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);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%;max-width:var(--kbq-panel-size-width-max, 640px);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{box-sizing:initial;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 .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-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"] }, { kind: "component", type: KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], animations: [
             kbqSelectAnimations.transformPanel,
             kbqSelectAnimations.fadeInContent
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelect, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-select', imports: [
                         CdkOverlayOrigin,
@@ -1573,11 +1871,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         NgTemplateOutlet,
                         CdkMonitorFocus,
                         CdkConnectedOverlay,
-                        KbqIconModule
+                        KbqIconModule,
+                        KbqOption,
+                        KbqPseudoCheckbox
                     ], providers: [
                         { provide: KbqFormFieldControl, useExisting: KbqSelect },
+                        kbqCleanerFactoryProvider((() => {
+                            const select = inject(KbqSelect);
+                            return {
+                                get control() {
+                                    return select;
+                                },
+                                get keydownTarget() {
+                                    return select.elementRef.nativeElement;
+                                },
+                                clearByEscape: false,
+                                clear: (() => select.clear())
+                            };
+                        })),
                         { provide: KBQ_OPTION_PARENT_COMPONENT, useExisting: KbqSelect },
-                        { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect }
+                        { provide: KBQ_PARENT_POPUP, useExisting: KbqSelect },
+                        kbqSiblingPopupProvider(KbqSelect)
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
@@ -1593,14 +1907,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     }, animations: [
                         kbqSelectAnimations.transformPanel,
                         kbqSelectAnimations.fadeInContent
-                    ], 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    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\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.max-width.px]=\"panelMaxWidth()\"\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 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);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%;max-width:var(--kbq-panel-size-width-max, 640px);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: [{
+                    ], 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                                #multilineMatchList\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 class=\"kbq-select__cleaner\">\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    [cdkConnectedOverlayOpen]=\"panelOpen\"\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin || fallbackOverlayOrigin\"\n    [cdkConnectedOverlayPanelClass]=\"overlayPanelClass\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n    [cdkConnectedOverlayViewportMargin]=\"viewportMargin\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    (attach)=\"onAttached()\"\n    (backdropClick)=\"close()\"\n    (detach)=\"close()\"\n>\n    <div\n        #panel\n        cdkMonitorSubtreeFocus\n        [class]=\"getPanelClasses()\"\n        [style.--kbq-select-panel-size-max-height]=\"panelMaxHeightToken()\"\n        [style.font-size.px]=\"triggerFontSize\"\n        [style.max-width.px]=\"panelMaxWidth()\"\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            @if (showSelectAll) {\n                <!-- Every read of selectAllState re-filters the whole option list, and allOptionsSelected\n                     is that same walk asking whether the state is \"checked\" \u2014 one read covers all four. -->\n                @let selectAllCheckboxState = selectAllState;\n\n                <kbq-option\n                    class=\"kbq-select__select-all\"\n                    [selectable]=\"false\"\n                    [class.kbq-selected]=\"selectAllCheckboxState === 'checked'\"\n                    [attr.role]=\"'checkbox'\"\n                    [attr.aria-checked]=\"\n                        selectAllCheckboxState === 'indeterminate' ? 'mixed' : selectAllCheckboxState === 'checked'\n                    \"\n                    (click)=\"toggleSelectAll()\"\n                >\n                    <kbq-pseudo-checkbox [state]=\"selectAllCheckboxState\" />\n                    {{ selectAllText }}\n                </kbq-option>\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{box-sizing:content-box;flex:0 0 var(--kbq-form-field-size-addon-width);align-self:center;padding-left:var(--kbq-size-xxs);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%;max-width:var(--kbq-panel-size-width-max, 640px);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{box-sizing:initial;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 .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-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 }] }], selectAllOption: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOption), { isSignal: true }] }], overlayDir: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay, { static: false }]
             }], 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: 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: [{
+            }], 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: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], options: [{
                 type: ContentChildren,
                 args: [KbqOption, { descendants: true }]
             }], 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: [{
@@ -1628,9 +1942,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], compareWith: [{
                 type: Input
-            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllHandler: [{
+            }], virtualOptionFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualOptionFactory", required: false }] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllHandler: [{
                 type: Input
-            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], value: [{
+            }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMinWidth", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], value: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -1645,8 +1959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqSelectModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -1676,7 +1990,7 @@ class KbqSelectModule {
             KbqSelectError,
             KbqSelectNoOptions,
             KbqSelectErrorText] }); }
-    /** @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,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, imports: [OverlayModule,
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
@@ -1686,7 +2000,7 @@ class KbqSelectModule {
             KbqSelectLoading, KbqOptionModule,
             KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1709,7 +2023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqSelectNoOptions,
                         KbqSelectErrorText
                     ],
-                    providers: [KBQ_SELECT_SCROLL_STRATEGY_PROVIDER],
                     exports: [
                         KbqSelect,
                         KbqOptionTooltip,