@koobiq/components 21.0.0 → 21.1.0

package/fesm2022/koobiq-components-tree.mjs

@@ -2,9 +2,9 @@ import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, merge, Observable, of, Subject, asyncScheduler } from 'rxjs';
 import * as i1 from '@koobiq/components/core';
 import { escapeRegExp, KbqStateSaving, KbqPseudoCheckbox, KbqOptionActionComponent, kbqFocusAndReveal, kbqGetElementHeight, kbqFocusOptionActionOnTab, hasModifierKey, KbqActionContainer, KBQ_TITLE_TEXT_REF, KBQ_OPTION_ACTION_PARENT, MultipleMode, getSelectAllState, kbqQueryListFrom, KbqLocaleOverridesDirective, KBQ_SELECT_LOCALE_CONFIGURATION, kbqOptionalNumberAttribute, kbqSelectAllHandlerTransform, resolveMultipleMode, FocusKeyManager, kbqLeaveTabOrderOnTabOut, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN, toggleSelectAll, getKbqSelectNonArrayValueError, KbqPseudoCheckboxModule } from '@koobiq/components/core';
-import { take, map, delay } from 'rxjs/operators';
+import { take, map, delay, filter } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { signal, inject, TemplateRef, input, Directive, ViewContainerRef, IterableDiffers, ChangeDetectorRef, viewChild, contentChildren, DestroyRef, effect, untracked, isDevMode, ElementRef, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, EnvironmentInjector, contentChild, linkedSignal, output, EventEmitter, afterNextRender, Renderer2, forwardRef, Injector, QueryList, NgModule } from '@angular/core';
+import { signal, inject, TemplateRef, input, Directive, ViewContainerRef, IterableDiffers, ChangeDetectorRef, viewChild, contentChildren, DestroyRef, effect, untracked, isDevMode, ElementRef, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, EnvironmentInjector, NgZone, Renderer2, contentChild, linkedSignal, output, EventEmitter, afterNextRender, forwardRef, Injector, QueryList, NgModule } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -21,39 +21,53 @@ import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 /** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
 class BaseTreeControl {
     constructor() {
-        /** A selection model with multi-selection to track expansion status. */
+        /** A selection model with multi-selection to track expansion status: it holds the key of every expanded node. */
         this.expansionModel = new SelectionModel(true);
         this.filterModel = new SelectionModel(true);
+        /**
+         * Stream with the filter query or result. Published for backward compatibility.
+         *
+         * @deprecated Use `filterQuery` for the query string and `filterModel` for the filter state. Will be removed in 22.0.0.
+         */
         this.filterValue = new BehaviorSubject('');
