@angular/cdk 19.0.2 → 19.0.4

package/fesm2022/drag-drop.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, NgZone, Injectable, InjectionToken, ElementRef, booleanAttribute, Directive, Input, ViewContainerRef, ChangeDetectorRef, EventEmitter, Injector, afterNextRender, numberAttribute, Output, TemplateRef, NgModule } from '@angular/core';
+import { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, NgZone, Injectable, RendererFactory2, InjectionToken, ElementRef, booleanAttribute, Directive, Input, ViewContainerRef, ChangeDetectorRef, EventEmitter, Injector, afterNextRender, numberAttribute, Output, TemplateRef, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from '@angular/cdk/scrolling';
 import { isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader, _IdGenerator } from '@angular/cdk/a11y';
@@ -333,6 +333,7 @@ class PreviewRef {
     _pickupPositionOnPage;
     _initialTransform;
     _zIndex;
+    _renderer;
     /** Reference to the view of the preview element. */
     _previewEmbeddedView;
     /** Reference to the preview element. */
@@ -340,7 +341,7 @@ class PreviewRef {
     get element() {
         return this._preview;
     }
-    constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex) {
+    constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex, _renderer) {
         this._document = _document;
         this._rootElement = _rootElement;
         this._direction = _direction;
@@ -350,6 +351,7 @@ class PreviewRef {
         this._pickupPositionOnPage = _pickupPositionOnPage;
         this._initialTransform = _initialTransform;
         this._zIndex = _zIndex;
+        this._renderer = _renderer;
     }
     attach(parent) {
         this._preview = this._createPreview();
@@ -378,10 +380,7 @@ class PreviewRef {
         return getTransformTransitionDurationInMs(this._preview);
     }
     addEventListener(name, handler) {
-        this._preview.addEventListener(name, handler);
-    }
-    removeEventListener(name, handler) {
-        this._preview.removeEventListener(name, handler);
+        return this._renderer.listen(this._preview, name, handler);
     }
     _createPreview() {
         const previewConfig = this._previewTemplate;
@@ -475,6 +474,7 @@ class DragRef {
     _ngZone;
     _viewportRuler;
     _dragDropRegistry;
+    _renderer;
     /** Element displayed next to the user's pointer while the element is dragged. */
     _preview;
     /** Container into which to insert the preview. */
@@ -638,12 +638,13 @@ class DragRef {
      * Should return a point describing where the item should be rendered.
      */
     constrainPosition;
-    constructor(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry) {
+    constructor(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry, _renderer) {
         this._config = _config;
         this._document = _document;
         this._ngZone = _ngZone;
         this._viewportRuler = _viewportRuler;
         this._dragDropRegistry = _dragDropRegistry;
+        this._renderer = _renderer;
         this.withRootElement(element).withParent(_config.parentDragRef || null);
         this._parentPositions = new ParentPositionTracker(_document);
         _dragDropRegistry.registerDragItem(this);
@@ -1040,7 +1041,7 @@ class DragRef {
             this._initialTransform = element.style.transform || '';
             // Create the preview after the initial transform has
             // been cached, because it can be affected by the transform.
-            this._preview = new PreviewRef(this._document, this._rootElement, this._direction, this._initialDomRect, this._previewTemplate || null, this.previewClass || null, this._pickupPositionOnPage, this._initialTransform, this._config.zIndex || 1000);
+            this._preview = new PreviewRef(this._document, this._rootElement, this._direction, this._initialDomRect, this._previewTemplate || null, this.previewClass || null, this._pickupPositionOnPage, this._initialTransform, this._config.zIndex || 1000, this._renderer);
             this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot));
             // We move the element out at the end of the body and we make it hidden, because keeping it in
             // place will throw off the consumer's `:last-child` selectors. We can't remove the element
@@ -1244,21 +1245,21 @@ class DragRef {
         }
         return this._ngZone.runOutsideAngular(() => {
             return new Promise(resolve => {
-                const handler = ((event) => {
+                const handler = (event) => {
                     if (!event ||
                         (this._preview &&
                             _getEventTarget(event) === this._preview.element &&
                             event.propertyName === 'transform')) {
-                        this._preview?.removeEventListener('transitionend', handler);
+                        cleanupListener();
                         resolve();
                         clearTimeout(timeout);
                     }
-                });
+                };
                 // If a transition is short enough, the browser might not fire the `transitionend` event.
                 // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
                 // fire if the transition hasn't completed when it was supposed to.
                 const timeout = setTimeout(handler, duration * 1.5);
-                this._preview.addEventListener('transitionend', handler);
+                const cleanupListener = this._preview.addEventListener('transitionend', handler);
             });
         });
     }
@@ -2988,6 +2989,12 @@ class DragDropRegistry {
      * because it'll be called a lot and we don't want to create a new function every time.
      */
     _draggingPredicate = (item) => item.isDragging();
+    /**
+     * Map tracking DOM nodes and their corresponding drag directives. Note that this is different
+     * from looking through the `_dragInstances` and getting their root node, because the root node
+     * isn't necessarily the node that the directive is set on.
+     */
+    _domNodesToDirectives = null;
     /**
      * Emits the `touchmove` or `mousemove` events that are dispatched
      * while the user is dragging a drag item instance.
@@ -3050,15 +3057,22 @@ class DragDropRegistry {
         this._styleLoader.load(_ResetsLoader);
         this._activeDragInstances.update(instances => [...instances, drag]);
         if (this._activeDragInstances().length === 1) {
-            const isTouchEvent = event.type.startsWith('touch');
             // We explicitly bind __active__ listeners here, because newer browsers will default to
             // passive ones for `mousemove` and `touchmove`. The events need to be active, because we
             // use `preventDefault` to prevent the page from scrolling while the user is dragging.
-            this._globalListeners
-                .set(isTouchEvent ? 'touchend' : 'mouseup', {
+            const isTouchEvent = event.type.startsWith('touch');
+            const endEventHandler = {
                 handler: (e) => this.pointerUp.next(e),
                 options: true,
-            })
+            };
+            if (isTouchEvent) {
+                this._globalListeners.set('touchend', endEventHandler);
+                this._globalListeners.set('touchcancel', endEventHandler);
+            }
+            else {
+                this._globalListeners.set('mouseup', endEventHandler);
+            }
+            this._globalListeners
                 .set('scroll', {
                 handler: (e) => this.scroll.next(e),
                 // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't
@@ -3136,9 +3150,33 @@ class DragDropRegistry {
         }
         return merge(...streams);
     }
+    /**
+     * Tracks the DOM node which has a draggable directive.
+     * @param node Node to track.
+     * @param dragRef Drag directive set on the node.
+     */
+    registerDirectiveNode(node, dragRef) {
+        this._domNodesToDirectives ??= new WeakMap();
+        this._domNodesToDirectives.set(node, dragRef);
+    }
+    /**
+     * Stops tracking a draggable directive node.
+     * @param node Node to stop tracking.
+     */
+    removeDirectiveNode(node) {
+        this._domNodesToDirectives?.delete(node);
+    }
+    /**
+     * Gets the drag directive corresponding to a specific DOM node, if any.
+     * @param node Node for which to do the lookup.
+     */
+    getDragDirectiveForNode(node) {
+        return this._domNodesToDirectives?.get(node) || null;
+    }
     ngOnDestroy() {
         this._dragInstances.forEach(instance => this.removeDragItem(instance));
         this._dropInstances.forEach(instance => this.removeDropContainer(instance));
+        this._domNodesToDirectives = null;
         this._clearGlobalListeners();
         this.pointerMove.complete();
         this.pointerUp.complete();
@@ -3192,6 +3230,7 @@ class DragDrop {
     _ngZone = inject(NgZone);
     _viewportRuler = inject(ViewportRuler);
     _dragDropRegistry = inject(DragDropRegistry);
+    _renderer = inject(RendererFactory2).createRenderer(null, null);
     constructor() { }
     /**
      * Turns an element into a draggable item.
@@ -3199,7 +3238,7 @@ class DragDrop {
      * @param config Object used to configure the dragging behavior.
      */
     createDrag(element, config = DEFAULT_CONFIG) {
-        return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry);
+        return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry, this._renderer);
     }
     /**
      * Turns an element into a drop list.
@@ -3245,6 +3284,7 @@ const CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle');
 class CdkDragHandle {
     element = inject(ElementRef);
     _parentDrag = inject(CDK_DRAG_PARENT, { optional: true, skipSelf: true });
+    _dragDropRegistry = inject(DragDropRegistry);
     /** Emits when the state of the handle has changed. */
     _stateChanges = new Subject();
     /** Whether starting to drag through this handle is disabled. */
@@ -3262,6 +3302,20 @@ class CdkDragHandle {
         }
         this._parentDrag?._addHandle(this);
     }
+    ngAfterViewInit() {
+        if (!this._parentDrag) {
+            let parent = this.element.nativeElement.parentElement;
+            while (parent) {
+                const ref = this._dragDropRegistry.getDragDirectiveForNode(parent);
+                if (ref) {
+                    this._parentDrag = ref;
+                    ref._addHandle(this);
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+        }
+    }
     ngOnDestroy() {
         this._parentDrag?._removeHandle(this);
         this._stateChanges.complete();
@@ -3289,7 +3343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  */
 const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG');
 
-const DRAG_HOST_CLASS = 'cdk-drag';
 /**
  * Injection token that can be used to reference instances of `CdkDropList`. It serves as
  * alternative token to the actual `CdkDropList` class which could cause unnecessary
@@ -3306,8 +3359,8 @@ class CdkDrag {
     _changeDetectorRef = inject(ChangeDetectorRef);
     _selfHandle = inject(CDK_DRAG_HANDLE, { optional: true, self: true });
     _parentDrag = inject(CDK_DRAG_PARENT, { optional: true, skipSelf: true });
+    _dragDropRegistry = inject(DragDropRegistry);
     _destroyed = new Subject();
-    static _dragInstances = [];
     _handles = new BehaviorSubject([]);
     _previewTemplate;
     _placeholderTemplate;
@@ -3420,10 +3473,7 @@ class CdkDrag {
             zIndex: config?.zIndex,
         });
         this._dragRef.data = this;
-        // We have to keep track of the drag instances in order to be able to match an element to
-        // a drag instance. We can't go through the global registry of `DragRef`, because the root
-        // element could be different.
-        CdkDrag._dragInstances.push(this);
+        this._dragDropRegistry.registerDirectiveNode(this.element.nativeElement, this);
         if (config) {
             this._assignDefaults(config);
         }
@@ -3507,10 +3557,7 @@ class CdkDrag {
         if (this.dropContainer) {
             this.dropContainer.removeItem(this);
         }
-        const index = CdkDrag._dragInstances.indexOf(this);
-        if (index > -1) {
-            CdkDrag._dragInstances.splice(index, 1);
-        }
+        this._dragDropRegistry.removeDirectiveNode(this.element.nativeElement);
         // Unnecessary in most cases, but used to avoid extra change detections with `zone-paths-rxjs`.
         this._ngZone.runOutsideAngular(() => {
             this._handles.complete();
@@ -3626,10 +3673,9 @@ class CdkDrag {
             // the item was projected into another item by something like `ngTemplateOutlet`.
             let parent = this.element.nativeElement.parentElement;
             while (parent) {
-                if (parent.classList.contains(DRAG_HOST_CLASS)) {
-                    ref.withParent(CdkDrag._dragInstances.find(drag => {
-                        return drag.element.nativeElement === parent;
-                    })?._dragRef || null);
+                const parentDrag = this._dragDropRegistry.getDragDirectiveForNode(parent);
+                if (parentDrag) {
+                    ref.withParent(parentDrag._dragRef);
                     break;
                 }
                 parent = parent.parentElement;
@@ -3745,7 +3791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     selector: '[cdkDrag]',
                     exportAs: 'cdkDrag',
                     host: {
-                        'class': DRAG_HOST_CLASS,
+                        'class': 'cdk-drag',
                         '[class.cdk-drag-disabled]': 'disabled',
                         '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
                     },