@angular/cdk 8.1.4 → 8.2.3

package/esm2015/cdk.js

@@ -15,7 +15,7 @@ import { Version } from '@angular/core';
  * Current version of the Angular Component Development Kit.
  * @type {?}
  */
-const VERSION = new Version('8.1.4');
+const VERSION = new Version('8.2.3');
 
 /**
  * @fileoverview added by tsickle

package/esm2015/cdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.js","sources":["../../src/cdk/version.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('8.1.4');\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAWA,AAAA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;;"}
+{"version":3,"file":"cdk.js","sources":["../../src/cdk/version.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('8.2.3');\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAWA,AAAA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;;"}

package/esm2015/drag-drop.js

@@ -5,11 +5,11 @@
  * 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
  */
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
+import { normalizePassiveListenerOptions, _supportsShadowDom } from '@angular/cdk/platform';
 import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
 import { Subscription, Subject, interval, animationFrameScheduler, Observable, merge } from 'rxjs';
 import { startWith, takeUntil, take, map, switchMap, tap } from 'rxjs/operators';
-import { ElementRef, Injectable, NgZone, Inject, InjectionToken, NgModule, ContentChildren, EventEmitter, forwardRef, Input, Output, Optional, Directive, ChangeDetectorRef, SkipSelf, ContentChild, ViewContainerRef, isDevMode, TemplateRef, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
+import { Injectable, NgZone, Inject, InjectionToken, NgModule, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, Optional, Directive, ChangeDetectorRef, SkipSelf, ContentChild, ViewContainerRef, isDevMode, TemplateRef, ɵɵdefineInjectable, ɵɵinject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { Directionality } from '@angular/cdk/bidi';
@@ -28,7 +28,7 @@ import { Directionality } from '@angular/cdk/bidi';
 function extendStyles(dest, source) {
     for (let key in source) {
         if (source.hasOwnProperty(key)) {
-            dest[(/** @type {?} */ (key))] = source[(/** @type {?} */ (key))];
+            dest[key] = (/** @type {?} */ (source[key]));
         }
     }
     return dest;
@@ -186,6 +186,10 @@ class DragRef {
          * Subscription to the viewport being scrolled.
          */
         this._scrollSubscription = Subscription.EMPTY;
+        /**
+         * Subscription to the viewport being resized.
+         */
+        this._resizeSubscription = Subscription.EMPTY;
         /**
          * Cached reference to the boundary element.
          */
@@ -486,6 +490,15 @@ class DragRef {
      */
     withBoundaryElement(boundaryElement) {
         (/** @type {?} */ (this))._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null;
+        (/** @type {?} */ (this))._resizeSubscription.unsubscribe();
+        if (boundaryElement) {
+            (/** @type {?} */ (this))._resizeSubscription = (/** @type {?} */ (this))._viewportRuler
+                .change(10)
+                .subscribe((/**
+             * @return {?}
+             */
+            () => (/** @type {?} */ (this))._containInsideBoundaryOnResize()));
+        }
         return (/** @type {?} */ (this));
     }
     /**
@@ -662,6 +675,7 @@ class DragRef {
         }
         this._removeSubscriptions();
         this._dragDropRegistry.stopDragging(this);
+        this._toggleNativeDragInteractions();
         if (this._handles) {
             this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
         }
@@ -677,6 +691,7 @@ class DragRef {
              */
             () => {
                 this._cleanupDragArtifacts(event);
+                this._cleanupCachedDimensions();
                 this._dragDropRegistry.stopDragging(this);
             }));
         }
@@ -695,6 +710,7 @@ class DragRef {
                     distance: this._getDragDistance(this._getPointerPositionOnPage(event))
                 });
             }));
+            this._cleanupCachedDimensions();
             this._dragDropRegistry.stopDragging(this);
         }
     }
