@ng-nest/ui 14.0.7 → 14.0.9

package/fesm2020/ng-nest-ui-tree.mjs

@@ -1,23 +1,25 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, ViewChildren, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1 from '@ng-nest/ui/core';
-import { XProperty, XDataConvert, XInputBoolean, XInputNumber, XWithConfig, XIsEmpty, XIsChange, XIsObservable, XSetData, XIsFunction, XIsUndefined } from '@ng-nest/ui/core';
-import { Subject, map } from 'rxjs';
+import { XProperty, XDataConvert, XInputBoolean, XInputNumber, XWithConfig, XIsEmpty, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined } from '@ng-nest/ui/core';
+import { Subject, debounceTime, takeUntil, map } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@ng-nest/ui/icon';
-import { XIconModule } from '@ng-nest/ui/icon';
-import * as i4$1 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i4 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
 import * as i5 from '@ng-nest/ui/checkbox';
 import { XCheckboxModule } from '@ng-nest/ui/checkbox';
 import * as i6 from '@ng-nest/ui/outlet';
 import { XOutletModule } from '@ng-nest/ui/outlet';
 import * as i7 from '@ng-nest/ui/link';
 import { XLinkModule } from '@ng-nest/ui/link';
+import * as i8 from '@ng-nest/ui/keyword';
+import { XKeywordModule } from '@ng-nest/ui/keyword';
+import * as i4$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /**
  * Tree
@@ -97,10 +99,20 @@ class XTreeProperty extends XProperty {
          * @en_US Parameter control request change event
          */
         this.manualChange = new EventEmitter();
+        /**
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
+         */
+        this.nodeClick = new EventEmitter();
+        /**
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
+         */
+        this.activatedIdChange = new EventEmitter();
     }
 }
 /** @nocollapse */ XTreeProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTreeProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeProperty, selector: "ng-component", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+/** @nocollapse */ XTreeProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeProperty, selector: "ng-component", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions", scrollElement: "scrollElement", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", heightAdaption: "heightAdaption", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", multiple: "multiple", objectArray: "objectArray", keywordText: "keywordText", caseSensitive: "caseSensitive", onlyLeaf: "onlyLeaf" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     XDataConvert()
 ], XTreeProperty.prototype, "data", void 0);
@@ -154,6 +166,20 @@ __decorate([
     XWithConfig(X_CONFIG_NAME, 26),
     XInputNumber()
 ], XTreeProperty.prototype, "itemSize", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "multiple", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "objectArray", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, true)
