@acorex/cdk 21.0.0-next.9 → 21.0.0-next51

package/fesm2022/acorex-cdk-drag-drop.mjs

@@ -9,10 +9,10 @@ class AXDragHandleDirective {
         this.el = inject(ElementRef);
         this.element = signal(this.el.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDragHandle]',
@@ -38,6 +38,8 @@ class AXDropListDirective extends NXComponent {
         this._platformId = inject(PLATFORM_ID);
         this._hostEl = inject(ElementRef);
         // --- Public API: Inputs and Outputs ---
+        /** Boolean input matching the directive selector name for conditional application. */
+        this.axDropList = input(true, ...(ngDevMode ? [{ debugName: "axDropList", transform: (value) => value === '' || value === true }] : [{ transform: (value) => value === '' || value === true }]));
         /** Whether sorting within this list is disabled. */
         this.sortingDisabled = input(false, ...(ngDevMode ? [{ debugName: "sortingDisabled" }] : []));
         /** The group this drop list belongs to. Dragging is only allowed between lists of the same group. */
@@ -63,16 +65,24 @@ class AXDropListDirective extends NXComponent {
         this._listGap = signal(0, ...(ngDevMode ? [{ debugName: "_listGap" }] : []));
         /** A signal-based alias for the orientation input for internal use. */
         this._orientation = this.dropListOrientation;
+        /** DOM placeholder element for inter-list drags */
+        this._placeholderElement = null;
     }
     ngOnInit() {
         if (isPlatformBrowser(this._platformId)) {
             this.element.dataset['axDropList'] = 'true';
             this.element.classList.add('ax-drop-list-sorting-transition');
+            // Store reference to this directive instance on the element for drag directive access
+            this.element['__axContext__'] = this;
         }
     }
     ngAfterContentInit() {
         this._cdr.detectChanges();
     }
+    ngOnDestroy() {
+        // Clean up placeholder element if directive destroyed during drag
+        this._removePlaceholderElement();
+    }
     // --- Public Methods (for internal library use) ---
     /** Checks if the given drag item is the one currently active in this list. */
     isDragActiveForThisList(dragItem) {
@@ -83,7 +93,7 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item that is being dragged.
      */
     prepareSort(dragItem) {
-        if (this.sortingDisabled() || this._activeDragItem() || dragItem.dragDisabled())
+        if (!this.axDropList() || this.sortingDisabled() || this._activeDragItem() || dragItem.dragDisabled())
             return;
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
@@ -100,8 +110,10 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item entering this list.
      */
     enter(dragItem) {
-        if (this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
+        if (!this.axDropList() || this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
             return;
+        // Clean up any existing placeholder from previous list
+        this._removePlaceholderElement();
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
         requestAnimationFrame(() => this._zone.run(() => this._cacheGeometry()));
@@ -112,7 +124,10 @@ class AXDropListDirective extends NXComponent {
      * @param dragItem The item being dragged.
      */
     sort(event, dragItem) {
-        if (!this.isDragActiveForThisList(dragItem) || this.sortingDisabled() || !this._listInitialRect())
+        if (!this.axDropList() ||
+            !this.isDragActiveForThisList(dragItem) ||
+            this.sortingDisabled() ||
+            !this._listInitialRect())
             return;
         const pointerPosition = this._orientation() === 'vertical' ? event.clientY : event.clientX;
         const newPlaceholderIndex = this._calculatePlaceholderIndex(pointerPosition);
@@ -128,7 +143,7 @@ class AXDropListDirective extends NXComponent {
      * @param sourceList The list where the drag originated.
      */
     finalizeSort(event, droppedItem, sourceList) {
-        if (!this.isDragActiveForThisList(droppedItem) || this.sortingDisabled()) {
+        if (!this.axDropList() || !this.isDragActiveForThisList(droppedItem) || this.sortingDisabled()) {
             this.resetSortStateAndStyles(sourceList);
             return;
         }
@@ -262,38 +277,77 @@ class AXDropListDirective extends NXComponent {
         }
         return potentialPlaceholderIndex;
     }
-    /** Applies `transform` styles to all items to create the visual sorting effect. */
+    /** Applies visual shifts - uses placeholder for inter-list, transforms for intra-list. */
     _applyVisualShifts() {
         const activeItem = this._activeDragItem();
         const originalIndex = this._cachedItems().findIndex((d) => d.item === activeItem);
         const isIntraListDrag = originalIndex > -1;
-        // A helper to get the total space an item occupies (size + margins).
-        const getItemSpace = (itemData) => this._orientation() === 'vertical'
-            ? itemData.height + itemData.margins.top + itemData.margins.bottom
-            : itemData.width + itemData.margins.left + itemData.margins.right;
-        let draggedItemSize = 0;
-        if (isIntraListDrag) {
-            draggedItemSize = getItemSpace(this._cachedItems()[originalIndex]);
-        }
-        else if (activeItem) {
-            const rect = activeItem.elementRect();
-            if (rect) {
-                const style = window.getComputedStyle(activeItem.element());
-                draggedItemSize =
-                    this._orientation() === 'vertical'
-                        ? rect.height + parseFloat(style.marginTop) + parseFloat(style.marginBottom)
-                        : rect.width + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-            }
+        const placeholderIndex = this._placeholderIndex();
+        // Check if this is an "onto-node" drop list (no items, just a drop target)
+        const isOntoNodeList = this.element.dataset['dropType'] === 'onto-node';
+        if (!isIntraListDrag && activeItem && !isOntoNodeList && this._cachedItems().length > 0) {
+            // --- INTER-LIST DRAG: Use DOM placeholder for reorder lists with items ---
+            this._updatePlaceholderElement(activeItem, placeholderIndex);
         }
-        this._cachedItems().forEach((data, index) => {
-            // --- New logic: Do not transform disabled items ---
-            if (data.item.dragDisabled()) {
-                this._renderer.removeStyle(data.element, 'transform');
-                return;
+        else {
+            // --- INTRA-LIST DRAG: Use transforms (works well for same-list reordering) ---
+            this._removePlaceholderElement();
+            const getItemSpace = (itemData) => this._orientation() === 'vertical'
+                ? itemData.height + itemData.margins.top + itemData.margins.bottom
+                : itemData.width + itemData.margins.left + itemData.margins.right;
+            const draggedItemSize = isIntraListDrag ? getItemSpace(this._cachedItems()[originalIndex]) : 0;
+            this._cachedItems().forEach((data, index) => {
+                if (data.item.dragDisabled()) {
+                    this._renderer.removeStyle(data.element, 'transform');
+                    return;
+                }
+                const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
+                this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
+            });
+        }
+    }
+    /** Creates or moves the placeholder element for inter-list drags */
+    _updatePlaceholderElement(activeItem, targetIndex) {
+        const rect = activeItem.elementRect();
+        if (!rect)
+            return;
+        // Create placeholder as a clone of the dragged element
+        if (!this._placeholderElement) {
+            // Clone the entire dragged element
+            const sourceElement = activeItem.element();
+            this._placeholderElement = sourceElement.cloneNode(true);
+            // Mark it as a placeholder
+            this._renderer.addClass(this._placeholderElement, 'ax-drop-placeholder');
+            this._renderer.addClass(this._placeholderElement, 'ax-drag-placeholder');
+            // Prevent interaction with cloned content
+            this._renderer.setStyle(this._placeholderElement, 'pointerEvents', 'none');
+            // Add faded styling to indicate it's a placeholder
+            this._renderer.setStyle(this._placeholderElement, 'opacity', '0.4');
+            this._renderer.setStyle(this._placeholderElement, 'transition', 'all 200ms ease');
+        }
+        // Insert/move placeholder at target index
+        const items = this._cachedItems();
+        if (targetIndex >= 0 && targetIndex < items.length) {
+            const targetItem = items[targetIndex];
+            if (targetItem && targetItem.element) {
+                this._renderer.insertBefore(this.element, this._placeholderElement, targetItem.element);
             }
-            const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
-            this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
-        });
+            else {
+                // Fallback: append at end if target item invalid
+                this._renderer.appendChild(this.element, this._placeholderElement);
+            }
+        }
+        else {
+            // Insert at end
+            this._renderer.appendChild(this.element, this._placeholderElement);
+        }
+    }
+    /** Removes the placeholder element if it exists */
+    _removePlaceholderElement() {
+        if (this._placeholderElement) {
+            this._renderer.removeChild(this.element, this._placeholderElement);
+            this._placeholderElement = null;
+        }
     }
     /**
      * Calculates the required transform in pixels for a single item.
@@ -359,6 +413,7 @@ class AXDropListDirective extends NXComponent {
     /** Removes all `transform` styles from the items in this list. */
     _resetAllTransforms() {
         this._cachedItems().forEach((data) => this._renderer.setStyle(data.element, 'transform', ''));
+        this._removePlaceholderElement(); // Clean up inter-list placeholder
     }
     /** Resets the internal state of the directive to its initial values. */
     resetSortState() {
@@ -369,17 +424,21 @@ class AXDropListDirective extends NXComponent {
         this._listInitialRect.set(null);
         this._listGap.set(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDropListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", type: AXDropListDirective, isStandalone: true, selector: "[axDropList]", inputs: { sortingDisabled: { classPropertyName: "sortingDisabled", publicName: "sortingDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, dropListOrientation: { classPropertyName: "dropListOrientation", publicName: "dropListOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropListDropped: "dropListDropped" }, queries: [{ propertyName: "_draggableItems", predicate: AXDragDirective, isSignal: true }], exportAs: ["axDropList"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: AXDropListDirective, isStandalone: true, selector: "[axDropList]", inputs: { axDropList: { classPropertyName: "axDropList", publicName: "axDropList", isSignal: true, isRequired: false, transformFunction: null }, sortingDisabled: { classPropertyName: "sortingDisabled", publicName: "sortingDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, dropListOrientation: { classPropertyName: "dropListOrientation", publicName: "dropListOrientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropListDropped: "dropListDropped" }, queries: [{ propertyName: "_draggableItems", predicate: AXDragDirective, isSignal: true }], exportAs: ["axDropList"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDropListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDropList]',
                     exportAs: 'axDropList',
                 }]
-        }], propDecorators: { sortingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDisabled", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], dropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListOrientation", required: false }] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
+        }], propDecorators: { axDropList: [{ type: i0.Input, args: [{ isSignal: true, alias: "axDropList", required: false }] }], sortingDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingDisabled", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], dropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListOrientation", required: false }] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
 
+// Zone detection constants for nested drop lists (tree nodes)
+const ZONE_TOP_THRESHOLD = 0.3; // Top 30% triggers reorder BEFORE
+const ZONE_BOTTOM_THRESHOLD = 0.7; // Bottom 30% triggers reorder AFTER
+// Middle 40% (between thresholds) triggers drop INTO
 class AXDragDirective {
     constructor() {
         this.zone = inject(NgZone);
@@ -390,6 +449,7 @@ class AXDragDirective {
         this.viewContainerRef = inject(ViewContainerRef);
         this.el = inject(ElementRef);
         this.handleDirective = contentChild(AXDragHandleDirective, ...(ngDevMode ? [{ debugName: "handleDirective" }] : []));
+        this.axDrag = input(true, ...(ngDevMode ? [{ debugName: "axDrag", transform: (value) => value === '' || value === true }] : [{ transform: (value) => value === '' || value === true }]));
         this.dragData = input(...(ngDevMode ? [undefined, { debugName: "dragData" }] : []));
         this.dragDisabled = input(false, ...(ngDevMode ? [{ debugName: "dragDisabled" }] : []));
         this.dragTransition = input(true, ...(ngDevMode ? [{ debugName: "dragTransition" }] : []));
@@ -412,13 +472,14 @@ class AXDragDirective {
         this.dragStartTime = signal(0, ...(ngDevMode ? [{ debugName: "dragStartTime" }] : []));
         this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
         this.elementOpacity = signal('1', ...(ngDevMode ? [{ debugName: "elementOpacity" }] : []));
-        this.isDelayStarted = signal(false, ...(ngDevMode ? [{ debugName: "isDelayStarted" }] : []));
         this.movedAfterDelay = signal(false, ...(ngDevMode ? [{ debugName: "movedAfterDelay" }] : []));
         this.activePointerId = signal(null, ...(ngDevMode ? [{ debugName: "activePointerId" }] : []));
         this.prevDropZone = signal(null, ...(ngDevMode ? [{ debugName: "prevDropZone" }] : []));
         this.dragStartOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragStartOffset" }] : []));
         this.clonePointerOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "clonePointerOffset" }] : []));
         this.clonedElementViewRef = signal(null, ...(ngDevMode ? [{ debugName: "clonedElementViewRef" }] : []));
+        this.rafId = null;
+        this.pendingPointerEvent = null;
         this._parentDropList = inject(AXDropListDirective, { optional: true, skipSelf: true, host: false });
         this._currentDropList = signal(null, ...(ngDevMode ? [{ debugName: "_currentDropList" }] : []));
         this.createCloneElement = computed(() => this.dragElementClone() || !!this._parentDropList, ...(ngDevMode ? [{ debugName: "createCloneElement" }] : []));
@@ -449,6 +510,7 @@ class AXDragDirective {
         this.boundHandlePointerUp = this.handlePointerUp.bind(this);
         this.boundHandlePointerDown = this.handlePointerDown.bind(this);
         this.boundHandlePointerMove = this.handlePointerMove.bind(this);
+        this.listenersAttached = signal(null, ...(ngDevMode ? [{ debugName: "listenersAttached" }] : []));
         this.#dragDisabledEffect = effect(() => {
             if (this.dragCursor() === 'none') {
                 return;
@@ -462,14 +524,30 @@ class AXDragDirective {
                 this.renderer.removeStyle(this.handle(), 'touch-action');
             }
         }, ...(ngDevMode ? [{ debugName: "#dragDisabledEffect" }] : []));
+        this.#handleChangeEffect = effect(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            const currentHandle = this.handle();
+            const previousHandle = this.listenersAttached();
+            // Remove listeners from previous handle if it changed
+            if (previousHandle && previousHandle !== currentHandle) {
+                previousHandle.removeEventListener('dblclick', this.boundHandleDblClick);
+                previousHandle.removeEventListener('pointerdown', this.boundHandlePointerDown);
+            }
+            // Attach listeners to new handle
+            if (currentHandle && currentHandle !== previousHandle) {
+                this.zone.runOutsideAngular(() => {
+                    currentHandle.addEventListener('dblclick', this.boundHandleDblClick);
+                    currentHandle.addEventListener('pointerdown', this.boundHandlePointerDown, { passive: false });
+                });
+                this.listenersAttached.set(currentHandle);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#handleChangeEffect" }] : []));
     }
     #dragDisabledEffect;
+    #handleChangeEffect;
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                this.handle().addEventListener('dblclick', this.boundHandleDblClick);
-                this.handle().addEventListener('pointerdown', this.boundHandlePointerDown, { passive: false });
-            });
             if (this._parentDropList) {
                 this.setElementTransition(this.element());
             }
@@ -479,8 +557,11 @@ class AXDragDirective {
     }
     ngOnDestroy() {
         if (isPlatformBrowser(this.platformId)) {
-            this.handle().removeEventListener('dblclick', this.boundHandleDblClick);
-            this.handle().removeEventListener('pointerdown', this.boundHandlePointerDown);
+            const handle = this.listenersAttached();
+            if (handle) {
+                handle.removeEventListener('dblclick', this.boundHandleDblClick);
+                handle.removeEventListener('pointerdown', this.boundHandlePointerDown);
+            }
             this.removeDocumentListeners();
             if (this.createCloneElement()) {
                 this.removeCloneElement();
@@ -501,7 +582,7 @@ class AXDragDirective {
     handlePointerDown(e) {
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (this.dragDisabled() || e.button !== 0 || this._parentDropList?.sortingDisabled())
+        if (!this.axDrag() || this.dragDisabled() || e.button !== 0 || this._parentDropList?.sortingDisabled())
             return;
         this.isDragging.set(true);
         this.movedAfterDelay.set(false);
@@ -523,9 +604,7 @@ class AXDragDirective {
         this.setPosition(0, 0);
     }
     handlePointerMove(e) {
-        if (this.movedAfterDelay() ||
-            !this.isDragging() ||
-            this.isDelayStarted() ||
+        if (!this.isDragging() ||
             !isPlatformBrowser(this.platformId) ||
             e.pointerId !== this.activePointerId()) {
             return;
@@ -533,32 +612,48 @@ class AXDragDirective {
         e.preventDefault();
         if (!this.isMoving()) {
             const delay = this.dragStartDelay() ?? 0;
+            // FIX: Delay logic was inverted
             if (Date.now() - this.dragStartTime() < delay) {
-                this.movedAfterDelay.set(true);
-                return;
+                return; // Still waiting for delay
             }
             this.isMoving.set(true);
             this.handle().setPointerCapture(e.pointerId);
             this.startDrag(e);
         }
-        if (this.createCloneElement()) {
-            const newCloneX = e.clientX - this.clonePointerOffset().x;
-            const newCloneY = e.clientY - this.clonePointerOffset().y;
-            this.setClonePosition(newCloneX, newCloneY);
-        }
-        else {
-            const newX = e.clientX - this.dragStartOffset().x;
-            const newY = e.clientY - this.dragStartOffset().y;
-            this.setPosition(newX, newY);
-        }
+        // Run position updates outside Angular zone for better performance
+        this.zone.runOutsideAngular(() => {
+            if (this.createCloneElement()) {
+                const newCloneX = e.clientX - this.clonePointerOffset().x;
+                const newCloneY = e.clientY - this.clonePointerOffset().y;
+                this.setClonePosition(newCloneX, newCloneY);
+            }
+            else {
+                const newX = e.clientX - this.dragStartOffset().x;
+                const newY = e.clientY - this.dragStartOffset().y;
+                this.setPosition(newX, newY);
+            }
+        });
+        // Throttle drop list interactions using requestAnimationFrame
         if (this._parentDropList) {
-            this.handleDropListInteractions(e);
+            this.pendingPointerEvent = e;
+            if (this.rafId === null) {
+                this.rafId = requestAnimationFrame(() => {
+                    if (this.pendingPointerEvent) {
+                        this.handleDropListInteractions(this.pendingPointerEvent);
+                        this.pendingPointerEvent = null;
+                    }
+                    this.rafId = null;
+                });
+            }
         }
         else {
             this.dropZoneHoverHandler(e);
         }
     }
     startDrag(e) {
+        // Add CDK-style classes
+        this.renderer.addClass(this.element(), 'ax-dragging');
+        this.renderer.addClass(this.element(), 'ax-drag-placeholder');
         if (this._parentDropList) {
             this._currentDropList.set(this._parentDropList);
             this._parentDropList.prepareSort(this);
@@ -572,7 +667,11 @@ class AXDragDirective {
                 x: e.clientX - elementRect.left,
                 y: e.clientY - elementRect.top,
             });
-            this.createCloneElementHandler(this.element());
+            const clone = this.createCloneElementHandler(this.element());
+            if (clone) {
+                this.renderer.addClass(clone, 'ax-drag-preview');
+                this.renderer.addClass(clone, 'ax-dragging');
+            }
         }
     }
     handlePointerUp(e) {
@@ -585,6 +684,9 @@ class AXDragDirective {
         const wasMoving = this.isMoving();
         this.isMoving.set(false);
         this.isDragging.set(false);
+        // Remove CDK-style classes
+        this.renderer.removeClass(this.element(), 'ax-dragging');
+        this.renderer.removeClass(this.element(), 'ax-drag-placeholder');
         if (!wasMoving) {
             this.activePointerId.set(null);
             this.removeDocumentListeners();
@@ -610,6 +712,12 @@ class AXDragDirective {
         else {
             this.dropZoneDropHandler(e);
         }
+        // Cancel any pending RAF callbacks
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.pendingPointerEvent = null;
         this.activePointerId.set(null);
         this.removeDocumentListeners();
         this._currentDropList.set(null);
@@ -633,9 +741,21 @@ class AXDragDirective {
         const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
         const previousList = this._currentDropList();
         let targetList = null;
-        if (listUnderPointer && this.canDropInList(listUnderPointer)) {
+        const canDrop = listUnderPointer && this.canDropInList(listUnderPointer);
+        if (canDrop) {
             targetList = listUnderPointer;
         }
+        // Update cursor based on whether drop is allowed
+        if (listUnderPointer) {
+            const cloneEl = this.clonedElement();
+            const cursor = canDrop ? 'move' : 'not-allowed';
+            if (cloneEl) {
+                this.renderer.setStyle(cloneEl, 'cursor', cursor);
+            }
+            else {
+                this.renderer.setStyle(this.element(), 'cursor', cursor);
+            }
+        }
         if (targetList !== previousList) {
             if (previousList) {
                 previousList.cancelSortPreview();
@@ -659,7 +779,40 @@ class AXDragDirective {
         }
         const dragGroup = this._parentDropList.dropListGroup();
         const targetGroup = list.dropListGroup();
-        return !!dragGroup && dragGroup === targetGroup;
+        if (!dragGroup || dragGroup !== targetGroup) {
+            return false;
+        }
+        // Check for circular reference (tree-specific validation)
+        const draggedNode = this.dragData();
+        const targetNodeId = list.element.getAttribute('data-node-id');
+        if (draggedNode && this.isCircularReference(targetNodeId, draggedNode)) {
+            return false;
+        }
+        return true;
+    }
+    isCircularReference(targetNodeId, draggedNode) {
+        if (!draggedNode || typeof draggedNode !== 'object') {
+            return false;
+        }
+        const node = draggedNode;
+        // Check if dropping into itself
+        if (targetNodeId === node.id) {
+            return true;
+        }
+        // Check if targetNodeId is in draggedNode's descendants
+        if (!node.children || !Array.isArray(node.children)) {
+            return false;
+        }
+        for (const child of node.children) {
+            const childNode = child;
+            if (childNode.id === targetNodeId) {
+                return true;
+            }
+            if (this.isCircularReference(targetNodeId, child)) {
+                return true;
+            }
+        }
+        return false;
     }
     dropZoneHoverHandler(e) {
         const dropZones = this.getDropZonesFromPoint(e.clientX, e.clientY);
@@ -695,10 +848,37 @@ class AXDragDirective {
             .map((el) => el['__axContext__']);
     }
     getDropListFromPoint(x, y) {
-        const dropListElement = this.document
+        const dropListElements = this.document
             .elementsFromPoint(x, y)
-            .find((el) => el instanceof HTMLElement && el.dataset['axDropList'] === 'true');
-        return dropListElement ? dropListElement['__axContext__'] : null;
+            .filter((el) => el instanceof HTMLElement && el.dataset['axDropList'] === 'true');
+        if (dropListElements.length === 0) {
+            return null;
+        }
+        // If only one drop list, use it
+        if (dropListElements.length === 1) {
+            return dropListElements[0]['__axContext__'];
+        }
+        // Multiple drop lists detected (nested scenario like tree2)
+        // Prioritize based on pointer position and drop type
+        const ontoNodeList = dropListElements.find((el) => el.dataset['dropType'] === 'onto-node');
+        const reorderList = dropListElements.find((el) => el.dataset['dropType'] !== 'onto-node');
+        // If no special handling needed, return first
+        if (!ontoNodeList || !reorderList) {
+            return dropListElements[0]['__axContext__'];
+        }
+        // Calculate pointer position relative to the "onto-node" element
+        const ontoNodeRect = ontoNodeList.getBoundingClientRect();
+        const relativeY = y - ontoNodeRect.top;
+        const heightRatio = relativeY / ontoNodeRect.height;
+        // Smart zone detection based on pointer position
+        if (heightRatio < ZONE_TOP_THRESHOLD || heightRatio > ZONE_BOTTOM_THRESHOLD) {
+            // Top or bottom zone: reorder (drop BEFORE/AFTER node)
+            return reorderList['__axContext__'];
+        }
+        else {
+            // Center zone: onto-node (drop INTO node as child)
+            return ontoNodeList['__axContext__'];
+        }
     }
     dropZoneValidation(dropZone) {
         if (!dropZone)
@@ -739,9 +919,14 @@ class AXDragDirective {
             constrainedY = this.currentAxis().y;
         if (this.dragLockAxis() === 'y')
             constrainedX = this.currentAxis().x;
-        this.currentAxis.set({ x: constrainedX, y: constrainedY });
+        // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(this.element(), 'translate', `${constrainedX}px ${constrainedY}px`);
-        this.dragPositionChanged.emit(this.currentAxis());
+        // Only update signal and emit if position actually changed significantly (throttle)
+        const current = this.currentAxis();
+        if (Math.abs(current.x - constrainedX) > 0.5 || Math.abs(current.y - constrainedY) > 0.5) {
+            this.currentAxis.set({ x: constrainedX, y: constrainedY });
+            this.dragPositionChanged.emit({ x: constrainedX, y: constrainedY });
+        }
     }
     setClonePosition(x, y) {
         let constrainedX = x;
@@ -758,9 +943,14 @@ class AXDragDirective {
             constrainedY = this.currentCloneAxis().y;
         if (this.dragLockAxis() === 'y')
             constrainedX = this.currentCloneAxis().x;
-        this.currentCloneAxis.set({ x: constrainedX, y: constrainedY });
+        // Direct DOM manipulation without triggering change detection
         this.renderer.setStyle(cloneEl, 'translate', `${constrainedX}px ${constrainedY}px`);
-        this.dragPositionChanged.emit(this.currentCloneAxis());
+        // Only update signal and emit if position actually changed significantly (throttle)
+        const current = this.currentCloneAxis();
+        if (Math.abs(current.x - constrainedX) > 0.5 || Math.abs(current.y - constrainedY) > 0.5) {
+            this.currentCloneAxis.set({ x: constrainedX, y: constrainedY });
+            this.dragPositionChanged.emit({ x: constrainedX, y: constrainedY });
+        }
     }
     createCloneElementHandler(originalElement) {
         if (!isPlatformBrowser(this.platformId)) {
@@ -819,8 +1009,8 @@ class AXDragDirective {
                     try {
                         target.style.setProperty(propName, computedStyles.getPropertyValue(propName), computedStyles.getPropertyPriority(propName));
                     }
-                    catch (e) {
-                        console.log(e);
+                    catch {
+                        // Some CSS properties cannot be set directly, skip silently
                     }
                 }
             }
@@ -950,6 +1140,9 @@ class AXDragDirective {
             return;
         const clone = this.clonedElement();
         if (clone?.parentNode) {
+            // Remove classes before removing element
+            this.renderer.removeClass(clone, 'ax-drag-preview');
+            this.renderer.removeClass(clone, 'ax-dragging');
             this.renderer.removeChild(clone.parentNode, clone);
         }
         this.clonedElement.set(null);
@@ -977,15 +1170,15 @@ class AXDragDirective {
             this.document.removeEventListener('pointercancel', this.boundHandlePointerUp);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", type: AXDragDirective, isStandalone: true, selector: "[axDrag]", inputs: { dragData: { classPropertyName: "dragData", publicName: "dragData", isSignal: true, isRequired: false, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", isSignal: true, isRequired: false, transformFunction: null }, dragTransition: { classPropertyName: "dragTransition", publicName: "dragTransition", isSignal: true, isRequired: false, transformFunction: null }, dragElementClone: { classPropertyName: "dragElementClone", publicName: "dragElementClone", isSignal: true, isRequired: false, transformFunction: null }, dropZoneGroup: { classPropertyName: "dropZoneGroup", publicName: "dropZoneGroup", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, dragResetOnDblClick: { classPropertyName: "dragResetOnDblClick", publicName: "dragResetOnDblClick", isSignal: true, isRequired: false, transformFunction: null }, dragLockAxis: { classPropertyName: "dragLockAxis", publicName: "dragLockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragClonedTemplate: { classPropertyName: "dragClonedTemplate", publicName: "dragClonedTemplate", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragTransitionDuration: { classPropertyName: "dragTransitionDuration", publicName: "dragTransitionDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragPositionChanged: "dragPositionChanged" }, queries: [{ propertyName: "handleDirective", first: true, predicate: AXDragHandleDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.9", type: AXDragDirective, isStandalone: true, selector: "[axDrag]", inputs: { axDrag: { classPropertyName: "axDrag", publicName: "axDrag", isSignal: true, isRequired: false, transformFunction: null }, dragData: { classPropertyName: "dragData", publicName: "dragData", isSignal: true, isRequired: false, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", isSignal: true, isRequired: false, transformFunction: null }, dragTransition: { classPropertyName: "dragTransition", publicName: "dragTransition", isSignal: true, isRequired: false, transformFunction: null }, dragElementClone: { classPropertyName: "dragElementClone", publicName: "dragElementClone", isSignal: true, isRequired: false, transformFunction: null }, dropZoneGroup: { classPropertyName: "dropZoneGroup", publicName: "dropZoneGroup", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, dragResetOnDblClick: { classPropertyName: "dragResetOnDblClick", publicName: "dragResetOnDblClick", isSignal: true, isRequired: false, transformFunction: null }, dragLockAxis: { classPropertyName: "dragLockAxis", publicName: "dragLockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragClonedTemplate: { classPropertyName: "dragClonedTemplate", publicName: "dragClonedTemplate", isSignal: true, isRequired: false, transformFunction: null }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", isSignal: true, isRequired: false, transformFunction: null }, dragTransitionDuration: { classPropertyName: "dragTransitionDuration", publicName: "dragTransitionDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragPositionChanged: "dragPositionChanged" }, queries: [{ propertyName: "handleDirective", first: true, predicate: AXDragHandleDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDrag]',
                 }]
-        }], propDecorators: { handleDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXDragHandleDirective), { isSignal: true }] }], dragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragData", required: false }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDisabled", required: false }] }], dragTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragTransition", required: false }] }], dragElementClone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragElementClone", required: false }] }], dropZoneGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZoneGroup", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], dragResetOnDblClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragResetOnDblClick", required: false }] }], dragLockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragLockAxis", required: false }] }], dragClonedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragClonedTemplate", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dragBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBoundary", required: false }] }], dragTransitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragTransitionDuration", required: false }] }], dragPositionChanged: [{ type: i0.Output, args: ["dragPositionChanged"] }] } });
+        }], propDecorators: { handleDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXDragHandleDirective), { isSignal: true }] }], axDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "axDrag", required: false }] }], dragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragData", required: false }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDisabled", required: false }] }], dragTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragTransition", required: false }] }], dragElementClone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragElementClone", required: false }] }], dropZoneGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZoneGroup", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], dragResetOnDblClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragResetOnDblClick", required: false }] }], dragLockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragLockAxis", required: false }] }], dragClonedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragClonedTemplate", required: false }] }], dragCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragCursor", required: false }] }], dragBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBoundary", required: false }] }], dragTransitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragTransitionDuration", required: false }] }], dragPositionChanged: [{ type: i0.Output, args: ["dragPositionChanged"] }] } });
 
 class AXDropZoneDirective extends NXComponent {
     constructor() {
@@ -999,10 +1192,10 @@ class AXDropZoneDirective extends NXComponent {
     ngOnInit() {
         this.element().dataset['axDropZone'] = 'true';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDropZoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: AXDropZoneDirective, isStandalone: true, selector: "[axDropZone]", inputs: { dropZoneGroup: { classPropertyName: "dropZoneGroup", publicName: "dropZoneGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementDrop: "onElementDrop", onElementHover: "onElementHover" }, exportAs: ["axDropZone"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropZoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: AXDropZoneDirective, isStandalone: true, selector: "[axDropZone]", inputs: { dropZoneGroup: { classPropertyName: "dropZoneGroup", publicName: "dropZoneGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementDrop: "onElementDrop", onElementHover: "onElementHover" }, exportAs: ["axDropZone"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDropZone]',
@@ -1010,13 +1203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }], propDecorators: { dropZoneGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZoneGroup", required: false }] }], onElementDrop: [{ type: i0.Output, args: ["onElementDrop"] }], onElementHover: [{ type: i0.Output, args: ["onElementHover"] }] } });
 
-const COMPONENT = [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective];
+const COMPONENT = [AXDragDirective, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective];
 class AXDragDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDropModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragDropModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENT],