@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

package/DragDrop/Core/DragRef.js

@@ -5,6 +5,7 @@
 import { animatePosition, animateToOriginalPosition, cancelAnimations } from '../Utilities/AnimationUtils';
 import { addPoints, applyTransform, clearTransform, constrainPointToBoundary, constrainToAxis, getDelta, getDistance, getPointerPosition, getRectTopLeft, subtractPoints } from '../Utilities/PositionUtils';
 import { getDragDropRegistry } from './DragDropRegistry';
+import { DragStyleContainer } from './DragStyleContainer';
 // #endregion
 // #region DragRef
 /**
@@ -29,6 +30,7 @@ export class DragRef {
     _pointerDownListener;
     _nextDropListRef;
     _parentDragRef;
+    _styleContainer;
     // #endregion
     // #region Ctor
     /**
@@ -38,11 +40,6 @@ export class DragRef {
      * @public
      */
     constructor(element, config = {}) {
-        console.log('%c[DragRef] Constructor', 'color: #4CAF50; font-weight: bold', {
-            element: element.tagName,
-            className: element.className,
-            config
-        });
         this._element = element;
         this._rootElement = config.rootElement ?? element;
         this._config = this.applyConfigDefaults(config);
@@ -54,6 +51,7 @@ export class DragRef {
         this._pointerDownListener = null;
         this._nextDropListRef = null;
         this._parentDragRef = null;
+        this._styleContainer = null;
         this._state = {
             isDragging: false,
             pointerPosition: {
@@ -87,7 +85,8 @@ export class DragRef {
             previewContainer: null,
             activeDropList: null,
             pointerId: null,
-            isKeyboardDrag: false
+            isKeyboardDrag: false,
+            savedStyles: null
         };
         this._registry.registerDragItem(this);
         this.attachPointerListeners();
@@ -95,11 +94,6 @@ export class DragRef {
         if (this._config.boundaryElement) {
             this.withBoundaryElement(this._config.boundaryElement);
         }
-        console.log('%c[DragRef] Registered and listeners attached', 'color: #4CAF50', {
-            dropContainer: this._dropContainer,
-            handles: this._handles.length,
-            boundaryElement: this._boundaryElement ? 'SET' : 'NULL'
-        });
     }
     // #endregion
     // #region Properties
@@ -461,22 +455,11 @@ export class DragRef {
      * @private
      */
     onPointerDown(event) {
-        console.log('%c[DragRef] onPointerDown', 'color: #2196F3; font-weight: bold', {
-            button: event.button,
-            disabled: this._config.disabled,
-            isDragging: this._state.isDragging,
-            target: event.target?.tagName,
-            pointerType: event.pointerType,
-            clientX: event.clientX,
-            clientY: event.clientY
-        });
         if (this._config.disabled || this._state.isDragging) {
-            console.log('%c[DragRef] onPointerDown BLOCKED', 'color: #f44336', { disabled: this._config.disabled, isDragging: this._state.isDragging });
             return;
         }
         // Only handle primary button (left click / first touch)
         if (event.button !== 0) {
-            console.log('%c[DragRef] onPointerDown BLOCKED - not primary button', 'color: #f44336');
             return;
         }
         // Check if pointer is on a disabled handle
@@ -503,7 +486,37 @@ export class DragRef {
             }
         }
         const delay = this.getStartDelay(event);
-        if (delay > 0) {
+        const distance = this.getStartDistance(event);
+        if (distance > 0) {
+            // Distance-based drag start: wait until pointer moves far enough
+            const startPosition = getPointerPosition(event);
+            const cleanup = () => {
+                document.removeEventListener('pointermove', onMove);
+                document.removeEventListener('pointerup', onUp);
+                if (this._dragStartTimer) {
+                    clearTimeout(this._dragStartTimer);
+                    this._dragStartTimer = null;
+                }
+            };
+            const onUp = () => {
+                cleanup();
+            };
+            const onMove = (moveEvent) => {
+                if (getDistance(startPosition, getPointerPosition(moveEvent)) >= distance) {
+                    cleanup();
+                    this.initializeDragSequence(moveEvent);
+                }
+            };
+            document.addEventListener('pointermove', onMove);
+            document.addEventListener('pointerup', onUp, { once: true });
+            // If both delay and distance are set, apply a timeout as upper bound
+            if (delay > 0) {
+                this._dragStartTimer = window.setTimeout(() => {
+                    cleanup();
+                }, delay);
+            }
+        }
+        else if (delay > 0) {
             this._dragStartTimer = window.setTimeout(() => {
                 this.initializeDragSequence(event);
             }, delay);
@@ -537,11 +550,21 @@ export class DragRef {
      * @private
      */
     initializeDragSequence(event) {
-        console.log('%c[DragRef] initializeDragSequence', 'color: #FF9800; font-weight: bold', {
-            pointerId: event.pointerId,
-            pointerType: event.pointerType
-        });
         const pointerPosition = getPointerPosition(event);
+        // Save original inline styles that will be overwritten during drag
+        this._state.savedStyles = {
+            position: this._rootElement.style.position,
+            top: this._rootElement.style.top,
+            left: this._rootElement.style.left,
+            visibility: this._rootElement.style.visibility,
+            transform: this._rootElement.style.transform,
+            width: this._rootElement.style.width,
+            height: this._rootElement.style.height,
+            zIndex: this._rootElement.style.zIndex,
+            margin: this._rootElement.style.margin,
+            boxSizing: this._rootElement.style.boxSizing,
+            pointerEvents: this._rootElement.style.pointerEvents
+        };
         // Store state
         this._state.pointerId = event.pointerId;
         this._state.pointerPosition = pointerPosition;
@@ -554,14 +577,11 @@ export class DragRef {
         };
         // Emit start event (cancelable)
         const startEvent = this.createDragStartEvent(event);
-        console.log('%c[DragRef] Dispatching dragStart event', 'color: #FF9800', { startEvent });
         const dispatched = this._element.dispatchEvent(startEvent);
         if (!dispatched) {
             // Event was cancelled
-            console.log('%c[DragRef] dragStart event was CANCELLED', 'color: #f44336');
             return;
         }
-        console.log('%c[DragRef] dragStart event dispatched successfully', 'color: #4CAF50');
         // Begin drag
         this.startDragSequence(event);
     }
@@ -573,11 +593,6 @@ export class DragRef {
      * @private
      */
     startDragSequence(_event) {
-        console.log('%c[DragRef] startDragSequence', 'color: #9C27B0; font-weight: bold', {
-            initialRect: this._state.initialRect,
-            pickupOffset: this._state.pickupOffset,
-            dropContainer: this._dropContainer ? 'YES' : 'NO'
-        });
         this._state.isDragging = true;
         this._registry.startDragging(this);
         // Set pointer capture
@@ -615,11 +630,6 @@ export class DragRef {
         const pointerPosition = getPointerPosition(event);
         // Log every 10th move to avoid spam
         if (Math.random() < 0.1) {
-            console.log('%c[DragRef] onPointerMove', 'color: #607D8B', {
-                x: pointerPosition.x,
-                y: pointerPosition.y,
-                activeDropList: this._state.activeDropList ? 'YES' : 'NO'
-            });
         }
         this.updatePointerDirection(pointerPosition);
         this._state.pointerPosition = pointerPosition;
@@ -644,12 +654,7 @@ export class DragRef {
      * @private
      */
     onPointerUp(_event) {
-        console.log('%c[DragRef] onPointerUp', 'color: #E91E63; font-weight: bold', {
-            isDragging: this._state.isDragging,
-            activeDropList: this._state.activeDropList ? 'YES' : 'NO'
-        });
         if (!this._state.isDragging) {
-            console.log('%c[DragRef] onPointerUp IGNORED - not dragging', 'color: #f44336');
             return;
         }
         this.endDragSequence(true);
@@ -660,11 +665,24 @@ export class DragRef {
      * @private
      */
     onLostPointerCapture() {
-        console.log('%c[DragRef] onLostPointerCapture', 'color: #795548', { isDragging: this._state.isDragging });
         if (this._state.isDragging) {
             this.endDragSequence(false);
         }
     }
+    /**
+     * Handle keydown during drag.
+     * Pressing Escape cancels the active drag operation.
+     *
+     * @param event - Keyboard event.
+     *
+     * @private
+     */
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this._state.isDragging) {
+            event.preventDefault();
+            this.endDragSequence(false);
+        }
+    }
     // #endregion
     // TO BE CONTINUED IN NEXT PART...
     // #region Private Methods - Position & Transform
@@ -762,11 +780,26 @@ export class DragRef {
      * @private
      */
     createPreviewElement() {
-        console.log('%c[DragRef] createPreviewElement', 'color: #00BCD4; font-weight: bold', {
-            initialRect: this._state.initialRect,
-            zIndex: this._config.zIndex
-        });
-        // Use GhostElement as preview
+        if (this._config.previewMode === 'element' && !this._config.previewTemplate) {
+            // Element mode: use the actual element as the drag preview.
+            // Apply position: fixed so it is lifted out of normal flow and
+            // positioned relative to the viewport.
+            this._rootElement.style.position = 'fixed';
+            this._rootElement.style.top = `${this._state.initialRect.top}px`;
+            this._rootElement.style.left = `${this._state.initialRect.left}px`;
+            this._rootElement.style.width = `${this._state.initialRect.width}px`;
+            this._rootElement.style.height = `${this._state.initialRect.height}px`;
+            this._rootElement.style.zIndex = `${this._config.zIndex}`;
+            this._rootElement.style.margin = '0';
+            this._rootElement.style.boxSizing = 'border-box';
+            this._rootElement.style.pointerEvents = 'none';
+            this._rootElement.classList.add('drag-preview');
+            this._state.currentPosition = { x: 0, y: 0 };
+            this._state.previewElement = this._rootElement;
+            this._state.previewContainer = null;
+            return;
+        }
+        // Ghost mode (legacy): create a separate <mosaik-ghost> clone.
         const ghost = document.createElement('mosaik-ghost');
         ghost.classList.add('drag-preview');
         // Use inline styles for positioning to override theme styles
@@ -785,8 +818,24 @@ export class DragRef {
         // Also set the element properties for any internal use
         ghost.width = `${this._state.initialRect.width}px`;
         ghost.height = `${this._state.initialRect.height}px`;
-        // Optionally copy inner content
-        ghost.innerHTML = this._rootElement.innerHTML;
+        // Use custom preview template if provided, otherwise copy inner content
+        if (this._config.previewTemplate) {
+            if (typeof this._config.previewTemplate === 'function') {
+                const customContent = this._config.previewTemplate();
+                // Remove inline style that the dragPreview directive applies to hide the template
+                customContent.removeAttribute('style');
+                ghost.appendChild(customContent);
+            }
+            else {
+                const customContent = this._config.previewTemplate.cloneNode(true);
+                // Remove inline style that the dragPreview directive applies to hide the template
+                customContent.removeAttribute('style');
+                ghost.appendChild(customContent);
+            }
+        }
+        else {
+            ghost.innerHTML = this._rootElement.innerHTML;
+        }
         // Initial transform should be 0,0 since we're using top/left for initial position
         // Transform will be applied on move relative to initial position
         this._state.currentPosition = { x: 0, y: 0 };
@@ -795,11 +844,6 @@ export class DragRef {
         container.appendChild(ghost);
         this._state.previewElement = ghost;
         this._state.previewContainer = container;
-        console.log('%c[DragRef] createPreviewElement - ghost created', 'color: #00BCD4', {
-            ghostTag: ghost.tagName,
-            containerTag: container.tagName,
-            inDOM: document.body.contains(ghost)
-        });
     }
     /**
      * Get container for preview element.
@@ -826,10 +870,6 @@ export class DragRef {
      * @private
      */
     createPlaceholderElement() {
-        console.log('%c[DragRef] createPlaceholderElement', 'color: #795548; font-weight: bold', {
-            initialRect: this._state.initialRect,
-            hasParent: !!this._rootElement.parentElement
-        });
         // Use PlaceholderElement as placeholder
         const placeholder = document.createElement('mosaik-placeholder');
         placeholder.classList.add('drag-placeholder');
@@ -839,7 +879,8 @@ export class DragRef {
         placeholder.style.pointerEvents = 'none';
         placeholder.style.display = 'block';
         placeholder.style.boxSizing = 'border-box';
-        // Optionally copy inner content if custom template is provided
+        // In element mode the placeholder is just a transparent spacer.
+        // In ghost mode (or when a custom template is provided) it carries content.
         if (this._config.placeholderTemplate) {
             if (typeof this._config.placeholderTemplate === 'function') {
                 const customContent = this._config.placeholderTemplate();
@@ -850,28 +891,42 @@ export class DragRef {
                 placeholder.appendChild(customContent);
             }
         }
-        else {
-            // Default: copy inner content from root element
+        else if (this._config.previewMode === 'ghost') {
+            // Ghost mode: copy inner content from root element
             placeholder.innerHTML = this._rootElement.innerHTML;
         }
+        // Element mode default: placeholder stays empty (transparent spacer)
         // Insert before original element
         this._rootElement.parentElement?.insertBefore(placeholder, this._rootElement);
         this._state.placeholderElement = placeholder;
-        console.log('%c[DragRef] createPlaceholderElement - placeholder created', 'color: #795548', {
-            placeholderTag: placeholder.tagName,
-            inDOM: document.body.contains(placeholder),
-            parentTag: placeholder.parentElement?.tagName
-        });
-        // Hide original element completely (not just visibility)
-        // Using position: absolute removes it from layout flow while keeping it in DOM
-        // This prevents layout shift while allowing us to restore it later
-        /* eslint-disable no-restricted-syntax */
-        this._rootElement.style.position = 'absolute';
-        this._rootElement.style.top = '-9999px';
-        this._rootElement.style.left = '-9999px';
-        this._rootElement.style.visibility = 'hidden';
-        /* eslint-enable no-restricted-syntax */
-        console.log('%c[DragRef] createPlaceholderElement - original element hidden', 'color: #795548');
+        // In element mode the root element IS the preview (already position: fixed).
+        // Move it to the preview container (document.body by default) so that
+        // ancestor transforms / overflow do not affect the fixed positioning.
+        if (this._config.previewMode === 'element') {
+            const sourceShadowRoot = this._rootElement.getRootNode();
+            // When the element lives inside a Shadow DOM, moving it to document.body
+            // would strip all scoped styles (e.g. [part='item'] rules). To preserve them
+            // we create a DragStyleContainer that adopts the source Shadow Root's stylesheets.
+            if (sourceShadowRoot instanceof ShadowRoot) {
+                this._styleContainer = new DragStyleContainer(sourceShadowRoot);
+                this._styleContainer.attach(this._rootElement);
+            }
+            else {
+                const container = this.getPreviewContainer();
+                container.appendChild(this._rootElement);
+            }
+        }
+        else {
+            // Ghost mode: hide original element completely (not just visibility).
+            // Using position: absolute removes it from layout flow while keeping it in DOM.
+            // This prevents layout shift while allowing us to restore it later.
+            /* eslint-disable no-restricted-syntax */
+            this._rootElement.style.position = 'absolute';
+            this._rootElement.style.top = '-9999px';
+            this._rootElement.style.left = '-9999px';
+            this._rootElement.style.visibility = 'hidden';
+            /* eslint-enable no-restricted-syntax */
+        }
     }
     /**
      * Remove preview element.
@@ -880,7 +935,14 @@ export class DragRef {
      */
     removePreviewElement() {
         if (this._state.previewElement) {
-            this._state.previewElement.remove();
+            // In element mode the preview IS the root element — do not remove it
+            // from the DOM. Just clear the reference and remove the preview class.
+            if (this._state.previewElement !== this._rootElement) {
+                this._state.previewElement.remove();
+            }
+            else {
+                this._rootElement.classList.remove('drag-preview');
+            }
             this._state.previewElement = null;
         }
         this._state.previewContainer = null;
@@ -892,15 +954,48 @@ export class DragRef {
      */
     removePlaceholderElement() {
         if (this._state.placeholderElement) {
+            // Move the root element to the placeholder's DOM position so
+            // the visual sort order is preserved after the placeholder is removed.
+            const parent = this._state.placeholderElement.parentNode;
+            if (parent) {
+                parent.insertBefore(this._rootElement, this._state.placeholderElement);
+            }
             this._state.placeholderElement.remove();
             this._state.placeholderElement = null;
         }
-        // Restore original element's styles
+        // Dispose the style container after the element has been moved back.
+        if (this._styleContainer) {
+            this._styleContainer.dispose();
+            this._styleContainer = null;
+        }
+        // Restore original element's inline styles that were overwritten during drag.
+        // In element mode additional properties (width, height, zIndex, margin, boxSizing)
+        // were also altered by createPreviewElement, so restore them too.
         /* eslint-disable no-restricted-syntax */
-        this._rootElement.style.position = '';
-        this._rootElement.style.top = '';
-        this._rootElement.style.left = '';
-        this._rootElement.style.visibility = '';
+        if (this._state.savedStyles) {
+            this._rootElement.style.position = this._state.savedStyles.position;
+            this._rootElement.style.top = this._state.savedStyles.top;
+            this._rootElement.style.left = this._state.savedStyles.left;
+            this._rootElement.style.visibility = this._state.savedStyles.visibility;
+            this._rootElement.style.width = this._state.savedStyles.width;
+            this._rootElement.style.height = this._state.savedStyles.height;
+            this._rootElement.style.zIndex = this._state.savedStyles.zIndex;
+            this._rootElement.style.margin = this._state.savedStyles.margin;
+            this._rootElement.style.boxSizing = this._state.savedStyles.boxSizing;
+            this._rootElement.style.pointerEvents = this._state.savedStyles.pointerEvents;
+        }
+        else {
+            this._rootElement.style.position = '';
+            this._rootElement.style.top = '';
+            this._rootElement.style.left = '';
+            this._rootElement.style.visibility = '';
+            this._rootElement.style.width = '';
+            this._rootElement.style.height = '';
+            this._rootElement.style.zIndex = '';
+            this._rootElement.style.margin = '';
+            this._rootElement.style.boxSizing = '';
+            this._rootElement.style.pointerEvents = '';
+        }
         /* eslint-enable no-restricted-syntax */
     }
     // #endregion
@@ -917,11 +1012,6 @@ export class DragRef {
         const currentListId = this._state.activeDropList ? this._state.activeDropList.id || 'unknown' : 'none';
         const newListId = dropList ? dropList.id || 'unknown' : 'none';
         if (dropList !== this._state.activeDropList) {
-            console.log('%c[DragRef] checkDropListIntersection - LIST CHANGED', 'color: #00BCD4; font-weight: bold', {
-                from: currentListId,
-                to: newListId,
-                pointerPosition
-            });
             // Exit previous
             if (this._state.activeDropList) {
                 this.exitDropList(this._state.activeDropList);
@@ -948,31 +1038,20 @@ export class DragRef {
      * @private
      */
     enterDropList(dropList, pointerPosition) {
-        console.log('%c[DragRef] enterDropList', 'color: #4CAF50; font-weight: bold', {
-            listId: dropList.id || 'unknown',
-            pointerPosition,
-            hasCanReceive: !!dropList._canReceive,
-            hasEnter: !!dropList._enter
-        });
         if (dropList._canReceive) {
             const canEnter = dropList._canReceive(this, pointerPosition);
-            console.log('%c[DragRef] enterDropList - canReceive check', 'color: #4CAF50', { canEnter });
             if (!canEnter) {
-                console.log('%c[DragRef] enterDropList BLOCKED - canReceive returned false', 'color: #f44336');
                 return;
             }
         }
         // Notify drop list
         if (dropList._enter) {
-            console.log('%c[DragRef] enterDropList - calling dropList._enter', 'color: #4CAF50');
             dropList._enter(this, pointerPosition);
         }
         else {
-            console.log('%c[DragRef] enterDropList - NO _enter method on dropList!', 'color: #f44336');
         }
         // Emit enter event
         const enterEvent = this.createDragEnterEvent(dropList);
-        console.log('%c[DragRef] Dispatching dragEnter event', 'color: #4CAF50', { enterEvent });
         this._element.dispatchEvent(enterEvent);
     }
     /**
@@ -983,16 +1062,12 @@ export class DragRef {
      * @private
      */
     exitDropList(dropList) {
-        console.log('%c[DragRef] exitDropList', 'color: #f44336; font-weight: bold', {
-            listId: dropList.id || 'unknown'
-        });
         // Notify drop list
         if (dropList._exit) {
             dropList._exit(this);
         }
         // Emit exit event
         const exitEvent = this.createDragExitEvent(dropList);
-        console.log('%c[DragRef] Dispatching dragExit event', 'color: #f44336', { exitEvent });
         this._element.dispatchEvent(exitEvent);
     }
     // #endregion
@@ -1005,40 +1080,26 @@ export class DragRef {
      * @private
      */
     endDragSequence(dropped) {
-        console.log('%c[DragRef] endDragSequence', 'color: #9C27B0; font-weight: bold', {
-            dropped,
-            isDragging: this._state.isDragging,
-            activeDropList: this._state.activeDropList ? 'YES' : 'NO',
-            dropContainer: this._dropContainer ? 'YES' : 'NO'
-        });
         if (!this._state.isDragging) {
-            console.log('%c[DragRef] endDragSequence IGNORED - not dragging', 'color: #f44336');
             return;
         }
         // Emit release event
         const releaseEvent = this.createDragReleaseEvent();
-        console.log('%c[DragRef] Dispatching dragRelease event', 'color: #9C27B0');
         this._element.dispatchEvent(releaseEvent);
         // Notify drop list
         const finalDropList = this._state.activeDropList ?? this._dropContainer;
-        console.log('%c[DragRef] Final drop list', 'color: #9C27B0', {
-            finalDropList: finalDropList ? 'YES' : 'NO',
-            hasDrop: finalDropList && finalDropList._drop ? 'YES' : 'NO'
-        });
         if (finalDropList && dropped) {
             if (finalDropList._drop) {
-                console.log('%c[DragRef] Calling finalDropList._drop', 'color: #9C27B0');
                 finalDropList._drop(this, this._state.pointerPosition);
             }
             else {
-                console.log('%c[DragRef] WARNING: finalDropList has no _drop method!', 'color: #FF5722');
             }
         }
-        // Exit any active drop list
-        if (this._state.activeDropList) {
+        // Exit any active drop list (only if drop did NOT happen — a successful drop already handles cleanup)
+        if (this._state.activeDropList && !dropped) {
             this.exitDropList(this._state.activeDropList);
-            this._state.activeDropList = null;
         }
+        this._state.activeDropList = null;
         // Animate back to position
         this.animatePreviewToPlaceholder(() => {
             this.cleanupDragArtifacts();
@@ -1102,7 +1163,16 @@ export class DragRef {
         this.removePreviewElement();
         this.removePlaceholderElement();
         this._rootElement.classList.remove('cdk-drag-dragging');
-        clearTransform(this._rootElement);
+        // Restore original transform instead of clearing it, so pre-existing
+        // CSS transforms (e.g. translate(-50%, -50%) for centering) are preserved.
+        if (this._state.savedStyles?.transform) {
+            /* eslint-disable no-restricted-syntax */
+            this._rootElement.style.transform = this._state.savedStyles.transform;
+            /* eslint-enable no-restricted-syntax */
+        }
+        else {
+            clearTransform(this._rootElement);
+        }
         cancelAnimations(this._rootElement);
     }
     /**
@@ -1122,19 +1192,18 @@ export class DragRef {
      * @private
      */
     attachDragListeners() {
-        console.log('%c[DragRef] attachDragListeners', 'color: #3F51B5; font-weight: bold');
         const moveListener = this.onPointerMove.bind(this);
         const upListener = this.onPointerUp.bind(this);
         const lostCaptureListener = this.onLostPointerCapture.bind(this);
+        const keydownListener = this.onKeyDown.bind(this);
         document.addEventListener('pointermove', moveListener);
         document.addEventListener('pointerup', upListener);
+        document.addEventListener('keydown', keydownListener);
         this._rootElement.addEventListener('lostpointercapture', lostCaptureListener);
         this._listeners.set('pointermove', moveListener);
         this._listeners.set('pointerup', upListener);
+        this._listeners.set('keydown', keydownListener);
         this._listeners.set('lostpointercapture', lostCaptureListener);
-        console.log('%c[DragRef] attachDragListeners - listeners attached', 'color: #3F51B5', {
-            listenerCount: this._listeners.size
-        });
     }
     /**
      * Detach drag event listeners.
@@ -1142,9 +1211,9 @@ export class DragRef {
      * @private
      */
     detachDragListeners() {
-        console.log('%c[DragRef] detachDragListeners', 'color: #3F51B5');
         const moveListener = this._listeners.get('pointermove');
         const upListener = this._listeners.get('pointerup');
+        const keydownListener = this._listeners.get('keydown');
         const lostCaptureListener = this._listeners.get('lostpointercapture');
         if (moveListener) {
             document.removeEventListener('pointermove', moveListener);
@@ -1152,11 +1221,13 @@ export class DragRef {
         if (upListener) {
             document.removeEventListener('pointerup', upListener);
         }
+        if (keydownListener) {
+            document.removeEventListener('keydown', keydownListener);
+        }
         if (lostCaptureListener) {
             this._rootElement.removeEventListener('lostpointercapture', lostCaptureListener);
         }
         this._listeners.clear();
-        console.log('%c[DragRef] detachDragListeners - listeners detached', 'color: #3F51B5');
     }
     // #endregion
     // #region Private Methods - Event Creation
@@ -1323,6 +1394,7 @@ export class DragRef {
             previewContainer: config.previewContainer ?? 'global',
             previewClass: config.previewClass ?? '',
             dragStartDelay: config.dragStartDelay ?? 0,
+            dragStartDistance: config.dragStartDistance ?? 0,
             boundaryElement: config.boundaryElement ?? null,
             constrainPosition: config.constrainPosition ?? undefined,
             scale: config.scale ?? 1,
@@ -1331,7 +1403,8 @@ export class DragRef {
             direction: config.direction ?? 'ltr',
             parentDragRef: config.parentDragRef,
             previewTemplate: config.previewTemplate,
-            placeholderTemplate: config.placeholderTemplate
+            placeholderTemplate: config.placeholderTemplate,
+            previewMode: config.previewMode ?? 'element'
         };
     }
     /**
@@ -1349,6 +1422,21 @@ export class DragRef {
         }
         return event.pointerType === 'touch' ? delay.touch : delay.mouse;
     }
+    /**
+     * Get start distance based on pointer type.
+     *
+     * @param event - Pointer event.
+     * @returns Distance in pixels.
+     *
+     * @private
+     */
+    getStartDistance(event) {
+        const distance = this._config.dragStartDistance;
+        if (typeof distance === 'number') {
+            return distance;
+        }
+        return event.pointerType === 'touch' ? distance.touch : distance.mouse;
+    }
 }
 // #endregion
 // #region Factory