@koobiq/components 17.0.0-rc.9 → 17.0.1

package/fesm2022/koobiq-components-tree.mjs

@@ -1,25 +1,449 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { SelectionModel, DataSource } from '@angular/cdk/collections';
+import { BehaviorSubject, merge, Subject, Observable, of, asyncScheduler } from 'rxjs';
+import * as i2$1 from '@koobiq/components/core';
+import { escapeRegExp, mixinDisabled, KBQ_TITLE_TEXT_REF, KBQ_OPTION_ACTION_PARENT, KbqPseudoCheckbox, KbqOptionActionComponent, MultipleMode, getKbqSelectNonArrayValueError, KbqPseudoCheckboxModule } from '@koobiq/components/core';
+import { take, map, takeUntil, delay } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { Directive, Input, ViewChild, ContentChildren, forwardRef, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, EventEmitter, ContentChild, Output, Optional, QueryList, Attribute, NgModule } from '@angular/core';
-import * as i2$1 from '@koobiq/components/core';
-import { mixinDisabled, KBQ_TITLE_TEXT_REF, KBQ_OPTION_ACTION_PARENT, KbqPseudoCheckbox, KbqOptionActionComponent, escapeRegExp, MultipleMode, getKbqSelectNonArrayValueError, KbqPseudoCheckboxModule } from '@koobiq/components/core';
-import * as i2 from '@koobiq/components/icon';
-import { KbqIconModule } from '@koobiq/components/icon';
-import { BehaviorSubject, Subject, Observable, of, merge, asyncScheduler } from 'rxjs';
-import * as i1$1 from 'rxjs/internal/scheduler/AsyncScheduler';
-import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 import * as i3 from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { TreeSizeIndentLevel } from '@koobiq/design-tokens';
-import { takeUntil, take, delay, map } from 'rxjs/operators';
 import { TAB, hasModifierKey, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN } from '@koobiq/cdk/keycodes';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import * as i2 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i2$2 from '@angular/cdk/clipboard';
