ngx-tethys 18.0.8 → 18.1.0-next.1

package/fesm2022/ngx-tethys-tree.mjs

@@ -6,9 +6,9 @@ import { ThyListModule } from 'ngx-tethys/list';
 import { ThyLoading, ThyLoadingModule } from 'ngx-tethys/loading';
 import { ThySharedModule, ThyOptionModule } from 'ngx-tethys/shared';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import { NgIf, NgClass, NgStyle, NgTemplateOutlet, DOCUMENT, NgFor, CommonModule } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, EventEmitter, numberAttribute, Component, ViewEncapsulation, Inject, Input, Output, ContentChild, ViewChild, HostBinding, Pipe, forwardRef, ChangeDetectionStrategy, ViewChildren, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, inject, EventEmitter, numberAttribute, Component, ViewEncapsulation, Input, Output, ContentChild, ViewChild, HostBinding, Pipe, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ViewChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
@@ -314,15 +314,9 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
  * @name thy-tree-node
  */
 class ThyTreeNodeComponent {
-    get nodeIcon() {
-        return this.node.origin.icon;
-    }
-    get nodeIconStyle() {
-        return this.node.origin.iconStyle;
-    }
-    constructor(root, thyTreeService) {
-        this.root = root;
-        this.thyTreeService = thyTreeService;
+    constructor() {
+        this.root = inject(THY_TREE_ABSTRACT_TOKEN);
+        this.thyTreeService = inject(ThyTreeService);
         /**
          * 设置 TreeNode 是否支持异步加载
          */
@@ -367,6 +361,12 @@ class ThyTreeNodeComponent {
         this.destroy$ = new Subject();
         this.checkState = ThyTreeNodeCheckState;
     }
+    get nodeIcon() {
+        return this.node.origin.icon;
+    }
+    get nodeIconStyle() {
+        return this.node.origin.iconStyle;
+    }
     clickNode(event) {
         if (this.node.isDisabled) {
             this.expandNode(event);
@@ -450,16 +450,13 @@ class ThyTreeNodeComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTreeNodeComponent, deps: [{ token: THY_TREE_ABSTRACT_TOKEN }, { token: ThyTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTreeNodeComponent, isStandalone: true, selector: "thy-tree-node", inputs: { node: "node", thyAsync: ["thyAsync", "thyAsync", coerceBooleanProperty], thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyCheckable: ["thyCheckable", "thyCheckable", coerceBooleanProperty], thyClickBehavior: "thyClickBehavior", thyTitleTruncate: ["thyTitleTruncate", "thyTitleTruncate", coerceBooleanProperty], templateRef: "templateRef", emptyChildrenTemplateRef: "emptyChildrenTemplateRef", thyItemSize: ["thyItemSize", "thyItemSize", numberAttribute], thyIndent: ["thyIndent", "thyIndent", numberAttribute] }, outputs: { thyOnClick: "thyOnClick", thyDblClick: "thyDblClick", thyOnExpandChange: "thyOnExpandChange", thyOnCheckboxChange: "thyOnCheckboxChange" }, host: { properties: { "class.thy-tree-node": "this.thyTreeNodeClass", "class": "this.itemClass" } }, queries: [{ propertyName: "childrenTreeTemplateRef", first: true, predicate: ["childrenTree"], descendants: true }], viewQueries: [{ propertyName: "treeNodeWrapper", first: true, predicate: ["treeNodeWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #treeNodeWrapper\n  class=\"thy-tree-node-wrapper\"\n  [class.active]=\"root.isSelected(node)\"\n  [class.disabled]=\"node.isDisabled\"\n  [class.expand]=\"node.children.length\"\n  [style.height]=\"thyItemSize + 'px'\"\n  (click)=\"clickNode($event)\"\n>\n  <span class=\"thy-tree-index\" [style.width.px]=\"node.level * thyIndent\"></span>\n  <span  class=\"thy-tree-drag-icon\">\n    <thy-icon thyIconName=\"drag\"></thy-icon>\n  </span>\n  <span class=\"thy-tree-expand\" (click)=\"expandNode($event)\">\n    <ng-container *ngIf=\"isShowExpand(node)\">\n      <ng-container *ngIf=\"(node.children && node.children.length > 0) || thyAsync || emptyChildrenTemplateRef\">\n        <thy-icon\n          *ngIf=\"root.thyIcons?.expand && root.thyIcons?.collapse; else defaultIcon\"\n          class=\"thy-tree-expand-icon\"\n          [thyIconName]=\"node.isExpanded ? root.thyIcons.expand : root.thyIcons.collapse\"\n        ></thy-icon>\n        <ng-template #defaultIcon>\n          <thy-icon class=\"thy-tree-expand-icon\" [class.collapse]=\"!node.isExpanded\" thyIconName=\"caret-right-down\"></thy-icon>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </span>\n\n  <span class=\"thy-tree-node-content\" (dblclick)=\"dbClickNode($event)\">\n    <input\n      *ngIf=\"thyCheckable\"\n      type=\"checkbox\"\n      class=\"thy-tree-node-check\"\n      [class.form-check-indeterminate]=\"node.isChecked === checkState.indeterminate\"\n      [class.form-unchecked]=\"node.isChecked === checkState.unchecked\"\n      [checked]=\"node.isChecked === checkState.checked\"\n      [disabled]=\"node.isDisabled\"\n      (click)=\"clickNodeCheck($event)\"\n    />\n    <ng-container *ngIf=\"!templateRef\">\n      <ng-container *ngIf=\"nodeIcon\">\n        <span class=\"thy-tree-node-icon\"> <i [ngClass]=\"nodeIcon\" [ngStyle]=\"nodeIconStyle\"></i></span>\n      </ng-container>\n      <span [title]=\"node.title\" class=\"thy-tree-node-title\" [class.truncate]=\"thyTitleTruncate\"> {{ node.title }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"templateRef\">\n      <ng-template\n        [ngTemplateOutlet]=\"templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: node, node: node, origin: node?.origin }\"\n      ></ng-template>\n    </ng-container>\n  </span>\n</div>\n<ng-container *ngIf=\"thyAsync\">\n  <thy-loading *ngIf=\"node.isLoading\" [thyDone]=\"!node.isLoading\"></thy-loading>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTreeNodeComponent, isStandalone: true, selector: "thy-tree-node", inputs: { node: "node", thyAsync: ["thyAsync", "thyAsync", coerceBooleanProperty], thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyCheckable: ["thyCheckable", "thyCheckable", coerceBooleanProperty], thyClickBehavior: "thyClickBehavior", thyTitleTruncate: ["thyTitleTruncate", "thyTitleTruncate", coerceBooleanProperty], templateRef: "templateRef", emptyChildrenTemplateRef: "emptyChildrenTemplateRef", thyItemSize: ["thyItemSize", "thyItemSize", numberAttribute], thyIndent: ["thyIndent", "thyIndent", numberAttribute] }, outputs: { thyOnClick: "thyOnClick", thyDblClick: "thyDblClick", thyOnExpandChange: "thyOnExpandChange", thyOnCheckboxChange: "thyOnCheckboxChange" }, host: { properties: { "class.thy-tree-node": "this.thyTreeNodeClass", "class": "this.itemClass" } }, queries: [{ propertyName: "childrenTreeTemplateRef", first: true, predicate: ["childrenTree"], descendants: true }], viewQueries: [{ propertyName: "treeNodeWrapper", first: true, predicate: ["treeNodeWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #treeNodeWrapper\n  class=\"thy-tree-node-wrapper\"\n  [class.active]=\"root.isSelected(node)\"\n  [class.disabled]=\"node.isDisabled\"\n  [class.expand]=\"node.children.length\"\n  [style.height]=\"thyItemSize + 'px'\"\n  (click)=\"clickNode($event)\"\n  >\n  <span class=\"thy-tree-index\" [style.width.px]=\"node.level * thyIndent\"></span>\n  <span  class=\"thy-tree-drag-icon\">\n    <thy-icon thyIconName=\"drag\"></thy-icon>\n  </span>\n  <span class=\"thy-tree-expand\" (click)=\"expandNode($event)\">\n    @if (isShowExpand(node)) {\n      @if ((node.children && node.children.length > 0) || thyAsync || emptyChildrenTemplateRef) {\n        @if (root.thyIcons?.expand && root.thyIcons?.collapse) {\n          <thy-icon\n            class=\"thy-tree-expand-icon\"\n            [thyIconName]=\"node.isExpanded ? root.thyIcons.expand : root.thyIcons.collapse\"\n          ></thy-icon>\n        } @else {\n          <thy-icon class=\"thy-tree-expand-icon\" [class.collapse]=\"!node.isExpanded\" thyIconName=\"caret-right-down\"></thy-icon>\n        }\n      }\n    }\n  </span>\n\n  <span class=\"thy-tree-node-content\" (dblclick)=\"dbClickNode($event)\">\n    @if (thyCheckable) {\n      <input\n        type=\"checkbox\"\n        class=\"thy-tree-node-check\"\n        [class.form-check-indeterminate]=\"node.isChecked === checkState.indeterminate\"\n        [class.form-unchecked]=\"node.isChecked === checkState.unchecked\"\n        [checked]=\"node.isChecked === checkState.checked\"\n        [disabled]=\"node.isDisabled\"\n        (click)=\"clickNodeCheck($event)\"\n        />\n    }\n    @if (!templateRef) {\n      @if (nodeIcon) {\n        <span class=\"thy-tree-node-icon\"> <i [ngClass]=\"nodeIcon\" [ngStyle]=\"nodeIconStyle\"></i></span>\n      }\n      <span [title]=\"node.title\" class=\"thy-tree-node-title\" [class.truncate]=\"thyTitleTruncate\"> {{ node.title }}</span>\n    }\n    @if (templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: node, node: node, origin: node?.origin }\"\n      ></ng-template>\n    }\n  </span>\n</div>\n@if (thyAsync) {\n  @if (node.isLoading) {\n    <thy-loading [thyDone]=\"!node.isLoading\"></thy-loading>\n  }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-tree-node', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIf, ThyIcon, NgClass, NgStyle, NgTemplateOutlet, ThyLoading], template: "<div\n  #treeNodeWrapper\n  class=\"thy-tree-node-wrapper\"\n  [class.active]=\"root.isSelected(node)\"\n  [class.disabled]=\"node.isDisabled\"\n  [class.expand]=\"node.children.length\"\n  [style.height]=\"thyItemSize + 'px'\"\n  (click)=\"clickNode($event)\"\n>\n  <span class=\"thy-tree-index\" [style.width.px]=\"node.level * thyIndent\"></span>\n  <span  class=\"thy-tree-drag-icon\">\n    <thy-icon thyIconName=\"drag\"></thy-icon>\n  </span>\n  <span class=\"thy-tree-expand\" (click)=\"expandNode($event)\">\n    <ng-container *ngIf=\"isShowExpand(node)\">\n      <ng-container *ngIf=\"(node.children && node.children.length > 0) || thyAsync || emptyChildrenTemplateRef\">\n        <thy-icon\n          *ngIf=\"root.thyIcons?.expand && root.thyIcons?.collapse; else defaultIcon\"\n          class=\"thy-tree-expand-icon\"\n          [thyIconName]=\"node.isExpanded ? root.thyIcons.expand : root.thyIcons.collapse\"\n        ></thy-icon>\n        <ng-template #defaultIcon>\n          <thy-icon class=\"thy-tree-expand-icon\" [class.collapse]=\"!node.isExpanded\" thyIconName=\"caret-right-down\"></thy-icon>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </span>\n\n  <span class=\"thy-tree-node-content\" (dblclick)=\"dbClickNode($event)\">\n    <input\n      *ngIf=\"thyCheckable\"\n      type=\"checkbox\"\n      class=\"thy-tree-node-check\"\n      [class.form-check-indeterminate]=\"node.isChecked === checkState.indeterminate\"\n      [class.form-unchecked]=\"node.isChecked === checkState.unchecked\"\n      [checked]=\"node.isChecked === checkState.checked\"\n      [disabled]=\"node.isDisabled\"\n      (click)=\"clickNodeCheck($event)\"\n    />\n    <ng-container *ngIf=\"!templateRef\">\n      <ng-container *ngIf=\"nodeIcon\">\n        <span class=\"thy-tree-node-icon\"> <i [ngClass]=\"nodeIcon\" [ngStyle]=\"nodeIconStyle\"></i></span>\n      </ng-container>\n      <span [title]=\"node.title\" class=\"thy-tree-node-title\" [class.truncate]=\"thyTitleTruncate\"> {{ node.title }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"templateRef\">\n      <ng-template\n        [ngTemplateOutlet]=\"templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: node, node: node, origin: node?.origin }\"\n      ></ng-template>\n    </ng-container>\n  </span>\n</div>\n<ng-container *ngIf=\"thyAsync\">\n  <thy-loading *ngIf=\"node.isLoading\" [thyDone]=\"!node.isLoading\"></thy-loading>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [THY_TREE_ABSTRACT_TOKEN]
-                }] }, { type: ThyTreeService }], propDecorators: { node: [{
+            args: [{ selector: 'thy-tree-node', encapsulation: ViewEncapsulation.None, standalone: true, imports: [ThyIcon, NgClass, NgStyle, NgTemplateOutlet, ThyLoading], template: "<div\n  #treeNodeWrapper\n  class=\"thy-tree-node-wrapper\"\n  [class.active]=\"root.isSelected(node)\"\n  [class.disabled]=\"node.isDisabled\"\n  [class.expand]=\"node.children.length\"\n  [style.height]=\"thyItemSize + 'px'\"\n  (click)=\"clickNode($event)\"\n  >\n  <span class=\"thy-tree-index\" [style.width.px]=\"node.level * thyIndent\"></span>\n  <span  class=\"thy-tree-drag-icon\">\n    <thy-icon thyIconName=\"drag\"></thy-icon>\n  </span>\n  <span class=\"thy-tree-expand\" (click)=\"expandNode($event)\">\n    @if (isShowExpand(node)) {\n      @if ((node.children && node.children.length > 0) || thyAsync || emptyChildrenTemplateRef) {\n        @if (root.thyIcons?.expand && root.thyIcons?.collapse) {\n          <thy-icon\n            class=\"thy-tree-expand-icon\"\n            [thyIconName]=\"node.isExpanded ? root.thyIcons.expand : root.thyIcons.collapse\"\n          ></thy-icon>\n        } @else {\n          <thy-icon class=\"thy-tree-expand-icon\" [class.collapse]=\"!node.isExpanded\" thyIconName=\"caret-right-down\"></thy-icon>\n        }\n      }\n    }\n  </span>\n\n  <span class=\"thy-tree-node-content\" (dblclick)=\"dbClickNode($event)\">\n    @if (thyCheckable) {\n      <input\n        type=\"checkbox\"\n        class=\"thy-tree-node-check\"\n        [class.form-check-indeterminate]=\"node.isChecked === checkState.indeterminate\"\n        [class.form-unchecked]=\"node.isChecked === checkState.unchecked\"\n        [checked]=\"node.isChecked === checkState.checked\"\n        [disabled]=\"node.isDisabled\"\n        (click)=\"clickNodeCheck($event)\"\n        />\n    }\n    @if (!templateRef) {\n      @if (nodeIcon) {\n        <span class=\"thy-tree-node-icon\"> <i [ngClass]=\"nodeIcon\" [ngStyle]=\"nodeIconStyle\"></i></span>\n      }\n      <span [title]=\"node.title\" class=\"thy-tree-node-title\" [class.truncate]=\"thyTitleTruncate\"> {{ node.title }}</span>\n    }\n    @if (templateRef) {\n      <ng-template\n        [ngTemplateOutlet]=\"templateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: node, node: node, origin: node?.origin }\"\n      ></ng-template>\n    }\n  </span>\n</div>\n@if (thyAsync) {\n  @if (node.isLoading) {\n    <thy-loading [thyDone]=\"!node.isLoading\"></thy-loading>\n  }\n}\n" }]
+        }], propDecorators: { node: [{
                 type: Input
             }], thyAsync: [{
                 type: Input,
@@ -547,6 +544,88 @@ const treeItemSizeMap = {
  * @name thy-tree
  */
 class ThyTree {
+    constructor() {
+        this.thyTreeService = inject(ThyTreeService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.document = inject(DOCUMENT);
+        this._draggable = false;
+        this.hostRenderer = useHostRenderer();
+        this._onTouched = () => { };
+        this._onChange = (_) => { };
+        this.destroy$ = new Subject();
+        // 缓存 Element 和 DragRef 的关系，方便在 Item 拖动时查找
+        this.nodeDragsMap = new Map();
+        this.nodeDragMoved = new Subject();
+        this.dropEnterPredicate = context => {
+            return (this.isShowExpand(context.target) || (!this.isShowExpand(context.target) && context.dropPosition !== ThyTreeDropPosition.in));
+        };
+        this.flattenTreeNodes = [];
+        /**
+         * 设置 TreeNode 是否支持展开
+         * @type boolean | Function
+         */
+        this.thyShowExpand = true;
+        /**
+         * 设置是否支持多选节点
+         */
+        this.thyMultiple = false;
+        /**
+         * 点击节点的行为，`default` 为选中当前节点，`selectCheckbox` 为选中节点的 Checkbox， `thyCheckable` 为 true 时生效。
+         */
+        this.thyClickBehavior = 'default';
+        /**
+         * 设置 TreeNode 是否支持异步加载
+         */
+        this.thyAsync = false;
+        this._thyType = 'default';
+        /**
+         * 设置不同 Tree 展开折叠的图标，`expand` 为展开状态的图标，`collapse` 为折叠状态的图标
+         * @type { expand: string, collapse: string }
+         */
+        this.thyIcons = {};
+        this._thySize = 'default';
+        /**
+         * 设置是否开启虚拟滚动
+         */
+        this.thyVirtualScroll = false;
+        this._thyItemSize = 44;
+        /**
+         * 设置节点名称是否支持超出截取
+         * @type boolean
+         */
+        this.thyTitleTruncate = true;
+        /**
+         * 是否展开所有树节点
+         */
+        this.thyExpandAll = false;
+        /**
+         * 设置缩进距离，缩进距离 = thyIndent * node.level
+         * @type number
+         */
+        this.thyIndent = 25;
+        /**
+         * 设置子 TreeNode 点击事件
+         */
+        this.thyOnClick = new EventEmitter();
+        /**
+         * 设置 check 选择事件
+         */
+        this.thyOnCheckboxChange = new EventEmitter();
+        /**
+         * 设置点击展开触发事件
+         */
+        this.thyOnExpandChange = new EventEmitter();
+        /**
+         * 设置 TreeNode 拖拽事件
+         */
+        this.thyOnDragDrop = new EventEmitter();
+        /**
+         * 双击 TreeNode 事件
+         */
+        this.thyDblClick = new EventEmitter();
+        this.thyTreeClass = true;
+        this.renderView = () => { };
+    }
     get treeNodes() {
         return this.thyTreeService.treeNodes;
     }
@@ -631,88 +710,6 @@ class ThyTree {
     get emptyChildrenTemplateRef() {
         return this._emptyChildrenTemplateRef;
     }
-    constructor(thyTreeService, cdr, document) {
-        this.thyTreeService = thyTreeService;
-        this.cdr = cdr;
-        this.document = document;
-        this._draggable = false;
-        this.hostRenderer = useHostRenderer();
-        this._onTouched = () => { };
-        this._onChange = (_) => { };
-        this.destroy$ = new Subject();
-        // 缓存 Element 和 DragRef 的关系，方便在 Item 拖动时查找
-        this.nodeDragsMap = new Map();
-        this.nodeDragMoved = new Subject();
-        this.dropEnterPredicate = context => {
-            return (this.isShowExpand(context.target) || (!this.isShowExpand(context.target) && context.dropPosition !== ThyTreeDropPosition.in));
-        };
-        this.flattenTreeNodes = [];
-        /**
-         * 设置 TreeNode 是否支持展开
-         * @type boolean | Function
-         */
-        this.thyShowExpand = true;
-        /**
-         * 设置是否支持多选节点
-         */
-        this.thyMultiple = false;
-        /**
-         * 点击节点的行为，`default` 为选中当前节点，`selectCheckbox` 为选中节点的 Checkbox， `thyCheckable` 为 true 时生效。
-         */
-        this.thyClickBehavior = 'default';
-        /**
-         * 设置 TreeNode 是否支持异步加载
-         */
-        this.thyAsync = false;
-        this._thyType = 'default';
-        /**
-         * 设置不同 Tree 展开折叠的图标，`expand` 为展开状态的图标，`collapse` 为折叠状态的图标
-         * @type { expand: string, collapse: string }
-         */
-        this.thyIcons = {};
-        this._thySize = 'default';
-        /**
-         * 设置是否开启虚拟滚动
-         */
-        this.thyVirtualScroll = false;
-        this._thyItemSize = 44;
-        /**
-         * 设置节点名称是否支持超出截取
-         * @type boolean
-         */
-        this.thyTitleTruncate = true;
-        /**
-         * 是否展开所有树节点
-         */
-        this.thyExpandAll = false;
-        /**
-         * 设置缩进距离，缩进距离 = thyIndent * node.level
-         * @type number
-         */
-        this.thyIndent = 25;
-        /**
-         * 设置子 TreeNode 点击事件
-         */
-        this.thyOnClick = new EventEmitter();
-        /**
-         * 设置 check 选择事件
-         */
-        this.thyOnCheckboxChange = new EventEmitter();
-        /**
-         * 设置点击展开触发事件
-         */
-        this.thyOnExpandChange = new EventEmitter();
-        /**
-         * 设置 TreeNode 拖拽事件
-         */
-        this.thyOnDragDrop = new EventEmitter();
-        /**
-         * 双击 TreeNode 事件
-         */
-        this.thyDblClick = new EventEmitter();
-        this.thyTreeClass = true;
-        this.renderView = () => { };
-    }
     ngOnInit() {
         this._initThyNodes();
         this._setTreeType();
@@ -1039,8 +1036,8 @@ class ThyTree {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTree, deps: [{ token: ThyTreeService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyTree, isStandalone: true, selector: "thy-tree", inputs: { thyNodes: "thyNodes", thyShowExpand: "thyShowExpand", thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyCheckable: ["thyCheckable", "thyCheckable", coerceBooleanProperty], thyClickBehavior: "thyClickBehavior", thyCheckStateResolve: "thyCheckStateResolve", thyAsync: ["thyAsync", "thyAsync", coerceBooleanProperty], thyType: "thyType", thyIcons: "thyIcons", thySize: "thySize", thyVirtualScroll: ["thyVirtualScroll", "thyVirtualScroll", coerceBooleanProperty], thyItemSize: ["thyItemSize", "thyItemSize", numberAttribute], thyTitleTruncate: ["thyTitleTruncate", "thyTitleTruncate", coerceBooleanProperty], thySelectedKeys: "thySelectedKeys", thyExpandedKeys: "thyExpandedKeys", thyExpandAll: ["thyExpandAll", "thyExpandAll", coerceBooleanProperty], thyIndent: ["thyIndent", "thyIndent", numberAttribute], thyBeforeDragStart: "thyBeforeDragStart", thyBeforeDragDrop: "thyBeforeDragDrop" }, outputs: { viewport: "viewport", thyOnClick: "thyOnClick", thyOnCheckboxChange: "thyOnCheckboxChange", thyOnExpandChange: "thyOnExpandChange", thyOnDragDrop: "thyOnDragDrop", thyDblClick: "thyDblClick" }, host: { properties: { "class.thy-multiple-selection-list": "this.thyMultiple", "class.thy-tree-draggable": "this.thyDraggable", "class.thy-virtual-scrolling-tree": "this.thyVirtualScroll", "class.thy-tree": "this.thyTreeClass", "class.thy-tree-dragging": "this.dragging" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyTree, isStandalone: true, selector: "thy-tree", inputs: { thyNodes: "thyNodes", thyShowExpand: "thyShowExpand", thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDraggable: ["thyDraggable", "thyDraggable", coerceBooleanProperty], thyCheckable: ["thyCheckable", "thyCheckable", coerceBooleanProperty], thyClickBehavior: "thyClickBehavior", thyCheckStateResolve: "thyCheckStateResolve", thyAsync: ["thyAsync", "thyAsync", coerceBooleanProperty], thyType: "thyType", thyIcons: "thyIcons", thySize: "thySize", thyVirtualScroll: ["thyVirtualScroll", "thyVirtualScroll", coerceBooleanProperty], thyItemSize: ["thyItemSize", "thyItemSize", numberAttribute], thyTitleTruncate: ["thyTitleTruncate", "thyTitleTruncate", coerceBooleanProperty], thySelectedKeys: "thySelectedKeys", thyExpandedKeys: "thyExpandedKeys", thyExpandAll: ["thyExpandAll", "thyExpandAll", coerceBooleanProperty], thyIndent: ["thyIndent", "thyIndent", numberAttribute], thyBeforeDragStart: "thyBeforeDragStart", thyBeforeDragDrop: "thyBeforeDragDrop" }, outputs: { viewport: "viewport", thyOnClick: "thyOnClick", thyOnCheckboxChange: "thyOnCheckboxChange", thyOnExpandChange: "thyOnExpandChange", thyOnDragDrop: "thyOnDragDrop", thyDblClick: "thyDblClick" }, host: { properties: { "class.thy-multiple-selection-list": "this.thyMultiple", "class.thy-tree-draggable": "this.thyDraggable", "class.thy-virtual-scrolling-tree": "this.thyVirtualScroll", "class.thy-tree": "this.thyTreeClass", "class.thy-tree-dragging": "this.dragging" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyTree),
@@ -1051,7 +1048,7 @@ class ThyTree {
                 useExisting: forwardRef(() => ThyTree)
             },
             ThyTreeService
-        ], queries: [{ propertyName: "templateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, static: true }, { propertyName: "emptyChildrenTemplate", first: true, predicate: ["emptyChildrenTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "cdkDrags", predicate: CdkDrag, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\n  #viewport\n  *ngIf=\"thyVirtualScroll\"\n  [itemSize]=\"thyItemSize\"\n  [style.height]=\"'100%'\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"flattenTreeNodes\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n  >\n  <div class=\"virtual-trees-container\">\n    <thy-tree-node\n      *cdkVirtualFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n      cdkDrag\n      [cdkDragData]=\"node\"\n      [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n      (cdkDragStarted)=\"onDragStarted($event)\"\n      (cdkDragEnded)=\"onDragEnded($event)\"\n      (cdkDragMoved)=\"emitDragMoved($event)\"\n      [node]=\"node\"\n      [templateRef]=\"templateRef\"\n      [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n      [thyAsync]=\"thyAsync\"\n      [thyDraggable]=\"thyDraggable\"\n      [thyCheckable]=\"thyCheckable\"\n      [thyMultiple]=\"thyMultiple\"\n      [thyClickBehavior]=\"thyClickBehavior\"\n      [thyTitleTruncate]=\"thyTitleTruncate\"\n      [thyItemSize]=\"thyItemSize\"\n      [thyIndent]=\"thyIndent\"\n      (thyOnClick)=\"thyOnClick.emit($event)\"\n      (thyDblClick)=\"thyDblClick.emit($event)\"\n      (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n      (thyOnCheckboxChange)=\"eventTriggerChanged($event)\">\n    </thy-tree-node>\n  </div>\n</cdk-virtual-scroll-viewport>\n\n<div\n  *ngIf=\"!thyVirtualScroll\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"flattenTreeNodes\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\">\n  <thy-tree-node\n    *ngFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n    cdkDrag\n    [cdkDragData]=\"node\"\n    [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n    (cdkDragStarted)=\"onDragStarted($event)\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    (cdkDragMoved)=\"emitDragMoved($event)\"\n    [node]=\"node\"\n    [templateRef]=\"templateRef\"\n    [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n    [thyAsync]=\"thyAsync\"\n    [thyDraggable]=\"thyDraggable\"\n    [thyCheckable]=\"thyCheckable\"\n    [thyMultiple]=\"thyMultiple\"\n    [thyTitleTruncate]=\"thyTitleTruncate\"\n    [thyItemSize]=\"thyItemSize\"\n    [thyClickBehavior]=\"thyClickBehavior\"\n    [thyIndent]=\"thyIndent\"\n    (thyOnClick)=\"thyOnClick.emit($event)\"\n    (thyDblClick)=\"thyDblClick.emit($event)\"\n    (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n    (thyOnCheckboxChange)=\"thyOnCheckboxChange.emit($event)\">\n  </thy-tree-node>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: "directive", type: 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: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: ThyTreeNodeComponent, selector: "thy-tree-node", inputs: ["node", "thyAsync", "thyMultiple", "thyDraggable", "thyCheckable", "thyClickBehavior", "thyTitleTruncate", "templateRef", "emptyChildrenTemplateRef", "thyItemSize", "thyIndent"], outputs: ["thyOnClick", "thyDblClick", "thyOnExpandChange", "thyOnCheckboxChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: ThyTreeNodeDraggablePipe, name: "treeNodeDraggable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "templateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, static: true }, { propertyName: "emptyChildrenTemplate", first: true, predicate: ["emptyChildrenTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "cdkDrags", predicate: CdkDrag, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (thyVirtualScroll) {\n  <cdk-virtual-scroll-viewport\n    #viewport\n    [itemSize]=\"thyItemSize\"\n    [style.height]=\"'100%'\"\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodes\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\"\n    >\n    <div class=\"virtual-trees-container\">\n      <thy-tree-node\n        *cdkVirtualFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n        (cdkDragStarted)=\"onDragStarted($event)\"\n        (cdkDragEnded)=\"onDragEnded($event)\"\n        (cdkDragMoved)=\"emitDragMoved($event)\"\n        [node]=\"node\"\n        [templateRef]=\"templateRef\"\n        [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n        [thyAsync]=\"thyAsync\"\n        [thyDraggable]=\"thyDraggable\"\n        [thyCheckable]=\"thyCheckable\"\n        [thyMultiple]=\"thyMultiple\"\n        [thyClickBehavior]=\"thyClickBehavior\"\n        [thyTitleTruncate]=\"thyTitleTruncate\"\n        [thyItemSize]=\"thyItemSize\"\n        [thyIndent]=\"thyIndent\"\n        (thyOnClick)=\"thyOnClick.emit($event)\"\n        (thyDblClick)=\"thyDblClick.emit($event)\"\n        (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n        (thyOnCheckboxChange)=\"eventTriggerChanged($event)\">\n      </thy-tree-node>\n    </div>\n  </cdk-virtual-scroll-viewport>\n}\n\n@if (!thyVirtualScroll) {\n  <div\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodes\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\">\n    @for (node of flattenTreeNodes; track trackByFn(i, node); let i = $index) {\n      <thy-tree-node\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n        (cdkDragStarted)=\"onDragStarted($event)\"\n        (cdkDragEnded)=\"onDragEnded($event)\"\n        (cdkDragMoved)=\"emitDragMoved($event)\"\n        [node]=\"node\"\n        [templateRef]=\"templateRef\"\n        [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n        [thyAsync]=\"thyAsync\"\n        [thyDraggable]=\"thyDraggable\"\n        [thyCheckable]=\"thyCheckable\"\n        [thyMultiple]=\"thyMultiple\"\n        [thyTitleTruncate]=\"thyTitleTruncate\"\n        [thyItemSize]=\"thyItemSize\"\n        [thyClickBehavior]=\"thyClickBehavior\"\n        [thyIndent]=\"thyIndent\"\n        (thyOnClick)=\"thyOnClick.emit($event)\"\n        (thyDblClick)=\"thyDblClick.emit($event)\"\n        (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n        (thyOnCheckboxChange)=\"thyOnCheckboxChange.emit($event)\">\n      </thy-tree-node>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: 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: "directive", type: 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: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: ThyTreeNodeComponent, selector: "thy-tree-node", inputs: ["node", "thyAsync", "thyMultiple", "thyDraggable", "thyCheckable", "thyClickBehavior", "thyTitleTruncate", "templateRef", "emptyChildrenTemplateRef", "thyItemSize", "thyIndent"], outputs: ["thyOnClick", "thyDblClick", "thyOnExpandChange", "thyOnCheckboxChange"] }, { kind: "pipe", type: ThyTreeNodeDraggablePipe, name: "treeNodeDraggable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTree, decorators: [{
             type: Component,
@@ -1067,20 +1064,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         },
                         ThyTreeService
                     ], standalone: true, imports: [
-                        NgIf,
                         CdkDrag,
                         CdkDropList,
                         CdkVirtualScrollViewport,
                         CdkFixedSizeVirtualScroll,
                         CdkVirtualForOf,
                         ThyTreeNodeComponent,
-                        NgFor,
                         ThyTreeNodeDraggablePipe
-                    ], template: "<cdk-virtual-scroll-viewport\n  #viewport\n  *ngIf=\"thyVirtualScroll\"\n  [itemSize]=\"thyItemSize\"\n  [style.height]=\"'100%'\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"flattenTreeNodes\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n  >\n  <div class=\"virtual-trees-container\">\n    <thy-tree-node\n      *cdkVirtualFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n      cdkDrag\n      [cdkDragData]=\"node\"\n      [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n      (cdkDragStarted)=\"onDragStarted($event)\"\n      (cdkDragEnded)=\"onDragEnded($event)\"\n      (cdkDragMoved)=\"emitDragMoved($event)\"\n      [node]=\"node\"\n      [templateRef]=\"templateRef\"\n      [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n      [thyAsync]=\"thyAsync\"\n      [thyDraggable]=\"thyDraggable\"\n      [thyCheckable]=\"thyCheckable\"\n      [thyMultiple]=\"thyMultiple\"\n      [thyClickBehavior]=\"thyClickBehavior\"\n      [thyTitleTruncate]=\"thyTitleTruncate\"\n      [thyItemSize]=\"thyItemSize\"\n      [thyIndent]=\"thyIndent\"\n      (thyOnClick)=\"thyOnClick.emit($event)\"\n      (thyDblClick)=\"thyDblClick.emit($event)\"\n      (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n      (thyOnCheckboxChange)=\"eventTriggerChanged($event)\">\n    </thy-tree-node>\n  </div>\n</cdk-virtual-scroll-viewport>\n\n<div\n  *ngIf=\"!thyVirtualScroll\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"flattenTreeNodes\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\">\n  <thy-tree-node\n    *ngFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n    cdkDrag\n    [cdkDragData]=\"node\"\n    [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n    (cdkDragStarted)=\"onDragStarted($event)\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    (cdkDragMoved)=\"emitDragMoved($event)\"\n    [node]=\"node\"\n    [templateRef]=\"templateRef\"\n    [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n    [thyAsync]=\"thyAsync\"\n    [thyDraggable]=\"thyDraggable\"\n    [thyCheckable]=\"thyCheckable\"\n    [thyMultiple]=\"thyMultiple\"\n    [thyTitleTruncate]=\"thyTitleTruncate\"\n    [thyItemSize]=\"thyItemSize\"\n    [thyClickBehavior]=\"thyClickBehavior\"\n    [thyIndent]=\"thyIndent\"\n    (thyOnClick)=\"thyOnClick.emit($event)\"\n    (thyDblClick)=\"thyDblClick.emit($event)\"\n    (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n    (thyOnCheckboxChange)=\"thyOnCheckboxChange.emit($event)\">\n  </thy-tree-node>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ThyTreeService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { viewport: [{
+                    ], template: "@if (thyVirtualScroll) {\n  <cdk-virtual-scroll-viewport\n    #viewport\n    [itemSize]=\"thyItemSize\"\n    [style.height]=\"'100%'\"\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodes\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\"\n    >\n    <div class=\"virtual-trees-container\">\n      <thy-tree-node\n        *cdkVirtualFor=\"let node of flattenTreeNodes; trackBy: trackByFn; let i = index\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n        (cdkDragStarted)=\"onDragStarted($event)\"\n        (cdkDragEnded)=\"onDragEnded($event)\"\n        (cdkDragMoved)=\"emitDragMoved($event)\"\n        [node]=\"node\"\n        [templateRef]=\"templateRef\"\n        [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n        [thyAsync]=\"thyAsync\"\n        [thyDraggable]=\"thyDraggable\"\n        [thyCheckable]=\"thyCheckable\"\n        [thyMultiple]=\"thyMultiple\"\n        [thyClickBehavior]=\"thyClickBehavior\"\n        [thyTitleTruncate]=\"thyTitleTruncate\"\n        [thyItemSize]=\"thyItemSize\"\n        [thyIndent]=\"thyIndent\"\n        (thyOnClick)=\"thyOnClick.emit($event)\"\n        (thyDblClick)=\"thyDblClick.emit($event)\"\n        (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n        (thyOnCheckboxChange)=\"eventTriggerChanged($event)\">\n      </thy-tree-node>\n    </div>\n  </cdk-virtual-scroll-viewport>\n}\n\n@if (!thyVirtualScroll) {\n  <div\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodes\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\">\n    @for (node of flattenTreeNodes; track trackByFn(i, node); let i = $index) {\n      <thy-tree-node\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!thyDraggable || !(node | treeNodeDraggable : thyBeforeDragStart)\"\n        (cdkDragStarted)=\"onDragStarted($event)\"\n        (cdkDragEnded)=\"onDragEnded($event)\"\n        (cdkDragMoved)=\"emitDragMoved($event)\"\n        [node]=\"node\"\n        [templateRef]=\"templateRef\"\n        [emptyChildrenTemplateRef]=\"emptyChildrenTemplate\"\n        [thyAsync]=\"thyAsync\"\n        [thyDraggable]=\"thyDraggable\"\n        [thyCheckable]=\"thyCheckable\"\n        [thyMultiple]=\"thyMultiple\"\n        [thyTitleTruncate]=\"thyTitleTruncate\"\n        [thyItemSize]=\"thyItemSize\"\n        [thyClickBehavior]=\"thyClickBehavior\"\n        [thyIndent]=\"thyIndent\"\n        (thyOnClick)=\"thyOnClick.emit($event)\"\n        (thyDblClick)=\"thyDblClick.emit($event)\"\n        (thyOnExpandChange)=\"eventTriggerChanged($event)\"\n        (thyOnCheckboxChange)=\"thyOnCheckboxChange.emit($event)\">\n      </thy-tree-node>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { viewport: [{
                 type: Output
             }, {
                 type: ViewChild,