@ng-nest/ui 15.0.20 → 16.0.1

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

@@ -0,0 +1,1275 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i1 from '@ng-nest/ui/core';
+import { XProperty, XDataConvert, XInputBoolean, XInputNumber, XWithConfig, XIsEmpty, XRemove, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined } from '@ng-nest/ui/core';
+import { Subject, debounceTime, takeUntil, map } from 'rxjs';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i5 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i6 from '@ng-nest/ui/checkbox';
+import { XCheckboxModule } from '@ng-nest/ui/checkbox';
+import * as i7 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
+import * as i8 from '@ng-nest/ui/link';
+import { XLinkModule } from '@ng-nest/ui/link';
+import * as i9 from '@ng-nest/ui/keyword';
+import { XKeywordModule } from '@ng-nest/ui/keyword';
+import * as i4$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i6$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+/**
+ * Tree
+ * @selector x-tree
+ * @decorator component
+ */
+const XTreePrefix = 'x-tree';
+const X_CONFIG_NAME = 'tree';
+/**
+ * Tree Property
+ */
+class XTreeProperty extends XProperty {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.data = [];
+        /**
+         * @zh_CN 展开的节点
+         * @en_US Expanded node
+         */
+        this.expanded = [];
+        /**
+         * @zh_CN checkbox 选中的节点
+         * @en_US Checkbox selected node
+         */
+        this.checked = [];
+        /**
+         * @zh_CN 默认展开的层级
+         * @en_US Default expanded level
+         */
+        this.expandedLevel = -1;
+        /**
+         * @zh_CN 当前点击选中的节点变化的事件
+         * @en_US The event of the currently clicked node change
+         */
+        this.activatedChange = new EventEmitter();
+        /**
+         * @zh_CN 使用 checkedbox 选中变化的事件
+         * @en_US Use checkedbox to select changed events
+         */
+        this.checkboxChange = new EventEmitter();
+        /**
+         * @zh_CN 如果 data 是函数类型，可以通过此参数控制请求，常用于弹框中的表格，弹出后再请求
+         * @en_US If data is a function type, you can use this parameter to control the request, which is often used in the form in the pop-up box, and then request it after it pops up
+         */
+        this.manual = true;
+        /**
+         * @zh_CN checkbox 状态改变触发层级检查
+         * @en_US Checkbox status changes trigger level checks
+         */
+        this.levelCheck = true;
+        /**
+         * @zh_CN 节点内容不换行显示省略号
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeNowrap = true;
+        /**
+         * @zh_CN 树节点操作按钮
+         * @en_US Tree node operation buttons
+         */
+        this.actions = [];
+        /**
+         * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数，开启虚拟滚动才生效
+         * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
+         */
+        this.minBufferPx = 100;
+        /**
+         * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数，开启虚拟滚动才生效
+         * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
+         */
+        this.maxBufferPx = 200;
+        /**
+         * @zh_CN 参数控制请求改变事件
+         * @en_US Parameter control request change event
+         */
+        this.manualChange = new EventEmitter();
+        /**
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
+         */
+        this.nodeClick = new EventEmitter();
+        /**
+         * @zh_CN 节点点击事件
+         * @en_US Node click event
+         */
+        this.activatedIdChange = new EventEmitter();
+        /**
+         * @zh_CN 节点开始拖动事件
+         * @en_US Node drag started
+         */
+        this.nodeDragStarted = new EventEmitter();
+        /**
+         * @zh_CN 节点结束拖动事件
+         * @en_US Node drag ended
+         */
+        this.nodeDragEnded = new EventEmitter();
+        /**
+         * @zh_CN 节点正在拖动事件
+         * @en_US Node drag moved
+         */
+        this.nodeDragMoved = new EventEmitter();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeProperty, selector: "x-tree-property", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", drag: "drag", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions", scrollElement: "scrollElement", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", heightAdaption: "heightAdaption", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", multiple: "multiple", objectArray: "objectArray", keywordText: "keywordText", caseSensitive: "caseSensitive", onlyLeaf: "onlyLeaf", expandedIcon: "expandedIcon", showLine: "showLine" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+__decorate([
+    XDataConvert()
+], XTreeProperty.prototype, "data", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "checkbox", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "lazy", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "expandedAll", void 0);
+__decorate([
+    XInputNumber()
+], XTreeProperty.prototype, "expandedLevel", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "nodeOpen", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 1.5),
+    XInputNumber()
+], XTreeProperty.prototype, "spacing", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 0),
+    XInputNumber()
+], XTreeProperty.prototype, "nodeHeight", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "allowManyActivated", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "drag", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "manual", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "levelCheck", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "nodeNowrap", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 'center')
+], XTreeProperty.prototype, "nodeAlignItems", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME),
+    XInputBoolean()
+], XTreeProperty.prototype, "virtualScroll", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 400),
+    XInputNumber()
+], XTreeProperty.prototype, "virtualScrollHeight", void 0);
+__decorate([
+    XWithConfig(X_CONFIG_NAME, 26),
+    XInputNumber()
+], XTreeProperty.prototype, "itemSize", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "multiple", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeProperty.prototype, "objectArray", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, true)
+], XTreeProperty.prototype, "caseSensitive", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, false)
+], XTreeProperty.prototype, "onlyLeaf", void 0);
+__decorate([
+    XInputBoolean(),
+    XWithConfig(X_CONFIG_NAME, false)
+], XTreeProperty.prototype, "showLine", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreePrefix}-property`, template: '' }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], activatedId: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], expandedAll: [{
+                type: Input
+            }], expandedLevel: [{
+                type: Input
+            }], nodeOpen: [{
+                type: Input
+            }], spacing: [{
+                type: Input
+            }], labelTpl: [{
+                type: Input
+            }], nodeHeight: [{
+                type: Input
+            }], allowManyActivated: [{
+                type: Input
+            }], drag: [{
+                type: Input
+            }], activatedChange: [{
+                type: Output
+            }], checkboxChange: [{
+                type: Output
+            }], manual: [{
+                type: Input
+            }], levelCheck: [{
+                type: Input
+            }], nodeNowrap: [{
+                type: Input
+            }], nodeAlignItems: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], scrollElement: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], virtualScrollHeight: [{
+                type: Input
+            }], heightAdaption: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], minBufferPx: [{
+                type: Input
+            }], maxBufferPx: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], objectArray: [{
+                type: Input
+            }], keywordText: [{
+                type: Input
+            }], caseSensitive: [{
+                type: Input
+            }], onlyLeaf: [{
+                type: Input
+            }], expandedIcon: [{
+                type: Input
+            }], showLine: [{
+                type: Input
+            }], manualChange: [{
+                type: Output
+            }], nodeClick: [{
+                type: Output
+            }], activatedIdChange: [{
+                type: Output
+            }], nodeDragStarted: [{
+                type: Output
+            }], nodeDragEnded: [{
+                type: Output
+            }], nodeDragMoved: [{
+                type: Output
+            }] } });
+/**
+ * TreeNode
+ * @selector x-tree-node
+ * @decorator directive
+ */
+const XTreeNodePrefix = 'x-tree-node';
+/**
+ * TreeNode Property
+ */
+class XTreeNodeProperty extends XProperty {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 节点数据
+         * @en_US Node data
+         */
+        this.node = {};
+        /**
+         * @zh_CN 节点的高度，单位 rem
+         * @en_US The height of the node in rem
+         */
+        this.nodeHeight = 0;
+        /**
+         * @zh_CN 节点垂直对齐方式
+         * @en_US Show ellipsis without wrapping
+         */
+        this.nodeAlignItems = 'center';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeNodeProperty, selector: "x-tree-node-property", inputs: { node: "node", level: "level", lazy: "lazy", nodeHeight: "nodeHeight", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", lazyData: "lazyData", virtualScroll: "virtualScroll" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+__decorate([
+    XInputBoolean()
+], XTreeNodeProperty.prototype, "lazy", void 0);
+__decorate([
+    XInputNumber()
+], XTreeNodeProperty.prototype, "nodeHeight", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeNodeProperty.prototype, "nodeNowrap", void 0);
+__decorate([
+    XInputBoolean()
+], XTreeNodeProperty.prototype, "virtualScroll", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeNodePrefix}-property`, template: '' }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], nodeHeight: [{
+                type: Input
+            }], nodeNowrap: [{
+                type: Input
+            }], nodeAlignItems: [{
+                type: Input
+            }], lazyData: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }] } });
+
+class XTreeService {
+    getChildren(data, node) {
+        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 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) {
+            const index = toIndex > formIndex ? toIndex - 1 : toIndex;
+            data.splice(pos === -1 ? index : index + 1, 0, from);
+        }
+        else if (from.pid !== to.pid) {
+            from.pid = to.pid;
+            const 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: "16.0.0", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeService, decorators: [{
+            type: Injectable
+        }] });
+
+class XTreeNodeComponent extends XTreeNodeProperty {
+    get loading() {
+        return this._loading;
+    }
+    set loading(value) {
+        this._loading = value;
+        this.cdr.detectChanges();
+    }
+    get showDragIndicator() {
+        return this.tree.dragging && this.tree.hoverTreeNode?.id === this.node.id;
+    }
+    onMouseenter(event) {
+        this.nodeMouseenter.emit({ event: event, node: this.node, ele: this.elementRef });
+    }
+    onMouseleave(_event) {
+        if (!this.tree.dragging)
+            return;
+        this.tree.hoverTreeNode?.change && this.tree.hoverTreeNode?.change();
+        this.cdr.detectChanges();
+    }
+    get isChildrenLast() {
+        let parent = this.tree.nodes.find((x) => x.id === this.node.pid);
+        if (!parent)
+            return false;
+        const index = parent.children.indexOf(this.node);
+        return index + 1 === parent.children.length;
+    }
+    get isParentLast() {
+        let parents = this.treeService.getParents(this.tree.nodes, this.node);
+        if (parents.length <= 1)
+            return [];
+        const res = [];
+        parents.reduce((pre, curr) => {
+            if (pre === null)
+                return curr;
+            const index = curr.children?.indexOf(pre);
+            res.push(index + 1 === curr.children?.length);
+            return curr;
+        });
+        return res.reverse();
+    }
+    get numLevel() {
+        return Number(this.level);
+    }
+    get verticalLevel() {
+        if (this.numLevel > 0) {
+            return Array.from({ length: this.numLevel }).map((_x, index) => index + 1);
+        }
+        else {
+            return [];
+        }
+    }
+    get verticalWidth() {
+        return Number(this.tree.spacing) / 2;
+    }
+    get paddingLeft() {
+        return Number(this.node?.level ? this.node.level : 0) * Number(this.tree.spacing);
+    }
+    get indicatorWidth() {
+        return `calc(100% - ${this.paddingLeft + (this.node.leaf ? 1.5 : 0)}rem)`;
+    }
+    get indicatorStyle() {
+        if (this.tree.dragPosition === 1) {
+            return { bottom: `${-0.0625}rem` };
+        }
+        else if (this.tree.dragPosition === -1) {
+            return { top: `${-0.0625}rem` };
+        }
+        return {};
+    }
+    get getActivated() {
+        if (this.tree.multiple) {
+            if (this.tree.objectArray) {
+                return this.tree.activatedId?.map((x) => x.id).includes(this.node.id);
+            }
+            else {
+                return this.tree.activatedId?.includes(this.node.id);
+            }
+        }
+        else {
+            return this.tree.activatedId === this.node.id;
+        }
+    }
+    constructor(renderer, elementRef, cdr, configService, ngZone, treeService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.ngZone = ngZone;
+        this.treeService = treeService;
+        this.nodeMouseenter = new EventEmitter();
+        this.rootClass = true;
+        this._loading = false;
+        this._unSubject = new Subject();
+    }
+    ngOnInit() {
+        this.node.change = (check) => {
+            if (check)
+                this.setCheckbox();
+            this?.cdr.detectChanges();
+        };
+        this.level = this.node?.level ? this.node.level : 0;
+        if (!this.tree.levelCheck)
+            return;
+        if (this.node.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 && !node.leaf && this.tree.onToggle(event, node);
+        const onChange = () => {
+            change && change();
+            event.preventDefault();
+            event.stopPropagation();
+            this.cdr.detectChanges();
+        };
+        if (this.tree.onlyLeaf && !node.leaf) {
+            onChange();
+            return;
+        }
+        if (this.tree.multiple) {
+            if (!this.tree.activatedId)
+                this.tree.activatedId = [];
+            if (this.tree.objectArray) {
+                const ids = this.tree.activatedId.map((x) => x.id);
+                if (ids.includes(node.id)) {
+                    this.tree.activatedId.splice(ids.indexOf(node.id), 1);
+                }
+                else {
+                    this.tree.activatedId.push(node);
+                }
+            }
+            else {
+                if (this.tree.activatedId.includes(node.id)) {
+                    this.tree.activatedId.splice(this.tree.activatedId.indexOf(node.id), 1);
+                }
+                else {
+                    this.tree.activatedId.push(node.id);
+                }
+            }
+        }
+        else {
+            this.tree.activatedId = node.id;
+        }
+        if (this.tree.activatedNode) {
+            if (this.tree.activatedNode.id === node.id && !this.tree.allowManyActivated)
+                return;
+        }
+        this.tree.activatedNode = node;
+        this.tree.activatedIdChange.emit(this.tree.activatedId);
+        this.tree.activatedChange.emit(node);
+        this.tree.nodeClick.emit(node);
+        onChange();
+    }
+    onCheckboxChange() {
+        this.setCheckbox();
+        this.tree.checkboxChange.emit(this.node);
+    }
+    getVerticalLeft(i) {
+        return (i - 1) * Number(this.tree.spacing) + Number(this.tree.spacing) / 2;
+    }
+    setCheckbox() {
+        if (!this.tree.levelCheck)
+            return;
+        this.node.indeterminate = this.node.checked;
+        this.node.children && this.setChildrenCheckbox(this.node.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);
+    }
+    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();
+    }
+    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: "16.0.0", ngImport: i0, type: XTreeNodeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { tree: "tree" }, outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [class.x-tree-node-last]=\"isChildrenLast\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <div class=\"x-tree-node-line\" *ngIf=\"tree.showLine && numLevel > 0\" [style.width.rem]=\"paddingLeft\">\r\n    <div\r\n      class=\"x-tree-node-line-vertical\"\r\n      [hidden]=\"isParentLast[i - 1]\"\r\n      [class.is-last]=\"i === verticalLevel.length\"\r\n      [style.left.rem]=\"getVerticalLeft(i)\"\r\n      *ngFor=\"let i of verticalLevel\"\r\n    ></div>\r\n    <div\r\n      class=\"x-tree-node-line-horizontal\"\r\n      [style.width.rem]=\"verticalWidth\"\r\n      [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n    ></div>\r\n  </div>\r\n  <div class=\"x-tree-node-drag-indicator\" *ngIf=\"showDragIndicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  <ng-container *ngIf=\"!node.loading\">\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      <ng-container *ngIf=\"tree.expandedIcon; else defaultIconTpl\">\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #defaultIconTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByAction\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "component", type: i6.XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i8.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i9.XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [class.x-tree-node-last]=\"isChildrenLast\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <div class=\"x-tree-node-line\" *ngIf=\"tree.showLine && numLevel > 0\" [style.width.rem]=\"paddingLeft\">\r\n    <div\r\n      class=\"x-tree-node-line-vertical\"\r\n      [hidden]=\"isParentLast[i - 1]\"\r\n      [class.is-last]=\"i === verticalLevel.length\"\r\n      [style.left.rem]=\"getVerticalLeft(i)\"\r\n      *ngFor=\"let i of verticalLevel\"\r\n    ></div>\r\n    <div\r\n      class=\"x-tree-node-line-horizontal\"\r\n      [style.width.rem]=\"verticalWidth\"\r\n      [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n    ></div>\r\n  </div>\r\n  <div class=\"x-tree-node-drag-indicator\" *ngIf=\"showDragIndicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  <ng-container *ngIf=\"!node.loading\">\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      <ng-container *ngIf=\"tree.expandedIcon; else defaultIconTpl\">\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #defaultIconTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByAction\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i0.NgZone }, { type: XTreeService }]; }, propDecorators: { tree: [{
+                type: Input
+            }], nodeMouseenter: [{
+                type: Output
+            }], rootClass: [{
+                type: HostBinding,
+                args: ['class.x-tree-node']
+            }], onMouseenter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], onMouseleave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class XTreeComponent extends XTreeProperty {
+    set _nodeComponents(value) {
+        this.nodeComponents = value;
+    }
+    get isEmpty() {
+        return XIsEmpty(this.nodes);
+    }
+    constructor(renderer, elementRef, cdr, configService, ngZone, treeService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.ngZone = ngZone;
+        this.treeService = treeService;
+        this.nodes = [];
+        this.virtualNodes = [];
+        this.dataIsFunc = false;
+        this.getting = false;
+        this.treeData = [];
+        this.dragging = false;
+        this.draggingTreeNode = null;
+        this._unSubject = new Subject();
+    }
+    ngOnChanges(changes) {
+        const { expandedAll, data, activatedId, checked, manual } = changes;
+        XIsChange(data) && this.setData();
+        XIsChange(activatedId) && this.setActivatedNode(this.treeData);
+        XIsChange(expandedAll) && this.setExpandedAll();
+        XIsChange(checked) && this.setCheckedKeys(this.checked);
+        XIsChange(manual) && this.setManual();
+    }
+    ngAfterViewInit() {
+        if (this.virtualScroll && this.heightAdaption) {
+            this.setVirtualScrollHeight();
+            XResize(this.heightAdaption)
+                .pipe(debounceTime(30), takeUntil(this._unSubject))
+                .subscribe((x) => {
+                this._resizeObserver = x.resizeObserver;
+                this.setVirtualScrollHeight();
+            });
+        }
+        this.setScorllTop();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+        this._resizeObserver?.disconnect();
+    }
+    setData() {
+        if (typeof this.data === 'undefined')
+            return;
+        this.dataIsFunc = false;
+        if (XIsFunction(this.data)) {
+            this.dataIsFunc = true;
+            this.getDataByFunc();
+        }
+        else {
+            XSetData(this.data, this._unSubject).subscribe((x) => {
+                this.setDataChange(x);
+            });
+        }
+    }
+    cdkDragStarted(event) {
+        this.dragging = true;
+        this.draggingTreeNode = 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 = false;
+        if (this.hoverTreeNode) {
+            if (this.hoverTreeNode.id !== event.source.data.id) {
+                this.insertNode(event.source.data, this.hoverTreeNode, this.dragPosition);
+            }
+            this.hoverTreeNode.change && this.hoverTreeNode.change();
+            this.nodeDragEnded.emit({ event, from: event.source.data, to: this.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) {
+        if (!this.dragging || !this.hoverTreeNode)
+            return;
+        const y = event.pointerPosition.y;
+        if (event.source.data.id === this.hoverTreeNode.id)
+            return;
+        const target = this.hoverTreeEle.nativeElement;
+        const { top, height } = target.getBoundingClientRect();
+        const des = Math.max(height * 0.5, 2);
+        if (y > top && y < top + des) {
+            this.dragPosition = -1;
+        }
+        else if (y > top + des && y < top + height) {
+            this.dragPosition = 1;
+        }
+        this.hoverTreeNode.change && this.hoverTreeNode.change();
+        this.nodeDragMoved.emit({ event, from: this.draggingTreeNode, to: this.hoverTreeNode, position: this.dragPosition });
+    }
+    predicate(_drag, _drop) {
+        return true;
+    }
+    setVirtualScrollHeight() {
+        this.virtualScrollHeight = this.heightAdaption.clientHeight;
+        this.minBufferPx = this.virtualScrollHeight;
+        this.maxBufferPx = this.virtualScrollHeight * 1.2;
+        this.virtualBody['_scrollStrategy']['_minBufferPx'] = this.minBufferPx;
+        this.virtualBody['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPx;
+        this.cdr.detectChanges();
+    }
+    setManual() {
+        if (this.dataIsFunc)
+            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) {
+        if (XIsEmpty(this.checked))
+            this.checked = [];
+        const getChildren = (node, level) => {
+            if (init) {
+                node.level = level;
+                node.open = Boolean(this.expandedAll) || level <= Number(this.expandedLevel) || this.expanded.includes(node.id) || node.open;
+                node.checked = this.checked.includes(node.id) || node.checked;
+                node.childrenLoaded = node.open;
+            }
+            if (XIsUndefined(node.children) || regetChildren) {
+                node.children = value.filter((y) => y.pid === node.id);
+                if (this.levelCheck && node.children && node.checked) {
+                    for (let nd of node.children) {
+                        nd.checked = true;
+                        this.checked.push(nd.id);
+                    }
+                }
+            }
+            if ((!this.lazy && (XIsUndefined(node.leaf) || regetChildren)) || node.id === lazyParant?.id) {
+                node.leaf = node.children?.length === 0;
+            }
+            if (!node.leaf)
+                node.children?.map((y) => getChildren(y, level + 1));
+            return node;
+        };
+        this.treeData = value;
+        this.nodes = value.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0));
+        if (parentOpen) {
+            for (let item of value) {
+                if (!item.leaf && item.open) {
+                    this.setParentOpen(value, item);
+                }
+            }
+        }
+        this.setExpanded();
+        this.cdr.detectChanges();
+    }
+    nodeMouseenter($event) {
+        const { node, ele } = $event;
+        if (!this.dragging)
+            return;
+        let before = this.hoverTreeNode;
+        this.hoverTreeNode = node;
+        this.hoverTreeEle = ele;
+        this.hoverTreeNode.change && this.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);
+            }
+            // else {
+            //   let addNodes: XTreeNode[] = [];
+            //   node.open = true;
+            //   const getNodes = (nd: XTreeNode) => {
+            //     if (XIsEmpty(nd.children)) return;
+            //     for (let child of nd.children!) {
+            //       addNodes.push(child);
+            //       child.open && getNodes(child);
+            //     }
+            //   };
+            //   getNodes(node);
+            //   let nodes = [...this.nodes];
+            //   nodes.splice(to + 1, 0, ...addNodes);
+            //   this.nodes = nodes;
+            // }
+        }
+    }
+    setScorllTop() {
+        if (!this.scrollElement || !this.activatedNode)
+            return;
+        let inx = this.nodes.indexOf(this.activatedNode);
+        let com = this.nodeComponents.get(inx);
+        if (!com)
+            return;
+        let ele = com.elementRef.nativeElement;
+        let scrollEle = this.scrollElement;
+        let min = scrollEle.scrollTop;
+        let max = scrollEle.scrollTop + scrollEle.clientHeight;
+        if (ele.offsetTop + ele.clientHeight > max) {
+            let scrollTop = ele.offsetTop + ele.clientHeight - scrollEle.clientHeight;
+            scrollEle.scrollTop = scrollTop;
+        }
+        if (ele.offsetTop < min) {
+            scrollEle.scrollTop = ele.offsetTop;
+        }
+    }
+    getCheckedNodes() {
+        let result = [];
+        const getChildren = (nodes) => {
+            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 = []) {
+        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));
+        this.cdr.detectChanges();
+    }
+    setExpandedAll() {
+        if (this.expandedAll && this.treeData.length === this.nodes.length)
+            return;
+        const setChildren = (nodes) => {
+            if (XIsEmpty(nodes))
+                return;
+            nodes.forEach((x) => {
+                x.open = Boolean(this.expandedAll);
+                x.change && x.change();
+                setChildren(x.children);
+            });
+        };
+        setChildren(this.nodes);
+        if (this.expandedAll === false) {
+            this.nodes = this.treeData.filter((x) => XIsEmpty(x.pid));
+        }
+        else {
+            if (this.virtualNodes.length === 0) {
+                this.virtualNodes = [...this.nodes];
+            }
+            this.nodes = [...this.virtualNodes];
+            for (let item of this.virtualNodes) {
+                this.setVirtualExpandedAll(item, this.expandedAll);
+            }
+        }
+    }
+    setExpanded() {
+        for (let item of this.nodes) {
+            if (item.open && item.children) {
+                let index = this.nodes.indexOf(item);
+                this.nodes.splice(index + 1, 0, ...item.children);
+            }
+            item.change && item.change();
+        }
+        this.nodes = [...this.nodes];
+    }
+    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.splice(index + 1, 0, ...addNodes);
+        }
+        this.nodes = [...this.nodes];
+    }
+    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.splice(index + 1, 0, ...addNodes);
+        }
+        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.splice(index + 1, delCount);
+        }
+        this.addOrRemoveExpanded(node);
+        this.nodes = [...this.nodes];
+    }
+    addOrRemoveExpanded(node) {
+        if (node.open) {
+            if (!this.expanded.includes(node.id)) {
+                this.expanded.push(node.id);
+            }
+        }
+        else {
+            if (this.expanded.includes(node.id)) {
+                this.expanded.splice(this.expanded.indexOf(node.id), 1);
+            }
+        }
+    }
+    setActivatedNode(nodes, parentOpen = true, dataChange = true) {
+        if (XIsEmpty(this.activatedId) && this.multiple) {
+            this.activatedId = [];
+        }
+        let before = this.activatedNode;
+        if (this.multiple) {
+            if (this.activatedId.length > 0) {
+                let ids = this.objectArray ? this.activatedId.map((x) => x.id) : this.activatedId;
+                for (let i = 0; i < ids.length; i++) {
+                    let node = nodes.find((x) => x.id === ids[i]);
+                    if (node) {
+                        parentOpen && this.setParentOpen(nodes, node);
+                        if (i === ids.length - 1) {
+                            this.activatedNode = node;
+                            this.activatedChange.emit(this.activatedNode);
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            let activatedId = this.activatedId;
+            this.activatedNode = nodes.find((x) => x.id == activatedId);
+            if (this.activatedNode) {
+                parentOpen && this.setParentOpen(nodes, this.activatedNode);
+                this.activatedChange.emit(this.activatedNode);
+            }
+        }
+        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 = [...this.expanded, parent.id];
+                }
+                parent.open = true;
+                parent.change && parent.change();
+                getParent(parent);
+            }
+        };
+        getParent(node);
+    }
+    setParentCheck(nodes, node) {
+        const getParent = (child) => {
+            if (XIsEmpty(child.pid))
+                return;
+            const parent = nodes.find((x) => x.id === child.pid);
+            if (!XIsEmpty(parent)) {
+                if (!this.expanded.includes(parent.id)) {
+                    this.expanded = [...this.expanded, parent.id];
+                }
+                parent.open = true;
+                parent.change && parent.change();
+                getParent(parent);
+            }
+        };
+        getParent(node);
+    }
+    onToggle(event, node) {
+        this.ngZone.run(() => {
+            node.open = !node.open;
+            if (this.lazy && !node.childrenLoaded) {
+                this.getLazyData(node, () => this.virtualToggle(node));
+            }
+            else {
+                this.virtualToggle(node);
+            }
+            event?.preventDefault();
+            event?.stopPropagation();
+        });
+    }
+    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 = [...this.treeData, ...x];
+            if (callBack)
+                callBack();
+            node.change && node.change();
+            this.cdr.detectChanges();
+        });
+    }
+    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 = [...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 = [...this.treeData, node];
+                this.nodes = [...this.nodes, node];
+                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 = [node];
+            }
+            else {
+                this.activatedId = [node.id];
+            }
+        }
+        else {
+            this.activatedId = node.id;
+        }
+        this.activatedIdChange.emit(this.activatedId);
+    }
+    removeNode(node) {
+        let parent = this.treeData.find((x) => x.id === node.pid);
+        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);
+        node.change && node.change();
+    }
+    trackByItem(_index, item) {
+        return `${item.id}-${item.level}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeComponent, selector: "x-tree", providers: [XTreeService], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true }, { propertyName: "_nodeComponents", predicate: XTreeNodeComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\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        *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled\"\r\n        (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n        (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n        (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n        [cdkDragData]=\"node\"\r\n        (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n        [node]=\"node\"\r\n        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <x-tree-node\r\n        *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled\"\r\n        (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n        (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n        (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n        [cdkDragData]=\"node\"\r\n        (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n        [node]=\"node\"\r\n        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["tree"], outputs: ["nodeMouseenter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XTreeService], template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\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        *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled\"\r\n        (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n        (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n        (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n        [cdkDragData]=\"node\"\r\n        (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n        [node]=\"node\"\r\n        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\r\n  >\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty\"\r\n      [cdkDropListData]=\"nodes\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      <x-tree-node\r\n        *cdkVirtualFor=\"let node of nodes; templateCacheSize: 0; trackBy: trackByItem\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled\"\r\n        (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n        (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n        (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n        [cdkDragData]=\"node\"\r\n        (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n        [node]=\"node\"\r\n        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i0.NgZone }, { type: XTreeService }]; }, propDecorators: { tree: [{
+                type: ViewChild,
+                args: ['tree', { static: true }]
+            }], virtualBody: [{
+                type: ViewChild,
+                args: ['virtualBody']
+            }], dropList: [{
+                type: ViewChild,
+                args: ['dropList']
+            }], _nodeComponents: [{
+                type: ViewChildren,
+                args: [XTreeNodeComponent]
+            }] } });
+
+class XTreeModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule,
+            FormsModule,
+            DragDropModule,
+            XIconModule,
+            XCheckboxModule,
+            XOutletModule,
+            XLinkModule,
+            ScrollingModule,
+            XKeywordModule], exports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, imports: [CommonModule,
+            FormsModule,
+            DragDropModule,
+            XIconModule,
+            XCheckboxModule,
+            XOutletModule,
+            XLinkModule,
+            ScrollingModule,
+            XKeywordModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty],
+                    exports: [XTreeComponent, XTreeNodeComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        XIconModule,
+                        XCheckboxModule,
+                        XOutletModule,
+                        XLinkModule,
+                        ScrollingModule,
+                        XKeywordModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTreeComponent, XTreeModule, XTreeNodeComponent, XTreeNodePrefix, XTreeNodeProperty, XTreePrefix, XTreeProperty };
+//# sourceMappingURL=ng-nest-ui-tree.mjs.map