@ali-hm/angular-tree-component 20.3.4 → 21.0.2

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, effect, Injectable, inject, input, ViewEncapsulation, Component, ElementRef, Injector, Renderer2, NgZone, output, HostListener, Directive, computed, TemplateRef, ViewContainerRef, forwardRef, EventEmitter, Output, Input, ViewChild, ContentChild, NgModule } from '@angular/core';
-import { NgTemplateOutlet, NgIf, CommonModule } from '@angular/common';
+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,
@@ -244,7 +244,7 @@ class TreeNode {
             return this.options.allowDragoverStyling;
         };
         if (this.id === undefined || this.id === null) {
-            this.id = uuid();
+            this.id = this.treeModel.uuid();
         } // Make sure there's a unique id without overriding existing ids to work with immutable data structures
         this.index = index;
         if (this.getField('children')) {
@@ -524,9 +524,6 @@ class TreeNode {
             .map((c, index) => new TreeNode(c, this, this.treeModel, index));
     }
 }
-function uuid() {
-    return Math.floor(Math.random() * 10000000000000);
-}
 
 class TreeModel {
     constructor() {
@@ -538,10 +535,12 @@ class TreeModel {
         this._selectedLeafNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_selectedLeafNodeIds" }] : []));
         this._activeNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_activeNodeIds" }] : []));
         this._hiddenNodeIds = signal({}, ...(ngDevMode ? [{ debugName: "_hiddenNodeIds" }] : []));
+        this._hiddenNodes = [];
         this._focusedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "_focusedNodeId" }] : []));
         this._virtualRoot = signal(undefined, ...(ngDevMode ? [{ debugName: "_virtualRoot" }] : []));
         this.firstUpdate = true;
         this.subscriptions = [];
+        this.generatedIds = {};
     }
     static { this.focusedTree = null; }
     // Public getters/setters to maintain API compatibility
