@angular/cdk 9.2.0 → 9.2.1

package/bundles/cdk-drag-drop.umd.js

@@ -78,6 +78,66 @@
         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.
@@ -183,8 +243,8 @@
                 // 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;
@@ -216,7 +276,7 @@
                         _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) {
@@ -319,13 +379,16 @@
          * dragging on an element that you might not have access to.
          */
         DragRef.prototype.withRootElement = function (rootElement) {
+            var _this = this;
             var element = coercion.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;
             }
@@ -434,7 +497,7 @@
         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. */
@@ -586,10 +649,10 @@
             this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
             this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
             this._scrollSubscription = this._dragDropRegistry.scroll.pipe(operators.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
@@ -713,7 +776,7 @@
                 position: 'fixed',
                 top: '0',
                 left: '0',
-                zIndex: '1000'
+                zIndex: "" + (this._config.zIndex || 1000)
             });
             toggleNativeDragInteractions(preview, false);
             preview.classList.add('cdk-drag-preview');
@@ -811,8 +874,7 @@
             };
         };
         /** 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') {
@@ -967,6 +1029,19 @@
             }
             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;
     }());
     /**
@@ -1038,13 +1113,13 @@
      * 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.
@@ -1635,7 +1710,8 @@
          */
         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;
@@ -1715,7 +1791,7 @@
                 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;
@@ -2029,31 +2105,6 @@
         };
         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.
@@ -2068,32 +2119,6 @@
         }
         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.
@@ -2638,7 +2663,8 @@
                 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) {
@@ -3070,15 +3096,6 @@
             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);
@@ -3187,6 +3204,18 @@
                         }
                     });
                 }
+                // 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 = coercion.coerceBooleanProperty(_this.sortingDisabled);