@angular/cdk 11.0.0 → 11.0.4

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;
@@ -479,6 +480,7 @@
                 if (newValue !== this._disabled) {
                     this._disabled = newValue;
                     this._toggleNativeDragInteractions();
+                    this._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, newValue); });
                 }
             },
             enumerable: false,
@@ -504,9 +506,21 @@
         };
         /** Registers the handles that can be used to drag the element. */
         DragRef.prototype.withHandles = function (handles) {
+            var _this = this;
             this._handles = handles.map(function (handle) { return coercion.coerceElement(handle); });
-            this._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, false); });
+            this._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, _this.disabled); });
             this._toggleNativeDragInteractions();
+            // Delete any lingering disabled handles that may have been destroyed. Note that we re-create
+            // the set, rather than iterate over it and filter out the destroyed handles, because while
+            // the ES spec allows for sets to be modified while they're being iterated over, some polyfills
+            // use an array internally which may throw an error.
+            var disabledHandles = new Set();
+            this._disabledHandles.forEach(function (handle) {
+                if (_this._handles.indexOf(handle) > -1) {
+                    disabledHandles.add(handle);
+                }
+            });
+            this._disabledHandles = disabledHandles;
             return this;
         };
         /**
@@ -609,8 +623,9 @@
          * @param handle Handle element that should be disabled.
          */
         DragRef.prototype.disableHandle = function (handle) {
-            if (this._handles.indexOf(handle) > -1) {
+            if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {
                 this._disabledHandles.add(handle);
+                toggleNativeDragInteractions(handle, true);
             }
         };
         /**
@@ -618,7 +633,10 @@
          * @param handle Handle element to be enabled.
          */
         DragRef.prototype.enableHandle = function (handle) {
-            this._disabledHandles.delete(handle);
+            if (this._disabledHandles.has(handle)) {
+                this._disabledHandles.delete(handle);
+                toggleNativeDragInteractions(handle, this.disabled);
+            }
         };
         /** Sets the layout direction of the draggable item. */
         DragRef.prototype.withDirection = function (direction) {
@@ -743,6 +761,8 @@
                 var preview = this._preview = this._createPreviewElement();
                 var placeholder = this._placeholder = this._createPlaceholderElement();
                 var anchor = this._anchor = this._anchor || this._document.createComment('');
+                // Needs to happen before the root element is moved.
+                var shadowRoot = this._getShadowRoot();
                 // Insert an anchor node so that we can restore the element's position in the DOM.
                 parent.insertBefore(anchor, element);
                 // We move the element out at the end of the body and we make it hidden, because keeping it in
@@ -750,7 +770,7 @@
                 // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
                 toggleVisibility(element, false);
                 this._document.body.appendChild(parent.replaceChild(placeholder, element));
-                getPreviewInsertionPoint(this._document).appendChild(preview);
+                getPreviewInsertionPoint(this._document, shadowRoot).appendChild(preview);
                 this.started.next({ source: this }); // Emit before notifying the container.
                 dropContainer.start();
                 this._initialContainer = dropContainer;
@@ -772,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;
@@ -1243,6 +1264,18 @@
             return cachedPosition ? cachedPosition.scrollPosition :
                 this._viewportRuler.getViewportScrollPosition();
         };
+        /**
+         * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
+         * than saving it in property directly on init, because we want to resolve it as late as possible
+         * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
+         * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
+         */
+        DragRef.prototype._getShadowRoot = function () {
+            if (this._cachedShadowRoot === undefined) {
+                this._cachedShadowRoot = platform._getShadowRoot(this._rootElement);
+            }
+            return this._cachedShadowRoot;
+        };
         return DragRef;
     }());
     /**
@@ -1276,11 +1309,12 @@
         return event.type[0] === 't';
     }
     /** Gets the element into which the drag preview should be inserted. */
-    function getPreviewInsertionPoint(documentRef) {
+    function getPreviewInsertionPoint(documentRef, shadowRoot) {
         // We can't use the body if the user is in fullscreen mode,
         // because the preview will render under the fullscreen element.
         // TODO(crisbeto): dedupe this with the `FullscreenOverlayContainer` eventually.
-        return documentRef.fullscreenElement ||
+        return shadowRoot ||
+            documentRef.fullscreenElement ||
             documentRef.webkitFullscreenElement ||
             documentRef.mozFullScreenElement ||
             documentRef.msFullscreenElement ||
@@ -1329,7 +1363,7 @@
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b)
-                if (b.hasOwnProperty(p))
+                if (Object.prototype.hasOwnProperty.call(b, p))
                     d[p] = b[p]; };
         return extendStatics(d, b);
     };
@@ -1476,10 +1510,10 @@
             k2 = k;
         o[k2] = m[k];
     });
-    function __exportStar(m, exports) {
+    function __exportStar(m, o) {
         for (var p in m)
-            if (p !== "default" && !exports.hasOwnProperty(p))
-                __createBinding(exports, m, p);
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
     }
     function __values(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
@@ -1589,7 +1623,7 @@
         var result = {};
         if (mod != null)
             for (var k in mod)
-                if (Object.hasOwnProperty.call(mod, k))
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
                     __createBinding(result, mod, k);
         __setModuleDefault(result, mod);
         return result;
@@ -1736,6 +1770,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. */
@@ -1802,19 +1838,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.
@@ -1825,7 +1850,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;
@@ -1877,6 +1902,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) });
         };
         /**
@@ -2000,7 +2027,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;
             }
@@ -2116,6 +2143,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);
@@ -2272,7 +2313,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
@@ -2291,7 +2332,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);
@@ -2313,9 +2355,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();
@@ -2377,6 +2426,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;
     }());
     /**
@@ -2524,9 +2579,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.
@@ -2544,14 +2604,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);
                 }
             };
@@ -2598,11 +2663,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
@@ -2643,14 +2708,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;
@@ -3271,7 +3339,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;
@@ -3314,7 +3382,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) {
@@ -3577,7 +3646,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 },] }],