@angular/cdk 9.2.0 → 9.2.1

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('9.2.0');
+const VERSION = new Version('9.2.1');
 
 /**
  * @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('9.2.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('9.2.1');\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

@@ -137,6 +137,81 @@ function parseCssPropertyValue(computedStyle, name) {
     part => part.trim()));
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: src/cdk/drag-drop/client-rect.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Gets a mutable version of an element's bounding `ClientRect`.
+ * @param {?} element
+ * @return {?}
+ */
+function getMutableClientRect(element) {
+    /** @type {?} */
+    const clientRect = element.getBoundingClientRect();
+    // We need to clone the `clientRect` here, because all the values on it are readonly
+    // and we need to be able to update them. Also we can't use a spread here, because
+    // the values on a `ClientRect` aren't own properties. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
+    return {
+        top: clientRect.top,
+        right: clientRect.right,
+        bottom: clientRect.bottom,
+        left: clientRect.left,
+        width: clientRect.width,
+        height: clientRect.height
+    };
+}
+/**
+ * Checks whether some coordinates are within a `ClientRect`.
+ * @param {?} clientRect ClientRect that is being checked.
+ * @param {?} x Coordinates along the X axis.
+ * @param {?} y Coordinates along the Y axis.
+ * @return {?}
+ */
+function isInsideClientRect(clientRect, x, y) {
+    const { top, bottom, left, right } = clientRect;
+    return y >= top && y <= bottom && x >= left && x <= right;
+}
+/**
+ * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
+ * @param {?} clientRect `ClientRect` that should be updated.
+ * @param {?} top Amount to add to the `top` position.
+ * @param {?} left Amount to add to the `left` position.
+ * @return {?}
+ */
+function adjustClientRect(clientRect, top, left) {
+    clientRect.top += top;
+    clientRect.bottom = clientRect.top + clientRect.height;
+    clientRect.left += left;
+    clientRect.right = clientRect.left + clientRect.width;
+}
+/**
+ * Checks whether the pointer coordinates are close to a ClientRect.
+ * @param {?} rect ClientRect to check against.
+ * @param {?} threshold Threshold around the ClientRect.
+ * @param {?} pointerX Coordinates along the X axis.
+ * @param {?} pointerY Coordinates along the Y axis.
+ * @return {?}
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    /** @type {?} */
+    const xThreshold = width * threshold;
+    /** @type {?} */
+    const yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+        pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: src/cdk/drag-drop/drag-ref.ts
@@ -160,6 +235,11 @@ if (false) {
      * @type {?}
      */
     DragRefConfig.prototype.pointerDirectionChangeThreshold;
+    /**
+     * `z-index` for the absolutely-positioned elements that are created by the drag item.
+     * @type {?|undefined}
+     */
+    DragRefConfig.prototype.zIndex;
 }
 /**
  * Options that can be used to bind a passive event listener.
@@ -370,9 +450,9 @@ class DragRef {
             // 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();
+            /** @type {?} */
+            const pointerPosition = this._getPointerPositionOnPage(event);
             if (!this._hasStartedDragging) {
-                /** @type {?} */
-                const pointerPosition = this._getPointerPositionOnPage(event);
                 /** @type {?} */
                 const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);
                 /** @type {?} */
@@ -412,7 +492,7 @@ class DragRef {
                 }
             }
             /** @type {?} */
-            const constrainedPointerPosition = this._getConstrainedPointerPosition(event);
+            const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition);
             this._hasMoved = true;
             this._updatePointerDirectionDelta(constrainedPointerPosition);
             if (this._dropContainer) {
@@ -565,8 +645,13 @@ class DragRef {
             if ((/** @type {?} */ (this))._rootElement) {
                 (/** @type {?} */ (this))._removeRootElementListeners((/** @type {?} */ (this))._rootElement);
             }
-            element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
-            element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
+            (/** @type {?} */ (this))._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => {
+                element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
+                element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
+            }));
             (/** @type {?} */ (this))._initialTransform = undefined;
             (/** @type {?} */ (this))._rootElement = element;
         }
@@ -711,7 +796,7 @@ class DragRef {
         /** @type {?} */
         const position = this._pointerPositionAtLastDirectionChange;
         if (position && this._dropContainer) {
-            this._updateActiveDropContainer(position);
+            this._updateActiveDropContainer(this._getConstrainedPointerPosition(position));
         }
     }
     /**
@@ -901,10 +986,10 @@ class DragRef {
          * @return {?}
          */
         () => {
-            this._scrollPosition = this._viewportRuler.getViewportScrollPosition();
+            this._updateOnScroll();
         }));
         if (this._boundaryElement) {
-            this._boundaryRect = this._boundaryElement.getBoundingClientRect();
+            this._boundaryRect = getMutableClientRect(this._boundaryElement);
         }
         // If we have a custom preview we can't know ahead of time how large it'll be so we position
         // it next to the cursor. The exception is when the consumer has opted into making the preview
