@koobiq/components 20.3.1 → 20.4.0

package/fesm2022/koobiq-components-list.mjs

@@ -5,11 +5,12 @@ import { SelectionModel } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDropList, CdkDrag, CDK_DRAG_HANDLE, CdkDragPreview, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { Platform } from '@angular/cdk/platform';
+import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { forwardRef, inject, ElementRef, ChangeDetectorRef, output, EventEmitter, input, booleanAttribute, DestroyRef, NgZone, signal, HostAttributeToken, effect, isDevMode, Input, Output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, contentChild, contentChildren, viewChild, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { forwardRef, inject, ElementRef, ChangeDetectorRef, output, EventEmitter, input, booleanAttribute, viewChild, QueryList, contentChild, DestroyRef, NgZone, signal, HostAttributeToken, effect, isDevMode, Input, Output, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, contentChildren, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MultipleMode, getKbqSelectNonFunctionValueError, KBQ_WINDOW, FocusKeyManager, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, runCompareWith, toggleSelectAll, KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, kbqFocusOptionActionOnTab, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqLineSetter, KbqLine, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import { MultipleMode, getSelectAllState, ruRULocaleData, KBQ_LOCALE_SERVICE, getKbqSelectNonFunctionValueError, KBQ_WINDOW, toggleSelectAll, FocusKeyManager, kbqGetElementHeight, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey, runCompareWith, KbqPseudoCheckbox, KbqOptgroup, KbqOptionActionComponent, kbqFocusOptionActionOnTab, KbqActionContainer, KBQ_OPTION_ACTION_PARENT, KBQ_TITLE_TEXT_REF, KbqLineSetter, KbqLine, KbqOptionModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { merge, fromEvent, Subject } from 'rxjs';
@@ -93,6 +94,53 @@ class KbqListSelection {
         this._draggable = value;
         this.syncDraggableState();
     }
+    /**
+     * Whether the "select all" row is currently rendered.
+     *
+     * Suppressed inside a `cdk-virtual-scroll-viewport`: `options` then holds only the options currently
+     * rendered, so the checkbox would report "everything selected" after touching a fraction of the data
+     * — the same reason `kbq-select` refuses the row under `withVirtualScroll`. Suppressed on an empty
+     * list too: a master checkbox over nothing has nothing to say.
+     */
+    get showSelectAll() {
+        return (this.selectAllEnabled() &&
+            this.multipleMode === MultipleMode.CHECKBOX &&
+            !this.horizontal() &&
+            !this.virtualScroll() &&
+            !!this.options?.length);
+    }
+    /** 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(this.selectAllTargets));
+    }
+    /**
+     * Options "select all" acts on, and the ones its checkbox state is derived from. Read from
+     * {@link options}, so the row it renders itself is never among them.
+     */
+    get selectAllTargets() {
+        return this.options?.filter((option) => !option.disabled) ?? [];
+    }
+    /**
+     * Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart.
+     *
+     * Takes the items rather than reading {@link selectAllTargets} itself: the toggle needs that array for
+     * the emitted event anyway, and deriving it here as well would walk the whole option list twice.
+     */
+    selectAllAdapter(items) {
+        return {
+            items,
+            isSelectable: () => true,
+            isSelected: (option) => option.selected,
+            setSelected: (option, selected) => option.setSelected(selected)
+        };
+    }
     get multiple() {
         return !!this.multipleMode;
     }
@@ -125,11 +173,14 @@ class KbqListSelection {
     get showCheckbox() {
         return this.multipleMode === MultipleMode.CHECKBOX;
     }
+    // Built over the navigable list, not `options`: the "select all" row lives in this component's own
+    // view, so its focus would otherwise reach nobody and leave the key manager pointing at whichever
+    // option was active before the user clicked the row.
     get optionFocusChanges() {
-        return merge(...this.options.map((option) => option.onFocus));
+        return merge(...this.navigableOptions.map((option) => option.onFocus));
     }
     get optionBlurChanges() {
-        return merge(...this.options.map((option) => option.onBlur));
+        return merge(...this.navigableOptions.map((option) => option.onBlur));
     }
     constructor() {
         this.elementRef = inject(ElementRef);
@@ -168,6 +219,51 @@ class KbqListSelection {
         this.dropped = output();
         /** 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="checkbox"` only —
+         * a vertical list, since the row is a full-width heading of the column it governs.
+         *
+         * The row acts on every option the user can toggle, disabled ones excluded. Enabling it also makes
+         * Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never disagree ({@link selectAllToggle}
+         * is implied).
+         *
+         * Aliased rather than named `selectAll`, which is already taken by the imperative method of that name.
+         */
+        this.selectAllEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectAllEnabled", alias: 'selectAll', transform: booleanAttribute }] : [{ alias: 'selectAll', transform: booleanAttribute }]));
+        /**
+         * Reference to the built-in "select all" row, rendered only while `selectAll` is on.
+         *
+         * Located by template reference rather than by the `KbqListOption` type: that class is declared
+         * below this one in the same file, and a query locator is evaluated while this class is being
+         * defined, which would read it in its temporal dead zone.
+         */
+        this.selectAllOption = viewChild('selectAllRow', ...(ngDevMode ? [{ debugName: "selectAllOption" }] : []));
+        /**
+         * The options the key manager navigates: the "select all" row first, then the projected ones.
+         *
+         * Kept apart from {@link options} because that query is public API and means "the options the consumer
+         * projected" — a synthetic entry there would corrupt `getSelectedOptionValues`, the drop-indicator
+         * geometry and every consumer tally built on it.
+         * @docs-private
+         */
+        this.navigableOptions = new QueryList();
+        /**
+         * The virtual scroller rendering the options, when the consumer projected one.
+         *
+         * A signal query rather than a DOM probe, mirroring `KbqSelect.cdkVirtualForOf`: it resolves on the
+         * server as well as in the browser, and it follows a viewport that appears later behind the
+         * consumer's own `@if`.
+         */
+        this.virtualScroll = contentChild(CdkVirtualForOf, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : []));
+        /** Label of the "select all" row. Follows the active locale. */
+        this.selectAllText = ruRULocaleData.select.selectAll;
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        /** Updates locale parameters from the locale service. */
+        this.updateLocaleParams = () => {
+            // Locale data registered by a consumer through `KBQ_LOCALE_DATA`/`addLocale` may predate this key.
+            this.selectAllText = this.localeService?.getParams('select')?.selectAll ?? ruRULocaleData.select.selectAll;
+            this.changeDetectorRef.markForCheck();
+        };
         this.horizontal = input(false, ...(ngDevMode ? [{ debugName: "horizontal", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this._tabIndex = 0;
         this._disabled = false;
@@ -239,10 +335,71 @@ class KbqListSelection {
             this.compareWith();
             this.initializeSelection();
         });
+        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
+        // The "select all" row is rendered by this component's own template, so `options.changes` never
+        // fires for it — the navigable list has to be rebuilt whenever the view query resolves or drops it.
+        effect(() => {
+            this.selectAllOption();
+            this.syncNavigableOptions();
+        });
         this.setupDropListInitialProperties();
     }
+    /** Rebuilds {@link navigableOptions}: the "select all" row, when rendered, leads the projected options. */
+    syncNavigableOptions() {
+        const selectAllOption = this.selectAllOption();
+        const options = this.options?.toArray() ?? [];
+        this.navigableOptions.reset(selectAllOption ? [selectAllOption, ...options] : options);
+        this.navigableOptions.notifyOnChanges();
+    }
+    /**
+     * Marks the list for check after an option changed something the "select all" row is derived from —
+     * its selection or its `disabled` state.
+     *
+     * An option marking itself only asks its ancestors to traverse down to it; it does not re-evaluate
+     * their own bindings. Without this the row keeps painting a state the options have already left, and
+     * a click on a checkbox showing `indeterminate` over an already-full selection takes the deselect
+     * branch — doing the opposite of what the user was shown.
+     * @docs-private
+     */
+    refreshSelectAllState() {
+        if (this.showSelectAll) {
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    /** Whether the option is the built-in "select all" row rather than one the consumer projected. */
+    isSelectAllRow(option) {
+        return !!option && option === this.selectAllOption();
+    }
+    /**
+     * 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, so the two can never disagree. Reports the value
+     * once for the whole batch instead of once per option.
+     */
+    toggleSelectAll() {
+        // The row's own `(click)` and the shortcut both funnel through here, so this is the single place
+        // to refuse acting on a disabled list — the guard every option already gets in `handleClick`.
+        if (this.disabled)
+            return;
+        const targets = this.selectAllTargets;
+        toggleSelectAll(this.selectAllAdapter(targets), { allowDeselect: this.allowSelectAllDeselect });
+        // Reported unconditionally, as the shortcut has always done: a repeat that flips nothing still
+        // re-reports the value, which is what normalizes a form value holding entries no option matches.
+        this.reportValueChange();
+        // Deliberately no `selectionChange`: that event carries a single option, and a batch is
+        // reported through `onSelectAll` instead — the contract Ctrl/Cmd + A has always had.
+        this.onSelectAll.emit(new KbqListSelectAllEvent(this, targets));
+    }
+    /**
+     * Whether a repeated toggle deselects. Keyed on {@link showSelectAll} rather than on the raw input:
+     * with no row on screen there is no checkbox for the shortcut to agree with, so the attribute must
+     * not quietly change what Ctrl/Cmd + A does.
+     */
+    get allowSelectAllDeselect() {
+        return this.showSelectAll || this.selectAllToggle();
+    }
     ngAfterContentInit() {
-        this.keyManager = new FocusKeyManager(this.options)
+        this.keyManager = new FocusKeyManager(this.navigableOptions)
             .withTypeAhead()
             .withVerticalOrientation(!this.horizontal())
             .withHorizontalOrientation(this.horizontal() ? 'ltr' : null);
@@ -267,14 +424,21 @@ class KbqListSelection {
             for (const item of event.removed) {
                 item.selected = false;
             }
+            this.refreshSelectAllState();
         });
         this.listenToOptionsFocus();
         this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.syncNavigableOptions();
             this.updateTabIndex();
             this.initializeSelection();
+            // `showSelectAll` is derived from the option count, and nothing else in this view changes
+            // when an option is added or removed — without this the row would not appear on the first
+            // option, nor go away with the last one.
+            this.changeDetectorRef.markForCheck();
         });
         if (!this.platform.isBrowser)
             return;
+        this.warnOnUnsupportedSelectAllContainer();
         this.warnOnUnsupportedDragContainer();
         this.updateScrollSize();
         // `updateScrollSize` only feeds the key manager's page size — nothing rendered depends on it,
@@ -311,12 +475,18 @@ class KbqListSelection {
         this.onTouched();
         this.changeDetectorRef.markForCheck();
     }
-    /** Selects every non-disabled option and reports the new value to the `ControlValueAccessor`. */
+    /**
+     * Selects every option and reports the new value to the `ControlValueAccessor`.
+     *
+     * Unlike the `selectAll` attribute and Ctrl/Cmd + A, this acts on disabled options as well — it is
+     * an imperative command, not something the user performed. See {@link toggleSelectAll} for the
+     * behaviour the master checkbox has.
+     */
     selectAll() {
         this.options.forEach((option) => option.setSelected(true));
         this.reportValueChange();
     }
-    /** Deselects every option and reports the new value to the `ControlValueAccessor`. */
+    /** Deselects every option, disabled ones included, and reports the new value. See {@link selectAll}. */
     deselectAll() {
         this.options.forEach((option) => option.setSelected(false));
         this.reportValueChange();
@@ -372,7 +542,10 @@ class KbqListSelection {
         }
     }
     selectActiveOptions() {
-        const options = this.options.toArray();
+        // Indexed against the navigable list, which is what the key manager reports positions in. The
+        // "select all" row leads that list when rendered and is filtered back out below, so a range
+        // extended across it selects the options it spans and leaves the row itself alone.
+        const options = this.navigableOptions.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
         let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
         // `previousActiveItemIndex` stays -1 until the key manager has moved at least once, so a
@@ -380,13 +553,18 @@ class KbqListSelection {
         if (toIndex === fromIndex || !this.isValidIndex(fromIndex) || !this.isValidIndex(toIndex)) {
             return;
         }
-        const selectedOptionState = options[fromIndex].selected;
+        const anchor = options[fromIndex];
+        // The row carries no selection of its own, so a range anchored on it has no state to apply.
+        if (this.isSelectAllRow(anchor)) {
+            return;
+        }
+        const selectedOptionState = anchor.selected;
         if (fromIndex > toIndex) {
             [fromIndex, toIndex] = [toIndex, fromIndex];
         }
         options
             .slice(fromIndex, toIndex + 1)
-            .filter((item) => !item.disabled)
+            .filter((item) => !item.disabled && !this.isSelectAllRow(item))
             .forEach((renderedOption) => {
             if (!selectedOptionState && this.noUnselectLast && this.selectionModel.selected.length === 1) {
                 return;
@@ -427,7 +605,13 @@ class KbqListSelection {
     toggleFocusedOption() {
         const focusedIndex = this.keyManager.activeItemIndex;
         if (focusedIndex != null && this.isValidIndex(focusedIndex)) {
-            const focusedOption = this.options.toArray()[focusedIndex];
+            const focusedOption = this.navigableOptions.toArray()[focusedIndex];
+            // The row holds no selection of its own, so `toggle()` would be a no-op on it. Space and
+            // Enter have to reach the batch toggle instead, exactly as a click on the row does.
+            if (this.isSelectAllRow(focusedOption)) {
+                this.toggleSelectAll();
+                return;
+            }
             if (focusedOption && !focusedOption.disabled && this.canDeselectLast(focusedOption)) {
                 focusedOption.toggle();
                 // Emit a change event because the focused option changed its state through user interaction.
@@ -445,16 +629,16 @@ class KbqListSelection {
      * @docs-private
      */
     getHeight() {
-        return this.elementRef.nativeElement.getClientRects()?.[0]?.height ?? 0;
+        return kbqGetElementHeight(this.elementRef.nativeElement);
     }
     // Removes an option from the selection list and updates the active item.
     removeOptionFromList(option) {
         if (!option.hasFocus) {
             return;
         }
-        const optionIndex = this.getOptionIndex(option);
+        const optionIndex = this.navigableOptions.toArray().indexOf(option);
         // Check whether the option is the last item
-        if (optionIndex === this.options.length - 1) {
+        if (optionIndex === this.navigableOptions.length - 1) {
             this.keyManager.setPreviousItemActive();
         }
         else {
@@ -507,7 +691,11 @@ class KbqListSelection {
             // manager's own orientation config cannot double-handle them.
             this.keyManager.onKeydown(event);
         }
-        if (this.keyManager.activeItem && this.isNavigationKey(event)) {
+        // Navigating onto the "select all" row must not select it: it holds no selection of its own,
+        // and in `autoSelect` mode the branch below would clear the list to select nothing.
+        if (this.keyManager.activeItem &&
+            this.isNavigationKey(event) &&
+            !this.isSelectAllRow(this.keyManager.activeItem)) {
             this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), 
             // ctrlKey is for Windows, metaKey is for MacOS
             hasModifierKey(event, 'ctrlKey', 'metaKey'));
@@ -553,7 +741,9 @@ class KbqListSelection {
         });
     }
     updateTabIndex() {
-        // Check to see if we need to update our tab index
+        // Counted over `options`, not the navigable list: the "select all" row only renders when there
+        // is at least one option, so the two are empty together — and `navigableOptions` is rebuilt a
+        // pass later, which would leave an emptied list holding a tab stop with nothing to focus.
         this._tabIndex = this.userTabIndex || (this.options.length === 0 ? -1 : 0);
     }
     onCopyDefaultHandler() {
@@ -564,21 +754,25 @@ class KbqListSelection {
      * `switchMap` tears down the previous `merge` for us, so no manual subscription bookkeeping.
      */
     listenToOptionsFocus() {
-        this.options.changes
+        // Re-subscribed on the navigable list rather than on `options`: the latter never fires when the
+        // "select all" row alone appears or disappears, which would leave its focus unheard.
+        this.navigableOptions.changes
             .pipe(startWith(null), switchMap(() => this.optionFocusChanges), takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
-            const index = this.options.toArray().indexOf(event.option);
+            const index = this.navigableOptions.toArray().indexOf(event.option);
             if (this.isValidIndex(index)) {
                 this.keyManager.updateActiveItem(index);
             }
         });
-        this.options.changes
+        this.navigableOptions.changes
             .pipe(startWith(null), switchMap(() => this.optionBlurChanges), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.blur());
     }
     /** Checks whether any of the options is focused. */
     hasFocusedOption() {
-        return this.options.some((option) => option.hasFocus);
+        // Asked of the navigable list so that focus resting on the "select all" row does not read as
+        // "nothing is focused" and clear the key manager out from under it.
+        return this.navigableOptions.some((option) => option.hasFocus);
     }
     // Returns the option with the specified value.
     getOptionByValue(value) {
@@ -602,7 +796,8 @@ class KbqListSelection {
      * @returns True if the index is valid for our list of options.
      */
     isValidIndex(index) {
-        return index >= 0 && index < this.options.length;
+        // Bounded by the navigable list, the index space the key manager reports in.
+        return index >= 0 && index < this.navigableOptions.length;
     }
     // Returns the index of the specified list option.
     getOptionIndex(option) {
@@ -654,6 +849,18 @@ class KbqListSelection {
             this.followMovedOption(option, target);
         });
     }
+    /**
+     * Says once, in dev mode, why `selectAll` produced no row: the master checkbox could only ever act on
+     * the options the scroller happens to have rendered, so the row is dropped rather than left lying.
+     */
+    warnOnUnsupportedSelectAllContainer() {
+        if (!isDevMode() || !this.selectAllEnabled() || !this.virtualScroll()) {
+            return;
+        }
+        // eslint-disable-next-line no-console
+        console.warn('KbqListSelection: `selectAll` is not supported inside `cdk-virtual-scroll-viewport`. The ' +
+            'row is not rendered, because it could only act on the options currently rendered.');
+    }
     /**
      * `CdkDropList` numbers only the options it has rendered, so inside a virtual scroll the indices
      * `dropped` reports do not address the consumer's backing array and the move silently lands on the
@@ -665,7 +872,7 @@ class KbqListSelection {
         if (this.hasWarnedOnDragContainer || !isDevMode() || !this.draggable || !this.platform.isBrowser) {
             return;
         }
-        const insideVirtualScroll = !!this.elementRef.nativeElement.querySelector('cdk-virtual-scroll-viewport');
+        const insideVirtualScroll = !!this.virtualScroll();
         if (insideVirtualScroll) {
             // eslint-disable-next-line no-console
             console.warn('KbqListSelection: `draggable` is not supported inside `cdk-virtual-scroll-viewport`. The ' +
@@ -786,11 +993,14 @@ class KbqListSelection {
         container.pendingMoveSubscription = container.options.changes
             .pipe(take(1), takeUntilDestroyed(container.destroyRef))
             .subscribe(() => {
-            const options = container.options.toArray();
+            // Resolved against the navigable list: `setActiveItem` takes an index in the key
+            // manager's own space, which the "select all" row leads when the target list renders one.
+            const options = container.navigableOptions.toArray();
             // Reordering within a list keeps the instance; moving between lists recreates it.
             const index = options.includes(option)
                 ? options.indexOf(option)
-                : options.findIndex((item) => runCompareWith(container.compareWith(), item.value, value));
+                : options.findIndex((item) => !container.isSelectAllRow(item) &&
+                    runCompareWith(container.compareWith(), item.value, value));
             if (index !== -1) {
                 container.keyManager.setActiveItem(index);
             }
@@ -811,20 +1021,17 @@ class KbqListSelection {
     }
     _selectAllHandler(event, list) {
         event.preventDefault();
-        const options = list.options.toArray();
-        toggleSelectAll({
-            items: options,
-            isSelectable: (option) => !option.disabled,
-            isSelected: (option) => option.selected,
-            setSelected: (option, selected) => option.setSelected(selected)
-        }, { allowDeselect: list.selectAllToggle() });
-        list.reportValueChange();
-        list.onSelectAll.emit(new KbqListSelectAllEvent(list, options.filter((option) => !option.disabled)));
+        // Funnelled through the same method the master checkbox uses, so the shortcut and the row can
+        // never disagree about what "select all" acted on.
+        list.toggleSelectAll();
     }
     copyActiveOption(event) {
         if (!this.keyManager.activeItem)
             return;
         const option = this.keyManager.activeItem;
+        // The row carries no value; copying it would put the string "undefined" on the clipboard.
+        if (this.isSelectAllRow(option))
+            return;
         option.preventBlur = true;
         if (this.onCopy.observed) {
             this.onCopy.emit(new KbqListCopyEvent(this, option, event));
@@ -836,7 +1043,30 @@ class KbqListSelection {
         option.preventBlur = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListSelection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListSelection, isStandalone: true, selector: "kbq-list-selection", inputs: { autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: false, isRequired: false, transformFunction: null }, noUnselectLast: { classPropertyName: "noUnselectLast", publicName: "noUnselectLast", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, dragPreview: { classPropertyName: "dragPreview", publicName: "dragPreview", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", dropped: "dropped", selectionChange: "selectionChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-list-selection_horizontal": "horizontal()", "class.kbq-list-selection_draggable": "draggable", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "horizontal() ? \"horizontal\" : null", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "options", predicate: i0.forwardRef(() => KbqListOption), descendants: true }], exportAs: ["kbqListSelection"], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id"] }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListSelection, isStandalone: true, selector: "kbq-list-selection", inputs: { autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: false, isRequired: false, transformFunction: null }, noUnselectLast: { classPropertyName: "noUnselectLast", publicName: "noUnselectLast", isSignal: false, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, dragPreview: { classPropertyName: "dragPreview", publicName: "dragPreview", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, selectAllToggle: { classPropertyName: "selectAllToggle", publicName: "selectAllToggle", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectAllHandler: { classPropertyName: "selectAllHandler", publicName: "selectAllHandler", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", dropped: "dropped", selectionChange: "selectionChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-list-selection_horizontal": "horizontal()", "class.kbq-list-selection_draggable": "draggable", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "horizontal() ? \"horizontal\" : null", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-selection" }, providers: [KBQ_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "virtualScroll", first: true, predicate: CdkVirtualForOf, descendants: true, isSignal: true }, { propertyName: "options", predicate: i0.forwardRef(() => KbqListOption), descendants: true }], viewQueries: [{ propertyName: "selectAllOption", first: true, predicate: ["selectAllRow"], descendants: true, isSignal: true }], exportAs: ["kbqListSelection"], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id"] }], ngImport: i0, template: `
+        @if (showSelectAll) {
+            <!-- Every read of selectAllState re-filters the whole option list, so the two bindings below
+                 share one through @let. The row's own aria-checked host binding walks it a second time:
+                 Ivy evaluates that binding after this template, and the option reads the state off the
+                 list rather than from here. -->
+            @let selectAllCheckboxState = selectAllState;
+
+            <!--
+                aria-checked and aria-selected come from the option's own host bindings: a host binding
+                runs after the parent template's, so an override here would be the one that loses. The
+                class binding is the other way around, which is why the selected state is written here.
+            -->
+            <kbq-list-option
+                #selectAllRow
+                class="kbq-list-selection__select-all"
+                [selectAllRow]="true"
+                [class.kbq-selected]="selectAllCheckboxState === 'checked'"
+                (click)="toggleSelectAll()"
+            >
+                <kbq-pseudo-checkbox aria-hidden="true" [disabled]="disabled" [state]="selectAllCheckboxState" />
+                {{ selectAllText }}
+            </kbq-list-option>
+        }
         <ng-content />
         @if (dropIndicatorOffset() !== null) {
             <!-- Purely decorative: the drop target is a pointer affordance, not a status message. -->
@@ -846,11 +1076,37 @@ class KbqListSelection {
                 [style.--kbq-list-drop-indicator-offset.px]="dropIndicatorOffset()"
             ></div>
         }
-    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{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)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-list,.kbq-list-selection{display:block;outline:none}.kbq-list-selection_horizontal{display:flex;flex-direction:row}.kbq-list-selection_horizontal .kbq-list-option{flex:0 0 auto}.kbq-list-selection{position:relative}.kbq-list-item,.kbq-list-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-list-item .kbq-list-text>*,.kbq-list-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-list-item .kbq-list-text:empty,.kbq-list-option .kbq-list-text:empty{display:none}.kbq-list-item .kbq-list-text,.kbq-list-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-list-item,.kbq-list-option{border-width:var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));border-radius:var(--kbq-size-border-radius);gap:var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));padding-top:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-right:calc(var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)));padding-bottom:var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));padding-left:calc(var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs)))}.kbq-list-item .kbq-list-option-caption,.kbq-list-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs))}.kbq-list-item:not(.kbq-disabled),.kbq-list-option:not(.kbq-disabled){cursor:pointer}body:has(.kbq-list-drag-preview){cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option.kbq-list-option_draggable,body:has(.kbq-list-drag-preview) .kbq-list-option_draggable .cdk-drag-handle{cursor:grabbing}body:has(.kbq-list-drag-preview) .kbq-list-option{pointer-events:none}body:has(.kbq-list-drag-preview) .kbq-optgroup-label{cursor:inherit}body:has(.kbq-list-drag-preview):has(.kbq-list-option_drop-forbidden){cursor:no-drop}.kbq-list-option:is(.kbq-selected):has(+:is(.kbq-selected)){border-bottom-left-radius:unset;border-bottom-right-radius:unset}.kbq-list-option:is(.kbq-selected)+:is(.kbq-selected){border-top-left-radius:unset;border-top-right-radius:unset}.kbq-list-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-list-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-list-option.kbq-list-option_draggable .cdk-drag-handle{cursor:grab}.kbq-list-option.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)){cursor:grab}.kbq-list-option.cdk-drag-placeholder,.kbq-list-option.cdk-drag-anchor{opacity:var(--kbq-opacity-disabled)}.kbq-list-option.kbq-list-option_foreign-placeholder{display:none}.kbq-list-selection__drop-indicator{position:absolute;background:var(--kbq-list-states-dragged-indicator-color);pointer-events:none}.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator{left:0;right:0;top:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);block-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator{top:0;bottom:0;left:calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);inline-size:var(--kbq-list-size-dragged-indicator-thickness)}.kbq-list-option{--kbq-option-background: var(--kbq-list-default-container-background, transparent);background:var(--kbq-list-default-container-background, transparent)}.kbq-list-option .kbq-list-text{color:var(--kbq-list-default-text-color, var(--kbq-list-default-text-color))}.kbq-list-option .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option .kbq-list-option-caption{color:var(--kbq-list-default-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled),.kbq-list-option:hover:not(.kbq-disabled),.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-hover-container-background, transparent);background:var(--kbq-list-states-hover-container-background, transparent)}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-text,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-text,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-hovered:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option:hover:not(.kbq-disabled) .kbq-list-option-caption,.kbq-list-option.kbq-action-button-focused:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-active:not(.kbq-disabled),.kbq-list-option:active:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-active-container-background);background:var(--kbq-list-states-active-container-background)}.kbq-list-option.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-states-selected-container-background, transparent);background:var(--kbq-list-states-selected-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-states-selected-hover-container-background, transparent);background:var(--kbq-list-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-states-selected-active-container-background);background:var(--kbq-list-states-selected-active-container-background)}.kbq-list-option.kbq-disabled{--kbq-option-background: var(--kbq-list-states-disabled-container-background, transparent);background:var(--kbq-list-states-disabled-container-background, transparent)}.kbq-list-option.kbq-disabled .kbq-list-text{color:var(--kbq-list-states-disabled-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-disabled .kbq-list-option-caption{color:var(--kbq-list-states-disabled-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-states-selected-container-background);background:var(--kbq-list-states-selected-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled){--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background, transparent);background:var(--kbq-list-multiple-states-selected-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-text{color:var(--kbq-list-multiple-states-selected-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled) .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover{--kbq-option-background: var(--kbq-list-multiple-states-selected-hover-container-background, transparent);background:var(--kbq-list-multiple-states-selected-hover-container-background, transparent)}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-text,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-text{color:var(--kbq-list-multiple-states-selected-hover-text-color, var(--kbq-list-default-text-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-color, var(--kbq-list-default-icon-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color, var(--kbq-list-default-icon-button-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-list-option-caption,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):hover .kbq-list-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color, var(--kbq-list-default-caption-color))}.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled).kbq-active,.kbq-list-option.kbq-list-option_multiple.kbq-selected:not(.kbq-disabled):active{--kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);background:var(--kbq-list-multiple-states-selected-active-container-background)}.kbq-list-option.kbq-list-option_multiple.kbq-selected.kbq-disabled{--kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-list-selection.cdk-keyboard-focused .kbq-list-option.kbq-focused{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-list-item,.kbq-list-option,.kbq-list-drag-preview_text{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)}.kbq-list-item .kbq-list-text .kbq-list-option-caption,.kbq-list-option .kbq-list-text .kbq-list-option-caption,.kbq-list-drag-preview_text .kbq-list-text .kbq-list-option-caption,.kbq-list-item .kbq-list-drag-preview__caption,.kbq-list-option .kbq-list-drag-preview__caption,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-list-option.cdk-drag-preview{background:var(--kbq-list-states-dragged-container-background);box-shadow:var(--kbq-list-states-dragged-container-shadow)}.kbq-list-drag-preview_text{box-sizing:border-box;max-inline-size:var(--kbq-list-size-drag-preview-max-width);border-radius:var(--kbq-size-border-radius);padding:var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right) var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);background:var(--kbq-list-states-drag-preview-background);box-shadow:var(--kbq-list-states-dragged-container-shadow);color:var(--kbq-list-default-text-color)}.kbq-list-drag-preview_text .kbq-list-drag-preview__label,.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kbq-list-drag-preview_text .kbq-list-drag-preview__caption{color:var(--kbq-list-default-caption-color);padding-top:var(--kbq-list-size-container-content-gap-vertical)}\n", "@charset \"UTF-8\";.kbq-list,.kbq-list-selection,.kbq-list-option.cdk-drag-preview,.kbq-list-drag-preview_text{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-multiple-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-multiple-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-multiple-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-multiple-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);--kbq-list-states-dragged-container-background: var(--kbq-background-card);--kbq-list-states-dragged-container-shadow: var(--kbq-shadow-popup)}.kbq-list-selection{--kbq-list-size-dragged-indicator-thickness: var(--kbq-size-3xs);--kbq-list-states-dragged-indicator-color: var(--kbq-line-theme)}.kbq-list-drag-preview_text{--kbq-list-size-drag-preview-max-width: 480px;--kbq-list-states-drag-preview-background: color-mix( in srgb, var(--kbq-background-card) calc(var(--kbq-opacity-overlay) * 100%), transparent )}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => KbqListOption), selector: "kbq-list-option", inputs: ["checkboxPosition", "selectAllRow", "value", "disabled", "draggable", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i0.forwardRef(() => KbqPseudoCheckbox), selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListSelection, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-list-selection', template: `
+            args: [{ selector: 'kbq-list-selection', imports: [
+                        forwardRef((() => KbqListOption)),
+                        KbqPseudoCheckbox
+                    ], template: `
+        @if (showSelectAll) {
+            <!-- Every read of selectAllState re-filters the whole option list, so the two bindings below
+                 share one through @let. The row's own aria-checked host binding walks it a second time:
+                 Ivy evaluates that binding after this template, and the option reads the state off the
+                 list rather than from here. -->
+            @let selectAllCheckboxState = selectAllState;
+
+            <!--
+                aria-checked and aria-selected come from the option's own host bindings: a host binding
+                runs after the parent template's, so an override here would be the one that loses. The
+                class binding is the other way around, which is why the selected state is written here.
+            -->
+            <kbq-list-option
+                #selectAllRow
+                class="kbq-list-selection__select-all"
+                [selectAllRow]="true"
+                [class.kbq-selected]="selectAllCheckboxState === 'checked'"
+                (click)="toggleSelectAll()"
+            >
+                <kbq-pseudo-checkbox aria-hidden="true" [disabled]="disabled" [state]="selectAllCheckboxState" />
+                {{ selectAllText }}
+            </kbq-list-option>
+        }
         <ng-content />
         @if (dropIndicatorOffset() !== null) {
             <!-- Purely decorative: the drop target is a pointer affordance, not a status message. -->
@@ -886,7 +1142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             }], draggable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], dragPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreview", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndex: [{
+            }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], dragPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreview", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectAllToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllToggle", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllOption: [{ type: i0.ViewChild, args: ['selectAllRow', { isSignal: true }] }], virtualScroll: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CdkVirtualForOf), { isSignal: true }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], tabIndex: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -958,6 +1214,8 @@ class KbqListOption {
         if (value !== this._disabled) {
             this._disabled = value;
             this.syncDraggableState();
+            // A disabled option leaves the set "select all" acts on, which changes the row's checkbox.
+            this.listSelection.refreshSelectAllState();
         }
     }
     /**
@@ -969,7 +1227,8 @@ class KbqListOption {
      * the list gates its whole drop list, so an option cannot opt back in on its own.
      */
     get draggable() {
-        return this._draggable && this.listSelection.draggable && !this.disabled;
+        // The "select all" row is a command, not one of the items being ordered.
+        return !this.selectAllRow() && this._draggable && this.listSelection.draggable && !this.disabled;
     }
     set draggable(value) {
         this._draggable = value;
@@ -1000,6 +1259,21 @@ class KbqListOption {
     get tabIndex() {
         return this.disabled ? null : -1;
     }
+    /** `aria-selected` of the row. The "select all" row reports `aria-checked` instead. */
+    get ariaSelected() {
+        return this.selectAllRow() ? null : this.selected;
+    }
+    /**
+     * Tri-state of the "select all" row, `mixed` included. `null` for an ordinary option, which
+     * reports `aria-selected` instead.
+     */
+    get ariaChecked() {
+        if (!this.selectAllRow()) {
+            return null;
+        }
+        const state = this.listSelection.selectAllState;
+        return state === 'indeterminate' ? 'mixed' : `${state === 'checked'}`;
+    }
     get externalPseudoCheckbox() {
         return !!this.pseudoCheckbox();
     }
@@ -1033,6 +1307,15 @@ class KbqListOption {
         this.text = viewChild.required('text');
         // Whether the label should appear before or after the checkbox. Defaults to 'after'
         this.checkboxPosition = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
+        /**
+         * Whether this option is the list's "select all" row rather than one the consumer projected.
+         *
+         * Such a row has no `value` and no place in the `SelectionModel`, so everything that would resolve
+         * it against the list's selection is skipped; its checkbox state and its selected look are driven
+         * from the outside instead. It also stays out of the drag-and-drop registry — see the constructor.
+         * @docs-private
+         */
+        this.selectAllRow = input(false, ...(ngDevMode ? [{ debugName: "selectAllRow", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
          * in the first cycle.
@@ -1075,6 +1358,22 @@ class KbqListOption {
         this.changeDetector.markForCheck();
     }
     ngOnInit() {
+        if (this.selectAllRow()) {
+            // `CdkDrag` registers itself with the enclosing drop list from its own constructor, and the
+            // row is rendered inside `kbq-list-selection`, so it lands in the registry like any option.
+            // Left there it would take drag item #0 and shift the `previousIndex` every `dropped` event
+            // reports, while `currentIndex` — derived from `options`, which the row is not part of —
+            // would stay put. `disabled` alone does not unregister it. Deferred to here rather than done
+            // in the constructor because a signal input is not set yet at construction time.
+            this.drag.dropContainer?.removeItem(this.drag);
+            // `syncDraggableState()` already ran from the constructor, where this input still read its
+            // default — so on a list that was draggable from the first render the row was left with an
+            // enabled `CdkDrag`. Unregistering it is not enough: `removeItem` leaves `DragRef` pointing
+            // at the drop container, so a pointer-down would still start a drag reporting index -1.
+            this.syncDraggableState();
+            this.inputsInitialized = true;
+            return;
+        }
         // Resolving the model value is the list's job, not the option's. An option that matched itself
         // here answered a different question than `getOptionByValue` does — every match self-selected,
         // while the list picks the first — so a comparator that matches more than one option produced a
@@ -1094,6 +1393,12 @@ class KbqListOption {
         this.inputsInitialized = true;
     }
     ngOnDestroy() {
+        // The row owns no selection, so there is nothing to release — but it does hold a place in the
+        // navigable list, and a focused row that disappears still has to hand the key manager on.
+        if (this.selectAllRow()) {
+            this.listSelection.removeOptionFromList(this);
+            return;
+        }
         if (this.selected) {
             // We have to delay this until the next tick in order
             // to avoid changed after checked errors.
@@ -1106,6 +1411,11 @@ class KbqListOption {
         this.selected = !this.selected;
     }
     getLabel() {
+        // The "select all" row is kept out of type-ahead: its localized label would otherwise shadow
+        // an option starting with the same letter.
+        if (this.selectAllRow()) {
+            return '';
+        }
         const text = this.text();
         return text ? (text.nativeElement.textContent ?? '') : '';
     }
@@ -1133,7 +1443,8 @@ class KbqListOption {
     /** Sets the selected state directly on the list's `SelectionModel`, bypassing the `selected` input setter. */
     setSelected(selected) {
         const { selectionModel } = this.listSelection;
-        if (!selectionModel) {
+        // The row has no place in the selection model — its look is driven by `selectAllState`.
+        if (!selectionModel || this.selectAllRow()) {
             return;
         }
         // The model is consulted alongside the mirror so that an option the model dropped behind the
@@ -1156,11 +1467,13 @@ class KbqListOption {
      * @docs-private
      */
     getHeight() {
-        return this.elementRef.nativeElement.getClientRects()?.[0]?.height ?? 0;
+        return kbqGetElementHeight(this.elementRef.nativeElement);
     }
     /** Handles click events on the list option. */
     handleClick($event) {
-        if (this.disabled) {
+        // The row's own `(click)` in the list's template runs the batch toggle; this handler would
+        // otherwise put the row itself through the ordinary selection path on the same click.
+        if (this.disabled || this.selectAllRow()) {
             return;
         }
         this.listSelection.setSelectedOptionsByClick(this, hasModifierKey($event, 'shiftKey'), 
@@ -1210,7 +1523,7 @@ class KbqListOption {
         return this.elementRef.nativeElement;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListOption, isStandalone: true, selector: "kbq-list-option", inputs: { checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { attributes: { "role": "option" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-list-option_multiple": "listSelection.multiple", "class.kbq-list-option_draggable": "draggable", "class.kbq-list-option_grab-cursor": "showsGrabCursor", "class.kbq-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton()?.active", "attr.aria-selected": "selected", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-option" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqListOption, isStandalone: true, selector: "kbq-list-option", inputs: { checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { attributes: { "role": "option" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-list-option_multiple": "listSelection.multiple", "class.kbq-list-option_draggable": "draggable", "class.kbq-list-option_grab-cursor": "showsGrabCursor", "class.kbq-disabled": "disabled", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton()?.active", "attr.aria-selected": "ariaSelected", "attr.aria-checked": "ariaChecked", "attr.aria-disabled": "disabled || null", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-list-option" }, providers: [
             { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqListOption },
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqListOption }
         ], queries: [{ propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true, isSignal: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true, isSignal: true }, { propertyName: "dragHandles", predicate: CDK_DRAG_HANDLE, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true, isSignal: true }, { propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqListOption"], hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: "@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <!-- Decorative: assistive technology reads the selected state from the option's own aria-selected. -->\n    <kbq-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n}\n\n<ng-content select=\"[kbq-icon]\" />\n\n<div #kbqTitleText #text class=\"kbq-list-text\">\n    <ng-content />\n    <ng-content select=\"[kbq-list-option-caption]\" />\n</div>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n\n@if (listSelection.dragPreview() === 'text') {\n    <!--\n        Registers with the host `CdkDrag` through `CDK_DRAG_PARENT`, not through a content query, which\n        is why it can live in the option's own view. The template body is a single element and nothing\n        else: CDK wraps the view in a plain div otherwise, and that wrapper \u2014 not this plate \u2014 would\n        become the preview. The plate is decorative, it repeats text the listbox already exposes.\n    -->\n    <ng-template cdkDragPreview>\n        <div class=\"kbq-list-drag-preview_text\" aria-hidden=\"true\">\n            <!-- Read on render rather than cached on `started`: CDK builds the preview before it emits. -->\n            @let text = getDragPreviewText();\n            <div class=\"kbq-list-drag-preview__label\">{{ text.label }}</div>\n            @if (text.caption) {\n                <div class=\"kbq-list-drag-preview__caption\">{{ text.caption }}</div>\n            }\n        </div>\n    </ng-template>\n}\n", dependencies: [{ kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }, { kind: "component", type: KbqActionContainer, selector: "kbq-action-container", exportAs: ["kbqActionContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1234,7 +1547,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-focused]': 'hasFocus',
                         '[class.kbq-action-button-focused]': 'actionButton()?.active',
-                        '[attr.aria-selected]': 'selected',
+                        '[attr.aria-selected]': 'ariaSelected',
+                        '[attr.aria-checked]': 'ariaChecked',
                         '[attr.aria-disabled]': 'disabled || null',
                         '[attr.tabindex]': 'tabIndex',
                         '(focusin)': 'focus()',
@@ -1251,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], dragHandles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CDK_DRAG_HANDLE), { ...{ descendants: true }, isSignal: true }] }], text: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText', { static: false }]
-            }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], value: [{
+            }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], value: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -1340,6 +1654,7 @@ class KbqListModule {
             KbqOptionModule,
             KbqActionContainer,
             KbqIconModule,
+            KbqListSelection,
             KbqListOption, KbqOptionModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqListModule, decorators: [{