@angular/cdk 8.1.4 → 8.2.3

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

@@ -25,7 +25,7 @@
 function extendStyles(dest, source) {
     for (var key in source) {
         if (source.hasOwnProperty(key)) {
-            dest[(/** @type {?} */ (key))] = source[(/** @type {?} */ (key))];
+            dest[key] = (/** @type {?} */ (source[key]));
         }
     }
     return dest;
@@ -181,6 +181,10 @@ DragRef = /** @class */ (function () {
          * Subscription to the viewport being scrolled.
          */
         this._scrollSubscription = rxjs.Subscription.EMPTY;
+        /**
+         * Subscription to the viewport being resized.
+         */
+        this._resizeSubscription = rxjs.Subscription.EMPTY;
         /**
          * Cached reference to the boundary element.
          */
@@ -553,7 +557,17 @@ DragRef = /** @class */ (function () {
      * @return {THIS}
      */
     function (boundaryElement) {
+        var _this = this;
         (/** @type {?} */ (this))._boundaryElement = boundaryElement ? coercion.coerceElement(boundaryElement) : null;
+        (/** @type {?} */ (this))._resizeSubscription.unsubscribe();
+        if (boundaryElement) {
+            (/** @type {?} */ (this))._resizeSubscription = (/** @type {?} */ (this))._viewportRuler
+                .change(10)
+                .subscribe((/**
+             * @return {?}
+             */
+            function () { return (/** @type {?} */ (_this))._containInsideBoundaryOnResize(); }));
+        }
         return (/** @type {?} */ (this));
     };
     /** Removes the dragging functionality from the DOM element. */
@@ -829,6 +843,7 @@ DragRef = /** @class */ (function () {
         }
         this._removeSubscriptions();
         this._dragDropRegistry.stopDragging(this);
+        this._toggleNativeDragInteractions();
         if (this._handles) {
             this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
         }
@@ -844,6 +859,7 @@ DragRef = /** @class */ (function () {
              */
             function () {
                 _this._cleanupDragArtifacts(event);
+                _this._cleanupCachedDimensions();
                 _this._dragDropRegistry.stopDragging(_this);
             }));
         }
@@ -862,6 +878,7 @@ DragRef = /** @class */ (function () {
                     distance: _this._getDragDistance(_this._getPointerPositionOnPage(event))
                 });
             }));
+            this._cleanupCachedDimensions();
             this._dragDropRegistry.stopDragging(this);
         }
     };
