@ali-hm/angular-tree-component 19.1.2 → 20.0.3

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

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Injectable, Component, ViewEncapsulation, EventEmitter, Output, HostListener, ContentChild, ViewChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+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(templateRef, viewContainer) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.viewContainer = inject(ViewContainerRef);
         this.templateBindings = {};
     }
     ngOnInit() {
@@ -31,16 +30,13 @@ class TreeMobxAutorunDirective {
             this.dispose();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeMobxAutorunDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TreeMobxAutorunDirective, isStandalone: false, selector: "[treeMobxAutorun]", inputs: { treeMobxAutorun: "treeMobxAutorun" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeMobxAutorunDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: TreeMobxAutorunDirective, isStandalone: true, selector: "[treeMobxAutorun]", inputs: { treeMobxAutorun: "treeMobxAutorun" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeMobxAutorunDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeMobxAutorunDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[treeMobxAutorun]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { treeMobxAutorun: [{
+            args: [{ selector: '[treeMobxAutorun]' }]
+        }], propDecorators: { treeMobxAutorun: [{
                 type: Input
             }] } });
 
@@ -1045,8 +1041,8 @@ class TreeModel {
     _setActiveNodeMulti(node, value) {
         this.activeNodeIds = Object.assign({}, this.activeNodeIds, { [node.id]: value });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModel }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeModel }); }
 }
 __decorate$2([
     observable$1
@@ -1147,7 +1143,7 @@ __decorate$2([
 __decorate$2([
     action$1
 ], TreeModel.prototype, "setState", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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: [] } });
 
@@ -1164,10 +1160,10 @@ class TreeDraggedElement {
     isDragging() {
         return !!this.get();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDraggedElement, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeDraggedElement, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeDraggedElement, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDraggedElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeDraggedElement, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1189,12 +1185,13 @@ class TreeVirtualScroll {
     get totalHeight() {
         return this.treeModel.virtualRoot ? this.treeModel.virtualRoot.height : 0;
     }
-    constructor(treeModel) {
-        this.treeModel = treeModel;
+    constructor() {
+        this.treeModel = inject(TreeModel);
         this.yBlocks = 0;
         this.x = 0;
         this.viewportHeight = null;
         this.viewport = null;
+        const treeModel = this.treeModel;
         treeModel.virtualScroll = this;
         this._dispose = [autorun(() => this.fixScroll())];
     }
@@ -1315,8 +1312,8 @@ class TreeVirtualScroll {
         if (this.y > maxY)
             this._setYBlocks(maxY / Y_EPSILON);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeVirtualScroll, deps: [{ token: TreeModel }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeVirtualScroll }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeVirtualScroll, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeVirtualScroll }); }
 }
 __decorate$1([
     observable$1
@@ -1345,9 +1342,9 @@ __decorate$1([
 __decorate$1([
     action$1
 ], TreeVirtualScroll.prototype, "scrollIntoView", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeVirtualScroll, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeVirtualScroll, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: TreeModel }], propDecorators: { yBlocks: [], x: [], viewportHeight: [], y: [], totalHeight: [], _setYBlocks: [], recalcPositions: [], setViewport: [], scrollIntoView: [] } });
+        }], ctorParameters: () => [], propDecorators: { yBlocks: [], x: [], viewportHeight: [], y: [], totalHeight: [], _setYBlocks: [], recalcPositions: [], setViewport: [], scrollIntoView: [] } });
 function binarySearch(nodes, condition, firstIndex = 0) {
     let index = firstIndex;
     let toIndex = nodes.length - 1;
@@ -1367,16 +1364,16 @@ function binarySearch(nodes, condition, firstIndex = 0) {
 }
 
 class LoadingComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: LoadingComponent, isStandalone: false, selector: "tree-loading-component", inputs: { template: "template", node: "node" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: LoadingComponent, isStandalone: true, selector: "tree-loading-component", inputs: { template: "template", node: "node" }, ngImport: i0, template: `
     <span *ngIf="!template">loading...</span>
     <ng-container
       [ngTemplateOutlet]="template"
       [ngTemplateOutletContext]="{ $implicit: node }">
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{
                     encapsulation: ViewEncapsulation.None,
@@ -1388,7 +1385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
       [ngTemplateOutletContext]="{ $implicit: node }">
     </ng-container>
   `,
-                    standalone: false
+                    imports: [NgIf, NgTemplateOutlet]
                 }]
         }], propDecorators: { template: [{
                 type: Input
@@ -1396,6 +1393,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }] } });
 
+class TreeViewportComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.virtualScroll = inject(TreeVirtualScroll);
+        this.setViewport = this.throttle(() => {
+            this.virtualScroll.setViewport(this.elementRef.nativeElement);
+        }, 17);
+        this.scrollEventHandler = this.setViewport.bind(this);
+    }
+    ngOnInit() {
+        this.virtualScroll.init();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setViewport();
+            this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
+        });
+        let el = this.elementRef.nativeElement;
+        el.addEventListener('scroll', this.scrollEventHandler);
+    }
+    ngOnDestroy() {
+        this.virtualScroll.clear();
+        let el = this.elementRef.nativeElement;
+        el.removeEventListener('scroll', this.scrollEventHandler);
+    }
+    getTotalHeight() {
+        return ((this.virtualScroll.isEnabled() &&
+            this.virtualScroll.totalHeight + 'px') ||
+            'auto');
+    }
+    throttle(func, timeFrame) {
+        let lastTime = 0;
+        return function () {
+            let now = Date.now();
+            if (now - lastTime >= timeFrame) {
+                func();
+                lastTime = now;
+            }
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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] }]
+        }], 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_DISABLED_CLASS = 'is-dragging-over-disabled';
 class TreeDropDirective {
@@ -1409,11 +1480,11 @@ class TreeDropDirective {
     allowDrop($event) {
         return this._allowDrop(this.treeDraggedElement.get(), $event);
     }
-    constructor(el, renderer, treeDraggedElement, ngZone) {
-        this.el = el;
-        this.renderer = renderer;
-        this.treeDraggedElement = treeDraggedElement;
-        this.ngZone = ngZone;
+    constructor() {
+        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();
@@ -1491,16 +1562,13 @@ class TreeDropDirective {
     removeDisabledClass() {
         this.renderer.removeClass(this.el.nativeElement, DRAG_DISABLED_CLASS);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDropDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TreeDraggedElement }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TreeDropDirective, isStandalone: false, 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: "20.0.3", ngImport: i0, type: TreeDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeDropDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[treeDrop]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TreeDraggedElement }, { type: i0.NgZone }], propDecorators: { allowDragoverStyling: [{
+            args: [{ selector: '[treeDrop]' }]
+        }], ctorParameters: () => [], propDecorators: { allowDragoverStyling: [{
                 type: Input
             }], onDropCallback: [{
                 type: Output,
@@ -1531,8 +1599,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: "19.1.4", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeDropSlot, isStandalone: false, 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: "20.0.3", ngImport: i0, type: TreeNodeDropSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: TreeNodeDropSlot, isStandalone: true, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: { node: "node", dropIndex: "dropIndex" }, ngImport: i0, template: `
     <div
       class="node-drop-slot"
       (treeDrop)="onDrop($event)"
@@ -1541,7 +1609,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: "19.1.4", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeDropSlot, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNodeDropSlot, tree-node-drop-slot', encapsulation: ViewEncapsulation.None, template: `
     <div
@@ -1550,164 +1618,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
       [treeAllowDrop]="allowDrop.bind(this)"
       [allowDragoverStyling]="true">
     </div>
-  `, standalone: false }]
+  `, imports: [TreeDropDirective] }]
         }], propDecorators: { node: [{
                 type: Input
             }], dropIndex: [{
                 type: Input
             }] } });
 
-// 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 EASE_ACCELERATION = 1.005;
-class TreeAnimateOpenDirective {
-    set isOpen(value) {
-        if (value) {
-            this._show();
-            if (this.isEnabled && this._isOpen === false) {
-                this._animateOpen();
-            }
-        }
-        else {
-            this.isEnabled ? this._animateClose() : this._hide();
-        }
-        this._isOpen = !!value;
-    }
-    ;
-    constructor(renderer, templateRef, viewContainerRef) {
-        this.renderer = renderer;
-        this.templateRef = templateRef;
-        this.viewContainerRef = viewContainerRef;
-    }
-    _show() {
-        if (this.innerElement)
-            return;
-        // create child view
-        this.innerElement = this.viewContainerRef.createEmbeddedView(this.templateRef).rootNodes[0];
-    }
-    _hide() {
-        this.viewContainerRef.clear();
-        this.innerElement = null;
-    }
-    _animateOpen() {
-        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);
-                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
-                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);
-                }
-            }, 17);
-        });
-    }
-    _animateClose() {
-        if (!this.innerElement)
-            return;
-        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);
-            height -= delta;
-            this.renderer.setStyle(this.innerElement, 'max-height', `${height}px`);
-            delta *= ease;
-            ease *= EASE_ACCELERATION;
-            if (height <= 0) {
-                // after animation complete - remove child element
-                this.viewContainerRef.clear();
-                this.innerElement = null;
-                clearInterval(i);
-            }
-        }, 17);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeAnimateOpenDirective, deps: [{ token: i0.Renderer2 }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TreeAnimateOpenDirective, isStandalone: false, selector: "[treeAnimateOpen]", inputs: { animateSpeed: ["treeAnimateOpenSpeed", "animateSpeed"], animateAcceleration: ["treeAnimateOpenAcceleration", "animateAcceleration"], isEnabled: ["treeAnimateOpenEnabled", "isEnabled"], isOpen: ["treeAnimateOpen", "isOpen"] }, ngImport: i0 }); }
+class TreeNodeCheckboxComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeAnimateOpenDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[treeAnimateOpen]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { animateSpeed: [{
-                type: Input,
-                args: ['treeAnimateOpenSpeed']
-            }], animateAcceleration: [{
-                type: Input,
-                args: ['treeAnimateOpenAcceleration']
-            }], isEnabled: [{
-                type: Input,
-                args: ['treeAnimateOpenEnabled']
-            }], isOpen: [{
-                type: Input,
-                args: ['treeAnimateOpen']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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
             }] } });
 
-class TreeNodeContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeContent, isStandalone: false, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+class TreeNodeExpanderComponent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeExpanderComponent, 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>`,
-                    standalone: false
-                }]
+            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
-            }], index: [{
-                type: Input
-            }], template: [{
-                type: Input
             }] } });
 
 const DRAG_OVER_CLASS = 'is-dragging-over';
 class TreeDragDirective {
-    constructor(el, renderer, treeDraggedElement, ngZone) {
-        this.el = el;
-        this.renderer = renderer;
-        this.treeDraggedElement = treeDraggedElement;
-        this.ngZone = ngZone;
+    constructor() {
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.treeDraggedElement = inject(TreeDraggedElement);
+        this.ngZone = inject(NgZone);
         this.dragEventHandler = this.onDrag.bind(this);
     }
     ngAfterViewInit() {
@@ -1742,16 +1736,13 @@ class TreeDragDirective {
         }
         this.treeDraggedElement.set(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TreeDraggedElement }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: TreeDragDirective, isStandalone: false, 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: "20.0.3", ngImport: i0, type: TreeDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: TreeDragDirective, isStandalone: true, selector: "[treeDrag]", inputs: { draggedElement: ["treeDrag", "draggedElement"], treeDragEnabled: "treeDragEnabled" }, host: { listeners: { "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeDragDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[treeDrag]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TreeDraggedElement }, { type: i0.NgZone }], propDecorators: { draggedElement: [{
+            args: [{ selector: '[treeDrag]' }]
+        }], ctorParameters: () => [], propDecorators: { draggedElement: [{
                 type: Input,
                 args: ['treeDrag']
             }], treeDragEnabled: [{
@@ -1764,79 +1755,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: ['dragend']
             }] } });
 
-class TreeNodeExpanderComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeExpanderComponent, isStandalone: false, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None }); }
+class TreeNodeContent {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeExpanderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeContent, 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>
-  `, standalone: false }]
+            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]
+                }]
         }], propDecorators: { node: [{
                 type: Input
-            }] } });
-
-class TreeNodeCheckboxComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeCheckboxComponent, isStandalone: false, 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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>
-  `, standalone: false }]
-        }], propDecorators: { node: [{
+            }], index: [{
+                type: Input
+            }], template: [{
                 type: Input
             }] } });
 
 class TreeNodeWrapperComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeWrapperComponent, isStandalone: false, selector: "tree-node-wrapper", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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>
@@ -1865,9 +1816,9 @@ class TreeNodeWrapperComponent {
               [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
               [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
       </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TreeNodeContent, selector: "tree-node-content", inputs: ["node", "index", "template"] }, { kind: "directive", type: TreeDropDirective, selector: "[treeDrop]", inputs: ["allowDragoverStyling", "treeAllowDrop"], outputs: ["treeDrop", "treeDropDragOver", "treeDropDragLeave", "treeDropDragEnter"] }, { kind: "directive", type: TreeDragDirective, selector: "[treeDrag]", inputs: ["treeDrag", "treeDragEnabled"] }, { kind: "component", type: TreeNodeExpanderComponent, selector: "tree-node-expander", inputs: ["node"] }, { kind: "component", type: TreeNodeCheckboxComponent, selector: "tree-node-checkbox", inputs: ["node"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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()">
@@ -1898,7 +1849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
               [ngTemplateOutlet]="templates.treeNodeWrapperTemplate"
               [ngTemplateOutletContext]="{ $implicit: node, node: node, index: index, templates: templates }">
       </ng-container>
-  `, standalone: false }]
+  `, imports: [NgIf, TreeNodeCheckboxComponent, TreeNodeExpanderComponent, TreeDragDirective, TreeDropDirective, TreeNodeContent, NgTemplateOutlet] }]
         }], propDecorators: { node: [{
                 type: Input
             }], index: [{
@@ -1907,6 +1858,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }] } });
 
+const EASE_ACCELERATION = 1.005;
+class TreeAnimateOpenDirective {
+    constructor() {
+        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();
+            }
+        }
+        else {
+            this.isEnabled ? this._animateClose() : this._hide();
+        }
+        this._isOpen = !!value;
+    }
+    ;
+    _show() {
+        if (this.innerElement)
+            return;
+        // create child view
+        this.innerElement = this.viewContainerRef.createEmbeddedView(this.templateRef).rootNodes[0];
+    }
+    _hide() {
+        this.viewContainerRef.clear();
+        this.innerElement = null;
+    }
+    _animateOpen() {
+        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);
+                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
+                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);
+                }
+            }, 17);
+        });
+    }
+    _animateClose() {
+        if (!this.innerElement)
+            return;
+        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);
+            height -= delta;
+            this.renderer.setStyle(this.innerElement, 'max-height', `${height}px`);
+            delta *= ease;
+            ease *= EASE_ACCELERATION;
+            if (height <= 0) {
+                // after animation complete - remove child element
+                this.viewContainerRef.clear();
+                this.innerElement = null;
+                clearInterval(i);
+            }
+        }, 17);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeAnimateOpenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: TreeAnimateOpenDirective, isStandalone: true, selector: "[treeAnimateOpen]", inputs: { animateSpeed: ["treeAnimateOpenSpeed", "animateSpeed"], animateAcceleration: ["treeAnimateOpenAcceleration", "animateAcceleration"], isEnabled: ["treeAnimateOpenEnabled", "isEnabled"], isOpen: ["treeAnimateOpen", "isOpen"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", 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']
+            }] } });
+
 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);
@@ -1914,8 +1962,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class TreeNodeChildrenComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeChildrenComponent, isStandalone: false, selector: "tree-node-children", inputs: { node: "node", templates: "templates" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeChildrenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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"
@@ -1943,9 +1991,9 @@ class TreeNodeChildrenComponent {
         ></tree-loading-component>
       </div>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => LoadingComponent), selector: "tree-loading-component", inputs: ["template", "node"] }, { kind: "component", type: i0.forwardRef(() => TreeNodeCollectionComponent), selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "directive", type: i0.forwardRef(() => TreeAnimateOpenDirective), selector: "[treeAnimateOpen]", inputs: ["treeAnimateOpenSpeed", "treeAnimateOpenAcceleration", "treeAnimateOpenEnabled", "treeAnimateOpen"] }, { kind: "directive", type: i0.forwardRef(() => TreeMobxAutorunDirective), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeChildrenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-node-children', encapsulation: ViewEncapsulation.None, template: `
     <ng-container *treeMobxAutorun="{ dontDetach: true }">
@@ -1975,7 +2023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         ></tree-loading-component>
       </div>
     </ng-container>
-  `, standalone: false }]
+  `, imports: [TreeMobxAutorunDirective, TreeAnimateOpenDirective, NgIf, forwardRef((() => TreeNodeCollectionComponent)), LoadingComponent] }]
         }], propDecorators: { node: [{
                 type: Input
             }], templates: [{
@@ -2025,8 +2073,8 @@ class TreeNodeCollectionComponent {
     trackNode(index, node) {
         return node.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeCollectionComponent, isStandalone: false, selector: "tree-node-collection", inputs: { nodes: "nodes", treeModel: "treeModel", templates: "templates" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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
@@ -2038,7 +2086,7 @@ class TreeNodeCollectionComponent {
         </tree-node>
       </div>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => TreeNodeComponent), selector: "TreeNode, tree-node", inputs: ["node", "index", "templates"] }, { kind: "directive", type: i0.forwardRef(() => TreeMobxAutorunDirective), selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
 __decorate([
     observable
@@ -2052,7 +2100,7 @@ __decorate([
 __decorate([
     action
 ], TreeNodeCollectionComponent.prototype, "setNodes", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeCollectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tree-node-collection',
@@ -2070,7 +2118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
       </div>
     </ng-container>
   `,
-                    standalone: false
+                    imports: [TreeMobxAutorunDirective, NgFor, forwardRef((() => TreeNodeComponent))]
                 }]
         }], propDecorators: { nodes: [{
                 type: Input
@@ -2080,8 +2128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], viewportNodes: [], marginTop: [], setNodes: [] } });
 class TreeNodeComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeNodeComponent, isStandalone: false, selector: "TreeNode, tree-node", inputs: { node: "node", index: "index", templates: "templates" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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"
@@ -2125,9 +2173,9 @@ class TreeNodeComponent {
       >
       </ng-container>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TreeNodeChildrenComponent, selector: "tree-node-children", inputs: ["node", "templates"] }, { 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: "directive", type: TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'TreeNode, tree-node', encapsulation: ViewEncapsulation.None, template: `
     <ng-container *treeMobxAutorun="{ dontDetach: true }">
@@ -2173,7 +2221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
       >
       </ng-container>
     </ng-container>
-  `, standalone: false }]
+  `, imports: [TreeMobxAutorunDirective, NgIf, TreeNodeDropSlot, TreeNodeWrapperComponent, TreeNodeChildrenComponent, NgTemplateOutlet] }]
         }], propDecorators: { node: [{
                 type: Input
             }], index: [{
@@ -2182,66 +2230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }] } });
 
-class TreeViewportComponent {
-    constructor(elementRef, virtualScroll) {
-        this.elementRef = elementRef;
-        this.virtualScroll = virtualScroll;
-        this.setViewport = this.throttle(() => {
-            this.virtualScroll.setViewport(this.elementRef.nativeElement);
-        }, 17);
-        this.scrollEventHandler = this.setViewport.bind(this);
-    }
-    ngOnInit() {
-        this.virtualScroll.init();
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.setViewport();
-            this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
-        });
-        let el = this.elementRef.nativeElement;
-        el.addEventListener('scroll', this.scrollEventHandler);
-    }
-    ngOnDestroy() {
-        this.virtualScroll.clear();
-        let el = this.elementRef.nativeElement;
-        el.removeEventListener('scroll', this.scrollEventHandler);
-    }
-    getTotalHeight() {
-        return ((this.virtualScroll.isEnabled() &&
-            this.virtualScroll.totalHeight + 'px') ||
-            'auto');
-    }
-    throttle(func, timeFrame) {
-        let lastTime = 0;
-        return function () {
-            let now = Date.now();
-            if (now - lastTime >= timeFrame) {
-                func();
-                lastTime = now;
-            }
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeViewportComponent, deps: [{ token: i0.ElementRef }, { token: TreeVirtualScroll }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeViewportComponent, isStandalone: false, 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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>
-  `, standalone: false }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TreeVirtualScroll }] });
-
 class TreeComponent {
     // Will be handled in ngOnChanges
     set nodes(nodes) {
@@ -2256,9 +2244,10 @@ class TreeComponent {
     set state(state) {
         this.treeModel.setState(state);
     }
-    constructor(treeModel, treeDraggedElement) {
-        this.treeModel = treeModel;
-        this.treeDraggedElement = treeDraggedElement;
+    constructor() {
+        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));
     }
@@ -2298,8 +2287,8 @@ class TreeComponent {
             return obj;
         }, {});
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeComponent, deps: [{ token: TreeModel }, { token: TreeDraggedElement }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: TreeComponent, isStandalone: false, 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: "20.0.3", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.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"
@@ -2324,9 +2313,9 @@ class TreeComponent {
               </tree-node-drop-slot>
           </div>
       </tree-viewport>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeDropSlot, selector: "TreeNodeDropSlot, tree-node-drop-slot", inputs: ["node", "dropIndex"] }, { kind: "component", type: TreeNodeCollectionComponent, selector: "tree-node-collection", inputs: ["nodes", "treeModel", "templates"] }, { kind: "component", type: TreeViewportComponent, selector: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Tree, tree-root', providers: [TreeModel], template: `
       <tree-viewport #viewport>
@@ -2353,8 +2342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
               </tree-node-drop-slot>
           </div>
       </tree-viewport>
-  `, standalone: false }]
-        }], ctorParameters: () => [{ type: TreeModel }, { type: TreeDraggedElement }], propDecorators: { loadingTemplate: [{
+  `, imports: [TreeViewportComponent, NgIf, TreeNodeCollectionComponent, TreeNodeDropSlot] }]
+        }], ctorParameters: () => [], propDecorators: { loadingTemplate: [{
                 type: ContentChild,
                 args: ['loadingTemplate', { static: false }]
             }], treeNodeTemplate: [{
@@ -2420,8 +2409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }] } });
 
 class TreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: TreeModule, declarations: [TreeComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: TreeModule, imports: [CommonModule, TreeComponent,
             TreeNodeComponent,
             TreeNodeContent,
             LoadingComponent,
@@ -2435,7 +2424,7 @@ class TreeModule {
             TreeNodeWrapperComponent,
             TreeNodeCheckboxComponent,
             TreeAnimateOpenDirective,
-            TreeMobxAutorunDirective], imports: [CommonModule], exports: [TreeComponent,
+            TreeMobxAutorunDirective], exports: [TreeComponent,
             TreeNodeComponent,
             TreeNodeContent,
             LoadingComponent,
@@ -2450,12 +2439,13 @@ class TreeModule {
             TreeNodeCheckboxComponent,
             TreeAnimateOpenDirective,
             TreeMobxAutorunDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    declarations: [],
+                    exports: [
                         TreeComponent,
                         TreeNodeComponent,
                         TreeNodeContent,
@@ -2472,8 +2462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TreeAnimateOpenDirective,
                         TreeMobxAutorunDirective
                     ],
-                    exports: [
-                        TreeComponent,
+                    imports: [CommonModule, TreeComponent,
                         TreeNodeComponent,
                         TreeNodeContent,
                         LoadingComponent,
@@ -2487,9 +2476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TreeNodeWrapperComponent,
                         TreeNodeCheckboxComponent,
                         TreeAnimateOpenDirective,
-                        TreeMobxAutorunDirective
-                    ],
-                    imports: [CommonModule],
+                        TreeMobxAutorunDirective],
                     providers: []
                 }]
         }] });