@acorex/cdk 20.0.0 → 20.0.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, Directive, NgZone, DOCUMENT, Renderer2, ChangeDetectorRef, PLATFORM_ID, contentChild, input, output, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, input, output, contentChildren, DOCUMENT, PLATFORM_ID, ViewContainerRef, contentChild, linkedSignal, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 import { NXComponent } from '@acorex/cdk/common';
@@ -9,16 +9,346 @@ class AXDragHandleDirective {
         this.el = inject(ElementRef);
         this.element = signal(this.el.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDragHandle]',
                 }]
         }] });
 
+/**
+ * @Directive axDropList
+ *
+ * Manages a list of draggable items (`axDrag`), enabling sorting within the list
+ * and transferring items between compatible lists. It handles the visual shifting
+ * of items during a drag operation to provide a clear preview of the drop location.
+ *
+ * This directive automatically detects `gap` from flexbox/grid layouts and handles
+ * items with variable sizes and margins.
+ */
+class AXDropListDirective extends NXComponent {
+    constructor() {
+        super(...arguments);
+        this._zone = inject(NgZone);
+        this._renderer = inject(Renderer2);
+        this._cdr = inject(ChangeDetectorRef);
+        this._hostEl = inject(ElementRef);
+        // --- Public API: Inputs and Outputs ---
+        /** Whether sorting within this list is disabled. */
+        this.sortingDisabled = input(false);
+        /** The group this drop list belongs to. Dragging is only allowed between lists of the same group. */
+        this.dropListGroup = input();
+        /** The layout orientation of the list. */
+        this.dropListOrientation = input('vertical');
+        /** Emits when an item is dropped into the list. */
+        this.dropListDropped = output();
+        /** The `axDrag` directives that are direct children of this list. */
+        this._draggableItems = contentChildren(AXDragDirective, { descendants: false });
+        // --- Internal State Management ---
+        /** The native element of the drop list. */
+        this.element = this._hostEl.nativeElement;
+        /** The draggable item currently being moved over this list. */
+        this._activeDragItem = signal(null);
+        /** The calculated index where the placeholder/item should be. */
+        this._placeholderIndex = signal(-1);
+        /** A snapshot of the items' data and geometry at the start of the drag. */
+        this._cachedItems = signal([]);
+        /** The list's initial bounding box, used to calculate scroll delta. */
+        this._listInitialRect = signal(null);
+        /** The detected `gap` of the list for the current orientation. */
+        this._listGap = signal(0);
+        /** A signal-based alias for the orientation input for internal use. */
+        this._orientation = this.dropListOrientation;
+    }
+    ngOnInit() {
+        this.element.dataset['axDropList'] = 'true';
+        this.element.classList.add('ax-drop-list-sorting-transition');
+    }
+    ngAfterContentInit() {
+        this._cdr.detectChanges();
+    }
+    // --- Public Methods (for internal library use) ---
+    /** Checks if the given drag item is the one currently active in this list. */
+    isDragActiveForThisList(dragItem) {
+        return this._activeDragItem() === dragItem;
+    }
+    /**
+     * Prepares the list for sorting when a drag operation starts from within this list.
+     * @param dragItem The item that is being dragged.
+     */
+    prepareSort(dragItem) {
+        if (this.sortingDisabled() || this._activeDragItem())
+            return;
+        this._activeDragItem.set(dragItem);
+        this.element.classList.add('ax-drop-list-sorting-active');
+        requestAnimationFrame(() => {
+            this._zone.run(() => {
+                this._cacheGeometry();
+                const placeholderIdx = this._cachedItems().findIndex((data) => data.item === dragItem);
+                this._placeholderIndex.set(placeholderIdx);
+            });
+        });
+    }
+    /**
+     * Prepares the list for receiving an item that started dragging from another list.
+     * @param dragItem The item entering this list.
+     */
+    enter(dragItem) {
+        if (this.sortingDisabled() || this.isDragActiveForThisList(dragItem))
+            return;
+        this._activeDragItem.set(dragItem);
+        this.element.classList.add('ax-drop-list-sorting-active');
+        requestAnimationFrame(() => this._zone.run(() => this._cacheGeometry()));
+    }
+    /**
+     * Calculates the new placeholder index based on the pointer's position and applies visual shifts.
+     * @param event The pointer move event.
+     * @param dragItem The item being dragged.
+     */
+    sort(event, dragItem) {
+        if (!this.isDragActiveForThisList(dragItem) || this.sortingDisabled() || !this._listInitialRect())
+            return;
+        const pointerPosition = this._orientation() === 'vertical' ? event.clientY : event.clientX;
+        const newPlaceholderIndex = this._calculatePlaceholderIndex(pointerPosition);
+        if (this._placeholderIndex() !== newPlaceholderIndex) {
+            this._placeholderIndex.set(newPlaceholderIndex);
+            this._applyVisualShifts();
+        }
+    }
+    /**
+     * Finalizes the drop, emits the drop event, and resets the list's state.
+     * @param event The pointer up event.
+     * @param droppedItem The item that was dropped.
+     * @param sourceList The list where the drag originated.
+     */
+    finalizeSort(event, droppedItem, sourceList) {
+        if (!this.isDragActiveForThisList(droppedItem) || this.sortingDisabled()) {
+            this.resetSortStateAndStyles(sourceList);
+            return;
+        }
+        const activeItem = this._activeDragItem();
+        const targetSlotIndex = this._placeholderIndex();
+        if (!activeItem || targetSlotIndex === -1) {
+            this.resetSortStateAndStyles(sourceList);
+            return;
+        }
+        const previousIndex = sourceList._cachedItems().findIndex((d) => d.item === activeItem);
+        // Adjust the index for array mutation if moving an item to a later position in the same list.
+        const currentIndex = sourceList === this && previousIndex !== -1 && targetSlotIndex > previousIndex
+            ? targetSlotIndex - 1
+            : targetSlotIndex;
+        this.dropListDropped.emit({
+            nativeEvent: event,
+            sender: this,
+            item: activeItem,
+            previousIndex,
+            currentIndex,
+            container: this,
+            previousContainer: sourceList,
+        });
+        this.resetSortStateAndStyles(sourceList);
+    }
+    /** Resets the transforms on all items and cancels the current sort operation. */
+    cancelSort(dragItem) {
+        if (dragItem && !this.isDragActiveForThisList(dragItem))
+            return;
+        this._resetAllTransforms();
+        this.resetSortState();
+    }
+    /** Resets transforms but keeps the active state, used when moving between lists. */
+    cancelSortPreview() {
+        if (!this._activeDragItem())
+            return;
+        this._resetAllTransforms();
+        const originalIndex = this._cachedItems().findIndex((d) => d.item === this._activeDragItem());
+        this._placeholderIndex.set(originalIndex > -1 ? originalIndex : -1);
+    }
+    // --- Private Helper Methods ---
+    /** Caches the geometry of the list and its items at the start of a drag. */
+    _cacheGeometry() {
+        this._listInitialRect.set(this.element.getBoundingClientRect());
+        this._detectAndCacheListGap();
+        const items = this._draggableItems().map((itemDraggable) => {
+            const el = itemDraggable.element();
+            const style = window.getComputedStyle(el);
+            const rect = el.getBoundingClientRect();
+            return {
+                item: itemDraggable,
+                element: el,
+                initialRect: rect,
+                width: rect.width,
+                height: rect.height,
+                margins: {
+                    top: parseFloat(style.marginTop),
+                    bottom: parseFloat(style.marginBottom),
+                    left: parseFloat(style.marginLeft),
+                    right: parseFloat(style.marginRight),
+                },
+            };
+        });
+        this._cachedItems.set(items);
+    }
+    /** Detects and caches the `gap` property from the list's computed styles. */
+    _detectAndCacheListGap() {
+        const listStyle = window.getComputedStyle(this.element);
+        const gapValue = listStyle.getPropertyValue('gap');
+        if (gapValue && gapValue !== 'normal') {
+            const gapParts = gapValue.split(' ');
+            const rowGap = parseFloat(gapParts[0]);
+            const columnGap = parseFloat(gapParts[1] || gapParts[0]);
+            this._listGap.set(this._orientation() === 'vertical' ? rowGap : columnGap);
+        }
+        else {
+            this._listGap.set(0);
+        }
+    }
+    /**
+     * Determines the new placeholder index by comparing the pointer position against the
+     * midpoints of the other items in the list.
+     * @param pointerPosition The clientX or clientY of the pointer.
+     * @returns The calculated placeholder index.
+     */
+    _calculatePlaceholderIndex(pointerPosition) {
+        const activeItem = this._activeDragItem();
+        const listRect = this._listInitialRect();
+        const siblings = this._cachedItems().filter((d) => d.item !== activeItem);
+        const scrollDelta = this._orientation() === 'vertical'
+            ? this.element.getBoundingClientRect().top - listRect.top
+            : this.element.getBoundingClientRect().left - listRect.left;
+        let newIndexInSiblings = -1;
+        for (let i = 0; i < siblings.length; i++) {
+            const sibling = siblings[i];
+            const itemMidPoint = (this._orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
+                scrollDelta +
+                (this._orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
+            if (pointerPosition < itemMidPoint) {
+                newIndexInSiblings = i;
+                break;
+            }
+        }
+        if (newIndexInSiblings === -1) {
+            newIndexInSiblings = siblings.length;
+        }
+        const originalIndex = this._cachedItems().findIndex((d) => d.item === activeItem);
+        // Map the index from the 'siblings' array back to the original `_cachedItems` array.
+        return originalIndex > -1 && newIndexInSiblings >= originalIndex ? newIndexInSiblings + 1 : newIndexInSiblings;
+    }
+    /** Applies `transform` styles to all items to create the visual sorting effect. */
+    _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 {
+            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);
+            }
+        }
+        this._cachedItems().forEach((data, index) => {
+            const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
+            this._renderer.setStyle(data.element, 'transform', transform ? `${this._orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
+        });
+    }
+    /**
+     * Calculates the required transform in pixels for a single item.
+     * @param index The index of the item to transform.
+     * @param originalIndex The original index of the dragged item (-1 if from another list).
+     * @param draggedItemSize The size (including margins) of the item being dragged.
+     * @param getItemSpace A helper function to get an item's size including margins.
+     * @returns The transform value in pixels.
+     */
+    _calculateTransform(index, originalIndex, draggedItemSize, getItemSpace) {
+        const targetIndex = this._placeholderIndex();
+        const listGap = this._listGap();
+        if (originalIndex > -1) {
+            // --- Intra-list Drag ---
+            if (index === originalIndex) {
+                // The dragged item moves by the sum of the sizes of the items it passes over, PLUS the gaps between them.
+                let offset = 0;
+                if (targetIndex > originalIndex) {
+                    // Dragging down/right
+                    for (let i = originalIndex + 1; i < targetIndex; i++) {
+                        offset += getItemSpace(this._cachedItems()[i]) + listGap;
+                    }
+                }
+                else {
+                    // Dragging up/left
+                    for (let i = targetIndex; i < originalIndex; i++) {
+                        offset -= getItemSpace(this._cachedItems()[i]) + listGap;
+                    }
+                }
+                return offset;
+            }
+            else {
+                // It's a sibling item that needs to make space.
+                // It moves by the size of the dragged item, plus ONE gap to fill the void.
+                const shift = draggedItemSize + listGap;
+                if (originalIndex < targetIndex && index > originalIndex && index < targetIndex) {
+                    return -shift;
+                }
+                else if (originalIndex > targetIndex && index >= targetIndex && index < originalIndex) {
+                    return shift;
+                }
+            }
+        }
+        else {
+            // --- Inter-list Drag (from another list) ---
+            if (index >= targetIndex) {
+                // An item from another list enters. Siblings shift by its size plus ONE gap.
+                return draggedItemSize + listGap;
+            }
+        }
+        return 0;
+    }
+    /** Resets the state of this list and the source list after a drop. */
+    resetSortStateAndStyles(sourceList) {
+        const listsToReset = new Set([this, sourceList]);
+        listsToReset.forEach((list) => {
+            if (list) {
+                list._resetAllTransforms();
+                list.resetSortState();
+            }
+        });
+    }
+    /** Removes all `transform` styles from the items in this list. */
+    _resetAllTransforms() {
+        this._cachedItems().forEach((data) => this._renderer.setStyle(data.element, 'transform', ''));
+    }
+    /** Resets the internal state of the directive to its initial values. */
+    resetSortState() {
+        this.element.classList.remove('ax-drop-list-sorting-active');
+        this._activeDragItem.set(null);
+        this._cachedItems.set([]);
+        this._placeholderIndex.set(-1);
+        this._listInitialRect.set(null);
+        this._listGap.set(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDropListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.4", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDropListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axDropList]',
+                    exportAs: 'axDropList',
+                }]
+        }] });
+
 class AXDragDirective {
     constructor() {
         this.zone = inject(NgZone);
@@ -26,42 +356,51 @@ class AXDragDirective {
         this.renderer = inject(Renderer2);
         this.cdr = inject(ChangeDetectorRef);
         this.platformId = inject(PLATFORM_ID);
+        this.viewContainerRef = inject(ViewContainerRef);
         this.el = inject(ElementRef);
         this.handleDirective = contentChild(AXDragHandleDirective);
         this.dragData = input();
         this.dragDisabled = input(false);
+        this.dragTransition = input(true);
         this.dragElementClone = input(false);
         this.dropZoneGroup = input();
         this.dragStartDelay = input();
         this.dragResetOnDblClick = input(true);
         this.dragLockAxis = input(null);
+        this.dragClonedTemplate = input();
         this.dragCursor = input('move');
         this.dragBoundary = input();
+        this.dragTransitionDuration = input(150);
         this.dragPositionChanged = output();
+        this.clonedElement = signal(null);
         this.currentAxis = signal({ x: 0, y: 0 });
         this.currentCloneAxis = signal({ x: 0, y: 0 });
-        this.clonedElement = signal(null);
+        this.transitionDuration = linkedSignal(() => this.dragTransitionDuration());
         this.element = signal(this.el.nativeElement);
-        this.elementOpacity = signal('1');
         this.isMoving = signal(false);
         this.isDragging = signal(false);
+        this.elementOpacity = signal('1');
         this.isDelayStarted = signal(false);
+        this.prevDropZone = signal(null);
         this.dragStartOffset = signal({ x: 0, y: 0 });
         this.clonePointerOffset = signal({ x: 0, y: 0 });
-        this.prevDropZone = signal(null);
+        this.clonedElementViewRef = signal(null);
+        this._parentDropList = inject(AXDropListDirective, { optional: true, skipSelf: true, host: false });
+        this._currentDropList = signal(null);
+        this.createCloneElement = computed(() => this.dragElementClone() || !!this._parentDropList);
         this.boundaryElement = computed(() => {
             const boundary = this.dragBoundary();
             if (!boundary) {
                 return null;
             }
             if (typeof boundary === 'string') {
-                return this.el.nativeElement.closest(boundary);
+                return this.document.querySelector(boundary);
             }
             return boundary instanceof ElementRef ? boundary.nativeElement : boundary;
         });
         this.elementRect = computed(() => {
             if (!isPlatformBrowser(this.platformId)) {
-                return null; // Or some default/mock DOMRect-like object if needed for type safety
+                return null;
             }
             return this.element().getBoundingClientRect();
         });
@@ -97,6 +436,9 @@ class AXDragDirective {
                 this.handle().addEventListener('dblclick', this.boundHandleDblClick);
                 this.handle().addEventListener('pointerdown', this.boundHandlePointerDown, { passive: false });
             });
+            if (this._parentDropList) {
+                this.setElementTransition(this.element());
+            }
             this.renderer.setStyle(this.element(), 'z-index', '1');
             this.elementOpacity.set(getComputedStyle(this.element()).opacity);
         }
@@ -106,27 +448,35 @@ class AXDragDirective {
             this.handle().removeEventListener('dblclick', this.boundHandleDblClick);
             this.handle().removeEventListener('pointerdown', this.boundHandlePointerDown);
             this.removeDocumentListeners();
-            if (this.dragElementClone()) {
+            if (this.createCloneElement()) {
                 this.removeCloneElement();
             }
+            if (this._parentDropList && this.isDragging()) {
+                this._parentDropList.cancelSort();
+            }
         }
     }
+    setElementTransition(element) {
+        this.renderer.setStyle(element, 'transition-property', 'transform, opacity, translate');
+        this.renderer.setStyle(element, 'transition-duration', `var(--ax-sys-transition-duration,${this.transitionDuration()}ms)`);
+        this.renderer.setStyle(element, 'transition-timing-function', 'var(--ax-sys-transition-timing-function)');
+    }
+    removeElementTransition(element) {
+        this.renderer.setStyle(element, 'transition-property', 'opacity');
+    }
     handlePointerDown(e) {
         if (!isPlatformBrowser(this.platformId))
             return;
         if (this.dragDisabled() || e.button !== 0)
             return;
-        switch (this.dragCursor()) {
-            case 'move':
-                this.renderer.setStyle(this.element(), 'cursor', 'move');
-                break;
-            case 'grab':
-                this.renderer.setStyle(this.element(), 'cursor', 'grabbing');
-                break;
+        this.isDragging.set(true);
+        if (this.dragCursor() === 'move') {
+            this.renderer.setStyle(this.document.body, 'cursor', 'move');
+        }
+        else if (this.dragCursor() === 'grab') {
+            this.renderer.setStyle(this.document.body, 'cursor', 'grabbing');
         }
-        // e.preventDefault();
         e.stopPropagation();
-        this.isDragging.set(true);
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
         this.renderer.setStyle(this.handle(), 'userSelect', 'none');
         this.handle().setPointerCapture(e.pointerId);
@@ -134,49 +484,76 @@ class AXDragDirective {
         if (this.dragStartDelay()) {
             this.isDelayStarted.set(true);
             setTimeout(() => {
-                this.isDelayStarted.set(false);
+                if (this.isDragging()) {
+                    this.isDelayStarted.set(false);
+                    this.startDrag(e);
+                }
             }, this.dragStartDelay());
         }
-        this.dropZoneHoverHandler(e);
-        if (this.dragElementClone()) {
+        else {
+            this.startDrag(e);
+        }
+    }
+    startDrag(e) {
+        if (this._parentDropList) {
+            this._currentDropList.set(this._parentDropList);
+            this._parentDropList.prepareSort(this);
+        }
+        else {
+            this.dropZoneHoverHandler(e);
+        }
+        if (this.createCloneElement()) {
             const elementRect = this.element().getBoundingClientRect();
             this.clonePointerOffset.set({
                 x: e.clientX - elementRect.left,
                 y: e.clientY - elementRect.top,
             });
-            this.createCloneElement(this.element());
+            this.createCloneElementHandler(this.element());
         }
     }
     handlePointerUp(e) {
+        const transform = this.element().style.transform;
+        let x = 0;
+        let y = 0;
+        if (transform) {
+            x = Number(transform.split('translateX(')[1]?.split('px)')[0]);
+            y = Number(transform.split('translateY(')[1]?.split('px)')[0]);
+        }
         if (!isPlatformBrowser(this.platformId))
             return;
-        if (!this.isDragging()) {
+        if (!this.isDragging())
             return;
+        this.renderer.removeStyle(this.document.body, 'cursor');
+        const wasMoving = this.isMoving();
+        this.isDragging.set(false);
+        if (wasMoving) {
+            this.preventClicking();
         }
-        if (this.handleDirective()) {
-            this.renderer.removeStyle(this.element(), 'cursor');
+        const droppedIntoList = this._currentDropList();
+        if (droppedIntoList && this._parentDropList) {
+            droppedIntoList.finalizeSort(e, this, this._parentDropList);
         }
-        if (this.dragCursor() === 'grab') {
-            this.renderer.setStyle(this.element(), 'cursor', 'grab');
+        else if (this._parentDropList) {
+            this._parentDropList.cancelSort(this);
         }
-        this.isDragging.set(false);
+        else {
+            this.dropZoneDropHandler(e);
+        }
+        this._currentDropList.set(null);
+        this.isMoving.set(false);
         this.renderer.removeStyle(this.handle(), 'userSelect');
-        this.handle().releasePointerCapture(e.pointerId);
+        if (this.handle().hasPointerCapture(e.pointerId)) {
+            this.handle().releasePointerCapture(e.pointerId);
+        }
         this.removeDocumentListeners();
-        if (this.isMoving()) {
-            this.preventClicking();
-            this.isMoving.set(false);
-            this.dropZoneDropHandler(e);
+        if (this.createCloneElement()) {
+            const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
+            this.removeCloneElementWithAnimation(x || 0, y || 0, listUnderPointer);
         }
-        if (this.dragElementClone()) {
-            this.removeCloneElement();
+        else {
+            this.renderer.setStyle(this.element(), 'opacity', this.elementOpacity());
         }
     }
-    /**
-     * Prevent click events immediately following pointerup, especially on touch devices
-     * or fast drags where the underlying element might receive an unintended click.
-     * Use a capturing listener added *after* pointerup and removed asynchronously.
-     */
     preventClicking() {
         const blockClick = (event) => {
             event.preventDefault();
@@ -190,17 +567,13 @@ class AXDragDirective {
         this.setPosition(0, 0);
     }
     handlePointerMove(e) {
-        if (!isPlatformBrowser(this.platformId))
+        if (!isPlatformBrowser(this.platformId) || !this.isDragging() || this.isDelayStarted())
             return;
-        if (!this.isDragging())
-            return;
-        if (this.isDelayStarted()) {
-            this.isDragging.set(false);
-            return;
-        }
         e.preventDefault();
-        this.isMoving.set(true);
-        if (this.dragElementClone()) {
+        if (!this.isMoving()) {
+            this.isMoving.set(true);
+        }
+        if (this.createCloneElement()) {
             const newCloneX = e.clientX - this.clonePointerOffset().x;
             const newCloneY = e.clientY - this.clonePointerOffset().y;
             this.setClonePosition(newCloneX, newCloneY);
@@ -210,73 +583,105 @@ class AXDragDirective {
             const newY = e.clientY - this.dragStartOffset().y;
             this.setPosition(newX, newY);
         }
-        this.dropZoneHoverHandler(e);
+        if (this._parentDropList) {
+            this.handleDropListInteractions(e);
+        }
+        else {
+            this.dropZoneHoverHandler(e);
+        }
+    }
+    handleDropListInteractions(e) {
+        const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
+        const previousList = this._currentDropList();
+        let targetList = null;
+        if (listUnderPointer && this.canDropInList(listUnderPointer)) {
+            targetList = listUnderPointer;
+        }
+        if (targetList !== previousList) {
+            if (previousList) {
+                previousList.cancelSortPreview();
+                if (previousList !== this._parentDropList) {
+                    previousList.resetSortState();
+                }
+            }
+            if (targetList) {
+                targetList.enter(this);
+            }
+            this._currentDropList.set(targetList);
+        }
+        this._currentDropList()?.sort(e, this);
+    }
+    canDropInList(list) {
+        if (!list || list.sortingDisabled() || !this._parentDropList) {
+            return false;
+        }
+        if (list === this._parentDropList) {
+            return true;
+        }
+        const dragGroup = this._parentDropList.dropListGroup();
+        const targetGroup = list.dropListGroup();
+        return !!dragGroup && dragGroup === targetGroup;
     }
     dropZoneHoverHandler(e) {
         const dropZones = this.getDropZonesFromPoint(e.clientX, e.clientY);
-        if (!dropZones.length && this.prevDropZone() && this.prevDropZone().isHovered()) {
-            this.leavePrevDropZone(e);
-            return;
-        }
         const dropZone = dropZones[0];
-        if (!this.dropZoneValidation(dropZone, e) || dropZone.isHovered()) {
+        if (!dropZone) {
+            if (this.prevDropZone()) {
+                this.leavePrevDropZone(e);
+            }
             return;
         }
         if (this.prevDropZone() && this.prevDropZone() !== dropZone) {
             this.leavePrevDropZone(e);
         }
-        this.prevDropZone.set(dropZone);
-        dropZone.onElementHover.emit({ sender: dropZone, dropped: this, nativeEvent: e, state: 'enter' });
-        dropZone.isHovered.set(true);
+        if (this.dropZoneValidation(dropZone) && !dropZone.isHovered()) {
+            this.prevDropZone.set(dropZone);
+            dropZone.onElementHover.emit({ sender: dropZone, dropped: this, nativeEvent: e, state: 'enter' });
+            dropZone.isHovered.set(true);
+        }
     }
     dropZoneDropHandler(e) {
         const dropZones = this.getDropZonesFromPoint(e.clientX, e.clientY);
         const dropZone = dropZones[0];
-        if (!this.dropZoneValidation(dropZone, e)) {
+        if (!this.dropZoneValidation(dropZone)) {
             return;
         }
         dropZone.isHovered.set(false);
         dropZone.onElementDrop.emit({ sender: dropZone, dropped: this, nativeEvent: e });
     }
     getDropZonesFromPoint(x, y) {
-        const elementsFromPoint = this.document.elementsFromPoint(x, y);
-        return elementsFromPoint
-            .filter((el) => {
-            if (el instanceof HTMLElement) {
-                return el.dataset['dropZone'] === 'true';
-            }
-            return false;
-        })
-            .map((el) => {
-            return el['__axContext__'];
-        });
+        const elements = this.document.elementsFromPoint(x, y);
+        return elements
+            .filter((el) => el instanceof HTMLElement && el.dataset['axDropZone'] === 'true')
+            .map((el) => el['__axContext__']);
     }
-    dropZoneValidation(dropZone, e) {
-        // There is a dropzone
-        if (!dropZone) {
+    getDropListFromPoint(x, y) {
+        const dropListElement = this.document
+            .elementsFromPoint(x, y)
+            .find((el) => el instanceof HTMLElement && el.dataset['axDropList'] === 'true');
+        return dropListElement ? dropListElement['__axContext__'] : null;
+    }
+    dropZoneValidation(dropZone) {
+        if (!dropZone)
             return false;
-        }
-        // They are in the same group
         const dragGroup = this.dropZoneGroup();
         const dropGroup = dropZone.dropZoneGroup();
-        if (dragGroup !== dropGroup) {
-            return false;
-        }
-        // Draggable element is under mouse
-        const elementsFromPoint = this.document.elementsFromPoint(e.clientX, e.clientY);
-        if (!elementsFromPoint.includes(this.element()) && !this.clonedElement()) {
+        if (dropGroup && dragGroup !== dropGroup) {
             return false;
         }
         return true;
     }
     leavePrevDropZone(e) {
-        this.prevDropZone().onElementHover.emit({
-            dropped: this,
-            state: 'leave',
-            nativeEvent: e,
-            sender: this.prevDropZone(),
-        });
-        this.prevDropZone().isHovered.set(false);
+        if (this.prevDropZone()) {
+            this.prevDropZone().onElementHover.emit({
+                dropped: this,
+                state: 'leave',
+                nativeEvent: e,
+                sender: this.prevDropZone(),
+            });
+            this.prevDropZone().isHovered.set(false);
+            this.prevDropZone.set(null);
+        }
     }
     setPosition(x, y) {
         let constrainedX = x;
@@ -291,13 +696,10 @@ class AXDragDirective {
             constrainedX = clamp(x, minX, maxX);
             constrainedY = clamp(y, minY, maxY);
         }
-        const lockAxis = this.dragLockAxis();
-        if (lockAxis === 'x') {
-            constrainedY = 0;
-        }
-        if (lockAxis === 'y') {
-            constrainedX = 0;
-        }
+        if (this.dragLockAxis() === 'x')
+            constrainedY = this.currentAxis().y;
+        if (this.dragLockAxis() === 'y')
+            constrainedX = this.currentAxis().x;
         this.currentAxis.set({ x: constrainedX, y: constrainedY });
         this.renderer.setStyle(this.element(), 'translate', `${constrainedX}px ${constrainedY}px`);
         this.dragPositionChanged.emit(this.currentAxis());
@@ -306,43 +708,34 @@ class AXDragDirective {
         let constrainedX = x;
         let constrainedY = y;
         const cloneEl = this.clonedElement();
-        const boundaryRect = this.boundaryElement()?.getBoundingClientRect();
+        const boundaryRect = this.boundaryRect();
         if (boundaryRect && cloneEl) {
             const cloneWidth = cloneEl.offsetWidth;
             const cloneHeight = cloneEl.offsetHeight;
-            const minAllowedX = boundaryRect.left;
-            const maxAllowedX = boundaryRect.right - cloneWidth;
-            const minAllowedY = boundaryRect.top;
-            const maxAllowedY = boundaryRect.bottom - cloneHeight;
-            constrainedX = clamp(x, minAllowedX, maxAllowedX);
-            constrainedY = clamp(y, minAllowedY, maxAllowedY);
-        }
-        const lockAxis = this.dragLockAxis();
-        if (lockAxis === 'x') {
-            constrainedY = 0;
-        }
-        if (lockAxis === 'y') {
-            constrainedX = 0;
+            constrainedX = clamp(x, boundaryRect.left, boundaryRect.right - cloneWidth);
+            constrainedY = clamp(y, boundaryRect.top, boundaryRect.bottom - cloneHeight);
         }
+        if (this.dragLockAxis() === 'x')
+            constrainedY = this.currentCloneAxis().y;
+        if (this.dragLockAxis() === 'y')
+            constrainedX = this.currentCloneAxis().x;
         this.currentCloneAxis.set({ x: constrainedX, y: constrainedY });
-        this.renderer.setStyle(this.clonedElement(), 'translate', `${constrainedX}px ${constrainedY}px`);
+        this.renderer.setStyle(cloneEl, 'translate', `${constrainedX}px ${constrainedY}px`);
         this.dragPositionChanged.emit(this.currentCloneAxis());
     }
-    createCloneElement(originalElement) {
+    createCloneElementHandler(originalElement) {
         if (!isPlatformBrowser(this.platformId)) {
             this.clonedElement.set(null);
             return null;
         }
-        const clonedElement = originalElement.cloneNode(true);
+        let clonedElement;
+        const customTemplate = this.dragClonedTemplate();
         const applyComputedStylesRecursive = (source, target) => {
             if (!isPlatformBrowser(this.platformId))
                 return;
             const computedStyles = window.getComputedStyle(source);
             if (computedStyles.cssText && target.style.cssText !== undefined) {
-                // Check if cssText is supported and writable
-                // More efficient path if cssText is fully supported
                 let tempCssText = computedStyles.cssText;
-                // Remove problematic properties for the ROOT clone before assigning
                 if (target === clonedElement) {
                     tempCssText = tempCssText
                         .replace(/position:[^;]+;/gi, '')
@@ -353,34 +746,21 @@ class AXDragDirective {
                         .replace(/width:[^;]+;/gi, '')
                         .replace(/height:[^;]+;/gi, '')
                         .replace(/margin[^;]*:[^;]+;/gi, '')
+                        .replace(/transition[^;]*:[^;]+;/gi, '')
                         .replace(/transform:[^;]+;/gi, '')
                         .replace(/translate:[^;]+;/gi, '')
                         .replace(/z-index:[^;]+;/gi, '')
                         .replace(/opacity:[^;]+;/gi, '');
                 }
-                // For ALL elements in the clone tree, ensure pointer-events is not copied from source,
-                // as the root clone will have 'pointer-events: none' and we want that to cascade.
                 tempCssText = tempCssText.replace(/pointer-events:[^;]+;/gi, '');
-                // Prepend existing inline styles (from cloneNode) to the computed styles.
-                // This gives inline styles higher precedence if there's a conflict not covered by the removals above.
-                // However, for most cases, we want computed styles to define the look.
-                // A safer bet might be to set properties individually or fully overwrite.
-                // For simplicity now, let's assume this ordering is acceptable or refine if needed.
-                // target.style.cssText = tempCssText + target.style.cssText;
-                // SAFER: Overwrite with computed, then re-apply critical ones.
                 target.style.cssText = tempCssText;
             }
             else {
-                // Fallback for browsers where cssText is not reliable or for more granular control
                 for (let i = 0; i < computedStyles.length; i++) {
                     const propName = computedStyles[i];
-                    // Universal exclusion:
-                    // For ALL elements in the clone tree (root and children), we don't want to copy 'pointer-events'
-                    // because the root clonedElement will have 'pointer-events: none' set later, and we want that to cascade.
                     if (propName === 'pointer-events') {
                         continue;
                     }
-                    // Specific exclusions for the ROOT clone only, as these are set manually later.
                     if (target === clonedElement &&
                         (propName === 'position' ||
                             propName === 'top' ||
@@ -389,27 +769,22 @@ class AXDragDirective {
                             propName === 'bottom' ||
                             propName === 'width' ||
                             propName === 'height' ||
-                            propName.startsWith('margin') || // Catches margin, margin-top, etc.
+                            propName.startsWith('margin') ||
+                            propName.startsWith('transition') ||
                             propName === 'transform' ||
                             propName === 'translate' ||
                             propName === 'z-index' ||
                             propName === 'opacity')) {
                         continue;
                     }
-                    // cssText += `${propName}: ${computedStyles.getPropertyValue(propName)}; `; // Building cssText string
-                    // More robust: set property directly
                     try {
                         target.style.setProperty(propName, computedStyles.getPropertyValue(propName), computedStyles.getPropertyPriority(propName));
                     }
                     catch (e) {
-                        // console.warn(`Could not set style property ${propName} on cloned element`, e);
+                        console.log(e);
                     }
                 }
-                // if (!target.style.cssText && cssText) { // only apply if cssText was not directly set
-                //   target.style.cssText = cssText + target.style.cssText;
-                // }
             }
-            // Recursively apply to children
             const sourceChildren = Array.from(source.children);
             const targetChildren = Array.from(target.children);
             for (let i = 0; i < sourceChildren.length; i++) {
@@ -418,43 +793,95 @@ class AXDragDirective {
                 }
             }
         };
-        applyComputedStylesRecursive(originalElement, clonedElement);
+        if (customTemplate) {
+            const viewRef = this.viewContainerRef.createEmbeddedView(customTemplate);
+            this.clonedElementViewRef.set(viewRef);
+            if (viewRef.rootNodes.length > 0 && viewRef.rootNodes[0] instanceof HTMLElement) {
+                clonedElement = viewRef.rootNodes[0];
+                const viewIndex = this.viewContainerRef.indexOf(viewRef);
+                if (viewIndex !== -1) {
+                    this.viewContainerRef.detach(viewIndex);
+                }
+            }
+            else {
+                if (this.clonedElementViewRef()) {
+                    this.clonedElementViewRef().destroy();
+                    this.clonedElementViewRef.set(null);
+                }
+                console.warn('AXDragDirective: dragClonedTemplate did not produce a valid HTMLElement root node. Falling back to default cloning.');
+                clonedElement = originalElement.cloneNode(true);
+                applyComputedStylesRecursive(originalElement, clonedElement);
+            }
+        }
+        else {
+            clonedElement = originalElement.cloneNode(true);
+            applyComputedStylesRecursive(originalElement, clonedElement);
+        }
         if (clonedElement.id) {
             this.renderer.removeAttribute(clonedElement, 'id');
         }
-        this.renderer.setStyle(originalElement, 'opacity', '0.75');
+        this.renderer.setStyle(originalElement, 'opacity', '0.5');
         const originalRect = originalElement.getBoundingClientRect();
         this.renderer.setStyle(clonedElement, 'position', 'fixed', RendererStyleFlags2.Important);
         this.renderer.setStyle(clonedElement, 'left', '0px');
         this.renderer.setStyle(clonedElement, 'top', '0px');
-        this.renderer.setStyle(clonedElement, 'width', `${originalRect.width}px`);
-        this.renderer.setStyle(clonedElement, 'height', `${originalRect.height}px`);
+        if (!customTemplate) {
+            this.renderer.setStyle(clonedElement, 'width', `${originalRect.width}px`);
+            this.renderer.setStyle(clonedElement, 'height', `${originalRect.height}px`);
+        }
         this.renderer.setStyle(clonedElement, 'margin', '0');
         this.renderer.setStyle(clonedElement, 'box-sizing', 'border-box');
         this.renderer.setStyle(clonedElement, 'opacity', '0.75');
         this.renderer.setStyle(clonedElement, 'z-index', '10000');
-        // This is the crucial part for the ROOT clone.
-        // Because we prevented 'pointer-events' from being copied in applyComputedStylesRecursive,
-        // this style will effectively apply to the entire clone tree.
         this.renderer.setStyle(clonedElement, 'pointer-events', 'none', RendererStyleFlags2.Important);
         this.renderer.setStyle(clonedElement, 'user-select', 'none');
         this.renderer.setStyle(clonedElement, 'touch-action', 'none');
         this.renderer.setStyle(clonedElement, 'translate', `${originalRect.left}px ${originalRect.top}px`);
+        this.renderer.removeStyle(clonedElement, 'transition');
+        this.renderer.removeStyle(clonedElement, 'transition-property');
         this.renderer.appendChild(this.document.body, clonedElement);
         this.clonedElement.set(clonedElement);
-        this.currentCloneAxis.set({ x: originalRect.left, y: originalRect.top });
+        this.setClonePosition(originalRect.left, originalRect.top);
         return clonedElement;
     }
+    removeCloneElementWithAnimation(x, y, dropList) {
+        dropList?._draggableItems().forEach((item) => {
+            this.removeElementTransition(item.element());
+        });
+        const clone = this.clonedElement();
+        if (!clone)
+            return;
+        this.renderer.setStyle(this.element(), 'opacity', this.elementOpacity());
+        const elementRect = this.element().getBoundingClientRect();
+        if (elementRect) {
+            this.setElementTransition(clone);
+            this.renderer.setStyle(clone, 'opacity', '0');
+            this.setClonePosition(elementRect.left + x, elementRect.top + y);
+        }
+        if (!this.dragTransition()) {
+            this.removeCloneElement();
+        }
+        else {
+            setTimeout(() => {
+                this.removeCloneElement();
+                dropList?._draggableItems().forEach((item) => {
+                    this.setElementTransition(item.element());
+                });
+            }, this.transitionDuration());
+        }
+    }
     removeCloneElement() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        this.renderer.setStyle(this.element(), 'opacity', this.elementOpacity());
         const clone = this.clonedElement();
-        if (clone && clone.parentNode === this.document.body) {
-            this.renderer.removeChild(this.document.body, clone);
+        if (clone?.parentNode) {
+            this.renderer.removeChild(clone.parentNode, clone);
         }
         this.clonedElement.set(null);
-        this.currentCloneAxis.set({ x: 0, y: 0 });
+        if (this.clonedElementViewRef()) {
+            this.clonedElementViewRef().destroy();
+            this.clonedElementViewRef.set(null);
+        }
         this.cdr.markForCheck();
     }
     addDocumentListeners() {
@@ -475,10 +902,10 @@ class AXDragDirective {
             this.document.removeEventListener('pointercancel', this.boundHandlePointerUp);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.3", 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 }, 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 }, dragCursor: { classPropertyName: "dragCursor", publicName: "dragCursor", isSignal: true, isRequired: false, transformFunction: null }, dragBoundary: { classPropertyName: "dragBoundary", publicName: "dragBoundary", 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.0.4", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.4", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDrag]',
@@ -495,12 +922,12 @@ class AXDropZoneDirective extends NXComponent {
         this.onElementHover = output();
     }
     ngOnInit() {
-        this.element().dataset['dropZone'] = 'true';
+        this.element().dataset['axDropZone'] = 'true';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDropZoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", 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.0.4", ngImport: i0, type: AXDropZoneDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", 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.0.3", ngImport: i0, type: AXDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDropZone]',
@@ -510,11 +937,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
 
 const COMPONENT = [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective];
 class AXDragDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragDropModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragDropModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AXDragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENT],
@@ -523,9 +950,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }] });
 
+/**
+ * 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.
+ */
+function moveItemInArray(array, fromIndex, toIndex) {
+    const from = clamp(fromIndex, array.length - 1);
+    const to = clamp(toIndex, array.length - 1);
+    if (from === to) {
+        return;
+    }
+    const target = array[from];
+    const delta = to < from ? -1 : 1;
+    for (let i = from; i !== to; i += delta) {
+        array[i] = array[i + delta];
+    }
+    array[to] = target;
+}
+/**
+ * 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.
+ */
+function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
+    const from = clamp(currentIndex, currentArray.length - 1);
+    const to = clamp(targetIndex, targetArray.length);
+    if (currentArray.length) {
+        targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropZoneDirective };
+export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective, moveItemInArray, transferArrayItem };
 //# sourceMappingURL=acorex-cdk-drag-drop.mjs.map