ngx-tethys 19.1.0-next.0 → 19.1.0-next.2

package/fesm2022/ngx-tethys-tree.mjs

@@ -8,14 +8,15 @@ import { ThySharedModule, ThyOptionModule } from 'ngx-tethys/shared';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { NgClass, NgStyle, NgTemplateOutlet, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, EventEmitter, numberAttribute, Input, HostBinding, ViewChild, ContentChild, Output, ViewEncapsulation, Component, Pipe, ChangeDetectorRef, forwardRef, ViewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { InjectionToken, signal, Injectable, inject, input, output, contentChild, viewChild, numberAttribute, computed, ViewEncapsulation, Component, Pipe, DestroyRef, model, viewChildren, effect, afterNextRender, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { BehaviorSubject, Subject } from 'rxjs';
 import { isArray, helpers, isFunction, coerceArray, coerceBooleanProperty } from 'ngx-tethys/util';
+import { Subject } from 'rxjs';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkDrag, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
-import { startWith, takeUntil, filter } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const THY_TREE_ABSTRACT_TOKEN = new InjectionToken('thy-tree-abstract-token');
 
@@ -142,8 +143,7 @@ function checkStateResolve(node) {
  */
 class ThyTreeService {
     constructor() {
-        this.flattenNodes$ = new BehaviorSubject([]);
-        this.flattenTreeNodes = [];
+        this.flattenTreeNodes = signal([]);
         this.originTreeNodes = [];
         this.treeNodes = [];
         this.checkStateResolve = checkStateResolve;
@@ -158,9 +158,7 @@ class ThyTreeService {
         this.treeNodes = (rootNodes || []).map(node => new ThyTreeNode(node, null, this));
     }
     syncFlattenTreeNodes() {
-        this.flattenTreeNodes = this.getParallelTreeNodes(this.treeNodes, false);
-        this.flattenNodes$.next(this.flattenTreeNodes);
-        return this.flattenTreeNodes;
+        this.flattenTreeNodes.set(this.getParallelTreeNodes(this.treeNodes, false));
     }
     getParallelTreeNodes(rootTrees = this.treeNodes, flattenAllNodes = true) {
         const flattenTreeData = [];
@@ -314,195 +312,169 @@ class ThyTreeNodeComponent {
     constructor() {
         this.root = inject(THY_TREE_ABSTRACT_TOKEN);
         this.thyTreeService = inject(ThyTreeService);
+        /**
+         * node 节点展现所需的数据
+         */
+        this.node = input(null);
         /**
          * 设置 TreeNode 是否支持异步加载
          */
-        this.thyAsync = false;
+        this.thyAsync = input(false, { transform: coerceBooleanProperty });
         /**
          * 设置 TreeNode 是否支持多选节点
          */
-        this.thyMultiple = false;
+        this.thyMultiple = input(false, { transform: coerceBooleanProperty });
         /**
          * 设置 TreeNode 是否支持拖拽排序
          */
-        this.thyDraggable = false;
+        this.thyDraggable = input(false, { transform: coerceBooleanProperty });
         /**
          * 设置 TreeNode 是否支持 Checkbox 选择
          */
-        this.thyCheckable = false;
+        this.thyCheckable = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 点击节点的行为，`default` 为选中当前节点，`selectCheckbox` 为选中节点的 Checkbox， `thyCheckable` 为 true 时生效。
+         * @default default
+         */
+        this.thyClickBehavior = input(undefined);
+        /**
+         * 设置节点名称是否支持超出截取
+         * @default false
+         */
+        this.thyTitleTruncate = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 设置 TreeNode 的渲染模板
+         */
+        this.templateRef = input();
+        /**
+         * 设置子的空数据渲染模板
+         */
+        this.emptyChildrenTemplateRef = input();
         /**
          * 设置 node 点击事件
          */
-        this.thyOnClick = new EventEmitter();
+        this.thyOnClick = output();
         /**
          * 双击 node 事件
          */
-        this.thyDblClick = new EventEmitter();
+        this.thyDblClick = output();
         /**
          * 点击展开触发事件
          */
-        this.thyOnExpandChange = new EventEmitter();
+        this.thyOnExpandChange = output();
         /**
          * 设置 check 选择事件
          */
-        this.thyOnCheckboxChange = new EventEmitter();
-        this.thyTreeNodeClass = true;
+        this.thyOnCheckboxChange = output();
+        /**
+         * 设置 childrenTree 的渲染模板
+         */
+        this.childrenTreeTemplateRef = contentChild('childrenTree');
+        /** The native `<div class="thy-tree-node-wrapper thy-sortable-item"></div>` element. */
+        this.treeNodeWrapper = viewChild('treeNodeWrapper');
         /**
          * 开启虚拟滚动时，单行节点的高度，当`thySize`为`default`时，该参数才生效
          */
-        this.thyItemSize = 44;
+        this.thyItemSize = input(44, { transform: numberAttribute });
         /**
          * 设置节点缩进距离，缩进距离 = thyIndent * node.level
          */
-        this.thyIndent = 25;
-        this.destroy$ = new Subject();
+        this.thyIndent = input(25, { transform: numberAttribute });
+        this.nodeIcon = computed(() => {
+            return this.node().origin.icon;
+        });
+        this.nodeIconStyle = computed(() => {
+            return this.node().origin.iconStyle;
+        });
+        this.itemClass = computed(() => {
+            return this.node()?.itemClass?.join(' ');
+        });
         this.checkState = ThyTreeNodeCheckState;
     }
-    get nodeIcon() {
-        return this.node.origin.icon;
-    }
-    get nodeIconStyle() {
-        return this.node.origin.iconStyle;
-    }
     clickNode(event) {
-        if (this.node.isDisabled) {
+        const node = this.node();
+        if (node.isDisabled) {
             this.expandNode(event);
         }
         else {
-            if (this.thyCheckable && this.thyClickBehavior === 'selectCheckbox') {
+            if (this.thyCheckable() && this.thyClickBehavior() === 'selectCheckbox') {
                 this.clickNodeCheck(event);
             }
             else {
-                if (this.root.thyMultiple) {
-                    this.root.toggleTreeNode(this.node);
+                if (this.root.thyMultiple()) {
+                    this.root.toggleTreeNode(node);
                 }
                 else {
-                    this.root.selectTreeNode(this.node);
+                    this.root.selectTreeNode(node);
                 }
             }
         }
         this.thyOnClick.emit({
             eventName: 'click',
             event: event,
-            node: this.node
+            node: node
         });
     }
     dbClickNode(event) {
         this.thyDblClick.emit({
             eventName: 'dbclick',
             event: event,
-            node: this.node
+            node: this.node()
         });
     }
     clickNodeCheck(event) {
         event.stopPropagation();
-        if (this.node.isChecked === ThyTreeNodeCheckState.unchecked) {
-            this.node.setChecked(true);
+        const node = this.node();
+        if (node.isChecked === ThyTreeNodeCheckState.unchecked) {
+            node.setChecked(true);
         }
-        else if (this.node.isChecked === ThyTreeNodeCheckState.checked) {
-            this.node.setChecked(false);
+        else if (node.isChecked === ThyTreeNodeCheckState.checked) {
+            node.setChecked(false);
         }
-        else if (this.node.isChecked === ThyTreeNodeCheckState.indeterminate) {
-            if (this.node.children?.length) {
-                const activeChildren = this.node.children.filter(item => !item.isDisabled);
+        else if (node.isChecked === ThyTreeNodeCheckState.indeterminate) {
+            if (node.children?.length) {
+                const activeChildren = node.children.filter(item => !item.isDisabled);
                 const isAllActiveChildrenChecked = activeChildren.every(item => item.isChecked);
-                this.node.setChecked(!isAllActiveChildrenChecked);
+                node.setChecked(!isAllActiveChildrenChecked);
             }
             else {
-                this.node.setChecked(true);
+                node.setChecked(true);
             }
         }
         this.thyOnCheckboxChange.emit({
             eventName: 'checkboxChange',
             event: event,
-            node: this.node
+            node: node
         });
     }
     expandNode(event) {
         event.stopPropagation();
-        this.node.setExpanded(!this.node.isExpanded);
-        if (this.root.thyShowExpand) {
+        const node = this.node();
+        this.node().setExpanded(!node.isExpanded);
+        if (this.root.thyShowExpand()) {
             this.thyOnExpandChange.emit({
                 eventName: 'expand',
                 event: event,
-                node: this.node
+                node: node
             });
-            if (this.thyAsync && this.node.children.length === 0) {
-                this.node.setLoading(true);
+            if (this.thyAsync() && node.children.length === 0) {
+                node.setLoading(true);
             }
         }
     }
     isShowExpand(node) {
         return this.root.isShowExpand(node);
     }
-    ngOnInit() {
-        this.itemClass = this.node?.itemClass?.join(' ');
-    }
-    ngOnChanges(changes) {
-        if (changes.node && !changes.node.isFirstChange()) {
-            this.itemClass = changes?.node?.currentValue.itemClass?.join(' ');
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeNodeComponent, isStandalone: true, selector: "thy-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, thyAsync: { classPropertyName: "thyAsync", publicName: "thyAsync", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyDraggable: { classPropertyName: "thyDraggable", publicName: "thyDraggable", isSignal: true, isRequired: false, transformFunction: null }, thyCheckable: { classPropertyName: "thyCheckable", publicName: "thyCheckable", isSignal: true, isRequired: false, transformFunction: null }, thyClickBehavior: { classPropertyName: "thyClickBehavior", publicName: "thyClickBehavior", isSignal: true, isRequired: false, transformFunction: null }, thyTitleTruncate: { classPropertyName: "thyTitleTruncate", publicName: "thyTitleTruncate", isSignal: true, isRequired: false, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, emptyChildrenTemplateRef: { classPropertyName: "emptyChildrenTemplateRef", publicName: "emptyChildrenTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, thyItemSize: { classPropertyName: "thyItemSize", publicName: "thyItemSize", isSignal: true, isRequired: false, transformFunction: null }, thyIndent: { classPropertyName: "thyIndent", publicName: "thyIndent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnClick: "thyOnClick", thyDblClick: "thyDblClick", thyOnExpandChange: "thyOnExpandChange", thyOnCheckboxChange: "thyOnCheckboxChange" }, host: { properties: { "class.thy-tree-node": "true", "class": "itemClass()" } }, queries: [{ propertyName: "childrenTreeTemplateRef", first: true, predicate: ["childrenTree"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "treeNodeWrapper", first: true, predicate: ["treeNodeWrapper"], descendants: true, isSignal: 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.icons()?.expand && root.icons()?.collapse) {\n          <thy-icon\n            class=\"thy-tree-expand-icon\"\n            [thyIconName]=\"node().isExpanded ? root.icons().expand : root.icons().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: "19.2.8", ngImport: i0, type: ThyTreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-tree-node', encapsulation: ViewEncapsulation.None, 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,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyMultiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDraggable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyCheckable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyClickBehavior: [{
-                type: Input
-            }], thyTitleTruncate: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], templateRef: [{
-                type: Input
-            }], emptyChildrenTemplateRef: [{
-                type: Input
-            }], thyOnClick: [{
-                type: Output
-            }], thyDblClick: [{
-                type: Output
-            }], thyOnExpandChange: [{
-                type: Output
-            }], thyOnCheckboxChange: [{
-                type: Output
-            }], childrenTreeTemplateRef: [{
-                type: ContentChild,
-                args: ['childrenTree']
-            }], treeNodeWrapper: [{
-                type: ViewChild,
-                args: ['treeNodeWrapper', { static: true }]
-            }], thyTreeNodeClass: [{
-                type: HostBinding,
-                args: ['class.thy-tree-node']
-            }], itemClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], thyItemSize: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyIndent: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
+            args: [{ selector: 'thy-tree-node', encapsulation: ViewEncapsulation.None, imports: [ThyIcon, NgClass, NgStyle, NgTemplateOutlet, ThyLoading], host: {
+                        '[class.thy-tree-node]': 'true',
+                        '[class]': 'itemClass()'
+                    }, 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.icons()?.expand && root.icons()?.collapse) {\n          <thy-icon\n            class=\"thy-tree-expand-icon\"\n            [thyIconName]=\"node().isExpanded ? root.icons().expand : root.icons().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" }]
+        }] });
 
 /**
  * @private
@@ -540,187 +512,199 @@ const treeItemSizeMap = {
  * @name thy-tree
  */
 class ThyTree {
+    get treeNodes() {
+        return this.thyTreeService.treeNodes;
+    }
     constructor() {
         this.thyTreeService = inject(ThyTreeService);
-        this.cdr = inject(ChangeDetectorRef);
         this.document = inject(DOCUMENT);
-        this._draggable = false;
+        this.destroyRef = inject(DestroyRef);
         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 = [];
+        this.flattenTreeNodes = computed(() => this.thyTreeService.flattenTreeNodes());
+        /**
+         * 虚拟化滚动的视口
+         */
+        this.viewport = viewChild('viewport');
+        /**
+         * TreeNode 展现所需的数据
+         * @type ThyTreeNodeData[]
+         */
+        this.thyNodes = model(undefined);
         /**
          * 设置 TreeNode 是否支持展开
          * @type boolean | Function
          */
-        this.thyShowExpand = true;
+        this.thyShowExpand = input(true);
         /**
          * 设置是否支持多选节点
          */
-        this.thyMultiple = false;
+        this.thyMultiple = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 设置 TreeNode 是否支持拖拽排序
+         * @default false
+         */
+        this.thyDraggable = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 设置 TreeNode 是否支持 Checkbox 选择
+         * @default false
+         */
+        this.thyCheckable = input(false, { transform: coerceBooleanProperty });
         /**
          * 点击节点的行为，`default` 为选中当前节点，`selectCheckbox` 为选中节点的 Checkbox， `thyCheckable` 为 true 时生效。
          */
-        this.thyClickBehavior = 'default';
+        this.thyClickBehavior = input('default');
+        /**
+         * 设置 check 状态的计算策略
+         */
+        this.thyCheckStateResolve = input();
         /**
          * 设置 TreeNode 是否支持异步加载
          */
-        this.thyAsync = false;
-        this._thyType = 'default';
+        this.thyAsync = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 设置不同展示类型的 Tree，`default` 为小箭头展示， `especial` 为 加减号图标展示
+         * @type ThyTreeType
+         * @default default
+         */
+        this.thyType = input('default');
         /**
          * 设置不同 Tree 展开折叠的图标，`expand` 为展开状态的图标，`collapse` 为折叠状态的图标
          * @type { expand: string, collapse: string }
          */
-        this.thyIcons = {};
-        this._thySize = 'default';
+        this.thyIcons = input({});
+        /**
+         * 支持 `sm` | `default` 两种大小，默认值为 `default`
+         * @type ThyTreeSize
+         * @default default
+         */
+        this.thySize = input('default');
         /**
          * 设置是否开启虚拟滚动
          */
-        this.thyVirtualScroll = false;
-        this._thyItemSize = 44;
+        this.thyVirtualScroll = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 开启虚拟滚动时，单行节点的高度，当`thySize`为`default`时，该参数才生效
+         * @default 44
+         */
+        this.thyItemSize = input(44, {
+            transform: value => {
+                if (value && this.thySize() !== 'default') {
+                    throw new Error('setting thySize and thyItemSize at the same time is not allowed');
+                }
+                return numberAttribute(value);
+            }
+        });
+        this.icons = computed(() => {
+            if (this.thyType() === 'especial') {
+                return { expand: 'minus-square', collapse: 'plus-square' };
+            }
+            return this.thyIcons();
+        });
+        this.itemSize = computed(() => {
+            const itemSize = this.thyItemSize();
+            const size = this.thySize();
+            if (size === 'default') {
+                return itemSize || treeItemSizeMap.default;
+            }
+            else if (size) {
+                return treeItemSizeMap[size] || treeItemSizeMap.default;
+            }
+            else {
+                return treeItemSizeMap.default;
+            }
+        });
         /**
          * 设置节点名称是否支持超出截取
          * @type boolean
          */
-        this.thyTitleTruncate = true;
+        this.thyTitleTruncate = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 已选中的 node 节点集合
+         * @default []
+         */
+        this.thySelectedKeys = input(undefined);
+        /**
+         * 展开指定的树节点
+         */
+        this.thyExpandedKeys = input(undefined);
         /**
          * 是否展开所有树节点
          */
-        this.thyExpandAll = false;
+        this.thyExpandAll = input(false, { transform: coerceBooleanProperty });
         /**
          * 设置缩进距离，缩进距离 = thyIndent * node.level
          * @type number
          */
-        this.thyIndent = 25;
+        this.thyIndent = input(25, { transform: numberAttribute });
+        /**
+         * 拖拽之前的回调，函数返回 false 则阻止拖拽
+         */
+        this.thyBeforeDragStart = input(undefined);
+        /**
+         * 拖放到元素时回调，函数返回 false 则阻止拖放到当前元素
+         */
+        this.thyBeforeDragDrop = input(undefined);
         /**
          * 设置子 TreeNode 点击事件
          */
-        this.thyOnClick = new EventEmitter();
+        this.thyOnClick = output();
         /**
          * 设置 check 选择事件
          */
-        this.thyOnCheckboxChange = new EventEmitter();
+        this.thyOnCheckboxChange = output();
         /**
          * 设置点击展开触发事件
          */
-        this.thyOnExpandChange = new EventEmitter();
+        this.thyOnExpandChange = output();
         /**
          * 设置 TreeNode 拖拽事件
          */
-        this.thyOnDragDrop = new EventEmitter();
+        this.thyOnDragDrop = output();
         /**
          * 双击 TreeNode 事件
          */
-        this.thyDblClick = new EventEmitter();
-        this.thyTreeClass = true;
-        this.renderView = () => { };
-    }
-    get treeNodes() {
-        return this.thyTreeService.treeNodes;
-    }
-    /**
-     * 设置 TreeNode 是否支持拖拽排序
-     * @default false
-     */
-    set thyDraggable(value) {
-        this._draggable = value;
-    }
-    get thyDraggable() {
-        return this._draggable;
-    }
-    /**
-     * 设置 check 状态的计算策略
-     */
-    set thyCheckStateResolve(resolve) {
-        if (resolve) {
-            this.thyTreeService.setCheckStateResolve(resolve);
-        }
-    }
-    /**
-     * 设置不同展示类型的 Tree，`default` 为小箭头展示， `especial` 为 加减号图标展示
-     * @type ThyTreeType
-     * @default default
-     */
-    set thyType(type) {
-        this._thyType = type;
-        if (type === 'especial') {
-            this.thyIcons = { expand: 'minus-square', collapse: 'plus-square' };
-        }
-    }
-    get thyType() {
-        return this._thyType;
-    }
-    /**
-     * 支持 `sm` | `default` 两种大小，默认值为 `default`
-     * @type ThyTreeSize
-     * @default default
-     */
-    set thySize(size) {
-        this._thySize = size;
-        if (this._thySize) {
-            this._thyItemSize = treeItemSizeMap[this._thySize];
-        }
-        else {
-            this._thyItemSize = treeItemSizeMap.default;
-        }
-    }
-    get thySize() {
-        return this._thySize;
-    }
-    /**
-     * 开启虚拟滚动时，单行节点的高度，当`thySize`为`default`时，该参数才生效
-     * @default 44
-     */
-    set thyItemSize(itemSize) {
-        if (this.thySize !== 'default') {
-            throw new Error('setting thySize and thyItemSize at the same time is not allowed');
-        }
-        this._thyItemSize = itemSize;
-    }
-    get thyItemSize() {
-        return this._thyItemSize;
-    }
-    /**
-     * 设置 TreeNode 的渲染模板
-     */
-    set templateRef(template) {
-        if (template) {
-            this._templateRef = template;
-        }
-    }
-    get templateRef() {
-        return this._templateRef;
-    }
-    set emptyChildrenTemplateRef(template) {
-        if (template) {
-            this._emptyChildrenTemplateRef = template;
-        }
-    }
-    get emptyChildrenTemplateRef() {
-        return this._emptyChildrenTemplateRef;
-    }
-    ngOnInit() {
-        this._initThyNodes();
-        this._setTreeType();
-        this._setTreeSize();
-        this._instanceSelectionModel();
-        this._selectTreeNodes(this.thySelectedKeys);
-        this.thyTreeService.flattenNodes$.subscribe(flattenTreeNodes => {
-            this.flattenTreeNodes = flattenTreeNodes;
-            this.cdr.markForCheck();
+        this.thyDblClick = output();
+        /**
+         * 设置 TreeNode 的渲染模板
+         */
+        this.templateRef = contentChild('treeNodeTemplate');
+        /**
+         * 设置子的空数据渲染模板
+         */
+        this.emptyChildrenTemplate = contentChild('emptyChildrenTemplate');
+        this.dragging = signal(false);
+        this.cdkDrags = viewChildren(CdkDrag);
+        effect(() => {
+            const resolve = this.thyCheckStateResolve();
+            if (resolve) {
+                this.thyTreeService.setCheckStateResolve(resolve);
+            }
         });
-    }
-    ngAfterViewInit() {
-        this.cdkDrags.changes
-            .pipe(startWith(this.cdkDrags), takeUntil(this.destroy$))
-            .subscribe((drags) => {
+        effect(() => {
+            this.initThyNodes();
+        });
+        effect(() => {
+            this.setTreeSize();
+        });
+        effect(() => {
+            this.setTreeType();
+        });
+        effect(() => {
+            this.instanceSelectionModel();
+        });
+        effect(() => {
+            this.selectTreeNodes(this.thySelectedKeys());
+        });
+        effect(() => {
+            const drags = this.cdkDrags();
             this.nodeDragsMap.clear();
             drags.forEach(drag => {
                 if (drag.data) {
@@ -729,36 +713,17 @@ class ThyTree {
                 }
             });
         });
-        this.nodeDragMoved
-            .pipe(
-        // auditTime(30),
-        //  auditTime 可能会导致拖动结束后仍然执行 moved ，所以通过判断 dragging 状态来过滤无效 moved
-        filter((event) => event.source._dragRef.isDragging()), takeUntil(this.destroy$))
-            .subscribe(event => {
-            this.onDragMoved(event);
+        afterNextRender(() => {
+            this.nodeDragMoved
+                .pipe(
+            // auditTime(30),
+            //  auditTime 可能会导致拖动结束后仍然执行 moved ，所以通过判断 dragging 状态来过滤无效 moved
+            filter((event) => event.source._dragRef.isDragging()), takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => {
+                this.onDragMoved(event);
+            });
         });
     }
-    ngOnChanges(changes) {
-        if (changes.thyNodes && !changes.thyNodes.isFirstChange()) {
-            this._initThyNodes();
-        }
-        if (changes.thyType && !changes.thyType.isFirstChange()) {
-            this._setTreeType();
-        }
-        if (changes.thyMultiple && !changes.thyMultiple.isFirstChange()) {
-            this._instanceSelectionModel();
-        }
-        if (changes.thySelectedKeys && !changes.thySelectedKeys.isFirstChange()) {
-            this._selectedKeys = changes.thySelectedKeys.currentValue;
-            this._selectTreeNodes(changes.thySelectedKeys.currentValue);
-        }
-        if (changes.thyExpandedKeys && !changes.thyExpandedKeys.isFirstChange()) {
-            this._handleExpandedKeys();
-        }
-        if (changes.thyExpandAll && !changes.thyExpandAll.isFirstChange()) {
-            this._handleExpandedKeys();
-        }
-    }
     eventTriggerChanged(event) {
         switch (event.eventName) {
             case 'expand':
@@ -769,36 +734,40 @@ class ThyTree {
                 break;
         }
     }
-    _initThyNodes() {
-        this._expandedKeys = this.getExpandedNodes().map(node => node.key);
-        this._selectedKeys = this.getSelectedNodes().map(node => node.key);
-        this.thyTreeService.initializeTreeNodes(this.thyNodes);
-        this.flattenTreeNodes = this.thyTreeService.flattenTreeNodes;
-        this._selectTreeNodes(this._selectedKeys);
-        this._handleExpandedKeys();
-    }
-    _handleExpandedKeys() {
-        if (this.thyExpandedKeys?.length) {
-            this._expandedKeys = helpers.concatArray(this.thyExpandedKeys.filter(key => !this._expandedKeys.includes(key)), this._expandedKeys);
+    initThyNodes() {
+        this.expandedKeys = this.getExpandedNodes().map(node => node.key);
+        this.selectedKeys = this.getSelectedNodes().map(node => node.key);
+        this.thyTreeService.initializeTreeNodes(this.thyNodes());
+        this.selectTreeNodes(this.selectedKeys);
+        this.handleExpandedKeys();
+    }
+    handleExpandedKeys() {
+        if (this.thyExpandAll()) {
+            this.thyTreeService.expandTreeNodes(true);
+        }
+        else {
+            this.expandedKeys = helpers.concatArray((this.thyExpandedKeys() || []).filter(key => !this.expandedKeys.includes(key)), this.expandedKeys);
+            this.thyTreeService.expandTreeNodes(this.expandedKeys);
         }
-        this.thyTreeService.expandTreeNodes(this.thyExpandAll || this._expandedKeys);
     }
-    _setTreeType() {
-        if (this.thyType && treeTypeClassMap[this.thyType]) {
-            treeTypeClassMap[this.thyType].forEach(className => {
+    setTreeType() {
+        const type = this.thyType();
+        if (type && treeTypeClassMap[type]) {
+            treeTypeClassMap[type].forEach(className => {
                 this.hostRenderer.addClass(className);
             });
         }
     }
-    _setTreeSize() {
-        if (this.thySize) {
-            this.hostRenderer.addClass(`thy-tree-${this.thySize}`);
+    setTreeSize() {
+        const size = this.thySize();
+        if (size) {
+            this.hostRenderer.addClass(`thy-tree-${size}`);
         }
     }
-    _instanceSelectionModel() {
-        this._selectionModel = new SelectionModel(this.thyMultiple);
+    instanceSelectionModel() {
+        this.selectionModel = new SelectionModel(this.thyMultiple());
     }
-    _selectTreeNodes(keys) {
+    selectTreeNodes(keys) {
         (keys || []).forEach(key => {
             const node = this.thyTreeService.getTreeNode(key);
             if (node) {
@@ -807,28 +776,28 @@ class ThyTree {
         });
     }
     isSelected(node) {
-        return this._selectionModel.isSelected(node);
+        return this.selectionModel.isSelected(node);
     }
     toggleTreeNode(node) {
         if (node && !node.isDisabled) {
-            this._selectionModel.toggle(node);
+            this.selectionModel.toggle(node);
         }
     }
     trackByFn(index, item) {
         return item.key || index;
     }
     isShowExpand(node) {
-        if (helpers.isFunction(this.thyShowExpand)) {
-            return this.thyShowExpand(node);
+        const thyShowExpand = this.thyShowExpand();
+        if (helpers.isFunction(thyShowExpand)) {
+            return thyShowExpand(node);
         }
         else {
-            return this.thyShowExpand;
+            return thyShowExpand;
         }
     }
     writeValue(value) {
         if (value) {
-            this.thyNodes = value;
-            this._initThyNodes();
+            this.thyNodes.set(value);
         }
     }
     registerOnChange(fn) {
@@ -838,7 +807,7 @@ class ThyTree {
         this._onTouched = fn;
     }
     onDragStarted(event) {
-        this.dragging = true;
+        this.dragging.set(true);
         this.startDragNodeClone = Object.assign({}, event.source.data);
         if (event.source.data.isExpanded) {
             event.source.data.setExpanded(false);
@@ -886,7 +855,7 @@ class ThyTree {
         }
     }
     onDragEnded(event) {
-        this.dragging = false;
+        this.dragging.set(false);
         // 拖拽结束后恢复原始的展开状态
         event.source.data.setExpanded(this.startDragNodeClone.isExpanded);
         setTimeout(() => {
@@ -903,7 +872,7 @@ class ThyTree {
         }
         const sourceNode = this.startDragNodeClone;
         const sourceNodeParent = sourceNode.parentNode;
-        const targetDragRef = this.cdkDrags.find(item => item.data?.key === this.nodeDropTarget.key);
+        const targetDragRef = this.cdkDrags().find(item => item.data?.key === this.nodeDropTarget.key);
         const targetNode = targetDragRef?.data;
         const targetNodeParent = targetNode.parentNode;
         const beforeDragDropContext = {
@@ -913,7 +882,8 @@ class ThyTree {
             containerItems: targetNodeParent?.children,
             position: this.nodeDropTarget.position
         };
-        if (this.thyBeforeDragDrop && !this.thyBeforeDragDrop(beforeDragDropContext)) {
+        const thyBeforeDragDrop = this.thyBeforeDragDrop();
+        if (thyBeforeDragDrop && !thyBeforeDragDrop(beforeDragDropContext)) {
             this.cleanupDragArtifacts();
             return;
         }
@@ -986,21 +956,18 @@ class ThyTree {
     // region Public Functions
     selectTreeNode(node) {
         if (node && !node.isDisabled) {
-            this._selectionModel.select(node);
+            this.selectionModel.select(node);
             this.thyTreeService.syncFlattenTreeNodes();
         }
     }
-    getRootNodes() {
-        return this.treeNodes;
-    }
     getTreeNode(key) {
         return this.thyTreeService.getTreeNode(key);
     }
     getSelectedNode() {
-        return this._selectionModel ? this._selectionModel.selected[0] : null;
+        return this.selectionModel ? this.selectionModel.selected[0] : null;
     }
     getSelectedNodes() {
-        return this._selectionModel ? this._selectionModel.selected : [];
+        return this.selectionModel ? this.selectionModel.selected : [];
     }
     getExpandedNodes() {
         return this.thyTreeService.getExpandedNodes();
@@ -1014,26 +981,21 @@ class ThyTree {
     }
     deleteTreeNode(node) {
         if (this.isSelected(node)) {
-            this._selectionModel.toggle(node);
+            this.selectionModel.toggle(node);
         }
         this.thyTreeService.deleteTreeNode(node);
         this.thyTreeService.syncFlattenTreeNodes();
     }
     expandAllNodes() {
-        const nodes = this.getRootNodes();
+        const nodes = this.treeNodes;
         nodes.forEach(n => n.setExpanded(true, true));
     }
     collapsedAllNodes() {
-        const nodes = this.getRootNodes();
+        const nodes = this.treeNodes;
         nodes.forEach(n => n.setExpanded(false, true));
     }
-    // endregion
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTree, isStandalone: true, selector: "thy-tree", inputs: { thyNodes: { classPropertyName: "thyNodes", publicName: "thyNodes", isSignal: true, isRequired: false, transformFunction: null }, thyShowExpand: { classPropertyName: "thyShowExpand", publicName: "thyShowExpand", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyDraggable: { classPropertyName: "thyDraggable", publicName: "thyDraggable", isSignal: true, isRequired: false, transformFunction: null }, thyCheckable: { classPropertyName: "thyCheckable", publicName: "thyCheckable", isSignal: true, isRequired: false, transformFunction: null }, thyClickBehavior: { classPropertyName: "thyClickBehavior", publicName: "thyClickBehavior", isSignal: true, isRequired: false, transformFunction: null }, thyCheckStateResolve: { classPropertyName: "thyCheckStateResolve", publicName: "thyCheckStateResolve", isSignal: true, isRequired: false, transformFunction: null }, thyAsync: { classPropertyName: "thyAsync", publicName: "thyAsync", isSignal: true, isRequired: false, transformFunction: null }, thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thyIcons: { classPropertyName: "thyIcons", publicName: "thyIcons", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, thyItemSize: { classPropertyName: "thyItemSize", publicName: "thyItemSize", isSignal: true, isRequired: false, transformFunction: null }, thyTitleTruncate: { classPropertyName: "thyTitleTruncate", publicName: "thyTitleTruncate", isSignal: true, isRequired: false, transformFunction: null }, thySelectedKeys: { classPropertyName: "thySelectedKeys", publicName: "thySelectedKeys", isSignal: true, isRequired: false, transformFunction: null }, thyExpandedKeys: { classPropertyName: "thyExpandedKeys", publicName: "thyExpandedKeys", isSignal: true, isRequired: false, transformFunction: null }, thyExpandAll: { classPropertyName: "thyExpandAll", publicName: "thyExpandAll", isSignal: true, isRequired: false, transformFunction: null }, thyIndent: { classPropertyName: "thyIndent", publicName: "thyIndent", isSignal: true, isRequired: false, transformFunction: null }, thyBeforeDragStart: { classPropertyName: "thyBeforeDragStart", publicName: "thyBeforeDragStart", isSignal: true, isRequired: false, transformFunction: null }, thyBeforeDragDrop: { classPropertyName: "thyBeforeDragDrop", publicName: "thyBeforeDragDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyNodes: "thyNodesChange", thyOnClick: "thyOnClick", thyOnCheckboxChange: "thyOnCheckboxChange", thyOnExpandChange: "thyOnExpandChange", thyOnDragDrop: "thyOnDragDrop", thyDblClick: "thyDblClick" }, host: { properties: { "class.thy-multiple-selection-list": "thyMultiple()", "class.thy-virtual-scrolling-tree": "thyVirtualScroll()", "class.thy-tree-draggable": "thyDraggable()", "class.thy-tree-dragging": "dragging()" }, classAttribute: "thy-tree" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyTree),
@@ -1044,11 +1006,17 @@ 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: "@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 }); }
+        ], queries: [{ propertyName: "templateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, isSignal: true }, { propertyName: "emptyChildrenTemplate", first: true, predicate: ["emptyChildrenTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "cdkDrags", predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "@let flattenTreeNodesValue = flattenTreeNodes();\n@let draggable = thyDraggable();\n@let async = thyAsync();\n@let checkable = thyCheckable();\n@let multiple = thyMultiple();\n@let titleTruncate = thyTitleTruncate();\n@let indent = thyIndent();\n@let clickBehavior = thyClickBehavior();\n\n@if (thyVirtualScroll()) {\n  <cdk-virtual-scroll-viewport\n    #viewport\n    [itemSize]=\"itemSize()\"\n    [style.height]=\"'100%'\"\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodesValue\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\"\n    >\n    <div class=\"virtual-trees-container\">\n      <thy-tree-node\n        *cdkVirtualFor=\"let node of flattenTreeNodesValue; trackBy: trackByFn; let i = index\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!draggable || !(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]=\"async\"\n        [thyDraggable]=\"draggable\"\n        [thyCheckable]=\"checkable\"\n        [thyMultiple]=\"multiple\"\n        [thyClickBehavior]=\"clickBehavior\"\n        [thyTitleTruncate]=\"titleTruncate\"\n        [thyItemSize]=\"itemSize()\"\n        [thyIndent]=\"indent\"\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]=\"flattenTreeNodesValue\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\">\n    @for (node of flattenTreeNodesValue; track trackByFn(i, node); let i = $index) {\n      <thy-tree-node\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!draggable || !(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]=\"async\"\n        [thyDraggable]=\"draggable\"\n        [thyCheckable]=\"checkable\"\n        [thyMultiple]=\"multiple\"\n        [thyTitleTruncate]=\"titleTruncate\"\n        [thyItemSize]=\"itemSize()\"\n        [thyClickBehavior]=\"clickBehavior\"\n        [thyIndent]=\"indent\"\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: "19.2.8", ngImport: i0, type: ThyTree, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-tree', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'thy-tree', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'thy-tree',
+                        '[class.thy-multiple-selection-list]': 'thyMultiple()',
+                        '[class.thy-virtual-scrolling-tree]': 'thyVirtualScroll()',
+                        '[class.thy-tree-draggable]': 'thyDraggable()',
+                        '[class.thy-tree-dragging]': 'dragging()'
+                    }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ThyTree),
@@ -1067,96 +1035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         CdkVirtualForOf,
                         ThyTreeNodeComponent,
                         ThyTreeNodeDraggablePipe
-                    ], 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,
-                args: ['viewport', { static: false }]
-            }], thyNodes: [{
-                type: Input
-            }], thyShowExpand: [{
-                type: Input
-            }], thyMultiple: [{
-                type: HostBinding,
-                args: [`class.thy-multiple-selection-list`]
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDraggable: [{
-                type: HostBinding,
-                args: ['class.thy-tree-draggable']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyCheckable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyClickBehavior: [{
-                type: Input
-            }], thyCheckStateResolve: [{
-                type: Input
-            }], thyAsync: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyType: [{
-                type: Input
-            }], thyIcons: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyVirtualScroll: [{
-                type: HostBinding,
-                args: ['class.thy-virtual-scrolling-tree']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyItemSize: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyTitleTruncate: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thySelectedKeys: [{
-                type: Input
-            }], thyExpandedKeys: [{
-                type: Input
-            }], thyExpandAll: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyIndent: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyBeforeDragStart: [{
-                type: Input
-            }], thyBeforeDragDrop: [{
-                type: Input
-            }], thyOnClick: [{
-                type: Output
-            }], thyOnCheckboxChange: [{
-                type: Output
-            }], thyOnExpandChange: [{
-                type: Output
-            }], thyOnDragDrop: [{
-                type: Output
-            }], thyDblClick: [{
-                type: Output
-            }], templateRef: [{
-                type: ContentChild,
-                args: ['treeNodeTemplate', { static: true }]
-            }], emptyChildrenTemplate: [{
-                type: ContentChild,
-                args: ['emptyChildrenTemplate', { static: true }]
-            }], thyTreeClass: [{
-                type: HostBinding,
-                args: ['class.thy-tree']
-            }], dragging: [{
-                type: HostBinding,
-                args: ['class.thy-tree-dragging']
-            }], cdkDrags: [{
-                type: ViewChildren,
-                args: [CdkDrag]
-            }] } });
+                    ], template: "@let flattenTreeNodesValue = flattenTreeNodes();\n@let draggable = thyDraggable();\n@let async = thyAsync();\n@let checkable = thyCheckable();\n@let multiple = thyMultiple();\n@let titleTruncate = thyTitleTruncate();\n@let indent = thyIndent();\n@let clickBehavior = thyClickBehavior();\n\n@if (thyVirtualScroll()) {\n  <cdk-virtual-scroll-viewport\n    #viewport\n    [itemSize]=\"itemSize()\"\n    [style.height]=\"'100%'\"\n    cdkDropList\n    [cdkDropListAutoScrollStep]=\"6\"\n    [cdkDropListData]=\"flattenTreeNodesValue\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\"\n    >\n    <div class=\"virtual-trees-container\">\n      <thy-tree-node\n        *cdkVirtualFor=\"let node of flattenTreeNodesValue; trackBy: trackByFn; let i = index\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!draggable || !(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]=\"async\"\n        [thyDraggable]=\"draggable\"\n        [thyCheckable]=\"checkable\"\n        [thyMultiple]=\"multiple\"\n        [thyClickBehavior]=\"clickBehavior\"\n        [thyTitleTruncate]=\"titleTruncate\"\n        [thyItemSize]=\"itemSize()\"\n        [thyIndent]=\"indent\"\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]=\"flattenTreeNodesValue\"\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onListDropped($event)\">\n    @for (node of flattenTreeNodesValue; track trackByFn(i, node); let i = $index) {\n      <thy-tree-node\n        cdkDrag\n        [cdkDragData]=\"node\"\n        [cdkDragDisabled]=\"!draggable || !(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]=\"async\"\n        [thyDraggable]=\"draggable\"\n        [thyCheckable]=\"checkable\"\n        [thyMultiple]=\"multiple\"\n        [thyTitleTruncate]=\"titleTruncate\"\n        [thyItemSize]=\"itemSize()\"\n        [thyClickBehavior]=\"clickBehavior\"\n        [thyIndent]=\"indent\"\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" }]
+        }], ctorParameters: () => [] });
 
 class ThyTreeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }