primeng 20.1.1 → 20.2.0

package/fesm2022/primeng-tree.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, forwardRef, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { find, hasClass, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
+import { getOuterWidth, getOuterHeight, find, hasClass, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
 import * as i3 from 'primeng/api';
 import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
 import * as i4 from 'primeng/autofocus';
@@ -39,7 +39,7 @@ const classes = {
     nodeContent: ({ instance }) => ({
         'p-tree-node-content': true,
         'p-tree-node-selectable': instance.selectable,
-        'p-tree-node-dragover': instance.draghoverNode,
+        'p-tree-node-dragover': instance.isNodeDropActive(),
         'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected
     }),
     nodeToggleButton: 'p-tree-node-toggle-button',
@@ -49,16 +49,16 @@ const classes = {
     nodeLabel: 'p-tree-node-label',
     nodeChildren: 'p-tree-node-children',
     emptyMessage: 'p-tree-empty-message',
-    dropPoint: ({ param }) => ['p-tree-node-droppoint', { 'p-tree-node-droppoint-active': param }]
+    dropPoint: 'p-tree-node-drop-point'
 };
 class TreeStyle extends BaseStyle {
     name = 'tree';
     theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -153,9 +153,13 @@ class UITreeNode extends BaseComponent {
     loadingMode;
     tree = inject(forwardRef(() => Tree));
     timeout;
-    draghoverPrev;
-    draghoverNext;
-    draghoverNode;
+    isPrevDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isPrevDropPointHovered" }] : []));
+    isNextDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNextDropPointHovered" }] : []));
+    isNodeDropHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNodeDropHovered" }] : []));
+    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isPrevDropPointActive" }] : []));
+    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isNextDropPointActive" }] : []));
+    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), ...(ngDevMode ? [{ debugName: "isNodeDropActive" }] : []));
+    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
     _componentStyle = inject(TreeStyle);
     get selected() {
         return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this.isSelected() : undefined;
@@ -167,7 +171,10 @@ class UITreeNode extends BaseComponent {
         return this.tree._componentStyle.classes.node({ instance: this });
     }
     get selectable() {
-        return this.node.selectable === false ? false : this.tree.selectionMode != null;
+        return this.node?.selectable === false ? false : this.tree?.selectionMode != null;
+    }
+    get subNodes() {
+        return this.node?.parent ? this.node.parent.children : this.tree.value;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -190,6 +197,24 @@ class UITreeNode extends BaseComponent {
     isLeaf() {
         return this.tree.isNodeLeaf(this.node);
     }
+    isSelected() {
+        return this.tree.isSelected(this.node);
+    }
+    isSameNode(event) {
+        return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
+    }
+    isDraggable() {
+        return this.tree.draggableNodes;
+    }
+    isDroppable() {
+        return this.tree.droppableNodes && this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope);
+    }
+    isNodeDroppable() {
+        return this.node?.droppable !== false && this.isDroppable();
+    }
+    isNodeDraggable() {
+        return this.node?.draggable !== false && this.isDraggable();
+    }
     toggle(event) {
         if (this.node.expanded)
             this.collapse(event);
@@ -230,122 +255,43 @@ class UITreeNode extends BaseComponent {
     onNodeDblClick(event) {
         this.tree.onNodeDblClick(event, this.node);
     }
-    isSelected() {
-        return this.tree.isSelected(this.node);
-    }
-    isSameNode(event) {
-        return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
-    }
-    onDropPoint(event, position) {
-        event.preventDefault();
-        let dragNode = this.tree.dragNode;
-        let dragNodeIndex = this.tree.dragNodeIndex;
-        let dragNodeScope = this.tree.dragNodeScope;
-        let isValidDropPointIndex = this.tree.dragNodeTree === this.tree ? position === 1 || dragNodeIndex !== this.index - 1 : true;
-        if (this.tree.allowDrop(dragNode, this.node, dragNodeScope) && isValidDropPointIndex) {
-            let dropParams = { ...this.createDropPointEventMetadata(position) };
-            if (this.tree.validateDrop) {
-                this.tree.onNodeDrop.emit({
-                    originalEvent: event,
-                    dragNode: dragNode,
-                    dropNode: this.node,
-                    index: this.index,
-                    accept: () => {
-                        this.processPointDrop(dropParams);
-                    }
-                });
-            }
-            else {
-                this.processPointDrop(dropParams);
-                this.tree.onNodeDrop.emit({
-                    originalEvent: event,
-                    dragNode: dragNode,
-                    dropNode: this.node,
-                    index: this.index
-                });
-            }
-        }
-        this.draghoverPrev = false;
-        this.draghoverNext = false;
-    }
-    processPointDrop(event) {
-        let newNodeList = event.dropNode.parent ? event.dropNode.parent.children : this.tree.value;
-        event.dragNodeSubNodes.splice(event.dragNodeIndex, 1);
-        let dropIndex = this.index;
-        if (event.position < 0) {
-            dropIndex = event.dragNodeSubNodes === newNodeList ? (event.dragNodeIndex > event.index ? event.index : event.index - 1) : event.index;
-            newNodeList.splice(dropIndex, 0, event.dragNode);
-        }
-        else {
-            dropIndex = newNodeList.length;
-            newNodeList.push(event.dragNode);
+    insertNodeOnDrop() {
+        const { dragNode, dragNodeIndex, dragNodeSubNodes } = this.tree;
+        if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
+            return;
         }
-        this.tree.dragDropService.stopDrag({
-            node: event.dragNode,
-            subNodes: event.dropNode.parent ? event.dropNode.parent.children : this.tree.value,
-            index: event.dragNodeIndex
-        });
-    }
-    createDropPointEventMetadata(position) {
-        return {
-            dragNode: this.tree.dragNode,
-            dragNodeIndex: this.tree.dragNodeIndex,
-            dragNodeSubNodes: this.tree.dragNodeSubNodes,
-            dropNode: this.node,
-            index: this.index,
-            position: position
-        };
-    }
-    onDropPointDragOver(event) {
-        event.dataTransfer.dropEffect = 'move';
-        event.preventDefault();
-    }
-    onDropPointDragEnter(event, position) {
-        if (this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
-            if (position < 0)
-                this.draghoverPrev = true;
-            else
-                this.draghoverNext = true;
+        const position = this.dropPosition();
+        let subNodes = this.subNodes || [];
+        dragNodeSubNodes.splice(dragNodeIndex, 1);
+        if (position < 0) {
+            // insert before a Node
+            const index = this.index || 0;
+            const dropIndex = dragNodeSubNodes === subNodes ? (dragNodeIndex > index ? index : index - 1) : index;
+            subNodes.splice(dropIndex, 0, dragNode);
         }
-    }
-    onDropPointDragLeave(event) {
-        this.draghoverPrev = false;
-        this.draghoverNext = false;
-    }
-    onDragStart(event) {
-        if (this.tree.draggableNodes && this.node.draggable !== false) {
-            event.dataTransfer.setData('text', 'data');
-            this.tree.dragDropService.startDrag({
-                tree: this,
-                node: this.node,
-                subNodes: this.node?.parent ? this.node.parent.children : this.tree.value,
-                index: this.index,
-                scope: this.tree.draggableScope
-            });
+        else if (position > 0) {
+            // insert after a Node
+            subNodes.push(dragNode);
         }
         else {
-            event.preventDefault();
+            // insert as child of a Node
+            this.node.children = this.node.children || [];
+            this.node.children.push(dragNode);
         }
-    }
-    onDragStop(event) {
         this.tree.dragDropService.stopDrag({
-            node: this.node,
-            subNodes: this.node?.parent ? this.node.parent.children : this.tree.value,
-            index: this.index
+            node: dragNode,
+            subNodes,
+            index: dragNodeIndex
         });
     }
-    onDropNodeDragOver(event) {
-        event.dataTransfer.dropEffect = 'move';
-        if (this.tree.droppableNodes) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    onDropNode(event) {
-        if (this.tree.droppableNodes && this.node?.droppable !== false) {
-            let dragNode = this.tree.dragNode;
-            if (this.tree.allowDrop(dragNode, this.node, this.tree.dragNodeScope)) {
-                let dropParams = { ...this.createDropNodeEventMetadata() };
+    onNodeDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDroppable()) {
+            const { dragNode } = this.tree;
+            const position = this.dropPosition();
+            const isValidDrop = position !== 0 || (position === 0 && this.isNodeDroppable());
+            if (isValidDrop) {
                 if (this.tree.validateDrop) {
                     this.tree.onNodeDrop.emit({
                         originalEvent: event,
@@ -353,12 +299,12 @@ class UITreeNode extends BaseComponent {
                         dropNode: this.node,
                         index: this.index,
                         accept: () => {
-                            this.processNodeDrop(dropParams);
+                            this.insertNodeOnDrop();
                         }
                     });
                 }
                 else {
-                    this.processNodeDrop(dropParams);
+                    this.insertNodeOnDrop();
                     this.tree.onNodeDrop.emit({
                         originalEvent: event,
                         dragNode: dragNode,
@@ -368,44 +314,75 @@ class UITreeNode extends BaseComponent {
                 }
             }
         }
-        event.preventDefault();
-        event.stopPropagation();
-        this.draghoverNode = false;
-    }
-    createDropNodeEventMetadata() {
-        return {
-            dragNode: this.tree.dragNode,
-            dragNodeIndex: this.tree.dragNodeIndex,
-            dragNodeSubNodes: this.tree.dragNodeSubNodes,
-            dropNode: this.node
-        };
-    }
-    processNodeDrop(event) {
-        let dragNodeIndex = event.dragNodeIndex;
-        event.dragNodeSubNodes.splice(dragNodeIndex, 1);
-        if (event.dropNode.children)
-            event.dropNode.children.push(event.dragNode);
-        else
-            event.dropNode.children = [event.dragNode];
-        this.tree.dragDropService.stopDrag({
-            node: event.dragNode,
-            subNodes: event.dropNode.parent ? event.dropNode.parent.children : this.tree.value,
-            index: dragNodeIndex
-        });
-    }
-    onDropNodeDragEnter(event) {
-        if (this.tree.droppableNodes && this.node?.droppable !== false && this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
-            this.draghoverNode = true;
+        this.isPrevDropPointHovered.set(false);
+        this.isNextDropPointHovered.set(false);
+        this.isNodeDropHovered.set(false);
+    }
+    onNodeDragStart(event) {
+        if (this.isNodeDraggable()) {
+            event.dataTransfer?.setData('text', 'data');
+            const target = event.currentTarget;
+            const dragEl = target.cloneNode(true);
+            const toggler = dragEl.querySelector('[data-pc-section="toggler"]');
+            const checkbox = dragEl.querySelector('[data-pc-name="checkbox"]');
+            target.setAttribute('data-p-dragging', 'true');
+            dragEl.style.width = getOuterWidth(target) + 'px';
+            dragEl.style.height = getOuterHeight(target) + 'px';
+            dragEl.setAttribute('data-pc-section', 'drag-image');
+            toggler.style.visibility = 'hidden';
+            checkbox?.remove();
+            document.body.appendChild(dragEl);
+            event.dataTransfer?.setDragImage(dragEl, 0, 0);
+            setTimeout(() => document.body.removeChild(dragEl), 0);
+            this.tree.dragDropService.startDrag({
+                tree: this,
+                node: this.node,
+                subNodes: this.subNodes,
+                index: this.index,
+                scope: this.tree.draggableScope
+            });
+        }
+        else {
+            event.preventDefault();
         }
     }
-    onDropNodeDragLeave(event) {
-        if (this.tree.droppableNodes) {
-            let rect = event.currentTarget.getBoundingClientRect();
-            if (event.x > rect.left + rect.width || event.x < rect.left || event.y >= Math.floor(rect.top + rect.height) || event.y < rect.top) {
-                this.draghoverNode = false;
+    onNodeDragOver(event) {
+        event.dataTransfer.dropEffect = 'move';
+        if (this.isDroppable()) {
+            const nodeElement = event.currentTarget;
+            const rect = nodeElement.getBoundingClientRect();
+            const y = event.clientY - rect.top;
+            this.isPrevDropPointHovered.set(false);
+            this.isNextDropPointHovered.set(false);
+            this.isNodeDropHovered.set(false);
+            if (y < rect.height * 0.25) {
+                this.isPrevDropPointHovered.set(true);
+            }
+            else if (y > rect.height * 0.75) {
+                this.isNextDropPointHovered.set(true);
             }
+            else if (this.isNodeDroppable()) {
+                this.isNodeDropHovered.set(true);
+            }
+        }
+        if (this.tree.droppableNodes) {
+            event.preventDefault();
+            event.stopPropagation();
         }
     }
+    onNodeDragLeave() {
+        this.isPrevDropPointHovered.set(false);
+        this.isNextDropPointHovered.set(false);
+        this.isNodeDropHovered.set(false);
+    }
+    onNodeDragEnd(event) {
+        event.currentTarget?.removeAttribute('data-p-dragging');
+        this.tree.dragDropService.stopDrag({
+            node: this.node,
+            subNodes: this.subNodes,
+            index: this.index
+        });
+    }
     onKeyDown(event) {
         if (!this.isSameNode(event) || (this.tree.contextMenu && this.tree.contextMenu.containerViewChild?.nativeElement.style.display === 'block')) {
             return;
@@ -444,7 +421,7 @@ class UITreeNode extends BaseComponent {
     }
     onArrowUp(event) {
         const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target.parentElement;
-        if (nodeElement.previousElementSibling) {
+        if (nodeElement?.previousElementSibling) {
             this.focusRowChange(nodeElement, nodeElement.previousElementSibling, this.findLastVisibleDescendant(nodeElement.previousElementSibling));
         }
         else {
@@ -457,16 +434,16 @@ class UITreeNode extends BaseComponent {
     }
     onArrowDown(event) {
         const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
-        const listElement = nodeElement.children[1];
+        const listElement = nodeElement?.children[1];
         if (listElement && listElement.children.length > 0) {
             this.focusRowChange(nodeElement, listElement.children[0]);
         }
         else {
-            if (nodeElement.parentElement.nextElementSibling) {
+            if (nodeElement?.parentElement?.nextElementSibling) {
                 this.focusRowChange(nodeElement, nodeElement.parentElement.nextElementSibling);
             }
             else {
-                let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement.parentElement);
+                let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement?.parentElement);
                 if (nextSiblingAncestor) {
                     this.focusRowChange(nodeElement, nextSiblingAncestor);
                 }
@@ -493,7 +470,7 @@ class UITreeNode extends BaseComponent {
             this.collapse(event);
             return;
         }
-        let parentNodeElement = this.getParentNodeElement(nodeElement.parentElement);
+        let parentNodeElement = this.getParentNodeElement(nodeElement?.parentElement);
         if (parentNodeElement) {
             this.focusRowChange(event.currentTarget, parentNodeElement);
         }
@@ -568,22 +545,13 @@ class UITreeNode extends BaseComponent {
     }
     focusVirtualNode() {
         this.timeout = setTimeout(() => {
-            let node = findSingle(this.tree?.contentViewChild.nativeElement, `[data-id="${this.node?.key ?? this.node?.data}"]`);
+            let node = findSingle(this.tree?.contentViewChild?.nativeElement, `[data-id="${this.node?.key ?? this.node?.data}"]`);
             focus(node);
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle], usesInheritance: true, ngImport: i0, template: `
         @if (node) {
-            <li
-                *ngIf="tree.droppableNodes"
-                [class]="cx('dropPoint', { param: draghoverPrev })"
-                [attr.aria-hidden]="true"
-                (drop)="onDropPoint($event, -1)"
-                (dragover)="onDropPointDragOver($event)"
-                (dragenter)="onDropPointDragEnter($event, -1)"
-                (dragleave)="onDropPointDragLeave($event)"
-            ></li>
             <li
                 [class]="cn(cx('node'), node.styleClass)"
                 [ngStyle]="{ height: itemSize + 'px' }"
@@ -600,6 +568,9 @@ class UITreeNode extends BaseComponent {
                 role="treeitem"
                 (keydown)="onKeyDown($event)"
             >
+                @if (isPrevDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                }
                 <div
                     [class]="cx('nodeContent')"
                     [style.paddingLeft]="level * indentation + 'rem'"
@@ -607,13 +578,12 @@ class UITreeNode extends BaseComponent {
                     (contextmenu)="onNodeRightClick($event)"
                     (dblclick)="onNodeDblClick($event)"
                     (touchend)="onNodeTouchEnd()"
-                    (drop)="onDropNode($event)"
-                    (dragover)="onDropNodeDragOver($event)"
-                    (dragenter)="onDropNodeDragEnter($event)"
-                    (dragleave)="onDropNodeDragLeave($event)"
+                    (drop)="onNodeDrop($event)"
+                    (dragstart)="onNodeDragStart($event)"
+                    (dragover)="onNodeDragOver($event)"
+                    (dragleave)="onNodeDragLeave($event)"
+                    (dragend)="onNodeDragEnd($event)"
                     [draggable]="tree.draggableNodes"
-                    (dragstart)="onDragStart($event)"
-                    (dragend)="onDragStop($event)"
                 >
                     <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
                         <ng-container *ngIf="!tree.togglerIconTemplate && !tree._togglerIconTemplate">
@@ -666,6 +636,9 @@ class UITreeNode extends BaseComponent {
                         </span>
                     </span>
                 </div>
+                @if (isNextDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
@@ -680,20 +653,10 @@ class UITreeNode extends BaseComponent {
                     ></p-treeNode>
                 </ul>
             </li>
-
-            <li
-                *ngIf="tree.droppableNodes && lastChild"
-                [class]="cx('dropPoint', { param: draghoverNext })"
-                (drop)="onDropPoint($event, 1)"
-                [attr.aria-hidden]="true"
-                (dragover)="onDropPointDragOver($event)"
-                (dragenter)="onDropPointDragEnter($event, 1)"
-                (dragleave)="onDropPointDragLeave($event)"
-            ></li>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UITreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UITreeNode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeNode',
@@ -701,15 +664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                     imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule],
                     template: `
         @if (node) {
-            <li
-                *ngIf="tree.droppableNodes"
-                [class]="cx('dropPoint', { param: draghoverPrev })"
-                [attr.aria-hidden]="true"
-                (drop)="onDropPoint($event, -1)"
-                (dragover)="onDropPointDragOver($event)"
-                (dragenter)="onDropPointDragEnter($event, -1)"
-                (dragleave)="onDropPointDragLeave($event)"
-            ></li>
             <li
                 [class]="cn(cx('node'), node.styleClass)"
                 [ngStyle]="{ height: itemSize + 'px' }"
@@ -726,6 +680,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 role="treeitem"
                 (keydown)="onKeyDown($event)"
             >
+                @if (isPrevDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                }
                 <div
                     [class]="cx('nodeContent')"
                     [style.paddingLeft]="level * indentation + 'rem'"
@@ -733,13 +690,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                     (contextmenu)="onNodeRightClick($event)"
                     (dblclick)="onNodeDblClick($event)"
                     (touchend)="onNodeTouchEnd()"
-                    (drop)="onDropNode($event)"
-                    (dragover)="onDropNodeDragOver($event)"
-                    (dragenter)="onDropNodeDragEnter($event)"
-                    (dragleave)="onDropNodeDragLeave($event)"
+                    (drop)="onNodeDrop($event)"
+                    (dragstart)="onNodeDragStart($event)"
+                    (dragover)="onNodeDragOver($event)"
+                    (dragleave)="onNodeDragLeave($event)"
+                    (dragend)="onNodeDragEnd($event)"
                     [draggable]="tree.draggableNodes"
-                    (dragstart)="onDragStart($event)"
-                    (dragend)="onDragStop($event)"
                 >
                     <button type="button" [attr.data-pc-section]="'toggler'" [class]="cx('nodeToggleButton')" (click)="toggle($event)" pRipple tabindex="-1">
                         <ng-container *ngIf="!tree.togglerIconTemplate && !tree._togglerIconTemplate">
@@ -792,6 +748,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         </span>
                     </span>
                 </div>
+                @if (isNextDropPointActive()) {
+                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true"></div>
+                }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy.bind(this)"
@@ -806,16 +765,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                     ></p-treeNode>
                 </ul>
             </li>
-
-            <li
-                *ngIf="tree.droppableNodes && lastChild"
-                [class]="cx('dropPoint', { param: draghoverNext })"
-                (drop)="onDropPoint($event, 1)"
-                [attr.aria-hidden]="true"
-                (dragover)="onDropPointDragOver($event)"
-                (dragenter)="onDropPointDragEnter($event, 1)"
-                (dragleave)="onDropPointDragLeave($event)"
-            ></li>
         }
     `,
                     encapsulation: ViewEncapsulation.None,
@@ -1276,7 +1225,7 @@ class Tree extends BaseComponent {
         if (simpleChange.value) {
             this.updateSerializedValue();
             if (this.hasFilterActive()) {
-                this._filter(this.filterViewChild.nativeElement.value);
+                this._filter(this.filterViewChild?.nativeElement?.value);
             }
         }
     }
@@ -1780,8 +1729,8 @@ class Tree extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", styleClass: "styleClass", contextMenu: "contextMenu", draggableScope: "draggableScope", droppableScope: "droppableScope", draggableNodes: ["draggableNodes", "draggableNodes", booleanAttribute], droppableNodes: ["droppableNodes", "droppableNodes", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", emptyMessage: "emptyMessage", ariaLabel: "ariaLabel", togglerAriaLabel: "togglerAriaLabel", ariaLabelledBy: "ariaLabelledBy", validateDrop: ["validateDrop", "validateDrop", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterOptions: "filterOptions", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", filterLocale: "filterLocale", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", indentation: ["indentation", "indentation", numberAttribute], _templateMap: "_templateMap", trackBy: "trackBy", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { selectionChange: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [TreeStyle], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Tree, deps: [{ token: i3.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", styleClass: "styleClass", contextMenu: "contextMenu", draggableScope: "draggableScope", droppableScope: "droppableScope", draggableNodes: ["draggableNodes", "draggableNodes", booleanAttribute], droppableNodes: ["droppableNodes", "droppableNodes", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", emptyMessage: "emptyMessage", ariaLabel: "ariaLabel", togglerAriaLabel: "togglerAriaLabel", ariaLabelledBy: "ariaLabelledBy", validateDrop: ["validateDrop", "validateDrop", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterOptions: "filterOptions", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", filterLocale: "filterLocale", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", indentation: ["indentation", "indentation", numberAttribute], _templateMap: "_templateMap", trackBy: "trackBy", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { selectionChange: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [TreeStyle], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
             <ng-container *ngIf="!loadingIcon">
@@ -1882,7 +1831,7 @@ class Tree extends BaseComponent {
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i4.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Tree, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tree',
@@ -2168,11 +2117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                 args: ['dragleave', ['$event']]
             }] } });
 class TreeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tree, SharedModule],