@@ -1073,7 +1090,7 @@ DragRef = /** @class */ (function () {
         // Drop container that draggable has been moved into.
         /** @type {?} */
         var newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y);
-        // If we couldn't find a new container to move the item into, and the item has left it's
+        // If we couldn't find a new container to move the item into, and the item has left its
         // initial container, check whether the it's over the initial container. This handles the
         // case where two containers are connected one way and the user tries to undo dragging an
         // item into a new container.
@@ -1130,7 +1147,7 @@ DragRef = /** @class */ (function () {
         if (previewTemplate) {
             /** @type {?} */
             var viewRef = (/** @type {?} */ (previewConfig)).viewContainer.createEmbeddedView(previewTemplate, (/** @type {?} */ (previewConfig)).context);
-            preview = viewRef.rootNodes[0];
+            preview = getRootNode(viewRef, this._document);
             this._previewRef = viewRef;
             preview.style.transform =
                 getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
@@ -1149,6 +1166,8 @@ DragRef = /** @class */ (function () {
             // It's important that we disable the pointer events on the preview, because
             // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
             pointerEvents: 'none',
+            // We have to reset the margin, because can throw off positioning relative to the viewport.
+            margin: '0',
             position: 'fixed',
             top: '0',
             left: '0',
@@ -1244,7 +1263,7 @@ DragRef = /** @class */ (function () {
         var placeholder;
         if (placeholderTemplate) {
             this._placeholderRef = (/** @type {?} */ (placeholderConfig)).viewContainer.createEmbeddedView(placeholderTemplate, (/** @type {?} */ (placeholderConfig)).context);
-            placeholder = this._placeholderRef.rootNodes[0];
+            placeholder = getRootNode(this._placeholderRef, this._document);
         }
         else {
             placeholder = deepCloneNode(this._rootElement);
@@ -1490,6 +1509,83 @@ DragRef = /** @class */ (function () {
         }
         return { x: 0, y: 0 };
     };
+    /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */
+    /**
+     * Cleans up any cached element dimensions that we don't need after dragging has stopped.
+     * @private
+     * @return {?}
+     */
+    DragRef.prototype._cleanupCachedDimensions = /**
+     * Cleans up any cached element dimensions that we don't need after dragging has stopped.
+     * @private
+     * @return {?}
+     */
+    function () {
+        this._boundaryRect = this._previewRect = undefined;
+    };
+    /**
+     * Checks whether the element is still inside its boundary after the viewport has been resized.
+     * If not, the position is adjusted so that the element fits again.
+     */
+    /**
+     * Checks whether the element is still inside its boundary after the viewport has been resized.
+     * If not, the position is adjusted so that the element fits again.
+     * @private
+     * @return {?}
+     */
+    DragRef.prototype._containInsideBoundaryOnResize = /**
+     * Checks whether the element is still inside its boundary after the viewport has been resized.
+     * If not, the position is adjusted so that the element fits again.
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _a = this._passiveTransform, x = _a.x, y = _a.y;
+        if ((x === 0 && y === 0) || this.isDragging() || !this._boundaryElement) {
+            return;
+        }
+        /** @type {?} */
+        var boundaryRect = this._boundaryElement.getBoundingClientRect();
+        /** @type {?} */
+        var elementRect = this._rootElement.getBoundingClientRect();
+        /** @type {?} */
+        var leftOverflow = boundaryRect.left - elementRect.left;
+        /** @type {?} */
+        var rightOverflow = elementRect.right - boundaryRect.right;
+        /** @type {?} */
+        var topOverflow = boundaryRect.top - elementRect.top;
+        /** @type {?} */
+        var bottomOverflow = elementRect.bottom - boundaryRect.bottom;
+        // If the element has become wider than the boundary, we can't
+        // do much to make it fit so we just anchor it to the left.
+        if (boundaryRect.width > elementRect.width) {
+            if (leftOverflow > 0) {
+                x += leftOverflow;
+            }
+            if (rightOverflow > 0) {
+                x -= rightOverflow;
+            }
+        }
+        else {
+            x = 0;
+        }
+        // If the element has become taller than the boundary, we can't
+        // do much to make it fit so we just anchor it to the top.
+        if (boundaryRect.height > elementRect.height) {
+            if (topOverflow > 0) {
+                y += topOverflow;
+            }
+            if (bottomOverflow > 0) {
+                y -= bottomOverflow;
+            }
+        }
+        else {
+            y = 0;
+        }
+        if (x !== this._passiveTransform.x || y !== this._passiveTransform.y) {
+            this.setFreeDragPosition({ y: y, x: x });
+        }
+    };
     return DragRef;
 }());
 /**
@@ -1581,6 +1677,24 @@ function getPreviewInsertionPoint(documentRef) {
         documentRef.msFullscreenElement ||
         documentRef.body;
 }
+/**
+ * Gets the root HTML element of an embedded view.
+ * If the root is not an HTML element it gets wrapped in one.
+ * @param {?} viewRef
+ * @param {?} _document
+ * @return {?}
+ */
+function getRootNode(viewRef, _document) {
+    /** @type {?} */
+    var rootNode = viewRef.rootNodes[0];
+    if (rootNode.nodeType !== _document.ELEMENT_NODE) {
+        /** @type {?} */
+        var wrapper = _document.createElement('div');
+        wrapper.appendChild(rootNode);
+        return wrapper;
+    }
+    return (/** @type {?} */ (rootNode));
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1714,7 +1828,7 @@ DropListRef = /** @class */ (function () {
         /**
          * Whether sorting items within the list is disabled.
          */
-        this.sortingDisabled = true;
+        this.sortingDisabled = false;
         /**
          * Whether auto-scrolling the view when the user
          * moves their pointer close to the edges is disabled.
@@ -1846,9 +1960,10 @@ DropListRef = /** @class */ (function () {
                 }
             }));
         });
+        /** @type {?} */
+        var nativeNode = this.element = coercion.coerceElement(element);
+        this._shadowRoot = getShadowRoot(nativeNode) || _document;
         _dragDropRegistry.registerDropContainer(this);
-        this._document = _document;
-        this.element = element instanceof core.ElementRef ? element.nativeElement : element;
     }
     /** Removes the drop list functionality from the DOM element. */
     /**
@@ -1918,17 +2033,7 @@ DropListRef = /** @class */ (function () {
         }
         // @breaking-change 9.0.0 Remove check for _viewportRuler once it's marked as a required param.
         if (this._viewportRuler) {
-            this._viewportScrollPosition = this._viewportRuler.getViewportScrollPosition();
-            this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe((/**
-             * @return {?}
-             */
-            function () {
-                if (_this.isDragging()) {
-                    /** @type {?} */
-                    var newPosition = (/** @type {?} */ (_this._viewportRuler)).getViewportScrollPosition();
-                    _this._updateAfterScroll(_this._viewportScrollPosition, newPosition.top, newPosition.left, _this._clientRect);
-                }
-            }));
+            this._listenToScrollEvents();
         }
     };
     /**
@@ -2334,6 +2439,7 @@ DropListRef = /** @class */ (function () {
      * @return {?}
      */
     function (pointerX, pointerY) {
+        var _a;
         if (this.autoScrollDisabled) {
             return;
         }
@@ -2343,29 +2449,25 @@ DropListRef = /** @class */ (function () {
         var verticalScrollDirection = 0 /* NONE */;
         /** @type {?} */
         var horizontalScrollDirection = 0 /* NONE */;
+        // Check whether we should start scrolling the container.
+        if (this._isPointerNearDropContainer(pointerX, pointerY)) {
+            /** @type {?} */
+            var element = coercion.coerceElement(this.element);
+            _a = getElementScrollDirections(element, this._clientRect, pointerX, pointerY), verticalScrollDirection = _a[0], horizontalScrollDirection = _a[1];
+            if (verticalScrollDirection || horizontalScrollDirection) {
+                scrollNode = element;
+            }
+        }
         // @breaking-change 9.0.0 Remove null check for _viewportRuler once it's a required parameter.
-        // Check whether we're in range to scroll the viewport.
-        if (this._viewportRuler) {
-            var _a = this._viewportRuler.getViewportSize(), width = _a.width, height = _a.height;
+        // Otherwise check if we can start scrolling the viewport.
+        if (this._viewportRuler && !verticalScrollDirection && !horizontalScrollDirection) {
+            var _b = this._viewportRuler.getViewportSize(), width = _b.width, height = _b.height;
             /** @type {?} */
             var clientRect = { width: width, height: height, top: 0, right: width, bottom: height, left: 0 };
             verticalScrollDirection = getVerticalScrollDirection(clientRect, pointerY);
             horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
             scrollNode = window;
         }
-        // If we couldn't find a scroll direction based on the
-        // window, try with the container, if the pointer is close by.
-        if (!verticalScrollDirection && !horizontalScrollDirection &&
-            this._isPointerNearDropContainer(pointerX, pointerY)) {
-            verticalScrollDirection = getVerticalScrollDirection(this._clientRect, pointerY);
-            horizontalScrollDirection = getHorizontalScrollDirection(this._clientRect, pointerX);
-            scrollNode = coercion.coerceElement(this.element);
-        }
-        // TODO(crisbeto): we also need to account for whether the view or element are scrollable in
-        // the first place. With the current approach we'll still try to scroll them, but it just
-        // won't do anything. The only case where this is relevant is that if we have a scrollable
-        // list close to the viewport edge where the viewport isn't scrollable. In this case the
-        // we'll be trying to scroll the viewport rather than the list.
         if (scrollNode && (verticalScrollDirection !== this._verticalScrollDirection ||
             horizontalScrollDirection !== this._horizontalScrollDirection ||
             scrollNode !== this._scrollNode)) {
@@ -2828,7 +2930,7 @@ DropListRef = /** @class */ (function () {
             return false;
         }
         /** @type {?} */
-        var elementFromPoint = (/** @type {?} */ (this._document.elementFromPoint(x, y)));
+        var elementFromPoint = (/** @type {?} */ (this._shadowRoot.elementFromPoint(x, y)));
         // If there's no element at the pointer position, then
         // the client rect is probably scrolled out of the view.
         if (!elementFromPoint) {
@@ -2864,6 +2966,7 @@ DropListRef = /** @class */ (function () {
         if (!activeSiblings.has(sibling)) {
             activeSiblings.add(sibling);
             this._cacheOwnPosition();
+            this._listenToScrollEvents();
         }
     };
     /**
@@ -2882,6 +2985,40 @@ DropListRef = /** @class */ (function () {
      */
     function (sibling) {
         this._activeSiblings.delete(sibling);
+        this._viewportScrollSubscription.unsubscribe();
+    };
+    /**
+     * Starts listening to scroll events on the viewport.
+     * Used for updating the internal state of the list.
+     */
+    /**
+     * Starts listening to scroll events on the viewport.
+     * Used for updating the internal state of the list.
+     * @private
+     * @return {?}
+     */
+    DropListRef.prototype._listenToScrollEvents = /**
+     * Starts listening to scroll events on the viewport.
+     * Used for updating the internal state of the list.
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this._viewportScrollPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
+        this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe((/**
+         * @return {?}
+         */
+        function () {
+            if (_this.isDragging()) {
+                /** @type {?} */
+                var newPosition = (/** @type {?} */ (_this._viewportRuler)).getViewportScrollPosition();
+                _this._updateAfterScroll(_this._viewportScrollPosition, newPosition.top, newPosition.left, _this._clientRect);
+            }
+            else if (_this.isReceiving()) {
+                _this._cacheOwnPosition();
+            }
+        }));
     };
     return DropListRef;
 }());
@@ -3012,6 +3149,69 @@ function getHorizontalScrollDirection(clientRect, pointerX) {
     }
     return 0 /* NONE */;
 }
+/**
+ * Gets the directions in which an element node should be scrolled,
+ * assuming that the user's pointer is already within it scrollable region.
+ * @param {?} element Element for which we should calculate the scroll direction.
+ * @param {?} clientRect Bounding client rectangle of the element.
+ * @param {?} pointerX Position of the user's pointer along the x axis.
+ * @param {?} pointerY Position of the user's pointer along the y axis.
+ * @return {?}
+ */
+function getElementScrollDirections(element, clientRect, pointerX, pointerY) {
+    /** @type {?} */
+    var computedVertical = getVerticalScrollDirection(clientRect, pointerY);
+    /** @type {?} */
+    var computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX);
+    /** @type {?} */
+    var verticalScrollDirection = 0 /* NONE */;
+    /** @type {?} */
+    var horizontalScrollDirection = 0 /* NONE */;
+    // Note that we here we do some extra checks for whether the element is actually scrollable in
+    // a certain direction and we only assign the scroll direction if it is. We do this so that we
+    // can allow other elements to be scrolled, if the current element can't be scrolled anymore.
+    // This allows us to handle cases where the scroll regions of two scrollable elements overlap.
+    if (computedVertical) {
+        /** @type {?} */
+        var scrollTop = element.scrollTop;
+        if (computedVertical === 1 /* UP */) {
+            if (scrollTop > 0) {
+                verticalScrollDirection = 1 /* UP */;
+            }
+        }
+        else if (element.scrollHeight - scrollTop > element.clientHeight) {
+            verticalScrollDirection = 2 /* DOWN */;
+        }
+    }
+    if (computedHorizontal) {
+        /** @type {?} */
+        var scrollLeft = element.scrollLeft;
+        if (computedHorizontal === 1 /* LEFT */) {
+            if (scrollLeft > 0) {
+                horizontalScrollDirection = 1 /* LEFT */;
+            }
+        }
+        else if (element.scrollWidth - scrollLeft > element.clientWidth) {
+            horizontalScrollDirection = 2 /* RIGHT */;
+        }
+    }
+    return [verticalScrollDirection, horizontalScrollDirection];
+}
+/**
+ * Gets the shadow root of an element, if any.
+ * @param {?} element
+ * @return {?}
+ */
+function getShadowRoot(element) {
+    if (platform._supportsShadowDom()) {
+        /** @type {?} */
+        var rootNode = element.getRootNode ? element.getRootNode() : null;
+        if (rootNode instanceof ShadowRoot) {
+            return rootNode;
+        }
+    }
+    return null;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -3218,7 +3418,10 @@ var DragDropRegistry = /** @class */ (function () {
                  * @param {?} e
                  * @return {?}
                  */
-                function (e) { return _this.scroll.next(e); })
+                function (e) { return _this.scroll.next(e); }),
+                // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't
+                // the document. See https://github.com/angular/components/issues/17144.
+                options: true
             })
                 // Preventing the default action on `mousemove` isn't enough to disable text selection
                 // on Safari so we need to prevent the selection event as well. Alternatively this can