@angular/cdk 9.1.2 → 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
@@ -661,10 +724,10 @@
                     _this._dropContainer.exit(_this);
                     // Notify the new container that the item has entered.
                     _this._dropContainer = newContainer;
-                    _this._dropContainer.enter(_this, x, y, 
-                    // If we're re-entering the initial container,
-                    // put item the into its starting index to begin with.
-                    newContainer === _this._initialContainer ? _this._initialIndex : undefined);
+                    _this._dropContainer.enter(_this, x, y, newContainer === _this._initialContainer &&
+                        // If we're re-entering the initial container and sorting is disabled,
+                        // put item the into its starting index to begin with.
+                        newContainer.sortingDisabled ? _this._initialIndex : undefined);
                     _this.entered.next({
                         item: _this,
                         container: newContainer,
@@ -688,6 +751,7 @@
             var preview;
             if (previewTemplate) {
                 var viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
+                viewRef.detectChanges();
                 preview = getRootNode(viewRef, this._document);
                 this._previewRef = viewRef;
                 if (previewConfig.matchSize) {
@@ -712,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');
@@ -774,6 +838,7 @@
             var placeholder;
             if (placeholderTemplate) {
                 this._placeholderRef = placeholderConfig.viewContainer.createEmbeddedView(placeholderTemplate, placeholderConfig.context);
+                this._placeholderRef.detectChanges();
                 placeholder = getRootNode(this._placeholderRef, this._document);
             }
             else {
@@ -809,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') {
@@ -965,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;
     }());
     /**
@@ -1036,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.
@@ -1633,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;
@@ -1713,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;
@@ -1885,13 +1963,17 @@
          */
         DropListRef.prototype._updateAfterScroll = function (scrolledParent, newTop, newLeft) {
             var _this = this;
+            // Used when figuring out whether an element is inside the scroll parent. If the scrolled
+            // parent is the `document`, we use the `documentElement`, because IE doesn't support `contains`
+            // on the `document`.
+            var scrolledParentNode = scrolledParent === this._document ? scrolledParent.documentElement : scrolledParent;
             var scrollPosition = this._parentPositions.get(scrolledParent).scrollPosition;
             var topDifference = scrollPosition.top - newTop;
             var leftDifference = scrollPosition.left - newLeft;
             // Go through and update the cached positions of the scroll
             // parents that are inside the element that was scrolled.
             this._parentPositions.forEach(function (position, node) {
-                if (position.clientRect && scrolledParent !== node && scrolledParent.contains(node)) {
+                if (position.clientRect && scrolledParent !== node && scrolledParentNode.contains(node)) {
                     adjustClientRect(position.clientRect, topDifference, leftDifference);
                 }
             });
@@ -2016,37 +2098,13 @@
          */
         DropListRef.prototype._getShadowRoot = function () {
             if (!this._cachedShadowRoot) {
-                this._cachedShadowRoot = getShadowRoot(coercion.coerceElement(this.element)) || this._document;
+                var shadowRoot = platform._getShadowRoot(coercion.coerceElement(this.element));
+                this._cachedShadowRoot = shadowRoot || this._document;
             }
             return this._cachedShadowRoot;
         };
         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.
@@ -2061,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.
@@ -2188,16 +2220,6 @@
         }
         return [verticalScrollDirection, horizontalScrollDirection];
     }
-    /** Gets the shadow root of an element, if any. */
-    function getShadowRoot(element) {
-        if (platform._supportsShadowDom()) {
-            var rootNode = element.getRootNode ? element.getRootNode() : null;
-            if (rootNode instanceof ShadowRoot) {
-                return rootNode;
-            }
-        }
-        return null;
-    }
 
     /**
      * @license
@@ -2641,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) {
@@ -3073,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);
@@ -3190,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);