@acorex/cdk 22.3.6 → 22.3.8

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

@@ -1,15 +1,24 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, linkedSignal, DOCUMENT, ViewContainerRef, contentChild, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, DestroyRef, Directive, NgZone, Renderer2, ChangeDetectorRef, PLATFORM_ID, input, output, contentChildren, linkedSignal, DOCUMENT, ViewContainerRef, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 import { NXComponent } from '@acorex/cdk/common';
 import { AXHtmlUtil } from '@acorex/core/utils';
 
+/**
+ * Parent drag instance that nested `axDragHandle` directives register with.
+ * Provided by `AXDragDirective` so handles work inside dynamically created content.
+ */
+const AX_DRAG_PARENT = new InjectionToken('AX_DRAG_PARENT');
+
 class AXDragHandleDirective {
     constructor() {
-        this.el = inject(ElementRef);
+        this.el = inject((ElementRef));
+        this.parent = inject(AX_DRAG_PARENT, { optional: true });
         this.element = signal(this.el.nativeElement, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+        this.parent?.registerHandle(this);
+        inject(DestroyRef).onDestroy(() => this.parent?.unregisterHandle(this));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
@@ -19,7 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{
                     selector: '[axDragHandle]',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * @Directive axDropList
@@ -483,8 +492,8 @@ class AXDragDirective {
         this.platformId = inject(PLATFORM_ID);
         this.viewContainerRef = inject(ViewContainerRef);
         this.el = inject(ElementRef);
-        this.handleDirective = contentChild(AXDragHandleDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "handleDirective" }] : /* istanbul ignore next */ []));
+        this.registeredHandleElements = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "registeredHandleElements" }] : /* istanbul ignore next */ []));
         this.axDrag = input(true, { ...(ngDevMode ? { debugName: "axDrag" } : /* istanbul ignore next */ {}), transform: (value) => value === '' || value === true });
         this.dragData = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "dragData" }] : /* istanbul ignore next */ []));
@@ -591,59 +600,97 @@ class AXDragDirective {
             return this.boundaryElement()?.getBoundingClientRect();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "boundaryRect" }] : /* istanbul ignore next */ []));
