@koobiq/components 21.0.0 → 21.0.1

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,7 +21,7 @@ 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);
         this.filterValue = new BehaviorSubject('');
@@ -31,29 +31,29 @@ class BaseTreeControl {
         if (this.filterValue.value?.length) {
             return;
         }
-        this.expansionModel.toggle(dataNode);
+        this.expansionModel.toggle(this.expansionKey(dataNode));
     }
     /** Expands one single data node. */
     expand(dataNode) {
         if (this.filterValue.value?.length) {
             return;
         }
-        this.expansionModel.select(dataNode);
+        this.expansionModel.select(this.expansionKey(dataNode));
     }
     /** Collapses one single data node. */
     collapse(dataNode) {
         if (this.filterValue.value?.length) {
             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,13 +68,17 @@ 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;
     }
 }
 
@@ -161,7 +165,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 +176,10 @@ class FlatTreeControl extends BaseTreeControl {
         this.compareValues = compareValues;
         this.compareViewValues = compareViewValues;
         this.isDisabled = isDisabled;
+        // 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 +196,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 +216,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 +230,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;
         }
@@ -248,7 +258,7 @@ class FlatTreeControl extends BaseTreeControl {
         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.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)).map((node) => this.expansionKey(node)));
         this.updateFilterValue(value || result);
         Promise.resolve().then(() => this.restoreExpansionState());
     }
@@ -265,6 +275,34 @@ class FlatTreeControl extends BaseTreeControl {
             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 +314,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 +328,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 +437,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 +477,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();
@@ -611,6 +654,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 +697,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 */ []));
@@ -948,7 +995,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 +1005,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 +1092,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 }); }
@@ -1141,7 +1197,9 @@ class KbqTreeNodeToggleBaseDirective {
         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)
@@ -1332,6 +1390,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. */
@@ -1396,6 +1456,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 +1467,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 +1570,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 +1600,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 +1632,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 +1643,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 +1676,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 +1686,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 +1722,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 }, 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,7 +1755,6 @@ 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)'
@@ -1861,11 +1946,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 +2052,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);
+            .map((option) => option.data));
         const candidates = this.treeControl.filterValue.value?.length
             ? 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 +2171,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 +2207,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,11 +2246,19 @@ 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);
                 }
@@ -2330,7 +2431,7 @@ 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();
         });
@@ -2360,16 +2461,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 +2515,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 +2682,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 +2721,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 +2732,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 +2772,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 +2793,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 +2836,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 +3061,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 +3080,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 +3094,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);
             }