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

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 { TreeSizeIndentLevel } from '@koobiq/design-tokens/web/index.js';
 import { takeUntil, map, take, delay } 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';
@@ -380,16 +382,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             }] } });
 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: ["mcTreeNodeToggle"], 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: 'mcTreeNodeToggle', 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 }); }
@@ -466,7 +468,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);
@@ -635,7 +637,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: ["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: ["mcTitleContainer"], descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [mcTreeNodeToggle]\"></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\" #mcTitleContainer><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,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;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{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([disabled]){cursor:pointer}.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$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,
@@ -655,16 +657,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], [mcTreeNodeToggle]\"></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\" #mcTitleContainer><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,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;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{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([disabled]){cursor:pointer}.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"] }]
         }], 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']
             }], toggleElementDirective: [{
                 type: ContentChild,
                 args: [KbqTreeNodeToggleDirective]
@@ -718,10 +717,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))
@@ -1474,7 +1473,7 @@ 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 },
@@ -1496,10 +1495,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 +1547,9 @@ class KbqTreeModule {
             KbqTreeSelection,
             KbqTreeOption,
             KbqTreeNodeToggleComponent,
-            KbqTreeNodeToggleDirective], imports: [CommonModule, KbqPseudoCheckboxModule], exports: [KbqTreeNodeOutlet,
+            KbqTreeNodeToggleDirective], imports: [CommonModule,
+            KbqPseudoCheckboxModule,
+            KbqIconModule], exports: [KbqTreeNodeOutlet,
             KbqTreeNodeDef,
             KbqTreeNode,
             KbqTreeNodePadding,
@@ -1557,12 +1558,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 }]