@ng-nest/ui 17.0.12 → 18.0.0

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

@@ -1,12 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, inject, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ViewChildren, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import * as i1$1 from '@ng-nest/ui/core';
-import { XProperty, XDataConvert, XInputBoolean, XInputNumber, XWithConfig, XIsEmpty, XRemove, XConfigService, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined } from '@ng-nest/ui/core';
-import { Subject, debounceTime, takeUntil, map } from 'rxjs';
-import * as i4 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { NgStyle } from '@angular/common';
+import { input, model, output, Component, Injectable, inject, computed, signal, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, viewChild, viewChildren, effect, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XProperty, XIsEmpty, XRemove, XComputedStyle, XToCssPx, XIsObjectArray, XIsArray, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined } from '@ng-nest/ui/core';
+import { Subject, debounceTime, map } from 'rxjs';
+import * as i3 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { DOCUMENT, NgStyle } from '@angular/common';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XCheckboxComponent } from '@ng-nest/ui/checkbox';
 import * as i1 from '@angular/forms';
@@ -14,8 +12,8 @@ import { FormsModule } from '@angular/forms';
 import { XKeywordDirective } from '@ng-nest/ui/keyword';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
-import * as i3 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/cdk/drag-drop';
+import { CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
 
 /**
  * Tree
@@ -23,267 +21,218 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
  * @decorator component
  */
 const XTreePrefix = 'x-tree';
-const X_CONFIG_NAME = 'tree';
+const X_TREE_CONFIG_NAME = 'tree';
 /**
  * Tree Property
  */
-class XTreeProperty extends XProperty {
+class XTreeProperty extends XPropertyFunction(X_TREE_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.data = [];
+        this.data = input([]);
+        /**
+         * @zh_CN 显示多选框
+         * @en_US Show checkbox
+         */
+        this.checkbox = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 开启懒加载节点，data 必须设置成函数类型
+         * @en_US Open lazy loading node, data must be set to function type
+         */
+        this.lazy = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 当前激活的节点 Id, 当 multiple 为 true 时，值为数组（默认是 Id 数组，objectArray 为 true，对象数组）
+         * @en_US Currently active node Id. When Multiple is true, the value is the Id array
+         */
+        this.activatedId = model(null);
         /**
          * @zh_CN 展开的节点
          * @en_US Expanded node
          */
-        this.expanded = [];
+        this.expanded = model([]);
         /**
          * @zh_CN checkbox 选中的节点
          * @en_US Checkbox selected node
          */
-        this.checked = [];
+        this.checked = model([]);
+        /**
+         * @zh_CN 展开所有节点
+         * @en_US Expand all nodes
+         */
+        this.expandedAll = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 默认展开的层级
          * @en_US Default expanded level
          */
-        this.expandedLevel = -1;
+        this.expandedLevel = input(-1, { transform: XToNumber });
+        /**
+         * @zh_CN 点击节点就触发展开/收起的操作，请确保节点上没有其它操作（checkbox、自定义的操作按钮）
+         * @en_US Click the node to trigger the expand/collapse operation, please make sure that there are no other operations on the node (checkbox, custom operation button)
+         */
+        this.nodeOpen = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 单位间距，这个与层级的乘积算出节点的左边距
+         * @en_US Unit spacing, the product of this and the level calculates the left margin of the node
+         */
+        this.spacing = input(this.config?.spacing ?? '1.5rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 标签自定义模板
+         * @en_US Label custom template
+         */
+        this.labelTpl = input();
+        /**
+         * @zh_CN 节点的高度, 默认是自适应高度
+         * @en_US The height of the node
+         */
+        this.nodeHeight = input(this.config?.nodeHeight ?? '', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 是否允许多次点击一个节点触发多次事件
+         * @en_US Whether to allow multiple clicks on a node to trigger multiple events
+         */
+        this.allowManyActivated = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 拖动节点
+         * @en_US Drag node
+         */
+        this.drag = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 当前点击选中的节点变化的事件
          * @en_US The event of the currently clicked node change
          */
-        this.activatedChange = new EventEmitter();
+        this.activatedChange = output();
         /**
          * @zh_CN 使用 checkedbox 选中变化的事件
          * @en_US Use checkedbox to select changed events
          */
-        this.checkboxChange = new EventEmitter();
+        this.checkboxChange = output();
         /**
-         * @zh_CN 如果 data 是函数类型，可以通过此参数控制请求，常用于弹框中的表格，弹出后再请求
+         * @zh_CN 如果 data 是函数类型，可以通过此参数控制请求，用于弹框中的表格，弹出后再请求
          * @en_US If data is a function type, you can use this parameter to control the request, which is often used in the form in the pop-up box, and then request it after it pops up
          */
-        this.manual = true;
+        this.manual = model(true);
         /**
          * @zh_CN checkbox 状态改变触发层级检查
          * @en_US Checkbox status changes trigger level checks
          */
-        this.levelCheck = true;
+        this.levelCheck = input(true, { transform: XToBoolean });
         /**
          * @zh_CN 节点内容不换行显示省略号
          * @en_US Show ellipsis without wrapping
          */
-        this.nodeNowrap = true;
+        this.nodeNowrap = input(true, { transform: XToBoolean });
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeAlignItems = input(this.config?.nodeAlignItems ?? 'center');
         /**
          * @zh_CN 树节点操作按钮
          * @en_US Tree node operation buttons
          */
-        this.actions = [];
+        this.actions = input([]);
+        /**
+         * @zh_CN 滚动区域元素
+         * @en_US Rolling area element
+         */
+        this.scrollElement = input();
+        /**
+         * @zh_CN 开启虚拟滚动
+         * @en_US Turn on virtual scrolling
+         */
+        this.virtualScroll = input(this.config?.virtualScroll ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 滚动区域高度，开启虚拟滚动的时候生效
+         * @en_US Rolling area height
+         */
+        this.virtualScrollHeight = input(this.config?.virtualScrollHeight ?? '400px', {
+            transform: XToCssPixelValue
+        });
+        /**
+         * @zh_CN 虚拟滚动高度自适应指定元素
+         * @en_US virtual rolling height follows the specified object
+         */
+        this.heightAdaption = input();
+        /**
+         * @zh_CN itemSize，对应 cdk scroll 中的参数，开启虚拟滚动才生效
+         * @en_US itemSize，corresponding to the parameters in cdk scroll
+         */
+        this.itemSize = input(this.config?.itemSize ?? 34, { transform: XToNumber });
         /**
          * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数，开启虚拟滚动才生效
          * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
          */
-        this.minBufferPx = 100;
+        this.minBufferPx = input(100, { transform: XToNumber });
         /**
          * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数，开启虚拟滚动才生效
          * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
          */
-        this.maxBufferPx = 200;
+        this.maxBufferPx = input(200, { transform: XToNumber });
         /**
-         * @zh_CN 参数控制请求改变事件
-         * @en_US Parameter control request change event
+         * @zh_CN 多选功能，当前激活的节点可以是多个
+         * @en_US Multiple choice
          */
-        this.manualChange = new EventEmitter();
+        this.multiple = input(false, { transform: XToBoolean });
         /**
-         * @zh_CN 节点点击事件
-         * @en_US Node click event
+         * @zh_CN 当开启多选的时候，activatedId 的值为对象数组
+         * @en_US When multiple selection is enabled, the value of activatedId is an array of objects
+         */
+        this.objectArray = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 关键字高亮，针对下拉树搜索
+         * @en_US Keyword highlighting
+         */
+        this.keywordText = input();
+        /**
+         * @zh_CN 匹配关键字区分大小写，针对下拉树搜索
+         * @en_US Case-sensitive
+         */
+        this.caseSensitive = input(this.config?.caseSensitive ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 只能选择叶子节点
+         * @en_US Only leaf nodes can be selected
+         */
+        this.onlyLeaf = input(this.config?.onlyLeaf ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 展开收起的图标自定义模版
+         * @en_US Expand the folded icon custom template
          */
-        this.nodeClick = new EventEmitter();
+        this.expandedIcon = input();
+        /**
+         * @zh_CN 显示连接线
+         * @en_US Show line
+         */
+        this.showLine = input(this.config?.showLine ?? false, { transform: XToBoolean });
         /**
          * @zh_CN 节点点击事件
          * @en_US Node click event
          */
-        this.activatedIdChange = new EventEmitter();
+        this.nodeClick = output();
         /**
          * @zh_CN 节点开始拖动事件
          * @en_US Node drag started
          */
-        this.nodeDragStarted = new EventEmitter();
+        this.nodeDragStarted = output();
         /**
          * @zh_CN 节点结束拖动事件
          * @en_US Node drag ended
          */
-        this.nodeDragEnded = new EventEmitter();
+        this.nodeDragEnded = output();
         /**
          * @zh_CN 节点正在拖动事件
          * @en_US Node drag moved
          */
-        this.nodeDragMoved = new EventEmitter();
+        this.nodeDragMoved = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XTreeProperty, selector: "x-tree-property", 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", drag: "drag", 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", expandedIcon: "expandedIcon", showLine: "showLine" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTreeProperty, selector: "x-tree-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, nodeOpen: { classPropertyName: "nodeOpen", publicName: "nodeOpen", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, labelTpl: { classPropertyName: "labelTpl", publicName: "labelTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, allowManyActivated: { classPropertyName: "allowManyActivated", publicName: "allowManyActivated", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, levelCheck: { classPropertyName: "levelCheck", publicName: "levelCheck", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollHeight: { classPropertyName: "virtualScrollHeight", publicName: "virtualScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, onlyLeaf: { classPropertyName: "onlyLeaf", publicName: "onlyLeaf", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", expanded: "expandedChange", checked: "checkedChange", activatedChange: "activatedChange", checkboxChange: "checkboxChange", manual: "manualChange", nodeClick: "nodeClick", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XDataConvert()
-], XTreeProperty.prototype, "data", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "checkbox", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "lazy", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "expandedAll", void 0);
-__decorate([
-    XInputNumber()
-], XTreeProperty.prototype, "expandedLevel", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "nodeOpen", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 1.5),
-    XInputNumber()
-], XTreeProperty.prototype, "spacing", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 0),
-    XInputNumber()
-], XTreeProperty.prototype, "nodeHeight", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "allowManyActivated", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "drag", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "manual", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "levelCheck", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeProperty.prototype, "nodeNowrap", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'center')
-], XTreeProperty.prototype, "nodeAlignItems", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME),
-    XInputBoolean()
-], XTreeProperty.prototype, "virtualScroll", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 400),
-    XInputNumber()
-], XTreeProperty.prototype, "virtualScrollHeight", void 0);
-__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);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, false)
-], XTreeProperty.prototype, "showLine", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreePrefix}-property`, template: '' }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], checkbox: [{
-                type: Input
-            }], lazy: [{
-                type: Input
-            }], activatedId: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], expandedAll: [{
-                type: Input
-            }], expandedLevel: [{
-                type: Input
-            }], nodeOpen: [{
-                type: Input
-            }], spacing: [{
-                type: Input
-            }], labelTpl: [{
-                type: Input
-            }], nodeHeight: [{
-                type: Input
-            }], allowManyActivated: [{
-                type: Input
-            }], drag: [{
-                type: Input
-            }], activatedChange: [{
-                type: Output
-            }], checkboxChange: [{
-                type: Output
-            }], manual: [{
-                type: Input
-            }], levelCheck: [{
-                type: Input
-            }], nodeNowrap: [{
-                type: Input
-            }], nodeAlignItems: [{
-                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
-            }], expandedIcon: [{
-                type: Input
-            }], showLine: [{
-                type: Input
-            }], manualChange: [{
-                type: Output
-            }], nodeClick: [{
-                type: Output
-            }], activatedIdChange: [{
-                type: Output
-            }], nodeDragStarted: [{
-                type: Output
-            }], nodeDragEnded: [{
-                type: Output
-            }], nodeDragMoved: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * TreeNode
  * @selector x-tree-node
@@ -300,53 +249,105 @@ class XTreeNodeProperty extends XProperty {
          * @zh_CN 节点数据
          * @en_US Node data
          */
-        this.node = {};
+        this.node = input({});
+        /**
+         * @zh_CN 层级
+         * @en_US Level
+         */
+        this.level = model(0);
+        /**
+         * @zh_CN 节点的高度
+         * @en_US The height of the node
+         */
+        this.nodeHeight = model('');
+        /**
+         * @zh_CN 节点内容不换行显示省略号
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeNowrap = model(false);
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeAlignItems = model('center');
+        /**
+         * @zh_CN 标记为虚拟滚动的节点
+         * @en_US Mark as a node of virtual rolling
+         */
+        this.virtualScroll = model(false);
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = model(false);
+        /**
+         * @zh_CN id
+         * @en_US Id
+         */
+        this.id = model();
+        /**
+         * @zh_CN pid
+         * @en_US pId
+         */
+        this.pid = model();
         /**
-         * @zh_CN 节点的高度，单位 rem
-         * @en_US The height of the node in rem
+         * @zh_CN 叶子节点
+         * @en_US A leaf node
          */
-        this.nodeHeight = 0;
+        this.leaf = model(false);
+        /**
+         * @zh_CN 节点的高度
+         * @en_US The height of the node
+         */
+        this.height = model('');
         /**
          * @zh_CN 节点垂直对齐方式
          * @en_US Show ellipsis without wrapping
          */
-        this.nodeAlignItems = 'center';
+        this.alignItems = model();
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.loading = model(false);
+        /**
+         * @zh_CN 展开
+         * @en_US open
+         */
+        this.open = model(false);
+        /**
+         * @zh_CN checkbox 是否选中
+         * @en_US whether checkbox is selected
+         */
+        this.checked = model(false);
+        /**
+         * @zh_CN checkbox 子节点是否有选中的状态
+         * @en_US Whether the child node of checkbox is selected
+         */
+        this.indeterminate = model(false);
+        /**
+         * @zh_CN 节点名称
+         * @en_US The name of the node
+         */
+        this.label = model('');
+        /**
+         * @zh_CN 节点内容不换行显示省略号，优先级高于 tree 参数
+         * @en_US Show ellipsis without wrapping, highest priority
+         */
+        this.nowrap = model(false);
+        /**
+         * @zh_CN 节点展开收起事件
+         * @en_US Node expansion pack up
+         */
+        this.toggle = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XTreeNodeProperty, selector: "x-tree-node-property", inputs: { node: "node", level: "level", lazy: "lazy", nodeHeight: "nodeHeight", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", lazyData: "lazyData", virtualScroll: "virtualScroll" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XTreeNodeProperty, selector: "x-tree-node-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pid: { classPropertyName: "pid", publicName: "pid", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", nodeHeight: "nodeHeightChange", nodeNowrap: "nodeNowrapChange", nodeAlignItems: "nodeAlignItemsChange", virtualScroll: "virtualScrollChange", disabled: "disabledChange", id: "idChange", pid: "pidChange", leaf: "leafChange", height: "heightChange", alignItems: "alignItemsChange", loading: "loadingChange", open: "openChange", checked: "checkedChange", indeterminate: "indeterminateChange", label: "labelChange", nowrap: "nowrapChange", toggle: "toggle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XTreeNodeProperty.prototype, "lazy", void 0);
-__decorate([
-    XInputNumber()
-], XTreeNodeProperty.prototype, "nodeHeight", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeNodeProperty.prototype, "nodeNowrap", void 0);
-__decorate([
-    XInputBoolean()
-], XTreeNodeProperty.prototype, "virtualScroll", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}-property`, template: '' }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], lazy: [{
-                type: Input
-            }], nodeHeight: [{
-                type: Input
-            }], nodeNowrap: [{
-                type: Input
-            }], nodeAlignItems: [{
-                type: Input
-            }], lazyData: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }] } });
+        }] });
 
 class XTreeService {
     getChildren(data, node) {
@@ -415,10 +416,10 @@ class XTreeService {
             data.splice(pos === -1 ? index : index + 1, 0, from);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -426,175 +427,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
 class XTreeNodeComponent extends XTreeNodeProperty {
     constructor() {
         super(...arguments);
-        this.nodeMouseenter = new EventEmitter();
+        this.tree = inject(XTreeComponent, { optional: true, host: true });
+        this.nodeMouseenter = output();
         this.rootClass = true;
-        this._loading = false;
-        this._unSubject = new Subject();
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
+        this.unSubject = new Subject();
+        this.showDragIndicator = computed(() => {
+            return this.tree.dragging() && this.tree.hoverTreeNode()?.id === this.id();
+        });
+        this.isChildrenLast = computed(() => {
+            let parent = this.tree.nodes().find((x) => x.id === this.pid());
+            if (!parent || !parent.children)
+                return false;
+            const index = parent.children.indexOf(this.node());
+            return index + 1 === parent.children.length;
+        });
+        this.isParentLast = computed(() => {
+            let parents = this.treeService.getParents(this.tree.nodes(), this.node());
+            if (parents.length <= 1)
+                return [];
+            const res = [];
+            parents.reduce((pre, curr) => {
+                if (pre === null)
+                    return curr;
+                const index = curr.children?.indexOf(pre);
+                res.push(index + 1 === curr.children?.length);
+                return curr;
+            });
+            return res.reverse();
+        });
+        this.verticalLevel = computed(() => {
+            if (this.level() > 0) {
+                return Array.from({ length: this.level() }).map((_x, index) => index + 1);
+            }
+            else {
+                return [];
+            }
+        });
+        this.verticalWidth = computed(() => {
+            return XToCssPx(this.tree.spacing(), this.fontSize()) / 2;
+        });
+        this.paddingLeft = computed(() => (this.level() ? this.level() : 0) * XToCssPx(this.tree.spacing(), this.fontSize()));
+        this.indicatorWidth = computed(() => {
+            return `calc(100% - ${this.paddingLeft() + (this.leaf() ? this.fontSize() * 1.5 : 0)}px)`;
+        });
+        this.indicatorStyle = computed(() => {
+            if (this.tree.dragPosition() === 1) {
+                return { bottom: `-${0.0625 * this.fontSize()}px` };
+            }
+            else if (this.tree.dragPosition() === -1) {
+                return { top: `-${0.0625 * this.fontSize()}px` };
+            }
+            return {};
+        });
+        this.changed = signal(false);
+        this.activated = computed(() => {
+            this.changed();
+            const activatedId = this.tree.activatedId();
+            if (this.tree.multiple()) {
+                if (this.tree.objectArray()) {
+                    return XIsObjectArray(activatedId) && activatedId.map((x) => x.id).includes(this.id());
+                }
+                else {
+                    return XIsArray(activatedId) && activatedId.includes(this.id());
+                }
+            }
+            else {
+                return activatedId === this.id();
+            }
+        });
         this.cdr = inject(ChangeDetectorRef);
         this.treeService = inject(XTreeService);
         this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
-    }
-    get loading() {
-        return this._loading;
-    }
-    set loading(value) {
-        this._loading = value;
-        this.cdr.detectChanges();
-    }
-    get showDragIndicator() {
-        return this.tree.dragging && this.tree.hoverTreeNode?.id === this.node.id;
     }
     onMouseenter(event) {
-        this.nodeMouseenter.emit({ event: event, node: this.node, ele: this.elementRef });
+        this.nodeMouseenter.emit({ event: event, node: this.node(), ele: this.elementRef });
     }
     onMouseleave(_event) {
-        if (!this.tree.dragging)
+        if (!this.tree.dragging())
             return;
-        this.tree.hoverTreeNode?.change && this.tree.hoverTreeNode?.change();
+        const hoverTreeNode = this.tree.hoverTreeNode();
+        hoverTreeNode && hoverTreeNode.change && hoverTreeNode.change();
         this.cdr.detectChanges();
     }
-    get isChildrenLast() {
-        let parent = this.tree.nodes.find((x) => x.id === this.node.pid);
-        if (!parent)
-            return false;
-        const index = parent.children.indexOf(this.node);
-        return index + 1 === parent.children.length;
-    }
-    get isParentLast() {
-        let parents = this.treeService.getParents(this.tree.nodes, this.node);
-        if (parents.length <= 1)
-            return [];
-        const res = [];
-        parents.reduce((pre, curr) => {
-            if (pre === null)
-                return curr;
-            const index = curr.children?.indexOf(pre);
-            res.push(index + 1 === curr.children?.length);
-            return curr;
-        });
-        return res.reverse();
-    }
-    get numLevel() {
-        return Number(this.level);
-    }
-    get verticalLevel() {
-        if (this.numLevel > 0) {
-            return Array.from({ length: this.numLevel }).map((_x, index) => index + 1);
-        }
-        else {
-            return [];
-        }
-    }
-    get verticalWidth() {
-        return Number(this.tree.spacing) / 2;
-    }
-    get paddingLeft() {
-        return Number(this.node?.level ? this.node.level : 0) * Number(this.tree.spacing);
-    }
-    get indicatorWidth() {
-        return `calc(100% - ${this.paddingLeft + (this.node.leaf ? 1.5 : 0)}rem)`;
-    }
-    get indicatorStyle() {
-        if (this.tree.dragPosition === 1) {
-            return { bottom: `${-0.0625}rem` };
-        }
-        else if (this.tree.dragPosition === -1) {
-            return { top: `${-0.0625}rem` };
-        }
-        return {};
-    }
-    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) => {
+        const node = this.node();
+        node.change = (check) => {
             if (check)
                 this.setCheckbox();
-            this?.cdr.detectChanges();
+            this.cdr.detectChanges();
         };
-        this.level = this.node?.level ? this.node.level : 0;
-        if (!this.tree.levelCheck)
+        if (!this.tree.levelCheck())
             return;
-        if (this.node.checked)
+        if (this.checked())
             this.setCheckbox();
-        this.setIndeterminate(this.node);
+        this.setIndeterminate(this.node());
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.complete();
+        this.unSubject.next();
+        this.unSubject.complete();
     }
     onActivate(event, node) {
-        const change = this.tree.activatedNode?.change;
-        this.tree.nodeOpen && !node.leaf && this.tree.onToggle(event, node);
+        const change = this.tree.activatedNode()?.change;
+        this.tree.nodeOpen() && !this.leaf() && this.onToggle(event, node);
         const onChange = () => {
             change && change();
             event.preventDefault();
             event.stopPropagation();
             this.cdr.detectChanges();
         };
-        if (this.tree.onlyLeaf && !node.leaf) {
+        if (this.tree.onlyLeaf() && !this.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 (this.tree.multiple()) {
+            if (!this.tree.activatedId())
+                this.tree.activatedId.set([]);
+            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);
+                    this.tree.activatedId.update((x) => {
+                        x.splice(ids.indexOf(node.id), 1);
+                        return [...x];
+                    });
                 }
                 else {
-                    this.tree.activatedId.push(node);
+                    this.tree.activatedId.update((x) => {
+                        x.push(node);
+                        return [...x];
+                    });
                 }
             }
             else {
-                if (this.tree.activatedId.includes(node.id)) {
-                    this.tree.activatedId.splice(this.tree.activatedId.indexOf(node.id), 1);
+                if (this.tree.activatedId().includes(node.id)) {
+                    this.tree.activatedId.update((x) => {
+                        x.splice(this.tree.activatedId().indexOf(node.id), 1);
+                        return [...x];
+                    });
                 }
                 else {
-                    this.tree.activatedId.push(node.id);
+                    this.tree.activatedId.update((x) => {
+                        x.push(node.id);
+                        return [...x];
+                    });
                 }
             }
         }
         else {
-            this.tree.activatedId = node.id;
+            this.tree.activatedId.set(node.id);
         }
-        if (this.tree.activatedNode) {
-            if (this.tree.activatedNode.id === node.id && !this.tree.allowManyActivated)
+        if (this.tree.activatedNode()) {
+            if (this.tree.activatedNode()?.id === node.id && !this.tree.allowManyActivated())
                 return;
         }
-        this.tree.activatedNode = node;
-        this.tree.activatedIdChange.emit(this.tree.activatedId);
+        this.tree.activatedNode.set(node);
+        this.changed.update((x) => !x);
         this.tree.activatedChange.emit(node);
         this.tree.nodeClick.emit(node);
         onChange();
     }
     onCheckboxChange() {
         this.setCheckbox();
-        this.tree.checkboxChange.emit(this.node);
+        this.tree.checkboxChange.emit(this.node());
     }
     getVerticalLeft(i) {
-        return (i - 1) * Number(this.tree.spacing) + Number(this.tree.spacing) / 2;
+        const spacing = XToCssPx(this.tree.spacing(), this.fontSize());
+        return (i - 1) * spacing + spacing / 2;
     }
     setCheckbox() {
-        if (!this.tree.levelCheck)
+        if (!this.tree.levelCheck())
             return;
-        this.node.indeterminate = this.node.checked;
-        this.node.children && this.setChildrenCheckbox(this.node.checked);
+        this.node().indeterminate = this.checked();
+        this.node().children && this.setChildrenCheckbox(this.checked());
         const setParent = (node) => {
-            let parent = this.tree.nodes.find((x) => x.id === node.pid);
+            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);
@@ -604,7 +611,8 @@ class XTreeNodeComponent extends XTreeNodeProperty {
             parent.change && parent.change();
             setParent(parent);
         };
-        setParent(this.node);
+        setParent(this.node());
+        this.cdr.detectChanges();
     }
     setChildrenCheckbox(checked) {
         const setChildren = (children, isChecked) => {
@@ -619,16 +627,17 @@ class XTreeNodeComponent extends XTreeNodeProperty {
                 setChildren(x.children, isChecked);
             }
         };
-        setChildren(this.node.children, checked);
+        setChildren(this.node().children, checked);
         this.cdr.detectChanges();
     }
     setParentCheckbox() {
-        if (XIsEmpty(this.node.children))
+        if (XIsEmpty(this.node().children))
             return;
-        let checkedList = this.node.children?.filter((x) => x.checked);
-        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;
+        let checkedList = this.node().children?.filter((x) => x.checked);
+        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.cdr.detectChanges();
     }
     setIndeterminate(node) {
@@ -653,16 +662,21 @@ class XTreeNodeComponent extends XTreeNodeProperty {
         action.handler && action.handler(node);
         event.stopPropagation();
     }
+    onToggle(event, node) {
+        this.toggle.emit(node);
+        event?.preventDefault();
+        event?.stopPropagation();
+    }
     trackByItem(_index, item) {
         return `${item.id}-${item.level}`;
     }
     trackByAction(_index, item) {
         return item.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", inputs: { tree: "tree" }, outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, 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  [class.x-tree-node-last]=\"isChildrenLast\"\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  @if (tree.showLine && numLevel > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.rem]=\"paddingLeft\">\r\n      @for (i of verticalLevel; track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel.length\"\r\n          [style.left.rem]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.rem]=\"verticalWidth\"\r\n        [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  }\r\n  @if (node.loading) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      @if (tree.expandedIcon) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox) {\r\n    <x-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      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl) {\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      >{{ node.label }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions; track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node)\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple && getActivated) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);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: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-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.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}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, 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]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (tree.expandedIcon()) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.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)}.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-primary-900);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-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.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}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, standalone: true, imports: [
                         NgStyle,
@@ -672,12 +686,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XOutletDirective,
                         XLinkComponent,
                         XKeywordDirective
-                    ], 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  [class.x-tree-node-last]=\"isChildrenLast\"\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  @if (tree.showLine && numLevel > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.rem]=\"paddingLeft\">\r\n      @for (i of verticalLevel; track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel.length\"\r\n          [style.left.rem]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.rem]=\"verticalWidth\"\r\n        [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  }\r\n  @if (node.loading) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      @if (tree.expandedIcon) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox) {\r\n    <x-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      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl) {\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      >{{ node.label }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions; track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node)\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple && getActivated) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);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: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-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.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}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
-        }], propDecorators: { tree: [{
-                type: Input
-            }], nodeMouseenter: [{
-                type: Output
-            }], rootClass: [{
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (tree.expandedIcon()) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.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)}.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-primary-900);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-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.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}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
+        }], propDecorators: { rootClass: [{
                 type: HostBinding,
                 args: ['class.x-tree-node']
             }], onMouseenter: [{
@@ -689,174 +699,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
             }] } });
 
 class XTreeComponent extends XTreeProperty {
-    set _nodeComponents(value) {
-        this.nodeComponents = value;
-    }
-    get isEmpty() {
-        return XIsEmpty(this.nodes);
-    }
-    constructor(renderer, elementRef, cdr, configService, ngZone, treeService) {
+    constructor(renderer, elementRef, cdr, treeService) {
         super();
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.configService = configService;
-        this.ngZone = ngZone;
         this.treeService = treeService;
-        this.nodes = [];
-        this.virtualNodes = [];
-        this.dataIsFunc = false;
-        this.getting = false;
-        this.treeData = [];
-        this.dragging = false;
-        this.draggingTreeNode = null;
-        this.hasChecked = false;
-        this._unSubject = new Subject();
+        this.tree = viewChild('tree', { read: (ElementRef) });
+        this.virtualBody = viewChild('virtualBody', { read: CdkVirtualScrollViewport });
+        this.dropList = viewChild('dropList', { read: (CdkDropList) });
+        this.nodeComponents = viewChildren(XTreeNodeComponent);
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')));
+        this.nodes = signal([]);
+        this.virtualNodes = signal([]);
+        this.activatedNode = signal(null);
+        this.dataIsFunc = signal(false);
+        this.getting = signal(false);
+        this.treeData = signal([]);
+        this.dragging = signal(false);
+        this.dragPosition = signal(-1);
+        this.hoverTreeNode = signal(null);
+        this.draggingTreeNode = signal(null);
+        this.hasChecked = signal(false);
+        this.isEmpty = computed(() => XIsEmpty(this.nodes()));
+        this.unSubject = new Subject();
+        this.heightAdaptionSignal = signal(0);
+        this.isVirtualScrollAdaption = computed(() => {
+            return !!(this.virtualScroll() && this.heightAdaption());
+        });
+        this.virtualScrollHeightSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.heightAdaptionSignal();
+            }
+            else {
+                return XToCssPx(this.virtualScrollHeight(), this.fontSize());
+            }
+        });
+        this.minBufferPxSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.virtualScrollHeightSignal();
+            }
+            else {
+                return this.minBufferPx();
+            }
+        });
+        this.maxBufferPxSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.virtualScrollHeightSignal() * 1.2;
+            }
+            else {
+                return this.maxBufferPx();
+            }
+        });
+        effect(() => {
+            const virtualBody = this.virtualBody();
+            if (virtualBody) {
+                virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
+                virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPxSignal();
+            }
+        });
     }
     ngOnChanges(changes) {
-        const { expandedAll, data, activatedId, checked, manual } = changes;
+        const { expandedAll, data, checked, manual } = changes;
         XIsChange(data) && this.setData();
-        XIsChange(activatedId) && this.setActivatedNode(this.treeData);
         XIsChange(expandedAll) && this.setExpandedAll();
-        XIsChange(checked) && this.setCheckedKeys(this.checked);
+        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();
-            });
+        if (this.isVirtualScrollAdaption()) {
+            this.heightAdaptionSignal.set(this.heightAdaption().clientHeight);
+            XResize(this.heightAdaption())
+                .pipe(debounceTime(30), map(({ resizeObserver }) => {
+                this.resizeObserver = resizeObserver;
+                this.heightAdaptionSignal.set(this.heightAdaption().clientHeight);
+            }))
+                .subscribe();
         }