@@ -1055,7 +1140,7 @@ class DragRef {
             position: 'fixed',
             top: '0',
             left: '0',
-            zIndex: '1000'
+            zIndex: `${this._config.zIndex || 1000}`
         });
         toggleNativeDragInteractions(preview, false);
         preview.classList.add('cdk-drag-preview');
@@ -1195,12 +1280,10 @@ class DragRef {
     /**
      * Gets the pointer position on the page, accounting for any position constraints.
      * @private
-     * @param {?} event
+     * @param {?} point
      * @return {?}
      */
-    _getConstrainedPointerPosition(event) {
-        /** @type {?} */
-        const point = this._getPointerPositionOnPage(event);
+    _getConstrainedPointerPosition(point) {
         /** @type {?} */
         const constrainedPoint = this.constrainPosition ? this.constrainPosition(point, this) : point;
         /** @type {?} */
@@ -1406,6 +1489,27 @@ class DragRef {
         }
         return value ? value.mouse : 0;
     }
+    /**
+     * Updates the internal state of the draggable element when scrolling has occurred.
+     * @private
+     * @return {?}
+     */
+    _updateOnScroll() {
+        /** @type {?} */
+        const oldScrollPosition = this._scrollPosition;
+        /** @type {?} */
+        const currentScrollPosition = this._viewportRuler.getViewportScrollPosition();
+        // ClientRect dimensions are based on the page's scroll position so
+        // we have to update the cached boundary ClientRect if the user has scrolled.
+        if (oldScrollPosition && this._boundaryRect) {
+            /** @type {?} */
+            const topDifference = oldScrollPosition.top - currentScrollPosition.top;
+            /** @type {?} */
+            const leftDifference = oldScrollPosition.left - currentScrollPosition.left;
+            adjustClientRect(this._boundaryRect, topDifference, leftDifference);
+        }
+        this._scrollPosition = currentScrollPosition;
+    }
 }
 if (false) {
     /**
@@ -1850,14 +1954,18 @@ function getPreviewInsertionPoint(documentRef) {
  */
 function getRootNode(viewRef, _document) {
     /** @type {?} */
-    const rootNode = viewRef.rootNodes[0];
-    if (rootNode.nodeType !== _document.ELEMENT_NODE) {
-        /** @type {?} */
-        const wrapper = _document.createElement('div');
-        wrapper.appendChild(rootNode);
-        return wrapper;
+    const rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return (/** @type {?} */ (rootNodes[0]));
     }
-    return (/** @type {?} */ (rootNode));
+    /** @type {?} */
+    const wrapper = _document.createElement('div');
+    rootNodes.forEach((/**
+     * @param {?} node
+     * @return {?}
+     */
+    node => wrapper.appendChild(node)));
+    return wrapper;
 }
 /**
  * Matches the target element's size to the source's size.
@@ -2431,7 +2539,8 @@ 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 || !isPointerNearClientRect(this._clientRect, pointerX, pointerY)) {
+        if (this.sortingDisabled ||
+            !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
             return;
         }
         /** @type {?} */
@@ -2541,7 +2650,7 @@ class DropListRef {
             if (element === this._document || !position.clientRect || scrollNode) {
                 return;
             }
-            if (isPointerNearClientRect(position.clientRect, pointerX, pointerY)) {
+            if (isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                 [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections((/** @type {?} */ (element)), position.clientRect, pointerX, pointerY);
                 if (verticalScrollDirection || horizontalScrollDirection) {
                     scrollNode = (/** @type {?} */ (element));
@@ -3167,35 +3276,6 @@ if (false) {
      */
     DropListRef.prototype._viewportRuler;
 }
-/**
- * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
- * @param {?} clientRect `ClientRect` that should be updated.
- * @param {?} top Amount to add to the `top` position.
- * @param {?} left Amount to add to the `left` position.
- * @return {?}
- */
-function adjustClientRect(clientRect, top, left) {
-    clientRect.top += top;
-    clientRect.bottom = clientRect.top + clientRect.height;
-    clientRect.left += left;
-    clientRect.right = clientRect.left + clientRect.width;
-}
-/**
- * Checks whether the pointer coordinates are close to a ClientRect.
- * @param {?} rect ClientRect to check against.
- * @param {?} pointerX Coordinates along the X axis.
- * @param {?} pointerY Coordinates along the Y axis.
- * @return {?}
- */
-function isPointerNearClientRect(rect, pointerX, pointerY) {
-    const { top, right, bottom, left, width, height } = rect;
-    /** @type {?} */
-    const xThreshold = width * DROP_PROXIMITY_THRESHOLD;
-    /** @type {?} */
-    const yThreshold = height * DROP_PROXIMITY_THRESHOLD;
-    return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
-        pointerX > left - xThreshold && pointerX < right + xThreshold;
-}
 /**
  * Finds the index of an item that matches a predicate function. Used as an equivalent
  * of `Array.prototype.findIndex` which isn't part of the standard Google typings.
@@ -3212,38 +3292,6 @@ function findIndex(array, predicate) {
     }
     return -1;
 }
-/**
- * Checks whether some coordinates are within a `ClientRect`.
- * @param {?} clientRect ClientRect that is being checked.
- * @param {?} x Coordinates along the X axis.
- * @param {?} y Coordinates along the Y axis.
- * @return {?}
- */
-function isInsideClientRect(clientRect, x, y) {
-    const { top, bottom, left, right } = clientRect;
-    return y >= top && y <= bottom && x >= left && x <= right;
-}
-/**
- * Gets a mutable version of an element's bounding `ClientRect`.
- * @param {?} element
- * @return {?}
- */
-function getMutableClientRect(element) {
-    /** @type {?} */
-    const clientRect = element.getBoundingClientRect();
-    // We need to clone the `clientRect` here, because all the values on it are readonly
-    // and we need to be able to update them. Also we can't use a spread here, because
-    // the values on a `ClientRect` aren't own properties. See:
-    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
-    return {
-        top: clientRect.top,
-        right: clientRect.right,
-        bottom: clientRect.bottom,
-        left: clientRect.left,
-        width: clientRect.width,
-        height: clientRect.height
-    };
-}
 /**
  * Increments the vertical scroll position of a node.
  * @param {?} node Node whose scroll position should change.
@@ -4201,6 +4249,8 @@ if (false) {
     DragDropConfig.prototype.listAutoScrollDisabled;
     /** @type {?|undefined} */
     DragDropConfig.prototype.listOrientation;
+    /** @type {?|undefined} */
+    DragDropConfig.prototype.zIndex;
 }
 /**
  * @deprecated No longer being used. To be removed.
@@ -4304,7 +4354,8 @@ class CdkDrag {
             dragStartThreshold: config && config.dragStartThreshold != null ?
                 config.dragStartThreshold : 5,
             pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
-                config.pointerDirectionChangeThreshold : 5
+                config.pointerDirectionChangeThreshold : 5,
+            zIndex: config === null || config === void 0 ? void 0 : config.zIndex
         });
         this._dragRef.data = this;
         if (config) {
@@ -5051,23 +5102,6 @@ class CdkDropList {
         // the user in a disabled state, so we also need to sync it as it's being set.
         this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
     }
-    /**
-     * @return {?}
-     */
-    ngAfterContentInit() {
-        // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
-        if (this._scrollDispatcher) {
-            /** @type {?} */
-            const scrollableParents = this._scrollDispatcher
-                .getAncestorScrollContainers(this.element)
-                .map((/**
-             * @param {?} scrollable
-             * @return {?}
-             */
-            scrollable => scrollable.getElementRef().nativeElement));
-            this._dropListRef.withScrollableParents(scrollableParents);
-        }
-    }
     /**
      * Registers an items with the drop list.
      * @param {?} item
@@ -5226,6 +5260,23 @@ class CdkDropList {
                     }
                 }));
             }
+            // Note that we resolve the scrollable parents here so that we delay the resolution
+            // as long as possible, ensuring that the element is in its final place in the DOM.
+            // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
+            if (!this._scrollableParentsResolved && this._scrollDispatcher) {
+                /** @type {?} */
+                const scrollableParents = this._scrollDispatcher
+                    .getAncestorScrollContainers(this.element)
+                    .map((/**
+                 * @param {?} scrollable
+                 * @return {?}
+                 */
+                scrollable => scrollable.getElementRef().nativeElement));
+                this._dropListRef.withScrollableParents(scrollableParents);
+                // Only do this once since it involves traversing the DOM and the parents
+                // shouldn't be able to change without the drop list being destroyed.
+                this._scrollableParentsResolved = true;
+            }
             ref.disabled = this.disabled;
             ref.lockAxis = this.lockAxis;
             ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);
@@ -5405,6 +5456,12 @@ if (false) {
      * @private
      */
     CdkDropList.prototype._destroyed;
+    /**
+     * Whether the element's scrollable parents have been resolved.
+     * @type {?}
+     * @private
+     */
+    CdkDropList.prototype._scrollableParentsResolved;
     /**
      * Reference to the underlying drop list instance.
      * @type {?}