@@ -863,7 +879,7 @@ class DragRef {
         // Drop container that draggable has been moved into.
         /** @type {?} */
         let 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.
@@ -910,7 +926,7 @@ class DragRef {
         if (previewTemplate) {
             /** @type {?} */
             const 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);
@@ -929,6 +945,8 @@ class DragRef {
             // 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',
@@ -1008,7 +1026,7 @@ class DragRef {
         let 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);
@@ -1186,6 +1204,67 @@ class DragRef {
         }
         return { x: 0, y: 0 };
     }
+    /**
+     * Cleans up any cached element dimensions that we don't need after dragging has stopped.
+     * @private
+     * @return {?}
+     */
+    _cleanupCachedDimensions() {
+        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.
+     * @private
+     * @return {?}
+     */
+    _containInsideBoundaryOnResize() {
+        let { x, y } = this._passiveTransform;
+        if ((x === 0 && y === 0) || this.isDragging() || !this._boundaryElement) {
+            return;
+        }
+        /** @type {?} */
+        const boundaryRect = this._boundaryElement.getBoundingClientRect();
+        /** @type {?} */
+        const elementRect = this._rootElement.getBoundingClientRect();
+        /** @type {?} */
+        const leftOverflow = boundaryRect.left - elementRect.left;
+        /** @type {?} */
+        const rightOverflow = elementRect.right - boundaryRect.right;
+        /** @type {?} */
+        const topOverflow = boundaryRect.top - elementRect.top;
+        /** @type {?} */
+        const 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, x });
+        }
+    }
 }
 /**
  * Gets a 3d `transform` that can be applied to an element.
@@ -1276,6 +1355,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 {?} */
+    const rootNode = viewRef.rootNodes[0];
+    if (rootNode.nodeType !== _document.ELEMENT_NODE) {
+        /** @type {?} */
+        const wrapper = _document.createElement('div');
+        wrapper.appendChild(rootNode);
+        return wrapper;
+    }
+    return (/** @type {?} */ (rootNode));
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1410,7 +1507,7 @@ class DropListRef {
         /**
          * 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.
@@ -1542,9 +1639,10 @@ class DropListRef {
                 }
             }));
         });
+        /** @type {?} */
+        const nativeNode = this.element = coerceElement(element);
+        this._shadowRoot = getShadowRoot(nativeNode) || _document;
         _dragDropRegistry.registerDropContainer(this);
-        this._document = _document;
-        this.element = element instanceof ElementRef ? element.nativeElement : element;
     }
     /**
      * Removes the drop list functionality from the DOM element.
@@ -1598,17 +1696,7 @@ class DropListRef {
         }
         // @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 {?}
-             */
-            () => {
-                if (this.isDragging()) {
-                    /** @type {?} */
-                    const newPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
-                    this._updateAfterScroll(this._viewportScrollPosition, newPosition.top, newPosition.left, this._clientRect);
-                }
-            }));
+            this._listenToScrollEvents();
         }
     }
     /**
@@ -1889,9 +1977,19 @@ class DropListRef {
         let verticalScrollDirection = 0 /* NONE */;
         /** @type {?} */
         let horizontalScrollDirection = 0 /* NONE */;
+        // Check whether we should start scrolling the container.
+        if (this._isPointerNearDropContainer(pointerX, pointerY)) {
+            /** @type {?} */
+            const element = coerceElement(this.element);
+            [verticalScrollDirection, horizontalScrollDirection] =
+                getElementScrollDirections(element, this._clientRect, pointerX, pointerY);
+            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) {
+        // Otherwise check if we can start scrolling the viewport.
+        if (this._viewportRuler && !verticalScrollDirection && !horizontalScrollDirection) {
             const { width, height } = this._viewportRuler.getViewportSize();
             /** @type {?} */
             const clientRect = { width, height, top: 0, right: width, bottom: height, left: 0 };
@@ -1899,19 +1997,6 @@ class DropListRef {
             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 = 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)) {
@@ -2217,7 +2302,7 @@ class DropListRef {
             return false;
         }
         /** @type {?} */
-        const elementFromPoint = (/** @type {?} */ (this._document.elementFromPoint(x, y)));
+        const 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) {
@@ -2244,6 +2329,7 @@ class DropListRef {
         if (!activeSiblings.has(sibling)) {
             activeSiblings.add(sibling);
             this._cacheOwnPosition();
+            this._listenToScrollEvents();
         }
     }
     /**
@@ -2253,6 +2339,29 @@ class DropListRef {
      */
     _stopReceiving(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.
+     * @private
+     * @return {?}
+     */
+    _listenToScrollEvents() {
+        this._viewportScrollPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
+        this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            if (this.isDragging()) {
+                /** @type {?} */
+                const newPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
+                this._updateAfterScroll(this._viewportScrollPosition, newPosition.top, newPosition.left, this._clientRect);
+            }
+            else if (this.isReceiving()) {
+                this._cacheOwnPosition();
+            }
+        }));
     }
 }
 /**
@@ -2382,6 +2491,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 {?} */
+    const computedVertical = getVerticalScrollDirection(clientRect, pointerY);
+    /** @type {?} */
+    const computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX);
+    /** @type {?} */
+    let verticalScrollDirection = 0 /* NONE */;
+    /** @type {?} */
+    let 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 {?} */
+        const 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 {?} */
+        const 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 (_supportsShadowDom()) {
+        /** @type {?} */
+        const rootNode = element.getRootNode ? element.getRootNode() : null;
+        if (rootNode instanceof ShadowRoot) {
+            return rootNode;
+        }
+    }
+    return null;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -2554,7 +2726,10 @@ class DragDropRegistry {
                  * @param {?} e
                  * @return {?}
                  */
-                (e) => this.scroll.next(e))
+                (e) => 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