@ng-nest/ui 19.0.0 → 19.0.2

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

@@ -340,9 +340,14 @@ class XTreeNodeProperty extends XProperty {
          * @en_US Node expansion pack up
          */
         this.toggle = output();
+        /**
+         * @zh_CN 树节点操作按钮
+         * @en_US Tree node operation buttons
+         */
+        this.actions = input([]);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XTreeNodeProperty, isStandalone: true, selector: "x-tree-node-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pid: { classPropertyName: "pid", publicName: "pid", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", nodeHeight: "nodeHeightChange", nodeNowrap: "nodeNowrapChange", nodeAlignItems: "nodeAlignItemsChange", virtualScroll: "virtualScrollChange", disabled: "disabledChange", id: "idChange", pid: "pidChange", leaf: "leafChange", height: "heightChange", alignItems: "alignItemsChange", loading: "loadingChange", open: "openChange", checked: "checkedChange", indeterminate: "indeterminateChange", label: "labelChange", nowrap: "nowrapChange", toggle: "toggle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XTreeNodeProperty, isStandalone: true, selector: "x-tree-node-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pid: { classPropertyName: "pid", publicName: "pid", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", nodeHeight: "nodeHeightChange", nodeNowrap: "nodeNowrapChange", nodeAlignItems: "nodeAlignItemsChange", virtualScroll: "virtualScrollChange", disabled: "disabledChange", id: "idChange", pid: "pidChange", leaf: "leafChange", height: "heightChange", alignItems: "alignItemsChange", loading: "loadingChange", open: "openChange", checked: "checkedChange", indeterminate: "indeterminateChange", label: "labelChange", nowrap: "nowrapChange", toggle: "toggle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeProperty, decorators: [{
             type: Component,
@@ -706,7 +711,7 @@ class XTreeNodeComponent extends XTreeNodeProperty {
         return item.id;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (tree.expandedIcon()) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (!leaf()) {\r\n        @if (tree.expandedIcon()) {\r\n          <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n        } @else {\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n        action.label\r\n      }}</x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeComponent, decorators: [{
             type: Component,
@@ -718,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         XOutletDirective,
                         XLinkComponent,
                         XKeywordDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (tree.expandedIcon()) {\r\n        <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n      } @else {\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of tree.actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\"></x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"activated()\"\r\n  [class.x-disabled]=\"disabled()\"\r\n  [class.x-tree-node-sub]=\"!leaf()\"\r\n  [class.x-tree-node-last]=\"isChildrenLast()\"\r\n  [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n  [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n  [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n  (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n  @if (tree.showLine() && level()! > 0) {\r\n    <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n      @for (i of verticalLevel(); track i) {\r\n        <div\r\n          class=\"x-tree-node-line-vertical\"\r\n          [hidden]=\"isParentLast()[i - 1]\"\r\n          [class.is-last]=\"i === verticalLevel().length\"\r\n          [style.left.px]=\"getVerticalLeft(i)\"\r\n        ></div>\r\n      }\r\n      <div\r\n        class=\"x-tree-node-line-horizontal\"\r\n        [style.width.px]=\"verticalWidth()\"\r\n        [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n  @if (showDragIndicator()) {\r\n    <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n  }\r\n  @if (loading()) {\r\n    <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"leaf()\"\r\n      [class.is-open]=\"open()\"\r\n      [class.is-template]=\"tree.expandedIcon()\"\r\n      [style.width.px]=\"verticalWidth() * 2\"\r\n      (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n    >\r\n      @if (!leaf()) {\r\n        @if (tree.expandedIcon()) {\r\n          <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n        } @else {\r\n          <x-icon type=\"fto-chevron-right\"></x-icon>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n  @if (tree.checkbox()) {\r\n    <x-checkbox\r\n      [data]=\"[{ label: '', id: id() }]\"\r\n      [(ngModel)]=\"checked\"\r\n      (ngModelChange)=\"onCheckboxChange()\"\r\n      [indeterminate]=\"indeterminate()!\"\r\n      [disabled]=\"disabled()!\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      single\r\n    ></x-checkbox>\r\n  }\r\n  @if (!tree.labelTpl()) {\r\n    <span\r\n      class=\"x-tree-node-label\"\r\n      [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n      [title]=\"label()\"\r\n      x-keyword\r\n      [text]=\"tree.keywordText()\"\r\n      [caseSensitive]=\"tree.caseSensitive()\"\r\n      >{{ label() }}</span\r\n    >\r\n  } @else {\r\n    <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n  }\r\n  <span class=\"x-tree-node-operations\">\r\n    @for (action of actions(); track action.id) {\r\n      <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n        action.label\r\n      }}</x-link>\r\n    }\r\n  </span>\r\n  @if (tree.multiple() && activated()) {\r\n    <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
         }], propDecorators: { rootClass: [{
                 type: HostBinding,
                 args: ['class.x-tree-node']
@@ -1289,11 +1294,11 @@ class XTreeComponent extends XTreeProperty {
         return item;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, read: CdkVirtualScrollViewport, isSignal: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true, read: CdkDropList, isSignal: true }, { propertyName: "nodeComponents", predicate: XTreeNodeComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, read: CdkVirtualScrollViewport, isSignal: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true, read: CdkDropList, isSignal: true }, { propertyName: "nodeComponents", predicate: XTreeNodeComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTreePrefix}`, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: `${XTreePrefix}`, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: XTreeService }] });
 
 class XTreeModule {