@angular/cdk 8.0.0-beta.2 → 8.0.0

package/esm2015/drag-drop.js

@@ -8,7 +8,7 @@
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
 import { Subscription, Subject, Observable, merge } from 'rxjs';
-import { ElementRef, Injectable, NgZone, Inject, InjectionToken, NgModule, ContentChildren, EventEmitter, forwardRef, Input, Output, Optional, Directive, ChangeDetectorRef, SkipSelf, ContentChild, ViewContainerRef, TemplateRef, defineInjectable, inject } from '@angular/core';
+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 { DOCUMENT } from '@angular/common';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { Directionality } from '@angular/cdk/bidi';
@@ -16,7 +16,7 @@ import { startWith, take, map, takeUntil, switchMap, tap } from 'rxjs/operators'
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Shallow-extends a stylesheet object with another stylesheet object.
@@ -56,7 +56,7 @@ function toggleNativeDragInteractions(element, enable) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
@@ -81,7 +81,11 @@ function getTransformTransitionDurationInMs(element) {
     /** @type {?} */
     const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
     /** @type {?} */
-    const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');
+    const property = transitionedProperties.find((/**
+     * @param {?} prop
+     * @return {?}
+     */
+    prop => prop === 'transform' || prop === 'all'));
     // If there's no transition for `all` or `transform`, we shouldn't do anything.
     if (!property) {
         return 0;
@@ -106,12 +110,16 @@ function getTransformTransitionDurationInMs(element) {
 function parseCssPropertyValue(computedStyle, name) {
     /** @type {?} */
     const value = computedStyle.getPropertyValue(name);
-    return value.split(',').map(part => part.trim());
+    return value.split(',').map((/**
+     * @param {?} part
+     * @return {?}
+     */
+    part => part.trim()));
 }
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Options that can be used to bind a passive event listener.
@@ -166,11 +174,6 @@ class DragRef {
          * Emits when the item is being moved.
          */
         this._moveEvents = new Subject();
-        /**
-         * Amount of subscriptions to the move event. Used to avoid
-         * hitting the zone if the consumer didn't subscribe to it.
-         */
-        this._moveEventSubscriptions = 0;
         /**
          * Subscription to pointer movement events.
          */
@@ -237,28 +240,28 @@ class DragRef {
          * Emits as the user is dragging the item. Use with caution,
          * because this event will fire for every pixel that the user has dragged.
          */
-        this.moved = new Observable((observer) => {
-            /** @type {?} */
-            const subscription = this._moveEvents.subscribe(observer);
-            this._moveEventSubscriptions++;
-            return () => {
-                subscription.unsubscribe();
-                this._moveEventSubscriptions--;
-            };
-        });
+        this.moved = this._moveEvents.asObservable();
         /**
          * Handler for the `mousedown`/`touchstart` events.
          */
-        this._pointerDown = (event) => {
+        this._pointerDown = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => {
             this.beforeStarted.next();
             // Delegate the event based on whether it started from a handle or the element itself.
             if (this._handles.length) {
                 /** @type {?} */
-                const targetHandle = this._handles.find(handle => {
+                const targetHandle = this._handles.find((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                handle => {
                     /** @type {?} */
                     const target = event.target;
                     return !!target && (target === handle || handle.contains((/** @type {?} */ (target))));
-                });
+                }));
                 if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {
                     this._initializeDragSequence(targetHandle, event);
                 }
@@ -266,11 +269,15 @@ class DragRef {
             else if (!this.disabled) {
                 this._initializeDragSequence(this._rootElement, event);
             }
-        };
+        });
         /**
          * Handler that is invoked when the user moves their pointer after they've initiated a drag.
          */
-        this._pointerMove = (event) => {
+        this._pointerMove = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => {
             if (!this._hasStartedDragging) {
                 /** @type {?} */
                 const pointerPosition = this._getPointerPositionOnPage(event);
@@ -286,7 +293,10 @@ class DragRef {
                 // per pixel of movement (e.g. if the user moves their pointer quickly).
                 if (isOverThreshold && (Date.now() >= this._dragStartTime + (this.dragStartDelay || 0))) {
                     this._hasStartedDragging = true;
-                    this._ngZone.run(() => this._startDragSequence(event));
+                    this._ngZone.run((/**
+                     * @return {?}
+                     */
+                    () => this._startDragSequence(event)));
                 }
                 return;
             }
@@ -324,21 +334,29 @@ class DragRef {
             // Since this event gets fired for every pixel while dragging, we only
             // want to fire it if the consumer opted into it. Also we have to
             // re-enter the zone because we run all of the events on the outside.
-            if (this._moveEventSubscriptions > 0) {
-                this._ngZone.run(() => {
+            if (this._moveEvents.observers.length) {
+                this._ngZone.run((/**
+                 * @return {?}
+                 */
+                () => {
                     this._moveEvents.next({
                         source: this,
                         pointerPosition: constrainedPointerPosition,
                         event,
+                        distance: this._getDragDistance(constrainedPointerPosition),
                         delta: this._pointerDirectionDelta
                     });
-                });
+                }));
             }
-        };
+        });
         /**
          * Handler that is invoked when the user lifts their pointer up, after initiating a drag.
          */
-        this._pointerUp = (event) => {
+        this._pointerUp = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => {
             // Note that here we use `isDragging` from the service, rather than from `this`.
             // The difference is that the one from the service reflects whether a dragging sequence
             // has been initiated, whereas the one on `this` includes whether the user has passed
@@ -361,15 +379,26 @@ class DragRef {
                 // to the new passive transform.
                 this._passiveTransform.x = this._activeTransform.x;
                 this._passiveTransform.y = this._activeTransform.y;
-                this._ngZone.run(() => this.ended.next({ source: this }));
+                this._ngZone.run((/**
+                 * @return {?}
+                 */
+                () => {
+                    this.ended.next({
+                        source: this,
+                        distance: this._getDragDistance(this._getPointerPositionOnPage(event))
+                    });
+                }));
                 this._dragDropRegistry.stopDragging(this);
                 return;
             }
-            this._animatePreviewToPlaceholder().then(() => {
+            this._animatePreviewToPlaceholder().then((/**
+             * @return {?}
+             */
+            () => {
                 this._cleanupDragArtifacts(event);
                 this._dragDropRegistry.stopDragging(this);
-            });
-        };
+            }));
+        });
         this.withRootElement(element);
         _dragDropRegistry.registerDragItem(this);
     }
@@ -415,8 +444,16 @@ class DragRef {
      * @return {THIS}
      */
     withHandles(handles) {
-        (/** @type {?} */ (this))._handles = handles.map(handle => coerceElement(handle));
-        (/** @type {?} */ (this))._handles.forEach(handle => toggleNativeDragInteractions(handle, false));
+        (/** @type {?} */ (this))._handles = handles.map((/**
+         * @param {?} handle
+         * @return {?}
+         */
+        handle => coerceElement(handle)));
+        (/** @type {?} */ (this))._handles.forEach((/**
+         * @param {?} handle
+         * @return {?}
+         */
+        handle => toggleNativeDragInteractions(handle, false)));
         (/** @type {?} */ (this))._toggleNativeDragInteractions();
         return (/** @type {?} */ (this));
     }
@@ -732,32 +769,39 @@ class DragRef {
             (/** @type {?} */ (this._nextSibling.parentNode)).insertBefore(this._rootElement, this._nextSibling);
         }
         else {
-            this._initialContainer.element.appendChild(this._rootElement);
+            coerceElement(this._initialContainer.element).appendChild(this._rootElement);
         }
         this._destroyPreview();
         this._destroyPlaceholder();
         this._boundaryRect = this._previewRect = undefined;
         // Re-enter the NgZone since we bound `document` events on the outside.
-        this._ngZone.run(() => {
+        this._ngZone.run((/**
+         * @return {?}
+         */
+        () => {
             /** @type {?} */
             const container = (/** @type {?} */ (this._dropContainer));
             /** @type {?} */
             const currentIndex = container.getItemIndex(this);
-            const { x, y } = this._getPointerPositionOnPage(event);
             /** @type {?} */
-            const isPointerOverContainer = container._isOverContainer(x, y);
-            this.ended.next({ source: this });
+            const pointerPosition = this._getPointerPositionOnPage(event);
+            /** @type {?} */
+            const distance = this._getDragDistance(this._getPointerPositionOnPage(event));
+            /** @type {?} */
+            const isPointerOverContainer = container._isOverContainer(pointerPosition.x, pointerPosition.y);
+            this.ended.next({ source: this, distance });
             this.dropped.next({
                 item: this,
                 currentIndex,
                 previousIndex: this._initialContainer.getItemIndex(this),
                 container: container,
                 previousContainer: this._initialContainer,
-                isPointerOverContainer
+                isPointerOverContainer,
+                distance
             });
-            container.drop(this, currentIndex, this._initialContainer, isPointerOverContainer);
+            container.drop(this, currentIndex, this._initialContainer, isPointerOverContainer, distance);
             this._dropContainer = this._initialContainer;
-        });
+        }));
     }
     /**
      * Updates the item's position in its drop container, or moves it
@@ -769,8 +813,7 @@ class DragRef {
     _updateActiveDropContainer({ x, y }) {
         // Drop container that draggable has been moved into.
         /** @type {?} */
-        let newContainer = (/** @type {?} */ (this._dropContainer))._getSiblingContainerFromPosition(this, x, y) ||
-            this._initialContainer._getSiblingContainerFromPosition(this, x, y);
+        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
         // 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
@@ -780,15 +823,22 @@ class DragRef {
             newContainer = this._initialContainer;
         }
         if (newContainer && newContainer !== this._dropContainer) {
-            this._ngZone.run(() => {
+            this._ngZone.run((/**
+             * @return {?}
+             */
+            () => {
                 // Notify the old container that the item has left.
                 this.exited.next({ item: this, container: (/** @type {?} */ (this._dropContainer)) });
                 (/** @type {?} */ (this._dropContainer)).exit(this);
                 // Notify the new container that the item has entered.
-                this.entered.next({ item: this, container: (/** @type {?} */ (newContainer)) });
                 this._dropContainer = (/** @type {?} */ (newContainer));
                 this._dropContainer.enter(this, x, y);
-            });
+                this.entered.next({
+                    item: this,
+                    container: (/** @type {?} */ (newContainer)),
+                    currentIndex: (/** @type {?} */ (newContainer)).getItemIndex(this)
+                });
+            }));
         }
         (/** @type {?} */ (this._dropContainer))._sortItem(this, x, y, this._pointerDirectionDelta);
         this._preview.style.transform =
@@ -864,24 +914,35 @@ class DragRef {
         if (duration === 0) {
             return Promise.resolve();
         }
-        return this._ngZone.runOutsideAngular(() => {
-            return new Promise(resolve => {
+        return this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        () => {
+            return new Promise((/**
+             * @param {?} resolve
+             * @return {?}
+             */
+            resolve => {
                 /** @type {?} */
-                const handler = (/** @type {?} */ (((event) => {
+                const handler = (/** @type {?} */ (((/**
+                 * @param {?} event
+                 * @return {?}
+                 */
+                (event) => {
                     if (!event || (event.target === this._preview && event.propertyName === 'transform')) {
                         this._preview.removeEventListener('transitionend', handler);
                         resolve();
                         clearTimeout(timeout);
                     }
-                })));
+                }))));
                 // If a transition is short enough, the browser might not fire the `transitionend` event.
                 // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
                 // fire if the transition hasn't completed when it was supposed to.
                 /** @type {?} */
                 const timeout = setTimeout((/** @type {?} */ (handler)), duration * 1.5);
                 this._preview.addEventListener('transitionend', handler);
-            });
-        });
+            }));
+        }));
     }
     /**
      * Creates an element that will be shown instead of the current element while dragging.
@@ -1061,6 +1122,20 @@ class DragRef {
         this._rootElement.style.transform = this._initialTransform ?
             transform + ' ' + this._initialTransform : transform;
     }
+    /**
+     * Gets the distance that the user has dragged during the current drag sequence.
+     * @private
+     * @param {?} currentPosition Current position of the user's pointer.
+     * @return {?}
+     */
+    _getDragDistance(currentPosition) {
+        /** @type {?} */
+        const pickupPosition = this._pickupPositionOnPage;
+        if (pickupPosition) {
+            return { x: currentPosition.x - pickupPosition.x, y: currentPosition.y - pickupPosition.y };
+        }
+        return { x: 0, y: 0 };
+    }
 }
 /**
  * Gets a 3d `transform` that can be applied to an element.
@@ -1083,11 +1158,26 @@ function deepCloneNode(node) {
     const clone = (/** @type {?} */ (node.cloneNode(true)));
     /** @type {?} */
     const descendantsWithId = clone.querySelectorAll('[id]');
+    /** @type {?} */
+    const descendantCanvases = node.querySelectorAll('canvas');
     // Remove the `id` to avoid having multiple elements with the same id on the page.
     clone.removeAttribute('id');
     for (let i = 0; i < descendantsWithId.length; i++) {
         descendantsWithId[i].removeAttribute('id');
     }
+    // `cloneNode` won't transfer the content of `canvas` elements so we have to do it ourselves.
+    // We match up the cloned canvas to their sources using their index in the DOM.
+    if (descendantCanvases.length) {
+        /** @type {?} */
+        const cloneCanvases = clone.querySelectorAll('canvas');
+        for (let i = 0; i < descendantCanvases.length; i++) {
+            /** @type {?} */
+            const correspondingCloneContext = cloneCanvases[i].getContext('2d');
+            if (correspondingCloneContext) {
+                correspondingCloneContext.drawImage(descendantCanvases[i], 0, 0);
+            }
+        }
+    }
     return clone;
 }
 /**
@@ -1136,7 +1226,7 @@ function getPreviewInsertionPoint(documentRef) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
@@ -1212,7 +1302,7 @@ function clamp$1(value, max) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Counter used to generate unique ids for drop refs.
@@ -1256,7 +1346,10 @@ class DropListRef {
          * Function that is used to determine whether an item
          * is allowed to be moved into a drop container.
          */
-        this.enterPredicate = () => true;
+        this.enterPredicate = (/**
+         * @return {?}
+         */
+        () => true);
         /**
          * Emits right before dragging has started.
          */
@@ -1338,10 +1431,12 @@ class DropListRef {
     start() {
         this.beforeStarted.next();
         this._isDragging = true;
-        this._activeDraggables = this._draggables.slice();
-        this._cacheOwnPosition();
-        this._cacheItemPositions();
-        this._siblings.forEach(sibling => sibling._startReceiving(this));
+        this._cacheItems();
+        this._siblings.forEach((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        sibling => sibling._startReceiving(this)));
     }
     /**
      * Emits an event to indicate that the user moved an item into the container.
@@ -1351,7 +1446,6 @@ class DropListRef {
      * @return {?}
      */
     enter(item, pointerX, pointerY) {
-        this.entered.next({ item, container: this });
         this.start();
         // If sorting is disabled, we want the item to return to its starting
         // position if the user is returning it to its initial container.
@@ -1390,7 +1484,7 @@ class DropListRef {
             activeDraggables.splice(newIndex, 0, item);
         }
         else {
-            this.element.appendChild(placeholder);
+            coerceElement(this.element).appendChild(placeholder);
             activeDraggables.push(item);
         }
         // The transform needs to be cleared so it doesn't throw off the measurements.
@@ -1398,6 +1492,7 @@ class DropListRef {
         // 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.
         this._cacheItemPositions();
+        this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) });
     }
     /**
      * Removes an item from the container after it was dragged into another container by the user.
@@ -1410,14 +1505,16 @@ class DropListRef {
     }
     /**
      * Drops an item into this container.
+     * \@breaking-change 9.0.0 `distance` parameter to become required.
      * @param {?} item Item being dropped into the container.
      * @param {?} currentIndex Index at which the item should be inserted.
      * @param {?} previousContainer Container from which the item got dragged in.
      * @param {?} isPointerOverContainer Whether the user's pointer was over the
      *    container when the item was dropped.
+     * @param {?=} distance Distance the user has dragged since the start of the dragging sequence.
      * @return {?}
      */