+        /**
+         * The query of the active filter, or `null` when no filter is active. Defaults to `null`.
+         * Set by `FlatTreeControl.applyFilter`; stays `null` on controls without filtering, such as `NestedTreeControl`.
+         */
+        this.filterQuery = null;
+    }
+    /** Whether a filter is active: the filter model holds at least one node, or a query is set. */
+    get hasActiveFilter() {
+        return this.filterModel.selected.length > 0 || this.filterQuery != null;
     }
     /** Toggles one single data node's expanded/collapsed state. */
     toggle(dataNode) {
-        if (this.filterValue.value?.length) {
+        if (this.hasActiveFilter) {
             return;
         }
-        this.expansionModel.toggle(dataNode);
+        this.expansionModel.toggle(this.expansionKey(dataNode));
     }
     /** Expands one single data node. */
     expand(dataNode) {
-        if (this.filterValue.value?.length) {
+        if (this.hasActiveFilter) {
             return;
         }
-        this.expansionModel.select(dataNode);
+        this.expansionModel.select(this.expansionKey(dataNode));
     }
     /** Collapses one single data node. */
     collapse(dataNode) {
-        if (this.filterValue.value?.length) {
+        if (this.hasActiveFilter) {
             return;
         }
-        this.expansionModel.deselect(dataNode);
+        this.expansionModel.deselect(this.expansionKey(dataNode));
     }
     /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
     isExpanded(dataNode) {
-        return this.expansionModel.isSelected(dataNode);
+        return this.expansionModel.isSelected(this.expansionKey(dataNode));
     }
     /** Toggles a subtree rooted at `node` recursively. */
     toggleDescendants(dataNode) {
-        if (this.expansionModel.isSelected(dataNode)) {
+        if (this.isExpanded(dataNode)) {
             this.collapseDescendants(dataNode);
         }
         else {
@@ -68,32 +82,39 @@ class BaseTreeControl {
     expandDescendants(dataNode) {
         const toBeProcessed = [dataNode];
         toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.select(...toBeProcessed);
+        this.expansionModel.select(...toBeProcessed.map((node) => this.expansionKey(node)));
     }
     /** Collapses a subtree rooted at given data node recursively. */
     collapseDescendants(dataNode) {
         const toBeProcessed = [dataNode];
         toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.deselect(...toBeProcessed);
+        this.expansionModel.deselect(...toBeProcessed.map((node) => this.expansionKey(node)));
+    }
+    /** The key `expansionModel` holds for a data node. */
+    expansionKey(dataNode) {
+        return this.trackBy ? this.trackBy(dataNode) : dataNode;
     }
 }
 
 const kbqTreeSelectAllValue = 'selectAll';
 /**
  * Default first stage of the filter pipeline: keeps the nodes whose view value matches the query.
+ * An optional `matches` predicate keeps a node matched by anything else, e.g. by another field.
  *
  * @docs-private
  */
 class FilterByViewValue {
-    constructor(control) {
+    constructor(control, matches) {
         this.control = control;
+        this.matches = matches;
     }
     handle(value) {
         const viewValue = value || null;
         this.result = this.control.dataNodes.filter((node) => {
             if (node['value'] === kbqTreeSelectAllValue)
                 return true;
-            return this.control.compareViewValues(this.control.getViewValue(node), viewValue);
+            return (this.control.compareViewValues(this.control.getViewValue(node), viewValue) ||
+                !!this.matches?.(node, viewValue));
         });
         if (this.result.length === 1 && this.result[0]['value'] === kbqTreeSelectAllValue) {
             this.result.pop();
@@ -161,7 +182,9 @@ class FlatTreeControl extends BaseTreeControl {
     /** compareValues will be used to comparing values. */
     compareViewValues = defaultCompareViewValues, 
     /** isDisabled will be used to determine if the node is disabled. */
-    isDisabled = () => false) {
+    isDisabled = () => false, 
+    /** Further options: the `trackBy` the nodes are expanded by. */
+    options) {
         super();
         this.getLevel = getLevel;
         this.isExpandable = isExpandable;
@@ -170,6 +193,11 @@ class FlatTreeControl extends BaseTreeControl {
         this.compareValues = compareValues;
         this.compareViewValues = compareViewValues;
         this.isDisabled = isDisabled;
+        this.expandedItemsBeforeFiltration = [];
+        // Positions in each `dataNodes` array: a tree looks up every rendered row, and `indexOf` would make that
+        // rows × nodes. Keyed weakly by the array, so replacing `dataNodes` releases the old nodes.
+        this.nodeIndexes = new WeakMap();
+        this.trackBy = options?.trackBy;
         this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
     }
     // TODO: nothing in the library uses it; kept as public API at the DS-2196 review. Document or deprecate it.
@@ -186,7 +214,7 @@ class FlatTreeControl extends BaseTreeControl {
      * with correct levels.
      */
     getDescendants(dataNode) {
-        const startIndex = this.dataNodes.indexOf(dataNode);
+        const startIndex = this.indexOfNode(dataNode);
         const results = [];
         // Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
         // The level of descendants of a tree node must be greater than the level of the given
@@ -206,7 +234,7 @@ class FlatTreeControl extends BaseTreeControl {
      * data nodes of the tree.
      */
     expandAll() {
-        this.expansionModel.select(...this.dataNodes);
+        this.expansionModel.select(...this.dataNodes.map((node) => this.expansionKey(node)));
     }
     /**
      * Ancestors of a data node, outermost first.
@@ -220,7 +248,7 @@ class FlatTreeControl extends BaseTreeControl {
      * an existing array; a fresh one is used when omitted.
      */
     getParents(node, result = []) {
-        const startIndex = this.dataNodes?.indexOf(node) ?? -1;
+        const startIndex = this.indexOfNode(node);
         if (startIndex === -1) {
             return result;
         }
@@ -238,33 +266,86 @@ class FlatTreeControl extends BaseTreeControl {
     hasValue(value) {
         return this.dataNodes?.find((node) => this.compareValues(this.getValue(node), value));
     }
-    filterNodes(value = null) {
+    /** Filters nodes by a query and expands the ancestors of every match. An empty string resets the filter. */
+    applyFilter(value = null) {
+        if (value === '') {
+            this.resetFilter();
+            return;
+        }
         this.saveExpansionState();
         let result = [];
         this.filters.forEach((filter, index, filters) => {
             const prevFilter = filters[index - 1] || null;
             result = filter.handle(value, prevFilter);
         });
-        this.filterModel.clear();
-        this.filterModel.select(...result);
         // set current expansion state according to filtered tree
-        this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)));
-        this.updateFilterValue(value || result);
+        this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)).map((node) => this.expansionKey(node)));
+        this.filterQuery = value;
+        if (!this.filterModel.setSelection(...result)) {
+            // CDK does not emit an empty selection diff, but the flat data source must re-render zero-match results.
+            this.filterModel.changed.next({ source: this.filterModel, added: [], removed: [] });
+        }
+        this.updateFilterValue(value);
         Promise.resolve().then(() => this.restoreExpansionState());
     }
+    /** Clears the active filter and restores the expansion state saved before filtering. */
+    resetFilter() {
+        if (this.hasActiveFilter) {
+            Promise.resolve().then(() => this.restoreExpansionState());
+        }
+        this.filterQuery = null;
+        this.filterModel.clear();
+        this.updateFilterValue(null);
+    }
+    /**
+     * Filters nodes by a query and expands the ancestors of every match.
+     *
+     * @deprecated Use `applyFilter` instead. Will be removed in 22.0.0.
+     */
+    filterNodes(value = null) {
+        this.applyFilter(value);
+    }
     updateFilterValue(value) {
         Promise.resolve().then(() => this.filterValue.next(value));
     }
     saveExpansionState() {
-        if (!this.filterValue.value?.length) {
+        if (!this.hasActiveFilter) {
             this.expandedItemsBeforeFiltration = this.expansionModel.selected;
         }
     }
     restoreExpansionState() {
-        if (!this.filterValue.value?.length) {
+        if (!this.hasActiveFilter) {
             this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
         }
     }
+    /**
+     * Position of the node in `dataNodes`, constant-time while the index matches the array. With `trackBy` a node
+     * rebuilt as a new object since is found by its key, as the expansion methods accept it too.
+     */
+    indexOfNode(node) {
+        const { dataNodes, trackBy } = this;
+        if (!dataNodes)
+            return -1;
+        const cached = this.nodeIndexes.get(dataNodes)?.get(node);
+        // Checked against the array: `dataNodes` can be mutated in place.
+        if (cached !== undefined && dataNodes[cached] === node)
+            return cached;
+        const index = dataNodes.indexOf(node);
+        // A node that is not there leaves the index as it is.
+        if (index === -1) {
+            if (!trackBy)
+                return index;
+            const key = trackBy(node);
+            return dataNodes.findIndex((candidate) => trackBy(candidate) === key);
+        }
+        const positions = new Map();
+        dataNodes.forEach((dataNode, position) => {
+            if (!positions.has(dataNode))
+                positions.set(dataNode, position);
+        });
+        this.nodeIndexes.set(dataNodes, positions);
+        return index;
+    }
 }
 
 /** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
@@ -276,9 +357,10 @@ class NestedTreeControl extends BaseTreeControl {
      * `getDescendants` walks the tree with `take(1)` and returns as soon as the recursion unwinds, so
      * an asynchronous source yields an incomplete — usually empty — descendant list.
      */
-    constructor(getChildren) {
+    constructor(getChildren, options) {
         super();
         this.getChildren = getChildren;
+        this.trackBy = options?.trackBy;
     }
     /**
      * Expands all dataNodes in the tree.
@@ -289,7 +371,7 @@ class NestedTreeControl extends BaseTreeControl {
     expandAll() {
         this.expansionModel.clear();
         const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
-        this.expansionModel.select(...allNodes);
+        this.expansionModel.select(...allNodes.map((node) => this.expansionKey(node)));
     }
     /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
     getDescendants(dataNode) {
@@ -398,6 +480,8 @@ class KbqTreeFlattener {
     /**
      * Expand flattened node with current expansion status.
      * The returned list may have different length.
+     *
+     * Reads only `isExpanded` of the tree control, so it takes a control of any key type.
      */
     expandFlattenedNodes(nodes, treeControl) {
         const results = [];
@@ -436,8 +520,10 @@ class KbqTreeFlatDataSource extends DataSource {
     }
     set data(value) {
         this._data.set(value);
-        this.flattenedData.next(this.treeFlattener.flattenNodes(this.data));
-        this.treeControl.dataNodes = this.flattenedData.value;
+        const flattened = this.treeFlattener.flattenNodes(this.data);
+        // Assigned before emitting: the tree renders inside `next`, and its rows look themselves up in `dataNodes`.
+        this.treeControl.dataNodes = flattened;
+        this.flattenedData.next(flattened);
     }
     constructor(treeControl, treeFlattener, initialData = []) {
         super();
@@ -454,9 +540,9 @@ class KbqTreeFlatDataSource extends DataSource {
         }
     }
     connect(collectionViewer) {
-        return merge(collectionViewer.viewChange, this.treeControl.expansionModel.changed.pipe(map((value) => ({ type: KbqTreeDataSourceChangeTypes.Expansion, value }))), this.treeControl.filterValue.pipe(map((value) => ({ type: KbqTreeDataSourceChangeTypes.Filter, value }))), this.flattenedData).pipe(map((changeObj) => {
+        return merge(collectionViewer.viewChange, this.treeControl.expansionModel.changed.pipe(map((value) => ({ type: KbqTreeDataSourceChangeTypes.Expansion, value }))), this.treeControl.filterModel.changed.pipe(map(() => ({ type: KbqTreeDataSourceChangeTypes.Filter, value: this.treeControl.filterModel.selected }))), this.flattenedData).pipe(map((changeObj) => {
             if (changeObj.type === KbqTreeDataSourceChangeTypes.Filter) {
-                if (changeObj.value && changeObj.value.length > 0) {
+                if (this.treeControl.hasActiveFilter) {
                     return this.filterHandler();
                 }
                 else {
@@ -611,6 +697,8 @@ const normalizeTreeState = (parsed) => {
  * ported by hand.
  *
  * `C` narrows the tree control a concrete tree accepts, and so the type its `treeControl` binding is checked against.
+ * The bound leaves out `expansionModel` and `trackBy`, the members typed by the control's key, so that it admits
+ * a control of any key type: the model makes a control invariant in that type.
  */
 class KbqTreeBase {
     /** Controls the expanded state and holds the data nodes of the tree. */
@@ -652,6 +740,8 @@ class KbqTreeBase {
          *
          * Views are reused for nodes the function reports as unchanged, which a data source that rebuilds
          * its node objects on every emission — a flattener among them — otherwise cannot get.
+         *
+         * Defaults to the `trackBy` of the tree control, read when the tree initializes and when the data source changes.
          */
         this.trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
         this.nodeOutletQuery = viewChild(KbqTreeNodeOutlet, ...(ngDevMode ? [{ debugName: "nodeOutletQuery" }] : /* istanbul ignore next */ []));
@@ -763,7 +853,7 @@ class KbqTreeBase {
         // Untracked, as in `clearSavedState()`: called from a consumer's `effect()`, the inputs read on the way would
         // make the effect run again whenever they change.
         untracked(() => {
-            if (!this.persists || this.treeControl.filterValue.value?.length)
+            if (!this.persists || this.treeControl.hasActiveFilter)
                 return;
             this.stateSaving.write(this.expandedValues());
         });
@@ -948,7 +1038,9 @@ class KbqTreeBase {
         // Straight at the model rather than through `expand()`, which is a no-op while a filter is
         // active — restoring must not depend on what the user happens to be searching for.
         if (found.length) {
-            this.stateSaving.applying(() => treeControl.expansionModel.select(...found));
+            const { trackBy } = treeControl;
+            const keys = trackBy ? found.map((node) => trackBy(node)) : found;
+            this.stateSaving.applying(() => treeControl.expansionModel.select(...keys));
         }
     }
     /** The values of the nodes that are currently expanded, plus the ones still waiting to appear. */
@@ -956,7 +1048,11 @@ class KbqTreeBase {
         const treeControl = this.flatTreeControl;
         const expanded = [];
         let skipped = false;
-        for (const node of treeControl.expansionModel.selected) {
+        // With `trackBy` the model holds keys, which have no value: only the current nodes map back to them.
+        const expandedNodes = treeControl.trackBy
+            ? (treeControl.dataNodes ?? []).filter((node) => treeControl.isExpanded(node))
+            : treeControl.expansionModel.selected;
+        for (const node of expandedNodes) {
             const value = treeControl.getValue(node);
             if (typeof value === 'string') {
                 expanded.push(value);
@@ -1039,7 +1135,10 @@ class KbqTreeBase {
         }
     }
     createDataDiffer() {
-        return this.differs.find([]).create(this.trackBy());
+        // The bound of `C` leaves `trackBy` out; the key type is the control's own, so it is read as `unknown` here.
+        const controlTrackBy = this.treeControl?.trackBy;
+        const trackBy = this.trackBy() ?? (controlTrackBy && ((_, node) => controlTrackBy(node)));
+        return this.differs.find([]).create(trackBy);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.25", type: KbqTreeBase, isStandalone: true, inputs: { treeControlInput: { classPropertyName: "treeControlInput", publicName: "treeControl", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, dataSourceInput: { classPropertyName: "dataSourceInput", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "nodeDefs", predicate: KbqTreeNodeDef, isSignal: true }], viewQueries: [{ propertyName: "nodeOutletQuery", first: true, predicate: KbqTreeNodeOutlet, descendants: true, isSignal: true }], ngImport: i0 }); }
@@ -1134,14 +1233,16 @@ class KbqTreeNodeToggleBaseDirective {
          */
         this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
         /** Set while a filter is active: filtering already decides what is expanded. */
-        this.filterDisabled = toSignal(this.tree.treeControl.filterValue.pipe(map((value) => !!value?.length)), { initialValue: false });
+        this.filterDisabled = toSignal(this.tree.treeControl.filterModel.changed.pipe(map(() => this.tree.treeControl.hasActiveFilter)), { initialValue: false });
         this.disabledState = computed(() => this.disabledInput() || this.filterDisabled(), ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
     }
     get disabled() {
         return this.disabledState();
     }
     get iconState() {
-        return this.tree.treeControl.isExpanded(this.node());
+        // The node `toggle()` acts on when `node` is not bound: an unbound `node` would reach the control's
+        // `trackBy` as `undefined`.
+        return this.tree.treeControl.isExpanded(this.node() ?? this.treeNode.data);
     }
     toggle(event) {
         if (this.disabled)
@@ -1268,9 +1369,9 @@ class KbqTreeOption extends KbqTreeNode {
     get id() {
         return this._id;
     }
+    /** The displayed value used by type-ahead. Falls back to the text of the option. */
     get viewValue() {
-        // TODO: Add input property alternative for node envs.
-        return (this.getHostElement().textContent || '').trim();
+        return this.viewValueInput() || (this.getHostElement().textContent || '').trim();
     }
     get hasFocus() {
         return this.focused();
@@ -1332,6 +1433,8 @@ class KbqTreeOption extends KbqTreeNode {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.environmentInjector = inject(EnvironmentInjector);
         this.destroyRef = inject(DestroyRef);
+        this.ngZone = inject(NgZone);
+        this.renderer = inject(Renderer2);
         this.focusEvents = new Subject();
         this.blurEvents = new Subject();
         /** Emits when the option takes focus. */
@@ -1348,6 +1451,8 @@ class KbqTreeOption extends KbqTreeNode {
         this.dropdownTriggerQuery = contentChild(KbqDropdownTrigger, ...(ngDevMode ? [{ debugName: "dropdownTriggerQuery" }] : /* istanbul ignore next */ []));
         this.checkboxThirdState = input(false, ...(ngDevMode ? [{ debugName: "checkboxThirdState" }] : /* istanbul ignore next */ []));
         /** @docs-private */
+        this.viewValueInput = input(undefined, { ...(ngDevMode ? { debugName: "viewValueInput" } : /* istanbul ignore next */ {}), alias: 'viewValue' });
+        /** @docs-private */
         this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
             transform: booleanAttribute });
         /**
@@ -1396,6 +1501,9 @@ class KbqTreeOption extends KbqTreeNode {
         this.selectedState = signal(false, ...(ngDevMode ? [{ debugName: "selectedState" }] : /* istanbul ignore next */ []));
         this._id = `kbq-tree-option-${uniqueIdCounter++}`;
         this.focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        // Raised from reporting a focus until `hasFocus` is: `kbqFocusAndReveal` fires `focusin` synchronously, and its
+        // listener calls back into `focus()` while `hasFocus` is still false.
+        this.focusReported = false;
         this.checkbox = signal('unchecked', ...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
         this.updateCheckboxState = () => {
             if (this.selectAllRow())
@@ -1404,6 +1512,16 @@ class KbqTreeOption extends KbqTreeNode {
             this.updateParentsCheckboxState(this.data);
         };
         this.tree = tree;
+        // Not a host listener: one would check the views on every row the pointer crosses, and only a tree in a select
+        // reacts to it.
+        const unlisten = this.ngZone.runOutsideAngular(() => this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => this.onMouseenter()));
+        this.destroyRef.onDestroy(unlisten);
+    }
+    ngOnInit() {
+        // Selected from its first check: the tree's sweep reaches a new row a macrotask later, and a row it marked
+        // would render unselected first and then report a selection nobody made.
+        if (!this.selectAllRow())
+            this.selectedState.set(!!this.tree.selectionModel?.isSelected(this.data));
     }
     ngDoCheck() {
         // Asked once per check, for a predicate reading plain state; a set to an equal value does nothing.
@@ -1497,11 +1615,16 @@ class KbqTreeOption extends KbqTreeNode {
                 return;
             // With the pointer already on this node, revealing it would shift the tree out from under it.
             kbqFocusAndReveal(this.elementRef.nativeElement, focusOrigin === 'mouse');
-            if (!this.hasFocus) {
-                this.focusEvents.next({ option: this });
+            if (!this.hasFocus && !this.focusReported) {
+                const event = { option: this };
+                this.focusReported = true;
+                this.focusEvents.next(event);
+                this.tree.reportOptionFocus?.(event);
                 Promise.resolve().then(() => {
+                    this.focusReported = false;
                     this.hasFocus = true;
-                    this.markForCheck();
+                    // The view only: focus changes no checkbox state.
+                    this.changeDetectorRef.markForCheck();
                 });
             }
         });
@@ -1522,7 +1645,9 @@ class KbqTreeOption extends KbqTreeNode {
                 return;
             }
             this.hasFocus = false;
-            this.blurEvents.next({ option: this });
+            const event = { option: this };
+            this.blurEvents.next(event);
+            this.tree.reportOptionBlur?.(event);
         }, 
         // The environment injector, not the option's: an option removed while focused is blurred as its view is
         // destroyed, and the tree still has to hear about it to move focus.
@@ -1552,7 +1677,8 @@ class KbqTreeOption extends KbqTreeNode {
             if (setFocus && !this.hasFocus) {
                 this.focus();
             }
-            this.updateCheckboxState();
+            // Its own state only: an ancestor's reads the selection model, which this leaves as it is.
+            this.syncCheckboxState();
             this.emitSelectionChangeEvent();
         });
     }
@@ -1562,7 +1688,8 @@ class KbqTreeOption extends KbqTreeNode {
                 return;
             }
             this.selectedState.set(false);
-            this.updateCheckboxState();
+            // Its own state only, as in `select`.
+            this.syncCheckboxState();
             this.emitSelectionChangeEvent();
         });
     }
@@ -1594,8 +1721,9 @@ class KbqTreeOption extends KbqTreeNode {
     }
     markForCheck() {
         this.changeDetectorRef.markForCheck();
-        // Its own state only: after a selection, data or mode change the tree calls this on every option.
-        if (this.showCheckbox) {
+        // Its own state only: after a selection, data or mode change the tree calls this on every option. A projected
+        // checkbox shows the state while the tree's own is hidden.
+        if (this.showCheckbox || this.externalPseudoCheckbox) {
             this.syncCheckboxState();
         }
     }
@@ -1603,15 +1731,18 @@ class KbqTreeOption extends KbqTreeNode {
     onMouseenter() {
         if (this.disabled || !this.tree.inSelect)
             return;
-        this.focus('mouse');
+        // Focusing the option it already holds would only run change detection.
+        if (this.hasFocus && _getFocusedElementPierceShadowDom() === this.elementRef.nativeElement)
+            return;
+        this.ngZone.run(() => this.focus('mouse'));
     }
     /** Recomputes the option's own checkbox state, leaving its ancestors as they are. */
     syncCheckboxState() {
         if (this.selectAllRow())
             return;
         if (this.checkboxThirdState() && this.isExpandable) {
-            // One descendant walk, not two: `getDescendants` is a linear scan of the whole data set, and
-            // the roll-up runs this method for every ancestor.
+            // One descendant walk, not two: each walk covers the whole subtree, and the roll-up runs this method for
+            // every ancestor.
             const descendants = this.tree.treeControl.getDescendants(this.data);
             const selectedCount = descendants.filter((child) => this.tree.selectionModel.isSelected(child)).length;
             if (selectedCount === descendants.length) {
@@ -1636,7 +1767,7 @@ class KbqTreeOption extends KbqTreeNode {
         return { disabled: this.disabled, expanded: branch ? this.isExpanded : null };
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: { classPropertyName: "checkboxThirdState", publicName: "checkboxThirdState", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, showCheckboxInput: { classPropertyName: "showCheckboxInput", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "treeitem" }, listeners: { "focusin": "focus()", "mouseenter": "onMouseenter()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-tree-option_multiple": "tree.multiple", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "checkedDisabled", "class.kbq-action-button-focused": "actionButton()?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.aria-disabled": "checkedDisabled || null", "attr.aria-expanded": "ariaExpanded", "attr.aria-checked": "ariaChecked", "attr.aria-selected": "ariaSelected" }, classAttribute: "kbq-tree-option" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTreeOption, isStandalone: true, selector: "kbq-tree-option", inputs: { checkboxThirdState: { classPropertyName: "checkboxThirdState", publicName: "checkboxThirdState", isSignal: true, isRequired: false, transformFunction: null }, viewValueInput: { classPropertyName: "viewValueInput", publicName: "viewValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectAllRow: { classPropertyName: "selectAllRow", publicName: "selectAllRow", isSignal: true, isRequired: false, transformFunction: null }, showCheckboxInput: { classPropertyName: "showCheckboxInput", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "treeitem" }, listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-tree-option_multiple": "tree.multiple", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "checkedDisabled", "class.kbq-action-button-focused": "actionButton()?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.aria-disabled": "checkedDisabled || null", "attr.aria-expanded": "ariaExpanded", "attr.aria-checked": "ariaChecked", "attr.aria-selected": "ariaSelected" }, classAttribute: "kbq-tree-option" }, providers: [
             { provide: KbqTreeNode, useExisting: KbqTreeOption },
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
             { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
@@ -1669,12 +1800,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[attr.aria-checked]': 'ariaChecked',
                         '[attr.aria-selected]': 'ariaSelected',
                         '(focusin)': 'focus()',
-                        '(mouseenter)': 'onMouseenter()',
                         '(blur)': 'blur()',
                         '(click)': 'selectViaInteraction($event)',
                         '(keydown)': 'onKeydown($event)'
                     }, exportAs: 'kbqTreeOption', template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n@if (externalPseudoCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\" />\n} @else if (showCheckbox) {\n    <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"checkboxState\" />\n}\n\n<ng-content select=\"kbq-checkbox\" />\n\n<ng-content select=\"[kbq-icon]\" />\n\n<ng-content select=\"kbq-progress-spinner\" />\n\n<span #kbqTitleContainer class=\"kbq-option-text\">\n    <ng-content />\n</span>\n\n@if (actionButton()) {\n    <kbq-action-container>\n        <ng-content select=\"kbq-option-action\" />\n    </kbq-action-container>\n}\n", styles: ["@charset \"UTF-8\";.kbq-group{display:flex;flex-direction:row}.kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-inline-start:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-start-end-radius:0;border-end-end-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-end-start-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0;border-start-end-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){corner-shape:squircle;border-start-end-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:var(--kbq-size-border-radius)}@supports (corner-shape: squircle){.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){corner-shape:squircle;border-end-start-radius:clamp(var(--kbq-size-border-radius) * 1.85,var(--kbq-size-border-radius) * 2.3 - 3.6px,var(--kbq-size-border-radius) * 2)}}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child) .kbq-form-field__container{border-end-start-radius:0;border-end-end-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child) .kbq-form-field__container{border-start-start-radius:0;border-start-end-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child) .kbq-form-field__container{border-radius:0}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option{-webkit-user-select:none;user-select:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-action-container,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-action-container{display:flex}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-action-container{display:flex}.kbq-tree-option{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;overflow-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width);border-style:solid;border-color:transparent;border-radius:var(--kbq-tree-option-border-radius)}@supports (corner-shape: squircle){.kbq-tree-option{corner-shape:squircle;border-radius:clamp(var(--kbq-tree-option-border-radius) * 1.85,var(--kbq-tree-option-border-radius) * 2.3 - 3.6px,var(--kbq-tree-option-border-radius) * 2)}}.kbq-tree-option{padding-top:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));padding-right:calc(var(--kbq-tree-size-container-padding-right) - var(--kbq-tree-size-container-focus-outline-width));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical) - var(--kbq-tree-size-container-focus-outline-width));gap:var(--kbq-tree-size-container-content-gap-horizontal)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option .kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-tree-option:has(.kbq-option-caption)>[kbq-tree-node-toggle],.kbq-tree-option:has(.kbq-option-caption)>[kbqTreeNodeToggle],.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle,.kbq-tree-option:has(.kbq-option-caption)>.kbq-pseudo-checkbox,.kbq-tree-option:has(.kbq-option-caption)>kbq-checkbox,.kbq-tree-option:has(.kbq-option-caption)>[kbq-icon],.kbq-tree-option:has(.kbq-option-caption)>kbq-progress-spinner{align-self:flex-start;margin-top:var(--kbq-size-3xs)}.kbq-tree-option:has(.kbq-option-caption)>.kbq-tree-node-toggle{height:var(--kbq-typography-text-normal-line-height);margin-top:0}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused):has(+:is(.kbq-checked,.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-tree-option:is(.kbq-checked,.kbq-selected,.kbq-focused)+:is(.kbq-checked,.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { titleContainer: [{ type: i0.ViewChild, args: ['kbqTitleContainer', { isSignal: true }] }], toggleElementDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleDirective), { isSignal: true }] }], toggleElementComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleComponent), { isSignal: true }] }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], dropdownTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownTrigger), { isSignal: true }] }], checkboxThirdState: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxThirdState", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], showCheckboxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { titleContainer: [{ type: i0.ViewChild, args: ['kbqTitleContainer', { isSignal: true }] }], toggleElementDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleDirective), { isSignal: true }] }], toggleElementComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTreeNodeToggleComponent), { isSignal: true }] }], pseudoCheckbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqPseudoCheckbox), { isSignal: true }] }], actionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqOptionActionComponent), { isSignal: true }] }], tooltipTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTooltipTrigger), { isSignal: true }] }], dropdownTriggerQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqDropdownTrigger), { isSignal: true }] }], checkboxThirdState: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxThirdState", required: false }] }], viewValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewValue", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectAllRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllRow", required: false }] }], showCheckboxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
 
 /** Regex used to split a string on its CSS units. */
 const cssUnitPattern = /([A-Za-z%]+)$/;
@@ -1861,11 +1991,13 @@ class KbqTreeSelection extends KbqTreeBase {
     set autoSelect(value) {
         this.autoSelectState.set(coerceBooleanProperty(value));
     }
+    /** Emits when an option of the tree takes focus. */
     get optionFocusChanges() {
-        return merge(...this.renderedOptions.map((option) => option.onFocus));
+        return this.optionFocusEvents.asObservable();
     }
+    /** Emits when an option of the tree loses focus. */
     get optionBlurChanges() {
-        return merge(...this.renderedOptions.map((option) => option.onBlur));
+        return this.optionBlurEvents.asObservable();
     }
     /**
      * Selection mode of the tree.
@@ -1965,16 +2097,16 @@ class KbqTreeSelection extends KbqTreeBase {
         if (!this.treeControl) {
             return [];
         }
-        const nonSelectableDataNodes = this.renderedOptions
+        const nonSelectableDataNodes = new Set(this.renderedOptions
             .filter((option) => option.disabled || !option.selectable())
-            .map((option) => option.data);
-        const candidates = this.treeControl.filterValue.value?.length
+            .map((option) => option.data));
+        const candidates = this.treeControl.hasActiveFilter
             ? this.renderedOptions.map((option) => option.data)
             : (this.treeControl.dataNodes ?? []);
-        // The `includes` check comes first on purpose: the "select all" row is itself a non-selectable
+        // The `has` check comes first on purpose: the "select all" row is itself a non-selectable
         // rendered option with no `data`, and `isDisabled` belongs to the consumer — it must never be
         // handed a node their data source has never seen.
-        return candidates.filter((node) => !nonSelectableDataNodes.includes(node) && !this.treeControl.isDisabled(node));
+        return candidates.filter((node) => !nonSelectableDataNodes.has(node) && !this.treeControl.isDisabled(node));
     }
     /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
     get selectAllAdapter() {
@@ -2084,6 +2216,9 @@ class KbqTreeSelection extends KbqTreeBase {
             transform: booleanAttribute });
         /** `undefined` while the value is derived from the mode. Written by `KbqTreeSelect` as well. */
         this.autoSelectState = linkedSignal(() => this.autoSelectInput(), ...(ngDevMode ? [{ debugName: "autoSelectState" }] : /* istanbul ignore next */ []));
+        // Options report here, so a subscriber also hears the rows rendered after it subscribed.
+        this.optionFocusEvents = new Subject();
+        this.optionBlurEvents = new Subject();
         /** @docs-private */
         this.multipleInput = input(undefined, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
         /**
@@ -2117,6 +2252,9 @@ class KbqTreeSelection extends KbqTreeBase {
             transform: kbqOptionalNumberAttribute });
         this.tabIndexState = signal(0, ...(ngDevMode ? [{ debugName: "tabIndexState" }] : /* istanbul ignore next */ []));
         this.selectionModelSubscription = null;
+        // A selection change asks for a sweep here, not through `renderedOptions.changes`: the key manager and an
+        // embedding select listen to that, and no row changed.
+        this.selectionSweeps = new Subject();
         /** Whether a value report is queued for the end of the current tick. Cleared by `writeValue` to cancel it. */
         this.pendingValueReport = false;
         /** Backs {@link syncingSelection}: a change of the selection made by code is no change to report back. */
@@ -2153,18 +2291,29 @@ class KbqTreeSelection extends KbqTreeBase {
             if (selectAllOption) {
                 orderedOptions.push(selectAllOption);
             }
+            // Indexed once per render, as a search per node is quadratic in the rows. The first option wins in both maps.
+            const optionsByNode = new Map();
+            const optionsByValue = new Map();
+            this.unorderedOptions.forEach((option) => {
+                if (!optionsByNode.has(option.data))
+                    optionsByNode.set(option.data, option);
+                if (!optionsByValue.has(option.value))
+                    optionsByValue.set(option.value, option);
+            });
             this.sortedNodes.forEach((node) => {
                 // By node first: nodes do not have to carry distinct values, and a value match would hand every node with
                 // the same value the first option holding it.
-                const found = this.unorderedOptions.find((option) => option.data === node) ??
-                    this.unorderedOptions.find((option) => option.value === this.treeControl.getValue(node));
+                const found = optionsByNode.get(node) ?? optionsByValue.get(this.treeControl.getValue(node));
                 if (found) {
                     orderedOptions.push(found);
                 }
             });
             this.renderedOptions.reset(orderedOptions);
             this.renderedOptions.notifyOnChanges();
-            this.updateScrollSize();
+            // The list above is for the server too: an embedding `KbqTreeSelect` reads it for the tags it renders.
+            if (this.platform.isBrowser) {
+                this.updateScrollSize();
+            }
         };
         this.destroyRef.onDestroy(() => (this.destroyed = true));
         // Single selection until the `multiple` input says otherwise. A model has to exist this early
@@ -2330,18 +2479,14 @@ class KbqTreeSelection extends KbqTreeBase {
             if (!this.writingValue) {
                 this.reportValue();
             }
-            this.renderedOptions.notifyOnChanges();
+            this.selectionSweeps.next();
             // The "select all" row renders the selection state.
             this.changeDetectorRef.markForCheck();
         });
     }
     ngAfterContentInit() {
         super.ngAfterContentInit();
-        if (this.platform.isBrowser) {
-            this.unorderedOptions.changes
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(this.updateRenderedOptions);
-        }
+        this.unorderedOptions.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.updateRenderedOptions);
         this.keyManager = new FocusKeyManager(this.renderedOptions)
             .withVerticalOrientation(true)
             .withHorizontalOrientation(null);
@@ -2360,16 +2505,20 @@ class KbqTreeSelection extends KbqTreeBase {
         });
         kbqLeaveTabOrderOnTabOut(this.keyManager.tabOut, this.elementRef.nativeElement, () => this.tabIndex, this.destroyRef);
         this.bindSelectionModel();
-        this.renderedOptions.changes
-            .pipe(delay(0, this.scheduler), takeUntilDestroyed(this.destroyRef))
-            .subscribe((options) => {
-            this.resetOptions();
+        this.listenToOptionsFocus();
+        // A render and the selection changes of one task each notify, each with its own timer: the first to fire sweeps
+        // for all of them and the rest are dropped. `auditTime` would tie the later ones to the first one's timer.
+        let sweeps = 0;
+        merge(this.renderedOptions.changes, this.selectionSweeps)
+            .pipe(map(() => sweeps), delay(0, this.scheduler), filter((sweepsWhenNotified) => sweepsWhenNotified === sweeps), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            sweeps++;
             // Check to see if we need to update our tab index
             this.updateTabIndex();
             this.syncSelectionModelToDataNodes();
-            const selectedValues = this.multiple ? this.getSelectedValues() : [this.getSelectedValues()];
-            options.forEach((option) => {
-                if (selectedValues.includes(option.value)) {
+            this.renderedOptions.forEach((option) => {
+                // By node rather than by value: rows may share a value.
+                if (this.selectionModel.isSelected(option.data)) {
                     option.select(false);
                 }
                 else {
@@ -2410,7 +2559,8 @@ class KbqTreeSelection extends KbqTreeBase {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.dropSubscriptions();
+        this.optionFocusEvents.complete();
+        this.optionBlurEvents.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
     }
     focus($event) {
@@ -2576,6 +2726,14 @@ class KbqTreeSelection extends KbqTreeBase {
         }
     }
     /** @docs-private */
+    reportOptionFocus(event) {
+        this.optionFocusEvents.next(event);
+    }
+    /** @docs-private */
+    reportOptionBlur(event) {
+        this.optionBlurEvents.next(event);
+    }
+    /** @docs-private */
     setSelectedOptionsByClick(option, shiftKey, ctrlKey) {
         if (option.disabled || !option.selectable()) {
             return;
@@ -2607,7 +2765,8 @@ class KbqTreeSelection extends KbqTreeBase {
         const options = this.renderedOptions.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
         let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
-        const selectedOptionState = options[fromIndex]?.selected;
+        // Asked of the model: an option's own state lags it until the next sweep.
+        const selectedOptionState = this.selectionModel.isSelected(options[fromIndex]?.data);
         if (toIndex === fromIndex || fromIndex === -1) {
             if (options[toIndex]?.selectable()) {
                 options[toIndex].toggle();
@@ -2617,15 +2776,21 @@ class KbqTreeSelection extends KbqTreeBase {
         if (fromIndex > toIndex) {
             [fromIndex, toIndex] = [toIndex, fromIndex];
         }
-        options
+        const nodes = options
             .slice(fromIndex, toIndex + 1)
             .filter((item) => !item.disabled && item.selectable())
-            .forEach((renderedOption) => {
-            if (!selectedOptionState && this.noUnselectLast && this.selectionModel.selected.length === 1) {
-                return;
-            }
-            renderedOption.setSelected(selectedOptionState);
-        });
+            .map((item) => item.data);
+        // One write for the range, so the selection changes once rather than once per row.
+        if (selectedOptionState) {
+            this.selectionModel.select(...nodes);
+            return;
+        }
+        const selected = nodes.filter((node) => this.selectionModel.isSelected(node));
+        // With `noUnselectLast` the last selected node stays, the range giving up its own in order until then.
+        const released = this.noUnselectLast
+            ? Math.max(0, Math.min(selected.length, this.selectionModel.selected.length - 1))
+            : selected.length;
+        this.selectionModel.deselect(...selected.slice(0, released));
     }
     /** @docs-private */
     toggleFocusedOption() {
@@ -2651,12 +2816,16 @@ class KbqTreeSelection extends KbqTreeBase {
         const changed = this.applyNodeChanges(data, dataDiffer, viewContainer, parentData);
         this.sortedNodes = this.getSortedNodes(viewContainer);
         this.changeDetectorRef.detectChanges();
+        // The options query lists the options in the order their views were created, not in the order of the rows, so
+        // rows that only moved (reused through `trackBy`) never make it emit.
+        if (changed && this.renderedOptionsOutOfOrder())
+            this.updateRenderedOptions();
         this.scheduleCheckboxSync(false);
         // The "select all" row is rendered ahead of what its state reads: new rows bind their inputs after it and join
-        // `renderedOptions` only once bound, and `KbqTreeFlatDataSource` assigns `dataNodes` after it emits. Nothing
-        // else in the tree reads that state but the checkbox sync above, so a tree without the row is done in this one
-        // pass. Marked for check, which reaches the views above too: a template reading `allOptionsSelected` by
-        // reference reads the same state.
+        // `renderedOptions` only once bound, and a consumer's data source can assign `dataNodes` after it emits.
+        // Nothing else in the tree reads that state but the checkbox sync above, so a tree without the row is done in
+        // this one pass. Marked for check, which reaches the views above too: a template reading `allOptionsSelected`
+        // by reference reads the same state.
         if (!this.showSelectAll)
             return;
         const dataNodes = this.treeControl.dataNodes;
@@ -2668,7 +2837,7 @@ class KbqTreeSelection extends KbqTreeBase {
     /**
      * Recomputes every option's checkbox state where no selection change follows to do it: after `dataNodes` is
      * replaced, which moves the descendants a branch counts, and once a hidden checkbox appears. A microtask later, as
-     * a flat data source assigns `dataNodes` only after it emits.
+     * a consumer's data source can assign `dataNodes` after it emits.
      */
     scheduleCheckboxSync(force) {
         Promise.resolve().then(() => {
@@ -2711,11 +2880,23 @@ class KbqTreeSelection extends KbqTreeBase {
             // Selection is applied at the data-node level (incl. collapsed/non-rendered nodes unless a filter
             // is active), while the emitted events carry the selectable rendered options.
             const selectableOptions = this.renderedOptions.filter((option) => !option.disabled && option.selectable());
+            // A multiple selection takes the nodes in one write, so it changes once rather than once per node. A single
+            // one cannot hold them, and keeps the node-by-node writes it always had.
+            const batched = this.selectionModel.isMultipleSelection();
+            const adapter = this.selectAllAdapter;
             // `toggleSelectAll` returns the data nodes whose selection actually flipped — the source of
             // truth, unlike the cached `option.selected` which lags until change detection.
-            const changed = toggleSelectAll(this.selectAllAdapter, {
+            const changed = toggleSelectAll(batched ? { ...adapter, setSelected: () => { } } : adapter, {
                 allowDeselect: allowDeselect ?? (this.selectAll || this.selectAllToggle())
             });
+            if (batched && changed.length) {
+                if (this.selectionModel.isSelected(changed[0])) {
+                    this.selectionModel.deselect(...changed);
+                }
+                else {
+                    this.selectionModel.select(...changed);
+                }
+            }
             const changedData = new Set(changed);
             const changedOptions = selectableOptions.filter((option) => changedData.has(option.data));
             // Skip `selectionChange` on a no-op (e.g. Ctrl+A while everything is already selected and
@@ -2924,6 +3105,17 @@ class KbqTreeSelection extends KbqTreeBase {
     updateTabIndex() {
         this.tabIndexState.set(this.userTabIndex || (this.renderedOptions.length === 0 ? -1 : 0));
     }
+    /**
+     * Whether the same options as before now stand for the rows in another order. A different count means rows were
+     * added or removed, which the options query reports itself.
+     */
+    renderedOptionsOutOfOrder() {
+        const options = this.renderedOptions.toArray();
+        const offset = this.selectAllOption() ? 1 : 0;
+        if (options.length - offset !== this.sortedNodes.length)
+            return false;
+        return this.sortedNodes.some((node, index) => options[index + offset].data !== node);
+    }
     getSortedNodes(viewContainer) {
         const array = [];
         for (let i = 0; i < viewContainer.length; i++) {
@@ -2932,22 +3124,9 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         return array;
     }
-    resetOptions() {
-        this.dropSubscriptions();
-        this.listenToOptionsFocus();
-    }
-    dropSubscriptions() {
-        if (this.optionFocusSubscription) {
-            this.optionFocusSubscription.unsubscribe();
-            this.optionFocusSubscription = null;
-        }
-        if (this.optionBlurSubscription) {
-            this.optionBlurSubscription.unsubscribe();
-            this.optionBlurSubscription = null;
-        }
-    }
     listenToOptionsFocus() {
-        this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
+        // Both streams complete with the tree.
+        this.optionFocusEvents.subscribe((event) => {
             const index = this.renderedOptions.toArray().indexOf(event.option);
             this.renderedOptions.filter((option) => option.hasFocus).forEach((option) => (option.hasFocus = false));
             if (this.isValidIndex(index)) {
@@ -2959,7 +3138,7 @@ class KbqTreeSelection extends KbqTreeBase {
         // set, because `KbqTreeOption.hasFocus` is cleared synchronously but only raised a microtask later, so
         // `hasFocusedOption()` reports nothing focused for the whole move. Only a blur of the option the
         // key manager still points at is the focus actually leaving the options.
-        this.optionBlurSubscription = this.optionBlurChanges.subscribe(({ option }) => {
+        this.optionBlurEvents.subscribe(({ option }) => {
             if (option === this.keyManager.activeItem && !this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
                 this.keyManager.setActiveItem(-1);
             }
@@ -3018,7 +3197,7 @@ class KbqTreeSelection extends KbqTreeBase {
             </kbq-tree-option>
         }
         <ng-container kbqTreeNodeOutlet />
-    `, isInline: true, styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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-option-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)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }, { kind: "component", type: KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "directive", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-tree-selection{display:block}.kbq-tree-selection:focus{outline:none}.kbq-tree-option{--kbq-option-background: var(--kbq-tree-default-container-background);background:var(--kbq-tree-default-container-background)}.kbq-tree-option .kbq-option-text{color:var(--kbq-tree-default-text-color)}.kbq-tree-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-default-action-button-color)}.kbq-tree-option .kbq-option-caption{color:var(--kbq-tree-default-caption-color)}.kbq-tree-option:not(.kbq-disabled):hover,.kbq-tree-option:not(.kbq-disabled).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused{--kbq-option-background: var(--kbq-tree-states-hover-container-background);background:var(--kbq-tree-states-hover-container-background)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-text{color:var(--kbq-tree-states-hover-text-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-caption{color:var(--kbq-tree-states-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled):active,.kbq-tree-option:not(.kbq-disabled).kbq-active{--kbq-option-background: var(--kbq-tree-states-active-container-background);background:var(--kbq-tree-states-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected{--kbq-option-background: var(--kbq-tree-states-selected-container-background);background:var(--kbq-tree-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-text{color:var(--kbq-tree-states-selected-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected .kbq-option-caption{color:var(--kbq-tree-states-selected-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-states-selected-hover-container-background);background:var(--kbq-tree-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-text,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-text{color:var(--kbq-tree-states-selected-hover-text-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-action .kbq-icon.kbq-empty,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-selected-hover-action-button-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:hover .kbq-option-caption,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-hovered .kbq-option-caption{color:var(--kbq-tree-states-selected-hover-caption-color)}.kbq-tree-option:not(.kbq-disabled).kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);background:var(--kbq-tree-states-selected-active-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected),.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected{--kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);background:var(--kbq-tree-multiple-states-selected-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):hover,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-hovered,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:hover,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-hovered{--kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);background:var(--kbq-tree-multiple-states-selected-hover-container-background)}.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected):active,.kbq-tree-option:not(.kbq-disabled).kbq-checked:not(.kbq-selected).kbq-active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected:active,.kbq-tree-option:not(.kbq-disabled).kbq-tree-option_multiple.kbq-selected.kbq-active{--kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);background:var(--kbq-tree-multiple-states-selected-active-container-background)}.kbq-tree-option.kbq-disabled{--kbq-option-background: var(--kbq-tree-states-disabled-container-background);background:var(--kbq-tree-states-disabled-container-background)}.kbq-tree-option.kbq-disabled .kbq-option-text{color:var(--kbq-tree-states-disabled-text-color)}.kbq-tree-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-tree-states-disabled-action-button-color)}.kbq-tree-option.kbq-disabled .kbq-option-caption{color:var(--kbq-tree-states-disabled-caption-color)}.kbq-tree-option.kbq-disabled .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon){color:var(--kbq-states-icon-disabled)}.kbq-tree-selection.cdk-keyboard-focused .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused){border-color:var(--kbq-tree-states-focused-focus-outline-color)}.kbq-tree-option{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-option-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)}\n", ".kbq-tree,.kbq-tree-selection{--kbq-tree-size-indent-level: var(--kbq-size-xxl);--kbq-tree-size-container-padding-right: var(--kbq-size-s);--kbq-tree-size-container-padding-vertical: var(--kbq-size-xxs);--kbq-tree-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);--kbq-tree-option-border-radius: var(--kbq-size-border-radius);--kbq-tree-default-container-background: transparent;--kbq-tree-default-text-color: var(--kbq-foreground-contrast);--kbq-tree-default-icon-color: var(--kbq-icon-contrast);--kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-tree-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);--kbq-tree-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-tree-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-tree-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-tree-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);--kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-tree-states-disabled-container-background: transparent;--kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);--kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }, { kind: "component", type: KbqTreeOption, selector: "kbq-tree-option", inputs: ["checkboxThirdState", "viewValue", "disabled", "selectable", "selectAllRow", "showCheckbox"], outputs: ["selectionChange", "onSelectionChange"], exportAs: ["kbqTreeOption"] }, { kind: "directive", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: ["kbqTreeNodePaddingIndent"], exportAs: ["kbqTreeNodePadding"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTreeSelection, decorators: [{
             type: Component,