@acorex/cdk 19.13.4 → 19.13.5

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, Directive, NgZone, contentChild, input, output, computed, effect, NgModule } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { inject, ElementRef, signal, Directive, NgZone, Renderer2, PLATFORM_ID, contentChild, input, output, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { clamp } from 'lodash-es';
 
 class AXDragHandleDirective {
@@ -8,10 +8,10 @@ class AXDragHandleDirective {
         this.el = inject(ElementRef);
         this.element = signal(this.el.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: AXDragHandleDirective, isStandalone: true, selector: "[axDragHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDragHandle]',
@@ -22,20 +22,30 @@ class AXDragDirective {
     constructor() {
         this.zone = inject(NgZone);
         this.document = inject(DOCUMENT);
+        this.renderer = inject(Renderer2);
+        this.platformId = inject(PLATFORM_ID);
         this.el = inject(ElementRef);
         this.handleDirective = contentChild(AXDragHandleDirective);
+        this.dragData = input();
         this.dragDisabled = input(false);
+        this.dragElementClone = input(false);
         this.dropZoneGroup = input();
         this.dragStartDelay = input();
         this.dragResetOnDblClick = input(true);
         this.dragLockAxis = input(null);
+        this.dragCursor = input('move');
         this.dragBoundary = input();
         this.dragPositionChanged = output();
-        this.isDragging = signal(false);
         this.currentAxis = signal({ x: 0, y: 0 });
+        this.currentCloneAxis = signal({ x: 0, y: 0 });
+        this.clonedElement = signal(null);
+        this.element = signal(this.el.nativeElement);
+        this.elementOpacity = signal('1');
+        this.isMoving = signal(false);
+        this.isDragging = signal(false);
         this.isDelayStarted = signal(false);
         this.dragStartOffset = signal({ x: 0, y: 0 });
-        this.element = signal(this.el.nativeElement);
+        this.clonePointerOffset = signal({ x: 0, y: 0 });
         this.prevDropZone = signal(null);
         this.boundaryElement = computed(() => {
             const boundary = this.dragBoundary();
@@ -47,40 +57,75 @@ class AXDragDirective {
             }
             return boundary instanceof ElementRef ? boundary.nativeElement : boundary;
         });
-        this.elementRect = computed(() => this.element().getBoundingClientRect());
+        this.elementRect = computed(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return null; // Or some default/mock DOMRect-like object if needed for type safety
+            }
+            return this.element().getBoundingClientRect();
+        });
+        this.boundaryRect = computed(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return null;
+            }
+            return this.boundaryElement()?.getBoundingClientRect();
+        });
         this.handle = computed(() => this.handleDirective()?.element() ?? this.element());
-        this.boundaryRect = computed(() => this.boundaryElement()?.getBoundingClientRect());
         this.boundHandleDblClick = this.handleDblClick.bind(this);
         this.boundHandlePointerUp = this.handlePointerUp.bind(this);
         this.boundHandlePointerDown = this.handlePointerDown.bind(this);
         this.boundHandlePointerMove = this.handlePointerMove.bind(this);
-        effect(() => {
-            const isDisabled = this.dragDisabled();
-            const cursor = isDisabled ? 'not-allowed' : 'move';
-            this.handle().style.cursor = cursor;
+        this.#dragDisabledEffect = effect(() => {
+            if (this.dragCursor() === 'none') {
+                return;
+            }
+            if (!this.dragDisabled()) {
+                this.renderer.setStyle(this.handle(), 'cursor', this.dragCursor());
+            }
+            else {
+                this.renderer.removeStyle(this.handle(), 'cursor');
+            }
         });
     }
+    #dragDisabledEffect;
     ngOnInit() {
-        this.zone.runOutsideAngular(() => {
-            this.handle().addEventListener('dblclick', this.boundHandleDblClick);
-            this.handle().addEventListener('pointerdown', this.boundHandlePointerDown);
-        });
+        if (isPlatformBrowser(this.platformId)) {
+            this.zone.runOutsideAngular(() => {
+                this.handle().addEventListener('dblclick', this.boundHandleDblClick);
+                this.handle().addEventListener('pointerdown', this.boundHandlePointerDown);
+            });
+            this.renderer.setStyle(this.element(), 'z-index', '1');
+            this.elementOpacity.set(getComputedStyle(this.element()).opacity);
+        }
     }
     ngOnDestroy() {
-        this.handle().removeEventListener('dblclick', this.boundHandleDblClick);
-        this.handle().removeEventListener('pointerdown', this.boundHandlePointerDown);
-        this.removeDocumentListeners();
+        if (isPlatformBrowser(this.platformId)) {
+            this.handle().removeEventListener('dblclick', this.boundHandleDblClick);
+            this.handle().removeEventListener('pointerdown', this.boundHandlePointerDown);
+            this.removeDocumentListeners();
+            if (this.dragElementClone()) {
+                this.removeCloneElement();
+            }
+        }
     }
     handlePointerDown(e) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
         if (this.dragDisabled() || e.button !== 0)
             return;
-        this.element().style.cursor = 'move';
+        switch (this.dragCursor()) {
+            case 'move':
+                this.renderer.setStyle(this.element(), 'cursor', 'move');
+                break;
+            case 'grab':
+                this.renderer.setStyle(this.element(), 'cursor', 'grabbing');
+                break;
+        }
         e.preventDefault();
         e.stopPropagation();
         this.isDragging.set(true);
         this.dragStartOffset.set({ x: e.clientX - this.currentAxis().x, y: e.clientY - this.currentAxis().y });
-        this.element().style.userSelect = 'none';
-        this.element().style.touchAction = 'none';
+        this.renderer.setStyle(this.element(), 'userSelect', 'none');
+        this.renderer.setStyle(this.element(), 'touchAction', 'none');
         this.element().setPointerCapture(e.pointerId);
         this.addDocumentListeners();
         if (this.dragStartDelay()) {
@@ -90,19 +135,40 @@ class AXDragDirective {
             }, this.dragStartDelay());
         }
         this.dropZoneHoverHandler(e);
