@ng-nest/ui 12.0.11 → 13.0.3

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

@@ -0,0 +1,608 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i1 from '@ng-nest/ui/core';
+import { XProperty, XDataConvert, XInputBoolean, XInputNumber, XWithConfig, XIsEmpty, XIsChange, XIsObservable, XSetData, XIsFunction, XIsUndefined } from '@ng-nest/ui/core';
+import { Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import * as i2 from '@ng-nest/ui/icon';
+import { XIconModule } from '@ng-nest/ui/icon';
+import * as i3 from '@ng-nest/ui/checkbox';
+import { XCheckboxModule } from '@ng-nest/ui/checkbox';
+import * as i4 from '@ng-nest/ui/link';
+import { XLinkModule } from '@ng-nest/ui/link';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i7 from '@ng-nest/ui/outlet';
+import { XOutletModule } from '@ng-nest/ui/outlet';
+
+/**
+ * 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 参数控制请求改变事件
+         * @en_US Parameter control request change event
+         */
+        this.manualChange = new EventEmitter();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTreeProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeProperty, selector: "ng-component", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange" }, 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, 0.875),
+    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, "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);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeProperty, decorators: [{
+            type: Component,
+            args: [{ 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
+            }], activatedChange: [{
+                type: Output
+            }], checkboxChange: [{
+                type: Output
+            }], manual: [{
+                type: Input
+            }], levelCheck: [{
+                type: Input
+            }], nodeNowrap: [{
+                type: Input
+            }], nodeAlignItems: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], manualChange: [{
+                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 */ /** @nocollapse */ XTreeNodeProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeNodeProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeNodeProperty, selector: "ng-component", inputs: { node: "node", level: "level", lazy: "lazy", nodeHeight: "nodeHeight", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", lazyData: "lazyData" }, 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);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], level: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], nodeHeight: [{
+                type: Input
+            }], nodeNowrap: [{
+                type: Input
+            }], nodeAlignItems: [{
+                type: Input
+            }], lazyData: [{
+                type: Input
+            }] } });
+
+class XTreeNodeComponent extends XTreeNodeProperty {
+    constructor(
+    // @Optional() public tree: XTreeComponent,
+    renderer, elementRef, cdr, configService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.rootClass = true;
+        this._loading = false;
+    }
+    get loading() {
+        return this._loading;
+    }
+    set loading(value) {
+        this._loading = value;
+        this.cdr.detectChanges();
+    }
+    get paddingLeft() {
+        return Number(this.level) * Number(this.tree.spacing);
+    }
+    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);
+    }
+    onToggle(event, node) {
+        node.open = !node.open;
+        if (node.open && !node.childrenLoaded) {
+            if (this.lazy) {
+                this.loading = true;
+                this.lazyData(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;
+                    this.loading = false;
+                    this.cdr.detectChanges();
+                });
+            }
+            else {
+                node.childrenLoaded = true;
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.cdr.detectChanges();
+    }
+    onActivate(event, node) {
+        const change = this.tree.activatedNode?.change;
+        this.tree.nodeOpen && node.leaf && this.onToggle(event, node);
+        if (this.tree.activatedNode) {
+            if (this.tree.activatedNode.id === node.id && !this.tree.allowManyActivated)
+                return;
+        }
+        this.tree.activatedNode = node;
+        this.tree.activatedChange.emit(node);
+        change && change();
+        event.stopPropagation();
+        this.cdr.detectChanges();
+    }
+    onCheckboxChange() {
+        this.setCheckbox();
+        this.tree.checkboxChange.emit(this.node);
+    }
+    setCheckbox() {
+        if (!this.tree.levelCheck)
+            return;
+        this.node.indeterminate = this.node.checked;
+        this.node.children && this.setChildrenCheckbox(this.node.checked);
+        this.parent?.setParentCheckbox();
+    }
+    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.parent?.setParentCheckbox();
+        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;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeNodeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { parent: "parent", tree: "tree" }, host: { properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"tree.activatedNode?.id === node.id\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!loading\"\r\n    [class.is-leaf]=\"!node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    (click)=\"!tree.nodeOpen && onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon *ngIf=\"loading\" type=\"fto-loader\" [spin]=\"loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"getNodeDisabled(node.disabled)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n</div>\r\n<ul *ngIf=\"node.childrenLoaded || (node.leaf && node.open)\" [hidden]=\"!node.open\">\r\n  <li\r\n    x-tree-node\r\n    *ngFor=\"let child of node.children; trackBy: trackByItem\"\r\n    [node]=\"child\"\r\n    [parent]=\"this\"\r\n    [lazy]=\"lazy\"\r\n    [lazyData]=\"lazyData\"\r\n    [nodeHeight]=\"nodeHeight\"\r\n    [nodeNowrap]=\"nodeNowrap\"\r\n    [nodeAlignItems]=\"nodeAlignItems\"\r\n    [tree]=\"tree\"\r\n  ></li>\r\n</ul>\r\n", styles: [".x-tree-node{margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;color:var(--x-text-400);font-size:1rem;margin-right:.125rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover,.x-tree-node-content.x-activated{background-color:var(--x-background-a100)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"], components: [{ type: i2.XIconComponent, selector: "x-icon" }, { type: i3.XCheckboxComponent, selector: "x-checkbox" }, { type: i4.XLinkComponent, selector: "x-link" }, { type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["parent", "tree"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"tree.activatedNode?.id === node.id\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"onActivate($event, node)\"\r\n>\r\n  <x-icon\r\n    *ngIf=\"!loading\"\r\n    [class.is-leaf]=\"!node.leaf\"\r\n    [class.is-open]=\"node.open\"\r\n    type=\"fto-chevron-right\"\r\n    (click)=\"!tree.nodeOpen && onToggle($event, node)\"\r\n  ></x-icon>\r\n  <x-icon *ngIf=\"loading\" type=\"fto-loader\" [spin]=\"loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"getNodeDisabled(node.disabled)\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByItem\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n</div>\r\n<ul *ngIf=\"node.childrenLoaded || (node.leaf && node.open)\" [hidden]=\"!node.open\">\r\n  <li\r\n    x-tree-node\r\n    *ngFor=\"let child of node.children; trackBy: trackByItem\"\r\n    [node]=\"child\"\r\n    [parent]=\"this\"\r\n    [lazy]=\"lazy\"\r\n    [lazyData]=\"lazyData\"\r\n    [nodeHeight]=\"nodeHeight\"\r\n    [nodeNowrap]=\"nodeNowrap\"\r\n    [nodeAlignItems]=\"nodeAlignItems\"\r\n    [tree]=\"tree\"\r\n  ></li>\r\n</ul>\r\n", styles: [".x-tree-node{margin:0;padding:0}.x-tree-node-content{display:flex;padding:.0625rem 0;cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;color:var(--x-text-400);font-size:1rem;margin-right:.125rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon.is-leaf{visibility:hidden}.x-tree-node-content x-icon.is-open{transform:rotate(90deg)}.x-tree-node-content x-icon:hover{color:var(--x-text-300)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content:hover,.x-tree-node-content.x-activated{background-color:var(--x-background-a100)}.x-tree-node-content:hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { parent: [{
+                type: Input
+            }], tree: [{
+                type: Input
+            }], rootClass: [{
+                type: HostBinding,
+                args: ['class.x-tree-node']
+            }] } });
+
+class XTreeComponent extends XTreeProperty {
+    constructor(renderer, elementRef, cdr, configService) {
+        super();
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.configService = configService;
+        this.nodes = [];
+        this.dataIsFunc = false;
+        this.getting = false;
+        this.treeData = [];
+        this._unSubject = new Subject();
+    }
+    ngOnChanges(changes) {
+        const { expandedAll, data, activatedId, checked, manual } = changes;
+        XIsChange(expandedAll) && this.setExpandedAll();
+        XIsChange(data) && this.setData();
+        XIsChange(activatedId) && this.setActivatedNode(this.treeData);
+        XIsChange(checked) && this.setCheckedKeys(this.checked);
+        XIsChange(manual) && this.setManual();
+    }
+    ngOnDestroy() {
+        this._unSubject.next();
+        this._unSubject.unsubscribe();
+    }
+    setData() {
+        if (typeof this.data === 'undefined')
+            return;
+        this.dataIsFunc = false;
+        if (XIsObservable(this.data)) {
+            XSetData(this.data, this._unSubject).subscribe((x) => {
+                this.setDataChange(x);
+            });
+        }
+        else if (XIsFunction(this.data)) {
+            this.dataIsFunc = true;
+            this.getDataByFunc();
+        }
+        else {
+            this.setDataChange(this.data);
+        }
+    }
+    setManual() {
+        if (this.dataIsFunc)
+            this.getDataByFunc();
+    }
+    getDataByFunc() {
+        if (!this.manual)
+            return;
+        XSetData(this.data(), this._unSubject).subscribe((x) => {
+            this.setDataChange(x);
+        });
+    }
+    setDataChange(value) {
+        !XIsEmpty(this.activatedId) && this.setActivatedNode(value);
+        const getChildren = (node, level) => {
+            node.level = level;
+            node.open = Boolean(this.expandedAll) || level <= this.expandedLevel || this.expanded.indexOf(node.id) >= 0;
+            node.checked = this.checked.indexOf(node.id) >= 0;
+            node.childrenLoaded = node.open;
+            if (XIsUndefined(node.children))
+                node.children = value.filter((y) => y.pid === node.id);
+            if (XIsUndefined(node.leaf))
+                node.leaf = node.children?.length > 0;
+            if (node.leaf)
+                node.children?.map((y) => getChildren(y, level + 1));
+            return node;
+        };
+        this.treeData = value;
+        this.nodes = value.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0));
+        this.cdr.detectChanges();
+    }
+    getCheckedNodes() {
+        let result = [];
+        const getChildren = (nodes) => {
+            if (XIsEmpty(nodes))
+                return;
+            nodes.forEach((x) => {
+                if (x.checked)
+                    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.indexOf(x.id) >= 0;
+                x.change && x.change(true);
+                setChildren(x.children, clear);
+            });
+        };
+        setChildren(this.nodes, keys.length === 0);
+        this.cdr.detectChanges();
+    }
+    setExpandedAll() {
+        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);
+    }
+    setActivatedNode(nodes) {
+        let before = this.activatedNode;
+        this.activatedNode = nodes.find((x) => x.id == this.activatedId);
+        if (this.activatedNode) {
+            this.setParentOpen(nodes, this.activatedNode);
+            this.activatedChange.emit(this.activatedNode);
+        }
+        if (before) {
+            before.change && before.change();
+        }
+    }
+    setParentOpen(nodes, node) {
+        const getParent = (child) => {
+            if (XIsEmpty(child.pid))
+                return;
+            const parent = nodes.find((x) => x.id === child.pid);
+            if (!XIsEmpty(parent)) {
+                this.expanded = [...this.expanded, parent.id];
+                parent.open = true;
+                parent.change && parent.change();
+                getParent(parent);
+            }
+        };
+        getParent(node);
+    }
+    addNode(node) {
+        let parent = this.treeData.find((x) => x.id === node.pid);
+        if (parent) {
+            if (!parent.children)
+                parent.children = [];
+            this.expanded = [...this.expanded, parent.id];
+            this.activatedId = node.id;
+            node.level = Number(parent.level) + 1;
+            node.pid = parent.id;
+            this.treeData.push(node);
+            this.setActivatedNode(this.treeData);
+            parent.open = true;
+            parent.leaf = true;
+            parent.children = [...parent.children, node];
+            parent.change && parent.change();
+        }
+        else if (node.pid == null) {
+            this.activatedId = node.id;
+            node.level = 0;
+            this.treeData = [...this.treeData, node];
+            this.nodes = [...this.nodes, node];
+            this.setActivatedNode(this.treeData);
+            this.cdr.detectChanges();
+        }
+    }
+    removeNode(node) {
+        let parent = this.treeData.find((x) => x.id === node.pid);
+        if (parent) {
+            if (!parent.children)
+                parent.children = [];
+            parent.children.splice(parent.children.indexOf(node), 1);
+            parent.leaf = parent.children.length > 0;
+            if (!parent.leaf)
+                this.activatedId = parent.id;
+            parent.change && parent.change();
+        }
+        else if (node.pid == null) {
+            this.treeData.splice(this.treeData.indexOf(node), 1);
+            this.nodes.splice(this.nodes.indexOf(node), 1);
+            this.cdr.detectChanges();
+        }
+    }
+    updateNode(node, nowNode) {
+        Object.assign(node, nowNode);
+        node.change && node.change();
+    }
+    trackByItem(_index, item) {
+        return item.id;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ XTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ XTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: XTreeComponent, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\">\r\n  <ul>\r\n    <li\r\n      x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}\n"], components: [{ type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["parent", "tree"] }, { type: i2.XIconComponent, selector: "x-icon" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `${XTreePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\">\r\n  <ul>\r\n    <li\r\n      x-tree-node\r\n      *ngFor=\"let node of nodes; trackBy: trackByItem\"\r\n      [node]=\"node\"\r\n      [lazy]=\"lazy\"\r\n      [lazyData]=\"data\"\r\n      [nodeHeight]=\"nodeHeight\"\r\n      [nodeNowrap]=\"nodeNowrap\"\r\n      [nodeAlignItems]=\"nodeAlignItems\"\r\n      [tree]=\"this\"\r\n    ></li>\r\n  </ul>\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n", styles: [".x-tree{margin:0;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { tree: [{
+                type: ViewChild,
+                args: ['tree', { static: true }]
+            }] } });
+
+class XTreeModule {
+}
+/** @nocollapse */ /** @nocollapse */ XTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ XTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule], exports: [XTreeComponent, XTreeNodeComponent] });
+/** @nocollapse */ /** @nocollapse */ XTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeModule, imports: [[CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: XTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty],
+                    exports: [XTreeComponent, XTreeNodeComponent],
+                    imports: [CommonModule, FormsModule, XIconModule, XCheckboxModule, XOutletModule, XLinkModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XTreeComponent, XTreeModule, XTreeNodeComponent, XTreeNodePrefix, XTreeNodeProperty, XTreePrefix, XTreeProperty };
+//# sourceMappingURL=ng-nest-ui-tree.mjs.map