@angular/cdk 11.0.3 → 11.1.1

package/bundles/cdk-drag-drop.umd.js

@@ -389,9 +389,6 @@
             };
             /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */
             this._pointerMove = function (event) {
-                // Prevent the default action as early as possible in order to block
-                // native actions like dragging the selected text or images with the mouse.
-                event.preventDefault();
                 var pointerPosition = _this._getPointerPositionOnPage(event);
                 if (!_this._hasStartedDragging) {
                     var distanceX = Math.abs(pointerPosition.x - _this._pickupPositionOnPage.x);
@@ -426,6 +423,10 @@
                         _this._previewRect = (_this._preview || _this._rootElement).getBoundingClientRect();
                     }
                 }
+                // We prevent the default action down here so that we know that dragging has started. This is
+                // important for touch devices where doing this too early can unnecessarily block scrolling,
+                // if there's a dragging delay.
+                event.preventDefault();
                 var constrainedPointerPosition = _this._getConstrainedPointerPosition(pointerPosition);
                 _this._hasMoved = true;
                 _this._lastKnownPointerPosition = pointerPosition;
@@ -465,7 +466,7 @@
             this._pointerUp = function (event) {
                 _this._endDragSequence(event);
             };
-            this.withRootElement(element);
+            this.withRootElement(element).withParent(_config.parentDragRef || null);
             this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
             _dragDropRegistry.registerDragItem(this);
         }
@@ -576,6 +577,11 @@
             }
             return this;
         };