-    drop(item, currentIndex, previousContainer, isPointerOverContainer) {
+    drop(item, currentIndex, previousContainer, isPointerOverContainer, distance = { x: 0, y: 0 }) {
         this._reset();
         this.dropped.next({
             item,
@@ -1425,7 +1522,8 @@ class DropListRef {
             previousIndex: previousContainer.getItemIndex(item),
             container: this,
             previousContainer,
-            isPointerOverContainer
+            isPointerOverContainer,
+            distance
         });
     }
     /**
@@ -1437,7 +1535,14 @@ class DropListRef {
      */
     withItems(items) {
         (/** @type {?} */ (this))._draggables = items;
-        items.forEach(item => item._withDropContainer((/** @type {?} */ (this))));
+        items.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        item => item._withDropContainer((/** @type {?} */ (this)))));
+        if ((/** @type {?} */ (this)).isDragging()) {
+            (/** @type {?} */ (this))._cacheItems();
+        }
         return (/** @type {?} */ (this));
     }
     /**
@@ -1489,7 +1594,11 @@ class DropListRef {
         /** @type {?} */
         const items = this._orientation === 'horizontal' && this._direction === 'rtl' ?
             this._itemPositions.slice().reverse() : this._itemPositions;
-        return findIndex(items, currentItem => currentItem.drag === item);
+        return findIndex(items, (/**
+         * @param {?} currentItem
+         * @return {?}
+         */
+        currentItem => currentItem.drag === item));
     }
     /**
      * Whether the list is able to receive the item that
@@ -1522,7 +1631,11 @@ class DropListRef {
         /** @type {?} */
         const isHorizontal = this._orientation === 'horizontal';
         /** @type {?} */