-        this.handle = computed(() => this.handleDirective()?.element() ?? this.element(), /* @ts-ignore */
+        this.handleElements = computed(() => {
+            const registered = this.registeredHandleElements().filter(Boolean);
+            return registered.length ? registered : [this.element()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handleElements" }] : /* istanbul ignore next */ []));
+        this.handle = computed(() => this.activeHandleElement() ?? this.handleElements()[0] ?? this.element(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handle" }] : /* istanbul ignore next */ []));
         this.boundHandleDblClick = this.handleDblClick.bind(this);
         this.boundHandlePointerUp = this.handlePointerUp.bind(this);
         this.boundHandlePointerDown = this.handlePointerDown.bind(this);
         this.boundHandlePointerMove = this.handlePointerMove.bind(this);
-        this.listenersAttached = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listenersAttached" }] : /* istanbul ignore next */ []));
+        this.attachedHandleElements = [];
+        this.styledHandleElements = [];
+        this.activeHandleElement = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeHandleElement" }] : /* istanbul ignore next */ []));
         this.#dragDisabledEffect = effect(() => {
             const cursor = this.dragCursorOverride();
             const disabled = this.isDragDisabled();
-            const handle = this.handle();
-            if (disabled || cursor === 'none' || cursor === 'grab-on-drag') {
-                if (!this.isMoving() && !this.holdDelayReady()) {
-                    this.renderer.removeStyle(handle, 'cursor');
+            const handles = this.handleElements();
+            const moving = this.isMoving();
+            const holdReady = this.holdDelayReady();
+            for (const previous of this.styledHandleElements) {
+                if (!handles.includes(previous)) {
+                    this.renderer.removeStyle(previous, 'cursor');
+                    this.renderer.removeStyle(previous, 'touch-action');
                 }
-                if (disabled) {
-                    this.renderer.removeStyle(handle, 'touch-action');
+            }
+            this.styledHandleElements = handles;
+            for (const handle of handles) {
+                if (disabled || cursor === 'none' || cursor === 'grab-on-drag') {
+                    if (!moving && !holdReady) {
+                        this.renderer.removeStyle(handle, 'cursor');
+                    }
+                    if (disabled) {
+                        this.renderer.removeStyle(handle, 'touch-action');
+                    }
+                    else {
+                        this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
+                    }
+                    continue;
                 }
-                else {
-                    this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
+                if (!moving && !holdReady) {
+                    this.renderer.setStyle(handle, 'cursor', cursor);
                 }
-                return;
-            }
-            if (!this.isMoving() && !this.holdDelayReady()) {
-                this.renderer.setStyle(handle, 'cursor', cursor);
+                this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
             }
-            this.renderer.setStyle(handle, 'touch-action', this.dragTouchAction());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#dragDisabledEffect" }] : /* istanbul ignore next */ []));
         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);
+            const currentHandles = this.handleElements();
+            const previousHandles = this.attachedHandleElements;
+            for (const previous of previousHandles) {
+                if (!currentHandles.includes(previous)) {
+                    previous.removeEventListener('dblclick', this.boundHandleDblClick);
+                    previous.removeEventListener('pointerdown', this.boundHandlePointerDown);
+                }
             }
+            this.zone.runOutsideAngular(() => {
+                for (const current of currentHandles) {
+                    if (!previousHandles.includes(current)) {
+                        current.addEventListener('dblclick', this.boundHandleDblClick);
+                        current.addEventListener('pointerdown', this.boundHandlePointerDown, { passive: false });
+                    }
+                }
+            });
+            this.attachedHandleElements = currentHandles;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#handleChangeEffect" }] : /* istanbul ignore next */ []));
     }
     #dragDisabledEffect;
     #handleChangeEffect;
+    registerHandle(handle) {
+        const element = this.resolveHandleElement(handle);
+        if (!element)
+            return;
+        this.registeredHandleElements.update((handles) => (handles.includes(element) ? handles : [...handles, element]));
+    }
+    unregisterHandle(handle) {
+        const element = this.resolveHandleElement(handle);
+        if (!element)
+            return;
+        this.registeredHandleElements.update((handles) => handles.filter((item) => item !== element));
+        if (this.activeHandleElement() === element) {
+            this.activeHandleElement.set(null);
+        }
+    }
+    resolveHandleElement(handle) {
+        return handle instanceof HTMLElement ? handle : handle.element();
+    }
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
             if (this._parentDropList) {
@@ -654,11 +701,11 @@ class AXDragDirective {
     }
     ngOnDestroy() {
         if (isPlatformBrowser(this.platformId)) {
-            const handle = this.listenersAttached();
-            if (handle) {
+            for (const handle of this.attachedHandleElements) {
                 handle.removeEventListener('dblclick', this.boundHandleDblClick);
                 handle.removeEventListener('pointerdown', this.boundHandlePointerDown);
             }
+            this.attachedHandleElements = [];
             this.removeDocumentListeners();
             if (this.createCloneElement()) {
                 this.removeCloneElement();
@@ -736,14 +783,16 @@ class AXDragDirective {
             return;
         if (!this.axDrag() || this.isDragDisabled() || e.button !== 0 || this._parentDropList?.isSortingDisabled())
             return;
+        const handle = e.currentTarget instanceof HTMLElement ? e.currentTarget : this.handle();
+        this.activeHandleElement.set(handle);
         this.isDragging.set(true);
         this.movedAfterDelay.set(false);
         if (this.dragCursorOverride() === 'move') {
-            this.renderer.setStyle(this.handle(), 'cursor', 'move');
+            this.renderer.setStyle(handle, 'cursor', 'move');
         }
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
         this.pointerDownPosition.set({ x: e.clientX, y: e.clientY });
-        this.renderer.setStyle(this.handle(), 'userSelect', 'none');
+        this.renderer.setStyle(handle, 'userSelect', 'none');
         this.activePointerId.set(e.pointerId);
         this.addDocumentListeners();
         this.dragStartTime.set(Date.now());
@@ -817,6 +866,7 @@ class AXDragDirective {
         this.renderer.removeStyle(this.handle(), 'userSelect');
         this.resetHandleCursorAfterDrag();
         this.clearActiveDragCursor();
+        this.activeHandleElement.set(null);
     }
     resetHandleCursorAfterDrag() {
         const cursorMode = this.dragCursorOverride();
@@ -874,6 +924,7 @@ class AXDragDirective {
             this.removeDocumentListeners();
             this._currentDropList.set(null);
             this.renderer.removeStyle(this.handle(), 'userSelect');
+            this.activeHandleElement.set(null);
             return;
         }
         this.renderer.removeStyle(this.element(), 'z-index');
@@ -905,6 +956,7 @@ class AXDragDirective {
         this.removeDocumentListeners();
         this._currentDropList.set(null);
         this.renderer.removeStyle(this.handle(), 'userSelect');
+        this.activeHandleElement.set(null);
         if (this.createCloneElement()) {
             const listUnderPointer = this.getDropListFromPoint(e.clientX, e.clientY);
             this.removeCloneElementWithAnimation(x || 0, y || 0, listUnderPointer);
@@ -1357,14 +1409,15 @@ class AXDragDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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" }, providers: [{ provide: AX_DRAG_PARENT, useExisting: AXDragDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDrag]',
+                    providers: [{ provide: AX_DRAG_PARENT, useExisting: AXDragDirective }],
                 }]
-        }], 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"] }] } });
+        }], propDecorators: { 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() {
@@ -1445,5 +1498,5 @@ function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex)
  * Generated bundle index. Do not edit.
  */
 
-export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective, moveItemInArray, transferArrayItem };
+export { AXDragDirective, AXDragDropModule, AXDragHandleDirective, AXDropListDirective, AXDropZoneDirective, AX_DRAG_PARENT, moveItemInArray, transferArrayItem };
 //# sourceMappingURL=acorex-cdk-drag-drop.mjs.map