@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

package/fesm2022/koobiq-components-tree.mjs

@@ -2,19 +2,21 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 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 from '@koobiq/components/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 { TreeSizePaddingLeft } from '@koobiq/tokens-koobiq/web';
-import { takeUntil, map, take, delay } from 'rxjs/operators';
+import { TreeSizeIndentLevel } from '@koobiq/design-tokens/web';
+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$1 from '@angular/cdk/clipboard';
+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';
@@ -35,17 +37,17 @@ class KbqTreeNodeDef {
         this.template = template;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeDef, selector: "[kbqTreeNodeDef]", inputs: { when: ["kbqTreeNodeDefWhen", "when"], data: ["kbqTreeNode", "data"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeDef, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcTreeNodeDef]',
-                    inputs: ['when: mcTreeNodeDefWhen']
+                    selector: '[kbqTreeNodeDef]',
+                    inputs: ['when: kbqTreeNodeDefWhen']
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
                 type: Input,
-                args: ['mcTreeNode']
+                args: ['kbqTreeNode']
             }] } });
 
 class KbqTreeNodeOutlet {
@@ -54,11 +56,11 @@ class KbqTreeNodeOutlet {
         this.changeDetectorRef = changeDetectorRef;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeOutlet, selector: "[mcTreeNodeOutlet]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeOutlet, selector: "[kbqTreeNodeOutlet]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeOutlet, decorators: [{
             type: Directive,
-            args: [{ selector: '[mcTreeNodeOutlet]' }]
+            args: [{ selector: '[kbqTreeNodeOutlet]' }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -320,13 +322,13 @@ class KbqTreeNode {
         this.elementRef.nativeElement.focus();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNode, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => KbqTreeBase) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNode, selector: "kbq-tree-node", exportAs: ["mcTreeNode"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNode, selector: "kbq-tree-node", exportAs: ["kbqTreeNode"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNode, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tree-node',
-                    exportAs: 'mcTreeNode'
+                    exportAs: 'kbqTreeNode'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: KbqTreeBase, decorators: [{
                     type: Inject,
@@ -355,8 +357,7 @@ class KbqTreeNodeToggleBaseDirective extends KbqTreeNodeToggleMixinBase {
         this.treeNode = treeNode;
         this._recursive = false;
         this.tree.treeControl.filterValue
-            .pipe(map((value) => value?.length > 0))
-            .subscribe((state) => this.disabled = state);
+            .subscribe((value) => this.disabled = !!value);
     }
     toggle(event) {
         if (this.disabled) {
@@ -368,7 +369,7 @@ class KbqTreeNodeToggleBaseDirective extends KbqTreeNodeToggleMixinBase {
         event.stopPropagation();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, deps: [{ token: KbqTreeBase }, { token: KbqTreeNode }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["mcTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["kbqTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleBaseDirective, decorators: [{
             type: Directive
@@ -376,30 +377,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }], recursive: [{
                 type: Input,
-                args: ['mcTreeNodeToggleRecursive']
+                args: ['kbqTreeNodeToggleRecursive']
             }] } });
 class KbqTreeNodeToggleComponent extends KbqTreeNodeToggleBaseDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i class="mc kbq-icon kbq-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, 4px);padding-right:var(--kbq-tree-size-toggle-padding, 4px);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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree-node-toggle', exportAs: 'mcTreeNodeToggle', template: `<i class="mc kbq-icon kbq-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',
                         '(click)': 'toggle($event)'
-                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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, 4px);padding-right:var(--kbq-tree-size-toggle-padding, 4px);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"] }]
+                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }] });
 class KbqTreeNodeToggleDirective extends KbqTreeNodeToggleBaseDirective {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeToggleDirective, selector: "[kbq-tree-node-toggle], [mcTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodeToggleDirective, selector: "[kbq-tree-node-toggle], [kbqTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["kbqTreeNodeToggle"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodeToggleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kbq-tree-node-toggle], [mcTreeNodeToggle]',
-                    exportAs: 'mcTreeNodeToggle',
+                    selector: '[kbq-tree-node-toggle], [kbqTreeNodeToggle]',
+                    exportAs: 'kbqTreeNodeToggle',
                     host: {
                         '[attr.disabled]': 'disabled || null',
                         '(click)': 'toggle($event)'
@@ -466,7 +467,7 @@ class KbqTreeOption extends KbqTreeNode {
         return this.toggleElementComponent || this.toggleElementDirective;
     }
     get isToggleInDefaultPlace() {
-        return this.toggleWrapper.nativeElement.childNodes.length > 0;
+        return !!(this.toggleElementDirective || this.toggleElementComponent);
     }
     constructor(elementRef, changeDetectorRef, ngZone, tree) {
         super(elementRef, tree);
@@ -536,6 +537,9 @@ class KbqTreeOption extends KbqTreeNode {
         else {
             this.tree.selectionModel.deselect(this.data);
         }
+        if (this.showCheckbox) {
+            this.updateCheckboxState();
+        }
         this.markForCheck();
     }
     focus(focusOrigin) {
@@ -601,6 +605,7 @@ class KbqTreeOption extends KbqTreeNode {
         this._selected = false;
         this.updateCheckboxState();
         this.markForCheck();
+        this.emitSelectionChangeEvent();
     }
     onKeydown($event) {
         if (!this.actionButton) {
@@ -631,18 +636,19 @@ class KbqTreeOption extends KbqTreeNode {
         this.changeDetectorRef.markForCheck();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: KBQ_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeOption, selector: "kbq-tree-option", inputs: { checkboxThirdState: "checkboxThirdState", disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-option" }, providers: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeOption, selector: "kbq-tree-option", inputs: { checkboxThirdState: "checkboxThirdState", disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-disabled": "disabled", "class.kbq-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-option" }, providers: [
             { 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: ["mcTitleContainer"], descendants: true }, { propertyName: "toggleWrapper", first: true, predicate: ["toggleWrapper"], descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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\" #mcTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n\n<div class=\"kbq-option-overlay\"></div>\n", styles: [".kbq-tree-option{box-sizing:border-box;display:flex;align-items:center;height:var(--kbq-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.kbq-tree-option .kbq-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:var(--kbq-tree-size-padding-right, 16px)}.kbq-tree-option>.kbq-icon,.kbq-tree-option>.toggle-wrapper>.kbq-icon{margin-right:var(--kbq-tree-size-icon-padding, 8px);cursor:pointer}.kbq-tree-option>.kbq-progress-spinner{margin-right:8px}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option>.kbq-pseudo-checkbox,.kbq-tree-option>.kbq-checkbox{margin-right:var(--kbq-tree-size-icon-padding, 8px)}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([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.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]\"></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,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 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;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-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, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.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: "16.1.5", ngImport: i0, type: KbqTreeOption, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree-option', exportAs: 'mcTreeOption', host: {
+            args: [{ selector: 'kbq-tree-option', exportAs: 'kbqTreeOption', host: {
                         class: 'kbq-tree-option',
                         '[class.kbq-selected]': 'selected',
                         '[class.kbq-focused]': 'hasFocus',
+                        '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-action-button-focused]': 'actionButton?.active',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': '-1',
@@ -655,16 +661,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         { provide: KbqTreeNode, useExisting: KbqTreeOption },
                         { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
                         { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
-                    ], template: "<div class=\"toggle-wrapper\" #toggleWrapper>\n    <ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [mcTreeNodeToggle]\"></ng-content>\n</div>\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\" #mcTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n\n<div class=\"kbq-option-overlay\"></div>\n", styles: [".kbq-tree-option{box-sizing:border-box;display:flex;align-items:center;height:var(--kbq-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.kbq-tree-option .kbq-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:var(--kbq-tree-size-padding-right, 16px)}.kbq-tree-option>.kbq-icon,.kbq-tree-option>.toggle-wrapper>.kbq-icon{margin-right:var(--kbq-tree-size-icon-padding, 8px);cursor:pointer}.kbq-tree-option>.kbq-progress-spinner{margin-right:8px}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option>.kbq-pseudo-checkbox,.kbq-tree-option>.kbq-checkbox{margin-right:var(--kbq-tree-size-icon-padding, 8px)}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}\n"] }]
+                    ], 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,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 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;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-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, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.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: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_TREE_OPTION_PARENT_COMPONENT]
                 }] }]; }, propDecorators: { parentTextElement: [{
                 type: ViewChild,
-                args: ['mcTitleContainer']
-            }], toggleWrapper: [{
-                type: ViewChild,
-                args: ['toggleWrapper']
+                args: ['kbqTitleContainer']
             }], toggleElementDirective: [{
                 type: ContentChild,
                 args: [KbqTreeNodeToggleDirective]
@@ -718,10 +721,10 @@ class KbqTreeNodePadding {
         this.element = element;
         this.option = option;
         this.dir = dir;
-        this._indent = 20;
+        this._indent = parseInt(TreeSizeIndentLevel);
         /** CSS units used for the indentation value. */
         this.indentUnits = 'px';
-        this.baseLeftPadding = parseInt(TreeSizePaddingLeft);
+        this.baseLeftPadding = 8;
         this.iconWidth = 24;
         this.destroyed = new Subject();
         this.dir?.change?.pipe(takeUntil(this.destroyed))
@@ -750,7 +753,7 @@ class KbqTreeNodePadding {
      */
     setLevelInput(value) {
         // Set to null as the fallback value so that _setPadding can fall back to the node level if the
-        // consumer set the directive as `mcTreeNodePadding=""`. We still want to take this value if
+        // consumer set the directive as `kbqTreeNodePadding=""`. We still want to take this value if
         // they set 0 explicitly.
         this._level = coerceNumberProperty(value, null);
         this.setPadding();
@@ -779,28 +782,28 @@ class KbqTreeNodePadding {
         this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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: "16.1.5", type: KbqTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { indent: ["mcTreeNodePaddingIndent", "indent"] }, exportAs: ["mcTreeNodePadding"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeNodePadding, selector: "[kbqTreeNodePadding]", inputs: { indent: ["kbqTreeNodePaddingIndent", "indent"] }, exportAs: ["kbqTreeNodePadding"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeNodePadding, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcTreeNodePadding]',
-                    exportAs: 'mcTreeNodePadding'
+                    selector: '[kbqTreeNodePadding]',
+                    exportAs: 'kbqTreeNodePadding'
                 }]
         }], ctorParameters: function () { return [{ type: KbqTreeNode }, { type: KbqTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: KbqTreeOption }, { type: i3.Directionality, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { indent: [{
                 type: Input,
-                args: ['mcTreeNodePaddingIndent']
+                args: ['kbqTreeNodePaddingIndent']
             }] } });
 
 class KbqTree extends KbqTreeBase {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTree, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTree, selector: "kbq-tree", host: { classAttribute: "kbq-tree" }, exportAs: ["mcTree"], usesInheritance: true, ngImport: i0, template: `<ng-container mcTreeNodeOutlet></ng-container>`, isInline: true, styles: [".kbq-tree{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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: "16.1.5", ngImport: i0, type: KbqTree, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree', exportAs: 'mcTree', template: `<ng-container mcTreeNodeOutlet></ng-container>`, host: {
+            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"] }]
         }] });
@@ -961,7 +964,7 @@ class FlatTreeControl extends BaseTreeControl {
         });
         this.filterModel.select(...Array.from(filteredNodesWithTheirParents));
         this.updateFilterValue(value);
-        this.restoreExpansionState();
+        Promise.resolve().then(() => this.restoreExpansionState());
     }
     updateFilterValue(value) {
         Promise.resolve().then(() => this.filterValue.next(value));
@@ -972,12 +975,12 @@ class FlatTreeControl extends BaseTreeControl {
         }
     }
     saveExpansionState() {
-        if (this.filterValue.value === '') {
+        if (!this.filterValue.value) {
             this.expandedItemsBeforeFiltration = this.expansionModel.selected;
         }
     }
     restoreExpansionState() {
-        if (this.filterValue.value === '') {
+        if (!this.filterValue.value) {
             this.expansionModel.clear();
             this.expansionModel.select(...this.expandedItemsBeforeFiltration);
         }
@@ -1281,8 +1284,9 @@ 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;
-        if (toIndex === fromIndex) {
+        const selectedOptionState = options[fromIndex]?.selected;
+        if (toIndex === fromIndex || fromIndex === -1) {
+            options[toIndex].toggle();
             return;
         }
         if (fromIndex > toIndex) {
@@ -1322,8 +1326,9 @@ class KbqTreeSelection extends KbqTreeBase {
     selectAllOptions() {
         const optionsToSelect = this.renderedOptions
             .filter((option) => !option.disabled);
+        const hasDeselectedOptions = optionsToSelect.some((option) => !option.selected);
         optionsToSelect
-            .forEach((option) => option.setSelected(true));
+            .forEach((option) => option.setSelected(hasDeselectedOptions));
         this.onSelectAll.emit(new KbqTreeSelectAllEvent(this, optionsToSelect));
     }
     copyActiveOption() {
@@ -1474,16 +1479,16 @@ class KbqTreeSelection extends KbqTreeBase {
         }
         return $event.relatedTarget.classList.contains('kbq-tree-option');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeSelection, deps: [{ token: i0.ElementRef }, { token: i1$1.AsyncScheduler }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i2$1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeSelection, deps: [{ token: i0.ElementRef }, { token: i1$1.AsyncScheduler }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i2$2.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqTreeSelection, selector: "kbq-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-selection" }, providers: [
             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: ["mcTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container mcTreeNodeOutlet></ng-container>', isInline: true, styles: [".kbq-tree-selection{display:block}\n"], dependencies: [{ kind: "directive", type: KbqTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], 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></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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeSelection, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tree-selection', exportAs: 'mcTreeSelection', template: '<ng-container mcTreeNodeOutlet></ng-container>', host: {
+            args: [{ selector: 'kbq-tree-selection', exportAs: 'kbqTreeSelection', template: '<ng-container kbqTreeNodeOutlet></ng-container>', host: {
                         class: 'kbq-tree-selection',
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
@@ -1496,10 +1501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         { provide: KBQ_TREE_OPTION_PARENT_COMPONENT, useExisting: KbqTreeSelection },
                         { provide: KbqTreeBase, useExisting: KbqTreeSelection }
                     ], styles: [".kbq-tree-selection{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.AsyncScheduler }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i2.MultipleMode, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.AsyncScheduler }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i2$1.MultipleMode, decorators: [{
                     type: Attribute,
                     args: ['multiple']
-                }] }, { type: i2$1.Clipboard, decorators: [{
+                }] }, { type: i2$2.Clipboard, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { nodeOutlet: [{
                 type: ViewChild,
@@ -1548,7 +1553,9 @@ class KbqTreeModule {
             KbqTreeSelection,
             KbqTreeOption,
             KbqTreeNodeToggleComponent,
-            KbqTreeNodeToggleDirective], imports: [CommonModule, KbqPseudoCheckboxModule], exports: [KbqTreeNodeOutlet,
+            KbqTreeNodeToggleDirective], imports: [CommonModule,
+            KbqPseudoCheckboxModule,
+            KbqIconModule], exports: [KbqTreeNodeOutlet,
             KbqTreeNodeDef,
             KbqTreeNode,
             KbqTreeNodePadding,
@@ -1557,12 +1564,18 @@ class KbqTreeModule {
             KbqTreeOption,
             KbqTreeNodeToggleComponent,
             KbqTreeNodeToggleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeModule, providers: [{ provide: AsyncScheduler, useValue: asyncScheduler }], imports: [CommonModule, KbqPseudoCheckboxModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeModule, providers: [{ provide: AsyncScheduler, useValue: asyncScheduler }], imports: [CommonModule,
+            KbqPseudoCheckboxModule,
+            KbqIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, KbqPseudoCheckboxModule],
+                    imports: [
+                        CommonModule,
+                        KbqPseudoCheckboxModule,
+                        KbqIconModule
+                    ],
                     exports: KBQ_TREE_DIRECTIVES,
                     declarations: KBQ_TREE_DIRECTIVES,
                     providers: [{ provide: AsyncScheduler, useValue: asyncScheduler }]