-        const currentIndex = findIndex(siblings, currentItem => currentItem.drag === item);
+        const currentIndex = findIndex(siblings, (/**
+         * @param {?} currentItem
+         * @return {?}
+         */
+        currentItem => currentItem.drag === item));
         /** @type {?} */
         const siblingAtNewPosition = siblings[newIndex];
         /** @type {?} */
@@ -1551,7 +1664,12 @@ class DropListRef {
             container: this,
             item
         });
-        siblings.forEach((sibling, index) => {
+        siblings.forEach((/**
+         * @param {?} sibling
+         * @param {?} index
+         * @return {?}
+         */
+        (sibling, index) => {
             // Don't do anything if the position hasn't changed.
             if (oldOrder[index] === sibling) {
                 return;
@@ -1579,7 +1697,7 @@ class DropListRef {
                 elementToOffset.style.transform = `translate3d(0, ${Math.round(sibling.offset)}px, 0)`;
                 adjustClientRect(sibling.clientRect, offset, 0);
             }
-        });
+        }));
     }
     /**
      * Caches the position of the drop list.
@@ -1587,7 +1705,7 @@ class DropListRef {
      * @return {?}
      */
     _cacheOwnPosition() {
-        this._clientRect = this.element.getBoundingClientRect();
+        this._clientRect = coerceElement(this.element).getBoundingClientRect();
     }
     /**
      * Refreshes the position cache of the items and sibling containers.
@@ -1597,7 +1715,11 @@ class DropListRef {
     _cacheItemPositions() {
         /** @type {?} */
         const isHorizontal = this._orientation === 'horizontal';
-        this._itemPositions = this._activeDraggables.map(drag => {
+        this._itemPositions = this._activeDraggables.map((/**
+         * @param {?} drag
+         * @return {?}
+         */
+        drag => {
             /** @type {?} */
             const elementToMeasure = this._dragDropRegistry.isDragging(drag) ?
                 // If the element is being dragged, we have to measure the
@@ -1622,10 +1744,15 @@ class DropListRef {
                     height: clientRect.height
                 }
             };
-        }).sort((a, b) => {
+        })).sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => {
             return isHorizontal ? a.clientRect.left - b.clientRect.left :
                 a.clientRect.top - b.clientRect.top;
-        });
+        }));
     }
     /**
      * Resets the container to its initial state.
@@ -1635,8 +1762,16 @@ class DropListRef {
     _reset() {
         this._isDragging = false;
         // TODO(crisbeto): may have to wait for the animations to finish.
-        this._activeDraggables.forEach(item => item.getRootElement().style.transform = '');
-        this._siblings.forEach(sibling => sibling._stopReceiving(this));
+        this._activeDraggables.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        item => item.getRootElement().style.transform = ''));
+        this._siblings.forEach((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        sibling => sibling._stopReceiving(this)));
         this._activeDraggables = [];
         this._itemPositions = [];
         this._previousSwap.drag = null;
@@ -1726,7 +1861,13 @@ class DropListRef {
     _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {
         /** @type {?} */
         const isHorizontal = this._orientation === 'horizontal';
-        return findIndex(this._itemPositions, ({ drag, clientRect }, _, array) => {
+        return findIndex(this._itemPositions, (/**
+         * @param {?} __0
+         * @param {?} _
+         * @param {?} array
+         * @return {?}
+         */
+        ({ drag, clientRect }, _, array) => {
             if (drag === item) {
                 // If there's only one item left in the container, it must be
                 // the dragged item itself so we use it as a reference.
@@ -1746,7 +1887,17 @@ class DropListRef {
                 // 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);
-        });
+        }));
+    }
+    /**
+     * Caches the current items in the list and their positions.
+     * @private
+     * @return {?}
+     */
+    _cacheItems() {
+        this._activeDraggables = this._draggables.slice();
+        this._cacheItemPositions();
+        this._cacheOwnPosition();
     }
     /**
      * Checks whether the user's pointer is positioned over the container.
@@ -1766,7 +1917,11 @@ class DropListRef {
      * @return {?}
      */
     _getSiblingContainerFromPosition(item, x, y) {
-        return this._siblings.find(sibling => sibling._canReceive(item, x, y));
+        return this._siblings.find((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        sibling => sibling._canReceive(item, x, y)));
     }
     /**
      * Checks whether the drop list can receive the passed-in item.
@@ -1780,19 +1935,21 @@ class DropListRef {
             return false;
         }
         /** @type {?} */
-        const elementFromPoint = this._document.elementFromPoint(x, y);
+        const elementFromPoint = (/** @type {?} */ (this._document.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) {
             return false;
         }
+        /** @type {?} */
+        const nativeElement = coerceElement(this.element);
         // The `ClientRect`, that we're using to find the container over which the user is
         // hovering, doesn't give us any information on whether the element has been scrolled
         // out of the view or whether it's overlapping with other containers. This means that
         // we could end up transferring the item into a container that's invisible or is positioned
         // below another one. We use the result from `elementFromPoint` to get the top-most element
         // at the pointer position and to find whether it's one of the intersecting drop containers.
-        return elementFromPoint === this.element || this.element.contains(elementFromPoint);
+        return elementFromPoint === nativeElement || nativeElement.contains(elementFromPoint);
     }
     /**
      * Called by one of the connected drop lists when a dragging sequence has started.
@@ -1859,7 +2016,7 @@ function isInsideClientRect(clientRect, x, y) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Event options that can be used to bind an active, capturing event.
@@ -1915,11 +2072,15 @@ class DragDropRegistry {
          * Event listener that will prevent the default browser action while the user is dragging.
          * @param event Event whose default action should be prevented.
          */
-        this._preventDefaultWhileDragging = (event) => {
+        this._preventDefaultWhileDragging = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => {
             if (this._activeDragInstances.size) {
                 event.preventDefault();
             }
-        };
+        });
         this._document = _document;
     }
     /**
@@ -1946,11 +2107,14 @@ class DragDropRegistry {
         // won't preventDefault on a dynamically-added `touchmove` listener.
         // See https://bugs.webkit.org/show_bug.cgi?id=184250.
         if (this._dragInstances.size === 1) {
-            this._ngZone.runOutsideAngular(() => {
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => {
                 // The event handler has to be explicitly active,
                 // because newer browsers make it passive by default.
                 this._document.addEventListener('touchmove', this._preventDefaultWhileDragging, activeCapturingEventOptions);
-            });
+            }));
         }
     }
     /**
@@ -1993,11 +2157,19 @@ class DragDropRegistry {
             // use `preventDefault` to prevent the page from scrolling while the user is dragging.
             this._globalListeners
                 .set(moveEvent, {
-                handler: (e) => this.pointerMove.next((/** @type {?} */ (e))),
+                handler: (/**
+                 * @param {?} e
+                 * @return {?}
+                 */
+                (e) => this.pointerMove.next((/** @type {?} */ (e)))),
                 options: activeCapturingEventOptions
             })
                 .set(upEvent, {
-                handler: (e) => this.pointerUp.next((/** @type {?} */ (e))),
+                handler: (/**
+                 * @param {?} e
+                 * @return {?}
+                 */
+                (e) => this.pointerUp.next((/** @type {?} */ (e)))),
                 options: true
             })
                 // Preventing the default action on `mousemove` isn't enough to disable text selection
@@ -2016,11 +2188,19 @@ class DragDropRegistry {
                     options: activeCapturingEventOptions
                 });
             }
