@ali-hm/angular-tree-component 20.3.3 → 21.0.0

package/fesm2022/ali-hm-angular-tree-component.mjs

@@ -1,44 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, ViewContainerRef, Input, Directive, Injectable, ViewEncapsulation, Component, ElementRef, Renderer2, NgZone, EventEmitter, HostListener, Output, forwardRef, ViewChild, ContentChild, NgModule } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgFor, CommonModule } from '@angular/common';
-import { autorun, reaction, computed as computed$1, observable as observable$1, action as action$1 } from 'mobx';
-
-class TreeMobxAutorunDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.viewContainer = inject(ViewContainerRef);
-        this.templateBindings = {};
-    }
-    ngOnInit() {
-        this.view = this.viewContainer.createEmbeddedView(this.templateRef);
-        if (this.dispose) {
-            this.dispose();
-        }
-        if (this.shouldDetach()) {
-            this.view.detach();
-        }
-        this.autoDetect(this.view);
-    }
-    shouldDetach() {
-        return this.treeMobxAutorun && this.treeMobxAutorun.detach;
-    }
-    autoDetect(view) {
-        this.dispose = autorun(() => view.detectChanges());
-    }
-    ngOnDestroy() {
-        if (this.dispose) {
-            this.dispose();
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeMobxAutorunDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: TreeMobxAutorunDirective, isStandalone: true, selector: "[treeMobxAutorun]", inputs: { treeMobxAutorun: "treeMobxAutorun" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeMobxAutorunDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[treeMobxAutorun]' }]
-        }], propDecorators: { treeMobxAutorun: [{
-                type: Input
-            }] } });
+import { signal, effect, Injectable, inject, input, ViewEncapsulation, Component, ElementRef, Injector, Renderer2, afterNextRender, output, HostListener, Directive, computed, TemplateRef, ViewContainerRef, forwardRef, EventEmitter, Output, Input, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 
 const KEYS = {
     LEFT: 37,
@@ -219,39 +181,37 @@ const TREE_EVENTS = {
     stateChange: 'stateChange'
 };
 
-var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 class TreeNode {
+    // Public getters/setters for API compatibility
+    get children() { return this._children(); }
+    set children(value) { this._children.set(value); }
+    get index() { return this._index(); }
+    set index(value) { this._index.set(value); }
+    get position() { return this._position(); }
+    set position(value) { this._position.set(value); }
+    get height() { return this._height(); }
+    set height(value) { this._height.set(value); }
+    // Computed properties
     get isHidden() { return this.treeModel.isHidden(this); }
-    ;
     get isExpanded() { return this.treeModel.isExpanded(this); }
-    ;
     get isActive() { return this.treeModel.isActive(this); }
-    ;
     get isFocused() { return this.treeModel.isNodeFocused(this); }
-    ;
     get isSelected() {
         if (this.isSelectable()) {
             return this.treeModel.isSelected(this);
         }
         else {
-            return this.children.some((node) => node.isSelected);
+            return this.children?.some((node) => node.isSelected);
         }
     }
-    ;
     get isAllSelected() {
         if (this.isSelectable()) {
             return this.treeModel.isSelected(this);
         }
         else {
-            return this.children.every((node) => node.isAllSelected);
+            return this.children?.every((node) => node.isAllSelected);
         }
     }
-    ;
     get isPartiallySelected() {
         return this.isSelected && !this.isAllSelected;
     }
@@ -271,7 +231,12 @@ class TreeNode {
         this.data = data;
         this.parent = parent;
         this.treeModel = treeModel;
-        this.position = 0;
+        this._isLoadingChildren = false;
+        // Private signals
+        this._children = signal(undefined, ...(ngDevMode ? [{ debugName: "_children" }] : []));
+        this._index = signal(undefined, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+        this._position = signal(0, ...(ngDevMode ? [{ debugName: "_position" }] : []));
+        this._height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
         this.allowDrop = (element, $event) => {
             return this.options.allowDrop(element, { parent: this, index: 0 }, $event);
         };
@@ -452,25 +417,29 @@ class TreeNode {
     setIsExpanded(value) {
         if (this.hasChildren) {
             this.treeModel.setExpandedNode(this, value);
+            // Load children when expanding if they haven't been loaded yet
+            if (value && !this.children && this.hasChildren && !this._isLoadingChildren) {
+                this._isLoadingChildren = true;
+                this.loadNodeChildren().finally(() => {
+                    this._isLoadingChildren = false;
+                });
+            }
         }
         return this;
     }
     ;
     autoLoadChildren() {
-        this.handler =
-            reaction(() => this.isExpanded, (isExpanded) => {
-                if (!this.children && this.hasChildren && isExpanded) {
-                    this.loadNodeChildren();
-                }
-            }, { fireImmediately: true });
+        // Instead of using effect, we'll load children when the node is expanded
+        // This is handled by the toggleExpanded and setIsExpanded methods
+        // Check immediately if we should load
+        if (this.isExpanded && !this.children && this.hasChildren) {
+            this.loadNodeChildren();
+        }
     }
     dispose() {
         if (this.children) {
             this.children.forEach((child) => child.dispose());
         }
-        if (this.handler) {
-            this.handler();
-        }
         this.parent = null;
         this.children = null;
     }
@@ -555,77 +524,62 @@ class TreeNode {
             .map((c, index) => new TreeNode(c, this, this.treeModel, index));
     }
 }
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isHidden", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isExpanded", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isActive", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isFocused", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isSelected", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isAllSelected", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "isPartiallySelected", null);
-__decorate$3([
-    observable$1
-], TreeNode.prototype, "children", void 0);
-__decorate$3([
-    observable$1
-], TreeNode.prototype, "index", void 0);
-__decorate$3([
-    observable$1
-], TreeNode.prototype, "position", void 0);
-__decorate$3([
-    observable$1
-], TreeNode.prototype, "height", void 0);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "level", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "path", null);
-__decorate$3([
-    computed$1
-], TreeNode.prototype, "visibleChildren", null);
-__decorate$3([
-    action$1
-], TreeNode.prototype, "setIsSelected", null);
-__decorate$3([
-    action$1
-], TreeNode.prototype, "_initChildren", null);
 function uuid() {
     return Math.floor(Math.random() * 10000000000000);
 }
 
-var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 class TreeModel {
     constructor() {
         this.options = new TreeOptions();
         this.eventNames = Object.keys(TREE_EVENTS);
-        this.expandedNodeIds = {};
-        this.selectedLeafNodeIds = {};
-        this.activeNodeIds = {};
-        this.hiddenNodeIds = {};
-        this.focusedNodeId = null;
+        // Private signals
+        this._roots = signal(undefined, ...(ngDevMode ? [{ debugName: "_roots" }] : []));
+        this._expandedNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_expandedNodeIds" }] : []));
+        this._selectedLeafNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_selectedLeafNodeIds" }] : []));
+        this._activeNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_activeNodeIds" }] : []));
+        this._hiddenNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_hiddenNodeIds" }] : []));
+        this._focusedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "_focusedNodeId" }] : []));
+        this._virtualRoot = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualRoot" }] : []));
         this.firstUpdate = true;
         this.subscriptions = [];
     }
     static { this.focusedTree = null; }
