@angular/cdk 9.2.0 → 9.2.1

package/fesm5/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. */
-var VERSION = new Version('9.2.0');
+var VERSION = new Version('9.2.1');
 
 /**
  * @license

package/fesm5/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,IAAa,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,IAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;ACXvD;;;;;;GAMG;;ACNH;;;;;;GAMG;;;;"}

package/fesm5/drag-drop.js

@@ -82,6 +82,66 @@ function parseCssPropertyValue(computedStyle, name) {
     return value.split(',').map(function (part) { return part.trim(); });
 }
 
+/**
+ * @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`. */
+function getMutableClientRect(element) {
+    var 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.
+ */
+function isInsideClientRect(clientRect, x, y) {
+    var top = clientRect.top, bottom = clientRect.bottom, left = clientRect.left, right = clientRect.right;
+    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.
+ */
+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.
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    var top = rect.top, right = rect.right, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
+    var xThreshold = width * threshold;
+    var yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+        pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -187,8 +247,8 @@ var DragRef = /** @class */ (function () {
             // 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 pointerPosition = _this._getPointerPositionOnPage(event);
                 var distanceX = Math.abs(pointerPosition.x - _this._pickupPositionOnPage.x);
                 var distanceY = Math.abs(pointerPosition.y - _this._pickupPositionOnPage.y);
                 var isOverThreshold = distanceX + distanceY >= _this._config.dragStartThreshold;
@@ -220,7 +280,7 @@ var DragRef = /** @class */ (function () {
                     _this._previewRect = (_this._preview || _this._rootElement).getBoundingClientRect();
                 }
             }
-            var constrainedPointerPosition = _this._getConstrainedPointerPosition(event);
+            var constrainedPointerPosition = _this._getConstrainedPointerPosition(pointerPosition);
             _this._hasMoved = true;
             _this._updatePointerDirectionDelta(constrainedPointerPosition);
             if (_this._dropContainer) {
@@ -323,13 +383,16 @@ var DragRef = /** @class */ (function () {
      * dragging on an element that you might not have access to.
      */
     DragRef.prototype.withRootElement = function (rootElement) {
+        var _this = this;
         var element = coerceElement(rootElement);
         if (element !== this._rootElement) {
             if (this._rootElement) {
                 this._removeRootElementListeners(this._rootElement);
             }
-            element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
-            element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
+            this._ngZone.runOutsideAngular(function () {
+                element.addEventListener('mousedown', _this._pointerDown, activeEventListenerOptions);
+                element.addEventListener('touchstart', _this._pointerDown, passiveEventListenerOptions);
+            });
             this._initialTransform = undefined;
             this._rootElement = element;
         }
@@ -438,7 +501,7 @@ var DragRef = /** @class */ (function () {
     DragRef.prototype._sortFromLastPointerPosition = function () {
         var position = this._pointerPositionAtLastDirectionChange;
         if (position && this._dropContainer) {
-            this._updateActiveDropContainer(position);
+            this._updateActiveDropContainer(this._getConstrainedPointerPosition(position));
         }
     };
     /** Unsubscribes from the global subscriptions. */
@@ -590,10 +653,10 @@ var DragRef = /** @class */ (function () {
         this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
         this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
         this._scrollSubscription = this._dragDropRegistry.scroll.pipe(startWith(null)).subscribe(function () {
-            _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
@@ -717,7 +780,7 @@ var DragRef = /** @class */ (function () {
             position: 'fixed',
             top: '0',
             left: '0',
-            zIndex: '1000'
+            zIndex: "" + (this._config.zIndex || 1000)
         });
         toggleNativeDragInteractions(preview, false);
         preview.classList.add('cdk-drag-preview');
@@ -815,8 +878,7 @@ var DragRef = /** @class */ (function () {
         };
     };
     /** Gets the pointer position on the page, accounting for any position constraints. */
-    DragRef.prototype._getConstrainedPointerPosition = function (event) {
-        var point = this._getPointerPositionOnPage(event);
+    DragRef.prototype._getConstrainedPointerPosition = function (point) {
         var constrainedPoint = this.constrainPosition ? this.constrainPosition(point, this) : point;
         var dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
         if (this.lockAxis === 'x' || dropContainerLock === 'x') {
@@ -971,6 +1033,19 @@ var DragRef = /** @class */ (function () {
         }
         return value ? value.mouse : 0;
     };
+    /** Updates the internal state of the draggable element when scrolling has occurred. */
+    DragRef.prototype._updateOnScroll = function () {
+        var oldScrollPosition = this._scrollPosition;
+        var 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) {
+            var topDifference = oldScrollPosition.top - currentScrollPosition.top;
+            var leftDifference = oldScrollPosition.left - currentScrollPosition.left;
+            adjustClientRect(this._boundaryRect, topDifference, leftDifference);
+        }
+        this._scrollPosition = currentScrollPosition;
+    };
     return DragRef;
 }());
 /**
@@ -1042,13 +1117,13 @@ function getPreviewInsertionPoint(documentRef) {
  * If the root is not an HTML element it gets wrapped in one.
  */
 function getRootNode(viewRef, _document) {
-    var rootNode = viewRef.rootNodes[0];
-    if (rootNode.nodeType !== _document.ELEMENT_NODE) {
-        var wrapper = _document.createElement('div');
-        wrapper.appendChild(rootNode);
-        return wrapper;
+    var rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return rootNodes[0];
     }
-    return rootNode;
+    var wrapper = _document.createElement('div');
+    rootNodes.forEach(function (node) { return wrapper.appendChild(node); });
+    return wrapper;
 }
 /**
  * Matches the target element's size to the source's size.
@@ -1442,7 +1517,8 @@ var DropListRef = /** @class */ (function () {
      */
     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 || !isPointerNearClientRect(this._clientRect, pointerX, pointerY)) {
+        if (this.sortingDisabled ||
+            !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
             return;
         }
         var siblings = this._itemPositions;
@@ -1522,7 +1598,7 @@ var DropListRef = /** @class */ (function () {
             if (element === _this._document || !position.clientRect || scrollNode) {
                 return;
             }
-            if (isPointerNearClientRect(position.clientRect, pointerX, pointerY)) {
+            if (isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                 _a = __read(getElementScrollDirections(element, position.clientRect, pointerX, pointerY), 2), verticalScrollDirection = _a[0], horizontalScrollDirection = _a[1];
                 if (verticalScrollDirection || horizontalScrollDirection) {
                     scrollNode = element;
@@ -1836,31 +1912,6 @@ var DropListRef = /** @class */ (function () {
     };
     return DropListRef;
 }());
-/**
- * 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.
- */
-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.
- */
-function isPointerNearClientRect(rect, pointerX, pointerY) {
-    var top = rect.top, right = rect.right, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
-    var xThreshold = width * DROP_PROXIMITY_THRESHOLD;
-    var 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.
@@ -1875,32 +1926,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.
- */
-function isInsideClientRect(clientRect, x, y) {
-    var top = clientRect.top, bottom = clientRect.bottom, left = clientRect.left, right = clientRect.right;
-    return y >= top && y <= bottom && x >= left && x <= right;
-}
-/** Gets a mutable version of an element's bounding `ClientRect`. */
-function getMutableClientRect(element) {
-    var 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.
@@ -2445,7 +2470,8 @@ var CdkDrag = /** @class */ (function () {
             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) {
@@ -2877,15 +2903,6 @@ var CdkDropList = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    CdkDropList.prototype.ngAfterContentInit = function () {
-        // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
-        if (this._scrollDispatcher) {
-            var scrollableParents = this._scrollDispatcher
-                .getAncestorScrollContainers(this.element)
-                .map(function (scrollable) { return scrollable.getElementRef().nativeElement; });
-            this._dropListRef.withScrollableParents(scrollableParents);
-        }
-    };
     /** Registers an items with the drop list. */
     CdkDropList.prototype.addItem = function (item) {
         this._unsortedItems.add(item);
@@ -2994,6 +3011,18 @@ var CdkDropList = /** @class */ (function () {
                     }
                 });
             }
+            // 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) {
+                var scrollableParents = _this._scrollDispatcher
+                    .getAncestorScrollContainers(_this.element)
+                    .map(function (scrollable) { return 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);