+        if (this.dragElementClone()) {
+            const elementRect = this.element().getBoundingClientRect();
+            this.clonePointerOffset.set({
+                x: e.clientX - elementRect.left,
+                y: e.clientY - elementRect.top,
+            });
+            this.createCloneElement(this.element());
+        }
     }
     handlePointerUp(e) {
-        if (!this.isDragging())
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (!this.isDragging()) {
             return;
-        if (this.handleDirective())
-            this.element().style.cursor = '';
+        }
+        if (this.handleDirective()) {
+            this.renderer.removeStyle(this.element(), 'cursor');
+        }
+        if (this.dragCursor() === 'grab') {
+            this.renderer.setStyle(this.element(), 'cursor', 'grab');
+        }
         this.isDragging.set(false);
-        this.element().style.userSelect = '';
-        this.element().style.touchAction = '';
+        this.renderer.removeStyle(this.element(), 'userSelect');
+        this.renderer.removeStyle(this.element(), 'touchAction');
         this.element().releasePointerCapture(e.pointerId);
         this.removeDocumentListeners();
-        this.preventClicking();
-        this.dropZoneDropHandler(e);
+        if (this.isMoving()) {
+            this.preventClicking();
+            this.isMoving.set(false);
+            this.dropZoneDropHandler(e);
+        }
+        if (this.dragElementClone()) {
+            this.removeCloneElement();
+        }
     }
     /**
      * Prevent click events immediately following pointerup, especially on touch devices
@@ -122,6 +188,8 @@ class AXDragDirective {
         this.setPosition(0, 0);
     }
     handlePointerMove(e) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
         if (!this.isDragging())
             return;
         if (this.isDelayStarted()) {
@@ -129,9 +197,17 @@ class AXDragDirective {
             return;
         }
         e.preventDefault();
-        const newX = e.clientX - this.dragStartOffset().x;
-        const newY = e.clientY - this.dragStartOffset().y;
-        this.setPosition(newX, newY);
+        this.isMoving.set(true);
+        if (this.dragElementClone()) {
+            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);
+        }
         this.dropZoneHoverHandler(e);
     }
     dropZoneHoverHandler(e) {
@@ -140,27 +216,25 @@ class AXDragDirective {
             this.leavePrevDropZone(e);
             return;
         }
-        dropZones.forEach((dropZone) => {
-            if (!this.dropZoneValidation(dropZone, e) || dropZone.isHovered()) {
-                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);
-        });
+        const dropZone = dropZones[0];
+        if (!this.dropZoneValidation(dropZone, e) || dropZone.isHovered()) {
+            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);
     }
     dropZoneDropHandler(e) {
         const dropZones = this.getDropZonesFromPoint(e.clientX, e.clientY);
-        dropZones.forEach((dropZone) => {
-            if (!this.dropZoneValidation(dropZone, e)) {
-                return;
-            }
-            dropZone.isHovered.set(false);
-            dropZone.onElementDrop.emit({ sender: dropZone, dropped: this, nativeEvent: e });
-        });
+        const dropZone = dropZones[0];
+        if (!this.dropZoneValidation(dropZone, e)) {
+            return;
+        }
+        dropZone.isHovered.set(false);
+        dropZone.onElementDrop.emit({ sender: dropZone, dropped: this, nativeEvent: e });
     }
     getDropZonesFromPoint(x, y) {
         const elementsFromPoint = this.document.elementsFromPoint(x, y);
@@ -176,6 +250,10 @@ class AXDragDirective {
         });
     }
     dropZoneValidation(dropZone, e) {
+        // There is a dropzone
+        if (!dropZone) {
+            return false;
+        }
         // They are in the same group
         const dragGroup = this.dropZoneGroup();
         const dropGroup = dropZone.dropZoneGroup();
@@ -184,7 +262,7 @@ class AXDragDirective {
         }
         // Draggable element is under mouse
         const elementsFromPoint = this.document.elementsFromPoint(e.clientX, e.clientY);
-        if (!elementsFromPoint.includes(this.element())) {
+        if (!elementsFromPoint.includes(this.element()) && !this.clonedElement()) {
             return false;
         }
         return true;
@@ -201,8 +279,8 @@ class AXDragDirective {
     setPosition(x, y) {
         let constrainedX = x;
         let constrainedY = y;
-        const boundaryRect = this.boundaryRect();
         const elementRect = this.elementRect();
+        const boundaryRect = this.boundaryRect();
         if (boundaryRect && elementRect) {
             const minX = boundaryRect.left - elementRect.left;
             const minY = boundaryRect.top - elementRect.top;
@@ -219,10 +297,166 @@ class AXDragDirective {
             constrainedX = 0;
         }
         this.currentAxis.set({ x: constrainedX, y: constrainedY });
-        this.element().style.translate = `${constrainedX}px ${constrainedY}px`;
+        this.renderer.setStyle(this.element(), 'translate', `${constrainedX}px ${constrainedY}px`);
         this.dragPositionChanged.emit(this.currentAxis());
     }
+    setClonePosition(x, y) {
+        let constrainedX = x;
+        let constrainedY = y;
+        const cloneEl = this.clonedElement();
+        const boundaryRect = this.boundaryElement()?.getBoundingClientRect();
+        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;
+        }
+        this.currentCloneAxis.set({ x: constrainedX, y: constrainedY });
+        this.renderer.setStyle(this.clonedElement(), 'translate', `${constrainedX}px ${constrainedY}px`);
+        this.dragPositionChanged.emit(this.currentCloneAxis());
+    }
+    createCloneElement(originalElement) {
+        if (!isPlatformBrowser(this.platformId)) {
+            this.clonedElement.set(null);
+            return null;
+        }
+        const clonedElement = originalElement.cloneNode(true);
+        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, '')
+                        .replace(/top:[^;]+;/gi, '')
+                        .replace(/left:[^;]+;/gi, '')
+                        .replace(/right:[^;]+;/gi, '')
+                        .replace(/bottom:[^;]+;/gi, '')
+                        .replace(/width:[^;]+;/gi, '')
+                        .replace(/height:[^;]+;/gi, '')
+                        .replace(/margin[^;]*:[^;]+;/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' ||
+                            propName === 'left' ||
+                            propName === 'right' ||
+                            propName === 'bottom' ||
+                            propName === 'width' ||
+                            propName === 'height' ||
+                            propName.startsWith('margin') || // Catches margin, margin-top, etc.
+                            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);
+                    }
+                }
+                // 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++) {
+                if (sourceChildren[i] instanceof HTMLElement && targetChildren[i] instanceof HTMLElement) {
+                    applyComputedStylesRecursive(sourceChildren[i], targetChildren[i]);
+                }
+            }
+        };
+        applyComputedStylesRecursive(originalElement, clonedElement);
+        if (clonedElement.id) {
+            this.renderer.removeAttribute(clonedElement, 'id');
+        }
+        this.renderer.setStyle(originalElement, 'opacity', '0.75');
+        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`);
+        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.appendChild(this.document.body, clonedElement);
+        this.clonedElement.set(clonedElement);
+        this.currentCloneAxis.set({ x: originalRect.left, y: originalRect.top });
+        return clonedElement;
+    }
+    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);
+        }
+        this.clonedElement.set(null);
+        this.currentCloneAxis.set({ x: 0, y: 0 });
+    }
     addDocumentListeners() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
         this.zone.runOutsideAngular(() => {
             this.document.addEventListener('pointermove', this.boundHandlePointerMove, { passive: false });
             this.document.addEventListener('pointerup', this.boundHandlePointerUp);
@@ -230,21 +464,23 @@ class AXDragDirective {
         });
     }
     removeDocumentListeners() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
         this.zone.runOutsideAngular(() => {
             this.document.removeEventListener('pointermove', this.boundHandlePointerMove);
             this.document.removeEventListener('pointerup', this.boundHandlePointerUp);
             this.document.removeEventListener('pointercancel', this.boundHandlePointerUp);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.9", type: AXDragDirective, isStandalone: true, selector: "[axDrag]", inputs: { dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", 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 }, 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: "19.2.10", ngImport: i0, type: AXDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.10", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDrag]',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class AXDropZoneDirective {
     constructor() {
@@ -259,10 +495,10 @@ class AXDropZoneDirective {
         this.element()['__axContext__'] = this;
         this.element().dataset['dropZone'] = 'true';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.9", type: AXDropZoneDirective, isStandalone: true, selector: "[axDropZone]", inputs: { dropZoneGroup: { classPropertyName: "dropZoneGroup", publicName: "dropZoneGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onElementDrop: "onElementDrop", onElementHover: "onElementHover" }, exportAs: ["axDropZone"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDropZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", 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"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDropZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDropZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDropZone]',
@@ -272,11 +508,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 
 const COMPONENT = [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective];
 class AXDragDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragDropModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AXDragDropModule, imports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective], exports: [AXDragDirective, AXDragHandleDirective, AXDropZoneDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragDropModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXDragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...COMPONENT],