+    // Public getters/setters to maintain API compatibility
+    get roots() { return this._roots(); }
+    set roots(value) { this._roots.set(value); }
+    get virtualRoot() { return this._virtualRoot(); }
+    get focusedNode() {
+        const id = this._focusedNodeId();
+        return id ? this.getNodeById(id) : null;
+    }
+    get expandedNodes() {
+        const ids = this._expandedNodeIds();
+        const nodes = Object.keys(ids)
+            .filter((id) => ids[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get activeNodes() {
+        const ids = this._activeNodeIds();
+        const nodes = Object.keys(ids)
+            .filter((id) => ids[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get hiddenNodes() {
+        const ids = this._hiddenNodeIds();
+        const nodes = Object.keys(ids)
+            .filter((id) => ids[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
+    get selectedLeafNodes() {
+        const ids = this._selectedLeafNodeIds();
+        const nodes = Object.keys(ids)
+            .filter((id) => ids[id])
+            .map((id) => this.getNodeById(id));
+        return nodes.filter(Boolean);
+    }
     // events
     fireEvent(event) {
         event.treeModel = this;
@@ -647,7 +601,7 @@ class TreeModel {
         return this.activeNodes;
     }
     getVisibleRoots() {
-        return this.virtualRoot.visibleChildren;
+        return this._virtualRoot()?.visibleChildren;
     }
     getFirstRoot(skipHidden = false) {
         const root = skipHidden ? this.getVisibleRoots() : this.roots;
@@ -664,40 +618,14 @@ class TreeModel {
         return this.focusedNode === node;
     }
     isEmptyTree() {
-        return this.roots && this.roots.length === 0;
-    }
-    get focusedNode() {
-        return this.focusedNodeId ? this.getNodeById(this.focusedNodeId) : null;
-    }
-    get expandedNodes() {
-        const nodes = Object.keys(this.expandedNodeIds)
-            .filter((id) => this.expandedNodeIds[id])
-            .map((id) => this.getNodeById(id));
-        return nodes.filter(Boolean);
-    }
-    get activeNodes() {
-        const nodes = Object.keys(this.activeNodeIds)
-            .filter((id) => this.activeNodeIds[id])
-            .map((id) => this.getNodeById(id));
-        return nodes.filter(Boolean);
-    }
-    get hiddenNodes() {
-        const nodes = Object.keys(this.hiddenNodeIds)
-            .filter((id) => this.hiddenNodeIds[id])
-            .map((id) => this.getNodeById(id));
-        return nodes.filter(Boolean);
-    }
-    get selectedLeafNodes() {
-        const nodes = Object.keys(this.selectedLeafNodeIds)
-            .filter((id) => this.selectedLeafNodeIds[id])
-            .map((id) => this.getNodeById(id));
-        return nodes.filter(Boolean);
+        const rootNodes = this.roots;
+        return rootNodes && rootNodes.length === 0;
     }
     // locating nodes
     getNodeByPath(path, startNode = null) {
         if (!path)
             return null;
-        startNode = startNode || this.virtualRoot;
+        startNode = startNode || this._virtualRoot();
         if (path.length === 0)
             return startNode;
         if (!startNode.children)
@@ -713,7 +641,7 @@ class TreeModel {
         return this.getNodeBy((node) => node.id.toString() === idStr);
     }
     getNodeBy(predicate, startNode = null) {
-        startNode = startNode || this.virtualRoot;
+        startNode = startNode || this._virtualRoot();
         if (!startNode.children)
             return null;
         const found = startNode.children.find(predicate);
@@ -729,16 +657,16 @@ class TreeModel {
         }
     }
     isExpanded(node) {
-        return this.expandedNodeIds[node.id];
+        return this._expandedNodeIds()[node.id];
     }
     isHidden(node) {
-        return this.hiddenNodeIds[node.id];
+        return this._hiddenNodeIds()[node.id];
     }
     isActive(node) {
-        return this.activeNodeIds[node.id];
+        return this._activeNodeIds()[node.id];
     }
     isSelected(node) {
-        return this.selectedLeafNodeIds[node.id];
+        return this._selectedLeafNodeIds()[node.id];
     }
     ngOnDestroy() {
         this.dispose();
@@ -746,8 +674,9 @@ class TreeModel {
     }
     dispose() {
         // Dispose reactions of the replaced nodes
-        if (this.virtualRoot) {
-            this.virtualRoot.dispose();
+        const vRoot = this._virtualRoot();
+        if (vRoot) {
+            vRoot.dispose();
         }
     }
     unsubscribeAll() {
@@ -775,11 +704,13 @@ class TreeModel {
             [this.options.childrenField]: this.nodes
         };
         this.dispose();
-        this.virtualRoot = new TreeNode(virtualRootConfig, null, this, 0);
-        this.roots = this.virtualRoot.children;
+        const newVirtualRoot = new TreeNode(virtualRootConfig, null, this, 0);
+        this._virtualRoot.set(newVirtualRoot);
+        this.roots = newVirtualRoot.children;
         // Fire event:
+        const currentRoots = this.roots;
         if (this.firstUpdate) {
-            if (this.roots) {
+            if (currentRoots) {
                 this.firstUpdate = false;
                 this._calculateExpandedNodes();
             }
@@ -789,7 +720,7 @@ class TreeModel {
         }
     }
     setFocusedNode(node) {
-        this.focusedNodeId = node ? node.id : null;
+        this._focusedNodeId.set(node ? node.id : null);
     }
     setFocus(value) {
         TreeModel.focusedTree = value ? this : null;
@@ -851,7 +782,7 @@ class TreeModel {
         }
     }
     setSelectedNode(node, value) {
-        this.selectedLeafNodeIds = Object.assign({}, this.selectedLeafNodeIds, { [node.id]: value });
+        this._selectedLeafNodeIds.update(ids => ({ ...ids, [node.id]: value }));
         if (value) {
             node.focus();
             this.fireEvent({ eventName: TREE_EVENTS.select, node });
@@ -861,7 +792,7 @@ class TreeModel {
         }
     }
     setExpandedNode(node, value) {
-        this.expandedNodeIds = Object.assign({}, this.expandedNodeIds, { [node.id]: value });
+        this._expandedNodeIds.update(ids => ({ ...ids, [node.id]: value }));
         this.fireEvent({ eventName: TREE_EVENTS.toggleExpanded, node, isExpanded: value });
     }
     expandAll() {
@@ -871,12 +802,14 @@ class TreeModel {
         this.roots.forEach((root) => root.collapseAll());
     }
     setIsHidden(node, value) {
-        this.hiddenNodeIds = Object.assign({}, this.hiddenNodeIds, { [node.id]: value });
+        this._hiddenNodeIds.update(ids => ({ ...ids, [node.id]: value }));
     }
     setHiddenNodeIds(nodeIds) {
-        this.hiddenNodeIds = nodeIds.reduce((hiddenNodeIds, id) => Object.assign(hiddenNodeIds, {
+        const ids = nodeIds.reduce((hiddenNodeIds, id) => ({
+            ...hiddenNodeIds,
             [id]: true
         }), {});
+        this._hiddenNodeIds.set(ids);
     }
     performKeyAction(node, $event) {
         const keyAction = this.options.actionMapping.keys[$event.keyCode];
@@ -908,11 +841,11 @@ class TreeModel {
         }
         const ids = {};
         this.roots.forEach((node) => this._filterNode(ids, node, filterFn, autoShow));
-        this.hiddenNodeIds = ids;
+        this._hiddenNodeIds.set(ids);
         this.fireEvent({ eventName: TREE_EVENTS.changeFilter });
     }
     clearFilter() {
-        this.hiddenNodeIds = {};
+        this._hiddenNodeIds.set({});
         this.fireEvent({ eventName: TREE_EVENTS.changeFilter });
     }
     moveNode(node, to) {
@@ -960,26 +893,24 @@ class TreeModel {
     }
     getState() {
         return {
-            expandedNodeIds: this.expandedNodeIds,
-            selectedLeafNodeIds: this.selectedLeafNodeIds,
-            activeNodeIds: this.activeNodeIds,
-            hiddenNodeIds: this.hiddenNodeIds,
-            focusedNodeId: this.focusedNodeId
+            expandedNodeIds: this._expandedNodeIds(),
+            selectedLeafNodeIds: this._selectedLeafNodeIds(),
+            activeNodeIds: this._activeNodeIds(),
+            hiddenNodeIds: this._hiddenNodeIds(),
+            focusedNodeId: this._focusedNodeId()
         };
     }
     setState(state) {
         if (!state)
             return;
-        Object.assign(this, {
-            expandedNodeIds: state.expandedNodeIds || {},
-            selectedLeafNodeIds: state.selectedLeafNodeIds || {},
-            activeNodeIds: state.activeNodeIds || {},
-            hiddenNodeIds: state.hiddenNodeIds || {},
-            focusedNodeId: state.focusedNodeId
-        });
+        this._expandedNodeIds.set(state.expandedNodeIds || {});
+        this._selectedLeafNodeIds.set(state.selectedLeafNodeIds || {});
+        this._activeNodeIds.set(state.activeNodeIds || {});
+        this._hiddenNodeIds.set(state.hiddenNodeIds || {});
+        this._focusedNodeId.set(state.focusedNodeId);
     }
     subscribeToState(fn) {
-        autorun(() => fn(this.getState()));
+        effect(() => fn(this.getState()));
     }
     canMoveNode(node, to, fromIndex = undefined) {
         const fromNodeIndex = fromIndex || node.getIndexInParent();
@@ -1015,9 +946,9 @@ class TreeModel {
         return isVisible;
     }
     _calculateExpandedNodes(startNode = null) {
-        startNode = startNode || this.virtualRoot;
+        startNode = startNode || this._virtualRoot();
         if (startNode.data[this.options.isExpandedField]) {
-            this.expandedNodeIds = Object.assign({}, this.expandedNodeIds, { [startNode.id]: true });
+            this._expandedNodeIds.update(ids => ({ ...ids, [startNode.id]: true }));
         }
         if (startNode.children) {
             startNode.children.forEach((child) => this._calculateExpandedNodes(child));
@@ -1032,120 +963,21 @@ class TreeModel {
             this.fireEvent({ eventName: TREE_EVENTS.nodeDeactivate, node: activeNode }); // For IE11
         });
         if (value) {
-            this.activeNodeIds = { [node.id]: true };
+            this._activeNodeIds.set({ [node.id]: true });
         }
         else {
-            this.activeNodeIds = {};
+            this._activeNodeIds.set({});
         }
     }
     _setActiveNodeMulti(node, value) {
-        this.activeNodeIds = Object.assign({}, this.activeNodeIds, { [node.id]: value });
+        this._activeNodeIds.update(ids => ({ ...ids, [node.id]: value }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModel }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModel }); }
 }
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "roots", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "expandedNodeIds", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "selectedLeafNodeIds", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "activeNodeIds", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "hiddenNodeIds", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "focusedNodeId", void 0);
-__decorate$2([
-    observable$1
-], TreeModel.prototype, "virtualRoot", void 0);
-__decorate$2([
-    computed$1
-], TreeModel.prototype, "focusedNode", null);
-__decorate$2([
-    computed$1
-], TreeModel.prototype, "expandedNodes", null);
-__decorate$2([
-    computed$1
-], TreeModel.prototype, "activeNodes", null);
-__decorate$2([
-    computed$1
-], TreeModel.prototype, "hiddenNodes", null);
-__decorate$2([
-    computed$1
-], TreeModel.prototype, "selectedLeafNodes", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setData", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "update", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setFocusedNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setFocus", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "doForAll", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "focusNextNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "focusPreviousNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "focusDrillDown", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "focusDrillUp", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setActiveNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setSelectedNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setExpandedNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "expandAll", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "collapseAll", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setIsHidden", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setHiddenNodeIds", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "filterNodes", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "clearFilter", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "moveNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "copyNode", null);
-__decorate$2([
-    action$1
-], TreeModel.prototype, "setState", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModel, decorators: [{
             type: Injectable
-        }], propDecorators: { roots: [], expandedNodeIds: [], selectedLeafNodeIds: [], activeNodeIds: [], hiddenNodeIds: [], focusedNodeId: [], virtualRoot: [], focusedNode: [], expandedNodes: [], activeNodes: [], hiddenNodes: [], selectedLeafNodes: [], setData: [], update: [], setFocusedNode: [], setFocus: [], doForAll: [], focusNextNode: [], focusPreviousNode: [], focusDrillDown: [], focusDrillUp: [], setActiveNode: [], setSelectedNode: [], setExpandedNode: [], expandAll: [], collapseAll: [], setIsHidden: [], setHiddenNodeIds: [], filterNodes: [], clearFilter: [], moveNode: [], copyNode: [], setState: [] } });
+        }] });
 
 class TreeDraggedElement {
     constructor() {
@@ -1160,40 +992,41 @@ class TreeDraggedElement {
     isDragging() {
         return !!this.get();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDraggedElement, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDraggedElement, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDraggedElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDraggedElement, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 const Y_OFFSET = 500; // Extra pixels outside the viewport, in each direction, to render nodes in
 const Y_EPSILON = 150; // Minimum pixel change required to recalculate the rendered nodes
 class TreeVirtualScroll {
+    get yBlocks() { return this._yBlocks(); }
+    set yBlocks(value) { this._yBlocks.set(value); }
+    get x() { return this._x(); }
+    set x(value) { this._x.set(value); }
+    get viewportHeight() { return this._viewportHeight(); }
+    set viewportHeight(value) { this._viewportHeight.set(value); }
     get y() {
         return this.yBlocks * Y_EPSILON;
     }
     get totalHeight() {
-        return this.treeModel.virtualRoot ? this.treeModel.virtualRoot.height : 0;
+        const vRoot = this.treeModel['_virtualRoot']();
+        return vRoot ? vRoot.height : 0;
     }
     constructor() {
         this.treeModel = inject(TreeModel);
-        this.yBlocks = 0;
-        this.x = 0;
-        this.viewportHeight = null;
+        this._dispose = [];
+        this._yBlocks = signal(0, ...(ngDevMode ? [{ debugName: "_yBlocks" }] : []));
+        this._x = signal(0, ...(ngDevMode ? [{ debugName: "_x" }] : []));
+        this._viewportHeight = signal(null, ...(ngDevMode ? [{ debugName: "_viewportHeight" }] : []));
         this.viewport = null;
         const treeModel = this.treeModel;
         treeModel.virtualScroll = this;
-        this._dispose = [autorun(() => this.fixScroll())];
     }
     fireEvent(event) {
         this.treeModel.fireEvent(event);
@@ -1201,13 +1034,34 @@ class TreeVirtualScroll {
     init() {
         const fn = this.recalcPositions.bind(this);
         fn();
+        this.treeModel.subscribe(TREE_EVENTS.loadNodeChildren, fn);
+    }
+    setupWatchers(injector) {
+        const fn = this.recalcPositions.bind(this);
+        const fixScrollEffect = effect(() => {
+            const yBlocks = this._yBlocks();
+            const totalHeight = this.totalHeight;
+            const viewportHeight = this._viewportHeight();
+            this.fixScroll();
+        }, ...(ngDevMode ? [{ debugName: "fixScrollEffect", injector }] : [{ injector }]));
+        const rootsEffect = effect(() => {
+            const roots = this.treeModel.roots;
+            fn();
+        }, ...(ngDevMode ? [{ debugName: "rootsEffect", injector }] : [{ injector }]));
+        const expandedEffect = effect(() => {
+            const expandedNodes = this.treeModel.expandedNodes;
+            fn();
+        }, ...(ngDevMode ? [{ debugName: "expandedEffect", injector }] : [{ injector }]));
+        const hiddenEffect = effect(() => {
+            const hiddenNodes = this.treeModel.hiddenNodes;
+            fn();
+        }, ...(ngDevMode ? [{ debugName: "hiddenEffect", injector }] : [{ injector }]));
         this._dispose = [
-            ...this._dispose,
-            reaction(() => this.treeModel.roots, fn),
-            reaction(() => this.treeModel.expandedNodeIds, fn),
-            reaction(() => this.treeModel.hiddenNodeIds, fn)
+            () => fixScrollEffect.destroy(),
+            () => rootsEffect.destroy(),
+            () => expandedEffect.destroy(),
+            () => hiddenEffect.destroy()
         ];
-        this.treeModel.subscribe(TREE_EVENTS.loadNodeChildren, fn);
     }
     isEnabled() {
         return this.treeModel.options.useVirtualScroll;
@@ -1216,7 +1070,10 @@ class TreeVirtualScroll {
         this.yBlocks = value;
     }
     recalcPositions() {
-        this.treeModel.virtualRoot.height = this._getPositionAfter(this.treeModel.getVisibleRoots(), 0);
+        const vRoot = this.treeModel['_virtualRoot']();
+        if (vRoot) {
+            vRoot.height = this._getPositionAfter(this.treeModel.getVisibleRoots(), 0);
+        }
     }
     _getPositionAfter(nodes, startPos) {
         let position = startPos;
@@ -1312,39 +1169,12 @@ class TreeVirtualScroll {
         if (this.y > maxY)
             this._setYBlocks(maxY / Y_EPSILON);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeVirtualScroll }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeVirtualScroll }); }
 }
-__decorate$1([
-    observable$1
-], TreeVirtualScroll.prototype, "yBlocks", void 0);
-__decorate$1([
-    observable$1
-], TreeVirtualScroll.prototype, "x", void 0);
-__decorate$1([
-    observable$1
-], TreeVirtualScroll.prototype, "viewportHeight", void 0);
-__decorate$1([
-    computed$1
-], TreeVirtualScroll.prototype, "y", null);
-__decorate$1([
-    computed$1
-], TreeVirtualScroll.prototype, "totalHeight", null);
-__decorate$1([
-    action$1
-], TreeVirtualScroll.prototype, "_setYBlocks", null);
-__decorate$1([
-    action$1
-], TreeVirtualScroll.prototype, "recalcPositions", null);
-__decorate$1([
-    action$1
-], TreeVirtualScroll.prototype, "setViewport", null);
-__decorate$1([
-    action$1
-], TreeVirtualScroll.prototype, "scrollIntoView", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeVirtualScroll, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeVirtualScroll, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [], propDecorators: { yBlocks: [], x: [], viewportHeight: [], y: [], totalHeight: [], _setYBlocks: [], recalcPositions: [], setViewport: [], scrollIntoView: [] } });
+        }], ctorParameters: () => [] });
 function binarySearch(nodes, condition, firstIndex = 0) {
     let index = firstIndex;
     let toIndex = nodes.length - 1;
@@ -1364,59 +1194,69 @@ function binarySearch(nodes, condition, firstIndex = 0) {
 }
 
 class LoadingComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: LoadingComponent, isStandalone: true, selector: "tree-loading-component", inputs: { template: "template", node: "node" }, ngImport: i0, template: `
-    <span *ngIf="!template">loading...</span>
+    constructor() {
+        this.template = input(undefined, ...(ngDevMode ? [{ debugName: "template" }] : []));
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: LoadingComponent, isStandalone: true, selector: "tree-loading-component", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!template()) {
+    <span>loading...</span>
+    }
     <ng-container
-      [ngTemplateOutlet]="template"
-      [ngTemplateOutletContext]="{ $implicit: node }">
+      [ngTemplateOutlet]="template()"
+      [ngTemplateOutletContext]="{ $implicit: node() }"
+    >
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{
                     encapsulation: ViewEncapsulation.None,
                     selector: 'tree-loading-component',
                     template: `
-    <span *ngIf="!template">loading...</span>
+    @if (!template()) {
+    <span>loading...</span>
+    }
     <ng-container
-      [ngTemplateOutlet]="template"
-      [ngTemplateOutletContext]="{ $implicit: node }">
+      [ngTemplateOutlet]="template()"
+      [ngTemplateOutletContext]="{ $implicit: node() }"
+    >
     </ng-container>
   `,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
-        }], propDecorators: { template: [{
-                type: Input
-            }], node: [{
-                type: Input
-            }] } });
+        }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class TreeViewportComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.virtualScroll = inject(TreeVirtualScroll);
+        this.injector = inject(Injector);
+        this.renderer = inject(Renderer2);
         this.setViewport = this.throttle(() => {
             this.virtualScroll.setViewport(this.elementRef.nativeElement);
         }, 17);
+        this.removeScrollListener = null;
         this.scrollEventHandler = this.setViewport.bind(this);
     }
     ngOnInit() {
         this.virtualScroll.init();
+        this.virtualScroll.setupWatchers(this.injector);
     }
     ngAfterViewInit() {
-        setTimeout(() => {
+        afterNextRender(() => {
             this.setViewport();
             this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
-        });
-        let el = this.elementRef.nativeElement;
-        el.addEventListener('scroll', this.scrollEventHandler);
+        }, { injector: this.injector });
+        const el = this.elementRef.nativeElement;
+        this.removeScrollListener = this.renderer.listen(el, 'scroll', this.scrollEventHandler);
     }
     ngOnDestroy() {
         this.virtualScroll.clear();
-        let el = this.elementRef.nativeElement;
-        el.removeEventListener('scroll', this.scrollEventHandler);
+        this.removeScrollListener?.();
+        this.removeScrollListener = null;
     }
     getTotalHeight() {
         return ((this.virtualScroll.isEnabled() &&
@@ -1433,50 +1273,25 @@ class TreeViewportComponent {
             }
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeViewportComponent, isStandalone: true, selector: "tree-viewport", providers: [TreeVirtualScroll], ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div [style.height]="getTotalHeight()">
-        <ng-content></ng-content>
-      </div>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: TreeViewportComponent, isStandalone: true, selector: "tree-viewport", providers: [TreeVirtualScroll], ngImport: i0, template: `
+    <div [style.height]="getTotalHeight()">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeViewportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-viewport', providers: [TreeVirtualScroll], template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div [style.height]="getTotalHeight()">
-        <ng-content></ng-content>
-      </div>
-    </ng-container>
-  `, imports: [TreeMobxAutorunDirective] }]
+    <div [style.height]="getTotalHeight()">
+      <ng-content></ng-content>
+    </div>
+  `, imports: [] }]
         }], ctorParameters: () => [] });
 
-// Re-export mobx operators to be able to use inside components with AOT:
-function actionInternal(...args) {
-    return action$1(...args);
-}
-const action = Object.assign(actionInternal, action$1);
-function computedInternal(...args) {
-    return computed$1(...args);
-}
-const computed = Object.assign(computedInternal, computed$1);
-function observableInternal(...args) {
-    return observable$1(...args);
-}
-const observable = Object.assign(observableInternal, observable$1);
-
-const DRAG_OVER_CLASS$1 = 'is-dragging-over';
+const DRAG_OVER_CLASS = 'is-dragging-over';
 const DRAG_DISABLED_CLASS = 'is-dragging-over-disabled';
 class TreeDropDirective {
-    set treeAllowDrop(allowDrop) {
-        if (allowDrop instanceof Function) {
-            this._allowDrop = allowDrop;
-        }
-        else
-            this._allowDrop = (element, $event) => allowDrop;
-    }
     allowDrop($event) {
         return this._allowDrop(this.treeDraggedElement.get(), $event);
     }
@@ -1484,41 +1299,53 @@ class TreeDropDirective {
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.treeDraggedElement = inject(TreeDraggedElement);
-        this.ngZone = inject(NgZone);
-        this.allowDragoverStyling = true;
-        this.onDropCallback = new EventEmitter();
-        this.onDragOverCallback = new EventEmitter();
-        this.onDragLeaveCallback = new EventEmitter();
-        this.onDragEnterCallback = new EventEmitter();
+        this.allowDragoverStyling = input(true, ...(ngDevMode ? [{ debugName: "allowDragoverStyling" }] : []));
+        this.treeAllowDrop = input(undefined, ...(ngDevMode ? [{ debugName: "treeAllowDrop" }] : []));
+        this.onDropCallback = output({ alias: 'treeDrop' });
+        this.onDragOverCallback = output({ alias: 'treeDropDragOver' });
+        this.onDragLeaveCallback = output({ alias: 'treeDropDragLeave' });
+        this.onDragEnterCallback = output({ alias: 'treeDropDragEnter' });
+        this.dragOverUnlisten = null;
+        this.dragEnterUnlisten = null;
+        this.dragLeaveUnlisten = null;
         this._allowDrop = (element, $event) => true;
         this.dragOverEventHandler = this.onDragOver.bind(this);
         this.dragEnterEventHandler = this.onDragEnter.bind(this);
         this.dragLeaveEventHandler = this.onDragLeave.bind(this);
+        effect(() => {
+            const allowDrop = this.treeAllowDrop();
+            if (allowDrop instanceof Function) {
+                this._allowDrop = allowDrop;
+            }
+            else if (allowDrop !== undefined) {
+                this._allowDrop = (element, $event) => allowDrop;
+            }
+        });
     }
     ngAfterViewInit() {
         let el = this.el.nativeElement;
-        this.ngZone.runOutsideAngular(() => {
-            el.addEventListener('dragover', this.dragOverEventHandler);
-            el.addEventListener('dragenter', this.dragEnterEventHandler);
-            el.addEventListener('dragleave', this.dragLeaveEventHandler);
-        });
+        this.dragOverUnlisten = this.renderer.listen(el, 'dragover', this.dragOverEventHandler);
+        this.dragEnterUnlisten = this.renderer.listen(el, 'dragenter', this.dragEnterEventHandler);
+        this.dragLeaveUnlisten = this.renderer.listen(el, 'dragleave', this.dragLeaveEventHandler);
     }
     ngOnDestroy() {
-        let el = this.el.nativeElement;
-        el.removeEventListener('dragover', this.dragOverEventHandler);
-        el.removeEventListener('dragenter', this.dragEnterEventHandler);
-        el.removeEventListener('dragleave', this.dragLeaveEventHandler);
+        this.dragOverUnlisten?.();
+        this.dragEnterUnlisten?.();
+        this.dragLeaveUnlisten?.();
+        this.dragOverUnlisten = null;
+        this.dragEnterUnlisten = null;
+        this.dragLeaveUnlisten = null;
     }
     onDragOver($event) {
         if (!this.allowDrop($event)) {
-            if (this.allowDragoverStyling) {
+            if (this.allowDragoverStyling()) {
                 return this.addDisabledClass();
             }
             return;
         }
         this.onDragOverCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
         $event.preventDefault();
-        if (this.allowDragoverStyling) {
+        if (this.allowDragoverStyling()) {
             this.addClass();
         }
     }
@@ -1530,13 +1357,13 @@ class TreeDropDirective {
     }
     onDragLeave($event) {
         if (!this.allowDrop($event)) {
-            if (this.allowDragoverStyling) {
+            if (this.allowDragoverStyling()) {
                 return this.removeDisabledClass();
             }
             return;
         }
         this.onDragLeaveCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
-        if (this.allowDragoverStyling) {
+        if (this.allowDragoverStyling()) {
             this.removeClass();
         }
     }
@@ -1545,16 +1372,16 @@ class TreeDropDirective {
             return;
         $event.preventDefault();
         this.onDropCallback.emit({ event: $event, element: this.treeDraggedElement.get() });
-        if (this.allowDragoverStyling) {
+        if (this.allowDragoverStyling()) {
             this.removeClass();
         }
         this.treeDraggedElement.set(null);
     }
     addClass() {
-        this.renderer.addClass(this.el.nativeElement, DRAG_OVER_CLASS$1);
+        this.renderer.addClass(this.el.nativeElement, DRAG_OVER_CLASS);
     }
     removeClass() {
-        this.renderer.removeClass(this.el.nativeElement, DRAG_OVER_CLASS$1);
+        this.renderer.removeClass(this.el.nativeElement, DRAG_OVER_CLASS);
     }
     addDisabledClass() {
         this.renderer.addClass(this.el.nativeElement, DRAG_DISABLED_CLASS);
@@ -1562,192 +1389,170 @@ class TreeDropDirective {
     removeDisabledClass() {
         this.renderer.removeClass(this.el.nativeElement, DRAG_DISABLED_CLASS);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: TreeDropDirective, isStandalone: true, selector: "[treeDrop]", inputs: { allowDragoverStyling: "allowDragoverStyling", treeAllowDrop: "treeAllowDrop" }, outputs: { onDropCallback: "treeDrop", onDragOverCallback: "treeDropDragOver", onDragLeaveCallback: "treeDropDragLeave", onDragEnterCallback: "treeDropDragEnter" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TreeDropDirective, isStandalone: true, selector: "[treeDrop]", inputs: { allowDragoverStyling: { classPropertyName: "allowDragoverStyling", publicName: "allowDragoverStyling", isSignal: true, isRequired: false, transformFunction: null }, treeAllowDrop: { classPropertyName: "treeAllowDrop", publicName: "treeAllowDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDropCallback: "treeDrop", onDragOverCallback: "treeDropDragOver", onDragLeaveCallback: "treeDropDragLeave", onDragEnterCallback: "treeDropDragEnter" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDropDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeDrop]' }]
-        }], ctorParameters: () => [], propDecorators: { allowDragoverStyling: [{
-                type: Input
-            }], onDropCallback: [{
-                type: Output,
-                args: ['treeDrop']
-            }], onDragOverCallback: [{
-                type: Output,
-                args: ['treeDropDragOver']
-            }], onDragLeaveCallback: [{
-                type: Output,
-                args: ['treeDropDragLeave']
-            }], onDragEnterCallback: [{
-                type: Output,
-                args: ['treeDropDragEnter']
-            }], treeAllowDrop: [{
-                type: Input
-            }], onDrop: [{
+        }], ctorParameters: () => [], propDecorators: { allowDragoverStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDragoverStyling", required: false }] }], treeAllowDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeAllowDrop", required: false }] }], onDropCallback: [{ type: i0.Output, args: ["treeDrop"] }], onDragOverCallback: [{ type: i0.Output, args: ["treeDropDragOver"] }], onDragLeaveCallback: [{ type: i0.Output, args: ["treeDropDragLeave"] }], onDragEnterCallback: [{ type: i0.Output, args: ["treeDropDragEnter"] }], onDrop: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
             }] } });
 
 class TreeNodeDropSlot {
+    constructor() {
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.dropIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dropIndex" }] : []));
+    }
     onDrop($event) {
-        this.node.mouseAction('drop', $event.event, {
+        this.node().mouseAction('drop', $event.event, {
             from: $event.element,
-            to: { parent: this.node, index: this.dropIndex }
+            to: { parent: this.node(), index: this.dropIndex() }
         });
     }
     allowDrop(element, $event) {
-        return this.node.options.allowDrop(element, { parent: this.node, index: this.dropIndex }, $event);
+        return this.node().options.allowDrop(element, { parent: this.node(), index: this.dropIndex() }, $event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeDropSlot, isStandalone: true, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: { node: "node", dropIndex: "dropIndex" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TreeNodeDropSlot, isStandalone: true, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, dropIndex: { classPropertyName: "dropIndex", publicName: "dropIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
       class="node-drop-slot"
       (treeDrop)="onDrop($event)"
       [treeAllowDrop]="allowDrop.bind(this)"
-      [allowDragoverStyling]="true">
-    </div>
+      [allowDragoverStyling]="true"
+    ></div>
   `, isInline: true, dependencies: [{ kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNodeDropSlot, tree-node-drop-slot', encapsulation: ViewEncapsulation.None, template: `
     <div
       class="node-drop-slot"
       (treeDrop)="onDrop($event)"
       [treeAllowDrop]="allowDrop.bind(this)"
-      [allowDragoverStyling]="true">
-    </div>
+      [allowDragoverStyling]="true"
+    ></div>
   `, imports: [TreeDropDirective] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], dropIndex: [{
-                type: Input
-            }] } });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], dropIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropIndex", required: false }] }] } });
 
 class TreeNodeCheckboxComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeCheckboxComponent, isStandalone: true, selector: "tree-node-checkbox", inputs: { node: "node" }, ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <input
-        class="tree-node-checkbox"
-        type="checkbox"
-        (click)="node.mouseAction('checkboxClick', $event)"
-        [checked]="node.isSelected"
-        [indeterminate]="node.isPartiallySelected"
-      />
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    constructor() {
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: TreeNodeCheckboxComponent, isStandalone: true, selector: "tree-node-checkbox", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <input
+      class="tree-node-checkbox"
+      type="checkbox"
+      (click)="node().mouseAction('checkboxClick', $event)"
+      [checked]="node().isSelected"
+      [indeterminate]="node().isPartiallySelected"
+    />
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-checkbox', encapsulation: ViewEncapsulation.None, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <input
-        class="tree-node-checkbox"
-        type="checkbox"
-        (click)="node.mouseAction('checkboxClick', $event)"
-        [checked]="node.isSelected"
-        [indeterminate]="node.isPartiallySelected"
-      />
-    </ng-container>
-  `, imports: [TreeMobxAutorunDirective] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }] } });
+    <input
+      class="tree-node-checkbox"
+      type="checkbox"
+      (click)="node().mouseAction('checkboxClick', $event)"
+      [checked]="node().isSelected"
+      [indeterminate]="node().isPartiallySelected"
+    />
+  `, imports: [] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class TreeNodeExpanderComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeExpanderComponent, isStandalone: true, selector: "tree-node-expander", inputs: { node: "node" }, ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <span
-        *ngIf="node.hasChildren"
-        [class.toggle-children-wrapper-expanded]="node.isExpanded"
-        [class.toggle-children-wrapper-collapsed]="node.isCollapsed"
-        class="toggle-children-wrapper"
-        (click)="node.mouseAction('expanderClick', $event)"
-      >
-        <span class="toggle-children"></span>
-      </span>
-      <span *ngIf="!node.hasChildren" class="toggle-children-placeholder">
-      </span>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    constructor() {
+        this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : []));
+        this.hasChildren = computed(() => this.node().hasChildren, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeExpanderComponent, isStandalone: true, selector: "tree-node-expander", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (hasChildren()) {
+    <span
+      [class.toggle-children-wrapper-expanded]="node().isExpanded"
+      [class.toggle-children-wrapper-collapsed]="node().isCollapsed"
+      class="toggle-children-wrapper"
+      (click)="node().mouseAction('expanderClick', $event)"
+    >
+      <span class="toggle-children"></span>
+    </span>
+    } @if (!hasChildren()) {
+    <span class="toggle-children-placeholder"></span>
+    }
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-expander', encapsulation: ViewEncapsulation.None, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <span
-        *ngIf="node.hasChildren"
-        [class.toggle-children-wrapper-expanded]="node.isExpanded"
-        [class.toggle-children-wrapper-collapsed]="node.isCollapsed"
-        class="toggle-children-wrapper"
-        (click)="node.mouseAction('expanderClick', $event)"
-      >
-        <span class="toggle-children"></span>
-      </span>
-      <span *ngIf="!node.hasChildren" class="toggle-children-placeholder">
-      </span>
-    </ng-container>
-  `, imports: [TreeMobxAutorunDirective, NgIf] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }] } });
+    @if (hasChildren()) {
+    <span
+      [class.toggle-children-wrapper-expanded]="node().isExpanded"
+      [class.toggle-children-wrapper-collapsed]="node().isCollapsed"
+      class="toggle-children-wrapper"
+      (click)="node().mouseAction('expanderClick', $event)"
+    >
+      <span class="toggle-children"></span>
+    </span>
+    } @if (!hasChildren()) {
+    <span class="toggle-children-placeholder"></span>
+    }
+  `, imports: [] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
-const DRAG_OVER_CLASS = 'is-dragging-over';
 class TreeDragDirective {
     constructor() {
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.treeDraggedElement = inject(TreeDraggedElement);
-        this.ngZone = inject(NgZone);
+        this.draggedElement = input(undefined, ...(ngDevMode ? [{ debugName: "draggedElement", alias: "treeDrag" }] : [{ alias: "treeDrag" }]));
+        this.treeDragEnabled = input(undefined, ...(ngDevMode ? [{ debugName: "treeDragEnabled" }] : []));
+        this.dragUnlisten = null;
         this.dragEventHandler = this.onDrag.bind(this);
     }
     ngAfterViewInit() {
         let el = this.el.nativeElement;
-        this.ngZone.runOutsideAngular(() => {
-            el.addEventListener('drag', this.dragEventHandler);
-        });
+        this.dragUnlisten = this.renderer.listen(el, 'drag', this.dragEventHandler);
     }
     ngDoCheck() {
-        this.renderer.setAttribute(this.el.nativeElement, 'draggable', this.treeDragEnabled ? 'true' : 'false');
+        this.renderer.setAttribute(this.el.nativeElement, 'draggable', this.treeDragEnabled() ? 'true' : 'false');
     }
     ngOnDestroy() {
-        let el = this.el.nativeElement;
-        el.removeEventListener('drag', this.dragEventHandler);
+        this.dragUnlisten?.();
+        this.dragUnlisten = null;
     }
     onDragStart(ev) {
         // setting the data is required by firefox
         ev.dataTransfer.setData('text', ev.target.id);
-        this.treeDraggedElement.set(this.draggedElement);
-        if (this.draggedElement.mouseAction) {
-            this.draggedElement.mouseAction('dragStart', ev);
+        const draggedElement = this.draggedElement();
+        this.treeDraggedElement.set(draggedElement);
+        if (draggedElement.mouseAction) {
+            draggedElement.mouseAction('dragStart', ev);
         }
     }
     onDrag(ev) {
-        if (this.draggedElement.mouseAction) {
-            this.draggedElement.mouseAction('drag', ev);
+        const draggedElement = this.draggedElement();
+        if (draggedElement.mouseAction) {
+            draggedElement.mouseAction('drag', ev);
         }
     }
     onDragEnd() {
-        if (this.draggedElement.mouseAction) {
-            this.draggedElement.mouseAction('dragEnd');
+        const draggedElement = this.draggedElement();
+        if (draggedElement.mouseAction) {
+            draggedElement.mouseAction('dragEnd');
         }
         this.treeDraggedElement.set(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: TreeDragDirective, isStandalone: true, selector: "[treeDrag]", inputs: { draggedElement: ["treeDrag", "draggedElement"], treeDragEnabled: "treeDragEnabled" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TreeDragDirective, isStandalone: true, selector: "[treeDrag]", inputs: { draggedElement: { classPropertyName: "draggedElement", publicName: "treeDrag", isSignal: true, isRequired: false, transformFunction: null }, treeDragEnabled: { classPropertyName: "treeDragEnabled", publicName: "treeDragEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeDragDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeDrag]' }]
-        }], ctorParameters: () => [], propDecorators: { draggedElement: [{
-                type: Input,
-                args: ['treeDrag']
-            }], treeDragEnabled: [{
-                type: Input
-            }], onDragStart: [{
+        }], ctorParameters: () => [], propDecorators: { draggedElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDrag", required: false }] }], treeDragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDragEnabled", required: false }] }], onDragStart: [{
                 type: HostListener,
                 args: ['dragstart', ['$event']]
             }], onDragEnd: [{
@@ -1756,107 +1561,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class TreeNodeContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeContent, isStandalone: true, selector: "tree-node-content", inputs: { node: "node", index: "index", template: "template" }, ngImport: i0, template: `
-  <span *ngIf="!template">{{ node.displayField }}</span>
-  <ng-container
-    [ngTemplateOutlet]="template"
-    [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index }">
-  </ng-container>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    constructor() {
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index" }] : []));
+        this.template = input(undefined, ...(ngDevMode ? [{ debugName: "template" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeContent, isStandalone: true, selector: "tree-node-content", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!template()) {
+    <span>{{ node().displayField }}</span>
+    }
+    <ng-container
+      [ngTemplateOutlet]="template()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index()
+      }"
+    >
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tree-node-content',
                     encapsulation: ViewEncapsulation.None,
                     template: `
-  <span *ngIf="!template">{{ node.displayField }}</span>
-  <ng-container
-    [ngTemplateOutlet]="template"
-    [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index }">
-  </ng-container>`,
-                    imports: [NgIf, NgTemplateOutlet]
+    @if (!template()) {
+    <span>{{ node().displayField }}</span>
+    }
+    <ng-container
+      [ngTemplateOutlet]="template()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index()
+      }"
+    >
+    </ng-container>
+  `,
+                    imports: [NgTemplateOutlet]
                 }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }] } });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }] } });
 
 class TreeNodeWrapperComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeWrapperComponent, isStandalone: true, selector: "tree-node-wrapper", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
-      <div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
-          <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
-          <tree-node-expander [node]="node"></tree-node-expander>
-          <div class="node-content-wrapper"
-               [class.node-content-wrapper-active]="node.isActive"
-               [class.node-content-wrapper-focused]="node.isFocused"
-               (click)="node.mouseAction('click', $event)"
-               (dblclick)="node.mouseAction('dblClick', $event)"
-               (mouseover)="node.mouseAction('mouseOver', $event)"
-               (mouseout)="node.mouseAction('mouseOut', $event)"
-               (contextmenu)="node.mouseAction('contextMenu', $event)"
-               (treeDrop)="node.onDrop($event)"
-               (treeDropDragOver)="node.mouseAction('dragOver', $event)"
-               (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
-               (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
-               [treeAllowDrop]="node.allowDrop"
-               [allowDragoverStyling]="node.allowDragoverStyling()"
-               [treeDrag]="node"
-               [treeDragEnabled]="node.allowDrag()">
-
-              <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
-              </tree-node-content>
-          </div>
+    constructor() {
+        this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : []));
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index" }] : []));
+        this.templates = input(...(ngDevMode ? [undefined, { debugName: "templates" }] : []));
+        this.treeNodeWrapperTemplate = computed(() => this.templates().treeNodeWrapperTemplate, ...(ngDevMode ? [{ debugName: "treeNodeWrapperTemplate" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeWrapperComponent, isStandalone: true, selector: "tree-node-wrapper", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!treeNodeWrapperTemplate()) {
+    <div class="node-wrapper" [style.padding-left]="node().getNodePadding()">
+      @if (node().options.useCheckbox) {
+      <tree-node-checkbox [node]="node()"></tree-node-checkbox>
+      }
+      <tree-node-expander [node]="node()"></tree-node-expander>
+      <div
+        class="node-content-wrapper"
+        [class.node-content-wrapper-active]="node().isActive"
+        [class.node-content-wrapper-focused]="node().isFocused"
+        (click)="node().mouseAction('click', $event)"
+        (dblclick)="node().mouseAction('dblClick', $event)"
+        (mouseover)="node().mouseAction('mouseOver', $event)"
+        (mouseout)="node().mouseAction('mouseOut', $event)"
+        (contextmenu)="node().mouseAction('contextMenu', $event)"
+        (treeDrop)="node().onDrop($event)"
+        (treeDropDragOver)="node().mouseAction('dragOver', $event)"
+        (treeDropDragLeave)="node().mouseAction('dragLeave', $event)"
+        (treeDropDragEnter)="node().mouseAction('dragEnter', $event)"
+        [treeAllowDrop]="node().allowDrop"
+        [allowDragoverStyling]="node().allowDragoverStyling()"
+        [treeDrag]="node()"
+        [treeDragEnabled]="node().allowDrag()"
+      >
+        <tree-node-content
+          [node]="node()"
+          [index]="index()"
+          [template]="templates().treeNodeTemplate"
+        >
+        </tree-node-content>
       </div>
-      <ng-container
-              [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
-              [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
-      </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node"] }, { kind: "component", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node"] }, { kind: "directive", type: TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "component", type: TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    </div>
+    }
+    <ng-container
+      [ngTemplateOutlet]="treeNodeWrapperTemplate()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index(),
+        templates: templates()
+      }"
+    >
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "component", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node"] }, { kind: "component", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node"] }, { kind: "directive", type: TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "component", type: TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-wrapper', encapsulation: ViewEncapsulation.None, template: `
-      <div *ngIf="!templates.treeNodeWrapperTemplate" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
-          <tree-node-checkbox *ngIf="node.options.useCheckbox" [node]="node"></tree-node-checkbox>
-          <tree-node-expander [node]="node"></tree-node-expander>
-          <div class="node-content-wrapper"
-               [class.node-content-wrapper-active]="node.isActive"
-               [class.node-content-wrapper-focused]="node.isFocused"
-               (click)="node.mouseAction('click', $event)"
-               (dblclick)="node.mouseAction('dblClick', $event)"
-               (mouseover)="node.mouseAction('mouseOver', $event)"
-               (mouseout)="node.mouseAction('mouseOut', $event)"
-               (contextmenu)="node.mouseAction('contextMenu', $event)"
-               (treeDrop)="node.onDrop($event)"
-               (treeDropDragOver)="node.mouseAction('dragOver', $event)"
-               (treeDropDragLeave)="node.mouseAction('dragLeave', $event)"
-               (treeDropDragEnter)="node.mouseAction('dragEnter', $event)"
-               [treeAllowDrop]="node.allowDrop"
-               [allowDragoverStyling]="node.allowDragoverStyling()"
-               [treeDrag]="node"
-               [treeDragEnabled]="node.allowDrag()">
-
-              <tree-node-content [node]="node" [index]="index" [template]="templates.treeNodeTemplate">
-              </tree-node-content>
-          </div>
+    @if (!treeNodeWrapperTemplate()) {
+    <div class="node-wrapper" [style.padding-left]="node().getNodePadding()">
+      @if (node().options.useCheckbox) {
+      <tree-node-checkbox [node]="node()"></tree-node-checkbox>
+      }
+      <tree-node-expander [node]="node()"></tree-node-expander>
+      <div
+        class="node-content-wrapper"
+        [class.node-content-wrapper-active]="node().isActive"
+        [class.node-content-wrapper-focused]="node().isFocused"
+        (click)="node().mouseAction('click', $event)"
+        (dblclick)="node().mouseAction('dblClick', $event)"
+        (mouseover)="node().mouseAction('mouseOver', $event)"
+        (mouseout)="node().mouseAction('mouseOut', $event)"
+        (contextmenu)="node().mouseAction('contextMenu', $event)"
+        (treeDrop)="node().onDrop($event)"
+        (treeDropDragOver)="node().mouseAction('dragOver', $event)"
+        (treeDropDragLeave)="node().mouseAction('dragLeave', $event)"
+        (treeDropDragEnter)="node().mouseAction('dragEnter', $event)"
+        [treeAllowDrop]="node().allowDrop"
+        [allowDragoverStyling]="node().allowDragoverStyling()"
+        [treeDrag]="node()"
+        [treeDragEnabled]="node().allowDrag()"
+      >
+        <tree-node-content
+          [node]="node()"
+          [index]="index()"
+          [template]="templates().treeNodeTemplate"
+        >
+        </tree-node-content>
       </div>
-      <ng-container
-              [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
-              [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
-      </ng-container>
-  `, imports: [NgIf, TreeNodeCheckboxComponent, TreeNodeExpanderComponent, TreeDragDirective, TreeDropDirective, TreeNodeContent, NgTemplateOutlet] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], templates: [{
-                type: Input
-            }] } });
+    </div>
+    }
+    <ng-container
+      [ngTemplateOutlet]="treeNodeWrapperTemplate()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index(),
+        templates: templates()
+      }"
+    >
+    </ng-container>
+  `, imports: [
+                        TreeNodeCheckboxComponent,
+                        TreeNodeExpanderComponent,
+                        TreeDragDirective,
+                        TreeDropDirective,
+                        TreeNodeContent,
+                        NgTemplateOutlet
+                    ] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
 
 const EASE_ACCELERATION = 1.005;
 class TreeAnimateOpenDirective {
@@ -1864,20 +1721,33 @@ class TreeAnimateOpenDirective {
         this.renderer = inject(Renderer2);
         this.templateRef = inject(TemplateRef);
         this.viewContainerRef = inject(ViewContainerRef);
-    }
-    set isOpen(value) {
-        if (value) {
-            this._show();
-            if (this.isEnabled && this._isOpen === false) {
-                this._animateOpen();
+        this.isOpen = input(undefined, ...(ngDevMode ? [{ debugName: "isOpen", alias: 'treeAnimateOpen' }] : [{ alias: 'treeAnimateOpen' }]));
+        this.animateSpeed = input(undefined, ...(ngDevMode ? [{ debugName: "animateSpeed", alias: 'treeAnimateOpenSpeed' }] : [{
+                alias: 'treeAnimateOpenSpeed'
+            }]));
+        this.animateAcceleration = input(undefined, ...(ngDevMode ? [{ debugName: "animateAcceleration", alias: 'treeAnimateOpenAcceleration' }] : [{
+                alias: 'treeAnimateOpenAcceleration'
+            }]));
+        this.isEnabled = input(undefined, ...(ngDevMode ? [{ debugName: "isEnabled", alias: 'treeAnimateOpenEnabled' }] : [{
+                alias: 'treeAnimateOpenEnabled'
+            }]));
+        this.startOpenTimeout = null;
+        this.openInterval = null;
+        this.closeInterval = null;
+        effect(() => {
+            const value = this.isOpen();
+            if (value) {
+                this._show();
+                if (this.isEnabled() && this.previousIsOpen === false) {
+                    this._animateOpen();
+                }
             }
-        }
-        else {
-            this.isEnabled ? this._animateClose() : this._hide();
-        }
-        this._isOpen = !!value;
+            else {
+                this.isEnabled() ? this._animateClose() : this._hide();
+            }
+            this.previousIsOpen = !!value;
+        });
     }
-    ;
     _show() {
         if (this.innerElement)
             return;
@@ -1885,30 +1755,38 @@ class TreeAnimateOpenDirective {
         this.innerElement = this.viewContainerRef.createEmbeddedView(this.templateRef).rootNodes[0];
     }
     _hide() {
+        this.clearTimers();
         this.viewContainerRef.clear();
         this.innerElement = null;
     }
     _animateOpen() {
-        let delta = this.animateSpeed;
-        let ease = this.animateAcceleration;
+        this.clearTimers();
+        let delta = this.animateSpeed();
+        let ease = this.animateAcceleration();
         let maxHeight = 0;
         // set height to 0
         this.renderer.setStyle(this.innerElement, 'max-height', `0`);
         // increase maxHeight until height doesn't change
-        setTimeout(() => {
-            const i = setInterval(() => {
-                if (!this._isOpen || !this.innerElement)
-                    return clearInterval(i);
+        this.startOpenTimeout = setTimeout(() => {
+            this.startOpenTimeout = null;
+            // Allow inner element to create its content
+            this.openInterval = setInterval(() => {
+                if (!this.isOpen() || !this.innerElement) {
+                    this.clearOpenInterval();
+                    return;
+                }
                 maxHeight += delta;
                 const roundedMaxHeight = Math.round(maxHeight);
                 this.renderer.setStyle(this.innerElement, 'max-height', `${roundedMaxHeight}px`);
-                const height = this.innerElement.getBoundingClientRect ? this.innerElement.getBoundingClientRect().height : 0; // TBD use renderer
+                const height = this.innerElement.getBoundingClientRect
+                    ? this.innerElement.getBoundingClientRect().height
+                    : 0; // TBD use renderer
                 delta *= ease;
                 ease *= EASE_ACCELERATION;
                 if (height < roundedMaxHeight) {
                     // Make maxHeight auto because animation finished and container might change height later on
                     this.renderer.setStyle(this.innerElement, 'max-height', null);
-                    clearInterval(i);
+                    this.clearOpenInterval();
                 }
             }, 17);
         });
@@ -1916,13 +1794,16 @@ class TreeAnimateOpenDirective {
     _animateClose() {
         if (!this.innerElement)
             return;
-        let delta = this.animateSpeed;
-        let ease = this.animateAcceleration;
+        this.clearTimers();
+        let delta = this.animateSpeed();
+        let ease = this.animateAcceleration();
         let height = this.innerElement.getBoundingClientRect().height; // TBD use renderer
         // slowly decrease maxHeight to 0, starting from current height
-        const i = setInterval(() => {
-            if (this._isOpen || !this.innerElement)
-                return clearInterval(i);
+        this.closeInterval = setInterval(() => {
+            if (this.isOpen() || !this.innerElement) {
+                this.clearCloseInterval();
+                return;
+            }
             height -= delta;
             this.renderer.setStyle(this.innerElement, 'max-height', `${height}px`);
             delta *= ease;
@@ -1931,313 +1812,286 @@ class TreeAnimateOpenDirective {
                 // after animation complete - remove child element
                 this.viewContainerRef.clear();
                 this.innerElement = null;
-                clearInterval(i);
+                this.clearCloseInterval();
             }
         }, 17);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeAnimateOpenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: TreeAnimateOpenDirective, isStandalone: true, selector: "[treeAnimateOpen]", inputs: { animateSpeed: ["treeAnimateOpenSpeed", "animateSpeed"], animateAcceleration: ["treeAnimateOpenAcceleration", "animateAcceleration"], isEnabled: ["treeAnimateOpenEnabled", "isEnabled"], isOpen: ["treeAnimateOpen", "isOpen"] }, ngImport: i0 }); }
+    ngOnDestroy() {
+        this.clearTimers();
+    }
+    clearTimers() {
+        if (this.startOpenTimeout !== null) {
+            clearTimeout(this.startOpenTimeout);
+            this.startOpenTimeout = null;
+        }
+        this.clearOpenInterval();
+        this.clearCloseInterval();
+    }
+    clearOpenInterval() {
+        if (this.openInterval !== null) {
+            clearInterval(this.openInterval);
+            this.openInterval = null;
+        }
+    }
+    clearCloseInterval() {
+        if (this.closeInterval !== null) {
+            clearInterval(this.closeInterval);
+            this.closeInterval = null;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeAnimateOpenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: TreeAnimateOpenDirective, isStandalone: true, selector: "[treeAnimateOpen]", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "treeAnimateOpen", isSignal: true, isRequired: false, transformFunction: null }, animateSpeed: { classPropertyName: "animateSpeed", publicName: "treeAnimateOpenSpeed", isSignal: true, isRequired: false, transformFunction: null }, animateAcceleration: { classPropertyName: "animateAcceleration", publicName: "treeAnimateOpenAcceleration", isSignal: true, isRequired: false, transformFunction: null }, isEnabled: { classPropertyName: "isEnabled", publicName: "treeAnimateOpenEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeAnimateOpenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeAnimateOpenDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeAnimateOpen]' }]
-        }], propDecorators: { animateSpeed: [{
-                type: Input,
-                args: ['treeAnimateOpenSpeed']
-            }], animateAcceleration: [{
-                type: Input,
-                args: ['treeAnimateOpenAcceleration']
-            }], isEnabled: [{
-                type: Input,
-                args: ['treeAnimateOpenEnabled']
-            }], isOpen: [{
-                type: Input,
-                args: ['treeAnimateOpen']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeAnimateOpen", required: false }] }], animateSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeAnimateOpenSpeed", required: false }] }], animateAcceleration: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeAnimateOpenAcceleration", required: false }] }], isEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeAnimateOpenEnabled", required: false }] }] } });
 
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 class TreeNodeChildrenComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeChildrenComponent, isStandalone: true, selector: "tree-node-children", inputs: { node: "node", templates: "templates" }, ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div
-        [class.tree-children]="true"
-        [class.tree-children-no-padding]="node.options.levelPadding"
-        *treeAnimateOpen="
-          node.isExpanded;
-          speed: node.options.animateSpeed;
-          acceleration: node.options.animateAcceleration;
-          enabled: node.options.animateExpand
-        "
+    constructor() {
+        this.node = input(...(ngDevMode ? [undefined, { debugName: "node" }] : []));
+        this.templates = input(undefined, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+        this.children = computed(() => this.node().children, ...(ngDevMode ? [{ debugName: "children" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeChildrenComponent, isStandalone: true, selector: "tree-node-children", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      [class.tree-children]="true"
+      [class.tree-children-no-padding]="node().options.levelPadding"
+      *treeAnimateOpen="
+        node().isExpanded;
+        speed: node().options.animateSpeed;
+        acceleration: node().options.animateAcceleration;
+        enabled: node().options.animateExpand
+      "
+    >
+      @if (children()) {
+      <tree-node-collection
+        [nodes]="children()"
+        [templates]="templates()"
+        [treeModel]="node().treeModel"
       >
-        <tree-node-collection
-          *ngIf="node.children"
-          [nodes]="node.children"
-          [templates]="templates"
-          [treeModel]="node.treeModel"
-        >
-        </tree-node-collection>
-        <tree-loading-component
-          [style.padding-left]="node.getNodePadding()"
-          class="tree-node-loading"
-          *ngIf="!node.children"
-          [template]="templates.loadingTemplate"
-          [node]="node"
-        ></tree-loading-component>
-      </div>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => TreeMobxAutorunDirective), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }, { kind: "directive", type: i0.forwardRef(() => TreeAnimateOpenDirective), selector: "[treeAnimateOpen]", inputs: ["treeAnimateOpenSpeed", "treeAnimateOpenAcceleration", "treeAnimateOpenEnabled", "treeAnimateOpen"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => TreeNodeCollectionComponent), selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: i0.forwardRef(() => LoadingComponent), selector: "tree-loading-component", inputs: ["template", "node"] }], encapsulation: i0.ViewEncapsulation.None }); }
+      </tree-node-collection>
+      } @if (!children()) {
+      <tree-loading-component
+        [style.padding-left]="node().getNodePadding()"
+        class="tree-node-loading"
+        [template]="templates().loadingTemplate"
+        [node]="node()"
+      ></tree-loading-component>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => TreeAnimateOpenDirective), selector: "[treeAnimateOpen]", inputs: ["treeAnimateOpen", "treeAnimateOpenSpeed", "treeAnimateOpenAcceleration", "treeAnimateOpenEnabled"] }, { kind: "component", type: i0.forwardRef(() => TreeNodeCollectionComponent), selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: i0.forwardRef(() => LoadingComponent), selector: "tree-loading-component", inputs: ["template", "node"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-children', encapsulation: ViewEncapsulation.None, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div
-        [class.tree-children]="true"
-        [class.tree-children-no-padding]="node.options.levelPadding"
-        *treeAnimateOpen="
-          node.isExpanded;
-          speed: node.options.animateSpeed;
-          acceleration: node.options.animateAcceleration;
-          enabled: node.options.animateExpand
-        "
+    <div
+      [class.tree-children]="true"
+      [class.tree-children-no-padding]="node().options.levelPadding"
+      *treeAnimateOpen="
+        node().isExpanded;
+        speed: node().options.animateSpeed;
+        acceleration: node().options.animateAcceleration;
+        enabled: node().options.animateExpand
+      "
+    >
+      @if (children()) {
+      <tree-node-collection
+        [nodes]="children()"
+        [templates]="templates()"
+        [treeModel]="node().treeModel"
       >
-        <tree-node-collection
-          *ngIf="node.children"
-          [nodes]="node.children"
-          [templates]="templates"
-          [treeModel]="node.treeModel"
-        >
-        </tree-node-collection>
-        <tree-loading-component
-          [style.padding-left]="node.getNodePadding()"
-          class="tree-node-loading"
-          *ngIf="!node.children"
-          [template]="templates.loadingTemplate"
-          [node]="node"
-        ></tree-loading-component>
-      </div>
-    </ng-container>
-  `, imports: [TreeMobxAutorunDirective, TreeAnimateOpenDirective, NgIf, forwardRef((() => TreeNodeCollectionComponent)), LoadingComponent] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], templates: [{
-                type: Input
-            }] } });
+      </tree-node-collection>
+      } @if (!children()) {
+      <tree-loading-component
+        [style.padding-left]="node().getNodePadding()"
+        class="tree-node-loading"
+        [template]="templates().loadingTemplate"
+        [node]="node()"
+      ></tree-loading-component>
+      }
+    </div>
+  `, imports: [
+                        TreeAnimateOpenDirective,
+                        forwardRef((() => TreeNodeCollectionComponent)),
+                        LoadingComponent
+                    ] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
 class TreeNodeCollectionComponent {
     constructor() {
-        this._dispose = [];
-    }
-    get nodes() {
-        return this._nodes;
-    }
-    set nodes(nodes) {
-        this.setNodes(nodes);
-    }
-    get marginTop() {
-        const firstNode = this.viewportNodes && this.viewportNodes.length && this.viewportNodes[0];
-        const relativePosition = firstNode && firstNode.parent
-            ? firstNode.position -
-                firstNode.parent.position -
-                firstNode.parent.getSelfHeight()
-            : 0;
-        return `${relativePosition}px`;
-    }
-    setNodes(nodes) {
-        this._nodes = nodes;
+        this.nodes = input(undefined, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.treeModel = input(undefined, ...(ngDevMode ? [{ debugName: "treeModel" }] : []));
+        this.injector = inject(Injector);
+        this.templates = input(undefined, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+        this.viewportNodes = signal([], ...(ngDevMode ? [{ debugName: "viewportNodes" }] : []));
+        this.marginTop = computed(() => {
+            const nodes = this.viewportNodes();
+            const firstNode = nodes && nodes.length && nodes[0];
+            const relativePosition = firstNode && firstNode.parent
+                ? firstNode.position -
+                    firstNode.parent.position -
+                    firstNode.parent.getSelfHeight()
+                : 0;
+            return `${relativePosition}px`;
+        }, ...(ngDevMode ? [{ debugName: "marginTop" }] : []));
+        this._disposeEffects = [];
     }
     ngOnInit() {
-        this.virtualScroll = this.treeModel.virtualScroll;
-        this._dispose = [
-            // return node indexes so we can compare structurally,
-            reaction(() => {
-                return this.virtualScroll
-                    .getViewportNodes(this.nodes)
-                    .map(n => n.index);
-            }, nodeIndexes => {
-                this.viewportNodes = nodeIndexes.map(i => this.nodes[i]);
-            }, { compareStructural: true, fireImmediately: true }),
-            reaction(() => this.nodes, nodes => {
-                this.viewportNodes = this.virtualScroll.getViewportNodes(nodes);
-            })
-        ];
+        this.virtualScroll = this.treeModel().virtualScroll;
+        const viewportEffect = effect(() => {
+            const nodes = this.nodes();
+            if (nodes && this.virtualScroll) {
+                const viewportNodes = this.virtualScroll.getViewportNodes(nodes);
+                this.viewportNodes.set(viewportNodes);
+            }
+        }, ...(ngDevMode ? [{ debugName: "viewportEffect", injector: this.injector }] : [{ injector: this.injector }]));
+        this._disposeEffects = [() => viewportEffect.destroy()];
     }
     ngOnDestroy() {
-        this._dispose.forEach(d => d());
+        this._disposeEffects.forEach(d => d());
     }
     trackNode(index, node) {
         return node.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeCollectionComponent, isStandalone: true, selector: "tree-node-collection", inputs: { nodes: "nodes", treeModel: "treeModel", templates: "templates" }, ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div [style.margin-top]="marginTop">
-        <tree-node
-          *ngFor="let node of viewportNodes; let i = index; trackBy: trackNode"
-          [node]="node"
-          [index]="i"
-          [templates]="templates"
-        >
-        </tree-node>
-      </div>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => TreeMobxAutorunDirective), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }, { kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => TreeNodeComponent), selector: "TreeNode, tree-node", inputs: ["node", "index", "templates"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeCollectionComponent, isStandalone: true, selector: "tree-node-collection", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, treeModel: { classPropertyName: "treeModel", publicName: "treeModel", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [style.margin-top]="marginTop()">
+      @for (node of viewportNodes(); track trackNode(i, node); let i = $index) {
+      <tree-node [node]="node" [index]="i" [templates]="templates()">
+      </tree-node>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => TreeNodeComponent), selector: "TreeNode, tree-node", inputs: ["node", "index", "templates"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-__decorate([
-    observable
-], TreeNodeCollectionComponent.prototype, "_nodes", void 0);
-__decorate([
-    observable
-], TreeNodeCollectionComponent.prototype, "viewportNodes", void 0);
-__decorate([
-    computed
-], TreeNodeCollectionComponent.prototype, "marginTop", null);
-__decorate([
-    action
-], TreeNodeCollectionComponent.prototype, "setNodes", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tree-node-collection',
                     encapsulation: ViewEncapsulation.None,
                     template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div [style.margin-top]="marginTop">
-        <tree-node
-          *ngFor="let node of viewportNodes; let i = index; trackBy: trackNode"
-          [node]="node"
-          [index]="i"
-          [templates]="templates"
-        >
-        </tree-node>
-      </div>
-    </ng-container>
+    <div [style.margin-top]="marginTop()">
+      @for (node of viewportNodes(); track trackNode(i, node); let i = $index) {
+      <tree-node [node]="node" [index]="i" [templates]="templates()">
+      </tree-node>
+      }
+    </div>
   `,
-                    imports: [TreeMobxAutorunDirective, NgFor, forwardRef((() => TreeNodeComponent))]
+                    imports: [forwardRef((() => TreeNodeComponent))]
                 }]
-        }], propDecorators: { nodes: [{
-                type: Input
-            }], treeModel: [{
-                type: Input
-            }], _nodes: [], templates: [{
-                type: Input
-            }], viewportNodes: [], marginTop: [], setNodes: [] } });
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], treeModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeModel", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
 class TreeNodeComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeNodeComponent, isStandalone: true, selector: "TreeNode, tree-node", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div
-        *ngIf="!templates.treeNodeFullTemplate"
-        [class]="node.getClass()"
-        [class.tree-node]="true"
-        [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
-        [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
-        [class.tree-node-leaf]="node.isLeaf"
-        [class.tree-node-active]="node.isActive"
-        [class.tree-node-focused]="node.isFocused"
-      >
-        <tree-node-drop-slot
-          *ngIf="index === 0"
-          [dropIndex]="node.index"
-          [node]="node.parent"
-        ></tree-node-drop-slot>
+    constructor() {
+        this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index" }] : []));
+        this.templates = input(...(ngDevMode ? [undefined, { debugName: "templates" }] : []));
+        this.treeNodeFullTemplate = computed(() => this.templates().treeNodeFullTemplate, ...(ngDevMode ? [{ debugName: "treeNodeFullTemplate" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeNodeComponent, isStandalone: true, selector: "TreeNode, tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (!treeNodeFullTemplate()) {
+    <div
+      [class]="node().getClass()"
+      [class.tree-node]="true"
+      [class.tree-node-expanded]="node().isExpanded && node().hasChildren"
+      [class.tree-node-collapsed]="node().isCollapsed && node().hasChildren"
+      [class.tree-node-leaf]="node().isLeaf"
+      [class.tree-node-active]="node().isActive"
+      [class.tree-node-focused]="node().isFocused"
+    >
+      @if (index() === 0) {
+      <tree-node-drop-slot
+        [dropIndex]="node().index"
+        [node]="node().parent"
+      ></tree-node-drop-slot>
+      }
 
-        <tree-node-wrapper
-          [node]="node"
-          [index]="index"
-          [templates]="templates"
-        ></tree-node-wrapper>
+      <tree-node-wrapper
+        [node]="node()"
+        [index]="index()"
+        [templates]="templates()"
+      ></tree-node-wrapper>
 
-        <tree-node-children
-          [node]="node"
-          [templates]="templates"
-        ></tree-node-children>
-        <tree-node-drop-slot
-          [dropIndex]="node.index + 1"
-          [node]="node.parent"
-        ></tree-node-drop-slot>
-      </div>
-      <ng-container
-        [ngTemplateOutlet]="templates.treeNodeFullTemplate"
-        [ngTemplateOutletContext]="{
-          $implicit: node,
-          node: node,
-          index: index,
-          templates: templates
-        }"
-      >
-      </ng-container>
+      <tree-node-children
+        [node]="node()"
+        [templates]="templates()"
+      ></tree-node-children>
+      <tree-node-drop-slot
+        [dropIndex]="node().index + 1"
+        [node]="node().parent"
+      ></tree-node-drop-slot>
+    </div>
+    }
+    <ng-container
+      [ngTemplateOutlet]="treeNodeFullTemplate()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index(),
+        templates: templates()
+      }"
+    >
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: TreeNodeWrapperComponent, selector: "tree-node-wrapper", inputs: ["node", "index", "templates"] }, { kind: "component", type: TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: TreeNodeWrapperComponent, selector: "tree-node-wrapper", inputs: ["node", "index", "templates"] }, { kind: "component", type: TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNode, tree-node', encapsulation: ViewEncapsulation.None, template: `
-    <ng-container *treeMobxAutorun="{ dontDetach: true }">
-      <div
-        *ngIf="!templates.treeNodeFullTemplate"
-        [class]="node.getClass()"
-        [class.tree-node]="true"
-        [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
-        [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
-        [class.tree-node-leaf]="node.isLeaf"
-        [class.tree-node-active]="node.isActive"
-        [class.tree-node-focused]="node.isFocused"
-      >
-        <tree-node-drop-slot
-          *ngIf="index === 0"
-          [dropIndex]="node.index"
-          [node]="node.parent"
-        ></tree-node-drop-slot>
+    @if (!treeNodeFullTemplate()) {
+    <div
+      [class]="node().getClass()"
+      [class.tree-node]="true"
+      [class.tree-node-expanded]="node().isExpanded && node().hasChildren"
+      [class.tree-node-collapsed]="node().isCollapsed && node().hasChildren"
+      [class.tree-node-leaf]="node().isLeaf"
+      [class.tree-node-active]="node().isActive"
+      [class.tree-node-focused]="node().isFocused"
+    >
+      @if (index() === 0) {
+      <tree-node-drop-slot
+        [dropIndex]="node().index"
+        [node]="node().parent"
+      ></tree-node-drop-slot>
+      }
 
-        <tree-node-wrapper
-          [node]="node"
-          [index]="index"
-          [templates]="templates"
-        ></tree-node-wrapper>
+      <tree-node-wrapper
+        [node]="node()"
+        [index]="index()"
+        [templates]="templates()"
+      ></tree-node-wrapper>
 
-        <tree-node-children
-          [node]="node"
-          [templates]="templates"
-        ></tree-node-children>
-        <tree-node-drop-slot
-          [dropIndex]="node.index + 1"
-          [node]="node.parent"
-        ></tree-node-drop-slot>
-      </div>
-      <ng-container
-        [ngTemplateOutlet]="templates.treeNodeFullTemplate"
-        [ngTemplateOutletContext]="{
-          $implicit: node,
-          node: node,
-          index: index,
-          templates: templates
-        }"
-      >
-      </ng-container>
+      <tree-node-children
+        [node]="node()"
+        [templates]="templates()"
+      ></tree-node-children>
+      <tree-node-drop-slot
+        [dropIndex]="node().index + 1"
+        [node]="node().parent"
+      ></tree-node-drop-slot>
+    </div>
+    }
+    <ng-container
+      [ngTemplateOutlet]="treeNodeFullTemplate()"
+      [ngTemplateOutletContext]="{
+        $implicit: node(),
+        node: node(),
+        index: index(),
+        templates: templates()
+      }"
+    >
     </ng-container>
-  `, imports: [TreeMobxAutorunDirective, NgIf, TreeNodeDropSlot, TreeNodeWrapperComponent, TreeNodeChildrenComponent, NgTemplateOutlet] }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], templates: [{
-                type: Input
-            }] } });
+  `, imports: [
+                        TreeNodeDropSlot,
+                        TreeNodeWrapperComponent,
+                        TreeNodeChildrenComponent,
+                        NgTemplateOutlet
+                    ] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
 
 class TreeComponent {
     // Will be handled in ngOnChanges
-    set nodes(nodes) {
-    }
-    ;
-    set options(options) {
-    }
-    ;
+    set nodes(nodes) { }
+    set options(options) { }
     set focused(value) {
         this.treeModel.setFocus(value);
     }
@@ -2248,8 +2102,8 @@ class TreeComponent {
         this.treeModel = inject(TreeModel);
         this.treeDraggedElement = inject(TreeDraggedElement);
         const treeModel = this.treeModel;
-        treeModel.eventNames.forEach((name) => this[name] = new EventEmitter());
-        treeModel.subscribeToState((state) => this.stateChange.emit(state));
+        treeModel.eventNames.forEach(name => (this[name] = new EventEmitter()));
+        treeModel.subscribeToState(state => this.stateChange.emit(state));
     }
     onKeydown($event) {
         if (!this.treeModel.isFocused)
@@ -2261,7 +2115,11 @@ class TreeComponent {
     }
     onMousedown($event) {
         function isOutsideClick(startElement, nodeName) {
-            return !startElement ? true : startElement.localName === nodeName ? false : isOutsideClick(startElement.parentElement, nodeName);
+            return !startElement
+                ? true
+                : startElement.localName === nodeName
+                    ? false
+                    : isOutsideClick(startElement.parentElement, nodeName);
         }
         if (isOutsideClick($event.target, 'tree-root')) {
             this.treeModel.setFocus(false);
@@ -2287,62 +2145,76 @@ class TreeComponent {
             return obj;
         }, {});
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: TreeComponent, isStandalone: true, selector: "Tree, tree-root", inputs: { nodes: "nodes", options: "options", focused: "focused", state: "state" }, outputs: { toggleExpanded: "toggleExpanded", activate: "activate", deactivate: "deactivate", nodeActivate: "nodeActivate", nodeDeactivate: "nodeDeactivate", select: "select", deselect: "deselect", focus: "focus", blur: "blur", updateData: "updateData", initialized: "initialized", moveNode: "moveNode", copyNode: "copyNode", loadNodeChildren: "loadNodeChildren", changeFilter: "changeFilter", event: "event", stateChange: "stateChange" }, host: { listeners: { "body: keydown": "onKeydown($event)", "body: mousedown": "onMousedown($event)" } }, providers: [TreeModel], queries: [{ propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }, { propertyName: "treeNodeTemplate", first: true, predicate: ["treeNodeTemplate"], descendants: true }, { propertyName: "treeNodeWrapperTemplate", first: true, predicate: ["treeNodeWrapperTemplate"], descendants: true }, { propertyName: "treeNodeFullTemplate", first: true, predicate: ["treeNodeFullTemplate"], descendants: true }], viewQueries: [{ propertyName: "viewportComponent", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-      <tree-viewport #viewport>
-          <div
-                  class="angular-tree-component"
-                  [class.node-dragging]="treeDraggedElement.isDragging()"
-                  [class.angular-tree-component-rtl]="treeModel.options.rtl">
-              <tree-node-collection
-                      *ngIf="treeModel.roots"
-                      [nodes]="treeModel.roots"
-                      [treeModel]="treeModel"
-                      [templates]="{
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TreeComponent, isStandalone: true, selector: "Tree, tree-root", inputs: { nodes: "nodes", options: "options", focused: "focused", state: "state" }, outputs: { toggleExpanded: "toggleExpanded", activate: "activate", deactivate: "deactivate", nodeActivate: "nodeActivate", nodeDeactivate: "nodeDeactivate", select: "select", deselect: "deselect", focus: "focus", blur: "blur", updateData: "updateData", initialized: "initialized", moveNode: "moveNode", copyNode: "copyNode", loadNodeChildren: "loadNodeChildren", changeFilter: "changeFilter", event: "event", stateChange: "stateChange" }, host: { listeners: { "body: keydown": "onKeydown($event)", "body: mousedown": "onMousedown($event)" } }, providers: [TreeModel], queries: [{ propertyName: "loadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true }, { propertyName: "treeNodeTemplate", first: true, predicate: ["treeNodeTemplate"], descendants: true }, { propertyName: "treeNodeWrapperTemplate", first: true, predicate: ["treeNodeWrapperTemplate"], descendants: true }, { propertyName: "treeNodeFullTemplate", first: true, predicate: ["treeNodeFullTemplate"], descendants: true }], viewQueries: [{ propertyName: "viewportComponent", first: true, predicate: ["viewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <tree-viewport #viewport>
+      <div
+        class="angular-tree-component"
+        [class.node-dragging]="treeDraggedElement.isDragging()"
+        [class.angular-tree-component-rtl]="treeModel.options.rtl"
+        >
+        @if (treeModel.roots) {
+          <tree-node-collection
+            [nodes]="treeModel.roots"
+            [treeModel]="treeModel"
+          [templates]="{
             loadingTemplate: loadingTemplate,
             treeNodeTemplate: treeNodeTemplate,
             treeNodeWrapperTemplate: treeNodeWrapperTemplate,
             treeNodeFullTemplate: treeNodeFullTemplate
-          }">
-              </tree-node-collection>
-              <tree-node-drop-slot
-                      class="empty-tree-drop-slot"
-                      *ngIf="treeModel.isEmptyTree()"
-                      [dropIndex]="0"
-                      [node]="treeModel.virtualRoot">
-              </tree-node-drop-slot>
-          </div>
-      </tree-viewport>
-  `, isInline: true, dependencies: [{ kind: "component", type: TreeViewportComponent, selector: "tree-viewport" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeCollectionComponent, selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }] }); }
+          }"
+            >
+          </tree-node-collection>
+        }
+        @if (treeModel.isEmptyTree()) {
+          <tree-node-drop-slot
+            class="empty-tree-drop-slot"
+            [dropIndex]="0"
+            [node]="treeModel.virtualRoot"
+            >
+          </tree-node-drop-slot>
+        }
+      </div>
+    </tree-viewport>
+    `, isInline: true, dependencies: [{ kind: "component", type: TreeViewportComponent, selector: "tree-viewport" }, { kind: "component", type: TreeNodeCollectionComponent, selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Tree, tree-root', providers: [TreeModel], template: `
-      <tree-viewport #viewport>
-          <div
-                  class="angular-tree-component"
-                  [class.node-dragging]="treeDraggedElement.isDragging()"
-                  [class.angular-tree-component-rtl]="treeModel.options.rtl">
-              <tree-node-collection
-                      *ngIf="treeModel.roots"
-                      [nodes]="treeModel.roots"
-                      [treeModel]="treeModel"
-                      [templates]="{
+    <tree-viewport #viewport>
+      <div
+        class="angular-tree-component"
+        [class.node-dragging]="treeDraggedElement.isDragging()"
+        [class.angular-tree-component-rtl]="treeModel.options.rtl"
+        >
+        @if (treeModel.roots) {
+          <tree-node-collection
+            [nodes]="treeModel.roots"
+            [treeModel]="treeModel"
+          [templates]="{
             loadingTemplate: loadingTemplate,
             treeNodeTemplate: treeNodeTemplate,
             treeNodeWrapperTemplate: treeNodeWrapperTemplate,
             treeNodeFullTemplate: treeNodeFullTemplate
-          }">
-              </tree-node-collection>
-              <tree-node-drop-slot
-                      class="empty-tree-drop-slot"
-                      *ngIf="treeModel.isEmptyTree()"
-                      [dropIndex]="0"
-                      [node]="treeModel.virtualRoot">
-              </tree-node-drop-slot>
-          </div>
-      </tree-viewport>
-  `, imports: [TreeViewportComponent, NgIf, TreeNodeCollectionComponent, TreeNodeDropSlot] }]
+          }"
+            >
+          </tree-node-collection>
+        }
+        @if (treeModel.isEmptyTree()) {
+          <tree-node-drop-slot
+            class="empty-tree-drop-slot"
+            [dropIndex]="0"
+            [node]="treeModel.virtualRoot"
+            >
+          </tree-node-drop-slot>
+        }
+      </div>
+    </tree-viewport>
+    `, imports: [
+                        TreeViewportComponent,
+                        TreeNodeCollectionComponent,
+                        TreeNodeDropSlot
+                    ] }]
         }], ctorParameters: () => [], propDecorators: { loadingTemplate: [{
                 type: ContentChild,
                 args: ['loadingTemplate', { static: false }]
@@ -2409,8 +2281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class TreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: TreeModule, imports: [CommonModule, TreeComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, imports: [CommonModule, TreeComponent,
             TreeNodeComponent,
             TreeNodeContent,
             LoadingComponent,
@@ -2423,8 +2295,7 @@ class TreeModule {
             TreeViewportComponent,
             TreeNodeWrapperComponent,
             TreeNodeCheckboxComponent,
-            TreeAnimateOpenDirective,
-            TreeMobxAutorunDirective], exports: [TreeComponent,
+            TreeAnimateOpenDirective], exports: [TreeComponent,
             TreeNodeComponent,
             TreeNodeContent,
             LoadingComponent,
@@ -2437,11 +2308,10 @@ class TreeModule {
             TreeViewportComponent,
             TreeNodeWrapperComponent,
             TreeNodeCheckboxComponent,
-            TreeAnimateOpenDirective,
-            TreeMobxAutorunDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModule, imports: [CommonModule] }); }
+            TreeAnimateOpenDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -2459,8 +2329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         TreeViewportComponent,
                         TreeNodeWrapperComponent,
                         TreeNodeCheckboxComponent,
-                        TreeAnimateOpenDirective,
-                        TreeMobxAutorunDirective
+                        TreeAnimateOpenDirective
                     ],
                     imports: [CommonModule, TreeComponent,
                         TreeNodeComponent,
@@ -2475,8 +2344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         TreeViewportComponent,
                         TreeNodeWrapperComponent,
                         TreeNodeCheckboxComponent,
-                        TreeAnimateOpenDirective,
-                        TreeMobxAutorunDirective],
+                        TreeAnimateOpenDirective],
                     providers: []
                 }]
         }] });
@@ -2489,5 +2357,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KEYS, LoadingComponent, TREE_ACTIONS, TreeAnimateOpenDirective, TreeComponent, TreeDragDirective, TreeDraggedElement, TreeDropDirective, TreeMobxAutorunDirective, TreeModel, TreeModule, TreeNode, TreeNodeCheckboxComponent, TreeNodeChildrenComponent, TreeNodeCollectionComponent, TreeNodeComponent, TreeNodeContent, TreeNodeDropSlot, TreeNodeExpanderComponent, TreeNodeWrapperComponent, TreeViewportComponent, TreeVirtualScroll };
+export { KEYS, LoadingComponent, TREE_ACTIONS, TreeAnimateOpenDirective, TreeComponent, TreeDragDirective, TreeDraggedElement, TreeDropDirective, TreeModel, TreeModule, TreeNode, TreeNodeCheckboxComponent, TreeNodeChildrenComponent, TreeNodeCollectionComponent, TreeNodeComponent, TreeNodeContent, TreeNodeDropSlot, TreeNodeExpanderComponent, TreeNodeWrapperComponent, TreeViewportComponent, TreeVirtualScroll };
 //# sourceMappingURL=ali-hm-angular-tree-component.mjs.map