@acorex/cdk 22.1.7 → 22.2.0

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

@@ -3,6 +3,7 @@ import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetecto
 import { isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 import { NXComponent } from '@acorex/cdk/common';
+import { AXHtmlUtil } from '@acorex/core/utils';
 
 class AXDragHandleDirective {
     constructor() {
@@ -52,6 +53,8 @@ class AXDropListDirective extends NXComponent {
         ...(ngDevMode ? [{ debugName: "dropListOrientation" }] : /* istanbul ignore next */ []));
         /** Emits when an item is dropped into the list. */
         this.dropListDropped = output();
+        /** Emits when the sort preview transforms change during an active drag. */
+        this.sortPreviewChanged = output();
         /** The `axDrag` directives that are direct children of this list. */
         this._draggableItems = contentChildren(AXDragDirective, { ...(ngDevMode ? { debugName: "_draggableItems" } : /* istanbul ignore next */ {}), descendants: false });
         // --- Internal State Management ---
@@ -72,6 +75,9 @@ class AXDropListDirective extends NXComponent {
         /** The detected `gap` of the list for the current orientation. */
         this._listGap = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_listGap" }] : /* istanbul ignore next */ []));
+        /** Whether the list is in RTL direction (cached at drag start). */
+        this._isRtl = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isRtl" }] : /* istanbul ignore next */ []));
         /** Internal orientation state; can be overridden programmatically by host components. */
         this.orientation = linkedSignal(() => this.dropListOrientation(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
@@ -101,6 +107,10 @@ class AXDropListDirective extends NXComponent {
     isDragActiveForThisList(dragItem) {
         return this._activeDragItem() === dragItem;
     }
+    /** Whether the list is horizontal and in RTL direction. */
+    isHorizontalRtl() {
+        return this.orientation() === 'horizontal' && this._isRtl();
+    }
     /**
      * Prepares the list for sorting when a drag operation starts from within this list.
      * @param dragItem The item that is being dragged.
@@ -201,6 +211,7 @@ class AXDropListDirective extends NXComponent {
     /** Caches the geometry of the list and its items at the start of a drag. */
     _cacheGeometry() {
         this._listInitialRect.set(this.element.getBoundingClientRect());
+        this._isRtl.set(AXHtmlUtil.isRtl(this.element));
         this._detectAndCacheListGap();
         const items = [...this._draggableItems()]
             .sort((a, b) => a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
@@ -261,7 +272,10 @@ class AXDropListDirective extends NXComponent {
             const itemMidPoint = (this.orientation() === 'vertical' ? sibling.initialRect.top : sibling.initialRect.left) +
                 scrollDelta +
                 (this.orientation() === 'vertical' ? sibling.height : sibling.width) / 2;
-            if (pointerPosition < itemMidPoint) {
+            const isBeforeSibling = this.isHorizontalRtl()
+                ? pointerPosition > itemMidPoint
+                : pointerPosition < itemMidPoint;
+            if (isBeforeSibling) {
                 newIndexInSiblings = i;
                 break;
             }
@@ -311,15 +325,20 @@ class AXDropListDirective extends NXComponent {
                 ? itemData.height + itemData.margins.top + itemData.margins.bottom
                 : itemData.width + itemData.margins.left + itemData.margins.right;
             const draggedItemSize = isIntraListDrag ? getItemSpace(this._cachedItems()[originalIndex]) : 0;
+            const axisSign = this.isHorizontalRtl() ? -1 : 1;
             this._cachedItems().forEach((data, index) => {
                 if (data.item.isDragDisabled()) {
                     this._renderer.removeStyle(data.element, 'transform');
                     return;
                 }
                 const transform = this._calculateTransform(index, originalIndex, draggedItemSize, getItemSpace);
-                this._renderer.setStyle(data.element, 'transform', transform ? `${this.orientation() === 'vertical' ? 'translateY' : 'translateX'}(${transform}px)` : '');
+                const signedTransform = transform * axisSign;
+                this._renderer.setStyle(data.element, 'transform', transform
+                    ? `${this.orientation() === 'vertical' ? 'translateY' : 'translateX'}(${signedTransform}px)`
+                    : '');
             });
         }
+        this.sortPreviewChanged.emit();
     }
     /** Creates or moves the placeholder element for inter-list drags */
     _updatePlaceholderElement(activeItem, targetIndex) {
@@ -429,6 +448,7 @@ class AXDropListDirective extends NXComponent {
     _resetAllTransforms() {
         this._cachedItems().forEach((data) => this._renderer.setStyle(data.element, 'transform', ''));
         this._removePlaceholderElement(); // Clean up inter-list placeholder
+        this.sortPreviewChanged.emit();
     }
     /** Resets the internal state of the directive to its initial values. */
     resetSortState() {
@@ -440,7 +460,7 @@ class AXDropListDirective extends NXComponent {
         this._listGap.set(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDropListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", 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", sortPreviewChanged: "sortPreviewChanged" }, queries: [{ propertyName: "_draggableItems", predicate: AXDragDirective, isSignal: true }], exportAs: ["axDropList"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDropListDirective, decorators: [{
             type: Directive,
@@ -448,7 +468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: '[axDropList]',
                     exportAs: 'axDropList',
                 }]
-        }], 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 }] }] } });
+        }], 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"] }], sortPreviewChanged: [{ type: i0.Output, args: ["sortPreviewChanged"] }], _draggableItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXDragDirective), { ...{ descendants: false }, isSignal: true }] }] } });
 
 // Zone detection constants for nested drop lists (tree nodes)
 const ZONE_TOP_THRESHOLD = 0.3; // Top 30% triggers reorder BEFORE
@@ -623,7 +643,6 @@ class AXDragDirective {
             if (this._parentDropList) {
                 this.setElementTransition(this.element());
             }
-            this.renderer.setStyle(this.element(), 'z-index', '1');
             this.elementOpacity.set(getComputedStyle(this.element()).opacity);
         }
     }
@@ -643,6 +662,7 @@ class AXDragDirective {
             }
             this.clearActiveDragCursor();
             this.clearHoldDelayTimer();
+            this.renderer.removeStyle(this.element(), 'z-index');
         }
     }
     resolveDropCursor(canDrop) {
@@ -793,6 +813,7 @@ class AXDragDirective {
             this.renderer.setStyle(this.handle(), 'cursor', 'grabbing');
             this.setActiveDragCursor('grabbing');
         }
+        this.renderer.setStyle(this.element(), 'z-index', '1');
         // Add CDK-style classes
         this.renderer.addClass(this.element(), 'ax-dragging');
         this.renderer.addClass(this.element(), 'ax-drag-placeholder');
@@ -838,6 +859,7 @@ class AXDragDirective {
             this.renderer.removeStyle(this.handle(), 'userSelect');
             return;
         }
+        this.renderer.removeStyle(this.element(), 'z-index');
         this.preventClicking();
         const transform = this.element().style.transform;
         let x = 0;