-        this.setScorllTop();
+        this.setActivatedNode(this.treeData());
+        this.setScrollTop();
     }
     ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
-        this._resizeObserver?.disconnect();
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
     }
     setData() {
-        if (typeof this.data === 'undefined')
+        if (typeof this.data() === 'undefined')
             return;
-        this.dataIsFunc = false;
-        if (XIsFunction(this.data)) {
-            this.dataIsFunc = true;
+        this.dataIsFunc.set(false);
+        if (XIsFunction(this.data())) {
+            this.dataIsFunc.set(true);
             this.getDataByFunc();
         }
         else {
-            XSetData(this.data, this._unSubject).subscribe((x) => {
+            XSetData(this.data(), this.unSubject).subscribe((x) => {
                 this.setDataChange(x);
             });
         }
     }
     cdkDragStarted(event) {
-        this.dragging = true;
-        this.draggingTreeNode = event.source.data;
+        this.dragging.set(true);
+        this.draggingTreeNode.set(event.source.data);
         if (event.source.data.open) {
             this.onToggle(event.event, event.source.data);
         }
-        this.nodeDragStarted.emit({ event, from: this.draggingTreeNode });
+        this.nodeDragStarted.emit({ event, from: this.draggingTreeNode() });
     }
     cdkDragEnded(event) {
-        this.dragging = false;
-        if (this.hoverTreeNode) {
-            if (this.hoverTreeNode.id !== event.source.data.id) {
-                this.insertNode(event.source.data, this.hoverTreeNode, this.dragPosition);
+        this.dragging.set(false);
+        const hoverTreeNode = this.hoverTreeNode();
+        if (hoverTreeNode) {
+            if (hoverTreeNode.id !== event.source.data.id) {
+                this.insertNode(event.source.data, hoverTreeNode, this.dragPosition());
             }
-            this.hoverTreeNode.change && this.hoverTreeNode.change();
+            hoverTreeNode.change && hoverTreeNode.change();
             this.nodeDragEnded.emit({
                 event,
                 from: event.source.data,
-                to: this.hoverTreeNode,
-                position: this.dragPosition
+                to: hoverTreeNode,
+                position: this.dragPosition()
             });
         }
     }
     insertNode(dragNode, hoverNode, dragPosition) {
-        let parent = this.nodes.find((x) => x.id === dragNode.pid);
-        this.treeService.moveNode(this.treeData, dragNode, hoverNode, dragPosition);
-        this.setDataChange(this.treeData, true, false, true, parent);
+        let parent = this.nodes().find((x) => x.id === dragNode.pid);
+        this.treeService.moveNode(this.treeData(), dragNode, hoverNode, dragPosition);
+        this.setDataChange(this.treeData(), true, false, true, parent);
     }
     cdkDragMoved(event) {
-        if (!this.dragging || !this.hoverTreeNode)
+        const hoverTreeNode = this.hoverTreeNode();
+        if (!this.dragging() || !hoverTreeNode)
             return;
         const y = event.pointerPosition.y;
-        if (event.source.data.id === this.hoverTreeNode.id)
+        if (event.source.data.id === hoverTreeNode.id)
             return;
         const target = this.hoverTreeEle.nativeElement;
         const { top, height } = target.getBoundingClientRect();
         const des = Math.max(height * 0.5, 2);
         if (y > top && y < top + des) {
-            this.dragPosition = -1;
+            this.dragPosition.set(-1);
         }
         else if (y > top + des && y < top + height) {
-            this.dragPosition = 1;
+            this.dragPosition.set(1);
         }
-        this.hoverTreeNode.change && this.hoverTreeNode.change();
+        hoverTreeNode.change && hoverTreeNode.change();
         this.nodeDragMoved.emit({
             event,
-            from: this.draggingTreeNode,
-            to: this.hoverTreeNode,
-            position: this.dragPosition
+            from: this.draggingTreeNode(),
+            to: hoverTreeNode,
+            position: this.dragPosition()
         });
     }
     predicate(_drag, _drop) {
         return true;
     }
-    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)
+        if (this.dataIsFunc())
             this.getDataByFunc();
     }
     getDataByFunc() {
-        if (!this.manual)
+        if (!this.manual())
             return;
-        XSetData(this.data(), this._unSubject).subscribe((x) => {
+        XSetData(this.data()(), this.unSubject).subscribe((x) => {
             this.setDataChange(x);
         });
     }
     setDataChange(value, regetChildren = false, init = true, parentOpen = true, lazyParant) {
-        if (XIsEmpty(this.checked) || !this.hasChecked)
-            this.checked = [];
+        if (XIsEmpty(this.checked()) || !this.hasChecked())
+            this.checked.set([]);
         const getChildren = (node, level) => {
             if (init) {
                 node.level = level;
                 node.open =
-                    Boolean(this.expandedAll) ||
-                        level <= Number(this.expandedLevel) ||
-                        this.expanded.includes(node.id) ||
-                        node.open;
-                node.checked = this.checked.includes(node.id) || node.checked;
+                    this.expandedAll() || level <= this.expandedLevel() || this.expanded().includes(node.id) || node.open;
+                node.checked = this.checked().includes(node.id) || node.checked;
                 node.childrenLoaded = node.open;
             }
             if (XIsUndefined(node.children) || regetChildren) {
                 node.children = value.filter((y) => y.pid === node.id);
-                if (this.levelCheck && node.children && node.checked) {
+                if (this.levelCheck() && node.children && node.checked) {
                     for (let nd of node.children) {
                         nd.checked = true;
-                        this.checked.push(nd.id);
+                        this.checked.update((x) => {
+                            x.push(nd.id);
+                            return [...x];
+                        });
                     }
                 }
             }
-            if ((!this.lazy && (XIsUndefined(node.leaf) || regetChildren)) || node.id === lazyParant?.id) {
+            if ((!this.lazy() && (XIsUndefined(node.leaf) || regetChildren)) || node.id === lazyParant?.id) {
                 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));
+        this.treeData.set(value);
+        this.nodes.set(value.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0)));
         if (parentOpen) {
             for (let item of value) {
                 if (!item.leaf && item.open) {
@@ -865,51 +906,40 @@ class XTreeComponent extends XTreeProperty {
             }
         }
         this.setExpanded();
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
     nodeMouseenter($event) {
         const { node, ele } = $event;
-        if (!this.dragging)
+        if (!this.dragging())
             return;
-        let before = this.hoverTreeNode;
-        this.hoverTreeNode = node;
+        let before = this.hoverTreeNode();
+        this.hoverTreeNode.set(node);
         this.hoverTreeEle = ele;
-        this.hoverTreeNode.change && this.hoverTreeNode.change();
+        const hoverTreeNode = this.hoverTreeNode();
+        if (hoverTreeNode) {
+            hoverTreeNode.change && hoverTreeNode.change();
+        }
         if (before) {
             before.change && before.change();
         }
         if (!node.leaf && !node.open) {
-            let from = this.nodes.indexOf(this.draggingTreeNode);
-            let to = this.nodes.indexOf(node);
+            let from = this.nodes().indexOf(this.draggingTreeNode());
+            let to = this.nodes().indexOf(node);
             if (to - from !== -1) {
                 this.onToggle(null, node);
             }
-            // else {
-            //   let addNodes: XTreeNode[] = [];
-            //   node.open = true;
-            //   const getNodes = (nd: XTreeNode) => {
-            //     if (XIsEmpty(nd.children)) return;
-            //     for (let child of nd.children!) {
-            //       addNodes.push(child);
-            //       child.open && getNodes(child);
-            //     }
-            //   };
-            //   getNodes(node);
-            //   let nodes = [...this.nodes];
-            //   nodes.splice(to + 1, 0, ...addNodes);
-            //   this.nodes = nodes;
-            // }
         }
     }
-    setScorllTop() {
-        if (!this.scrollElement || !this.activatedNode)
+    setScrollTop() {
+        const scrollElement = this.scrollElement();
+        if (!scrollElement || !this.activatedNode())
             return;
-        let inx = this.nodes.indexOf(this.activatedNode);
-        let com = this.nodeComponents.get(inx);
+        const inx = this.nodes().indexOf(this.activatedNode());
+        let com = this.nodeComponents().find((_, index) => index === inx);
         if (!com)
             return;
         let ele = com.elementRef.nativeElement;
-        let scrollEle = this.scrollElement;
+        let scrollEle = scrollElement;
         let min = scrollEle.scrollTop;
         let max = scrollEle.scrollTop + scrollEle.clientHeight;
         if (ele.offsetTop + ele.clientHeight > max) {
@@ -932,7 +962,7 @@ class XTreeComponent extends XTreeProperty {
                 getChildren(x.children);
             });
         };
-        getChildren(this.nodes);
+        getChildren(this.nodes());
         return result;
     }
     getCheckedKeys() {
@@ -940,7 +970,7 @@ class XTreeComponent extends XTreeProperty {
     }
     setCheckedKeys(keys = []) {
         if (!XIsEmpty(keys))
-            this.hasChecked = true;
+            this.hasChecked.set(true);
         const setChildren = (nodes, clear = false) => {
             if (XIsEmpty(nodes))
                 return;
@@ -950,48 +980,50 @@ class XTreeComponent extends XTreeProperty {
                 setChildren(x.children, clear);
             });
         };
-        setChildren(this.nodes, XIsEmpty(keys));
-        this.cdr.detectChanges();
+        setChildren(this.nodes(), XIsEmpty(keys));
+        this.cdr.markForCheck();
     }
     setExpandedAll() {
-        if (this.expandedAll && this.treeData.length === this.nodes.length)
+        if (this.expandedAll() && this.treeData().length === this.nodes().length)
             return;
         const setChildren = (nodes) => {
             if (XIsEmpty(nodes))
                 return;
             nodes.forEach((x) => {
-                x.open = Boolean(this.expandedAll);
+                x.open = this.expandedAll();
                 x.change && x.change();
                 setChildren(x.children);
             });
         };
-        setChildren(this.nodes);
-        if (this.expandedAll === false) {
-            this.nodes = this.treeData.filter((x) => XIsEmpty(x.pid));
+        setChildren(this.nodes());
+        if (this.expandedAll() === false) {
+            this.nodes.set(this.treeData().filter((x) => XIsEmpty(x.pid)));
         }
         else {
-            if (this.virtualNodes.length === 0) {
-                this.virtualNodes = [...this.nodes];
+            if (this.virtualNodes().length === 0) {
+                this.virtualNodes.set([...this.nodes()]);
             }
-            this.nodes = [...this.virtualNodes];
-            for (let item of this.virtualNodes) {
-                this.setVirtualExpandedAll(item, this.expandedAll);
+            this.nodes.set(this.virtualNodes());
+            for (let item of this.virtualNodes()) {
+                this.setVirtualExpandedAll(item, this.expandedAll());
             }
         }
-        this.virtualBody?.checkViewportSize();
+        this.virtualBody()?.checkViewportSize();
     }
     setExpanded() {
-        for (let item of this.nodes) {
+        for (let item of this.nodes()) {
             if (item.open && item.children) {
-                let index = this.nodes.indexOf(item);
-                this.nodes.splice(index + 1, 0, ...item.children);
+                let index = this.nodes().indexOf(item);
+                this.nodes.update((x) => {
+                    x.splice(index + 1, 0, ...item.children);
+                    return [...x];
+                });
             }
             item.change && item.change();
         }
-        this.nodes = [...this.nodes];
     }
     setVirtualExpandedAll(item, expandedAll) {
-        let index = this.nodes.indexOf(item);
+        let index = this.nodes().indexOf(item);
         if (expandedAll) {
             let addNodes = [];
             const getNodes = (nd) => {
@@ -1001,12 +1033,14 @@ class XTreeComponent extends XTreeProperty {
                 }
             };
             getNodes(item);
-            this.nodes.splice(index + 1, 0, ...addNodes);
+            this.nodes.update((x) => {
+                x.splice(index + 1, 0, ...addNodes);
+                return [...x];
+            });
         }
-        this.nodes = [...this.nodes];
     }
     virtualToggle(node) {
-        let index = this.nodes.indexOf(node);
+        let index = this.nodes().indexOf(node);
         if (node.open) {
             let addNodes = [];
             const getNodes = (nd) => {
@@ -1018,7 +1052,10 @@ class XTreeComponent extends XTreeProperty {
                 }
             };
             getNodes(node);
-            this.nodes.splice(index + 1, 0, ...addNodes);
+            this.nodes.update((x) => {
+                x.splice(index + 1, 0, ...addNodes);
+                return [...x];
+            });
         }
         else {
             let delCount = 0;
@@ -1031,51 +1068,59 @@ class XTreeComponent extends XTreeProperty {
                 }
             };
             getCount(node);
-            this.nodes.splice(index + 1, delCount);
+            this.nodes.update((x) => {
+                x.splice(index + 1, delCount);
+                return [...x];
+            });
         }
         this.addOrRemoveExpanded(node);
-        this.nodes = [...this.nodes];
-        this.virtualBody?.checkViewportSize();
+        this.virtualBody()?.checkViewportSize();
         this.cdr.detectChanges();
     }
     addOrRemoveExpanded(node) {
         if (node.open) {
-            if (!this.expanded.includes(node.id)) {
-                this.expanded.push(node.id);
+            if (!this.expanded().includes(node.id)) {
+                this.expanded.update((x) => {
+                    x.push(node.id);
+                    return [...x];
+                });
             }
         }
         else {
-            if (this.expanded.includes(node.id)) {
-                this.expanded.splice(this.expanded.indexOf(node.id), 1);
+            if (this.expanded().includes(node.id)) {
+                this.expanded.update((x) => {
+                    x.splice(x.indexOf(node.id), 1);
+                    return [...x];
+                });
             }
         }
     }
     setActivatedNode(nodes, parentOpen = true, dataChange = true) {
-        if (XIsEmpty(this.activatedId) && this.multiple) {
-            this.activatedId = [];
+        if (XIsEmpty(this.activatedId()) && this.multiple()) {
+            this.activatedId.set([]);
         }
-        let before = this.activatedNode;
-        if (this.multiple) {
-            if (this.activatedId.length > 0) {
-                let ids = this.objectArray ? this.activatedId.map((x) => x.id) : this.activatedId;
+        let before = 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) {
                         parentOpen && this.setParentOpen(nodes, node);
                         if (i === ids.length - 1) {
-                            this.activatedNode = node;
-                            this.activatedChange.emit(this.activatedNode);
+                            this.activatedNode.set(node);
+                            this.activatedChange.emit(this.activatedNode());
                         }
                     }
                 }
             }
         }
         else {
-            let activatedId = this.activatedId;
-            this.activatedNode = nodes.find((x) => x.id == activatedId);
-            if (this.activatedNode) {
-                parentOpen && this.setParentOpen(nodes, this.activatedNode);
-                this.activatedChange.emit(this.activatedNode);
+            let activatedId = this.activatedId();
+            this.activatedNode.set(nodes.find((x) => x.id === activatedId));
+            if (this.activatedNode()) {
+                parentOpen && this.setParentOpen(nodes, this.activatedNode());
+                this.activatedChange.emit(this.activatedNode());
             }
         }
         if (before) {
@@ -1091,24 +1136,8 @@ class XTreeComponent extends XTreeProperty {
                 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);
-    }
-    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];
+                if (!this.expanded().includes(parent.id)) {
+                    this.expanded.update((x) => [...x, parent.id]);
                 }
                 parent.open = true;
                 parent.change && parent.change();
@@ -1118,22 +1147,20 @@ class XTreeComponent extends XTreeProperty {
         getParent(node);
     }
     onToggle(event, node) {
-        this.ngZone.run(() => {
-            node.open = !node.open;
-            if (this.lazy && !node.childrenLoaded) {
-                this.getLazyData(node, () => this.virtualToggle(node));
-            }
-            else {
-                this.virtualToggle(node);
-            }
-            event?.preventDefault();
-            event?.stopPropagation();
-        });
+        node.open = !node.open;
+        if (this.lazy() && !node.childrenLoaded) {
+            this.getLazyData(node, () => this.virtualToggle(node));
+        }
+        else {
+            this.virtualToggle(node);
+        }
+        event?.preventDefault();
+        event?.stopPropagation();
     }
     getLazyData(node, callBack) {
         node.loading = true;
         node.change && node.change();
-        this.data(node.id)
+        this.data()(node.id)
             .pipe(map((x) => x.map((y) => {
             y.level = node.level + 1;
             y.checked = node.checked;
@@ -1143,15 +1170,15 @@ class XTreeComponent extends XTreeProperty {
             node.children = x;
             node.childrenLoaded = true;
             node.loading = false;
-            this.treeData = [...this.treeData, ...x];
+            this.treeData.set([...this.treeData(), ...x]);
             if (callBack)
                 callBack();
             node.change && node.change();
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         });
     }
     addNode(node) {
-        let parent = this.treeData.find((x) => x.id === node.pid);
+        let parent = this.treeData().find((x) => x.id === node.pid);
         const _addNode = () => {
             if (parent) {
                 node.level = parent.level + 1;
@@ -1159,24 +1186,24 @@ class XTreeComponent extends XTreeProperty {
                 node.leaf = true;
                 parent.leaf = false;
                 parent.open = true;
-                this.treeData = [...this.treeData, node];
-                this.setParentOpen(this.treeData, node);
-                this.setDataChange(this.treeData, true, false, false);
+                this.treeData.set([...this.treeData(), node]);
+                this.setParentOpen(this.treeData(), node);
+                this.setDataChange(this.treeData(), true, false, false);
                 this.setActivatedId(node);
-                this.setActivatedNode(this.nodes, true, false);
+                this.setActivatedNode(this.nodes(), true, false);
                 node.change && node.change();
             }
             else if (XIsEmpty(node.pid)) {
                 node.level = 0;
                 node.leaf = true;
-                this.treeData = [...this.treeData, node];
-                this.nodes = [...this.nodes, node];
+                this.treeData.set([...this.treeData(), node]);
+                this.nodes.set([...this.nodes(), node]);
                 this.setActivatedId(node);
-                this.setActivatedNode(this.nodes, true, false);
+                this.setActivatedNode(this.nodes(), true, false);
                 node.change && node.change();
             }
         };
-        if (this.lazy && parent && !parent.childrenLoaded) {
+        if (this.lazy() && parent && !parent.childrenLoaded) {
             this.getLazyData(parent, () => {
                 _addNode();
             });
@@ -1186,23 +1213,22 @@ class XTreeComponent extends XTreeProperty {
         }
     }
     setActivatedId(node) {
-        if (this.multiple) {
-            if (this.objectArray) {
-                this.activatedId = [node];
+        if (this.multiple()) {
+            if (this.objectArray()) {
+                this.activatedId.set([node]);
             }
             else {
-                this.activatedId = [node.id];
+                this.activatedId.set([node.id]);
             }
         }
         else {
-            this.activatedId = node.id;
+            this.activatedId.set(node.id);
         }
-        this.activatedIdChange.emit(this.activatedId);
     }
     removeNode(node) {
-        let parent = this.treeData.find((x) => x.id === node.pid);
+        let parent = this.treeData().find((x) => x.id === node.pid);
         const removeChildren = (nd) => {
-            XRemove(this.treeData, (x) => x.id === nd.id);
+            XRemove(this.treeData(), (x) => x.id === nd.id);
             if (nd.children) {
                 for (let item of nd.children) {
                     removeChildren(item);
@@ -1219,7 +1245,7 @@ class XTreeComponent extends XTreeProperty {
             }
             parent.leaf = parent.children.length === 0;
         }
-        this.setDataChange(this.treeData, true, false, false);
+        this.setDataChange(this.treeData(), true, false, false);
     }
     updateNode(node, nowNode) {
         Object.assign(node, nowNode);
@@ -1228,32 +1254,20 @@ class XTreeComponent extends XTreeProperty {
     trackByItem(_index, item) {
         return item;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], 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  @if (virtualScroll) {\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      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty\"\r\n        [cdkDropListData]=\"nodes\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\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      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes; track node) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\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      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["tree"], outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, read: CdkVirtualScrollViewport, isSignal: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true, read: CdkDropList, isSignal: true }, { propertyName: "nodeComponents", predicate: XTreeNodeComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreePrefix}`, standalone: true, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  @if (virtualScroll) {\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      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty\"\r\n        [cdkDropListData]=\"nodes\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\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      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes; track node) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\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      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.XConfigService }, { type: i0.NgZone }, { type: XTreeService }], propDecorators: { tree: [{
-                type: ViewChild,
-                args: ['tree', { static: true }]
-            }], virtualBody: [{
-                type: ViewChild,
-                args: ['virtualBody']
-            }], dropList: [{
-                type: ViewChild,
-                args: ['dropList']
-            }], _nodeComponents: [{
-                type: ViewChildren,
-                args: [XTreeNodeComponent]
-            }] } });
+            args: [{ selector: `${XTreePrefix}`, standalone: true, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: XTreeService }] });
 
 class XTreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent], exports: [XTreeComponent, XTreeNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent], exports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTreeComponent, XTreeNodeComponent],