@ng-nest/ui 20.3.5 → 20.3.6

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

@@ -0,0 +1,1441 @@
+import * as i0 from '@angular/core';
+import { input, model, output, Component, Injectable, InjectionToken, inject, computed, signal, ChangeDetectorRef, ElementRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, viewChild, viewChildren, effect, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XProperty, XIsEmpty, XRemove, XComputedStyle, XToCssPx, XIsObjectArray, XIsArray, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined, XOrderBy } 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';
+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 i2 from '@angular/cdk/drag-drop';
+import { CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+
+/**
+ * Tree
+ * @selector x-tree
+ * @decorator component
+ */
+const XTreePrefix = 'x-tree';
+const X_TREE_CONFIG_NAME = 'tree';
+/**
+ * @zh_CN Tree 节点排序默认值
+ * @en_US Tree node order default value
+ */
+const X_TREE_ORDER_DEFAULT = [
+    { property: 'sort', order: 'asc' },
+    { property: 'label', order: 'asc' }
+];
+/**
+ * Tree Property
+ */
+class XTreeProperty extends XPropertyFunction(X_TREE_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        /**
+         * @zh_CN 显示多选框
+         * @en_US Show checkbox
+         */
+        this.checkbox = input(false, ...(ngDevMode ? [{ debugName: "checkbox", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 开启懒加载节点，data 必须设置成函数类型
+         * @en_US Open lazy loading node, data must be set to function type
+         */
+        this.lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy", transform: XToBoolean }] : [{ 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, ...(ngDevMode ? [{ debugName: "activatedId" }] : []));
+        /**
+         * @zh_CN 展开的节点
+         * @en_US Expanded node
+         */
+        this.expanded = model([], ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        /**
+         * @zh_CN checkbox 选中的节点
+         * @en_US Checkbox selected node
+         */
+        this.checked = model([], ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        /**
+         * @zh_CN 展开所有节点
+         * @en_US Expand all nodes
+         */
+        this.expandedAll = input(false, ...(ngDevMode ? [{ debugName: "expandedAll", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 默认展开的层级
+         * @en_US Default expanded level
+         */
+        this.expandedLevel = input(-1, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: XToNumber }] : [{ 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, ...(ngDevMode ? [{ debugName: "nodeOpen", transform: XToBoolean }] : [{ 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', ...(ngDevMode ? [{ debugName: "spacing", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 标签自定义模板
+         * @en_US Label custom template
+         */
+        this.labelTpl = input(...(ngDevMode ? [undefined, { debugName: "labelTpl" }] : []));
+        /**
+         * @zh_CN 节点的高度, 默认是自适应高度
+         * @en_US The height of the node
+         */
+        this.nodeHeight = input(this.config?.nodeHeight ?? '', ...(ngDevMode ? [{ debugName: "nodeHeight", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 是否允许多次点击一个节点触发多次事件
+         * @en_US Whether to allow multiple clicks on a node to trigger multiple events
+         */
+        this.allowManyActivated = input(false, ...(ngDevMode ? [{ debugName: "allowManyActivated", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 拖动节点
+         * @en_US Drag node
+         */
+        this.drag = input(false, ...(ngDevMode ? [{ debugName: "drag", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 当前点击选中的节点变化的事件
+         * @en_US The event of the currently clicked node change
+         */
+        this.activatedChange = output();
+        /**
+         * @zh_CN 使用 checkedbox 选中变化的事件
+         * @en_US Use checkedbox to select changed events
+         */
+        this.checkboxChange = output();
+        /**
+         * @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 = model(true, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+        /**
+         * @zh_CN checkbox 状态改变触发层级检查
+         * @en_US Checkbox status changes trigger level checks
+         */
+        this.levelCheck = input(true, ...(ngDevMode ? [{ debugName: "levelCheck", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 节点内容不换行显示省略号
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeNowrap = input(true, ...(ngDevMode ? [{ debugName: "nodeNowrap", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeAlignItems = input(this.config?.nodeAlignItems ?? 'center', ...(ngDevMode ? [{ debugName: "nodeAlignItems" }] : []));
+        /**
+         * @zh_CN 树节点操作按钮
+         * @en_US Tree node operation buttons
+         */
+        this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+        /**
+         * @zh_CN 滚动区域元素
+         * @en_US Rolling area element
+         */
+        this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
+        /**
+         * @zh_CN 开启虚拟滚动
+         * @en_US Turn on virtual scrolling
+         */
+        this.virtualScroll = input(this.config?.virtualScroll ?? false, ...(ngDevMode ? [{ debugName: "virtualScroll", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 滚动区域高度，开启虚拟滚动的时候生效
+         * @en_US Rolling area height
+         */
+        this.virtualScrollHeight = input(this.config?.virtualScrollHeight ?? '400px', ...(ngDevMode ? [{ debugName: "virtualScrollHeight", transform: XToCssPixelValue }] : [{
+                transform: XToCssPixelValue
+            }]));
+        /**
+         * @zh_CN 虚拟滚动高度自适应指定元素
+         * @en_US virtual rolling height follows the specified object
+         */
+        this.heightAdaption = input(...(ngDevMode ? [undefined, { debugName: "heightAdaption" }] : []));
+        /**
+         * @zh_CN itemSize，对应 cdk scroll 中的参数，开启虚拟滚动才生效
+         * @en_US itemSize，corresponding to the parameters in cdk scroll
+         */
+        this.itemSize = input(this.config?.itemSize ?? 34, ...(ngDevMode ? [{ debugName: "itemSize", transform: XToNumber }] : [{ 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 = input(100, ...(ngDevMode ? [{ debugName: "minBufferPx", transform: XToNumber }] : [{ 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 = input(200, ...(ngDevMode ? [{ debugName: "maxBufferPx", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 多选功能，当前激活的节点可以是多个
+         * @en_US Multiple choice
+         */
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 当开启多选的时候，activatedId 的值为对象数组
+         * @en_US When multiple selection is enabled, the value of activatedId is an array of objects
+         */
+        this.objectArray = input(false, ...(ngDevMode ? [{ debugName: "objectArray", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 当开启多选的时候，点击父节点，包含子节点
+         * @en_US When selecting multiple options, click on the parent node to include the child nodes
+         */
+        this.includeChildren = input(this.config?.includeChildren ?? false, ...(ngDevMode ? [{ debugName: "includeChildren", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 关键字高亮，针对下拉树搜索
+         * @en_US Keyword highlighting
+         */
+        this.keywordText = input(...(ngDevMode ? [undefined, { debugName: "keywordText" }] : []));
+        /**
+         * @zh_CN 匹配关键字区分大小写，针对下拉树搜索
+         * @en_US Case-sensitive
+         */
+        this.caseSensitive = input(this.config?.caseSensitive ?? true, ...(ngDevMode ? [{ debugName: "caseSensitive", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 只能选择叶子节点
+         * @en_US Only leaf nodes can be selected
+         */
+        this.onlyLeaf = input(this.config?.onlyLeaf ?? false, ...(ngDevMode ? [{ debugName: "onlyLeaf", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 展开收起的图标自定义模版
+         * @en_US Expand the folded icon custom template
+         */
+        this.expandedIcon = input(...(ngDevMode ? [undefined, { debugName: "expandedIcon" }] : []));
+        /**
+         * @zh_CN 显示连接线
+         * @en_US Show line
+         */
+        this.showLine = input(this.config?.showLine ?? false, ...(ngDevMode ? [{ debugName: "showLine", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 排序属性
+         * @en_US Order property
+         */
+        this.order = input(this.config?.order ?? X_TREE_ORDER_DEFAULT, ...(ngDevMode ? [{ debugName: "order" }] : []));
+        /**
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
+         */
+        this.nodeClick = output();
+        /**
+         * @zh_CN 节点开始拖动事件
+         * @en_US Node drag started
+         */
+        this.nodeDragStarted = output();
+        /**
+         * @zh_CN 节点结束拖动事件
+         * @en_US Node drag ended
+         */
+        this.nodeDragEnded = output();
+        /**
+         * @zh_CN 节点正在拖动事件
+         * @en_US Node drag moved
+         */
+        this.nodeDragMoved = output();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XTreeProperty, isStandalone: true, 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 }, includeChildren: { classPropertyName: "includeChildren", publicName: "includeChildren", 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 }, order: { classPropertyName: "order", publicName: "order", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreePrefix}-property`, template: '' }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], expandedAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAll", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], nodeOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeOpen", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], labelTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTpl", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], allowManyActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManyActivated", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], activatedChange: [{ type: i0.Output, args: ["activatedChange"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }, { type: i0.Output, args: ["manualChange"] }], levelCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelCheck", required: false }] }], nodeNowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeNowrap", required: false }] }], nodeAlignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeAlignItems", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollHeight", required: false }] }], heightAdaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightAdaption", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], objectArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectArray", required: false }] }], includeChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeChildren", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], onlyLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyLeaf", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], showLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLine", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDragStarted: [{ type: i0.Output, args: ["nodeDragStarted"] }], nodeDragEnded: [{ type: i0.Output, args: ["nodeDragEnded"] }], nodeDragMoved: [{ type: i0.Output, args: ["nodeDragMoved"] }] } });
+/**
+ * TreeNode
+ * @selector x-tree-node
+ * @decorator directive
+ */
+const XTreeNodePrefix = 'x-tree-node';
+/**
+ * TreeNode Property
+ */
+class XTreeNodeProperty extends XProperty {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.node = input({}, ...(ngDevMode ? [{ debugName: "node" }] : []));
+        /**
+         * @zh_CN 层级
+         * @en_US Level
+         */
+        this.level = model(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        /**
+         * @zh_CN 节点的高度
+         * @en_US The height of the node
+         */
+        this.nodeHeight = model('', ...(ngDevMode ? [{ debugName: "nodeHeight" }] : []));
+        /**
+         * @zh_CN 节点内容不换行显示省略号
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeNowrap = model(false, ...(ngDevMode ? [{ debugName: "nodeNowrap" }] : []));
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeAlignItems = model('center', ...(ngDevMode ? [{ debugName: "nodeAlignItems" }] : []));
+        /**
+         * @zh_CN 标记为虚拟滚动的节点
+         * @en_US Mark as a node of virtual rolling
+         */
+        this.virtualScroll = model(false, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : []));
+        /**
+         * @zh_CN 禁用
+         * @en_US Disabled
+         */
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * @zh_CN id
+         * @en_US Id
+         */
+        this.id = model(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        /**
+         * @zh_CN pid
+         * @en_US pId
+         */
+        this.pid = model(...(ngDevMode ? [undefined, { debugName: "pid" }] : []));
+        /**
+         * @zh_CN 叶子节点
+         * @en_US A leaf node
+         */
+        this.leaf = model(false, ...(ngDevMode ? [{ debugName: "leaf" }] : []));
+        /**
+         * @zh_CN 节点的高度
+         * @en_US The height of the node
+         */
+        this.height = model('', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.alignItems = model(...(ngDevMode ? [undefined, { debugName: "alignItems" }] : []));
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        /**
+         * @zh_CN 展开
+         * @en_US open
+         */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        /**
+         * @zh_CN checkbox 是否选中
+         * @en_US whether checkbox is selected
+         */
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        /**
+         * @zh_CN checkbox 子节点是否有选中的状态
+         * @en_US Whether the child node of checkbox is selected
+         */
+        this.indeterminate = model(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+        /**
+         * @zh_CN 节点名称
+         * @en_US The name of the node
+         */
+        this.label = model('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * @zh_CN 节点内容不换行显示省略号，优先级高于 tree 参数
+         * @en_US Show ellipsis without wrapping, highest priority
+         */
+        this.nowrap = model(false, ...(ngDevMode ? [{ debugName: "nowrap" }] : []));
+        /**
+         * @zh_CN 节点展开收起事件
+         * @en_US Node expansion pack up
+         */
+        this.toggle = output();
+        /**
+         * @zh_CN 树节点操作按钮
+         * @en_US Tree node operation buttons
+         */
+        this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XTreeNodeProperty, isStandalone: true, 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 }, actions: { classPropertyName: "actions", publicName: "actions", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeNodePrefix}-property`, template: '' }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }, { type: i0.Output, args: ["levelChange"] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }, { type: i0.Output, args: ["nodeHeightChange"] }], nodeNowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeNowrap", required: false }] }, { type: i0.Output, args: ["nodeNowrapChange"] }], nodeAlignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeAlignItems", required: false }] }, { type: i0.Output, args: ["nodeAlignItemsChange"] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }, { type: i0.Output, args: ["virtualScrollChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], pid: [{ type: i0.Input, args: [{ isSignal: true, alias: "pid", required: false }] }, { type: i0.Output, args: ["pidChange"] }], leaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaf", required: false }] }, { type: i0.Output, args: ["leafChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }, { type: i0.Output, args: ["alignItemsChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }, { type: i0.Output, args: ["labelChange"] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }, { type: i0.Output, args: ["nowrapChange"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }] } });
+
+class XTreeService {
+    getChildren(data, node) {
+        const res = [];
+        const gChildren = (nd) => {
+            const children = data.filter((x) => x.pid === nd.id);
+            if (XIsEmpty(children))
+                return;
+            for (let child of children) {
+                res.push(child);
+                gChildren(child);
+            }
+        };
+        gChildren(node);
+        return res;
+    }
+    getParents(data, node) {
+        const res = [];
+        const gParent = (nd) => {
+            if (!nd.pid)
+                return;
+            const parent = data.find((x) => x.id === nd.pid);
+            if (!parent)
+                return;
+            res.push(parent);
+            gParent(parent);
+        };
+        gParent(node);
+        return res;
+    }
+    getOpenChildren(data, node) {
+        const res = [];
+        const gChildren = (nd) => {
+            if (!nd.open)
+                return;
+            const children = data.filter((x) => x.pid === nd.id);
+            if (XIsEmpty(children))
+                return;
+            for (let child of children) {
+                res.push(child);
+                gChildren(child);
+            }
+        };
+        gChildren(node);
+        return res;
+    }
+    moveNode(data, from, to, pos) {
+        if (XIsEmpty(data))
+            return;
+        const isAddChildNode = pos === 0;
+        const formIndex = data.findIndex((x) => x.id === from.id);
+        const toIndex = data.findIndex((x) => x.id === to.id);
+        XRemove(data, (x) => x.id === from.id);
+        if (from.pid === to.pid) {
+            let diffLevel = 0;
+            if (isAddChildNode) {
+                from.pid = to.id;
+                diffLevel = to.level + 1 - from.level;
+                from.level = to.level + 1;
+                to.open = true;
+            }
+            else {
+                diffLevel = to.level - from.level;
+            }
+            const fromChildren = this.getChildren(data, from);
+            fromChildren.forEach((x) => {
+                x.level = x.level + diffLevel;
+            });
+            const index = toIndex > formIndex ? toIndex - 1 : toIndex;
+            data.splice(pos === -1 ? index : index + 1, 0, from);
+        }
+        else if (from.pid !== to.pid) {
+            let diffLevel = 0;
+            if (isAddChildNode) {
+                from.pid = to.id;
+                diffLevel = to.level + 1 - from.level;
+                from.level = to.level + 1;
+                to.open = true;
+            }
+            else {
+                from.pid = to.pid;
+                diffLevel = to.level - from.level;
+                from.level = to.level;
+            }
+            const fromChildren = this.getChildren(data, from);
+            fromChildren.forEach((x) => {
+                x.level = x.level + diffLevel;
+            });
+            const index = toIndex > formIndex ? toIndex - 1 : toIndex;
+            data.splice(pos === -1 ? index : index + 1, 0, from);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const X_TREE_CONTEXT = new InjectionToken('X_TREE_CONTEXT');
+
+class XTreeNodeComponent extends XTreeNodeProperty {
+    constructor() {
+        super(...arguments);
+        this.tree = inject(X_TREE_CONTEXT, { optional: true });
+        this.nodeMouseenter = output();
+        this.rootClass = true;
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')), ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
+        this.unSubject = new Subject();
+        this.showDragIndicator = computed(() => {
+            return this.tree.dragging() && this.tree.hoverTreeNode()?.id === this.id();
+        }, ...(ngDevMode ? [{ debugName: "showDragIndicator" }] : []));
+        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;
+        }, ...(ngDevMode ? [{ debugName: "isChildrenLast" }] : []));
+        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();
+        }, ...(ngDevMode ? [{ debugName: "isParentLast" }] : []));
+        this.verticalLevel = computed(() => {
+            if (this.level() > 0) {
+                return Array.from({ length: this.level() }).map((_x, index) => index + 1);
+            }
+            else {
+                return [];
+            }
+        }, ...(ngDevMode ? [{ debugName: "verticalLevel" }] : []));
+        this.verticalWidth = computed(() => {
+            return XToCssPx(this.tree.spacing(), this.fontSize()) / 2;
+        }, ...(ngDevMode ? [{ debugName: "verticalWidth" }] : []));
+        this.paddingLeft = computed(() => (this.level() ? this.level() : 0) * XToCssPx(this.tree.spacing(), this.fontSize()), ...(ngDevMode ? [{ debugName: "paddingLeft" }] : []));
+        this.indicatorWidth = computed(() => {
+            if (this.tree.dragPosition() === 0) {
+                return `calc(100% - ${this.paddingLeft() + XToCssPx(this.tree.spacing(), this.fontSize()) + (this.leaf() ? this.fontSize() * 1.5 : 0)}px)`;
+            }
+            return `calc(100% - ${this.paddingLeft() + (this.leaf() ? this.fontSize() * 1.5 : 0)}px)`;
+        }, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+        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` };
+            }
+            else if (this.tree.dragPosition() === 0) {
+                return {
+                    bottom: `-${0.0625 * this.fontSize()}px`
+                };
+            }
+            return {};
+        }, ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : []));
+        this.changed = signal(false, ...(ngDevMode ? [{ debugName: "changed" }] : []));
+        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();
+            }
+        }, ...(ngDevMode ? [{ debugName: "activated" }] : []));
+        this.cdr = inject(ChangeDetectorRef);
+        this.treeService = inject(XTreeService);
+        this.elementRef = inject(ElementRef);
+    }
+    onMouseenter(event) {
+        this.nodeMouseenter.emit({ event: event, node: this.node(), ele: this.elementRef });
+    }
+    onMouseleave(_event) {
+        if (!this.tree.dragging())
+            return;
+        const hoverTreeNode = this.tree.hoverTreeNode();
+        hoverTreeNode && hoverTreeNode.change && hoverTreeNode.change();
+        this.cdr.detectChanges();
+    }
+    ngOnInit() {
+        const node = this.node();
+        node.change = (check) => {
+            if (check)
+                this.setCheckbox();
+            this.cdr.detectChanges();
+        };
+        if (!this.tree.levelCheck())
+            return;
+        if (this.checked())
+            this.setCheckbox();
+        this.setIndeterminate(this.node());
+    }
+    ngOnDestroy() {
+        this.unSubject.next();
+        this.unSubject.complete();
+    }
+    onActivate(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() && !this.leaf()) {
+            onChange();
+            return;
+        }
+        if (this.tree.multiple()) {
+            if (!this.tree.activatedId())
+                this.tree.activatedId.set([]);
+            const nodes = [node];
+            if (this.tree.includeChildren()) {
+                nodes.push(...this.getChildren());
+            }
+            if (this.tree.objectArray()) {
+                const ids = this.tree.activatedId().map((x) => x.id);
+                if (ids.includes(node.id)) {
+                    this.tree.activatedId.update((x) => {
+                        for (let it of nodes) {
+                            x.splice(ids.indexOf(it.id), 1);
+                        }
+                        return [...x];
+                    });
+                }
+                else {
+                    this.tree.activatedId.update((x) => {
+                        for (let it of nodes) {
+                            if (!x.includes(it)) {
+                                x.push(it);
+                            }
+                        }
+                        return [...x];
+                    });
+                }
+            }
+            else {
+                if (this.tree.activatedId().includes(node.id)) {
+                    this.tree.activatedId.update((x) => {
+                        for (let it of nodes) {
+                            x.splice(this.tree.activatedId().indexOf(it.id), 1);
+                        }
+                        return [...x];
+                    });
+                }
+                else {
+                    this.tree.activatedId.update((x) => {
+                        for (let it of nodes) {
+                            if (!x.includes(it.id)) {
+                                x.push(it.id);
+                            }
+                        }
+                        return [...x];
+                    });
+                }
+            }
+        }
+        else {
+            this.tree.activatedId.set(node.id);
+        }
+        if (this.tree.activatedNode()) {
+            if (this.tree.activatedNode()?.id === node.id && !this.tree.allowManyActivated())
+                return;
+        }
+        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());
+    }
+    getVerticalLeft(i) {
+        const spacing = XToCssPx(this.tree.spacing(), this.fontSize());
+        return (i - 1) * spacing + spacing / 2;
+    }
+    setCheckbox() {
+        if (!this.tree.levelCheck())
+            return;
+        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);
+            if (!parent || XIsEmpty(parent.children))
+                return;
+            let checkedList = parent.children?.filter((y) => y.checked);
+            let indeterminateList = parent.children?.filter((y) => y.indeterminate);
+            parent.checked = checkedList?.length === parent.children?.length;
+            parent.indeterminate = checkedList.length > 0 || indeterminateList.length > 0;
+            parent.change && parent.change();
+            setParent(parent);
+        };
+        setParent(this.node());
+        this.cdr.detectChanges();
+    }
+    getChildren() {
+        const res = [];
+        const getChildren = (children) => {
+            if (XIsEmpty(children))
+                return;
+            for (let x of children) {
+                if (x.disabled)
+                    continue;
+                res.push(x);
+                getChildren(x.children);
+            }
+        };
+        getChildren(this.node().children);
+        return res;
+    }
+    setChildrenCheckbox(checked) {
+        const setChildren = (children, isChecked) => {
+            if (XIsEmpty(children))
+                return;
+            for (let x of children) {
+                if (x.disabled)
+                    continue;
+                x.checked = isChecked;
+                x.indeterminate = isChecked;
+                x.change && x.change();
+                setChildren(x.children, isChecked);
+            }
+        };
+        setChildren(this.node().children, checked);
+        this.cdr.detectChanges();
+    }
+    setParentCheckbox() {
+        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;
+        this.cdr.detectChanges();
+    }
+    setIndeterminate(node) {
+        const getChildren = (children) => {
+            if (XIsEmpty(children))
+                return;
+            children.forEach((x) => {
+                if (x.indeterminate || x.checked) {
+                    node.indeterminate = true;
+                    return;
+                }
+                getChildren(x.children);
+            });
+        };
+        getChildren(node.children);
+        this.cdr.detectChanges();
+    }
+    getNodeDisabled(disabled) {
+        return disabled;
+    }
+    onAction(event, action, node) {
+        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: "20.3.5", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave($event)" }, 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 (!leaf()) {\r\n        @if (tree.expandedIcon()) {\r\n          <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n        } @else {\r\n          <x-icon class=\"x-tree-node-icon\" type=\"fto-chevron-right\"></x-icon>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      class=\"x-tree-node-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 actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n        action.label\r\n      }}</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}.x-tree-node{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-tree-node-icon,.x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content .x-tree-node-icon:hover,.x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}.x-tree-node-content .x-tree-node-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 x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}.x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}.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-tree-node-icon,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right 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-tree-node-icon:hover,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-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 x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}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: "20.3.5", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, imports: [
+                        NgStyle,
+                        FormsModule,
+                        XIconComponent,
+                        XCheckboxComponent,
+                        XOutletDirective,
+                        XLinkComponent,
+                        XKeywordDirective
+                    ], 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 (!leaf()) {\r\n        @if (tree.expandedIcon()) {\r\n          <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n        } @else {\r\n          <x-icon class=\"x-tree-node-icon\" type=\"fto-chevron-right\"></x-icon>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      class=\"x-tree-node-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 actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n        action.label\r\n      }}</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}.x-tree-node{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-tree-node-icon,.x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content .x-tree-node-icon:hover,.x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}.x-tree-node-content .x-tree-node-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 x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}.x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}.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-tree-node-icon,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right 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-tree-node-icon:hover,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-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 x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}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: { nodeMouseenter: [{ type: i0.Output, args: ["nodeMouseenter"] }], rootClass: [{
+                type: HostBinding,
+                args: ['class.x-tree-node']
+            }], onMouseenter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onMouseleave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class XTreeComponent extends XTreeProperty {
+    constructor(renderer, elementRef, cdr, treeService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.treeService = treeService;
+        this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree", read: (ElementRef) }] : [{ read: (ElementRef) }]));
+        this.virtualBody = viewChild('virtualBody', ...(ngDevMode ? [{ debugName: "virtualBody", read: CdkVirtualScrollViewport }] : [{ read: CdkVirtualScrollViewport }]));
+        this.dropList = viewChild('dropList', ...(ngDevMode ? [{ debugName: "dropList", read: (CdkDropList) }] : [{ read: (CdkDropList) }]));
+        this.nodeComponents = viewChildren(XTreeNodeComponent, ...(ngDevMode ? [{ debugName: "nodeComponents" }] : []));
+        this.document = inject(DOCUMENT);
+        this.fontSize = computed(() => parseFloat(XComputedStyle(this.document.documentElement, 'font-size')), ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
+        this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.virtualNodes = signal([], ...(ngDevMode ? [{ debugName: "virtualNodes" }] : []));
+        this.activatedNode = signal(null, ...(ngDevMode ? [{ debugName: "activatedNode" }] : []));
+        this.dataIsFunc = signal(false, ...(ngDevMode ? [{ debugName: "dataIsFunc" }] : []));
+        this.getting = signal(false, ...(ngDevMode ? [{ debugName: "getting" }] : []));
+        this.treeData = signal([], ...(ngDevMode ? [{ debugName: "treeData" }] : []));
+        this.dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+        this.dragPosition = signal(-1, ...(ngDevMode ? [{ debugName: "dragPosition" }] : []));
+        this.hoverTreeNode = signal(null, ...(ngDevMode ? [{ debugName: "hoverTreeNode" }] : []));
+        this.draggingTreeNode = signal(null, ...(ngDevMode ? [{ debugName: "draggingTreeNode" }] : []));
+        this.isEmpty = computed(() => XIsEmpty(this.nodes()), ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+        this.hasChecked = signal(false, ...(ngDevMode ? [{ debugName: "hasChecked" }] : []));
+        this.unSubject = new Subject();
+        this.heightAdaptionSignal = signal(0, ...(ngDevMode ? [{ debugName: "heightAdaptionSignal" }] : []));
+        this.isVirtualScrollAdaption = computed(() => {
+            return !!(this.virtualScroll() && this.heightAdaption());
+        }, ...(ngDevMode ? [{ debugName: "isVirtualScrollAdaption" }] : []));
+        this.virtualScrollHeightSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.heightAdaptionSignal();
+            }
+            else {
+                return XToCssPx(this.virtualScrollHeight(), this.fontSize());
+            }
+        }, ...(ngDevMode ? [{ debugName: "virtualScrollHeightSignal" }] : []));
+        this.minBufferPxSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.virtualScrollHeightSignal();
+            }
+            else {
+                return this.minBufferPx();
+            }
+        }, ...(ngDevMode ? [{ debugName: "minBufferPxSignal" }] : []));
+        this.maxBufferPxSignal = computed(() => {
+            if (this.isVirtualScrollAdaption()) {
+                return this.virtualScrollHeightSignal() * 1.2;
+            }
+            else {
+                return this.maxBufferPx();
+            }
+        }, ...(ngDevMode ? [{ debugName: "maxBufferPxSignal" }] : []));
+        effect(() => {
+            const virtualBody = this.virtualBody();
+            if (virtualBody) {
+                virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
+                virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPxSignal();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        const { expandedAll, data, checked, manual, expanded } = changes;
+        XIsChange(data) && this.setData();
+        XIsChange(expandedAll) && this.setExpandedAll();
+        XIsChange(expanded) && this.setChangeExpanded();
+        XIsChange(checked) && this.setCheckedKeys(this.checked());
+        XIsChange(manual) && this.setManual();
+    }
+    ngAfterViewInit() {
+        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.setActivatedNode(this.treeData());
+        this.setScrollTop();
+    }
+    ngOnDestroy() {
+        this.unSubject.next();
+        this.unSubject.complete();
+        this.resizeObserver?.disconnect();
+    }
+    setData() {
+        if (typeof this.data() === 'undefined')
+            return;
+        this.dataIsFunc.set(false);
+        if (XIsFunction(this.data())) {
+            this.dataIsFunc.set(true);
+            this.getDataByFunc();
+        }
+        else {
+            XSetData(this.data(), this.unSubject).subscribe((x) => {
+                this.setDataChange(x);
+            });
+        }
+    }
+    cdkDragStarted(event) {
+        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() });
+    }
+    cdkDragEnded(event) {
+        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());
+            }
+            hoverTreeNode.change && hoverTreeNode.change();
+            this.nodeDragEnded.emit({
+                event,
+                from: event.source.data,
+                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);
+    }
+    cdkDragMoved(event) {
+        const hoverTreeNode = this.hoverTreeNode();
+        if (!this.dragging() || !hoverTreeNode)
+            return;
+        const y = event.pointerPosition.y;
+        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 - 2) {
+            this.dragPosition.set(-1);
+        }
+        else if (y > top + des + 2 && y < top + height) {
+            this.dragPosition.set(1);
+        }
+        else if (y >= top + des - 2 && y <= top + des + 2) {
+            this.dragPosition.set(0);
+        }
+        hoverTreeNode.change && hoverTreeNode.change();
+        this.nodeDragMoved.emit({
+            event,
+            from: this.draggingTreeNode(),
+            to: hoverTreeNode,
+            position: this.dragPosition()
+        });
+    }
+    predicate(_drag, _drop) {
+        return true;
+    }
+    setManual() {
+        if (this.dataIsFunc())
+            this.getDataByFunc();
+    }
+    getDataByFunc() {
+        if (!this.manual())
+            return;
+        XSetData(this.data()(), this.unSubject).subscribe((x) => {
+            this.setDataChange(x);
+        });
+    }
+    setDataChange(value, regetChildren = false, init = true, parentOpen = true, lazyParant, out = false) {
+        if (XIsEmpty(this.checked()) || !this.hasChecked())
+            this.checked.set([]);
+        const getChildren = (node, level) => {
+            if (init) {
+                const open = this.expandedAll() || level <= this.expandedLevel() || this.expanded().includes(node.id);
+                node.level = level;
+                node.open = out ? open : open || node.open;
+                node.checked = this.checked().includes(node.id) || node.checked;
+                node.childrenLoaded = node.open;
+            }
+            if (XIsUndefined(node.children) || regetChildren) {
+                node.children = XOrderBy(value.filter((y) => y.pid === node.id), this.order().map((x) => x.property), this.order().map((x) => x.order));
+                if (this.levelCheck() && node.children && node.checked) {
+                    for (let nd of node.children) {
+                        nd.checked = true;
+                        this.checked.update((x) => {
+                            x.push(nd.id);
+                            return [...x];
+                        });
+                    }
+                }
+            }
+            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.set(value);
+        this.nodes.set(XOrderBy(value.filter((x) => XIsEmpty(x.pid)), this.order().map((x) => x.property), this.order().map((x) => x.order)).map((x) => getChildren(x, 0)));
+        if (this.levelCheck()) {
+            this.syncParentCheckboxState();
+        }
+        if (parentOpen) {
+            for (let item of value) {
+                if (!item.leaf && item.open) {
+                    this.setParentOpen(value, item);
+                }
+            }
+        }
+        this.setExpanded();
+        this.cdr.markForCheck();
+    }
+    syncParentCheckboxState(nodes = this.treeData()) {
+        const setState = (node) => {
+            if (XIsEmpty(node.children) || !node.children?.length)
+                return;
+            const checkedList = node.children.filter((y) => y.checked);
+            const indeterminateList = node.children.filter((y) => y.indeterminate);
+            node.checked = checkedList.length === node.children.length;
+            node.indeterminate = checkedList.length > 0 || indeterminateList.length > 0;
+            node.children.forEach((item) => setState(item));
+        };
+        nodes.forEach((node) => setState(node));
+        const parentMap = new Map();
+        for (const item of this.treeData()) {
+            if (!XIsEmpty(item.pid)) {
+                const parent = this.treeData().find((x) => x.id === item.pid);
+                if (parent)
+                    parentMap.set(item.id, parent);
+            }
+        }
+        const updateParent = (node) => {
+            const parent = parentMap.get(node.id);
+            if (!parent)
+                return;
+            const parentChildren = parent.children ?? [];
+            const checkedChildren = parentChildren.filter((x) => x.checked);
+            const indeterminateChildren = parentChildren.filter((x) => x.indeterminate);
+            parent.checked = parentChildren.length > 0 && checkedChildren.length === parentChildren.length;
+            parent.indeterminate = checkedChildren.length > 0 || indeterminateChildren.length > 0;
+            updateParent(parent);
+        };
+        for (const item of this.treeData()) {
+            if (!XIsEmpty(item.pid)) {
+                updateParent(item);
+            }
+        }
+    }
+    nodeMouseenter($event) {
+        const { node, ele } = $event;
+        if (!this.dragging())
+            return;
+        let before = this.hoverTreeNode();
+        this.hoverTreeNode.set(node);
+        this.hoverTreeEle = ele;
+        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);
+            if (to - from !== -1) {
+                this.onToggle(null, node);
+            }
+        }
+    }
+    setScrollTop() {
+        const scrollElement = this.scrollElement();
+        if (!scrollElement || !this.activatedNode())
+            return;
+        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 = scrollElement;
+        let min = scrollEle.scrollTop;
+        let max = scrollEle.scrollTop + scrollEle.clientHeight;
+        if (ele.offsetTop + ele.clientHeight > max) {
+            let scrollTop = ele.offsetTop + ele.clientHeight - scrollEle.clientHeight;
+            scrollEle.scrollTop = scrollTop;
+        }
+        if (ele.offsetTop < min) {
+            scrollEle.scrollTop = ele.offsetTop;
+        }
+    }
+    getCheckedNodes() {
+        let result = [];
+        const getChildren = (nodes) => {
+            if (XIsEmpty(nodes))
+                return;
+            nodes.forEach((x) => {
+                if (x.checked && !result.includes(x)) {
+                    result = [...result, x];
+                }
+                getChildren(x.children);
+            });
+        };
+        getChildren(this.nodes());
+        return result;
+    }
+    getCheckedKeys() {
+        return this.getCheckedNodes().map((x) => x.id);
+    }
+    setCheckedKeys(keys = []) {
+        if (!XIsEmpty(keys))
+            this.hasChecked.set(true);
+        const setChildren = (nodes, clear = false) => {
+            if (XIsEmpty(nodes))
+                return;
+            nodes.forEach((x) => {
+                x.checked = !clear && keys.includes(x.id);
+                x.change && x.change(true);
+                setChildren(x.children, clear);
+            });
+        };
+        setChildren(this.nodes(), XIsEmpty(keys));
+        if (this.levelCheck()) {
+            this.syncParentCheckboxState();
+        }
+        this.cdr.markForCheck();
+    }
+    setExpandedAll() {
+        if (this.expandedAll() && this.treeData().length === this.nodes().length)
+            return;
+        const updateNodeStates = (nodes) => {
+            nodes.forEach((node) => {
+                node.open = this.expandedAll();
+                node.change && node.change();
+                if (node.children) {
+                    updateNodeStates(node.children);
+                }
+            });
+        };
+        updateNodeStates(this.treeData());
+        if (this.expandedAll() === false) {
+            this.nodes.set(XOrderBy(this.treeData().filter((x) => XIsEmpty(x.pid)), this.order().map((x) => x.property), this.order().map((x) => x.order)));
+        }
+        else {
+            const allExpandedNodes = [];
+            const traverse = (nodes) => {
+                for (const node of nodes) {
+                    allExpandedNodes.push(node);
+                    if (node.children && node.children.length > 0) {
+                        traverse(node.children);
+                    }
+                }
+            };
+            const rootNodes = XOrderBy(this.treeData().filter((x) => XIsEmpty(x.pid)), this.order().map((x) => x.property), this.order().map((x) => x.order));
+            traverse(rootNodes);
+            this.nodes.set(allExpandedNodes);
+            this.virtualNodes.set([...allExpandedNodes]);
+        }
+        this.virtualBody()?.checkViewportSize();
+    }
+    setExpanded() {
+        for (let i = 0; i < this.nodes().length; i++) {
+            let item = this.nodes()[i];
+            if (item.open && item.children && item.children.length > 0) {
+                let index = this.nodes().indexOf(item);
+                this.nodes.update((x) => {
+                    x.splice(index + 1, 0, ...item.children);
+                    return [...x];
+                });
+            }
+            item.change && item.change();
+        }
+    }
+    setChangeExpanded() {
+        this.setDataChange(this.treeData(), true, true, false, undefined, true);
+    }
+    setVirtualExpandedAll(item, expandedAll) {
+        let index = this.nodes().indexOf(item);
+        if (expandedAll) {
+            let addNodes = [];
+            const getNodes = (nd) => {
+                for (let child of nd.children) {
+                    addNodes.push(child);
+                    getNodes(child);
+                }
+            };
+            getNodes(item);
+            this.nodes.update((x) => {
+                x.splice(index + 1, 0, ...addNodes);
+                return [...x];
+            });
+        }
+    }
+    virtualToggle(node) {
+        let index = this.nodes().indexOf(node);
+        if (node.open) {
+            let addNodes = [];
+            const getNodes = (nd) => {
+                if (XIsEmpty(nd.children))
+                    return;
+                for (let child of nd.children) {
+                    addNodes.push(child);
+                    child.open && getNodes(child);
+                }
+            };
+            getNodes(node);
+            this.nodes.update((x) => {
+                x.splice(index + 1, 0, ...addNodes);
+                return [...x];
+            });
+        }
+        else {
+            let delCount = 0;
+            const getCount = (nd) => {
+                if (XIsEmpty(nd.children))
+                    return;
+                delCount += nd.children.length;
+                for (let child of nd.children) {
+                    child.open && getCount(child);
+                }
+            };
+            getCount(node);
+            this.nodes.update((x) => {
+                x.splice(index + 1, delCount);
+                return [...x];
+            });
+        }
+        this.addOrRemoveExpanded(node);
+        this.virtualBody()?.checkViewportSize();
+        this.cdr.detectChanges();
+    }
+    addOrRemoveExpanded(node) {
+        if (node.open) {
+            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.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.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();
+                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.set(node);
+                            this.activatedChange.emit(this.activatedNode());
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            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) {
+            before.change && before.change();
+        }
+        if (!XIsEmpty(nodes) && dataChange) {
+            this.setDataChange(nodes, false, true, parentOpen);
+        }
+    }
+    setParentOpen(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.update((x) => [...x, parent.id]);
+                }
+                parent.open = true;
+                parent.change && parent.change();
+                getParent(parent);
+            }
+        };
+        getParent(node);
+    }
+    onToggle(event, node) {
+        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)
+            .pipe(map((x) => x.map((y) => {
+            y.level = node.level + 1;
+            y.checked = node.checked;
+            return y;
+        })))
+            .subscribe((x) => {
+            node.children = x;
+            node.childrenLoaded = true;
+            node.loading = false;
+            this.treeData.set([...this.treeData(), ...x]);
+            if (callBack)
+                callBack();
+            node.change && node.change();
+            this.cdr.markForCheck();
+        });
+    }
+    addNode(node) {
+        let parent = this.treeData().find((x) => x.id === node.pid);
+        const _addNode = () => {
+            if (parent) {
+                node.level = parent.level + 1;
+                node.pid = parent.id;
+                node.leaf = true;
+                parent.leaf = false;
+                parent.open = true;
+                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);
+                node.change && node.change();
+            }
+            else if (XIsEmpty(node.pid)) {
+                node.level = 0;
+                node.leaf = true;
+                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);
+                node.change && node.change();
+            }
+        };
+        if (this.lazy() && parent && !parent.childrenLoaded) {
+            this.getLazyData(parent, () => {
+                _addNode();
+            });
+        }
+        else {
+            _addNode();
+        }
+    }
+    setActivatedId(node) {
+        if (this.multiple()) {
+            if (this.objectArray()) {
+                this.activatedId.set([node]);
+            }
+            else {
+                this.activatedId.set([node.id]);
+            }
+        }
+        else {
+            this.activatedId.set(node.id);
+        }
+    }
+    removeNode(node) {
+        let parent = this.treeData().find((x) => x.id === node.pid);
+        const removeChildren = (nd) => {
+            XRemove(this.treeData(), (x) => x.id === nd.id);
+            if (nd.children) {
+                for (let item of nd.children) {
+                    removeChildren(item);
+                }
+            }
+        };
+        removeChildren(node);
+        if (parent) {
+            if (!parent.children)
+                parent.children = [];
+            const childIndex = parent.children.findIndex((x) => x.id === node.id);
+            if (childIndex > -1) {
+                parent.children.splice(childIndex, 1);
+            }
+            parent.leaf = parent.children.length === 0;
+        }
+        this.setDataChange(this.treeData(), true, false, false);
+    }
+    updateNode(node, nowNode) {
+        Object.assign(node, nowNode);
+        this.setDataChange(this.treeData(), true, false, false);
+        this.setActivatedId(node);
+        this.setActivatedNode(this.nodes(), true, false);
+        node.change && node.change();
+    }
+    trackByItem(_index, item) {
+        return item;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", 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: "20.3.5", type: XTreeComponent, isStandalone: true, selector: "x-tree", providers: [
+            {
+                provide: X_TREE_CONTEXT,
+                useExisting: XTreeComponent
+            }
+        ], 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          [actions]=\"actions()\"\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          [actions]=\"actions()\"\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", "cdkDropListElementContainer", "cdkDropListHasAnchor"], 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", "cdkDragScale"], 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: "20.3.5", ngImport: i0, type: XTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreePrefix}`, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: X_TREE_CONTEXT,
+                            useExisting: XTreeComponent
+                        }
+                    ], 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          [actions]=\"actions()\"\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          [actions]=\"actions()\"\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 }], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { ...{ read: (ElementRef) }, isSignal: true }] }], virtualBody: [{ type: i0.ViewChild, args: ['virtualBody', { ...{ read: CdkVirtualScrollViewport }, isSignal: true }] }], dropList: [{ type: i0.ViewChild, args: ['dropList', { ...{ read: (CdkDropList) }, isSignal: true }] }], nodeComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => XTreeNodeComponent), { isSignal: true }] }] } });
+
+class XTreeModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent], exports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XTreeComponent, XTreeNodeComponent],
+                    imports: [XTreeComponent, XTreeNodeComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTreeComponent, XTreeModule, XTreeNodeComponent, XTreeNodePrefix, XTreeNodeProperty, XTreePrefix, XTreeProperty, X_TREE_ORDER_DEFAULT };
+//# sourceMappingURL=ng-nest-ui-tree.mjs.map