+        /** Sets the parent ref that the ref is nested in.  */
+        DragRef.prototype.withParent = function (parent) {
+            this._parentDragRef = parent;
+            return this;
+        };
         /** Removes the dragging functionality from the DOM element. */
         DragRef.prototype.dispose = function () {
             this._removeRootElementListeners(this._rootElement);
@@ -605,7 +611,7 @@
             this._resizeSubscription.unsubscribe();
             this._parentPositions.clear();
             this._boundaryElement = this._rootElement = this._ownerSVGElement = this._placeholderTemplate =
-                this._previewTemplate = this._anchor = null;
+                this._previewTemplate = this._anchor = this._parentDragRef = null;
         };
         /** Checks whether the element is currently being dragged. */
         DragRef.prototype.isDragging = function () {
@@ -791,10 +797,11 @@
          */
         DragRef.prototype._initializeDragSequence = function (referenceElement, event) {
             var _this = this;
-            // Always stop propagation for the event that initializes
-            // the dragging sequence, in order to prevent it from potentially
-            // starting another sequence for a draggable parent somewhere up the DOM tree.
-            event.stopPropagation();
+            // Stop propagation if the item is inside another
+            // draggable so we don't start multiple drag sequences.
+            if (this._parentDragRef) {
+                event.stopPropagation();
+            }
             var isDragging = this.isDragging();
             var isTouchSequence = isTouchEvent(event);
             var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
@@ -1366,6 +1373,8 @@
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -1551,11 +1560,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -1564,7 +1575,11 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -1713,11 +1728,6 @@
      * viewport. The value comes from trying it out manually until it feels right.
      */
     var SCROLL_PROXIMITY_THRESHOLD = 0.05;
-    /**
-     * Number of pixels to scroll for each frame when auto-scrolling an element.
-     * The value comes from trying it out manually until it feels right.
-     */
-    var AUTO_SCROLL_STEP = 2;
     /**
      * Reference to a drop list. Used to manipulate or dispose of the container.
      */
@@ -1736,6 +1746,8 @@
              * moves their pointer close to the edges is disabled.
              */
             this.autoScrollDisabled = false;
+            /** Number of pixels to scroll for each frame when auto-scrolling an element. */
+            this.autoScrollStep = 2;
             /**
              * Function that is used to determine whether an item
              * is allowed to be moved into a drop container.
@@ -1768,6 +1780,8 @@
              * overlap with the swapped item after the swapping occurred.
              */
             this._previousSwap = { drag: null, delta: 0, overlaps: false };
+            /** Draggable items in the container. */
+            this._draggables = [];
             /** Drop lists that are connected to the current one. */
             this._siblings = [];
             /** Direction in which the list is oriented. */
@@ -1793,17 +1807,18 @@
                     .pipe(operators.takeUntil(_this._stopScrollTimers))
                     .subscribe(function () {
                     var node = _this._scrollNode;
+                    var scrollStep = _this.autoScrollStep;
                     if (_this._verticalScrollDirection === 1 /* UP */) {
-                        incrementVerticalScroll(node, -AUTO_SCROLL_STEP);
+                        incrementVerticalScroll(node, -scrollStep);
                     }
                     else if (_this._verticalScrollDirection === 2 /* DOWN */) {
-                        incrementVerticalScroll(node, AUTO_SCROLL_STEP);
+                        incrementVerticalScroll(node, scrollStep);
                     }
                     if (_this._horizontalScrollDirection === 1 /* LEFT */) {
-                        incrementHorizontalScroll(node, -AUTO_SCROLL_STEP);
+                        incrementHorizontalScroll(node, -scrollStep);
                     }
                     else if (_this._horizontalScrollDirection === 2 /* RIGHT */) {
-                        incrementHorizontalScroll(node, AUTO_SCROLL_STEP);
+                        incrementHorizontalScroll(node, scrollStep);
                     }
                 });
             };
@@ -1834,19 +1849,8 @@
         };
         /** Starts dragging an item. */
         DropListRef.prototype.start = function () {
-            var _this = this;
-            var styles = coercion.coerceElement(this.element).style;
-            this.beforeStarted.next();
-            this._isDragging = true;
-            // We need to disable scroll snapping while the user is dragging, because it breaks automatic
-            // scrolling. The browser seems to round the value based on the snapping points which means
-            // that we can't increment/decrement the scroll position.
-            this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';
-            styles.scrollSnapType = styles.msScrollSnapType = 'none';
-            this._cacheItems();
-            this._siblings.forEach(function (sibling) { return sibling._startReceiving(_this); });
-            this._viewportScrollSubscription.unsubscribe();
-            this._listenToScrollEvents();
+            this._draggingStarted();
+            this._notifyReceivingSiblings();
         };
         /**
          * Emits an event to indicate that the user moved an item into the container.
@@ -1857,7 +1861,7 @@
          *   out automatically.
          */
         DropListRef.prototype.enter = function (item, pointerX, pointerY, index) {
-            this.start();
+            this._draggingStarted();
             // If sorting is disabled, we want the item to return to its starting
             // position if the user is returning it to its initial container.
             var newIndex;
@@ -1909,6 +1913,8 @@
             // but we need to refresh them since the amount of items has changed and also parent rects.
             this._cacheItemPositions();
             this._cacheParentPositions();
+            // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.
+            this._notifyReceivingSiblings();
             this.entered.next({ item: item, container: this, currentIndex: this.getItemIndex(item) });
         };
         /**
@@ -2032,7 +2038,7 @@
          */
         DropListRef.prototype._sortItem = function (item, pointerX, pointerY, pointerDelta) {
             // Don't sort the item if sorting is disabled or it's out of range.
-            if (this.sortingDisabled ||
+            if (this.sortingDisabled || !this._clientRect ||
                 !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                 return;
             }
@@ -2148,6 +2154,20 @@
         DropListRef.prototype._stopScrolling = function () {
             this._stopScrollTimers.next();
         };
+        /** Starts the dragging sequence within the list. */
+        DropListRef.prototype._draggingStarted = function () {
+            var styles = coercion.coerceElement(this.element).style;
+            this.beforeStarted.next();
+            this._isDragging = true;
+            // We need to disable scroll snapping while the user is dragging, because it breaks automatic
+            // scrolling. The browser seems to round the value based on the snapping points which means
+            // that we can't increment/decrement the scroll position.
+            this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';
+            styles.scrollSnapType = styles.msScrollSnapType = 'none';
+            this._cacheItems();
+            this._viewportScrollSubscription.unsubscribe();
+            this._listenToScrollEvents();
+        };
         /** Caches the positions of the configured scrollable parents. */
         DropListRef.prototype._cacheParentPositions = function () {
             var element = coercion.coerceElement(this.element);
@@ -2304,7 +2324,7 @@
          * @param y Pointer position along the Y axis.
          */
         DropListRef.prototype._isOverContainer = function (x, y) {
-            return isInsideClientRect(this._clientRect, x, y);
+            return this._clientRect != null && isInsideClientRect(this._clientRect, x, y);
         };
         /**
          * Figures out whether an item should be moved into a sibling
@@ -2323,7 +2343,8 @@
          * @param y Position of the item along the Y axis.
          */
         DropListRef.prototype._canReceive = function (item, x, y) {
-            if (!isInsideClientRect(this._clientRect, x, y) || !this.enterPredicate(item, this)) {
+            if (!this._clientRect || !isInsideClientRect(this._clientRect, x, y) ||
+                !this.enterPredicate(item, this)) {
                 return false;
             }
             var elementFromPoint = this._getShadowRoot().elementFromPoint(x, y);
@@ -2345,9 +2366,16 @@
          * Called by one of the connected drop lists when a dragging sequence has started.
          * @param sibling Sibling in which dragging has started.
          */
-        DropListRef.prototype._startReceiving = function (sibling) {
+        DropListRef.prototype._startReceiving = function (sibling, items) {
+            var _this = this;
             var activeSiblings = this._activeSiblings;
-            if (!activeSiblings.has(sibling)) {
+            if (!activeSiblings.has(sibling) && items.every(function (item) {
+                // Note that we have to add an exception to the `enterPredicate` for items that started off
+                // in this drop list. The drag ref has logic that allows an item to return to its initial
+                // container, if it has left the initial container and none of the connected containers
+                // allow it to enter. See `DragRef._updateActiveDropContainer` for more context.
+                return _this.enterPredicate(item, _this) || _this._draggables.indexOf(item) > -1;
+            })) {
                 activeSiblings.add(sibling);
                 this._cacheParentPositions();
                 this._listenToScrollEvents();
@@ -2409,6 +2437,12 @@
             }
             return this._cachedShadowRoot;
         };
+        /** Notifies any siblings that may potentially receive the item. */
+        DropListRef.prototype._notifyReceivingSiblings = function () {
+            var _this = this;
+            var draggedItems = this._activeDraggables.filter(function (item) { return item.isDragging(); });
+            this._siblings.forEach(function (sibling) { return sibling._startReceiving(_this, draggedItems); });
+        };
         return DropListRef;
     }());
     /**
@@ -2556,9 +2590,14 @@
             /** Registered drag item instances. */
             this._dragInstances = new Set();
             /** Drag item instances that are currently being dragged. */
-            this._activeDragInstances = new Set();
+            this._activeDragInstances = [];
             /** Keeps track of the event listeners that we've bound to the `document`. */
             this._globalListeners = new Map();
+            /**
+             * Predicate function to check if an item is being dragged.  Moved out into a property,
+             * because it'll be called a lot and we don't want to create a new function every time.
+             */
+            this._draggingPredicate = function (item) { return item.isDragging(); };
             /**
              * Emits the `touchmove` or `mousemove` events that are dispatched
              * while the user is dragging a drag item instance.
@@ -2576,14 +2615,19 @@
              * @param event Event whose default action should be prevented.
              */
             this._preventDefaultWhileDragging = function (event) {
-                if (_this._activeDragInstances.size) {
+                if (_this._activeDragInstances.length > 0) {
                     event.preventDefault();
                 }
             };
             /** Event listener for `touchmove` that is bound even if no dragging is happening. */
             this._persistentTouchmoveListener = function (event) {
-                if (_this._activeDragInstances.size) {
-                    event.preventDefault();
+                if (_this._activeDragInstances.length > 0) {
+                    // Note that we only want to prevent the default action after dragging has actually started.
+                    // Usually this is the same time at which the item is added to the `_activeDragInstances`,
+                    // but it could be pushed back if the user has set up a drag delay or threshold.
+                    if (_this._activeDragInstances.some(_this._draggingPredicate)) {
+                        event.preventDefault();
+                    }
                     _this.pointerMove.next(event);
                 }
             };
@@ -2630,11 +2674,11 @@
         DragDropRegistry.prototype.startDragging = function (drag, event) {
             var _this = this;
             // Do not process the same drag twice to avoid memory leaks and redundant listeners
-            if (this._activeDragInstances.has(drag)) {
+            if (this._activeDragInstances.indexOf(drag) > -1) {
                 return;
             }
-            this._activeDragInstances.add(drag);
-            if (this._activeDragInstances.size === 1) {
+            this._activeDragInstances.push(drag);
+            if (this._activeDragInstances.length === 1) {
                 var 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
@@ -2675,14 +2719,17 @@
         };
         /** Stops dragging a drag item instance. */
         DragDropRegistry.prototype.stopDragging = function (drag) {
-            this._activeDragInstances.delete(drag);
-            if (this._activeDragInstances.size === 0) {
-                this._clearGlobalListeners();
+            var index = this._activeDragInstances.indexOf(drag);
+            if (index > -1) {
+                this._activeDragInstances.splice(index, 1);
+                if (this._activeDragInstances.length === 0) {
+                    this._clearGlobalListeners();
+                }
             }
         };
         /** Gets whether a drag item instance is currently being dragged. */
         DragDropRegistry.prototype.isDragging = function (drag) {
-            return this._activeDragInstances.has(drag);
+            return this._activeDragInstances.indexOf(drag) > -1;
         };
         DragDropRegistry.prototype.ngOnDestroy = function () {
             var _this = this;
@@ -3042,6 +3089,7 @@
                 ref.lockAxis = _this.lockAxis;
                 ref.sortingDisabled = coercion.coerceBooleanProperty(_this.sortingDisabled);
                 ref.autoScrollDisabled = coercion.coerceBooleanProperty(_this.autoScrollDisabled);
+                ref.autoScrollStep = coercion.coerceNumberProperty(_this.autoScrollStep, 2);
                 ref
                     .connectedTo(siblings.filter(function (drop) { return drop && drop !== _this; }).map(function (list) { return list._dropListRef; }))
                     .withOrientation(_this.orientation);
@@ -3148,6 +3196,7 @@
         enterPredicate: [{ type: i0.Input, args: ['cdkDropListEnterPredicate',] }],
         sortPredicate: [{ type: i0.Input, args: ['cdkDropListSortPredicate',] }],
         autoScrollDisabled: [{ type: i0.Input, args: ['cdkDropListAutoScrollDisabled',] }],
+        autoScrollStep: [{ type: i0.Input, args: ['cdkDropListAutoScrollStep',] }],
         dropped: [{ type: i0.Output, args: ['cdkDropListDropped',] }],
         entered: [{ type: i0.Output, args: ['cdkDropListEntered',] }],
         exited: [{ type: i0.Output, args: ['cdkDropListExited',] }],
@@ -3292,6 +3341,7 @@
         matchSize: [{ type: i0.Input }]
     };
 
+    var DRAG_HOST_CLASS = 'cdk-drag';
     /** Element that can be moved inside a CdkDropList container. */
     var CdkDrag = /** @class */ (function () {
         function CdkDrag(
@@ -3303,7 +3353,7 @@
          * @deprecated `_document` parameter no longer being used and will be removed.
          * @breaking-change 12.0.0
          */
-        _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle) {
+        _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle, _parentDrag) {
             var _this = this;
             this.element = element;
             this.dropContainer = dropContainer;
@@ -3312,6 +3362,7 @@
             this._dir = _dir;
             this._changeDetectorRef = _changeDetectorRef;
             this._selfHandle = _selfHandle;
+            this._parentDrag = _parentDrag;
             this._destroyed = new rxjs.Subject();
             /** Emits when the user starts dragging the item. */
             this.started = new i0.EventEmitter();
@@ -3346,9 +3397,13 @@
                     config.dragStartThreshold : 5,
                 pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
                     config.pointerDirectionChangeThreshold : 5,
-                zIndex: config === null || config === void 0 ? void 0 : config.zIndex
+                zIndex: config === null || config === void 0 ? void 0 : 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);
             if (config) {
                 this._assignDefaults(config);
             }
@@ -3457,6 +3512,10 @@
             if (this.dropContainer) {
                 this.dropContainer.removeItem(this);
             }
+            var index = CdkDrag._dragInstances.indexOf(this);
+            if (index > -1) {
+                CdkDrag._dragInstances.splice(index, -1);
+            }
             this._destroyed.next();
             this._destroyed.complete();
             this._dragRef.dispose();
@@ -3520,6 +3579,28 @@
                     }
                 }
             });
+            // This only needs to be resolved once.
+            ref.beforeStarted.pipe(operators.take(1)).subscribe(function () {
+                var _a, _b;
+                // If we managed to resolve a parent through DI, use it.
+                if (_this._parentDrag) {
+                    ref.withParent(_this._parentDrag._dragRef);
+                    return;
+                }
+                // Otherwise fall back to resolving the parent by looking up the DOM. This can happen if
+                // the item was projected into another item by something like `ngTemplateOutlet`.
+                var parent = _this.element.nativeElement.parentElement;
+                while (parent) {
+                    // `classList` needs to be null checked, because IE doesn't have it on some elements.
+                    if ((_a = parent.classList) === null || _a === void 0 ? void 0 : _a.contains(DRAG_HOST_CLASS)) {
+                        ref.withParent(((_b = CdkDrag._dragInstances.find(function (drag) {
+                            return drag.element.nativeElement === parent;
+                        })) === null || _b === void 0 ? void 0 : _b._dragRef) || null);
+                        break;
+                    }
+                    parent = parent.parentElement;
+                }
+            });
         };
         /** Handles the events from the underlying `DragRef`. */
         CdkDrag.prototype._handleEvents = function (ref) {
@@ -3587,12 +3668,13 @@
         };
         return CdkDrag;
     }());
+    CdkDrag._dragInstances = [];
     CdkDrag.decorators = [
         { type: i0.Directive, args: [{
                     selector: '[cdkDrag]',
                     exportAs: 'cdkDrag',
                     host: {
-                        'class': 'cdk-drag',
+                        'class': DRAG_HOST_CLASS,
                         '[class.cdk-drag-disabled]': 'disabled',
                         '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
                     },
@@ -3609,7 +3691,8 @@
         { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
         { type: DragDrop },
         { type: i0.ChangeDetectorRef },
-        { type: CdkDragHandle, decorators: [{ type: i0.Optional }, { type: i0.Self }, { type: i0.Inject, args: [CDK_DRAG_HANDLE,] }] }
+        { type: CdkDragHandle, decorators: [{ type: i0.Optional }, { type: i0.Self }, { type: i0.Inject, args: [CDK_DRAG_HANDLE,] }] },
+        { type: CdkDrag, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }, { type: i0.Inject, args: [CDK_DRAG_PARENT,] }] }
     ]; };
     CdkDrag.propDecorators = {
         _handles: [{ type: i0.ContentChildren, args: [CDK_DRAG_HANDLE, { descendants: true },] }],