-import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import * as i1$1 from 'rxjs/internal/scheduler/AsyncScheduler';
+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. */
+        this.expansionModel = new SelectionModel(true);
+        this.filterModel = new SelectionModel(true);
+        this.filterValue = new BehaviorSubject('');
+    }
+    /** Toggles one single data node's expanded/collapsed state. */
+    toggle(dataNode) {
+        if (this.filterValue.value?.length) {
+            return;
+        }
+        this.expansionModel.toggle(dataNode);
+    }
+    /** Expands one single data node. */
+    expand(dataNode) {
+        if (this.filterValue.value?.length) {
+            return;
+        }
+        this.expansionModel.select(dataNode);
+    }
+    /** Collapses one single data node. */
+    collapse(dataNode) {
+        if (this.filterValue.value?.length) {
+            return;
+        }
+        this.expansionModel.deselect(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);
+    }
+    /** Toggles a subtree rooted at `node` recursively. */
+    toggleDescendants(dataNode) {
+        this.expansionModel.isSelected(dataNode)
+            ? this.collapseDescendants(dataNode)
+            : this.expandDescendants(dataNode);
+    }
+    /** Collapse all dataNodes in the tree. */
+    collapseAll() {
+        this.expansionModel.clear();
+    }
+    /** Expands a subtree rooted at given data node recursively. */
+    expandDescendants(dataNode) {
+        const toBeProcessed = [dataNode];
+        toBeProcessed.push(...this.getDescendants(dataNode));
+        this.expansionModel.select(...toBeProcessed);
+    }
+    /** Collapses a subtree rooted at given data node recursively. */
+    collapseDescendants(dataNode) {
+        const toBeProcessed = [dataNode];
+        toBeProcessed.push(...this.getDescendants(dataNode));
+        this.expansionModel.deselect(...toBeProcessed);
+    }
+}
+
+class FilterByViewValue {
+    constructor(control) {
+        this.control = control;
+    }
+    handle(value) {
+        const viewValue = value || null;
+        this.result = this.control.dataNodes.filter((node) => this.control.compareViewValues(this.control.getViewValue(node), viewValue));
+        return this.result;
+    }
+}
+class FilterParentsForNodes {
+    constructor(control) {
+        this.control = control;
+    }
+    handle(_, prevFilter) {
+        const result = new Set();
+        this.control.dataNodes
+            .filter((node) => prevFilter?.result.includes(node))
+            .forEach((node) => {
+            this.control.getParents(node, []).forEach((parent) => result.add(parent));
+            result.add(node);
+        });
+        this.result = Array.from(result);
+        return this.result;
+    }
+}
+class FilterByValues {
+    constructor(control) {
+        this.control = control;
+        this.values = [];
+        this.setValues = (values) => {
+            this.values = values;
+        };
+    }
+    handle(_, prevFilter) {
+        const found = this.control.dataNodes.filter((node) => this.values.includes(this.control.getValue(node)));
+        this.result = Array.from(new Set([...(prevFilter?.result || []), ...found]));
+        return this.result;
+    }
+    getValues() {
+        return this.values;
+    }
+}
+
+function defaultCompareValues(firstValue, secondValue) {
+    return firstValue === secondValue;
+}
+function defaultCompareViewValues(firstViewValue, secondViewValue) {
+    return RegExp(escapeRegExp(secondViewValue), 'gi').test(firstViewValue);
+}
+/** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
+class FlatTreeControl extends BaseTreeControl {
+    /** Construct with flat tree data node functions getLevel, isExpandable, getValue and getViewValue. */
+    constructor(getLevel, isExpandable, 
+    /** getValue will be used to determine if the tree contains value or not. Used in method hasValue */
+    getValue, 
+    /** getViewValue will be used for filter nodes. Returned value will be first argument in filterNodesFunction */
+    getViewValue, 
+    /** compareValues will be used to comparing values. */
+    compareValues = defaultCompareValues, 
+    /** compareValues will be used to comparing values. */
+    compareViewValues = defaultCompareViewValues, 
+    /** isDisabled will be used to determine if the node is disabled. */
+    isDisabled = () => false) {
+        super();
+        this.getLevel = getLevel;
+        this.isExpandable = isExpandable;
+        this.getValue = getValue;
+        this.getViewValue = getViewValue;
+        this.compareValues = compareValues;
+        this.compareViewValues = compareViewValues;
+        this.isDisabled = isDisabled;
+        this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
+    }
+    getFilters() {
+        return this.filters;
+    }
+    setFilters(...filters) {
+        this.filters = filters;
+    }
+    /**
+     * Gets a list of the data node's subtree of descendent data nodes.
+     *
+     * To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
+     * with correct levels.
+     */
+    getDescendants(dataNode) {
+        const startIndex = this.dataNodes.indexOf(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
+        // tree node.
+        // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
+        // If we reach a node whose level is greater than the level of the tree node, we hit a
+        // sibling of an ancestor.
+        for (let i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
+            results.push(this.dataNodes[i]);
+        }
+        return results;
+    }
+    /**
+     * Expands all data nodes in the tree.
+     *
+     * To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
+     * data nodes of the tree.
+     */
+    expandAll() {
+        this.expansionModel.select(...this.dataNodes);
+    }
+    getParents(node, result) {
+        if (node.parent) {
+            result.unshift(node.parent);
+            return this.getParents(node.parent, result);
+        }
+        else {
+            return result;
+        }
+    }
+    hasValue(value) {
+        return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
+    }
+    filterNodes(value = null) {
+        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);
+        Promise.resolve().then(() => this.restoreExpansionState());
+    }
+    updateFilterValue(value) {
+        Promise.resolve().then(() => this.filterValue.next(value));
+    }
+    saveExpansionState() {
+        if (!this.filterValue.value?.length) {
+            this.expandedItemsBeforeFiltration = this.expansionModel.selected;
+        }
+    }
+    restoreExpansionState() {
+        if (!this.filterValue.value?.length) {
+            this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
+        }
+    }
+}
+
+/** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
+class NestedTreeControl extends BaseTreeControl {
+    /** Construct with nested tree function getChildren. */
+    constructor(getChildren) {
+        super();
+        this.getChildren = getChildren;
+    }
+    /**
+     * Expands all dataNodes in the tree.
+     *
+     * To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
+     * data nodes of the tree.
+     */
+    expandAll() {
+        this.expansionModel.clear();
+        const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
+        this.expansionModel.select(...allNodes);
+    }
+    /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
+    getDescendants(dataNode) {
+        const descendants = [];
+        this._getDescendants(descendants, dataNode);
+        return descendants.splice(1);
+    }
+    /** A helper function to get descendants recursively. */
+    // todo нужно придумать другое название и понять в чем отличие между getDescendants и _getDescendants
+    _getDescendants(descendants, dataNode) {
+        descendants.push(dataNode);
+        this.getChildren(dataNode)
+            .pipe(take(1))
+            .subscribe((children) => {
+            if (children && children.length > 0) {
+                children.forEach((child) => this._getDescendants(descendants, child));
+            }
+        });
+    }
+}
+
+/**
+ * Tree flattener to convert a normal type of node to node with children & level information.
+ * Transform nested nodes of type `T` to flattened nodes of type `F`.
+ *
+ * For example, the input data of type `T` is nested, and contains its children data:
+ *   SomeNode: {
+ *     key: 'Fruits',
+ *     children: [
+ *       NodeOne: {
+ *         key: 'Apple',
+ *       },
+ *       NodeTwo: {
+ *        key: 'Pear',
+ *      }
+ *    ]
+ *  }
+ *  After flattener flatten the tree, the structure will become
+ *  SomeNode: {
+ *    key: 'Fruits',
+ *    expandable: true,
+ *    level: 1
+ *  },
+ *  NodeOne: {
+ *    key: 'Apple',
+ *    expandable: false,
+ *    level: 2
+ *  },
+ *  NodeTwo: {
+ *   key: 'Pear',
+ *   expandable: false,
+ *   level: 2
+ * }
+ * and the output flattened type is `F` with additional information.
+ */
+class KbqTreeFlattener {
+    constructor(transformFunction, getLevel, isExpandable, getChildren) {
+        this.transformFunction = transformFunction;
+        this.getLevel = getLevel;
+        this.isExpandable = isExpandable;
+        this.getChildren = getChildren;
+    }
+    flattenNode(node, level, resultNodes, parent) {
+        const flatNode = this.transformFunction(node, level, parent);
+        resultNodes.push(flatNode);
+        if (this.isExpandable(flatNode)) {
+            const childrenNodes = this.getChildren(node);
+            if (childrenNodes) {
+                if (Array.isArray(childrenNodes)) {
+                    this.flattenChildren(childrenNodes, level, resultNodes, flatNode);
+                }
+                else {
+                    childrenNodes.pipe(take(1)).subscribe((children) => {
+                        this.flattenChildren(children, level, resultNodes, flatNode);
+                    });
+                }
+            }
+        }
+        return resultNodes;
+    }
+    flattenChildren(children, level, resultNodes, parent) {
+        children.forEach((child) => {
+            this.flattenNode(child, level + 1, resultNodes, parent);
+        });
+    }
+    /**
+     * Flatten a list of node type T to flattened version of node F.
+     * Please note that type T may be nested, and the length of `structuredData` may be different
+     * from that of returned list `F[]`.
+     */
+    flattenNodes(structuredData) {
+        const resultNodes = [];
+        structuredData.forEach((node) => this.flattenNode(node, 0, resultNodes, null));
+        return resultNodes;
+    }
+    /**
+     * Expand flattened node with current expansion status.
+     * The returned list may have different length.
+     */
+    expandFlattenedNodes(nodes, treeControl) {
+        const results = [];
+        const currentExpand = [];
+        currentExpand[0] = true;
+        nodes.forEach((node) => {
+            let expand = true;
+            for (let i = 0; i <= this.getLevel(node); i++) {
+                expand = expand && currentExpand[i];
+            }
+            if (expand) {
+                results.push(node);
+            }
+            if (this.isExpandable(node)) {
+                currentExpand[this.getLevel(node) + 1] = treeControl.isExpanded(node);
+            }
+        });
+        return results;
+    }
+}
+var KbqTreeDataSourceChangeTypes;
+(function (KbqTreeDataSourceChangeTypes) {
+    KbqTreeDataSourceChangeTypes["Expansion"] = "expansion";
+    KbqTreeDataSourceChangeTypes["Filter"] = "filter";
+})(KbqTreeDataSourceChangeTypes || (KbqTreeDataSourceChangeTypes = {}));
+/**
+ * Data source for flat tree.
+ * The data source need to handle expansion/collapsion of the tree node and change the data feed
+ * to `KbqTree`.
+ * The nested tree nodes of type `T` are flattened through `MсTreeFlattener`, and converted
+ * to type `F` for `KbqTree` to consume.
+ */
+class KbqTreeFlatDataSource extends DataSource {
+    get data() {
+        return this._data.value;
+    }
+    set data(value) {
+        this._data.next(value);
+        this.flattenedData.next(this.treeFlattener.flattenNodes(this.data));
+        this.treeControl.dataNodes = this.flattenedData.value;
+    }
+    constructor(treeControl, treeFlattener, initialData = []) {
+        super();
+        this.treeControl = treeControl;
+        this.treeFlattener = treeFlattener;
+        this.flattenedData = new BehaviorSubject([]);
+        this.expandedData = new BehaviorSubject([]);
+        this.filteredData = new BehaviorSubject([]);
+        this._data = new BehaviorSubject(initialData);
+    }
+    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) => {
+            if (changeObj.type === KbqTreeDataSourceChangeTypes.Filter) {
+                if (changeObj.value && changeObj.value.length > 0) {
+                    return this.filterHandler();
+                }
+                else {
+                    return this.expansionHandler(changeObj.value);
+                }
+            }
+            return this.expansionHandler(changeObj.value);
+        }));
+    }
+    filterHandler() {
+        this.filteredData.next(this.treeControl.filterModel.selected);
+        return this.filteredData.value;
+    }
+    expansionHandler(_change) {
+        const expandedNodes = this.treeFlattener.expandFlattenedNodes(this.flattenedData.value, this.treeControl);
+        this.expandedData.next(expandedNodes);
+        return this.expandedData.value;
+    }
+    disconnect() {
+        // no op
+    }
+}
+
+/**
+ * Data source for nested tree.
+ *
+ * The data source for nested tree doesn't have to consider node flattener, or the way to expand
+ * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
+ */
+class KbqTreeNestedDataSource extends DataSource {
+    constructor() {
+        super(...arguments);
+        this._data = new BehaviorSubject([]);
+    }
+    get data() {
+        return this._data.value;
+    }
+    set data(value) {
+        this._data.next(value);
+    }
+    connect(collectionViewer) {
+        return merge(...[collectionViewer.viewChange, this._data]).pipe(map(() => this.data));
+    }
+    disconnect() {
+        // no op
+    }
+}
 
 /** Context provided to the tree node component. */
 class KbqTreeNodeOutletContext {
@@ -138,7 +562,6 @@ class KbqTreeBase {
         this.nodeOutlet.viewContainer.clear();
         this.onDestroy.next();
         this.onDestroy.complete();
-        // tslint:disable-next-line:no-unbound-method
         if (this._dataSource && typeof this.dataSource.disconnect === 'function') {
             this.dataSource.disconnect(this);
         }
@@ -206,7 +629,6 @@ class KbqTreeBase {
         // Otherwise, use the level of parent node.
         if (this.treeControl.getLevel) {
             context.level = this.treeControl.getLevel(nodeData);
-            /* tslint:disable-next-line:no-typeof-undefined */
         }
         else if (typeof parentData !== 'undefined' && this.levels.has(parentData)) {
             context.level = this.levels.get(parentData) + 1;
@@ -230,7 +652,6 @@ class KbqTreeBase {
         let dataStream;
         // Cannot use `instanceof DataSource` since the data source could be a literal with
         // `connect` function and may not extends DataSource.
-        // tslint:disable-next-line:no-unbound-method
         if (typeof this._dataSource.connect === 'function') {
             dataStream = this._dataSource.connect(this);
         }
@@ -255,7 +676,6 @@ class KbqTreeBase {
      * clearing the node outlet. Otherwise start listening for new data.
      */
     switchDataSource(dataSource) {
-        // tslint:disable-next-line:no-unbound-method
         if (this._dataSource && typeof this._dataSource.disconnect === 'function') {
             this.dataSource.disconnect(this);
         }
@@ -356,8 +776,7 @@ class KbqTreeNodeToggleBaseDirective extends KbqTreeNodeToggleMixinBase {
         this.tree = tree;
         this.treeNode = treeNode;
         this._recursive = false;
-        this.tree.treeControl.filterValue
-            .subscribe((value) => this.disabled = !!value?.length);
+        this.tree.treeControl.filterValue.subscribe((value) => (this.disabled = !!value?.length));
     }
     toggle(event) {
         if (this.disabled) {
@@ -381,11 +800,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             }] } });
 class KbqTreeNodeToggleComponent extends KbqTreeNodeToggleBaseDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.kbq-expanded": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-node-toggle" }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i kbq-icon="mc-angle-down-S_16"></i>`, isInline: true, styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--kbq-tree-size-toggle-padding, );padding-right:var(--kbq-tree-size-toggle-padding, );cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}\n"], dependencies: [{ kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTreeNodeToggleComponent, selector: "kbq-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.kbq-expanded": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-node-toggle" }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `
+        <i kbq-icon="mc-angle-down-S_16"></i>
+    `, isInline: true, styles: [".kbq-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:100%;padding-left:var(--kbq-tree-size-toggle-padding, );padding-right:var(--kbq-tree-size-toggle-padding, );cursor:pointer}.kbq-tree-node-toggle .kbq-icon{transform:rotate(-90deg)}.kbq-tree-node-toggle.kbq-expanded .kbq-icon{transform:rotate(0)}.kbq-tree-node-toggle[disabled]{cursor:default}\n"], dependencies: [{ kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree-node-toggle', exportAs: 'kbqTreeNodeToggle', template: `<i kbq-icon="mc-angle-down-S_16"></i>`, host: {
+            args: [{ selector: 'kbq-tree-node-toggle', exportAs: 'kbqTreeNodeToggle', template: `
+        <i kbq-icon="mc-angle-down-S_16"></i>
+    `, host: {
                         class: 'kbq-tree-node-toggle',
                         '[class.kbq-expanded]': 'iconState',
                         '[attr.disabled]': 'disabled || null',
@@ -502,8 +925,7 @@ class KbqTreeOption extends KbqTreeNode {
         };
     }
     ngAfterContentInit() {
-        Promise.resolve()
-            .then(this.updateCheckboxState);
+        Promise.resolve().then(this.updateCheckboxState);
         this.value = this.tree.treeControl.getValue(this.data);
     }
     descendantsAllSelected() {
@@ -515,11 +937,8 @@ class KbqTreeOption extends KbqTreeNode {
         return descendants.some((child) => this.tree?.selectionModel.isSelected(child));
     }
     updateParentsCheckboxState(node) {
-        this.tree.treeControl
-            .getParents(node, [])
-            .forEach((parent) => {
-            const parentOption = this.tree.unorderedOptions
-                .find((option) => option.data === parent);
+        this.tree.treeControl.getParents(node, []).forEach((parent) => {
+            const parentOption = this.tree.unorderedOptions.find((option) => option.data === parent);
             parentOption?.updateCheckboxState();
         });
     }
@@ -643,7 +1062,7 @@ class KbqTreeOption extends KbqTreeNode {
             { provide: KbqTreeNode, useExisting: KbqTreeOption },
             { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
             { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
-        ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["kbqTitleContainer"], descendants: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <kbq-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [state]=\"checkboxState\"\n            [disabled]=\"disabled\">\n        </kbq-pseudo-checkbox>\n    </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-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-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["kbqTitleContainer"], descendants: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content\n        *ngSwitchCase=\"true\"\n        select=\"kbq-pseudo-checkbox\"\n    />\n\n    <ng-container *ngSwitchCase=\"false\">\n        <kbq-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [disabled]=\"disabled\"\n            [state]=\"checkboxState\"\n        />\n    </ng-container>\n</ng-container>\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\n    #kbqTitleContainer\n    class=\"kbq-option-text\"\n>\n    <ng-content />\n</span>\n\n<ng-content select=\"kbq-option-action\" />\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-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-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeOption, decorators: [{
             type: Component,
@@ -664,7 +1083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         { provide: KbqTreeNode, useExisting: KbqTreeOption },
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
                         { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
-                    ], template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n    <ng-container *ngSwitchCase=\"false\">\n        <kbq-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [state]=\"checkboxState\"\n            [disabled]=\"disabled\">\n        </kbq-pseudo-checkbox>\n    </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-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-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action{display:flex}\n"] }]
+                    ], template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\" />\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n    <ng-content\n        *ngSwitchCase=\"true\"\n        select=\"kbq-pseudo-checkbox\"\n    />\n\n    <ng-container *ngSwitchCase=\"false\">\n        <kbq-pseudo-checkbox\n            *ngIf=\"showCheckbox\"\n            [disabled]=\"disabled\"\n            [state]=\"checkboxState\"\n        />\n    </ng-container>\n</ng-container>\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\n    #kbqTitleContainer\n    class=\"kbq-option-text\"\n>\n    <ng-content />\n</span>\n\n<ng-content select=\"kbq-option-action\" />\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-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-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not(.kbq-disabled){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not(.kbq-disabled):hover .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-focused .kbq-option-action,.kbq-tree-option:not(.kbq-disabled).kbq-action-button-focused .kbq-option-action{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_TREE_OPTION_PARENT_COMPONENT]
@@ -730,8 +1149,7 @@ class KbqTreeNodePadding {
         this.baseLeftPadding = 8;
         this.iconWidth = 24;
         this.destroyed = new Subject();
-        this.dir?.change?.pipe(takeUntil(this.destroyed))
-            .subscribe(() => this.setPadding());
+        this.dir?.change?.pipe(takeUntil(this.destroyed)).subscribe(() => this.setPadding());
     }
     ngAfterViewInit() {
         this.withIcon = this.option.isToggleInDefaultPlace;
@@ -742,11 +1160,11 @@ class KbqTreeNodePadding {
         this.destroyed.complete();
     }
     paddingIndent() {
-        const nodeLevel = (this.treeNode.data && this.tree.treeControl.getLevel)
+        const nodeLevel = this.treeNode.data && this.tree.treeControl.getLevel
             ? this.tree.treeControl.getLevel(this.treeNode.data)
             : 0;
         const level = this.level || nodeLevel;
-        return level > 0 ? `${(level * this._indent) + this.leftPadding}px` : `${this.leftPadding}px`;
+        return level > 0 ? `${level * this._indent + this.leftPadding}px` : `${this.leftPadding}px`;
     }
     /**
      * This has been extracted to a util because of TS 4 and VE.
@@ -769,263 +1187,52 @@ class KbqTreeNodePadding {
      */
     setIndentInput(indent) {
         let value = indent;
-        let units = 'px';
-        if (typeof indent === 'string') {
-            const parts = indent.split(cssUnitPattern);
-            value = parts[0];
-            units = parts[1] || units;
-        }
-        this.indentUnits = units;
-        this._indent = coerceNumberProperty(value);
-        this.setPadding();
-    }
-    setPadding() {
-        const padding = this.paddingIndent();
-        const paddingProp = this.dir?.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
-        this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodePadding, deps: [{ token: KbqTreeNode }, { token: KbqTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: KbqTreeOption }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: { indent: ["kbqTreeNodePaddingIndent", "indent"] }, exportAs: ["kbqTreeNodePadding"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodePadding, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqTreeNodePadding]',
-                    exportAs: 'kbqTreeNodePadding'
-                }]
-        }], ctorParameters: () => [{ type: KbqTreeNode }, { type: KbqTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: KbqTreeOption }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { indent: [{
-                type: Input,
-                args: ['kbqTreeNodePaddingIndent']
-            }] } });
-
-class KbqTree extends KbqTreeBase {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTree, selector: "kbq-tree", host: { classAttribute: "kbq-tree" }, exportAs: ["kbqTree"], usesInheritance: true, ngImport: i0, template: `<ng-container kbqTreeNodeOutlet></ng-container>`, isInline: true, styles: [".kbq-tree{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTree, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-tree', exportAs: 'kbqTree', template: `<ng-container kbqTreeNodeOutlet></ng-container>`, host: {
-                        class: 'kbq-tree'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tree{display:block}\n"] }]
-        }] });
-
-/** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
-/* tslint:disable-next-line:naming-convention */
-class BaseTreeControl {
-    constructor() {
-        /** A selection model with multi-selection to track expansion status. */
-        this.expansionModel = new SelectionModel(true);
-        this.filterModel = new SelectionModel(true);
-        this.filterValue = new BehaviorSubject('');
-    }
-    /** Toggles one single data node's expanded/collapsed state. */
-    toggle(dataNode) {
-        if (this.filterValue.value?.length) {
-            return;
-        }
-        this.expansionModel.toggle(dataNode);
-    }
-    /** Expands one single data node. */
-    expand(dataNode) {
-        if (this.filterValue.value?.length) {
-            return;
-        }
-        this.expansionModel.select(dataNode);
-    }
-    /** Collapses one single data node. */
-    collapse(dataNode) {
-        if (this.filterValue.value?.length) {
-            return;
-        }
-        this.expansionModel.deselect(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);
-    }
-    /** Toggles a subtree rooted at `node` recursively. */
-    toggleDescendants(dataNode) {
-        this.expansionModel.isSelected(dataNode)
-            ? this.collapseDescendants(dataNode)
-            : this.expandDescendants(dataNode);
-    }
-    /** Collapse all dataNodes in the tree. */
-    collapseAll() {
-        this.expansionModel.clear();
-    }
-    /** Expands a subtree rooted at given data node recursively. */
-    expandDescendants(dataNode) {
-        const toBeProcessed = [dataNode];
-        toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.select(...toBeProcessed);
-    }
-    /** Collapses a subtree rooted at given data node recursively. */
-    collapseDescendants(dataNode) {
-        const toBeProcessed = [dataNode];
-        toBeProcessed.push(...this.getDescendants(dataNode));
-        this.expansionModel.deselect(...toBeProcessed);
-    }
-}
-
-class FilterByViewValue {
-    constructor(control) {
-        this.control = control;
-    }
-    handle(value) {
-        const viewValue = value || null;
-        this.result = this.control.dataNodes
-            .filter((node) => this.control.compareViewValues(this.control.getViewValue(node), viewValue));
-        return this.result;
-    }
-}
-class FilterParentsForNodes {
-    constructor(control) {
-        this.control = control;
-    }
-    handle(_, prevFilter) {
-        const result = new Set();
-        this.control.dataNodes
-            .filter((node) => prevFilter?.result.includes(node))
-            .forEach((node) => {
-            this.control.getParents(node, [])
-                .forEach((parent) => result.add(parent));
-            result.add(node);
-        });
-        this.result = Array.from(result);
-        return this.result;
-    }
-}
-class FilterByValues {
-    constructor(control) {
-        this.control = control;
-        this.values = [];
-        this.setValues = (values) => {
-            this.values = values;
-        };
-    }
-    handle(_, prevFilter) {
-        const found = this.control.dataNodes
-            .filter((node) => this.values.includes(this.control.getValue(node)));
-        this.result = Array.from(new Set([...(prevFilter?.result || []), ...found]));
-        return this.result;
-    }
-    getValues() {
-        return this.values;
-    }
-}
-
-function defaultCompareValues(firstValue, secondValue) {
-    return firstValue === secondValue;
-}
-function defaultCompareViewValues(firstViewValue, secondViewValue) {
-    return RegExp(escapeRegExp(secondViewValue), 'gi').test(firstViewValue);
-}
-/** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
-class FlatTreeControl extends BaseTreeControl {
-    /** Construct with flat tree data node functions getLevel, isExpandable, getValue and getViewValue. */
-    constructor(getLevel, isExpandable, 
-    /** getValue will be used to determine if the tree contains value or not. Used in method hasValue */
-    getValue, 
-    /** getViewValue will be used for filter nodes. Returned value will be first argument in filterNodesFunction */
-    getViewValue, 
-    /** compareValues will be used to comparing values. */
-    compareValues = defaultCompareValues, 
-    /** compareValues will be used to comparing values. */
-    compareViewValues = defaultCompareViewValues, 
-    /** isDisabled will be used to determine if the node is disabled. */
-    isDisabled = () => false) {
-        super();
-        this.getLevel = getLevel;
-        this.isExpandable = isExpandable;
-        this.getValue = getValue;
-        this.getViewValue = getViewValue;
-        this.compareValues = compareValues;
-        this.compareViewValues = compareViewValues;
-        this.isDisabled = isDisabled;
-        this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
-    }
-    getFilters() {
-        return this.filters;
-    }
-    setFilters(...filters) {
-        this.filters = filters;
-    }
-    /**
-     * Gets a list of the data node's subtree of descendent data nodes.
-     *
-     * To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
-     * with correct levels.
-     */
-    getDescendants(dataNode) {
-        const startIndex = this.dataNodes.indexOf(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
-        // tree node.
-        // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
-        // If we reach a node whose level is greater than the level of the tree node, we hit a
-        // sibling of an ancestor.
-        for (let i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
-            results.push(this.dataNodes[i]);
-        }
-        return results;
-    }
-    /**
-     * Expands all data nodes in the tree.
-     *
-     * To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
-     * data nodes of the tree.
-     */
-    expandAll() {
-        this.expansionModel.select(...this.dataNodes);
-    }
-    getParents(node, result) {
-        if (node.parent) {
-            result.unshift(node.parent);
-            return this.getParents(node.parent, result);
-        }
-        else {
-            return result;
-        }
-    }
-    hasValue(value) {
-        return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
-    }
-    filterNodes(value = null) {
-        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);
-        Promise.resolve()
-            .then(() => this.restoreExpansionState());
-    }
-    updateFilterValue(value) {
-        Promise.resolve()
-            .then(() => this.filterValue.next(value));
-    }
-    saveExpansionState() {
-        if (!this.filterValue.value?.length) {
-            this.expandedItemsBeforeFiltration = this.expansionModel.selected;
+        let units = 'px';
+        if (typeof indent === 'string') {
+            const parts = indent.split(cssUnitPattern);
+            value = parts[0];
+            units = parts[1] || units;
         }
+        this.indentUnits = units;
+        this._indent = coerceNumberProperty(value);
+        this.setPadding();
     }
-    restoreExpansionState() {
-        if (!this.filterValue.value?.length) {
-            this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
-        }
+    setPadding() {
+        const padding = this.paddingIndent();
+        const paddingProp = this.dir?.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodePadding, deps: [{ token: KbqTreeNode }, { token: KbqTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: KbqTreeOption }, { token: i3.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: { indent: ["kbqTreeNodePaddingIndent", "indent"] }, exportAs: ["kbqTreeNodePadding"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeNodePadding, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqTreeNodePadding]',
+                    exportAs: 'kbqTreeNodePadding'
+                }]
+        }], ctorParameters: () => [{ type: KbqTreeNode }, { type: KbqTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: KbqTreeOption }, { type: i3.Directionality, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { indent: [{
+                type: Input,
+                args: ['kbqTreeNodePaddingIndent']
+            }] } });
+
+class KbqTree extends KbqTreeBase {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTree, selector: "kbq-tree", host: { classAttribute: "kbq-tree" }, exportAs: ["kbqTree"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container kbqTreeNodeOutlet />
+    `, isInline: true, styles: [".kbq-tree{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-tree', exportAs: 'kbqTree', template: `
+        <ng-container kbqTreeNodeOutlet />
+    `, host: {
+                        class: 'kbq-tree'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-tree{display:block}\n"] }]
+        }] });
 
-/* tslint:disable:no-empty */
 const KBQ_SELECTION_TREE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => KbqTreeSelection),
@@ -1149,14 +1356,11 @@ class KbqTreeSelection extends KbqTreeBase {
         this.selectionModel = new SelectionModel(this.multiple);
     }
     ngAfterContentInit() {
-        this.unorderedOptions.changes
-            .subscribe(this.updateRenderedOptions);
+        this.unorderedOptions.changes.subscribe(this.updateRenderedOptions);
         this.keyManager = new FocusKeyManager(this.renderedOptions)
             .withVerticalOrientation(true)
             .withHorizontalOrientation(null);
-        this.keyManager.change
-            .pipe(takeUntil(this.destroy))
-            .subscribe(() => {
+        this.keyManager.change.pipe(takeUntil(this.destroy)).subscribe(() => {
             if (this.keyManager.activeItem) {
                 this.emitNavigationEvent(this.keyManager.activeItem);
                 // todo need check this logic
@@ -1165,18 +1369,12 @@ class KbqTreeSelection extends KbqTreeBase {
                 }
             }
         });
-        this.keyManager.tabOut
-            .pipe(takeUntil(this.destroy))
-            .subscribe(() => this.allowFocusEscape());
-        this.selectionModel.changed
-            .pipe(takeUntil(this.destroy))
-            .subscribe(() => {
+        this.keyManager.tabOut.pipe(takeUntil(this.destroy)).subscribe(() => this.allowFocusEscape());
+        this.selectionModel.changed.pipe(takeUntil(this.destroy)).subscribe(() => {
             this.onChange(this.getSelectedValues());
             this.renderedOptions.notifyOnChanges();
         });
-        this.renderedOptions.changes
-            .pipe(takeUntil(this.destroy), delay(0, this.scheduler))
-            .subscribe((options) => {
+        this.renderedOptions.changes.pipe(delay(0, this.scheduler), takeUntil(this.destroy)).subscribe((options) => {
             this.resetOptions();
             // Check to see if we need to update our tab index
             this.updateTabIndex();
@@ -1205,6 +1403,9 @@ class KbqTreeSelection extends KbqTreeBase {
         this.keyManager.setFirstItemActive();
         this.keyManager.setFocusOrigin('program');
     }
+    highlightSelectedOption() {
+        this.renderedOptions.find((item) => item.data === this.selectionModel.selected[0])?.focus();
+    }
     blur() {
         if (!this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
             this.keyManager.setActiveItem(-1);
@@ -1214,7 +1415,6 @@ class KbqTreeSelection extends KbqTreeBase {
     }
     onKeyDown(event) {
         this.keyManager.setFocusOrigin('keyboard');
-        // tslint:disable-next-line: deprecation
         const keyCode = event.keyCode;
         if ([SPACE, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
             event.preventDefault();
@@ -1314,7 +1514,7 @@ class KbqTreeSelection extends KbqTreeBase {
     selectActiveOptions() {
         const options = this.renderedOptions.toArray();
         let fromIndex = this.keyManager.previousActiveItemIndex;
-        let toIndex = this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex;
+        let toIndex = (this.keyManager.previousActiveItemIndex = this.keyManager.activeItemIndex);
         const selectedOptionState = options[fromIndex]?.selected;
         if (toIndex === fromIndex || fromIndex === -1) {
             options[toIndex].toggle();
@@ -1355,11 +1555,9 @@ class KbqTreeSelection extends KbqTreeBase {
         this.selectionChange.emit(new KbqTreeNavigationChange(this, option));
     }
     selectAllOptions() {
-        const optionsToSelect = this.renderedOptions
-            .filter((option) => !option.disabled);
+        const optionsToSelect = this.renderedOptions.filter((option) => !option.disabled);
         const hasDeselectedOptions = optionsToSelect.some((option) => !option.selected);
-        optionsToSelect
-            .forEach((option) => option.setSelected(hasDeselectedOptions));
+        optionsToSelect.forEach((option) => option.setSelected(hasDeselectedOptions));
         this.onSelectAll.emit(new KbqTreeSelectAllEvent(this, optionsToSelect));
     }
     copyActiveOption() {
@@ -1390,6 +1588,7 @@ class KbqTreeSelection extends KbqTreeBase {
     registerOnChange(fn) {
         this.onChange = fn;
     }
+    // eslint-disable-next-line @typescript-eslint/ban-types
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -1468,18 +1667,14 @@ class KbqTreeSelection extends KbqTreeBase {
         }
     }
     listenToOptionsFocus() {
-        this.optionFocusSubscription = this.optionFocusChanges
-            .subscribe((event) => {
+        this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
             const index = this.renderedOptions.toArray().indexOf(event.option);
-            this.renderedOptions
-                .filter((option) => option.hasFocus)
-                .forEach((option) => option.hasFocus = false);
+            this.renderedOptions.filter((option) => option.hasFocus).forEach((option) => (option.hasFocus = false));
             if (this.isValidIndex(index)) {
                 this.keyManager.updateActiveItem(index);
             }
         });
-        this.optionBlurSubscription = this.optionBlurChanges
-            .subscribe(() => this.blur());
+        this.optionBlurSubscription = this.optionBlurChanges.subscribe(() => this.blur());
     }
     /**
      * Utility to ensure all indexes are valid.
@@ -1497,9 +1692,7 @@ class KbqTreeSelection extends KbqTreeBase {
         this.renderedOptions.forEach((option) => option.markForCheck());
     }
     updateOptionsFocus() {
-        this.renderedOptions
-            .filter((option) => option.hasFocus)
-            .forEach((option) => option.hasFocus = false);
+        this.renderedOptions.filter((option) => option.hasFocus).forEach((option) => (option.hasFocus = false));
     }
     canDeselectLast(option) {
         return !(this.noUnselectLast && this.selectionModel.selected.length === 1 && option.selected);
@@ -1515,11 +1708,11 @@ class KbqTreeSelection extends KbqTreeBase {
             KBQ_SELECTION_TREE_VALUE_ACCESSOR,
             { provide: KBQ_TREE_OPTION_PARENT_COMPONENT, useExisting: KbqTreeSelection },
             { provide: KbqTreeBase, useExisting: KbqTreeSelection }
-        ], queries: [{ propertyName: "unorderedOptions", predicate: KbqTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: KbqTreeNodeOutlet, descendants: true, static: true }], exportAs: ["kbqTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container kbqTreeNodeOutlet></ng-container>', isInline: true, styles: [".kbq-tree-selection{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "unorderedOptions", predicate: KbqTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: KbqTreeNodeOutlet, descendants: true, static: true }], exportAs: ["kbqTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container kbqTreeNodeOutlet />', isInline: true, styles: [".kbq-tree-selection{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTreeSelection, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree-selection', exportAs: 'kbqTreeSelection', template: '<ng-container kbqTreeNodeOutlet></ng-container>', host: {
+            args: [{ selector: 'kbq-tree-selection', exportAs: 'kbqTreeSelection', template: '<ng-container kbqTreeNodeOutlet />', host: {
                         class: 'kbq-tree-selection',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
@@ -1613,231 +1806,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 
-/** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
-class NestedTreeControl extends BaseTreeControl {
-    /** Construct with nested tree function getChildren. */
-    constructor(getChildren) {
-        super();
-        this.getChildren = getChildren;
-    }
-    /**
-     * Expands all dataNodes in the tree.
-     *
-     * To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
-     * data nodes of the tree.
-     */
-    expandAll() {
-        this.expansionModel.clear();
-        const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
-        this.expansionModel.select(...allNodes);
-    }
-    /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
-    getDescendants(dataNode) {
-        const descendants = [];
-        this._getDescendants(descendants, dataNode);
-        return descendants.splice(1);
-    }
-    /** A helper function to get descendants recursively. */
-    // todo нужно придумать другое название и понять в чем отличие между getDescendants и _getDescendants
-    /* tslint:disable-next-line:naming-convention */
-    _getDescendants(descendants, dataNode) {
-        descendants.push(dataNode);
-        this.getChildren(dataNode)
-            .pipe(take(1))
-            .subscribe((children) => {
-            if (children && children.length > 0) {
-                children.forEach((child) => this._getDescendants(descendants, child));
-            }
-        });
-    }
-}
-
-/**
- * Tree flattener to convert a normal type of node to node with children & level information.
- * Transform nested nodes of type `T` to flattened nodes of type `F`.
- *
- * For example, the input data of type `T` is nested, and contains its children data:
- *   SomeNode: {
- *     key: 'Fruits',
- *     children: [
- *       NodeOne: {
- *         key: 'Apple',
- *       },
- *       NodeTwo: {
- *        key: 'Pear',
- *      }
- *    ]
- *  }
- *  After flattener flatten the tree, the structure will become
- *  SomeNode: {
- *    key: 'Fruits',
- *    expandable: true,
- *    level: 1
- *  },
- *  NodeOne: {
- *    key: 'Apple',
- *    expandable: false,
- *    level: 2
- *  },
- *  NodeTwo: {
- *   key: 'Pear',
- *   expandable: false,
- *   level: 2
- * }
- * and the output flattened type is `F` with additional information.
- */
-class KbqTreeFlattener {
-    constructor(transformFunction, getLevel, isExpandable, getChildren) {
-        this.transformFunction = transformFunction;
-        this.getLevel = getLevel;
-        this.isExpandable = isExpandable;
-        this.getChildren = getChildren;
-    }
-    flattenNode(node, level, resultNodes, parent) {
-        const flatNode = this.transformFunction(node, level, parent);
-        resultNodes.push(flatNode);
-        if (this.isExpandable(flatNode)) {
-            const childrenNodes = this.getChildren(node);
-            if (childrenNodes) {
-                if (Array.isArray(childrenNodes)) {
-                    this.flattenChildren(childrenNodes, level, resultNodes, flatNode);
-                }
-                else {
-                    childrenNodes
-                        .pipe(take(1))
-                        .subscribe((children) => {
-                        this.flattenChildren(children, level, resultNodes, flatNode);
-                    });
-                }
-            }
-        }
-        return resultNodes;
-    }
-    flattenChildren(children, level, resultNodes, parent) {
-        children.forEach((child) => {
-            this.flattenNode(child, level + 1, resultNodes, parent);
-        });
-    }
-    /**
-     * Flatten a list of node type T to flattened version of node F.
-     * Please note that type T may be nested, and the length of `structuredData` may be different
-     * from that of returned list `F[]`.
-     */
-    flattenNodes(structuredData) {
-        const resultNodes = [];
-        structuredData.forEach((node) => this.flattenNode(node, 0, resultNodes, null));
-        return resultNodes;
-    }
-    /**
-     * Expand flattened node with current expansion status.
-     * The returned list may have different length.
-     */
-    expandFlattenedNodes(nodes, treeControl) {
-        const results = [];
-        const currentExpand = [];
-        currentExpand[0] = true;
-        nodes.forEach((node) => {
-            let expand = true;
-            for (let i = 0; i <= this.getLevel(node); i++) {
-                expand = expand && currentExpand[i];
-            }
-            if (expand) {
-                results.push(node);
-            }
-            if (this.isExpandable(node)) {
-                currentExpand[this.getLevel(node) + 1] = treeControl.isExpanded(node);
-            }
-        });
-        return results;
-    }
-}
-var KbqTreeDataSourceChangeTypes;
-(function (KbqTreeDataSourceChangeTypes) {
-    KbqTreeDataSourceChangeTypes["Expansion"] = "expansion";
-    KbqTreeDataSourceChangeTypes["Filter"] = "filter";
-})(KbqTreeDataSourceChangeTypes || (KbqTreeDataSourceChangeTypes = {}));
-/**
- * Data source for flat tree.
- * The data source need to handle expansion/collapsion of the tree node and change the data feed
- * to `KbqTree`.
- * The nested tree nodes of type `T` are flattened through `MсTreeFlattener`, and converted
- * to type `F` for `KbqTree` to consume.
- */
-class KbqTreeFlatDataSource extends DataSource {
-    get data() {
-        return this._data.value;
-    }
-    set data(value) {
-        this._data.next(value);
-        this.flattenedData.next(this.treeFlattener.flattenNodes(this.data));
-        this.treeControl.dataNodes = this.flattenedData.value;
-    }
-    constructor(treeControl, treeFlattener, initialData = []) {
-        super();
-        this.treeControl = treeControl;
-        this.treeFlattener = treeFlattener;
-        this.flattenedData = new BehaviorSubject([]);
-        this.expandedData = new BehaviorSubject([]);
-        this.filteredData = new BehaviorSubject([]);
-        this._data = new BehaviorSubject(initialData);
-    }
-    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) => {
-            if (changeObj.type === KbqTreeDataSourceChangeTypes.Filter) {
-                if (changeObj.value && changeObj.value.length > 0) {
-                    return this.filterHandler();
-                }
-                else {
-                    return this.expansionHandler(changeObj.value);
-                }
-            }
-            return this.expansionHandler(changeObj.value);
-        }));
-    }
-    filterHandler() {
-        this.filteredData.next(this.treeControl.filterModel.selected);
-        return this.filteredData.value;
-    }
-    expansionHandler(_change) {
-        const expandedNodes = this.treeFlattener.expandFlattenedNodes(this.flattenedData.value, this.treeControl);
-        this.expandedData.next(expandedNodes);
-        return this.expandedData.value;
-    }
-    disconnect() {
-        // no op
-    }
-}
-
-/**
- * Data source for nested tree.
- *
- * The data source for nested tree doesn't have to consider node flattener, or the way to expand
- * or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
- */
-class KbqTreeNestedDataSource extends DataSource {
-    constructor() {
-        super(...arguments);
-        /* tslint:disable-next-line:naming-convention */
-        this._data = new BehaviorSubject([]);
-    }
-    get data() {
-        return this._data.value;
-    }
-    set data(value) {
-        this._data.next(value);
-    }
-    connect(collectionViewer) {
-        return merge(...[collectionViewer.viewChange, this._data])
-            .pipe(map(() => this.data));
-    }
-    disconnect() {
-        // no op
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */