@igo2/common 20.1.0-next.9 → 21.0.0-next.1

package/fesm2022/igo2-common-drag-drop.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, output, HostListener, HostBinding, Directive, inject, ElementRef, Renderer2, effect, booleanAttribute, contentChildren, NgModule } from '@angular/core';
-import { SelectionModel } from '@angular/cdk/collections';
+import { input, output, HostListener, HostBinding, Directive, inject, ElementRef, Renderer2, signal, effect, booleanAttribute, contentChildren, untracked, NgModule } from '@angular/core';
 import { MatTreeNode } from '@angular/material/tree';
 
 class DragAndDropDirective {
-    allowedExtensions = input([], ...(ngDevMode ? [{ debugName: "allowedExtensions" }] : []));
+    allowedExtensions = input([], ...(ngDevMode ? [{ debugName: "allowedExtensions" }] : /* istanbul ignore next */ []));
     filesDropped = output();
     filesInvalid = output();
     background = 'inherit';
@@ -55,14 +54,13 @@ class DragAndDropDirective {
         }
         return filesObj;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: DragAndDropDirective, isStandalone: true, selector: "[igoDragAndDrop]", inputs: { allowedExtensions: { classPropertyName: "allowedExtensions", publicName: "allowedExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesDropped: "filesDropped", filesInvalid: "filesInvalid" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.background": "this.background" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DragAndDropDirective, isStandalone: true, selector: "[igoDragAndDrop]", inputs: { allowedExtensions: { classPropertyName: "allowedExtensions", publicName: "allowedExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesDropped: "filesDropped", filesInvalid: "filesInvalid" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "style.background": "this.background" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DragAndDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DragAndDropDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[igoDragAndDrop]',
-                    standalone: true
+                    selector: '[igoDragAndDrop]'
                 }]
         }], propDecorators: { allowedExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedExtensions", required: false }] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], filesInvalid: [{ type: i0.Output, args: ["filesInvalid"] }], background: [{
                 type: HostBinding,
@@ -89,65 +87,110 @@ class TreeDragDropDirective {
     elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     draggedNode;
-    dropNodeTarget;
+    dropNodeTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropNodeTarget" }] : /* istanbul ignore next */ []));
     expandTimeout;
     nodesListeners;
     nodesEffect = effect(() => {
         this.nodes();
         this.addAllListener();
-    }, ...(ngDevMode ? [{ debugName: "nodesEffect" }] : []));
-    dropLineTarget;
-    highlightedNode = new SelectionModel();
-    treeControl = input.required(...(ngDevMode ? [{ debugName: "treeControl" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "nodesEffect" }] : /* istanbul ignore next */ []));
+    dropLineTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropLineTarget" }] : /* istanbul ignore next */ []));
+    previousDropLine = signal(null, ...(ngDevMode ? [{ debugName: "previousDropLine" }] : /* istanbul ignore next */ []));
+    dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "dropPosition" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    // Use a Set or just manage classes manually since SelectionModel was providing simple toggle
+    // But we can stick to simple class logic
+    highlightedNode;
+    tree = input.required(...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    childrenAccessor = input.required(...(ngDevMode ? [{ debugName: "childrenAccessor" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /** The default is 5 */
-    maxLevel = input(5, ...(ngDevMode ? [{ debugName: "maxLevel" }] : []));
-    treeDragDropIsDisabled = input(false, ...(ngDevMode ? [{ debugName: "treeDragDropIsDisabled", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
+    maxLevel = input(5, ...(ngDevMode ? [{ debugName: "maxLevel" }] : /* istanbul ignore next */ []));
+    treeDragDropIsDisabled = input(false, { ...(ngDevMode ? { debugName: "treeDragDropIsDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dragStart = output();
-    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-    onDrop = output();
-    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-    onDropError = output();
-    hostDragOver(event) {
-        event.preventDefault();
-    }
-    hostDrop(event) {
-        this.drop(event);
-    }
-    dragging;
-    nodes = contentChildren(MatTreeNode, ...(ngDevMode ? [{ debugName: "nodes", descendants: true }] : [{ descendants: true }]));
+    dropped = output();
+    droppedError = output();
+    nodes = contentChildren(MatTreeNode, { ...(ngDevMode ? { debugName: "nodes" } : /* istanbul ignore next */ {}), descendants: true });
     constructor() {
-        this.onDrop.subscribe(() => this.dragEnd());
-        this.highlightedNode.changed.subscribe((change) => {
-            if (change.removed.length) {
-                this.removeNodeClass(change.removed[0].id, '--drag-hover');
+        this.dropped.subscribe(() => this.dragEnd());
+        effect(() => {
+            const disabled = this.treeDragDropIsDisabled();
+            disabled ? this.removeAllListener() : this.addAllListener();
+        });
+        effect(() => {
+            const current = this.dropLineTarget();
+            const parent = this.elementRef.nativeElement.parentElement;
+            if (!current) {
+                untracked(() => {
+                    const previous = this.previousDropLine();
+                    if (previous !== null) {
+                        this.renderer.removeChild(parent, previous);
+                        this.previousDropLine.set(null);
+                    }
+                });
             }
-            if (change.added.length) {
-                this.addNodeClass(change.added[0].id, '--drag-hover');
+            else {
+                this.renderer.appendChild(parent, current);
             }
         });
         effect(() => {
-            const disabled = this.treeDragDropIsDisabled();
-            disabled ? this.removeAllListener() : this.addAllListener();
+            if (!this.dragging()) {
+                return;
+            }
+            const targetNode = this.dropNodeTarget();
+            const position = this.dropPosition();
+            const dropLineTarget = this.dropLineTarget();
+            if (targetNode) {
+                this.setHighlightedNode(targetNode);
+                if (position) {
+                    if (dropLineTarget) {
+                        this.updateDropTargetLinePosition(position, dropLineTarget);
+                    }
+                    this.handleGroupExpansion(targetNode, position.type === 'inside');
+                }
+            }
         });
     }
+    get isGroup() {
+        return this.config().isGroup;
+    }
+    get getDescendantLevels() {
+        return this.config().descendantLevels;
+    }
     ngOnDestroy() {
         this.removeAllListener();
+        this.removeDropTargetLine();
         if (this.nodesEffect) {
-            // EffectRef provides destroy() to stop the effect
             this.nodesEffect.destroy();
             this.nodesEffect = undefined;
         }
     }
+    hostDragOver(event) {
+        event.preventDefault();
+    }
+    hostDragLeave(event) {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        if (event.clientY < rect.top ||
+            event.clientY >= rect.bottom ||
+            event.clientX < rect.left ||
+            event.clientX >= rect.right) {
+            this.dragLeave();
+        }
+    }
+    hostDrop(event) {
+        this.drop(event);
+    }
     onDragStart(node) {
-        this.dragging = true;
+        this.addDropTargetLine();
+        this.dragging.set(true);
         this.draggedNode = node;
         this.addNodeClass(node.id, '--dragged');
         this.dragStart.emit(node);
     }
     dragEnd() {
-        this.dragging = false;
+        this.dragging.set(false);
+        this.dropNodeTarget.set(null);
+        this.dropPosition.set(null);
         if (this.draggedNode) {
             this.removeNodeClass(this.draggedNode.id, '--dragged');
             this.draggedNode = null;
@@ -158,71 +201,81 @@ class TreeDragDropDirective {
     dragOver(node, event) {
         event.preventDefault();
         event.stopPropagation();
-        this.dropNodeTarget = node;
+        this.dropNodeTarget.set(node);
         const position = this.getPosition(event, node);
-        this.updateDropTargetLinePosition(position);
-        this.setHighlightedNode(node);
-        this.handleGroupExpansion(node, position.type === 'inside');
+        this.dropPosition.set(position);
     }
     dragLeave() {
         clearTimeout(this.expandTimeout);
         this.expandTimeout = null;
-        this.highlightedNode.clear();
+        if (this.highlightedNode) {
+            this.removeNodeClass(this.highlightedNode.id, '--drag-hover');
+            this.highlightedNode = undefined;
+        }
     }
     drop(event) {
-        if (!this.dropNodeTarget || this.treeDragDropIsDisabled()) {
+        let nodeTarget = this.dropNodeTarget();
+        if (!nodeTarget || this.treeDragDropIsDisabled()) {
             return;
         }
-        const dropPosition = this.getPosition(event, this.dropNodeTarget);
-        const validation = this.canDropNode(this.dropNodeTarget, dropPosition);
+        const dropPosition = this.getPosition(event, nodeTarget);
+        const validation = this.canDropNode(nodeTarget, dropPosition);
         if (!validation.canDrop) {
-            this.onDropError.emit(validation);
+            this.droppedError.emit(validation);
             return;
         }
+        let targetNodeLevel = this.getNodeLevel(nodeTarget);
         // Allow to drop a last child outside is group. We refer to it's ancestor for the target
         if (dropPosition.type === 'below' &&
-            dropPosition.level !== this.dropNodeTarget.level) {
-            this.dropNodeTarget = this.getNodeAncestors(this.dropNodeTarget.id, dropPosition.level);
+            dropPosition.level !== targetNodeLevel) {
+            const ancestor = this.getNodeAncestors(nodeTarget.id, dropPosition.level);
+            this.dropNodeTarget.set(ancestor);
+            nodeTarget = ancestor;
+            targetNodeLevel = this.getNodeLevel(nodeTarget);
         }
-        if (this.dropNodeTarget.isGroup) {
+        if (this.isGroup(nodeTarget)) {
             if (dropPosition.type === 'inside') {
-                const isExpanded = this.treeControl().isExpanded(this.dropNodeTarget);
+                const isExpanded = this.tree().isExpanded(nodeTarget);
                 if (isExpanded) {
-                    const children = this.getDirectDescendants(this.dropNodeTarget);
+                    const children = this.getDirectDescendants(nodeTarget);
                     if (children[0]?.id === this.draggedNode.id) {
                         return;
                     }
                 }
-                this.treeControl().expand(this.dropNodeTarget);
-                return this.onDrop.emit({
+                this.tree().expand(nodeTarget);
+                return this.dropped.emit({
                     node: this.draggedNode,
-                    ref: this.dropNodeTarget,
+                    ref: nodeTarget,
                     position: dropPosition.type
                 });
             }
         }
         if (dropPosition.type === 'below' &&
-            dropPosition.level !== this.dropNodeTarget.level) {
-            const ancestor = this.getNodeAncestors(this.dropNodeTarget.id);
-            return this.onDrop.emit({
+            dropPosition.level !== targetNodeLevel) {
+            const ancestor = this.getNodeAncestors(nodeTarget.id);
+            return this.dropped.emit({
                 node: this.draggedNode,
                 ref: ancestor,
                 position: dropPosition.type
             });
         }
-        this.onDrop.emit({
+        this.dropped.emit({
             node: this.draggedNode,
-            ref: this.dropNodeTarget,
+            ref: nodeTarget,
             position: dropPosition.type
         });
     }
     addNodeClass(id, className) {
-        const node = this.nodes().find((node) => node.data.id === id);
-        this.renderer.addClass(node['_elementRef'].nativeElement, className);
+        const node = this.findTreeNode(id);
+        if (node) {
+            this.renderer.addClass(node['_elementRef'].nativeElement, className);
+        }
     }
     removeNodeClass(id, className) {
-        const node = this.nodes().find((node) => node.data.id === id);
-        this.renderer.removeClass(node['_elementRef'].nativeElement, className);
+        const node = this.findTreeNode(id);
+        if (node) {
+            this.renderer.removeClass(node['_elementRef'].nativeElement, className);
+        }
     }
     addAllListener() {
         if (this.treeDragDropIsDisabled()) {
@@ -256,52 +309,70 @@ class TreeDragDropDirective {
         this.nodesListeners = null;
     }
     setHighlightedNode(node) {
-        const toHighlight = node.isGroup ? node : this.getNodeAncestors(node.id);
-        toHighlight
-            ? this.highlightedNode.select(toHighlight)
-            : this.highlightedNode.clear();
+        const toHighlight = this.isGroup(node)
+            ? node
+            : this.getNodeAncestors(node.id);
+        if (this.highlightedNode && this.highlightedNode.id !== toHighlight?.id) {
+            this.removeNodeClass(this.highlightedNode.id, '--drag-hover');
+            this.highlightedNode = undefined;
+        }
+        if (toHighlight) {
+            this.highlightedNode = toHighlight;
+            this.addNodeClass(toHighlight.id, '--drag-hover');
+        }
+        else if (this.highlightedNode) {
+            this.removeNodeClass(this.highlightedNode.id, '--drag-hover');
+            this.highlightedNode = undefined;
+        }
     }
     addDropTargetLine() {
         const target = this.renderer.createElement('div');
         target.classList.add('drop-target-line');
         target.setAttribute('style', `position: absolute; top: 0; width: 100%; pointer-events: none; z-index: 4; height: 2px; background-color: black; transition: margin-left 150ms;`);
-        this.dropLineTarget = target;
-        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this.dropLineTarget);
+        this.dropLineTarget.set(target);
     }
     removeDropTargetLine() {
-        if (!this.dropLineTarget) {
-            return;
+        const target = this.dropLineTarget();
+        if (target) {
+            this.previousDropLine.set(target);
+            this.dropLineTarget.set(null);
         }
-        this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.dropLineTarget);
-        this.dropLineTarget = null;
     }
-    updateDropTargetLinePosition(position) {
-        if (!this.dropLineTarget) {
-            this.addDropTargetLine();
-        }
+    hideDropTargetLine() {
+        const target = this.dropLineTarget();
+        this.renderer.setStyle(target, 'display', 'none');
+    }
+    showDropTargetLine() {
+        const target = this.dropLineTarget();
+        this.renderer.setStyle(target, 'display', 'block');
+    }
+    updateDropTargetLinePosition(position, dropLineTarget) {
         if (position.type === 'inside') {
-            return this.removeDropTargetLine();
+            return this.hideDropTargetLine();
+        }
+        else {
+            this.showDropTargetLine();
         }
-        this.renderer.setStyle(this.dropLineTarget, 'margin-left', position.level * 24 + 20 + 'px');
-        this.renderer.setStyle(this.dropLineTarget, 'transform', 'translate3d(0,' + position.y + 'px, 0)');
+        this.renderer.setStyle(dropLineTarget, 'margin-left', position.level * 24 + 20 + 'px');
+        this.renderer.setStyle(dropLineTarget, 'transform', 'translate3d(0,' + position.y + 'px, 0)');
     }
     handleGroupExpansion(node, isInside) {
         if (!isInside) {
             return this.dragLeave();
         }
-        const isOpen = this.treeControl().isExpanded(node);
+        const isOpen = this.tree().isExpanded(node);
         if (!isOpen && !this.expandTimeout) {
             this.expandTimeout = window.setTimeout(() => {
-                this.treeControl().expand(node);
+                this.tree().expand(node);
             }, 1200);
         }
     }
     getNodeElement(node) {
-        const treeNode = this.nodes().find((n) => n.data.id === node.id);
+        const treeNode = this.findTreeNode(node.id);
         return treeNode?.['_elementRef'].nativeElement;
     }
     canDropNode(hoveredNode, position) {
-        if (this.draggedNode.isGroup) {
+        if (this.isGroup(this.draggedNode)) {
             return this.canDropGroup(hoveredNode, position);
         }
         const hasMaxLevelRestrictions = this.validateMaxHierarchyLevel(position);
@@ -318,14 +389,20 @@ class TreeDragDropDirective {
                 message: 'igo.common.dragDrop.cannot.dropInsideItself'
             };
         }
+        const isHoverDescendant = this.isHoverDescendant(hoveredNode.id, hoveredNode);
+        if (isHoverDescendant) {
+            return {
+                canDrop: !isHoverDescendant,
+                message: 'igo.common.dragDrop.cannot.dropInsideItself'
+            };
+        }
         const hasMaxLevelRestrictions = this.validateMaxHierarchyLevel(position);
         if (hasMaxLevelRestrictions) {
             return hasMaxLevelRestrictions;
         }
-        const isHoverDescendant = this.isHoverDescendant(hoveredNode.id);
         return {
-            canDrop: !isHoverDescendant,
-            message: isHoverDescendant && 'igo.common.dragDrop.cannot.dropInsideItself'
+            canDrop: true,
+            message: undefined
         };
     }
     validateMaxHierarchyLevel(position) {
@@ -334,9 +411,9 @@ class TreeDragDropDirective {
             return;
         }
         let level = position.type === 'inside' ? position.level + 1 : position.level;
-        if (this.draggedNode.isGroup) {
+        if (this.isGroup(this.draggedNode)) {
             // We add an extra level +1 to avoid empty group in group
-            level = level + (this.draggedNode.descendantLevels ?? 0) + 1;
+            level = level + +(this.getDescendantLevels(this.draggedNode) ?? 0) + 1;
         }
         if (level > maxLevel) {
             return {
@@ -346,21 +423,27 @@ class TreeDragDropDirective {
             };
         }
     }
-    isHoverDescendant(id) {
-        return this.treeControl()
-            .getDescendants(this.draggedNode)
-            .some((child) => child.id === id);
+    getDescendants(node) {
+        const children = this.childrenAccessor()(node) ?? [];
+        const descendants = [...children];
+        children.forEach((child) => {
+            descendants.push(...this.getDescendants(child));
+        });
+        return descendants;
+    }
+    isHoverDescendant(id, _hoveredNode) {
+        return this.getDescendants(this.draggedNode).some((child) => child.id === id);
     }
     getPosition(event, hoveredNode) {
-        if (this.draggedNode.isGroup) {
-            if (this.isHoverDescendant(hoveredNode.id)) {
+        if (this.isGroup(this.draggedNode)) {
+            if (this.isHoverDescendant(hoveredNode.id, hoveredNode)) {
                 hoveredNode = this.draggedNode;
             }
         }
         let positionType = this.getPositionType(event, hoveredNode);
-        const bellowOpenedGroup = hoveredNode.isGroup &&
+        const bellowOpenedGroup = this.isGroup(hoveredNode) &&
             positionType === 'below' &&
-            this.treeControl().isExpanded(hoveredNode);
+            this.tree().isExpanded(hoveredNode);
         if (bellowOpenedGroup) {
             positionType = 'inside';
         }
@@ -384,7 +467,7 @@ class TreeDragDropDirective {
         const middle = rect.top + rect.height / 2;
         const y = event.y;
         const selfReferencing = this.draggedNode.id === hoveredNode.id;
-        if (hoveredNode.isGroup && !selfReferencing) {
+        if (this.isGroup(hoveredNode) && !selfReferencing) {
             const tolerence = 5;
             if (y <= middle + tolerence && y >= middle - tolerence) {
                 return 'inside';
@@ -394,63 +477,92 @@ class TreeDragDropDirective {
         return isBelow ? 'below' : 'above';
     }
     getPositionLevel(hoveredNode, type, x) {
-        if (hoveredNode.level === 0) {
+        const hoveredNodeLevel = this.getNodeLevel(hoveredNode);
+        if (hoveredNodeLevel === 0) {
             return 0;
         }
         const ancestor = this.getNodeAncestors(hoveredNode.id);
+        if (!ancestor)
+            return hoveredNodeLevel;
         const children = this.getDirectDescendants(ancestor);
         const lastChild = [...children].pop();
-        if (type === 'below' && lastChild.id === hoveredNode.id) {
+        if (type === 'below' && lastChild?.id === hoveredNode.id) {
             const target = this.getNodeElement(hoveredNode);
             const rect = target.getBoundingClientRect();
             const indentation = 24;
             const xMin = rect.x + indentation;
-            const xMax = xMin + indentation * hoveredNode.level;
+            const xMax = xMin + indentation * hoveredNodeLevel;
             const isInsideSameGroup = x > xMax;
             if (!isInsideSameGroup) {
                 const levelSubstracted = Math.round((xMax - x) / indentation);
-                return Math.max(0, hoveredNode.level - levelSubstracted);
+                return Math.max(0, hoveredNodeLevel - levelSubstracted);
             }
         }
-        return hoveredNode.level;
+        return hoveredNodeLevel;
     }
     /**
      * @param level if level is defined with go to the defined levle to find ancestor. Sinon on prend le current ancestor
      */
     getNodeAncestors(id, level) {
-        const nodes = this.treeControl().dataNodes;
-        const index = nodes.findIndex((node) => node.id === id);
-        const targetLevel = level ?? Math.max(0, nodes[index].level - 1);
-        return nodes
-            .slice(0, index)
-            .reverse()
-            .find((node) => node.level === targetLevel);
+        const path = this.getAncestorsPath(id);
+        if (path.length === 0) {
+            return undefined;
+        }
+        if (level !== undefined) {
+            return path[level];
+        }
+        return path[path.length - 1];
+    }
+    getAncestorsPath(id) {
+        const nodes = this.nodes();
+        const roots = nodes.filter((n) => n.level === 0).map((n) => n.data);
+        for (const root of roots) {
+            const path = [];
+            if (this.findPath(root, id, path)) {
+                return path;
+            }
+        }
+        return [];
+    }
+    findPath(currentNode, targetId, path) {
+        if (String(currentNode.id) === String(targetId)) {
+            return true;
+        }
+        const children = this.childrenAccessor()(currentNode) ?? [];
+        for (const child of children) {
+            path.push(currentNode);
+            if (this.findPath(child, targetId, path)) {
+                return true;
+            }
+            path.pop();
+        }
+        return false;
+    }
+    getNodeLevel(node) {
+        const treeNode = this.findTreeNode(node.id);
+        return treeNode ? treeNode.level : 0;
     }
     getDirectDescendants(node) {
-        const level = node.level + 1;
-        return this.treeControl()
-            .getDescendants(node)
-            .filter((child) => child.level === level);
+        return this.childrenAccessor()(node) ?? [];
+    }
+    findTreeNode(id) {
+        return this.nodes().find((n) => String(n.data.id) === String(id));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.16", type: TreeDragDropDirective, isStandalone: true, selector: "[igoTreeDragDrop]", inputs: { treeControl: { classPropertyName: "treeControl", publicName: "treeControl", isSignal: true, isRequired: true, transformFunction: null }, maxLevel: { classPropertyName: "maxLevel", publicName: "maxLevel", isSignal: true, isRequired: false, transformFunction: null }, treeDragDropIsDisabled: { classPropertyName: "treeDragDropIsDisabled", publicName: "treeDragDropIsDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", onDrop: "onDrop", onDropError: "onDropError" }, host: { listeners: { "dragover": "hostDragOver($event)", "drop": "hostDrop($event)" }, properties: { "class.--dragging": "this.dragging" } }, queries: [{ propertyName: "nodes", predicate: MatTreeNode, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: TreeDragDropDirective, isStandalone: true, selector: "[igoTreeDragDrop]", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: true, transformFunction: null }, childrenAccessor: { classPropertyName: "childrenAccessor", publicName: "childrenAccessor", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, maxLevel: { classPropertyName: "maxLevel", publicName: "maxLevel", isSignal: true, isRequired: false, transformFunction: null }, treeDragDropIsDisabled: { classPropertyName: "treeDragDropIsDisabled", publicName: "treeDragDropIsDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dropped: "dropped", droppedError: "droppedError" }, host: { listeners: { "dragover": "hostDragOver($event)", "dragleave": "hostDragLeave($event)", "drop": "hostDrop($event)" }, properties: { "class.--dragging": "dragging()" } }, queries: [{ propertyName: "nodes", predicate: MatTreeNode, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TreeDragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igoTreeDragDrop]',
-                    standalone: true
+                    host: {
+                        '[class.--dragging]': 'dragging()',
+                        '(dragover)': 'hostDragOver($event)',
+                        '(dragleave)': 'hostDragLeave($event)',
+                        '(drop)': 'hostDrop($event)'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { treeControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeControl", required: true }] }], maxLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLevel", required: false }] }], treeDragDropIsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDragDropIsDisabled", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], onDrop: [{ type: i0.Output, args: ["onDrop"] }], onDropError: [{ type: i0.Output, args: ["onDropError"] }], hostDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], hostDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], dragging: [{
-                type: HostBinding,
-                args: ['class.--dragging']
-            }], nodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatTreeNode), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: true }] }], childrenAccessor: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenAccessor", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], maxLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLevel", required: false }] }], treeDragDropIsDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDragDropIsDisabled", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dropped: [{ type: i0.Output, args: ["dropped"] }], droppedError: [{ type: i0.Output, args: ["droppedError"] }], nodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatTreeNode), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * @deprecated import the DragAndDropDirective directly
@@ -462,11 +574,11 @@ class IgoDrapDropModule {
             providers: []
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IgoDrapDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: IgoDrapDropModule, imports: [DragAndDropDirective, TreeDragDropDirective], exports: [DragAndDropDirective, TreeDragDropDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IgoDrapDropModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoDrapDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoDrapDropModule, imports: [DragAndDropDirective, TreeDragDropDirective], exports: [DragAndDropDirective, TreeDragDropDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoDrapDropModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IgoDrapDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoDrapDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DragAndDropDirective, TreeDragDropDirective],