@angular/cdk 11.0.2 → 11.1.0

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;
@@ -791,10 +792,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._config.parentDragRef) {
+                event.stopPropagation();
+            }
             var isDragging = this.isDragging();
             var isTouchSequence = isTouchEvent(event);
             var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
@@ -1366,6 +1368,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 +1555,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 +1570,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 +1723,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 +1741,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 +1775,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 +1802,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 +1844,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 +1856,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 +1908,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 +2033,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 +2149,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 +2319,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 +2338,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 +2361,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 +2432,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 +2585,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 +2610,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 +2669,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 +2714,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 +3084,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 +3191,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',] }],
@@ -3303,7 +3347,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;
@@ -3346,7 +3390,8 @@
                     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,
+                parentDragRef: parentDrag === null || parentDrag === void 0 ? void 0 : parentDrag._dragRef
             });
             this._dragRef.data = this;
             if (config) {
@@ -3609,7 +3654,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 },] }],