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

package/fesm2022/ngx-tethys-tree-select.mjs

@@ -1,7 +1,7 @@
 import { ViewportRuler, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { isPlatformBrowser, NgTemplateOutlet, NgClass, NgStyle, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID, EventEmitter, forwardRef, Output, Input, ViewChild, ContentChild, HostBinding, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID, DestroyRef, signal, computed, contentChild, viewChild, input, output, effect, forwardRef, Input, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
@@ -9,11 +9,12 @@ import { ThyListModule } from 'ngx-tethys/list';
 import { ThySelectControl, ThyStopPropagationDirective, ThySelectCommonModule, ThySharedModule } from 'ngx-tethys/shared';
 import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, EXPANDED_DROPDOWN_POSITIONS, scaleYMotion, injectPanelEmptyIcon } from 'ngx-tethys/core';
 import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
-import { warnDeprecation, isObject, elementMatchClosest, isArray, produce, coerceBooleanProperty } from 'ngx-tethys/util';
-import { Subject, of } from 'rxjs';
-import { takeUntil, take } from 'rxjs/operators';
+import { isObject, coerceBooleanProperty, elementMatchClosest, isArray, produce } from 'ngx-tethys/util';
+import { of } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { injectLocale } from 'ngx-tethys/i18n';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 function filterTreeData(treeNodes, searchText, searchKey = 'name') {
     const filterNodes = (node, result) => {
@@ -39,53 +40,13 @@ function filterTreeData(treeNodes, searchText, searchKey = 'name') {
  * @order 10
  */
 class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
-    /**
-     * treeNodes 数据
-     * @type ThyTreeSelectNode[]
-     */
-    set thyTreeNodes(value) {
-        this.treeNodes = value;
-        this.originTreeNodes = value;
-        if (this.initialled) {
-            this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
-            this.setSelectedNodes();
-            if (this.thyVirtualScroll) {
-                this.buildFlattenTreeNodes();
-            }
-        }
-    }
     get thyDisabled() {
-        return this.thyDisable;
-    }
-    get placeholder() {
-        return this.thyPlaceholder;
-    }
-    /**
-     * 图标类型，支持 default | especial，已废弃
-     * @deprecated
-     */
-    set thyIconType(type) {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            warnDeprecation('This parameter has been deprecation');
-        }
-        // if (type === 'especial') {
-        //     this.icons = { expand: 'minus-square', collapse: 'plus-square', gap: 20 };
-        // } else {
-        //     this.icons = { expand: 'caret-right-down', collapse: 'caret-right', gap: 15 };
-        // }
-    }
-    _getNgModelType() {
-        if (this.thyMultiple) {
-            this.valueIsObject = !this.selectedValue[0] || isObject(this.selectedValue[0]);
-        }
-        else {
-            this.valueIsObject = isObject(this.selectedValue);
-        }
+        return this.thyDisable();
     }
     buildFlattenTreeNodes() {
-        this.virtualTreeNodes = this.getFlattenTreeNodes(this.treeNodes);
+        this.virtualTreeNodes.set(this.getFlattenTreeNodes(this.treeNodes()));
     }
-    getFlattenTreeNodes(rootTrees = this.treeNodes) {
+    getFlattenTreeNodes(rootTrees = this.treeNodes()) {
         const forEachTree = (tree, fn, result = []) => {
             tree.forEach(item => {
                 result.push(item);
@@ -98,11 +59,7 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
         return forEachTree(rootTrees, (node) => !!node.expand);
     }
     writeValue(value) {
-        this.selectedValue = value;
-        if (value) {
-            this._getNgModelType();
-        }
-        this.setSelectedNodes();
+        this.selectedValue.set(value);
     }
     constructor() {
         super();
@@ -112,85 +69,120 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
         this.platformId = inject(PLATFORM_ID);
         this.thyClickDispatcher = inject(ThyClickDispatcher);
         this.viewportRuler = inject(ViewportRuler);
-        this.treeSelectClass = true;
-        this.isTreeSelect = true;
+        this.destroyRef = inject(DestroyRef);
         // 菜单是否展开
-        this.expandTreeSelectOptions = false;
-        this.isMulti = false;
-        this.selectedNodes = [];
-        this.flattenTreeNodes = [];
-        this.virtualTreeNodes = [];
-        this.cdkConnectOverlayWidth = 0;
+        this.expandTreeSelectOptions = signal(false);
+        this.selectedValue = signal(undefined);
+        this.selectedNode = signal(null);
+        this.selectedNodes = signal([]);
+        this.flattenTreeNodes = signal([]);
+        this.virtualTreeNodes = signal([]);
+        this.cdkConnectOverlayWidth = signal(0);
         this.expandedDropdownPositions = EXPANDED_DROPDOWN_POSITIONS;
         this.icons = {
             expand: 'angle-down',
             collapse: 'angle-right',
             gap: 15
         };
-        this.initialled = false;
-        this.destroy$ = new Subject();
         this.locale = injectLocale('treeSelect');
-        this.valueIsObject = false;
+        this.valueIsObject = computed(() => {
+            const selectedValue = this.selectedValue();
+            if (this.thyMultiple()) {
+                return selectedValue && (!selectedValue[0] || isObject(selectedValue[0]));
+            }
+            else {
+                return isObject(selectedValue);
+            }
+        });
+        this.searchText = signal('');
+        this.thyTreeSelectTriggerDisplayRef = contentChild('thyTreeSelectTriggerDisplay');
+        this.treeNodeTemplateRef = contentChild('treeNodeTemplate');
+        this.cdkOverlayOrigin = viewChild(CdkOverlayOrigin);
+        this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
+        this.customDisplayTemplate = viewChild('customDisplayTemplate');
+        /**
+         * treeNodes 数据
+         * @type ThyTreeSelectNode[]
+         */
+        this.thyTreeNodes = input([]);
+        this.treeNodes = computed(() => {
+            return filterTreeData(this.thyTreeNodes(), this.searchText(), this.thyShowKey());
+        });
         /**
          * 开启虚拟滚动
          */
-        this.thyVirtualScroll = false;
+        this.thyVirtualScroll = input(false, { transform: coerceBooleanProperty });
         /**
          * 树节点的唯一标识
          * @type string
          */
-        this.thyPrimaryKey = '_id';
+        this.thyPrimaryKey = input('_id');
         /**
          * 树节点的显示的字段 key
          * @type string
          */
-        this.thyShowKey = 'name';
-        this.thyChildCountKey = 'childCount';
+        this.thyShowKey = input('name');
+        this.thyChildCountKey = input('childCount');
+        /**
+         * 单选时，是否显示清除按钮，当为 true 时，显示清除按钮
+         * @default false
+         */
+        this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否多选
          * @type boolean
          */
-        this.thyMultiple = false;
+        this.thyMultiple = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否禁用树选择器，当为 true 禁用树选择器
          * @type boolean
          */
-        this.thyDisable = false;
+        this.thyDisable = input(false, { transform: coerceBooleanProperty });
         /**
          * 树选择框默认文字
          * @type string
          */
-        this.thyPlaceholder = this.locale().placeholder;
+        this.thyPlaceholder = input(this.locale().placeholder);
+        /**
+         * 控制树选择的输入框大小
+         * @type xs | sm | md | default | lg
+         */
+        this.thySize = input(undefined);
         /**
          * 改变空选项的情况下的提示文本
          * @type string
          */
-        this.thyEmptyOptionsText = this.locale().empty;
+        this.thyEmptyOptionsText = input(this.locale().empty);
         /**
          * 设置是否隐藏节点(不可进行任何操作)，优先级高于 thyHiddenNodeFn
          * @type string
          */
-        this.thyHiddenNodeKey = 'hidden';
+        this.thyHiddenNodeKey = input('hidden');
         /**
          * 设置是否禁用节点(不可进行任何操作)，优先级高于 thyDisableNodeFn
          * @type string
          */
-        this.thyDisableNodeKey = 'disabled';
+        this.thyDisableNodeKey = input('disabled');
         /**
          * 是否异步加载节点的子节点(显示加载状态)，当为 true 时，异步获取
          * @type boolean
          */
-        this.thyAsyncNode = false;
+        this.thyAsyncNode = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否展示全名
          * @type boolean
          */
-        this.thyShowWholeName = false;
+        this.thyShowWholeName = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否展示搜索
          * @type boolean
          */
-        this.thyShowSearch = false;
+        this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 图标类型，支持 default | especial，已废弃
+         * @deprecated
+         */
+        this.thyIconType = input(undefined);
         /**
          * 设置是否隐藏节点(不可进行任何操作),优先级低于 thyHiddenNodeKey。
          * @default (node: ThyTreeSelectNode) => boolean = (node: ThyTreeSelectNode) => node.hidden
@@ -209,35 +201,45 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
         /**
          * 树选择组件展开和折叠状态事件
          */
-        this.thyExpandStatusChange = new EventEmitter();
+        this.thyExpandStatusChange = output();
+        this.selectedValueObject = computed(() => {
+            return this.thyMultiple() ? this.selectedNodes() : this.selectedNode();
+        });
+        this.bindClickEvent();
+        this.bindResizeEvent();
+        effect(() => {
+            this.setSelectedNodes();
+        });
+        effect(() => {
+            if (this.thyVirtualScroll()) {
+                this.buildFlattenTreeNodes();
+            }
+        });
+        effect(() => {
+            this.flattenTreeNodes.set(this.flattenNodes(this.treeNodes(), []));
+        });
     }
-    ngOnInit() {
-        this.isMulti = this.thyMultiple;
-        this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
-        this.setSelectedNodes();
-        this.initialled = true;
-        if (this.thyVirtualScroll) {
-            this.buildFlattenTreeNodes();
-        }
+    bindClickEvent() {
         if (isPlatformBrowser(this.platformId)) {
             this.thyClickDispatcher
                 .clicked(0)
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(event => {
                 event.stopPropagation();
-                if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions) {
+                if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions()) {
                     this.ngZone.run(() => {
                         this.close();
-                        this.ref.markForCheck();
                     });
                 }
             });
         }
+    }
+    bindResizeEvent() {
         this.viewportRuler
             .change()
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
-            this.init();
+            this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
         });
     }
     onFocus($event) {
@@ -252,109 +254,105 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
         }
         this.onTouchedFn();
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-    }
-    get selectedValueObject() {
-        return this.thyMultiple ? this.selectedNodes : this.selectedNode;
-    }
     searchValue(searchText) {
-        this.treeNodes = filterTreeData(this.originTreeNodes, searchText.trim(), this.thyShowKey);
+        this.searchText.set(searchText.trim());
     }
     setPosition() {
         this.ngZone.onStable
             .asObservable()
             .pipe(take(1))
             .subscribe(() => {
-            this.cdkConnectedOverlay.overlayRef.updatePosition();
+            this.cdkConnectedOverlay().overlayRef.updatePosition();
         });
     }
-    init() {
-        this.cdkConnectOverlayWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
-    }
-    flattenNodes(nodes = [], resultNodes = [], parentPrimaryValue = []) {
-        resultNodes = resultNodes.concat(nodes);
-        let nodesLeafs = [];
+    flattenNodes(nodes = [], parentPrimaryValue = []) {
+        let flattenedNodes = [];
         (nodes || []).forEach(item => {
             item.parentValues = parentPrimaryValue;
             item.level = item.parentValues.length;
+            flattenedNodes.push(item);
             if (item.children && isArray(item.children)) {
-                const nodeLeafs = this.flattenNodes(item.children, resultNodes, [...parentPrimaryValue, item[this.thyPrimaryKey]]);
-                nodesLeafs = [...nodesLeafs, ...nodeLeafs];
+                const childNodes = this.flattenNodes(item.children, [...parentPrimaryValue, item[this.thyPrimaryKey()]]);
+                flattenedNodes = flattenedNodes.concat(childNodes);
             }
         });
-        return [...nodes, ...nodesLeafs];
+        return flattenedNodes;
     }
     _findTreeNode(value) {
-        return (this.flattenTreeNodes || []).find(item => item[this.thyPrimaryKey] === value);
+        return (this.flattenTreeNodes() || []).find(item => item[this.thyPrimaryKey()] === value);
     }
     setSelectedNodes() {
-        if (this.selectedValue) {
+        const isMultiple = this.thyMultiple();
+        const primaryKey = this.thyPrimaryKey();
+        const selectedValue = this.selectedValue();
+        const valueIsObject = this.valueIsObject();
+        if (selectedValue) {
             // 多选数据初始化
-            if (this.thyMultiple) {
-                if (this.selectedValue.length > 0) {
-                    if (this.valueIsObject && Object.keys(this.selectedValue[0]).indexOf(this.thyPrimaryKey) >= 0) {
-                        this.selectedNodes = this.selectedValue.map((item) => {
-                            return this._findTreeNode(item[this.thyPrimaryKey]);
-                        });
+            if (isMultiple) {
+                if (selectedValue.length > 0) {
+                    if (valueIsObject && Object.keys(selectedValue[0]).indexOf(primaryKey) >= 0) {
+                        this.selectedNodes.set(selectedValue.map((item) => {
+                            return this._findTreeNode(item[primaryKey]);
+                        }));
                     }
                     else {
-                        this.selectedNodes = this.selectedValue.map((item) => {
+                        this.selectedNodes.set(selectedValue.map((item) => {
                             return this._findTreeNode(item);
-                        });
+                        }));
                     }
                 }
             }
             else {
                 // 单选数据初始化
-                if (this.valueIsObject) {
-                    if (Object.keys(this.selectedValue).indexOf(this.thyPrimaryKey) >= 0) {
-                        this.selectedNode = this._findTreeNode(this.selectedValue[this.thyPrimaryKey]);
+                if (valueIsObject) {
+                    if (Object.keys(selectedValue).indexOf(primaryKey) >= 0) {
+                        this.selectedNode.set(this._findTreeNode(selectedValue[primaryKey]));
                     }
                 }
                 else {
-                    this.selectedNode = this._findTreeNode(this.selectedValue);
+                    this.selectedNode.set(this._findTreeNode(selectedValue));
                 }
             }
         }
         else {
-            this.selectedNodes = [];
-            this.selectedNode = null;
+            this.selectedNodes.set([]);
+            this.selectedNode.set(null);
         }
     }
     openSelectPop() {
-        if (this.thyDisable) {
+        if (this.thyDisable()) {
             return;
         }
-        this.cdkConnectOverlayWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
-        this.expandTreeSelectOptions = !this.expandTreeSelectOptions;
-        this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
+        this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
+        this.expandTreeSelectOptions.set(!this.expandTreeSelectOptions());
+        this.thyExpandStatusChange.emit(this.expandTreeSelectOptions());
     }
     close() {
-        if (this.expandTreeSelectOptions) {
-            this.expandTreeSelectOptions = false;
-            this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
+        if (this.expandTreeSelectOptions()) {
+            this.expandTreeSelectOptions.set(false);
+            this.thyExpandStatusChange.emit(false);
             this.onTouchedFn();
         }
     }
     clearSelectedValue(event) {
         event.stopPropagation();
-        this.selectedValue = null;
-        this.selectedNode = null;
-        this.selectedNodes = [];
-        this.onChangeFn(this.selectedValue);
+        this.selectedValue.set(null);
+        this.selectedNode.set(null);
+        this.selectedNodes.set([]);
+        this.onChangeFn(null);
     }
     _changeSelectValue() {
-        if (this.valueIsObject) {
-            this.selectedValue = this.thyMultiple ? this.selectedNodes : this.selectedNode;
+        const selectedNodes = this.selectedNodes();
+        const selectedNode = this.selectedNode();
+        if (this.valueIsObject()) {
+            this.selectedValue.set(this.thyMultiple() ? selectedNodes : selectedNode);
         }
         else {
-            this.selectedValue = this.thyMultiple
-                ? this.selectedNodes.map(item => item[this.thyPrimaryKey])
-                : this.selectedNode[this.thyPrimaryKey];
+            const value = this.thyMultiple() ? selectedNodes.map(item => item[this.thyPrimaryKey()]) : selectedNode[this.thyPrimaryKey()];
+            this.selectedValue.set(value);
         }
-        this.onChangeFn(this.selectedValue);
-        if (!this.thyMultiple) {
+        this.onChangeFn(this.selectedValue());
+        if (!this.thyMultiple()) {
             this.onTouchedFn();
         }
     }
@@ -366,31 +364,31 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
         if (event) {
             event.stopPropagation();
         }
-        if (this.thyDisable) {
+        if (this.thyDisable()) {
             return;
         }
-        if (this.thyMultiple) {
-            this.selectedNodes = produce(this.selectedNodes).remove((item) => {
-                return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
-            });
+        if (this.thyMultiple()) {
+            this.selectedNodes.set(produce(this.selectedNodes()).remove((item) => {
+                return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
+            }));
             this._changeSelectValue();
         }
     }
     selectNode(node) {
-        if (!this.thyMultiple) {
-            this.selectedNode = node;
-            this.expandTreeSelectOptions = false;
-            this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
+        if (!this.thyMultiple()) {
+            this.selectedNode.set(node);
+            this.expandTreeSelectOptions.set(false);
+            this.thyExpandStatusChange.emit(false);
             this._changeSelectValue();
         }
         else {
-            if (this.selectedNodes.find(item => {
-                return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
+            if (this.selectedNodes().find(item => {
+                return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
             })) {
                 this.removeSelectedNode(node);
             }
             else {
-                this.selectedNodes = produce(this.selectedNodes).add(node);
+                this.selectedNodes.set(produce(this.selectedNodes()).add(node));
                 this._changeSelectValue();
             }
         }
@@ -398,27 +396,28 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
     getNodeChildren(node) {
         const result = this.thyGetNodeChildren(node);
         if (result && result.subscribe) {
-            result.pipe().subscribe((data) => {
-                const nodes = this.flattenNodes(data, this.flattenTreeNodes, [...node.parentValues, node[this.thyPrimaryKey]]);
+            result.subscribe((data) => {
+                const flattenTreeNodes = this.flattenTreeNodes();
+                const nodes = this.flattenNodes(data, [...node.parentValues, node[this.thyPrimaryKey()]]);
                 const otherNodes = nodes.filter((item) => {
-                    return !this.flattenTreeNodes.find(hasItem => {
-                        return hasItem[this.thyPrimaryKey] === item[this.thyPrimaryKey];
+                    return !flattenTreeNodes.find(hasItem => {
+                        return hasItem[this.thyPrimaryKey()] === item[this.thyPrimaryKey()];
                     });
                 });
-                this.flattenTreeNodes = [...this.flattenTreeNodes, ...otherNodes];
+                this.flattenTreeNodes.set(flattenTreeNodes.concat(otherNodes));
                 node.children = data;
             });
             return result;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: "thyTreeNodes", thyVirtualScroll: ["thyVirtualScroll", "thyVirtualScroll", coerceBooleanProperty], thyPrimaryKey: "thyPrimaryKey", thyShowKey: "thyShowKey", thyChildCountKey: "thyChildCountKey", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDisable: ["thyDisable", "thyDisable", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyEmptyOptionsText: "thyEmptyOptionsText", thyHiddenNodeKey: "thyHiddenNodeKey", thyDisableNodeKey: "thyDisableNodeKey", thyAsyncNode: ["thyAsyncNode", "thyAsyncNode", coerceBooleanProperty], thyShowWholeName: ["thyShowWholeName", "thyShowWholeName", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyIconType: "thyIconType", thyHiddenNodeFn: "thyHiddenNodeFn", thyDisableNodeFn: "thyDisableNodeFn", thyGetNodeChildren: "thyGetNodeChildren" }, outputs: { thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select-custom": "this.treeSelectClass", "class.thy-select": "this.isTreeSelect", "class.menu-is-opened": "this.expandTreeSelectOptions", "class.thy-select-custom--multiple": "this.isMulti" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: { classPropertyName: "thyTreeNodes", publicName: "thyTreeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryKey: { classPropertyName: "thyPrimaryKey", publicName: "thyPrimaryKey", isSignal: true, isRequired: false, transformFunction: null }, thyShowKey: { classPropertyName: "thyShowKey", publicName: "thyShowKey", isSignal: true, isRequired: false, transformFunction: null }, thyChildCountKey: { classPropertyName: "thyChildCountKey", publicName: "thyChildCountKey", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyDisable: { classPropertyName: "thyDisable", publicName: "thyDisable", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyOptionsText: { classPropertyName: "thyEmptyOptionsText", publicName: "thyEmptyOptionsText", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeKey: { classPropertyName: "thyHiddenNodeKey", publicName: "thyHiddenNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisableNodeKey: { classPropertyName: "thyDisableNodeKey", publicName: "thyDisableNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyAsyncNode: { classPropertyName: "thyAsyncNode", publicName: "thyAsyncNode", isSignal: true, isRequired: false, transformFunction: null }, thyShowWholeName: { classPropertyName: "thyShowWholeName", publicName: "thyShowWholeName", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyIconType: { classPropertyName: "thyIconType", publicName: "thyIconType", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeFn: { classPropertyName: "thyHiddenNodeFn", publicName: "thyHiddenNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyDisableNodeFn: { classPropertyName: "thyDisableNodeFn", publicName: "thyDisableNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyGetNodeChildren: { classPropertyName: "thyGetNodeChildren", publicName: "thyGetNodeChildren", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "class.thy-select-custom--multiple": "thyMultiple()", "class.menu-is-opened": "expandTreeSelectOptions()", "attr.tabindex": "tabIndex" }, classAttribute: "thy-select-custom thy-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyTreeSelect),
                 multi: true
             }
-        ], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "customDisplayTemplate", first: true, predicate: ["customDisplayTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  cdkOverlayOrigin\n  thySelectControl\n  (click)=\"openSelectPop()\"\n  #origin=\"cdkOverlayOrigin\"\n  [thyPanelOpened]=\"expandTreeSelectOptions\"\n  [thySelectedOptions]=\"selectedValueObject\"\n  [thyIsMultiple]=\"thyMultiple\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"placeholder\"\n  [customDisplayTemplate]=\"customDisplayTemplate\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyDisabled]=\"thyDisable\"\n  (thyOnBlur)=\"onBlur($event)\"\n  (thyOnClear)=\"clearSelectedValue($event)\"\n  (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n  (thyOnSearch)=\"searchValue($event)\">\n  <ng-template #customDisplayTemplate let-node>\n    @if (thyTreeSelectTriggerDisplayRef) {\n      <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n    } @else {\n      {{ node[thyShowKey] }}\n    }\n  </ng-template>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n  [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n  (detach)=\"close()\">\n  <thy-tree-select-nodes\n    thyStopPropagation\n    [thyVirtualScroll]=\"thyVirtualScroll\"\n    [treeNodes]=\"thyVirtualScroll ? virtualTreeNodes : treeNodes\"\n    [@scaleYMotion]=\"'enter'\">\n  </thy-tree-select-nodes>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => ThySelectControl), selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i0.forwardRef(() => ThyTreeSelectNodes), selector: "thy-tree-select-nodes", inputs: ["treeNodes", "thyVirtualScroll"] }, { kind: "directive", type: i0.forwardRef(() => ThyStopPropagationDirective), selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], animations: [scaleYMotion] }); }
+        ], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true, isSignal: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "customDisplayTemplate", first: true, predicate: ["customDisplayTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  cdkOverlayOrigin\n  thySelectControl\n  (click)=\"openSelectPop()\"\n  #origin=\"cdkOverlayOrigin\"\n  [thyPanelOpened]=\"expandTreeSelectOptions()\"\n  [thySelectedOptions]=\"selectedValueObject()\"\n  [thyIsMultiple]=\"thyMultiple()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceholder()\"\n  [customDisplayTemplate]=\"customDisplayTemplate\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyDisabled]=\"thyDisable()\"\n  (thyOnBlur)=\"onBlur($event)\"\n  (thyOnClear)=\"clearSelectedValue($event)\"\n  (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n  (thyOnSearch)=\"searchValue($event)\">\n  <ng-template #customDisplayTemplate let-node>\n    @if (thyTreeSelectTriggerDisplayRef()) {\n      <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n    } @else {\n      {{ node[thyShowKey()] }}\n    }\n  </ng-template>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n  [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n  (detach)=\"close()\">\n  <thy-tree-select-nodes\n    thyStopPropagation\n    [thyVirtualScroll]=\"thyVirtualScroll()\"\n    [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n    [@scaleYMotion]=\"'enter'\">\n  </thy-tree-select-nodes>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => ThySelectControl), selector: "thy-select-control,[thySelectControl]", inputs: ["inputValue", "thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["inputValueChange", "thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i0.forwardRef(() => ThyTreeSelectNodes), selector: "thy-tree-select-nodes", inputs: ["treeNodes", "thyVirtualScroll"] }, { kind: "directive", type: i0.forwardRef(() => ThyStopPropagationDirective), selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], animations: [scaleYMotion] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, decorators: [{
             type: Component,
@@ -436,86 +435,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         forwardRef(() => ThyTreeSelectNodes),
                         ThyStopPropagationDirective
                     ], host: {
+                        class: 'thy-select-custom thy-select',
+                        '[class.thy-select-custom--multiple]': 'thyMultiple()',
+                        '[class.menu-is-opened]': 'expandTreeSelectOptions()',
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, animations: [scaleYMotion], template: "<div\n  cdkOverlayOrigin\n  thySelectControl\n  (click)=\"openSelectPop()\"\n  #origin=\"cdkOverlayOrigin\"\n  [thyPanelOpened]=\"expandTreeSelectOptions\"\n  [thySelectedOptions]=\"selectedValueObject\"\n  [thyIsMultiple]=\"thyMultiple\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"placeholder\"\n  [customDisplayTemplate]=\"customDisplayTemplate\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyDisabled]=\"thyDisable\"\n  (thyOnBlur)=\"onBlur($event)\"\n  (thyOnClear)=\"clearSelectedValue($event)\"\n  (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n  (thyOnSearch)=\"searchValue($event)\">\n  <ng-template #customDisplayTemplate let-node>\n    @if (thyTreeSelectTriggerDisplayRef) {\n      <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n    } @else {\n      {{ node[thyShowKey] }}\n    }\n  </ng-template>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n  [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n  (detach)=\"close()\">\n  <thy-tree-select-nodes\n    thyStopPropagation\n    [thyVirtualScroll]=\"thyVirtualScroll\"\n    [treeNodes]=\"thyVirtualScroll ? virtualTreeNodes : treeNodes\"\n    [@scaleYMotion]=\"'enter'\">\n  </thy-tree-select-nodes>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { treeSelectClass: [{
-                type: HostBinding,
-                args: ['class.thy-select-custom']
-            }], isTreeSelect: [{
-                type: HostBinding,
-                args: ['class.thy-select']
-            }], expandTreeSelectOptions: [{
-                type: HostBinding,
-                args: ['class.menu-is-opened']
-            }], isMulti: [{
-                type: HostBinding,
-                args: ['class.thy-select-custom--multiple']
-            }], thyTreeSelectTriggerDisplayRef: [{
-                type: ContentChild,
-                args: ['thyTreeSelectTriggerDisplay']
-            }], treeNodeTemplateRef: [{
-                type: ContentChild,
-                args: ['treeNodeTemplate']
-            }], cdkOverlayOrigin: [{
-                type: ViewChild,
-                args: [CdkOverlayOrigin, { static: true }]
-            }], cdkConnectedOverlay: [{
-                type: ViewChild,
-                args: [CdkConnectedOverlay, { static: true }]
-            }], customDisplayTemplate: [{
-                type: ViewChild,
-                args: ['customDisplayTemplate', { static: true }]
-            }], thyTreeNodes: [{
-                type: Input
-            }], thyVirtualScroll: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPrimaryKey: [{
-                type: Input
-            }], thyShowKey: [{
-                type: Input
-            }], thyChildCountKey: [{
-                type: Input
-            }], thyAllowClear: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyMultiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyDisable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyPlaceholder: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyEmptyOptionsText: [{
-                type: Input
-            }], thyHiddenNodeKey: [{
-                type: Input
-            }], thyDisableNodeKey: [{
-                type: Input
-            }], thyAsyncNode: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowWholeName: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyShowSearch: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyIconType: [{
-                type: Input
-            }], thyHiddenNodeFn: [{
+                    }, animations: [scaleYMotion], template: "<div\n  cdkOverlayOrigin\n  thySelectControl\n  (click)=\"openSelectPop()\"\n  #origin=\"cdkOverlayOrigin\"\n  [thyPanelOpened]=\"expandTreeSelectOptions()\"\n  [thySelectedOptions]=\"selectedValueObject()\"\n  [thyIsMultiple]=\"thyMultiple()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceholder()\"\n  [customDisplayTemplate]=\"customDisplayTemplate\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyDisabled]=\"thyDisable()\"\n  (thyOnBlur)=\"onBlur($event)\"\n  (thyOnClear)=\"clearSelectedValue($event)\"\n  (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n  (thyOnSearch)=\"searchValue($event)\">\n  <ng-template #customDisplayTemplate let-node>\n    @if (thyTreeSelectTriggerDisplayRef()) {\n      <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n    } @else {\n      {{ node[thyShowKey()] }}\n    }\n  </ng-template>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n  [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n  (detach)=\"close()\">\n  <thy-tree-select-nodes\n    thyStopPropagation\n    [thyVirtualScroll]=\"thyVirtualScroll()\"\n    [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n    [@scaleYMotion]=\"'enter'\">\n  </thy-tree-select-nodes>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyHiddenNodeFn: [{
                 type: Input
             }], thyDisableNodeFn: [{
                 type: Input
             }], thyGetNodeChildren: [{
                 type: Input
-            }], thyExpandStatusChange: [{
-                type: Output
             }] } });
 const DEFAULT_ITEM_SIZE = 40;
 /**
@@ -525,68 +457,73 @@ class ThyTreeSelectNodes {
     constructor() {
         this.parent = inject(ThyTreeSelect);
         this.emptyIcon = injectPanelEmptyIcon();
-        this.nodeList = [];
-        this.thyVirtualScroll = false;
-        this.primaryKey = this.parent.thyPrimaryKey;
-        this.showKey = this.parent.thyShowKey;
-        this.isMultiple = this.parent.thyMultiple;
-        this.valueIsObject = this.parent.valueIsObject;
-        this.selectedValue = this.parent.selectedValue;
-        this.childCountKey = this.parent.thyChildCountKey;
-        this.treeNodeTemplateRef = this.parent.treeNodeTemplateRef;
+        this.treeNodes = input([]);
+        this.thyVirtualScroll = input(false);
+        this.isMultiple = computed(() => this.parent.thyMultiple());
+        this.childCountKey = computed(() => this.parent.thyChildCountKey());
+        this.treeNodeTemplateRef = computed(() => this.parent.treeNodeTemplateRef());
         this.defaultItemSize = DEFAULT_ITEM_SIZE;
-        this.thyVirtualHeight = null;
-        this.hasNodeChildren = false;
-    }
-    set treeNodes(value) {
-        const treeSelectHeight = this.defaultItemSize * value.length;
-        // 父级设置了max-height:300 & padding:10 0; 故此处最多设置280，否则将出现滚动条
-        this.thyVirtualHeight = treeSelectHeight > 300 ? '280px' : `${treeSelectHeight}px`;
-        this.nodeList = value;
-        this.hasNodeChildren = this.nodeList.every(item => !item.hasOwnProperty('children') || (!item?.children?.length && !item?.childCount));
-    }
-    ngOnInit() {
-        this.class = this.isMultiple ? 'thy-tree-select-dropdown thy-tree-select-dropdown-multiple' : 'thy-tree-select-dropdown';
+        this.thyPrimaryKey = computed(() => this.parent.thyPrimaryKey());
+        this.selectedNodes = computed(() => this.parent.selectedNodes());
+        this.selectedNode = computed(() => this.parent.selectedNode());
+        this.hiddenNodeKey = computed(() => this.parent.thyHiddenNodeKey());
+        this.disableNodeKey = computed(() => this.parent.thyDisableNodeKey());
+        this.thyVirtualHeight = computed(() => {
+            const treeSelectHeight = this.defaultItemSize * this.treeNodes().length;
+            // 父级设置了max-height:300 & padding:10 0; 故此处最多设置280，否则将出现滚动条
+            return treeSelectHeight > 300 ? '280px' : `${treeSelectHeight}px`;
+        });
+        this.hasNodeChildren = computed(() => {
+            return this.treeNodes().every(item => !item.hasOwnProperty('children') || (!item?.children?.length && !item?.childCount));
+        });
     }
     treeNodeIsSelected(node) {
-        if (this.parent.thyMultiple) {
-            return (this.parent.selectedNodes || []).find(item => {
-                return item[this.primaryKey] === node[this.primaryKey];
+        const primaryKey = this.thyPrimaryKey();
+        const isMultiple = this.isMultiple();
+        if (isMultiple) {
+            const selectedNodes = this.selectedNodes() || [];
+            return selectedNodes.find(item => {
+                return item[primaryKey] === node[primaryKey];
             });
         }
         else {
-            return this.parent.selectedNode && this.parent.selectedNode[this.primaryKey] === node[this.primaryKey];
+            return this.selectedNode() && this.selectedNode()[primaryKey] === node[primaryKey];
         }
     }
     treeNodeIsHidden(node) {
-        if (this.parent.thyHiddenNodeKey) {
-            return node[this.parent.thyHiddenNodeKey];
+        const hiddenNodeKey = this.hiddenNodeKey();
+        if (hiddenNodeKey) {
+            return node[hiddenNodeKey];
         }
-        if (this.parent.thyHiddenNodeFn) {
-            return this.parent.thyHiddenNodeFn(node);
+        const thyHiddenNodeFn = this.parent.thyHiddenNodeFn;
+        if (thyHiddenNodeFn) {
+            return thyHiddenNodeFn(node);
         }
         return false;
     }
     treeNodeIsDisable(node) {
-        if (this.parent.thyDisableNodeKey) {
-            return node[this.parent.thyDisableNodeKey];
+        const disableNodeKey = this.disableNodeKey();
+        if (disableNodeKey) {
+            return node[disableNodeKey];
         }
-        if (this.parent.thyDisableNodeFn) {
-            return this.parent.thyDisableNodeFn(node);
+        const thyDisableNodeFn = this.parent.thyDisableNodeFn;
+        if (thyDisableNodeFn) {
+            return thyDisableNodeFn(node);
         }
         return false;
     }
     treeNodeIsExpand(node) {
+        const isMultiple = this.isMultiple();
+        const primaryKey = this.thyPrimaryKey();
         let isSelectedNodeParent = false;
-        if (this.parent.thyMultiple) {
-            isSelectedNodeParent = !!(this.parent.selectedNodes || []).find(item => {
-                return item.parentValues.indexOf(node[this.primaryKey]) > -1;
+        if (isMultiple) {
+            const selectedNodes = this.selectedNodes() || [];
+            isSelectedNodeParent = !!selectedNodes.find(item => {
+                return item.parentValues.indexOf(node[primaryKey]) > -1;
             });
         }
         else {
-            isSelectedNodeParent = this.parent.selectedNode
-                ? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1
-                : false;
+            isSelectedNodeParent = this.selectedNode() ? this.selectedNode().parentValues.indexOf(node[primaryKey]) > -1 : false;
         }
         const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent);
         node.expand = isExpand;
@@ -613,13 +550,13 @@ class ThyTreeSelectNodes {
                 node.expand = true;
             }
         }
-        if (node.expand && this.parent.thyAsyncNode) {
+        if (node.expand && this.parent.thyAsyncNode()) {
             this.getNodeChildren(node).subscribe(() => {
                 this.parent.setPosition();
             });
         }
         // this.parent.setPosition();
-        if (this.thyVirtualScroll) {
+        if (this.thyVirtualScroll()) {
             this.parent.buildFlattenTreeNodes();
         }
     }
@@ -627,7 +564,7 @@ class ThyTreeSelectNodes {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: "treeNodes", thyVirtualScroll: "thyVirtualScroll" }, host: { properties: { "attr.tabindex": "-1", "class": "this.class" } }, ngImport: i0, template: "@if (nodeList?.length > 0) {\n  <div class=\"thy-tree-select-options\">\n    <div class=\"thy-tree-select-node\">\n      @if (!thyVirtualScroll) {\n        @for (node of nodeList; track $index) {\n          <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      }\n      @if (thyVirtualScroll) {\n        <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"thyVirtualHeight\">\n          <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n            <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n} @else {\n  <thy-empty\n    class=\"thy-select-empty-content\"\n    thySize=\"sm\"\n    [thyMessage]=\"parent.thyEmptyOptionsText\"\n    [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n  <ng-container>\n    @if (!treeNodeIsHidden(node)) {\n      <a\n        class=\"thy-option-item\"\n        [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasNodeChildren }\"\n        [class.disabled]=\"treeNodeIsDisable(node)\"\n        [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n        (click)=\"selectTreeNode($event, node)\">\n        <span\n          class=\"thy-tree-select-option-icon\"\n          [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey] && node[childCountKey] > 0))\"\n          (click)=\"nodeExpandToggle($event, node)\">\n          <thy-icon\n            class=\"node-expand-icon\"\n            [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n        </span>\n        <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasNodeChildren }\">\n          @if (treeNodeTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          } @else {\n            <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n          }\n        </span>\n        @if (isMultiple) {\n          <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n        }\n      </a>\n    }\n    @if (!thyVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n      @for (node of node.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n      }\n    }\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: { classPropertyName: "treeNodes", publicName: "treeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "-1", "class.thy-tree-select-dropdown-multiple": "isMultiple()" }, classAttribute: "thy-tree-select-dropdown" }, ngImport: i0, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n  <div class=\"thy-tree-select-options\">\n    <div class=\"thy-tree-select-node\">\n      @if (!isVirtualScroll) {\n        @for (node of nodeList; track $index) {\n          <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      }\n      @if (isVirtualScroll) {\n        <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n          <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n            <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n} @else {\n  <thy-empty\n    class=\"thy-select-empty-content\"\n    thySize=\"sm\"\n    [thyMessage]=\"parent.thyEmptyOptionsText()\"\n    [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n  <ng-container>\n    @if (!treeNodeIsHidden(node)) {\n      <a\n        class=\"thy-option-item\"\n        [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n        [class.disabled]=\"treeNodeIsDisable(node)\"\n        [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n        (click)=\"selectTreeNode($event, node)\">\n        <span\n          class=\"thy-tree-select-option-icon\"\n          [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n          (click)=\"nodeExpandToggle($event, node)\">\n          <thy-icon\n            class=\"node-expand-icon\"\n            [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n        </span>\n        <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n          @if (treeNodeTemplateRef()) {\n            <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          } @else {\n            <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n          }\n        </span>\n        @if (isMultiple()) {\n          <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n        }\n      </a>\n    }\n    @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n      @for (node of node.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n      }\n    }\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, decorators: [{
             type: Component,
@@ -642,16 +579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThyIcon,
                         ThyFlexibleText
                     ], host: {
-                        '[attr.tabindex]': '-1'
-                    }, template: "@if (nodeList?.length > 0) {\n  <div class=\"thy-tree-select-options\">\n    <div class=\"thy-tree-select-node\">\n      @if (!thyVirtualScroll) {\n        @for (node of nodeList; track $index) {\n          <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      }\n      @if (thyVirtualScroll) {\n        <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"thyVirtualHeight\">\n          <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n            <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n} @else {\n  <thy-empty\n    class=\"thy-select-empty-content\"\n    thySize=\"sm\"\n    [thyMessage]=\"parent.thyEmptyOptionsText\"\n    [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n  <ng-container>\n    @if (!treeNodeIsHidden(node)) {\n      <a\n        class=\"thy-option-item\"\n        [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasNodeChildren }\"\n        [class.disabled]=\"treeNodeIsDisable(node)\"\n        [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n        (click)=\"selectTreeNode($event, node)\">\n        <span\n          class=\"thy-tree-select-option-icon\"\n          [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey] && node[childCountKey] > 0))\"\n          (click)=\"nodeExpandToggle($event, node)\">\n          <thy-icon\n            class=\"node-expand-icon\"\n            [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n        </span>\n        <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasNodeChildren }\">\n          @if (treeNodeTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          } @else {\n            <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n          }\n        </span>\n        @if (isMultiple) {\n          <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n        }\n      </a>\n    }\n    @if (!thyVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n      @for (node of node.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n      }\n    }\n  </ng-container>\n</ng-template>\n" }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], treeNodes: [{
-                type: Input
-            }], thyVirtualScroll: [{
-                type: Input
-            }] } });
+                        '[attr.tabindex]': '-1',
+                        class: 'thy-tree-select-dropdown',
+                        '[class.thy-tree-select-dropdown-multiple]': 'isMultiple()'
+                    }, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n  <div class=\"thy-tree-select-options\">\n    <div class=\"thy-tree-select-node\">\n      @if (!isVirtualScroll) {\n        @for (node of nodeList; track $index) {\n          <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n        }\n      }\n      @if (isVirtualScroll) {\n        <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n          <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n            <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n} @else {\n  <thy-empty\n    class=\"thy-select-empty-content\"\n    thySize=\"sm\"\n    [thyMessage]=\"parent.thyEmptyOptionsText()\"\n    [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n  <ng-container>\n    @if (!treeNodeIsHidden(node)) {\n      <a\n        class=\"thy-option-item\"\n        [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n        [class.disabled]=\"treeNodeIsDisable(node)\"\n        [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n        (click)=\"selectTreeNode($event, node)\">\n        <span\n          class=\"thy-tree-select-option-icon\"\n          [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n          (click)=\"nodeExpandToggle($event, node)\">\n          <thy-icon\n            class=\"node-expand-icon\"\n            [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n        </span>\n        <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n          @if (treeNodeTemplateRef()) {\n            <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n          } @else {\n            <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n          }\n        </span>\n        @if (isMultiple()) {\n          <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n        }\n      </a>\n    }\n    @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n      @for (node of node.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n      }\n    }\n  </ng-container>\n</ng-template>\n" }]
+        }] });
 
 class ThyTreeSelectModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }