@angular/cdk 9.1.3 → 9.2.2

package/fesm2015/drag-drop.js

@@ -1,10 +1,10 @@
 import { Injectable, NgZone, Inject, ɵɵdefineInjectable, ɵɵinject, InjectionToken, Directive, ElementRef, Optional, Input, TemplateRef, EventEmitter, isDevMode, SkipSelf, ViewContainerRef, ChangeDetectorRef, ContentChildren, ContentChild, Output, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { ViewportRuler, ScrollDispatcher } from '@angular/cdk/scrolling';
+import { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from '@angular/cdk/scrolling';
 import { normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
 import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
 import { Subject, Subscription, interval, animationFrameScheduler, Observable, merge } from 'rxjs';
-import { startWith, takeUntil, map, take, tap, switchMap } from 'rxjs/operators';
+import { takeUntil, map, take, startWith, tap, switchMap } from 'rxjs/operators';
 import { Directionality } from '@angular/cdk/bidi';
 
 /**
@@ -137,6 +137,214 @@ function parseCssPropertyValue(computedStyle, name) {
     part => part.trim()));
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: src/cdk/drag-drop/client-rect.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @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`.
+ * @param {?} element
+ * @return {?}
+ */
+function getMutableClientRect(element) {
+    /** @type {?} */
+    const 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.
+ * @return {?}
+ */
+function isInsideClientRect(clientRect, x, y) {
+    const { top, bottom, left, right } = clientRect;
+    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.
+ * @return {?}
+ */
+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.
+ * @return {?}
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    /** @type {?} */
+    const xThreshold = width * threshold;
+    /** @type {?} */
+    const yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+        pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: src/cdk/drag-drop/parent-position-tracker.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * Object holding the scroll position of something.
+ * @record
+ */
+function ScrollPosition() { }
+if (false) {
+    /** @type {?} */
+    ScrollPosition.prototype.top;
+    /** @type {?} */
+    ScrollPosition.prototype.left;
+}
+/**
+ * Keeps track of the scroll position and dimensions of the parents of an element.
+ */
+class ParentPositionTracker {
+    /**
+     * @param {?} _document
+     * @param {?} _viewportRuler
+     */
+    constructor(_document, _viewportRuler) {
+        this._document = _document;
+        this._viewportRuler = _viewportRuler;
+        /**
+         * Cached positions of the scrollable parent elements.
+         */
+        this.positions = new Map();
+    }
+    /**
+     * Clears the cached positions.
+     * @return {?}
+     */
+    clear() {
+        this.positions.clear();
+    }
+    /**
+     * Caches the positions. Should be called at the beginning of a drag sequence.
+     * @param {?} elements
+     * @return {?}
+     */
+    cache(elements) {
+        this.clear();
+        this.positions.set(this._document, {
+            scrollPosition: this._viewportRuler.getViewportScrollPosition(),
+        });
+        elements.forEach((/**
+         * @param {?} element
+         * @return {?}
+         */
+        element => {
+            this.positions.set(element, {
+                scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
+                clientRect: getMutableClientRect(element)
+            });
+        }));
+    }
+    /**
+     * Handles scrolling while a drag is taking place.
+     * @param {?} event
+     * @return {?}
+     */
+    handleScroll(event) {
+        /** @type {?} */
+        const target = (/** @type {?} */ (event.target));
+        /** @type {?} */
+        const cachedPosition = this.positions.get(target);
+        if (!cachedPosition) {
+            return null;
+        }
+        // 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`.
+        /** @type {?} */
+        const scrolledParentNode = target === this._document ? target.documentElement : target;
+        /** @type {?} */
+        const scrollPosition = cachedPosition.scrollPosition;
+        /** @type {?} */
+        let newTop;
+        /** @type {?} */
+        let newLeft;
+        if (target === this._document) {
+            /** @type {?} */
+            const viewportScrollPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
+            newTop = viewportScrollPosition.top;
+            newLeft = viewportScrollPosition.left;
+        }
+        else {
+            newTop = ((/** @type {?} */ (target))).scrollTop;
+            newLeft = ((/** @type {?} */ (target))).scrollLeft;
+        }
+        /** @type {?} */
+        const topDifference = scrollPosition.top - newTop;
+        /** @type {?} */
+        const leftDifference = scrollPosition.left - newLeft;
+        // Go through and update the cached positions of the scroll
+        // parents that are inside the element that was scrolled.
+        this.positions.forEach((/**
+         * @param {?} position
+         * @param {?} node
+         * @return {?}
+         */
+        (position, node) => {
+            if (position.clientRect && target !== node && scrolledParentNode.contains(node)) {
+                adjustClientRect(position.clientRect, topDifference, leftDifference);
+            }
+        }));
+        scrollPosition.top = newTop;
+        scrollPosition.left = newLeft;
+        return { top: topDifference, left: leftDifference };
+    }
+}
+if (false) {
+    /**
+     * Cached positions of the scrollable parent elements.
+     * @type {?}
+     */
+    ParentPositionTracker.prototype.positions;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParentPositionTracker.prototype._document;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParentPositionTracker.prototype._viewportRuler;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: src/cdk/drag-drop/drag-ref.ts
@@ -160,6 +368,11 @@ if (false) {
      * @type {?}
      */
     DragRefConfig.prototype.pointerDirectionChangeThreshold;
+    /**
+     * `z-index` for the absolutely-positioned elements that are created by the drag item.
+     * @type {?|undefined}
+     */
+    DragRefConfig.prototype.zIndex;
 }
 /**
  * Options that can be used to bind a passive event listener.
@@ -370,9 +583,9 @@ class DragRef {
             // 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();
+            /** @type {?} */
+            const pointerPosition = this._getPointerPositionOnPage(event);
             if (!this._hasStartedDragging) {
-                /** @type {?} */
-                const pointerPosition = this._getPointerPositionOnPage(event);
                 /** @type {?} */
                 const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);
                 /** @type {?} */
@@ -412,7 +625,7 @@ class DragRef {
                 }
             }
             /** @type {?} */
-            const constrainedPointerPosition = this._getConstrainedPointerPosition(event);
+            const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition);
             this._hasMoved = true;
             this._updatePointerDirectionDelta(constrainedPointerPosition);
             if (this._dropContainer) {
@@ -462,6 +675,7 @@ class DragRef {
             this._endDragSequence(event);
         });
         this.withRootElement(element);
+        this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
         _dragDropRegistry.registerDragItem(this);
     }
     /**
@@ -565,8 +779,13 @@ class DragRef {
             if ((/** @type {?} */ (this))._rootElement) {
                 (/** @type {?} */ (this))._removeRootElementListeners((/** @type {?} */ (this))._rootElement);
             }
-            element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
-            element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
+            (/** @type {?} */ (this))._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => {
+                element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
+                element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
+            }));
             (/** @type {?} */ (this))._initialTransform = undefined;
             (/** @type {?} */ (this))._rootElement = element;
         }
@@ -622,6 +841,7 @@ class DragRef {
         this._disabledHandles.clear();
         this._dropContainer = undefined;
         this._resizeSubscription.unsubscribe();
+        this._parentPositions.clear();
         this._boundaryElement = this._rootElement = this._placeholderTemplate =
             this._previewTemplate = this._anchor = (/** @type {?} */ (null));
     }
@@ -711,7 +931,7 @@ class DragRef {
         /** @type {?} */
         const position = this._pointerPositionAtLastDirectionChange;
         if (position && this._dropContainer) {
-            this._updateActiveDropContainer(position);
+            this._updateActiveDropContainer(this._getConstrainedPointerPosition(position));
         }
     }
     /**
@@ -820,7 +1040,9 @@ class DragRef {
             this._lastTouchEventTime = Date.now();
         }
         this._toggleNativeDragInteractions();
-        if (this._dropContainer) {
+        /** @type {?} */
+        const dropContainer = this._dropContainer;
+        if (dropContainer) {
             /** @type {?} */
             const element = this._rootElement;
             /** @type {?} */
@@ -839,13 +1061,16 @@ class DragRef {
             element.style.display = 'none';
             this._document.body.appendChild(parent.replaceChild(placeholder, element));
             getPreviewInsertionPoint(this._document).appendChild(preview);
-            this._dropContainer.start();
-            this._initialContainer = this._dropContainer;
-            this._initialIndex = this._dropContainer.getItemIndex(this);
+            dropContainer.start();
+            this._initialContainer = dropContainer;
+            this._initialIndex = dropContainer.getItemIndex(this);
         }
         else {
             this._initialContainer = this._initialIndex = (/** @type {?} */ (undefined));
         }
+        // Important to run after we've called `start` on the parent container
+        // so that it has had time to resolve its scrollable parents.
+        this._parentPositions.cache(dropContainer ? dropContainer.getScrollableParents() : []);
     }
     /**
      * Sets up the different variables and subscriptions
@@ -897,14 +1122,15 @@ class DragRef {
         this._removeSubscriptions();
         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((/**
+        this._scrollSubscription = this._dragDropRegistry.scroll.subscribe((/**
+         * @param {?} scrollEvent
          * @return {?}
          */
-        () => {
-            this._scrollPosition = this._viewportRuler.getViewportScrollPosition();
+        scrollEvent => {
+            this._updateOnScroll(scrollEvent);
         }));
         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
@@ -1026,14 +1252,18 @@ class DragRef {
         const previewTemplate = previewConfig ? previewConfig.template : null;
         /** @type {?} */
         let preview;
-        if (previewTemplate) {
+        if (previewTemplate && previewConfig) {
+            // Measure the element before we've inserted the preview
+            // since the insertion could throw off the measurement.
+            /** @type {?} */
+            const rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
             /** @type {?} */
-            const viewRef = (/** @type {?} */ (previewConfig)).viewContainer.createEmbeddedView(previewTemplate, (/** @type {?} */ (previewConfig)).context);
+            const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
             viewRef.detectChanges();
             preview = getRootNode(viewRef, this._document);
             this._previewRef = viewRef;
-            if ((/** @type {?} */ (previewConfig)).matchSize) {
-                matchElementSize(preview, this._rootElement);
+            if (previewConfig.matchSize) {
+                matchElementSize(preview, (/** @type {?} */ (rootRect)));
             }
             else {
                 preview.style.transform =
@@ -1044,7 +1274,7 @@ class DragRef {
             /** @type {?} */
             const element = this._rootElement;
             preview = deepCloneNode(element);
-            matchElementSize(preview, element);
+            matchElementSize(preview, element.getBoundingClientRect());
         }
         extendStyles(preview.style, {
             // It's important that we disable the pointer events on the preview, because
@@ -1055,7 +1285,7 @@ class DragRef {
             position: 'fixed',
             top: '0',
             left: '0',
-            zIndex: '1000'
+            zIndex: `${this._config.zIndex || 1000}`
         });
         toggleNativeDragInteractions(preview, false);
         preview.classList.add('cdk-drag-preview');
@@ -1169,9 +1399,11 @@ class DragRef {
         /** @type {?} */
         const point = isTouchEvent(event) ? event.targetTouches[0] : event;
         /** @type {?} */
-        const x = point.pageX - referenceRect.left - this._scrollPosition.left;
+        const scrollPosition = this._getViewportScrollPosition();
         /** @type {?} */
-        const y = point.pageY - referenceRect.top - this._scrollPosition.top;
+        const x = point.pageX - referenceRect.left - scrollPosition.left;
+        /** @type {?} */
+        const y = point.pageY - referenceRect.top - scrollPosition.top;
         return {
             x: referenceRect.left - elementRect.left + x,
             y: referenceRect.top - elementRect.top + y
@@ -1187,20 +1419,20 @@ class DragRef {
         // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
         /** @type {?} */
         const point = isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
+        /** @type {?} */
+        const scrollPosition = this._getViewportScrollPosition();
         return {
-            x: point.pageX - this._scrollPosition.left,
-            y: point.pageY - this._scrollPosition.top
+            x: point.pageX - scrollPosition.left,
+            y: point.pageY - scrollPosition.top
         };
     }
     /**
      * Gets the pointer position on the page, accounting for any position constraints.
      * @private
-     * @param {?} event
+     * @param {?} point
      * @return {?}
      */
-    _getConstrainedPointerPosition(event) {
-        /** @type {?} */
-        const point = this._getPointerPositionOnPage(event);
+    _getConstrainedPointerPosition(point) {
         /** @type {?} */
         const constrainedPoint = this.constrainPosition ? this.constrainPosition(point, this) : point;
         /** @type {?} */
@@ -1329,6 +1561,7 @@ class DragRef {
      */
     _cleanupCachedDimensions() {
         this._boundaryRect = this._previewRect = undefined;
+        this._parentPositions.clear();
     }
     /**
      * Checks whether the element is still inside its boundary after the viewport has been resized.
@@ -1406,6 +1639,32 @@ class DragRef {
         }
         return value ? value.mouse : 0;
     }
+    /**
+     * Updates the internal state of the draggable element when scrolling has occurred.
+     * @private
+     * @param {?} event
+     * @return {?}
+     */
+    _updateOnScroll(event) {
+        /** @type {?} */
+        const scrollDifference = this._parentPositions.handleScroll(event);
+        // 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 (this._boundaryRect && scrollDifference) {
+            adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
+        }
+    }
+    /**
+     * Gets the scroll position of the viewport.
+     * @private
+     * @return {?}
+     */
+    _getViewportScrollPosition() {
+        /** @type {?} */
+        const cachedPosition = this._parentPositions.positions.get(this._document);
+        return cachedPosition ? cachedPosition.scrollPosition :
+            this._viewportRuler.getViewportScrollPosition();
+    }
 }
 if (false) {
     /**
@@ -1498,11 +1757,11 @@ if (false) {
      */
     DragRef.prototype._initialIndex;
     /**
-     * Cached scroll position on the page when the element was picked up.
+     * Cached positions of scrollable parent elements.
      * @type {?}
      * @private
      */
-    DragRef.prototype._scrollPosition;
+    DragRef.prototype._parentPositions;
     /**
      * Emits when the item is being moved.
      * @type {?}
@@ -1850,24 +2109,26 @@ function getPreviewInsertionPoint(documentRef) {
  */
 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;
+    const rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return (/** @type {?} */ (rootNodes[0]));
     }
-    return (/** @type {?} */ (rootNode));
+    /** @type {?} */
+    const wrapper = _document.createElement('div');
+    rootNodes.forEach((/**
+     * @param {?} node
+     * @return {?}
+     */
+    node => wrapper.appendChild(node)));
+    return wrapper;
 }
 /**
  * Matches the target element's size to the source's size.
  * @param {?} target Element that needs to be resized.
- * @param {?} source Element whose size needs to be matched.
+ * @param {?} sourceRect Dimensions of the source element.
  * @return {?}
  */
-function matchElementSize(target, source) {
-    /** @type {?} */
-    const sourceRect = source.getBoundingClientRect();
+function matchElementSize(target, sourceRect) {
     target.style.width = `${sourceRect.width}px`;
     target.style.height = `${sourceRect.height}px`;
     target.style.transform = getTransform(sourceRect.left, sourceRect.top);
@@ -2002,17 +2263,6 @@ if (false) {
      */
     CachedItemPosition.prototype.offset;
 }
-/**
- * Object holding the scroll position of something.
- * @record
- */
-function ScrollPosition() { }
-if (false) {
-    /** @type {?} */
-    ScrollPosition.prototype.top;
-    /** @type {?} */
-    ScrollPosition.prototype.left;
-}
 /** @enum {number} */
 const AutoScrollVerticalDirection = {
     NONE: 0, UP: 1, DOWN: 2,
@@ -2094,10 +2344,6 @@ class DropListRef {
          * Cache of the dimensions of all the items inside the container.
          */
         this._itemPositions = [];
-        /**
-         * Cached positions of the scrollable parent elements.
-         */
-        this._parentPositions = new Map();
         /**
          * Keeps track of the item that was last swapped with the dragged item, as
          * well as what direction the pointer was moving in when the swap occured.
@@ -2173,6 +2419,7 @@ class DropListRef {
         this._document = _document;
         this.withScrollableParents([this.element]);
         _dragDropRegistry.registerDropContainer(this);
+        this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
     }
     /**
      * Removes the drop list functionality from the DOM element.
@@ -2276,14 +2523,23 @@ class DropListRef {
             activeDraggables.splice(newIndex, 0, item);
         }
         else {
-            coerceElement(this.element).appendChild(placeholder);
-            activeDraggables.push(item);
+            /** @type {?} */
+            const element = coerceElement(this.element);
+            if (this._shouldEnterAsFirstChild(pointerX, pointerY)) {
+                element.insertBefore(placeholder, activeDraggables[0].getRootElement());
+                activeDraggables.unshift(item);
+            }
+            else {
+                element.appendChild(placeholder);
+                activeDraggables.push(item);
+            }
         }
         // The transform needs to be cleared so it doesn't throw off the measurements.
         placeholder.style.transform = '';
         // Note that the positions were already cached when we called `start` above,
-        // but we need to refresh them since the amount of items has changed.
+        // but we need to refresh them since the amount of items has changed and also parent rects.
         this._cacheItemPositions();
+        this._cacheParentPositions();
         this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) });
     }
     /**
@@ -2331,6 +2587,8 @@ class DropListRef {
      * @return {THIS}
      */
     withItems(items) {
+        /** @type {?} */
+        const previousItems = (/** @type {?} */ (this))._draggables;
         (/** @type {?} */ (this))._draggables = items;
         items.forEach((/**
          * @param {?} item
@@ -2338,7 +2596,24 @@ class DropListRef {
          */
         item => item._withDropContainer((/** @type {?} */ (this)))));
         if ((/** @type {?} */ (this)).isDragging()) {
-            (/** @type {?} */ (this))._cacheItems();
+            /** @type {?} */
+            const draggedItems = previousItems.filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            item => item.isDragging()));
+            // If all of the items being dragged were removed
+            // from the list, abort the current drag sequence.
+            if (draggedItems.every((/**
+             * @param {?} item
+             * @return {?}
+             */
+            item => items.indexOf(item) === -1))) {
+                (/** @type {?} */ (this))._reset();
+            }
+            else {
+                (/** @type {?} */ (this))._cacheItems();
+            }
         }
         return (/** @type {?} */ (this));
     }
@@ -2392,6 +2667,13 @@ class DropListRef {
             elements.indexOf(element) === -1 ? [element, ...elements] : elements.slice();
         return (/** @type {?} */ (this));
     }
+    /**
+     * Gets the scrollable parents that are registered with this drop container.
+     * @return {?}
+     */
+    getScrollableParents() {
+        return this._scrollableElements;
+    }
     /**
      * Figures out the index of an item in the container.
      * @param {?} item Item whose index should be determined.
@@ -2431,7 +2713,8 @@ class DropListRef {
      */
     _sortItem(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;
         }
         /** @type {?} */
@@ -2530,7 +2813,7 @@ class DropListRef {
         /** @type {?} */
         let horizontalScrollDirection = 0 /* NONE */;
         // Check whether we should start scrolling any of the parent containers.
-        this._parentPositions.forEach((/**
+        this._parentPositions.positions.forEach((/**
          * @param {?} position
          * @param {?} element
          * @return {?}
@@ -2541,7 +2824,7 @@ class DropListRef {
             if (element === this._document || !position.clientRect || scrollNode) {
                 return;
             }
-            if (isPointerNearClientRect(position.clientRect, pointerX, pointerY)) {
+            if (isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
                 [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections((/** @type {?} */ (element)), position.clientRect, pointerX, pointerY);
                 if (verticalScrollDirection || horizontalScrollDirection) {
                     scrollNode = (/** @type {?} */ (element));
@@ -2584,28 +2867,12 @@ class DropListRef {
      * @return {?}
      */
     _cacheParentPositions() {
-        this._parentPositions.clear();
-        this._parentPositions.set(this._document, {
-            scrollPosition: (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition(),
-        });
-        this._scrollableElements.forEach((/**
-         * @param {?} element
-         * @return {?}
-         */
-        element => {
-            /** @type {?} */
-            const clientRect = getMutableClientRect(element);
-            // We keep the ClientRect cached in two properties, because it's referenced in a lot of
-            // performance-sensitive places and we want to avoid the extra lookups. The `element` is
-            // guaranteed to always be in the `_scrollableElements` so this should always match.
-            if (element === this.element) {
-                this._clientRect = clientRect;
-            }
-            this._parentPositions.set(element, {
-                scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
-                clientRect
-            });
-        }));
+        /** @type {?} */
+        const element = coerceElement(this.element);
+        this._parentPositions.cache(this._scrollableElements);
+        // The list element is always in the `scrollableElements`
+        // so we can take advantage of the cached `ClientRect`.
+        this._clientRect = (/** @type {?} */ ((/** @type {?} */ (this._parentPositions.positions.get(element))).clientRect));
     }
     /**
      * Refreshes the position cache of the items and sibling containers.
@@ -2648,7 +2915,13 @@ class DropListRef {
          * @param {?} item
          * @return {?}
          */
-        item => item.getRootElement().style.transform = ''));
+        item => {
+            /** @type {?} */
+            const rootElement = item.getRootElement();
+            if (rootElement) {
+                rootElement.style.transform = '';
+            }
+        }));
         this._siblings.forEach((/**
          * @param {?} sibling
          * @return {?}
@@ -2718,6 +2991,36 @@ class DropListRef {
         }
         return itemOffset;
     }
+    /**
+     * Checks if pointer is entering in the first position
+     * @private
+     * @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 {?}
+     */
+    _shouldEnterAsFirstChild(pointerX, pointerY) {
+        if (!this._activeDraggables.length) {
+            return false;
+        }
+        /** @type {?} */
+        const itemPositions = this._itemPositions;
+        /** @type {?} */
+        const isHorizontal = this._orientation === 'horizontal';
+        // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index
+        // check if container is using some sort of "reverse" ordering (eg: flex-direction: row-reverse)
+        /** @type {?} */
+        const reversed = itemPositions[0].drag !== this._activeDraggables[0];
+        if (reversed) {
+            /** @type {?} */
+            const lastItemRect = itemPositions[itemPositions.length - 1].clientRect;
+            return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;
+        }
+        else {
+            /** @type {?} */
+            const firstItemRect = itemPositions[0].clientRect;
+            return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;
+        }
+    }
     /**
      * Gets the index of an item in the drop container, based on the position of the user's pointer.
      * @private
@@ -2754,8 +3057,8 @@ class DropListRef {
             return isHorizontal ?
                 // Round these down since most browsers report client rects with
                 // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
-                pointerX >= Math.floor(clientRect.left) && pointerX <= Math.floor(clientRect.right) :
-                pointerY >= Math.floor(clientRect.top) && pointerY <= Math.floor(clientRect.bottom);
+                pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right) :
+                pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);
         }));
     }
     /**
@@ -2768,64 +3071,6 @@ class DropListRef {
         this._cacheItemPositions();
         this._cacheParentPositions();
     }
-    /**
-     * Updates the internal state of the container after a scroll event has happened.
-     * @private
-     * @param {?} scrolledParent Element that was scrolled.
-     * @param {?} newTop New top scroll position.
-     * @param {?} newLeft New left scroll position.
-     * @return {?}
-     */
-    _updateAfterScroll(scrolledParent, newTop, newLeft) {
-        // 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`.
-        /** @type {?} */
-        const scrolledParentNode = scrolledParent === this._document ? scrolledParent.documentElement : scrolledParent;
-        /** @type {?} */
-        const scrollPosition = (/** @type {?} */ (this._parentPositions.get(scrolledParent))).scrollPosition;
-        /** @type {?} */
-        const topDifference = scrollPosition.top - newTop;
-        /** @type {?} */
-        const 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((/**
-         * @param {?} position
-         * @param {?} node
-         * @return {?}
-         */
-        (position, node) => {
-            if (position.clientRect && scrolledParent !== node && scrolledParentNode.contains(node)) {
-                adjustClientRect(position.clientRect, topDifference, leftDifference);
-            }
-        }));
-        // Since we know the amount that the user has scrolled we can shift all of the client rectangles
-        // ourselves. This is cheaper than re-measuring everything and we can avoid inconsistent
-        // behavior where we might be measuring the element before its position has changed.
-        this._itemPositions.forEach((/**
-         * @param {?} __0
-         * @return {?}
-         */
-        ({ clientRect }) => {
-            adjustClientRect(clientRect, topDifference, leftDifference);
-        }));
-        // We need two loops for this, because we want all of the cached
-        // positions to be up-to-date before we re-sort the item.
-        this._itemPositions.forEach((/**
-         * @param {?} __0
-         * @return {?}
-         */
-        ({ drag }) => {
-            if (this._dragDropRegistry.isDragging(drag)) {
-                // We need to re-sort the item manually, because the pointer move
-                // events won't be dispatched while the user is scrolling.
-                drag._sortFromLastPointerPosition();
-            }
-        }));
-        scrollPosition.top = newTop;
-        scrollPosition.left = newLeft;
-    }
     /**
      * Checks whether the user's pointer is positioned over the container.
      * @param {?} x Pointer position along the X axis.
@@ -2915,25 +3160,32 @@ class DropListRef {
         event => {
             if (this.isDragging()) {
                 /** @type {?} */
-                const target = (/** @type {?} */ (event.target));
-                /** @type {?} */
-                const position = this._parentPositions.get(target);
-                if (position) {
-                    /** @type {?} */
-                    let newTop;
-                    /** @type {?} */
-                    let newLeft;
-                    if (target === this._document) {
-                        /** @type {?} */
-                        const scrollPosition = (/** @type {?} */ (this._viewportRuler)).getViewportScrollPosition();
-                        newTop = scrollPosition.top;
-                        newLeft = scrollPosition.left;
-                    }
-                    else {
-                        newTop = ((/** @type {?} */ (target))).scrollTop;
-                        newLeft = ((/** @type {?} */ (target))).scrollLeft;
-                    }
-                    this._updateAfterScroll(target, newTop, newLeft);
+                const scrollDifference = this._parentPositions.handleScroll(event);
+                if (scrollDifference) {
+                    // Since we know the amount that the user has scrolled we can shift all of the
+                    // client rectangles ourselves. This is cheaper than re-measuring everything and
+                    // we can avoid inconsistent behavior where we might be measuring the element before
+                    // its position has changed.
+                    this._itemPositions.forEach((/**
+                     * @param {?} __0
+                     * @return {?}
+                     */
+                    ({ clientRect }) => {
+                        adjustClientRect(clientRect, scrollDifference.top, scrollDifference.left);
+                    }));
+                    // We need two loops for this, because we want all of the cached
+                    // positions to be up-to-date before we re-sort the item.
+                    this._itemPositions.forEach((/**
+                     * @param {?} __0
+                     * @return {?}
+                     */
+                    ({ drag }) => {
+                        if (this._dragDropRegistry.isDragging(drag)) {
+                            // We need to re-sort the item manually, because the pointer move
+                            // events won't be dispatched while the user is scrolling.
+                            drag._sortFromLastPointerPosition();
+                        }
+                    }));
                 }
             }
             else if (this.isReceiving()) {
@@ -3035,7 +3287,7 @@ if (false) {
      */
     DropListRef.prototype._itemPositions;
     /**
-     * Cached positions of the scrollable parent elements.
+     * Keeps track of the positions of any parent scrollable elements.
      * @type {?}
      * @private
      */
@@ -3167,35 +3419,6 @@ if (false) {
      */
     DropListRef.prototype._viewportRuler;
 }
-/**
- * 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.
- * @return {?}
- */
-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.
- * @return {?}
- */
-function isPointerNearClientRect(rect, pointerX, pointerY) {
-    const { top, right, bottom, left, width, height } = rect;
-    /** @type {?} */
-    const xThreshold = width * DROP_PROXIMITY_THRESHOLD;
-    /** @type {?} */
-    const 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.
@@ -3212,38 +3435,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.
- * @return {?}
- */
-function isInsideClientRect(clientRect, x, y) {
-    const { top, bottom, left, right } = clientRect;
-    return y >= top && y <= bottom && x >= left && x <= right;
-}
-/**
- * Gets a mutable version of an element's bounding `ClientRect`.
- * @param {?} element
- * @return {?}
- */
-function getMutableClientRect(element) {
-    /** @type {?} */
-    const 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.
@@ -4201,6 +4392,8 @@ if (false) {
     DragDropConfig.prototype.listAutoScrollDisabled;
     /** @type {?|undefined} */
     DragDropConfig.prototype.listOrientation;
+    /** @type {?|undefined} */
+    DragDropConfig.prototype.zIndex;
 }
 /**
  * @deprecated No longer being used. To be removed.
@@ -4304,7 +4497,8 @@ class CdkDrag {
             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) {
@@ -5051,23 +5245,6 @@ class CdkDropList {
         // the user in a disabled state, so we also need to sync it as it's being set.
         this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
     }
-    /**
-     * @return {?}
-     */
-    ngAfterContentInit() {
-        // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
-        if (this._scrollDispatcher) {
-            /** @type {?} */
-            const scrollableParents = this._scrollDispatcher
-                .getAncestorScrollContainers(this.element)
-                .map((/**
-             * @param {?} scrollable
-             * @return {?}
-             */
-            scrollable => scrollable.getElementRef().nativeElement));
-            this._dropListRef.withScrollableParents(scrollableParents);
-        }
-    }
     /**
      * Registers an items with the drop list.
      * @param {?} item
@@ -5226,6 +5403,23 @@ class CdkDropList {
                     }
                 }));
             }
+            // 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) {
+                /** @type {?} */
+                const scrollableParents = this._scrollDispatcher
+                    .getAncestorScrollContainers(this.element)
+                    .map((/**
+                 * @param {?} scrollable
+                 * @return {?}
+                 */
+                scrollable => 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);
@@ -5405,6 +5599,12 @@ if (false) {
      * @private
      */
     CdkDropList.prototype._destroyed;
+    /**
+     * Whether the element's scrollable parents have been resolved.
+     * @type {?}
+     * @private
+     */
+    CdkDropList.prototype._scrollableParentsResolved;
     /**
      * Reference to the underlying drop list instance.
      * @type {?}
@@ -5537,6 +5737,7 @@ DragDropModule.decorators = [
                     CdkDragPlaceholder,
                 ],
                 exports: [
+                    CdkScrollableModule,
                     CdkDropList,
                     CdkDropListGroup,
                     CdkDrag,