+], XTreeProperty.prototype, "caseSensitive", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, false)
+], XTreeProperty.prototype, "onlyLeaf", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeProperty, decorators: [{
             type: Component,
             args: [{ template: '' }]
@@ -197,18 +223,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], actions: [{
                 type: Input
+            }], scrollElement: [{
+                type: Input
             }], virtualScroll: [{
                 type: Input
             }], virtualScrollHeight: [{
                 type: Input
+            }], heightAdaption: [{
+                type: Input
             }], itemSize: [{
                 type: Input
             }], minBufferPx: [{
                 type: Input
             }], maxBufferPx: [{
                 type: Input
+            }], multiple: [{
+                type: Input
+            }], objectArray: [{
+                type: Input
+            }], keywordText: [{
+                type: Input
+            }], caseSensitive: [{
+                type: Input
+            }], onlyLeaf: [{
+                type: Input
             }], manualChange: [{
                 type: Output
+            }], nodeClick: [{
+                type: Output
+            }], activatedIdChange: [{
+                type: Output
             }] } });
 /**
  * TreeNode
@@ -275,9 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class XTreeNodeComponent extends XTreeNodeProperty {
-    constructor(
-    // @Optional() public tree: XTreeComponent,
-    renderer, elementRef, cdr, configService) {
+    constructor(renderer, elementRef, cdr, configService) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
@@ -296,6 +338,19 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     get paddingLeft() {
         return Number(this.node?.level ? this.node.level : 0) * Number(this.tree.spacing);
     }
+    get getActivated() {
+        if (this.tree.multiple) {
+            if (this.tree.objectArray) {
+                return this.tree.activatedId?.map((x) => x.id).includes(this.node.id);
+            }
+            else {
+                return this.tree.activatedId?.includes(this.node.id);
+            }
+        }
+        else {
+            return this.tree.activatedId === this.node.id;
+        }
+    }
     ngOnInit() {
         this.node.change = (check) => {
             if (check)
@@ -311,16 +366,46 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     }
     onActivate(event, node) {
         const change = this.tree.activatedNode?.change;
-        this.tree.nodeOpen && node.leaf && this.tree.onToggle(event, node);
+        this.tree.nodeOpen && !node.leaf && this.tree.onToggle(event, node);
+        const onChange = () => {
+            change && change();
+            event.stopPropagation();
+            this.cdr.detectChanges();
+        };
+        if (this.tree.onlyLeaf && !node.leaf) {
+            onChange();
+            return;
+        }
+        if (this.tree.multiple) {
+            if (!this.tree.activatedId)
+                this.tree.activatedId = [];
+            if (this.tree.objectArray) {
+                const ids = this.tree.activatedId.map((x) => x.id);
+                if (ids.includes(node.id)) {
+                    this.tree.activatedId.splice(ids.indexOf(node.id), 1);
+                }
+                else {
+                    this.tree.activatedId.push(node);
+                }
+            }
+            else {
+                if (this.tree.activatedId.includes(node.id)) {
+                    this.tree.activatedId.splice(this.tree.activatedId.indexOf(node.id), 1);
+                }
+                else {
+                    this.tree.activatedId.push(node.id);
+                }
+            }
+            this.tree.activatedIdChange.emit(this.tree.activatedId);
+        }
         if (this.tree.activatedNode) {
             if (this.tree.activatedNode.id === node.id && !this.tree.allowManyActivated)
                 return;
         }
         this.tree.activatedNode = node;
         this.tree.activatedChange.emit(node);
-        change && change();
-        event.stopPropagation();
-        this.cdr.detectChanges();
+        this.tree.nodeClick.emit(node);
+        onChange();
     }
     onCheckboxChange() {
         this.setCheckbox();
@@ -331,23 +416,18 @@ class XTreeNodeComponent extends XTreeNodeProperty {
             return;
         this.node.indeterminate = this.node.checked;
         this.node.children && this.setChildrenCheckbox(this.node.checked);
-        if (this.virtualScroll) {
-            const setParent = (node) => {
-                let parent = this.tree.nodes.find((x) => x.id === node.pid);
-                if (!parent || XIsEmpty(parent.children))
-                    return;
-                let checkedList = parent.children?.filter((y) => y.checked);
-                let indeterminateList = parent.children?.filter((y) => y.indeterminate);
-                parent.checked = checkedList?.length === parent.children?.length;
-                parent.indeterminate = checkedList.length > 0 || indeterminateList.length > 0;
-                parent.change && parent.change();
-                setParent(parent);
-            };
-            setParent(this.node);
-        }
-        else {
-            this.parent?.setParentCheckbox();
-        }
+        const setParent = (node) => {
+            let parent = this.tree.nodes.find((x) => x.id === node.pid);
+            if (!parent || XIsEmpty(parent.children))
+                return;
+            let checkedList = parent.children?.filter((y) => y.checked);
+            let indeterminateList = parent.children?.filter((y) => y.indeterminate);
+            parent.checked = checkedList?.length === parent.children?.length;
+            parent.indeterminate = checkedList.length > 0 || indeterminateList.length > 0;
+            parent.change && parent.change();
+            setParent(parent);
+        };
+        setParent(this.node);
     }
     setChildrenCheckbox(checked) {
         const setChildren = (children, isChecked) => {
@@ -372,7 +452,6 @@ class XTreeNodeComponent extends XTreeNodeProperty {
         let indeterminateList = this.node.children?.filter((x) => x.indeterminate);
         this.node.checked = checkedList?.length === this.node.children?.length;
         this.node.indeterminate = checkedList.length > 0 || indeterminateList.length > 0;
-        this.parent?.setParentCheckbox();
         this.cdr.detectChanges();
     }
     setIndeterminate(node) {
@@ -402,13 +481,11 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     }
 }
 /** @nocollapse */ XTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeNodeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { parent: "parent", tree: "tree" }, host: { properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"tree.activatedNode?.id === node.id\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!node.loading\"\r\n    [class.is-leaf]=\"!node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"getNodeDisabled(node.disabled)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n</div>\r\n<ul *ngIf=\"!virtualScroll && (node.childrenLoaded || (node.leaf && node.open))\" [hidden]=\"!node.open\">\r\n  <li\r\n    x-tree-node\r\n    *ngFor=\"let child of node.children; trackBy: trackByItem\"\r\n    [node]=\"child\"\r\n    [parent]=\"this\"\r\n    [lazy]=\"lazy\"\r\n    [lazyData]=\"lazyData\"\r\n    [nodeHeight]=\"nodeHeight\"\r\n    [nodeNowrap]=\"nodeNowrap\"\r\n    [nodeAlignItems]=\"nodeAlignItems\"\r\n    [tree]=\"tree\"\r\n  ></li>\r\n</ul>\r\n", styles: [".x-tree-node{margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;color:var(--x-text-400);font-size:1rem;margin-right:.125rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover,.x-tree-node-content.x-activated{background-color:var(--x-background-a100)}.x-tree-node-content:hover .x-tree-node-label,.x-tree-node-content.x-activated .x-tree-node-label{color:var(--x-primary)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.XIconComponent, selector: "x-icon" }, { kind: "component", type: i5.XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i7.XLinkComponent, selector: "x-link" }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["parent", "tree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { tree: "tree" }, host: { properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!node.loading\"\r\n    [class.is-leaf]=\"node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    class=\"x-tree-node-right\"\r\n    (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: [".x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.XIconComponent, selector: "x-icon" }, { kind: "component", type: i5.XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i7.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i8.XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"tree.activatedNode?.id === node.id\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!node.loading\"\r\n    [class.is-leaf]=\"!node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"getNodeDisabled(node.disabled)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n</div>\r\n<ul *ngIf=\"!virtualScroll && (node.childrenLoaded || (node.leaf && node.open))\" [hidden]=\"!node.open\">\r\n  <li\r\n    x-tree-node\r\n    *ngFor=\"let child of node.children; trackBy: trackByItem\"\r\n    [node]=\"child\"\r\n    [parent]=\"this\"\r\n    [lazy]=\"lazy\"\r\n    [lazyData]=\"lazyData\"\r\n    [nodeHeight]=\"nodeHeight\"\r\n    [nodeNowrap]=\"nodeNowrap\"\r\n    [nodeAlignItems]=\"nodeAlignItems\"\r\n    [tree]=\"tree\"\r\n  ></li>\r\n</ul>\r\n", styles: [".x-tree-node{margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;color:var(--x-text-400);font-size:1rem;margin-right:.125rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover,.x-tree-node-content.x-activated{background-color:var(--x-background-a100)}.x-tree-node-content:hover .x-tree-node-label,.x-tree-node-content.x-activated .x-tree-node-label{color:var(--x-primary)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { parent: [{
-                type: Input
-            }], tree: [{
+            args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!node.loading\"\r\n    [class.is-leaf]=\"node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    class=\"x-tree-node-right\"\r\n    (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: [".x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { tree: [{
                 type: Input
             }], rootClass: [{
                 type: HostBinding,
@@ -429,35 +506,56 @@ class XTreeComponent extends XTreeProperty {
         this.treeData = [];
         this._unSubject = new Subject();
     }
+    set _nodeComponents(value) {
+        this.nodeComponents = value;
+    }
     ngOnChanges(changes) {
         const { expandedAll, data, activatedId, checked, manual } = changes;
         XIsChange(data) && this.setData();
-        XIsChange(expandedAll) && this.setExpandedAll();
         XIsChange(activatedId) && this.setActivatedNode(this.treeData);
+        XIsChange(expandedAll) && this.setExpandedAll();
         XIsChange(checked) && this.setCheckedKeys(this.checked);
         XIsChange(manual) && this.setManual();
     }
+    ngAfterViewInit() {
+        if (this.virtualScroll && this.heightAdaption) {
+            this.setVirtualScrollHeight();
+            XResize(this.heightAdaption)
+                .pipe(debounceTime(30), takeUntil(this._unSubject))
+                .subscribe((x) => {
+                this._resizeObserver = x.resizeObserver;
+                this.setVirtualScrollHeight();
+            });
+        }
+        this.setScorllTop();
+    }
     ngOnDestroy() {
         this._unSubject.next();
         this._unSubject.unsubscribe();
+        this._resizeObserver?.disconnect();
     }
     setData() {
         if (typeof this.data === 'undefined')
             return;
         this.dataIsFunc = false;
-        if (XIsObservable(this.data)) {
-            XSetData(this.data, this._unSubject).subscribe((x) => {
-                this.setDataChange(x);
-            });
-        }
-        else if (XIsFunction(this.data)) {
+        if (XIsFunction(this.data)) {
             this.dataIsFunc = true;
             this.getDataByFunc();
         }
         else {
-            this.setDataChange(this.data);
+            XSetData(this.data, this._unSubject).subscribe((x) => {
+                this.setDataChange(x);
+            });
         }
     }
+    setVirtualScrollHeight() {
+        this.virtualScrollHeight = this.heightAdaption.clientHeight;
+        this.minBufferPx = this.virtualScrollHeight;
+        this.maxBufferPx = this.virtualScrollHeight * 1.2;
+        this.virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPx;
+        this.virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPx;
+        this.cdr.detectChanges();
+    }
     setManual() {
         if (this.dataIsFunc)
             this.getDataByFunc();
@@ -470,24 +568,57 @@ class XTreeComponent extends XTreeProperty {
         });
     }
     setDataChange(value) {
-        !XIsEmpty(this.activatedId) && this.setActivatedNode(value);
+        if (XIsEmpty(this.checked))
+            this.checked = [];
         const getChildren = (node, level) => {
             node.level = level;
-            node.open = Boolean(this.expandedAll) || level <= this.expandedLevel || this.expanded.indexOf(node.id) >= 0;
+            node.open = Boolean(this.expandedAll) || level <= this.expandedLevel || this.expanded.indexOf(node.id) >= 0 || node.open;
             node.checked = this.checked.indexOf(node.id) >= 0;
             node.childrenLoaded = node.open;
-            if (XIsUndefined(node.children))
+            if (XIsUndefined(node.children)) {
                 node.children = value.filter((y) => y.pid === node.id);
+                if (this.levelCheck && node.children && node.checked) {
+                    for (let nd of node.children) {
+                        nd.checked = true;
+                        this.checked.push(nd.id);
+                    }
+                }
+            }
             if (XIsUndefined(node.leaf))
-                node.leaf = node.children?.length > 0;
-            if (node.leaf)
+                node.leaf = node.children?.length === 0;
+            if (!node.leaf)
                 node.children?.map((y) => getChildren(y, level + 1));
             return node;
         };
         this.treeData = value;
         this.nodes = value.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0));
+        for (let item of value) {
+            if (item.open) {
+                this.setParentOpen(value, item);
+            }
+        }
+        this.setExpanded();
         this.cdr.detectChanges();
     }
+    setScorllTop() {
+        if (!this.scrollElement || !this.activatedNode)
+            return;
+        let inx = this.nodes.indexOf(this.activatedNode);
+        let com = this.nodeComponents.get(inx);
+        if (!com)
+            return;
+        let ele = com.elementRef.nativeElement;
+        let scrollEle = this.scrollElement;
+        let min = scrollEle.scrollTop;
+        let max = scrollEle.scrollTop + scrollEle.clientHeight;
+        if (ele.offsetTop + ele.clientHeight > max) {
+            let scrollTop = ele.offsetTop + ele.clientHeight - scrollEle.clientHeight;
+            scrollEle.scrollTop = scrollTop;
+        }
+        if (ele.offsetTop < min) {
+            scrollEle.scrollTop = ele.offsetTop;
+        }
+    }
     getCheckedNodes() {
         let result = [];
         const getChildren = (nodes) => {
@@ -511,15 +642,17 @@ class XTreeComponent extends XTreeProperty {
             if (XIsEmpty(nodes))
                 return;
             nodes.forEach((x) => {
-                x.checked = !clear && keys.indexOf(x.id) >= 0;
+                x.checked = !clear && keys.includes(x.id);
                 x.change && x.change(true);
                 setChildren(x.children, clear);
             });
         };
-        setChildren(this.nodes, keys.length === 0);
+        setChildren(this.nodes, XIsEmpty(keys));
         this.cdr.detectChanges();
     }
     setExpandedAll() {
+        if (this.expandedAll && this.treeData.length === this.nodes.length)
+            return;
         const setChildren = (nodes) => {
             if (XIsEmpty(nodes))
                 return;
@@ -530,7 +663,10 @@ class XTreeComponent extends XTreeProperty {
             });
         };
         setChildren(this.nodes);
-        if (this.virtualScroll) {
+        if (this.expandedAll === false) {
+            this.nodes = this.treeData.filter((x) => XIsEmpty(x.pid));
+        }
+        else {
             if (this.virtualNodes.length === 0) {
                 this.virtualNodes = [...this.nodes];
             }
@@ -540,6 +676,16 @@ class XTreeComponent extends XTreeProperty {
             }
         }
     }
+    setExpanded() {
+        for (let item of this.nodes) {
+            if (item.open) {
+                let index = this.nodes.indexOf(item);
+                this.nodes.splice(index + 1, 0, ...item.children);
+            }
+            item.change && item.change();
+        }
+        this.nodes = [...this.nodes];
+    }
     setVirtualExpandedAll(item, expandedAll) {
         let index = this.nodes.indexOf(item);
         if (expandedAll) {
@@ -582,15 +728,39 @@ class XTreeComponent extends XTreeProperty {
         this.nodes = [...this.nodes];
     }
     setActivatedNode(nodes) {
+        if (XIsEmpty(this.activatedId) && this.multiple) {
+            this.activatedId = [];
+        }
         let before = this.activatedNode;
-        this.activatedNode = nodes.find((x) => x.id == this.activatedId);
-        if (this.activatedNode) {
-            this.setParentOpen(nodes, this.activatedNode);
-            this.activatedChange.emit(this.activatedNode);
+        if (this.multiple) {
+            if (this.activatedId.length > 0) {
+                let ids = this.objectArray ? this.activatedId.map((x) => x.id) : this.activatedId;
+                for (let i = 0; i < ids.length; i++) {
+                    let node = nodes.find((x) => x.id === ids[i]);
+                    if (node) {
+                        this.setParentOpen(nodes, node);
+                        if (i === ids.length - 1) {
+                            this.activatedNode = node;
+                            this.activatedChange.emit(this.activatedNode);
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            let activatedId = this.activatedId;
+            this.activatedNode = nodes.find((x) => x.id == activatedId);
+            if (this.activatedNode) {
+                this.setParentOpen(nodes, this.activatedNode);
+                this.activatedChange.emit(this.activatedNode);
+            }
         }
         if (before) {
             before.change && before.change();
         }
+        if (!XIsEmpty(nodes)) {
+            this.setDataChange(nodes);
+        }
     }
     setParentOpen(nodes, node) {
         const getParent = (child) => {
@@ -598,31 +768,39 @@ class XTreeComponent extends XTreeProperty {
                 return;
             const parent = nodes.find((x) => x.id === child.pid);
             if (!XIsEmpty(parent)) {
-                this.expanded = [...this.expanded, parent.id];
-                parent.open = true;
-                parent.change && parent.change();
-                getParent(parent);
+                if (!this.expanded.includes(parent.id)) {
+                    this.expanded = [...this.expanded, parent.id];
+                    parent.open = true;
+                    parent.change && parent.change();
+                    getParent(parent);
+                }
+            }
+        };
+        getParent(node);
+    }
+    setParentCheck(nodes, node) {
+        const getParent = (child) => {
+            if (XIsEmpty(child.pid))
+                return;
+            const parent = nodes.find((x) => x.id === child.pid);
+            if (!XIsEmpty(parent)) {
+                if (!this.expanded.includes(parent.id)) {
+                    this.expanded = [...this.expanded, parent.id];
+                    parent.open = true;
+                    parent.change && parent.change();
+                    getParent(parent);
+                }
             }
         };
         getParent(node);
     }
     onToggle(event, node) {
         node.open = !node.open;
-        if (this.virtualScroll) {
-            if (this.lazy && !node.childrenLoaded) {
-                this.getLazyData(node, () => this.virtualToggle(node));
-            }
-            else {
-                this.virtualToggle(node);
-            }
+        if (this.lazy && !node.childrenLoaded) {
+            this.getLazyData(node, () => this.virtualToggle(node));
         }
-        else if (node.open && !node.childrenLoaded) {
-            if (this.lazy) {
-                this.getLazyData(node);
-            }
-            else {
-                node.childrenLoaded = true;
-            }
+        else {
+            this.virtualToggle(node);
         }
         event.preventDefault();
         event.stopPropagation();
@@ -654,22 +832,20 @@ class XTreeComponent extends XTreeProperty {
                 if (!parent.children)
                     parent.children = [];
                 this.expanded = [...this.expanded, parent.id];
-                this.activatedId = node.id;
+                this.setActivatedId(node);
                 node.level = Number(parent.level) + 1;
                 node.pid = parent.id;
                 this.treeData.push(node);
                 this.setActivatedNode(this.treeData);
                 parent.open = true;
-                parent.leaf = true;
+                parent.leaf = false;
                 parent.children = [...parent.children, node];
-                if (this.virtualScroll) {
-                    this.virtualToggle(parent);
-                    this.cdr.detectChanges();
-                }
+                this.virtualToggle(parent);
+                this.cdr.detectChanges();
                 parent.change && parent.change();
             }
             else if (XIsEmpty(node.pid)) {
-                this.activatedId = node.id;
+                this.setActivatedId(node);
                 node.level = 0;
                 this.treeData = [...this.treeData, node];
                 this.nodes = [...this.nodes, node];
@@ -686,39 +862,50 @@ class XTreeComponent extends XTreeProperty {
             _addNode();
         }
     }
+    setActivatedId(node) {
+        if (this.multiple) {
+            if (this.objectArray) {
+                this.activatedId = [node];
+            }
+            else {
+                this.activatedId = [node.id];
+            }
+        }
+        else {
+            this.activatedId = node.id;
+        }
+        this.activatedIdChange.emit(this.activatedId);
+    }
     removeNode(node) {
         let parent = this.treeData.find((x) => x.id === node.pid);
         if (parent) {
             if (!parent.children)
                 parent.children = [];
             parent.children.splice(parent.children.indexOf(node), 1);
-            parent.leaf = parent.children.length > 0;
-            if (!parent.leaf)
-                this.activatedId = parent.id;
-            if (this.virtualScroll) {
-                let index = this.nodes.indexOf(node);
-                let aindex = index - 1;
-                if (index === 0 && this.nodes.length > 1) {
-                    aindex = 1;
-                }
-                let activatedNode = this.nodes[aindex];
-                this.activatedId = activatedNode.id;
-                this.setActivatedNode(this.nodes);
-                this.nodes.splice(index, 1);
-                this.nodes = [...this.nodes];
-                if (activatedNode) {
-                    activatedNode.change && activatedNode.change();
-                }
-                this.cdr.detectChanges();
+            parent.leaf = parent.children.length === 0;
+            if (parent.leaf) {
+                this.setActivatedId(parent);
+            }
+            let index = this.nodes.indexOf(node);
+            let aindex = index - 1;
+            if (index === 0 && this.nodes.length > 1) {
+                aindex = 1;
             }
+            let activatedNode = this.nodes[aindex];
+            this.setActivatedId(activatedNode);
+            this.setActivatedNode(this.nodes);
+            this.nodes.splice(index, 1);
+            this.nodes = [...this.nodes];
+            if (activatedNode) {
+                activatedNode.change && activatedNode.change();
+            }
+            this.cdr.detectChanges();
             parent.change && parent.change();
         }
         else if (XIsEmpty(node.pid)) {
             this.treeData.splice(this.treeData.indexOf(node), 1);
             this.nodes.splice(this.nodes.indexOf(node), 1);
-            if (this.virtualScroll) {
-                this.nodes = [...this.nodes];
-            }
+            this.nodes = [...this.nodes];
             this.cdr.detectChanges();
         }
     }
@@ -731,26 +918,32 @@ class XTreeComponent extends XTreeProperty {
     }
 }
 /** @nocollapse */ XTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ XTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeComponent, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\">\r\n  <ul *ngIf=\"!virtualScroll; else virtualScrollTpl\">\r\n    <li\r\n      x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></li>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <x-tree-node\r\n      *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n      [virtualScroll]=\"virtualScroll\"\r\n    ></x-tree-node>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["parent", "tree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ XTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XTreeComponent, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "_nodeComponents", predicate: XTreeNodeComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\r\n    <x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></x-tree-node>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <x-tree-node\r\n      *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></x-tree-node>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["tree"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\">\r\n  <ul *ngIf=\"!virtualScroll; else virtualScrollTpl\">\r\n    <li\r\n      x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></li>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <x-tree-node\r\n      *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n      [virtualScroll]=\"virtualScroll\"\r\n    ></x-tree-node>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}\n"] }]
+            args: [{ selector: `${XTreePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\r\n    <x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></x-tree-node>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <x-tree-node\r\n      *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></x-tree-node>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { tree: [{
                 type: ViewChild,
                 args: ['tree', { static: true }]
+            }], virtualBody: [{
+                type: ViewChild,
+                args: ['virtualBody']
+            }], _nodeComponents: [{
+                type: ViewChildren,
+                args: [XTreeNodeComponent]
             }] } });
 
 class XTreeModule {
 }
 /** @nocollapse */ XTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ XTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule], exports: [XTreeComponent, XTreeNodeComponent] });
-/** @nocollapse */ XTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule] });
+/** @nocollapse */ XTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule, XKeywordModule], exports: [XTreeComponent, XTreeNodeComponent] });
+/** @nocollapse */ XTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule, XKeywordModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty],
                     exports: [XTreeComponent, XTreeNodeComponent],
-                    imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule]
+                    imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule, ScrollingModule, XKeywordModule]
                 }]
         }] });