-            this._ngZone.runOutsideAngular(() => {
-                this._globalListeners.forEach((config, name) => {
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            () => {
+                this._globalListeners.forEach((/**
+                 * @param {?} config
+                 * @param {?} name
+                 * @return {?}
+                 */
+                (config, name) => {
                     this._document.addEventListener(name, config.handler, config.options);
-                });
-            });
+                }));
+            }));
         }
     }
     /**
@@ -2050,14 +2230,26 @@ class DragDropRegistry {
      * @return {?}
      */
     getDropContainer(id) {
-        return Array.from(this._dropInstances).find(instance => instance.id === id);
+        return Array.from(this._dropInstances).find((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        instance => instance.id === id));
     }
     /**
      * @return {?}
      */
     ngOnDestroy() {
-        this._dragInstances.forEach(instance => this.removeDragItem(instance));
-        this._dropInstances.forEach(instance => this.removeDropContainer(instance));
+        this._dragInstances.forEach((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        instance => this.removeDragItem(instance)));
+        this._dropInstances.forEach((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        instance => this.removeDropContainer(instance)));
         this._clearGlobalListeners();
         this.pointerMove.complete();
         this.pointerUp.complete();
@@ -2068,9 +2260,14 @@ class DragDropRegistry {
      * @return {?}
      */
     _clearGlobalListeners() {
-        this._globalListeners.forEach((config, name) => {
+        this._globalListeners.forEach((/**
+         * @param {?} config
+         * @param {?} name
+         * @return {?}
+         */
+        (config, name) => {
             this._document.removeEventListener(name, config.handler, config.options);
-        });
+        }));
         this._globalListeners.clear();
     }
 }
@@ -2082,11 +2279,11 @@ DragDropRegistry.ctorParameters = () => [
     { type: NgZone },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
-/** @nocollapse */ DragDropRegistry.ngInjectableDef = defineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(inject(NgZone), inject(DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
+/** @nocollapse */ DragDropRegistry.ngInjectableDef = ɵɵdefineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(ɵɵinject(NgZone), ɵɵinject(DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Default configuration to be used when creating a `DragRef`.
@@ -2142,11 +2339,11 @@ DragDrop.ctorParameters = () => [
     { type: ViewportRuler },
     { type: DragDropRegistry }
 ];
-/** @nocollapse */ DragDrop.ngInjectableDef = defineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(inject(DOCUMENT), inject(NgZone), inject(ViewportRuler), inject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
+/** @nocollapse */ DragDrop.ngInjectableDef = ɵɵdefineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(ɵɵinject(DOCUMENT), ɵɵinject(NgZone), ɵɵinject(ViewportRuler), ɵɵinject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Injection token that is used to provide a CdkDropList instance to CdkDrag.
@@ -2165,12 +2362,12 @@ const CDK_DROP_LIST_CONTAINER = CDK_DROP_LIST;
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
@@ -2183,7 +2380,7 @@ const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Handle that can be used to drag and CdkDrag instance.
@@ -2242,7 +2439,7 @@ CdkDragHandle.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Element that will be used as a template for the placeholder of a CdkDrag when
@@ -2272,7 +2469,7 @@ CdkDragPlaceholder.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Element that will be used as a template for the preview
@@ -2302,7 +2499,7 @@ CdkDragPreview.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Injection token that can be used to configure the behavior of `CdkDrag`.
@@ -2378,23 +2575,53 @@ class CdkDrag {
          * Emits as the user is dragging the item. Use with caution,
          * because this event will fire for every pixel that the user has dragged.
          */
-        this.moved = new Observable((observer) => {
+        this.moved = new Observable((/**
+         * @param {?} observer
+         * @return {?}
+         */
+        (observer) => {
             /** @type {?} */
-            const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
+            const subscription = this._dragRef.moved.pipe(map((/**
+             * @param {?} movedEvent
+             * @return {?}
+             */
+            movedEvent => ({
                 source: this,
                 pointerPosition: movedEvent.pointerPosition,
                 event: movedEvent.event,
-                delta: movedEvent.delta
-            }))).subscribe(observer);
-            return () => {
+                delta: movedEvent.delta,
+                distance: movedEvent.distance
+            })))).subscribe(observer);
+            return (/**
+             * @return {?}
+             */
+            () => {
                 subscription.unsubscribe();
-            };
-        });
+            });
+        }));
         this._dragRef = dragDrop.createDrag(element, config);
         this._dragRef.data = this;
         this._syncInputs(this._dragRef);
         this._handleEvents(this._dragRef);
     }
+    /**
+     * Selector that will be used to determine the element to which the draggable's position will
+     * be constrained. Matching starts from the element's parent and goes up the DOM until a matching
+     * element has been found
+     * @deprecated Use `boundaryElement` instead.
+     * \@breaking-change 9.0.0
+     * @return {?}
+     */
+    get boundaryElementSelector() {
+        return typeof this.boundaryElement === 'string' ? this.boundaryElement : (/** @type {?} */ (undefined));
+    }
+    /**
+     * @param {?} selector
+     * @return {?}
+     */
+    set boundaryElementSelector(selector) {
+        this.boundaryElement = selector;
+    }
     /**
      * Whether starting to drag this element is disabled.
      * @return {?}
@@ -2449,33 +2676,60 @@ class CdkDrag {
         // their original DOM position and then they get transferred to the portal.
         this._ngZone.onStable.asObservable()
             .pipe(take(1), takeUntil(this._destroyed))
-            .subscribe(() => {
+            .subscribe((/**
+         * @return {?}
+         */
+        () => {
             this._updateRootElement();
             // Listen for any newly-added handles.
             this._handles.changes.pipe(startWith(this._handles), 
             // Sync the new handles with the DragRef.
-            tap((handles) => {
+            tap((/**
+             * @param {?} handles
+             * @return {?}
+             */
+            (handles) => {
                 /** @type {?} */
                 const childHandleElements = handles
-                    .filter(handle => handle._parentDrag === this)
-                    .map(handle => handle.element);
+                    .filter((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                handle => handle._parentDrag === this))
+                    .map((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                handle => handle.element));
                 this._dragRef.withHandles(childHandleElements);
-            }), 
+            })), 
             // Listen if the state of any of the handles changes.
-            switchMap((handles) => {
-                return merge(...handles.map(item => item._stateChanges));
-            }), takeUntil(this._destroyed)).subscribe(handleInstance => {
+            switchMap((/**
+             * @param {?} handles
+             * @return {?}
+             */
+            (handles) => {
+                return merge(...handles.map((/**
+                 * @param {?} item
+                 * @return {?}
+                 */
+                item => item._stateChanges)));
+            })), takeUntil(this._destroyed)).subscribe((/**
+             * @param {?} handleInstance
+             * @return {?}
+             */
+            handleInstance => {
                 // Enabled/disable the handle that changed in the DragRef.
                 /** @type {?} */
                 const dragRef = this._dragRef;
                 /** @type {?} */
                 const handle = handleInstance.element.nativeElement;
                 handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
-            });
+            }));
             if (this.freeDragPosition) {
                 this._dragRef.setFreeDragPosition(this.freeDragPosition);
             }
-        });
+        }));
     }
     /**
      * @param {?} changes
@@ -2485,7 +2739,7 @@ class CdkDrag {
         /** @type {?} */
         const rootSelectorChange = changes['rootElementSelector'];
         /** @type {?} */
-        const positionChange = changes['positionChange'];
+        const positionChange = changes['freeDragPosition'];
         // We don't have to react to the first change since it's being
         // handled in `ngAfterViewInit` where it needs to be deferred.
         if (rootSelectorChange && !rootSelectorChange.firstChange) {
@@ -2522,14 +2776,25 @@ class CdkDrag {
         this._dragRef.withRootElement(rootElement || element);
     }
     /**
-     * Gets the boundary element, based on the `boundaryElementSelector`.
+     * Gets the boundary element, based on the `boundaryElement` value.
      * @private
      * @return {?}
      */
     _getBoundaryElement() {
         /** @type {?} */
-        const selector = this.boundaryElementSelector;
-        return selector ? getClosestMatchingAncestor(this.element.nativeElement, selector) : null;
+        const boundary = this.boundaryElement;
+        if (!boundary) {
+            return null;
+        }
+        if (typeof boundary === 'string') {
+            return getClosestMatchingAncestor(this.element.nativeElement, boundary);
+        }
+        /** @type {?} */
+        const element = coerceElement(boundary);
+        if (isDevMode() && !element.contains(this.element.nativeElement)) {
+            throw Error('Draggable element is not inside of the node passed into cdkDragBoundary.');
+        }
+        return element;
     }
     /**
      * Syncs the inputs of the CdkDrag with the options of the underlying DragRef.
@@ -2538,7 +2803,10 @@ class CdkDrag {
      * @return {?}
      */
     _syncInputs(ref) {
-        ref.beforeStarted.subscribe(() => {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        () => {
             if (!ref.isDragging()) {
                 /** @type {?} */
                 const dir = this._dir;
@@ -2566,7 +2834,7 @@ class CdkDrag {
                     ref.withDirection(dir.value);
                 }
             }
-        });
+        }));
     }
     /**
      * Handles the events from the underlying `DragRef`.
@@ -2575,43 +2843,67 @@ class CdkDrag {
      * @return {?}
      */
     _handleEvents(ref) {
-        ref.started.subscribe(() => {
+        ref.started.subscribe((/**
+         * @return {?}
+         */
+        () => {
             this.started.emit({ source: this });
             // Since all of these events run outside of change detection,
             // we need to ensure that everything is marked correctly.
             this._changeDetectorRef.markForCheck();
-        });
-        ref.released.subscribe(() => {
+        }));
+        ref.released.subscribe((/**
+         * @return {?}
+         */
+        () => {
             this.released.emit({ source: this });
-        });
-        ref.ended.subscribe(() => {
-            this.ended.emit({ source: this });
+        }));
+        ref.ended.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
+            this.ended.emit({ source: this, distance: event.distance });
             // Since all of these events run outside of change detection,
             // we need to ensure that everything is marked correctly.
             this._changeDetectorRef.markForCheck();
-        });
-        ref.entered.subscribe(event => {
+        }));
+        ref.entered.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.entered.emit({
                 container: event.container.data,
-                item: this
+                item: this,
+                currentIndex: event.currentIndex
             });
-        });
-        ref.exited.subscribe(event => {
+        }));
+        ref.exited.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.exited.emit({
                 container: event.container.data,
                 item: this
             });
-        });
-        ref.dropped.subscribe(event => {
+        }));
+        ref.dropped.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.dropped.emit({
                 previousIndex: event.previousIndex,
                 currentIndex: event.currentIndex,
                 previousContainer: event.previousContainer.data,
                 container: event.container.data,
                 isPointerOverContainer: event.isPointerOverContainer,
-                item: this
+                item: this,
+                distance: event.distance
             });
-        });
+        }));
     }
 }
 CdkDrag.decorators = [
@@ -2645,7 +2937,7 @@ CdkDrag.propDecorators = {
     data: [{ type: Input, args: ['cdkDragData',] }],
     lockAxis: [{ type: Input, args: ['cdkDragLockAxis',] }],
     rootElementSelector: [{ type: Input, args: ['cdkDragRootElement',] }],
-    boundaryElementSelector: [{ type: Input, args: ['cdkDragBoundary',] }],
+    boundaryElement: [{ type: Input, args: ['cdkDragBoundary',] }],
     dragStartDelay: [{ type: Input, args: ['cdkDragStartDelay',] }],
     freeDragPosition: [{ type: Input, args: ['cdkDragFreeDragPosition',] }],
     disabled: [{ type: Input, args: ['cdkDragDisabled',] }],
@@ -2680,7 +2972,7 @@ function getClosestMatchingAncestor(element, selector) {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
@@ -2728,7 +3020,7 @@ CdkDropListGroup.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Counter used to generate unique ids for drop zones.
@@ -2781,7 +3073,10 @@ class CdkDropList {
          * Function that is used to determine whether an item
          * is allowed to be moved into a drop container.
          */
-        this.enterPredicate = () => true;
+        this.enterPredicate = (/**
+         * @return {?}
+         */
+        () => true);
         /**
          * Emits when the user drops an item inside the container.
          */
@@ -2801,9 +3096,14 @@ class CdkDropList {
         this.sorted = new EventEmitter();
         this._dropListRef = dragDrop.createDropList(element);
         this._dropListRef.data = this;
-        this._dropListRef.enterPredicate = (drag, drop) => {
+        this._dropListRef.enterPredicate = (/**
+         * @param {?} drag
+         * @param {?} drop
+         * @return {?}
+         */
+        (drag, drop) => {
             return this.enterPredicate(drag.data, drop.data);
-        };
+        });
         this._syncInputs(this._dropListRef);
         this._handleEvents(this._dropListRef);
         CdkDropList._dropLists.push(this);
@@ -2843,9 +3143,17 @@ class CdkDropList {
     ngAfterContentInit() {
         this._draggables.changes
             .pipe(startWith(this._draggables), takeUntil(this._destroyed))
-            .subscribe((items) => {
-            this._dropListRef.withItems(items.map(drag => drag._dragRef));
-        });
+            .subscribe((/**
+         * @param {?} items
+         * @return {?}
+         */
+        (items) => {
+            this._dropListRef.withItems(items.map((/**
+             * @param {?} drag
+             * @return {?}
+             */
+            drag => drag._dragRef)));
+        }));
     }
     /**
      * @return {?}
@@ -2951,28 +3259,55 @@ class CdkDropList {
         if (this._dir) {
             this._dir.change
                 .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
-                .subscribe(value => ref.withDirection(value));
+                .subscribe((/**
+             * @param {?} value
+             * @return {?}
+             */
+            value => ref.withDirection(value)));
         }
-        ref.beforeStarted.subscribe(() => {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        () => {
             /** @type {?} */
-            const siblings = coerceArray(this.connectedTo).map(drop => {
+            const siblings = coerceArray(this.connectedTo).map((/**
+             * @param {?} drop
+             * @return {?}
+             */
+            drop => {
                 return typeof drop === 'string' ?
-                    (/** @type {?} */ (CdkDropList._dropLists.find(list => list.id === drop))) : drop;
-            });
+                    (/** @type {?} */ (CdkDropList._dropLists.find((/**
+                     * @param {?} list
+                     * @return {?}
+                     */
+                    list => list.id === drop)))) : drop;
+            }));
             if (this._group) {
-                this._group._items.forEach(drop => {
+                this._group._items.forEach((/**
+                 * @param {?} drop
+                 * @return {?}
+                 */
+                drop => {
                     if (siblings.indexOf(drop) === -1) {
                         siblings.push(drop);
                     }
-                });
+                }));
             }
             ref.disabled = this.disabled;
             ref.lockAxis = this.lockAxis;
             ref.sortingDisabled = this.sortingDisabled;
             ref
-                .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
+                .connectedTo(siblings.filter((/**
+             * @param {?} drop
+             * @return {?}
+             */
+            drop => drop && drop !== this)).map((/**
+             * @param {?} list
+             * @return {?}
+             */
+            list => list._dropListRef)))
                 .withOrientation(this.orientation);
-        });
+        }));
     }
     /**
      * Handles events from the underlying DropListRef.
@@ -2981,43 +3316,64 @@ class CdkDropList {
      * @return {?}
      */
     _handleEvents(ref) {
-        ref.beforeStarted.subscribe(() => {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        () => {
             this._changeDetectorRef.markForCheck();
-        });
-        ref.entered.subscribe(event => {
+        }));
+        ref.entered.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.entered.emit({
                 container: this,
-                item: event.item.data
+                item: event.item.data,
+                currentIndex: event.currentIndex
             });
-        });
-        ref.exited.subscribe(event => {
+        }));
+        ref.exited.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.exited.emit({
                 container: this,
                 item: event.item.data
             });
             this._changeDetectorRef.markForCheck();
-        });
-        ref.sorted.subscribe(event => {
+        }));
+        ref.sorted.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.sorted.emit({
                 previousIndex: event.previousIndex,
                 currentIndex: event.currentIndex,
                 container: this,
                 item: event.item.data
             });
-        });
-        ref.dropped.subscribe(event => {
+        }));
+        ref.dropped.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
             this.dropped.emit({
                 previousIndex: event.previousIndex,
                 currentIndex: event.currentIndex,
                 previousContainer: event.previousContainer.data,
                 container: event.container.data,
                 item: event.item.data,
-                isPointerOverContainer: event.isPointerOverContainer
+                isPointerOverContainer: event.isPointerOverContainer,
+                distance: event.distance
             });
             // Mark for check since all of these events run outside of change
             // detection and we're not guaranteed for something else to have triggered it.
             this._changeDetectorRef.markForCheck();
-        });
+        }));
     }
 }
 /**
@@ -3051,7 +3407,10 @@ CdkDropList.ctorParameters = () => [
     { type: CdkDropListGroup, decorators: [{ type: Optional }, { type: SkipSelf }] }
 ];
 CdkDropList.propDecorators = {
-    _draggables: [{ type: ContentChildren, args: [forwardRef(() => CdkDrag), {
+    _draggables: [{ type: ContentChildren, args: [forwardRef((/**
+                 * @return {?}
+                 */
+                () => CdkDrag)), {
                     // Explicitly set to false since some of the logic below makes assumptions about it.
                     // The `.withItems` call below should be updated if we ever need to switch this to `true`.
                     descendants: false
@@ -3072,7 +3431,7 @@ CdkDropList.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class DragDropModule {
 }
@@ -3102,12 +3461,12 @@ DragDropModule.decorators = [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 export { DragDrop, DragRef, DropListRef, CdkDropList, CDK_DROP_LIST, CDK_DROP_LIST_CONTAINER, moveItemInArray, transferArrayItem, copyArrayItem, DragDropModule, DragDropRegistry, CdkDropListGroup, CDK_DRAG_CONFIG_FACTORY, CDK_DRAG_CONFIG, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder, CDK_DRAG_PARENT as ɵb };