@@ -567,10 +566,14 @@ class TreeModel {
         return nodes.filter(Boolean);
     }
     get hiddenNodes() {
-        const ids = this._hiddenNodeIds();
-        const nodes = Object.keys(ids)
-            .filter((id) => ids[id])
-            .map((id) => this.getNodeById(id));
+        /*const ids = this._hiddenNodeIds();
+        var ids2 = Object.keys(ids).filter((id) => ids[id]);
+        //const nodes = ids2.map((id) => this.getNodeById(id));
+        var nodes=[];
+        for(var i=0;i<ids2.length;i++){
+          nodes.push(this.getNodeById(ids2[i]));
+        }*/
+        const nodes = this._hiddenNodes;
         return nodes.filter(Boolean);
     }
     get selectedLeafNodes() {
@@ -840,8 +843,10 @@ class TreeModel {
             return;
         }
         const ids = {};
-        this.roots.forEach((node) => this._filterNode(ids, node, filterFn, autoShow));
+        var hiddenNodes = [];
+        this.roots.forEach((node) => this._filterNode(ids, node, filterFn, autoShow, hiddenNodes));
         this._hiddenNodeIds.set(ids);
+        this._hiddenNodes = hiddenNodes;
         this.fireEvent({ eventName: TREE_EVENTS.changeFilter });
     }
     clearFilter() {
@@ -924,13 +929,13 @@ class TreeModel {
         this._calculateExpandedNodes();
     }
     // private methods
-    _filterNode(ids, node, filterFn, autoShow) {
+    _filterNode(ids, node, filterFn, autoShow, hiddenNodes) {
         // if node passes function then it's visible
         let isVisible = filterFn(node);
         if (node.children) {
             // if one of node's children passes filter then this node is also visible
             node.children.forEach((child) => {
-                if (this._filterNode(ids, child, filterFn, autoShow)) {
+                if (this._filterNode(ids, child, filterFn, autoShow, hiddenNodes)) {
                     isVisible = true;
                 }
             });
@@ -938,6 +943,7 @@ class TreeModel {
         // mark node as hidden
         if (!isVisible) {
             ids[node.id] = true;
+            hiddenNodes.push(node);
         }
         // auto expand parents to make sure the filtered nodes are visible
         if (autoShow && isVisible) {
@@ -972,10 +978,18 @@ class TreeModel {
     _setActiveNodeMulti(node, 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 }); }
+    uuid() {
+        var res = Math.floor(Math.random() * 10000000000000);
+        while (this.generatedIds[res]) {
+            res = Math.floor(Math.random() * 10000000000000);
+        }
+        this.generatedIds[res] = true;
+        return res;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeModel }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeModel, decorators: [{
             type: Injectable
         }] });
 
@@ -992,10 +1006,10 @@ 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.3", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeDraggedElement, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1043,19 +1057,19 @@ class TreeVirtualScroll {
             const totalHeight = this.totalHeight;
             const viewportHeight = this._viewportHeight();
             this.fixScroll();
-        }, ...(ngDevMode ? [{ debugName: "fixScrollEffect", injector }] : [{ injector }]));
+        }, { ...(ngDevMode ? { debugName: "fixScrollEffect" } : {}), injector });
         const rootsEffect = effect(() => {
             const roots = this.treeModel.roots;
             fn();
-        }, ...(ngDevMode ? [{ debugName: "rootsEffect", injector }] : [{ injector }]));
+        }, { ...(ngDevMode ? { debugName: "rootsEffect" } : {}), injector });
         const expandedEffect = effect(() => {
             const expandedNodes = this.treeModel.expandedNodes;
             fn();
-        }, ...(ngDevMode ? [{ debugName: "expandedEffect", injector }] : [{ injector }]));
+        }, { ...(ngDevMode ? { debugName: "expandedEffect" } : {}), injector });
         const hiddenEffect = effect(() => {
             const hiddenNodes = this.treeModel.hiddenNodes;
             fn();
-        }, ...(ngDevMode ? [{ debugName: "hiddenEffect", injector }] : [{ injector }]));
+        }, { ...(ngDevMode ? { debugName: "hiddenEffect" } : {}), injector });
         this._dispose = [
             () => fixScrollEffect.destroy(),
             () => rootsEffect.destroy(),
@@ -1169,10 +1183,10 @@ 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.3", ngImport: i0, type: TreeVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeVirtualScroll }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeVirtualScroll, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeVirtualScroll, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 function binarySearch(nodes, condition, firstIndex = 0) {
@@ -1198,8 +1212,8 @@ class LoadingComponent {
         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: "20.3.3", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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>
     }
@@ -1210,7 +1224,7 @@ class LoadingComponent {
     </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: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{
                     encapsulation: ViewEncapsulation.None,
@@ -1227,16 +1241,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
   `,
                     imports: [NgTemplateOutlet]
                 }]
-        }] });
+        }], 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() {
@@ -1244,17 +1260,17 @@ class TreeViewportComponent {
         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() &&
@@ -1271,14 +1287,14 @@ 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeViewportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-viewport', providers: [TreeVirtualScroll], template: `
     <div [style.height]="getTotalHeight()">
@@ -1287,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
   `, imports: [] }]
         }], ctorParameters: () => [] });
 
-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 {
     allowDrop($event) {
@@ -1297,13 +1313,15 @@ class TreeDropDirective {
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.treeDraggedElement = inject(TreeDraggedElement);
-        this.ngZone = inject(NgZone);
         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);
@@ -1320,17 +1338,17 @@ class TreeDropDirective {
     }
     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)) {
@@ -1374,10 +1392,10 @@ class TreeDropDirective {
         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);
@@ -1385,13 +1403,13 @@ 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: "17.1.0", version: "20.3.3", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeDropDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeDrop]' }]
-        }], ctorParameters: () => [], propDecorators: { 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']]
             }] } });
@@ -1410,8 +1428,8 @@ class TreeNodeDropSlot {
     allowDrop(element, $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: "17.1.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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)"
@@ -1420,7 +1438,7 @@ class TreeNodeDropSlot {
     ></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.3", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNodeDropSlot, tree-node-drop-slot', encapsulation: ViewEncapsulation.None, template: `
     <div
@@ -1430,14 +1448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       [allowDragoverStyling]="true"
     ></div>
   `, imports: [TreeDropDirective] }]
-        }] });
+        }], 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 {
     constructor() {
         this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
     }
-    /** @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: "17.1.0", version: "20.3.3", type: TreeNodeCheckboxComponent, isStandalone: true, selector: "tree-node-checkbox", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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"
@@ -1447,7 +1465,7 @@ class TreeNodeCheckboxComponent {
     />
   `, 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.3", ngImport: i0, type: TreeNodeCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-checkbox', encapsulation: ViewEncapsulation.None, template: `
     <input
@@ -1458,15 +1476,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       [indeterminate]="node().isPartiallySelected"
     />
   `, imports: [] }]
-        }] });
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
 
 class TreeNodeExpanderComponent {
     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: "20.3.3", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: TreeNodeExpanderComponent, isStandalone: true, selector: "tree-node-expander", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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"
@@ -1481,7 +1499,7 @@ class TreeNodeExpanderComponent {
     }
   `, 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.3", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-expander', encapsulation: ViewEncapsulation.None, template: `
     @if (hasChildren()) {
@@ -1497,31 +1515,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
     <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.draggedElement = input(undefined, { ...(ngDevMode ? { debugName: "draggedElement" } : {}), 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');
     }
     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
@@ -1545,13 +1560,13 @@ class TreeDragDirective {
         }
         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: "17.1.0", version: "20.3.3", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeDragDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeDrag]' }]
-        }], ctorParameters: () => [], propDecorators: { 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: [{
@@ -1565,8 +1580,8 @@ class TreeNodeContent {
         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: "20.3.3", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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>
     }
@@ -1581,7 +1596,7 @@ class TreeNodeContent {
     </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.3", ngImport: i0, type: TreeNodeContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tree-node-content',
@@ -1602,7 +1617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
   `,
                     imports: [NgTemplateOutlet]
                 }]
-        }] });
+        }], 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 {
     constructor() {
@@ -1611,8 +1626,8 @@ class TreeNodeWrapperComponent {
         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: "20.3.3", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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) {
@@ -1658,7 +1673,7 @@ class TreeNodeWrapperComponent {
     </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.3", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-wrapper', encapsulation: ViewEncapsulation.None, template: `
     @if (!treeNodeWrapperTemplate()) {
@@ -1712,7 +1727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         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 {
@@ -1720,16 +1735,13 @@ class TreeAnimateOpenDirective {
         this.renderer = inject(Renderer2);
         this.templateRef = inject(TemplateRef);
         this.viewContainerRef = inject(ViewContainerRef);
-        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.isOpen = input(undefined, { ...(ngDevMode ? { debugName: "isOpen" } : {}), alias: 'treeAnimateOpen' });
+        this.animateSpeed = input(undefined, { ...(ngDevMode ? { debugName: "animateSpeed" } : {}), alias: 'treeAnimateOpenSpeed' });
+        this.animateAcceleration = input(undefined, { ...(ngDevMode ? { debugName: "animateAcceleration" } : {}), alias: 'treeAnimateOpenAcceleration' });
+        this.isEnabled = input(undefined, { ...(ngDevMode ? { debugName: "isEnabled" } : {}), alias: 'treeAnimateOpenEnabled' });
+        this.startOpenTimeout = null;
+        this.openInterval = null;
+        this.closeInterval = null;
         effect(() => {
             const value = this.isOpen();
             if (value) {
@@ -1751,21 +1763,26 @@ class TreeAnimateOpenDirective {
         this.innerElement = this.viewContainerRef.createEmbeddedView(this.templateRef).rootNodes[0];
     }
     _hide() {
+        this.clearTimers();
         this.viewContainerRef.clear();
         this.innerElement = null;
     }
     _animateOpen() {
+        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(() => {
+        this.startOpenTimeout = setTimeout(() => {
+            this.startOpenTimeout = null;
             // Allow inner element to create its content
-            const i = setInterval(() => {
-                if (!this.isOpen() || !this.innerElement)
-                    return clearInterval(i);
+            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`);
@@ -1777,7 +1794,7 @@ class TreeAnimateOpenDirective {
                 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);
         });
@@ -1785,13 +1802,16 @@ class TreeAnimateOpenDirective {
     _animateClose() {
         if (!this.innerElement)
             return;
+        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;
@@ -1800,17 +1820,40 @@ 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: "17.1.0", version: "20.3.3", 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 }); }
+    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.3", ngImport: i0, type: TreeAnimateOpenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeAnimateOpenDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[treeAnimateOpen]' }]
-        }], ctorParameters: () => [] });
+        }], 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 }] }] } });
 
 class TreeNodeChildrenComponent {
     constructor() {
@@ -1818,8 +1861,8 @@ class TreeNodeChildrenComponent {
         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: "20.3.3", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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"
@@ -1848,7 +1891,7 @@ class TreeNodeChildrenComponent {
     </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.3", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-children', encapsulation: ViewEncapsulation.None, template: `
     <div
@@ -1882,7 +1925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         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.nodes = input(undefined, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
@@ -1910,7 +1953,7 @@ class TreeNodeCollectionComponent {
                 const viewportNodes = this.virtualScroll.getViewportNodes(nodes);
                 this.viewportNodes.set(viewportNodes);
             }
-        }, ...(ngDevMode ? [{ debugName: "viewportEffect", injector: this.injector }] : [{ injector: this.injector }]));
+        }, { ...(ngDevMode ? { debugName: "viewportEffect" } : {}), injector: this.injector });
         this._disposeEffects = [() => viewportEffect.destroy()];
     }
     ngOnDestroy() {
@@ -1919,8 +1962,8 @@ class TreeNodeCollectionComponent {
     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: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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()">
@@ -1929,7 +1972,7 @@ class TreeNodeCollectionComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => TreeNodeComponent), selector: "TreeNode, tree-node", inputs: ["node", "index", "templates"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tree-node-collection',
@@ -1944,7 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
   `,
                     imports: [forwardRef((() => TreeNodeComponent))]
                 }]
-        }] });
+        }], 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 {
     constructor() {
         this.node = input(undefined, ...(ngDevMode ? [{ debugName: "node" }] : []));
@@ -1952,8 +1995,8 @@ class TreeNodeComponent {
         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: "20.3.3", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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()"
@@ -1999,7 +2042,7 @@ class TreeNodeComponent {
     </ng-container>
   `, 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.3", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNode, tree-node', encapsulation: ViewEncapsulation.None, template: `
     @if (!treeNodeFullTemplate()) {
@@ -2051,7 +2094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         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
@@ -2110,38 +2153,40 @@ 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: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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"
+        >
+        @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>
+            >
+          </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: "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"] }] }); }
+    `, 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.3", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Tree, tree-root', providers: [TreeModel], template: `
     <tree-viewport #viewport>
@@ -2149,31 +2194,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         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"
+        >
+        @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>
+            >
+          </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: [
+    `, imports: [
                         TreeViewportComponent,
-                        NgIf,
                         TreeNodeCollectionComponent,
                         TreeNodeDropSlot
                     ] }]
@@ -2243,8 +2289,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.3", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: TreeModule, imports: [CommonModule, TreeComponent,
             TreeNodeComponent,
             TreeNodeContent,
             LoadingComponent,
@@ -2271,9 +2317,9 @@ class TreeModule {
             TreeNodeWrapperComponent,
             TreeNodeCheckboxComponent,
             TreeAnimateOpenDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TreeModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", 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.3", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],