@angular/cdk 11.0.0 → 11.0.4

package/fesm2015/cdk.js

@@ -8,7 +8,7 @@ import { Version } from '@angular/core';
  * found in the LICENSE file at https://angular.io/license
  */
 /** Current version of the Angular Component Development Kit. */
-const VERSION = new Version('11.0.0');
+const VERSION = new Version('11.0.4');
 
 /**
  * @license

package/fesm2015/cdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.js","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('11.0.0');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAQA,AAEA;AACA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;ACXvD;;;;;;GAMG;;ACNH;;;;;;GAMG;;;;"}
+{"version":3,"file":"cdk.js","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('11.0.4');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAQA,AAEA;AACA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;ACXvD;;;;;;GAMG;;ACNH;;;;;;GAMG;;;;"}

package/fesm2015/drag-drop.js

@@ -389,9 +389,6 @@ class DragRef {
         };
         /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */
         this._pointerMove = (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();
             const pointerPosition = this._getPointerPositionOnPage(event);
             if (!this._hasStartedDragging) {
                 const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);
@@ -426,6 +423,10 @@ class DragRef {
                     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();
             const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition);
             this._hasMoved = true;
             this._lastKnownPointerPosition = pointerPosition;
@@ -478,6 +479,7 @@ class DragRef {
         if (newValue !== this._disabled) {
             this._disabled = newValue;
             this._toggleNativeDragInteractions();
+            this._handles.forEach(handle => toggleNativeDragInteractions(handle, newValue));
         }
     }
     /**
@@ -501,8 +503,19 @@ class DragRef {
     /** Registers the handles that can be used to drag the element. */
     withHandles(handles) {
         this._handles = handles.map(handle => coerceElement(handle));
-        this._handles.forEach(handle => toggleNativeDragInteractions(handle, false));
+        this._handles.forEach(handle => 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.
+        const disabledHandles = new Set();
+        this._disabledHandles.forEach(handle => {
+            if (this._handles.indexOf(handle) > -1) {
+                disabledHandles.add(handle);
+            }
+        });
+        this._disabledHandles = disabledHandles;
         return this;
     }
     /**
@@ -603,8 +616,9 @@ class DragRef {
      * @param handle Handle element that should be disabled.
      */
     disableHandle(handle) {
-        if (this._handles.indexOf(handle) > -1) {
+        if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {
             this._disabledHandles.add(handle);
+            toggleNativeDragInteractions(handle, true);
         }
     }
     /**
@@ -612,7 +626,10 @@ class DragRef {
      * @param handle Handle element to be enabled.
      */
     enableHandle(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. */
     withDirection(direction) {
@@ -736,6 +753,8 @@ class DragRef {
             const preview = this._preview = this._createPreviewElement();
             const placeholder = this._placeholder = this._createPlaceholderElement();
             const anchor = this._anchor = this._anchor || this._document.createComment('');
+            // Needs to happen before the root element is moved.
+            const 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
@@ -743,7 +762,7 @@ class DragRef {
             // 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;
@@ -764,10 +783,11 @@ class DragRef {
      * @param event Browser event object that started the sequence.
      */
     _initializeDragSequence(referenceElement, event) {
-        // 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();
+        }
         const isDragging = this.isDragging();
         const isTouchSequence = isTouchEvent(event);
         const isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
@@ -1230,6 +1250,18 @@ class DragRef {
         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`.
+     */
+    _getShadowRoot() {
+        if (this._cachedShadowRoot === undefined) {
+            this._cachedShadowRoot = _getShadowRoot(this._rootElement);
+        }
+        return this._cachedShadowRoot;
+    }
 }
 /**
  * Gets a 3d `transform` that can be applied to an element.
@@ -1262,11 +1294,12 @@ function isTouchEvent(event) {
     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 ||
@@ -1427,6 +1460,8 @@ class DropListRef {
          * 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. */
@@ -1493,18 +1528,8 @@ class DropListRef {
     }
     /** Starts dragging an item. */
     start() {
-        const styles = 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(sibling => 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.
@@ -1515,7 +1540,7 @@ class DropListRef {
      *   out automatically.
      */
     enter(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.
         let newIndex;
@@ -1567,6 +1592,8 @@ class DropListRef {
         // 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, container: this, currentIndex: this.getItemIndex(item) });
     }
     /**
@@ -1689,7 +1716,7 @@ class DropListRef {
      */
     _sortItem(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;
         }
@@ -1803,6 +1830,20 @@ class DropListRef {
     _stopScrolling() {
         this._stopScrollTimers.next();
     }
+    /** Starts the dragging sequence within the list. */
+    _draggingStarted() {
+        const styles = 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. */
     _cacheParentPositions() {
         const element = coerceElement(this.element);
@@ -1956,7 +1997,7 @@ class DropListRef {
      * @param y Pointer position along the Y axis.
      */
     _isOverContainer(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
@@ -1975,7 +2016,8 @@ class DropListRef {
      * @param y Position of the item along the Y axis.
      */
     _canReceive(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;
         }
         const elementFromPoint = this._getShadowRoot().elementFromPoint(x, y);
@@ -1997,9 +2039,15 @@ class DropListRef {
      * Called by one of the connected drop lists when a dragging sequence has started.
      * @param sibling Sibling in which dragging has started.
      */
-    _startReceiving(sibling) {
+    _startReceiving(sibling, items) {
         const activeSiblings = this._activeSiblings;
-        if (!activeSiblings.has(sibling)) {
+        if (!activeSiblings.has(sibling) && items.every(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();
@@ -2058,6 +2106,11 @@ class DropListRef {
         }
         return this._cachedShadowRoot;
     }
+    /** Notifies any siblings that may potentially receive the item. */
+    _notifyReceivingSiblings() {
+        const draggedItems = this._activeDraggables.filter(item => item.isDragging());
+        this._siblings.forEach(sibling => sibling._startReceiving(this, draggedItems));
+    }
 }
 /**
  * Finds the index of an item that matches a predicate function. Used as an equivalent
@@ -2203,9 +2256,14 @@ class DragDropRegistry {
         /** 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 = (item) => item.isDragging();
         /**
          * Emits the `touchmove` or `mousemove` events that are dispatched
          * while the user is dragging a drag item instance.
@@ -2223,14 +2281,19 @@ class DragDropRegistry {
          * @param event Event whose default action should be prevented.
          */
         this._preventDefaultWhileDragging = (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 = (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);
             }
         };
@@ -2275,11 +2338,11 @@ class DragDropRegistry {
      */
     startDragging(drag, event) {
         // 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) {
             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
@@ -2320,14 +2383,17 @@ class DragDropRegistry {
     }
     /** Stops dragging a drag item instance. */
     stopDragging(drag) {
-        this._activeDragInstances.delete(drag);
-        if (this._activeDragInstances.size === 0) {
-            this._clearGlobalListeners();
+        const 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. */
     isDragging(drag) {
-        return this._activeDragInstances.has(drag);
+        return this._activeDragInstances.indexOf(drag) > -1;
     }
     ngOnDestroy() {
         this._dragInstances.forEach(instance => this.removeDragItem(instance));
@@ -2934,7 +3000,7 @@ class CdkDrag {
      * @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) {
         this.element = element;
         this.dropContainer = dropContainer;
         this._ngZone = _ngZone;
@@ -2976,7 +3042,8 @@ class CdkDrag {
                 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) {
@@ -3231,7 +3298,8 @@ CdkDrag.ctorParameters = () => [
     { type: Directionality, decorators: [{ type: Optional }] },
     { type: DragDrop },
     { type: ChangeDetectorRef },
-    { type: CdkDragHandle, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [CDK_DRAG_HANDLE,] }] }
+    { type: CdkDragHandle, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [CDK_DRAG_HANDLE,] }] },
+    { type: CdkDrag, decorators: [{ type: Optional }, { type: SkipSelf }, { type: Inject, args: [CDK_DRAG_PARENT,] }] }
 ];
 CdkDrag.propDecorators = {
     _handles: [{ type: ContentChildren, args: [CDK_DRAG_HANDLE, { descendants: true },] }],