@acorex/cdk 21.0.0-next.11 → 21.0.0-next.13

package/drag-drop/index.d.ts

@@ -16,6 +16,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private viewContainerRef;
     private el;
     private handleDirective;
+    axDrag: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     dragData: _angular_core.InputSignal<unknown>;
     dragDisabled: _angular_core.InputSignal<boolean>;
     dragTransition: _angular_core.InputSignal<boolean>;
@@ -45,6 +46,8 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private dragStartOffset;
     private clonePointerOffset;
     private clonedElementViewRef;
+    private rafId;
+    private pendingPointerEvent;
     private _parentDropList;
     private _currentDropList;
     readonly createCloneElement: _angular_core.Signal<boolean>;
@@ -56,6 +59,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private boundHandlePointerUp;
     private boundHandlePointerDown;
     private boundHandlePointerMove;
+    private listenersAttached;
     ngOnInit(): void;
     ngOnDestroy(): void;
     private setElementTransition;
@@ -68,6 +72,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private preventClicking;
     private handleDropListInteractions;
     private canDropInList;
+    private isCircularReference;
     private dropZoneHoverHandler;
     private dropZoneDropHandler;
     private getDropZonesFromPoint;
@@ -83,7 +88,7 @@ declare class AXDragDirective implements OnInit, OnDestroy {
     private addDocumentListeners;
     private removeDocumentListeners;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragDirective, "[axDrag]", never, { "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragTransition": { "alias": "dragTransition"; "required": false; "isSignal": true; }; "dragElementClone": { "alias": "dragElementClone"; "required": false; "isSignal": true; }; "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; "dragStartDelay": { "alias": "dragStartDelay"; "required": false; "isSignal": true; }; "dragResetOnDblClick": { "alias": "dragResetOnDblClick"; "required": false; "isSignal": true; }; "dragLockAxis": { "alias": "dragLockAxis"; "required": false; "isSignal": true; }; "dragClonedTemplate": { "alias": "dragClonedTemplate"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; "isSignal": true; }; "dragTransitionDuration": { "alias": "dragTransitionDuration"; "required": false; "isSignal": true; }; }, { "dragPositionChanged": "dragPositionChanged"; }, ["handleDirective"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragDirective, "[axDrag]", never, { "axDrag": { "alias": "axDrag"; "required": false; "isSignal": true; }; "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragTransition": { "alias": "dragTransition"; "required": false; "isSignal": true; }; "dragElementClone": { "alias": "dragElementClone"; "required": false; "isSignal": true; }; "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; "dragStartDelay": { "alias": "dragStartDelay"; "required": false; "isSignal": true; }; "dragResetOnDblClick": { "alias": "dragResetOnDblClick"; "required": false; "isSignal": true; }; "dragLockAxis": { "alias": "dragLockAxis"; "required": false; "isSignal": true; }; "dragClonedTemplate": { "alias": "dragClonedTemplate"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; "isSignal": true; }; "dragTransitionDuration": { "alias": "dragTransitionDuration"; "required": false; "isSignal": true; }; }, { "dragPositionChanged": "dragPositionChanged"; }, ["handleDirective"], never, true, never>;
 }
 
 declare class AXDragHandleDirective {
@@ -93,45 +98,6 @@ declare class AXDragHandleDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDragHandleDirective, "[axDragHandle]", never, {}, {}, never, never, true, never>;
 }
 
