@ng-nest/ui 14.0.8 → 14.0.10

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

@@ -2,7 +2,7 @@ import * as i0 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, XResize, XIsObservable, XSetData, XIsFunction, XIsUndefined } from '@ng-nest/ui/core';
+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';
@@ -112,7 +112,7 @@ class XTreeProperty extends XProperty {
     }
 }
 /** @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", scrollElement: "scrollElement", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", heightAdaption: "heightAdaption", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", multiple: "multiple", objectArray: "objectArray", keywordText: "keywordText", caseSensitive: "caseSensitive" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange" }, 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);
@@ -176,6 +176,10 @@ __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: '' }]
@@ -241,6 +245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], caseSensitive: [{
                 type: Input
+            }], onlyLeaf: [{
+                type: Input
             }], manualChange: [{
                 type: Output
             }], nodeClick: [{
@@ -334,17 +340,17 @@ class XTreeNodeComponent extends XTreeNodeProperty {
         return Number(((_a = this.node) === null || _a === void 0 ? void 0 : _a.level) ? this.node.level : 0) * Number(this.tree.spacing);
     }
     get getActivated() {
-        var _a;
+        var _a, _b;
         if (this.tree.multiple) {
             if (this.tree.objectArray) {
-                return this.tree.activatedId.map((x) => x.id).includes(this.node.id);
+                return (_a = this.tree.activatedId) === null || _a === void 0 ? void 0 : _a.map((x) => x.id).includes(this.node.id);
             }
             else {
-                return this.tree.activatedId.includes(this.node.id);
+                return (_b = this.tree.activatedId) === null || _b === void 0 ? void 0 : _b.includes(this.node.id);
             }
         }
         else {
-            return ((_a = this.tree.activatedNode) === null || _a === void 0 ? void 0 : _a.id) === this.node.id;
+            return this.tree.activatedId === this.node.id;
         }
     }
     ngOnInit() {
@@ -364,8 +370,19 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     onActivate(event, node) {
         var _a;
         const change = (_a = this.tree.activatedNode) === null || _a === void 0 ? void 0 : _a.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)) {
@@ -392,9 +409,7 @@ class XTreeNodeComponent extends XTreeNodeProperty {
         this.tree.activatedNode = node;
         this.tree.activatedChange.emit(node);
         this.tree.nodeClick.emit(node);
-        change && change();
-        event.stopPropagation();
-        this.cdr.detectChanges();
+        onChange();
     }
     onCheckboxChange() {
         this.setCheckbox();
@@ -472,10 +487,10 @@ 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: { 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  [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    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]=\"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    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-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover{background-color:var(--x-background-a200)}.x-tree-node-content.x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-400);margin-right:.125rem}.x-tree-node-checked{color:var(--x-primary)}.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 });
+/** @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]=\"getActivated\"\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    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]=\"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    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-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover{background-color:var(--x-background-a200)}.x-tree-node-content.x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-400);margin-right:.125rem}.x-tree-node-checked{color:var(--x-primary)}.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"] }]
+            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: [{
@@ -503,8 +518,8 @@ class XTreeComponent extends XTreeProperty {
     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();
     }
@@ -530,17 +545,14 @@ class XTreeComponent extends XTreeProperty {
         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() {
@@ -563,7 +575,8 @@ class XTreeComponent extends XTreeProperty {
         });
     }
     setDataChange(value) {
-        !XIsEmpty(this.activatedId) && this.setActivatedNode(value);
+        if (XIsEmpty(this.checked))
+            this.checked = [];
         const getChildren = (node, level) => {
             var _a, _b;
             node.level = level;
@@ -580,8 +593,8 @@ class XTreeComponent extends XTreeProperty {
                 }
             }
             if (XIsUndefined(node.leaf))
-                node.leaf = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            if (node.leaf)
+                node.leaf = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) === 0;
+            if (!node.leaf)
                 (_b = node.children) === null || _b === void 0 ? void 0 : _b.map((y) => getChildren(y, level + 1));
             return node;
         };
@@ -642,7 +655,7 @@ class XTreeComponent extends XTreeProperty {
                 setChildren(x.children, clear);
             });
         };
-        setChildren(this.nodes, keys.length === 0);
+        setChildren(this.nodes, XIsEmpty(keys));
         this.cdr.detectChanges();
     }
     setExpandedAll() {
@@ -673,10 +686,11 @@ class XTreeComponent extends XTreeProperty {
     }
     setExpanded() {
         for (let item of this.nodes) {
-            if (item.open) {
+            if (item.open && item.children) {
                 let index = this.nodes.indexOf(item);
                 this.nodes.splice(index + 1, 0, ...item.children);
             }
+            item.change && item.change();
         }
         this.nodes = [...this.nodes];
     }
@@ -752,6 +766,9 @@ class XTreeComponent extends XTreeProperty {
         if (before) {
             before.change && before.change();
         }
+        if (!XIsEmpty(nodes)) {
+            this.setDataChange(nodes);
+        }
     }
     setParentOpen(nodes, node) {
         const getParent = (child) => {
@@ -829,7 +846,7 @@ class XTreeComponent extends XTreeProperty {
                 this.treeData.push(node);
                 this.setActivatedNode(this.treeData);
                 parent.open = true;
-                parent.leaf = true;
+                parent.leaf = false;
                 parent.children = [...parent.children, node];
                 this.virtualToggle(parent);
                 this.cdr.detectChanges();
@@ -873,8 +890,8 @@ class XTreeComponent extends XTreeProperty {
             if (!parent.children)
                 parent.children = [];
             parent.children.splice(parent.children.indexOf(node), 1);
-            parent.leaf = parent.children.length > 0;
-            if (!parent.leaf) {
+            parent.leaf = parent.children.length === 0;
+            if (parent.leaf) {
                 this.setActivatedId(parent);
             }
             let index = this.nodes.indexOf(node);
@@ -909,10 +926,10 @@ 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 }, { 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\">\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}\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 });
+/** @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  <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}\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 }]