-interface AXDropZoneDropEvent extends NXNativeEvent<AXDropZoneDirective, MouseEvent> {
-    dropped: AXDragDirective;
-}
-type AXDropZoneHoverEvent = AXDropZoneDropEvent & {
-    state: 'enter' | 'leave';
-};
-declare class AXDropZoneDirective extends NXComponent implements OnInit {
-    dropZoneGroup: _angular_core.InputSignal<string>;
-    isHovered: _angular_core.WritableSignal<boolean>;
-    readonly element: _angular_core.WritableSignal<HTMLElement>;
-    onElementDrop: _angular_core.OutputEmitterRef<AXDropZoneDropEvent>;
-    onElementHover: _angular_core.OutputEmitterRef<AXDropZoneHoverEvent>;
-    ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropZoneDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropZoneDirective, "[axDropZone]", ["axDropZone"], { "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; }, { "onElementDrop": "onElementDrop"; "onElementHover": "onElementHover"; }, never, never, true, never>;
-}
-
-declare class AXDragDropModule {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDropModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDragDropModule, never, [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropZoneDirective], [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropZoneDirective]>;
-    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDragDropModule>;
-}
-
-/**
- * Moves an item one index in an array to another.
- * @param array Array in which to move the item.
- * @param fromIndex Starting index of the item.
- * @param toIndex Index to which the item should be moved.
- */
-declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
-/**
- * Moves an item from one array to another.
- * @param currentArray Array from which to transfer the item.
- * @param targetArray Array into which to put the item.
- * @param currentIndex Index of the item in its current array.
- * @param targetIndex Index at which to insert the item.
- */
-declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
-
 /** Event object emitted when an item is dropped into a drop list. */
 interface AXDropListDroppedEvent extends NXNativeEvent<AXDropListDirective, MouseEvent> {
     item: AXDragDirective;
@@ -156,6 +122,8 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     private readonly _cdr;
     private readonly _platformId;
     private readonly _hostEl;
+    /** Boolean input matching the directive selector name for conditional application. */
+    axDropList: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
     /** Whether sorting within this list is disabled. */
     sortingDisabled: _angular_core.InputSignal<boolean>;
     /** The group this drop list belongs to. Dragging is only allowed between lists of the same group. */
@@ -240,8 +208,47 @@ declare class AXDropListDirective extends NXComponent implements OnInit, AfterCo
     /** Resets the internal state of the directive to its initial values. */
     resetSortState(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropListDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropListDirective, "[axDropList]", ["axDropList"], { "sortingDisabled": { "alias": "sortingDisabled"; "required": false; "isSignal": true; }; "dropListGroup": { "alias": "dropListGroup"; "required": false; "isSignal": true; }; "dropListOrientation": { "alias": "dropListOrientation"; "required": false; "isSignal": true; }; }, { "dropListDropped": "dropListDropped"; }, ["_draggableItems"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropListDirective, "[axDropList]", ["axDropList"], { "axDropList": { "alias": "axDropList"; "required": false; "isSignal": true; }; "sortingDisabled": { "alias": "sortingDisabled"; "required": false; "isSignal": true; }; "dropListGroup": { "alias": "dropListGroup"; "required": false; "isSignal": true; }; "dropListOrientation": { "alias": "dropListOrientation"; "required": false; "isSignal": true; }; }, { "dropListDropped": "dropListDropped"; }, ["_draggableItems"], never, true, never>;
 }
 
+interface AXDropZoneDropEvent extends NXNativeEvent<AXDropZoneDirective, MouseEvent> {
+    dropped: AXDragDirective;
+}
+type AXDropZoneHoverEvent = AXDropZoneDropEvent & {
+    state: 'enter' | 'leave';
+};
+declare class AXDropZoneDirective extends NXComponent implements OnInit {
+    dropZoneGroup: _angular_core.InputSignal<string>;
+    isHovered: _angular_core.WritableSignal<boolean>;
+    readonly element: _angular_core.WritableSignal<HTMLElement>;
+    onElementDrop: _angular_core.OutputEmitterRef<AXDropZoneDropEvent>;
+    onElementHover: _angular_core.OutputEmitterRef<AXDropZoneHoverEvent>;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDropZoneDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXDropZoneDirective, "[axDropZone]", ["axDropZone"], { "dropZoneGroup": { "alias": "dropZoneGroup"; "required": false; "isSignal": true; }; }, { "onElementDrop": "onElementDrop"; "onElementHover": "onElementHover"; }, never, never, true, never>;
+}
+
+declare class AXDragDropModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDragDropModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDragDropModule, never, [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropListDirective, typeof AXDropZoneDirective], [typeof AXDragDirective, typeof AXDragHandleDirective, typeof AXDropListDirective, typeof AXDropZoneDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDragDropModule>;
+}
+
+/**
+ * Moves an item one index in an array to another.
+ * @param array Array in which to move the item.
+ * @param fromIndex Starting index of the item.
+ * @param toIndex Index to which the item should be moved.
+ */
+declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
+/**
+ * Moves an item from one array to another.
+ * @param currentArray Array from which to transfer the item.
+ * @param targetArray Array into which to put the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ */
+declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+
 export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective, moveItemInArray, transferArrayItem };
 export type { AXDropListDroppedEvent, AXDropZoneDropEvent, AXDropZoneHoverEvent };

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

@@ -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. */
@@ -83,7 +85,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,7 +102,7 @@ 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;
         this._activeDragItem.set(dragItem);
         this.element.classList.add('ax-drop-list-sorting-active');
@@ -112,7 +114,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 +133,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;
         }
@@ -370,7 +375,7 @@ class AXDropListDirective extends NXComponent {
         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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", 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: [{
             type: Directive,
@@ -378,7 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                     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 }] }] } });
 
 class AXDragDirective {
     constructor() {
@@ -390,6 +395,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" }] : []));
@@ -419,6 +425,8 @@ class AXDragDirective {
         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 +457,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 +471,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 +504,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 +529,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,8 +551,7 @@ class AXDragDirective {
         this.setPosition(0, 0);
     }
     handlePointerMove(e) {
-        if (this.movedAfterDelay() ||
-            !this.isDragging() ||
+        if (!this.isDragging() ||
             this.isDelayStarted() ||
             !isPlatformBrowser(this.platformId) ||
             e.pointerId !== this.activePointerId()) {
@@ -533,32 +560,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 +615,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 +632,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 +660,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 +689,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 +727,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);
@@ -739,9 +840,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 +864,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)) {
@@ -950,6 +1061,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);
@@ -978,14 +1092,14 @@ class AXDragDirective {
         });
     }
     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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.6", 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: [{
             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() {
@@ -1010,10 +1124,10 @@ 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", 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.6", ngImport: i0, type: AXDragDropModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDragDropModule, decorators: [{