@angular/cdk 8.0.0-beta.2 → 8.0.0

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

@@ -13,7 +13,7 @@
 
 /**
  * @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.
@@ -53,7 +53,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
  */
 
 /**
@@ -78,7 +78,11 @@ function getTransformTransitionDurationInMs(element) {
     /** @type {?} */
     var transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
     /** @type {?} */
-    var property = transitionedProperties.find(function (prop) { return prop === 'transform' || prop === 'all'; });
+    var property = transitionedProperties.find((/**
+     * @param {?} prop
+     * @return {?}
+     */
+    function (prop) { return prop === 'transform' || prop === 'all'; }));
     // If there's no transition for `all` or `transform`, we shouldn't do anything.
     if (!property) {
         return 0;
@@ -103,12 +107,16 @@ function getTransformTransitionDurationInMs(element) {
 function parseCssPropertyValue(computedStyle, name) {
     /** @type {?} */
     var value = computedStyle.getPropertyValue(name);
-    return value.split(',').map(function (part) { return part.trim(); });
+    return value.split(',').map((/**
+     * @param {?} part
+     * @return {?}
+     */
+    function (part) { return 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.
@@ -161,11 +169,6 @@ DragRef = /** @class */ (function () {
          * Emits when the item is being moved.
          */
         this._moveEvents = new rxjs.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.
          */
@@ -232,28 +235,28 @@ DragRef = /** @class */ (function () {
          * 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 rxjs.Observable(function (observer) {
-            /** @type {?} */
-            var subscription = _this._moveEvents.subscribe(observer);
-            _this._moveEventSubscriptions++;
-            return function () {
-                subscription.unsubscribe();
-                _this._moveEventSubscriptions--;
-            };
-        });
+        this.moved = this._moveEvents.asObservable();
         /**
          * Handler for the `mousedown`/`touchstart` events.
          */
-        this._pointerDown = function (event) {
+        this._pointerDown = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.beforeStarted.next();
             // Delegate the event based on whether it started from a handle or the element itself.
             if (_this._handles.length) {
                 /** @type {?} */
-                var targetHandle = _this._handles.find(function (handle) {
+                var targetHandle = _this._handles.find((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                function (handle) {
                     /** @type {?} */
                     var target = event.target;
                     return !!target && (target === handle || handle.contains((/** @type {?} */ (target))));
-                });
+                }));
                 if (targetHandle && !_this._disabledHandles.has(targetHandle) && !_this.disabled) {
                     _this._initializeDragSequence(targetHandle, event);
                 }
@@ -261,11 +264,15 @@ DragRef = /** @class */ (function () {
             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 = function (event) {
+        this._pointerMove = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             if (!_this._hasStartedDragging) {
                 /** @type {?} */
                 var pointerPosition = _this._getPointerPositionOnPage(event);
@@ -281,7 +288,10 @@ DragRef = /** @class */ (function () {
                 // 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(function () { return _this._startDragSequence(event); });
+                    _this._ngZone.run((/**
+                     * @return {?}
+                     */
+                    function () { return _this._startDragSequence(event); }));
                 }
                 return;
             }
@@ -319,21 +329,29 @@ DragRef = /** @class */ (function () {
             // 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(function () {
+            if (_this._moveEvents.observers.length) {
+                _this._ngZone.run((/**
+                 * @return {?}
+                 */
+                function () {
                     _this._moveEvents.next({
                         source: _this,
                         pointerPosition: constrainedPointerPosition,
                         event: 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 = function (event) {
+        this._pointerUp = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (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
@@ -356,15 +374,26 @@ DragRef = /** @class */ (function () {
                 // to the new passive transform.
                 _this._passiveTransform.x = _this._activeTransform.x;
                 _this._passiveTransform.y = _this._activeTransform.y;
-                _this._ngZone.run(function () { return _this.ended.next({ source: _this }); });
+                _this._ngZone.run((/**
+                 * @return {?}
+                 */
+                function () {
+                    _this.ended.next({
+                        source: _this,
+                        distance: _this._getDragDistance(_this._getPointerPositionOnPage(event))
+                    });
+                }));
                 _this._dragDropRegistry.stopDragging(_this);
                 return;
             }
-            _this._animatePreviewToPlaceholder().then(function () {
+            _this._animatePreviewToPlaceholder().then((/**
+             * @return {?}
+             */
+            function () {
                 _this._cleanupDragArtifacts(event);
                 _this._dragDropRegistry.stopDragging(_this);
-            });
-        };
+            }));
+        });
         this.withRootElement(element);
         _dragDropRegistry.registerDragItem(this);
     }
@@ -437,8 +466,16 @@ DragRef = /** @class */ (function () {
      * @return {THIS}
      */
     function (handles) {
-        (/** @type {?} */ (this))._handles = handles.map(function (handle) { return coercion.coerceElement(handle); });
-        (/** @type {?} */ (this))._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, false); });
+        (/** @type {?} */ (this))._handles = handles.map((/**
+         * @param {?} handle
+         * @return {?}
+         */
+        function (handle) { return coercion.coerceElement(handle); }));
+        (/** @type {?} */ (this))._handles.forEach((/**
+         * @param {?} handle
+         * @return {?}
+         */
+        function (handle) { return toggleNativeDragInteractions(handle, false); }));
         (/** @type {?} */ (this))._toggleNativeDragInteractions();
         return (/** @type {?} */ (this));
     };
@@ -912,32 +949,39 @@ DragRef = /** @class */ (function () {
             (/** @type {?} */ (this._nextSibling.parentNode)).insertBefore(this._rootElement, this._nextSibling);
         }
         else {
-            this._initialContainer.element.appendChild(this._rootElement);
+            coercion.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(function () {
+        this._ngZone.run((/**
+         * @return {?}
+         */
+        function () {
             /** @type {?} */
             var container = (/** @type {?} */ (_this._dropContainer));
             /** @type {?} */
             var currentIndex = container.getItemIndex(_this);
-            var _a = _this._getPointerPositionOnPage(event), x = _a.x, y = _a.y;
             /** @type {?} */
-            var isPointerOverContainer = container._isOverContainer(x, y);
-            _this.ended.next({ source: _this });
+            var pointerPosition = _this._getPointerPositionOnPage(event);
+            /** @type {?} */
+            var distance = _this._getDragDistance(_this._getPointerPositionOnPage(event));
+            /** @type {?} */
+            var isPointerOverContainer = container._isOverContainer(pointerPosition.x, pointerPosition.y);
+            _this.ended.next({ source: _this, distance: distance });
             _this.dropped.next({
                 item: _this,
                 currentIndex: currentIndex,
                 previousIndex: _this._initialContainer.getItemIndex(_this),
                 container: container,
                 previousContainer: _this._initialContainer,
-                isPointerOverContainer: isPointerOverContainer
+                isPointerOverContainer: isPointerOverContainer,
+                distance: 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
@@ -962,8 +1006,7 @@ DragRef = /** @class */ (function () {
         var x = _a.x, y = _a.y;
         // Drop container that draggable has been moved into.
         /** @type {?} */
-        var newContainer = (/** @type {?} */ (this._dropContainer))._getSiblingContainerFromPosition(this, x, y) ||
-            this._initialContainer._getSiblingContainerFromPosition(this, x, y);
+        var newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y);
         // If we couldn't find a new container to move the item into, and the item has left it's
         // 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
@@ -973,15 +1016,22 @@ DragRef = /** @class */ (function () {
             newContainer = this._initialContainer;
         }
         if (newContainer && newContainer !== this._dropContainer) {
-            this._ngZone.run(function () {
+            this._ngZone.run((/**
+             * @return {?}
+             */
+            function () {
                 // 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 =
@@ -1077,24 +1127,35 @@ DragRef = /** @class */ (function () {
         if (duration === 0) {
             return Promise.resolve();
         }
-        return this._ngZone.runOutsideAngular(function () {
-            return new Promise(function (resolve) {
+        return this._ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        function () {
+            return new Promise((/**
+             * @param {?} resolve
+             * @return {?}
+             */
+            function (resolve) {
                 /** @type {?} */
-                var handler = (/** @type {?} */ ((function (event) {
+                var handler = (/** @type {?} */ (((/**
+                 * @param {?} event
+                 * @return {?}
+                 */
+                function (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 {?} */
                 var 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. */
     /**
@@ -1338,6 +1399,30 @@ DragRef = /** @class */ (function () {
         this._rootElement.style.transform = this._initialTransform ?
             transform + ' ' + this._initialTransform : transform;
     };
+    /**
+     * Gets the distance that the user has dragged during the current drag sequence.
+     * @param currentPosition Current position of the user's pointer.
+     */
+    /**
+     * Gets the distance that the user has dragged during the current drag sequence.
+     * @private
+     * @param {?} currentPosition Current position of the user's pointer.
+     * @return {?}
+     */
+    DragRef.prototype._getDragDistance = /**
+     * Gets the distance that the user has dragged during the current drag sequence.
+     * @private
+     * @param {?} currentPosition Current position of the user's pointer.
+     * @return {?}
+     */
+    function (currentPosition) {
+        /** @type {?} */
+        var pickupPosition = this._pickupPositionOnPage;
+        if (pickupPosition) {
+            return { x: currentPosition.x - pickupPosition.x, y: currentPosition.y - pickupPosition.y };
+        }
+        return { x: 0, y: 0 };
+    };
     return DragRef;
 }());
 /**
@@ -1361,11 +1446,26 @@ function deepCloneNode(node) {
     var clone = (/** @type {?} */ (node.cloneNode(true)));
     /** @type {?} */
     var descendantsWithId = clone.querySelectorAll('[id]');
+    /** @type {?} */
+    var descendantCanvases = node.querySelectorAll('canvas');
     // Remove the `id` to avoid having multiple elements with the same id on the page.
     clone.removeAttribute('id');
     for (var 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 {?} */
+        var cloneCanvases = clone.querySelectorAll('canvas');
+        for (var i = 0; i < descendantCanvases.length; i++) {
+            /** @type {?} */
+            var correspondingCloneContext = cloneCanvases[i].getContext('2d');
+            if (correspondingCloneContext) {
+                correspondingCloneContext.drawImage(descendantCanvases[i], 0, 0);
+            }
+        }
+    }
     return clone;
 }
 /**
@@ -1414,7 +1514,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
  */
 
 /**
@@ -1490,7 +1590,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.
@@ -1534,7 +1634,10 @@ DropListRef = /** @class */ (function () {
          * Function that is used to determine whether an item
          * is allowed to be moved into a drop container.
          */
-        this.enterPredicate = function () { return true; };
+        this.enterPredicate = (/**
+         * @return {?}
+         */
+        function () { return true; });
         /**
          * Emits right before dragging has started.
          */
@@ -1632,10 +1735,12 @@ DropListRef = /** @class */ (function () {
         var _this = this;
         this.beforeStarted.next();
         this._isDragging = true;
-        this._activeDraggables = this._draggables.slice();
-        this._cacheOwnPosition();
-        this._cacheItemPositions();
-        this._siblings.forEach(function (sibling) { return sibling._startReceiving(_this); });
+        this._cacheItems();
+        this._siblings.forEach((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        function (sibling) { return sibling._startReceiving(_this); }));
     };
     /**
      * Emits an event to indicate that the user moved an item into the container.
@@ -1658,7 +1763,6 @@ DropListRef = /** @class */ (function () {
      * @return {?}
      */
     function (item, pointerX, pointerY) {
-        this.entered.next({ item: 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.
@@ -1697,7 +1801,7 @@ DropListRef = /** @class */ (function () {
             activeDraggables.splice(newIndex, 0, item);
         }
         else {
-            this.element.appendChild(placeholder);
+            coercion.coerceElement(this.element).appendChild(placeholder);
             activeDraggables.push(item);
         }
         // The transform needs to be cleared so it doesn't throw off the measurements.
@@ -1705,6 +1809,7 @@ DropListRef = /** @class */ (function () {
         // 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: item, container: this, currentIndex: this.getItemIndex(item) });
     };
     /**
      * Removes an item from the container after it was dragged into another container by the user.
@@ -1731,26 +1836,33 @@ DropListRef = /** @class */ (function () {
      * @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.
+     * @breaking-change 9.0.0 `distance` parameter to become required.
      */
     /**
      * 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 {?}
      */
     DropListRef.prototype.drop = /**
      * 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 {?}
      */
-    function (item, currentIndex, previousContainer, isPointerOverContainer) {
+    function (item, currentIndex, previousContainer, isPointerOverContainer, distance) {
+        if (distance === void 0) { distance = { x: 0, y: 0 }; }
         this._reset();
         this.dropped.next({
             item: item,
@@ -1758,7 +1870,8 @@ DropListRef = /** @class */ (function () {
             previousIndex: previousContainer.getItemIndex(item),
             container: this,
             previousContainer: previousContainer,
-            isPointerOverContainer: isPointerOverContainer
+            isPointerOverContainer: isPointerOverContainer,
+            distance: distance
         });
     };
     /**
@@ -1782,7 +1895,14 @@ DropListRef = /** @class */ (function () {
     function (items) {
         var _this = this;
         (/** @type {?} */ (this))._draggables = items;
-        items.forEach(function (item) { return item._withDropContainer((/** @type {?} */ (_this))); });
+        items.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) { return item._withDropContainer((/** @type {?} */ (_this))); }));
+        if ((/** @type {?} */ (this)).isDragging()) {
+            (/** @type {?} */ (this))._cacheItems();
+        }
         return (/** @type {?} */ (this));
     };
     /** Sets the layout direction of the drop list. */
@@ -1875,7 +1995,11 @@ DropListRef = /** @class */ (function () {
         /** @type {?} */
         var items = this._orientation === 'horizontal' && this._direction === 'rtl' ?
             this._itemPositions.slice().reverse() : this._itemPositions;
-        return findIndex(items, function (currentItem) { return currentItem.drag === item; });
+        return findIndex(items, (/**
+         * @param {?} currentItem
+         * @return {?}
+         */
+        function (currentItem) { return currentItem.drag === item; }));
     };
     /**
      * Whether the list is able to receive the item that
@@ -1932,7 +2056,11 @@ DropListRef = /** @class */ (function () {
         /** @type {?} */
         var isHorizontal = this._orientation === 'horizontal';
         /** @type {?} */
-        var currentIndex = findIndex(siblings, function (currentItem) { return currentItem.drag === item; });
+        var currentIndex = findIndex(siblings, (/**
+         * @param {?} currentItem
+         * @return {?}
+         */
+        function (currentItem) { return currentItem.drag === item; }));
         /** @type {?} */
         var siblingAtNewPosition = siblings[newIndex];
         /** @type {?} */
@@ -1961,7 +2089,12 @@ DropListRef = /** @class */ (function () {
             container: this,
             item: item
         });
-        siblings.forEach(function (sibling, index) {
+        siblings.forEach((/**
+         * @param {?} sibling
+         * @param {?} index
+         * @return {?}
+         */
+        function (sibling, index) {
             // Don't do anything if the position hasn't changed.
             if (oldOrder[index] === sibling) {
                 return;
@@ -1989,7 +2122,7 @@ DropListRef = /** @class */ (function () {
                 elementToOffset.style.transform = "translate3d(0, " + Math.round(sibling.offset) + "px, 0)";
                 adjustClientRect(sibling.clientRect, offset, 0);
             }
-        });
+        }));
     };
     /** Caches the position of the drop list. */
     /**
@@ -2003,7 +2136,7 @@ DropListRef = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        this._clientRect = this.element.getBoundingClientRect();
+        this._clientRect = coercion.coerceElement(this.element).getBoundingClientRect();
     };
     /** Refreshes the position cache of the items and sibling containers. */
     /**
@@ -2020,7 +2153,11 @@ DropListRef = /** @class */ (function () {
         var _this = this;
         /** @type {?} */
         var isHorizontal = this._orientation === 'horizontal';
-        this._itemPositions = this._activeDraggables.map(function (drag) {
+        this._itemPositions = this._activeDraggables.map((/**
+         * @param {?} drag
+         * @return {?}
+         */
+        function (drag) {
             /** @type {?} */
             var elementToMeasure = _this._dragDropRegistry.isDragging(drag) ?
                 // If the element is being dragged, we have to measure the
@@ -2045,10 +2182,15 @@ DropListRef = /** @class */ (function () {
                     height: clientRect.height
                 }
             };
-        }).sort(function (a, b) {
+        })).sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        function (a, b) {
             return isHorizontal ? a.clientRect.left - b.clientRect.left :
                 a.clientRect.top - b.clientRect.top;
-        });
+        }));
     };
     /** Resets the container to its initial state. */
     /**
@@ -2065,8 +2207,16 @@ DropListRef = /** @class */ (function () {
         var _this = this;
         this._isDragging = false;
         // TODO(crisbeto): may have to wait for the animations to finish.
-        this._activeDraggables.forEach(function (item) { return item.getRootElement().style.transform = ''; });
-        this._siblings.forEach(function (sibling) { return sibling._stopReceiving(_this); });
+        this._activeDraggables.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) { return item.getRootElement().style.transform = ''; }));
+        this._siblings.forEach((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        function (sibling) { return sibling._stopReceiving(_this); }));
         this._activeDraggables = [];
         this._itemPositions = [];
         this._previousSwap.drag = null;
@@ -2213,7 +2363,13 @@ DropListRef = /** @class */ (function () {
         var _this = this;
         /** @type {?} */
         var isHorizontal = this._orientation === 'horizontal';
-        return findIndex(this._itemPositions, function (_a, _, array) {
+        return findIndex(this._itemPositions, (/**
+         * @param {?} __0
+         * @param {?} _
+         * @param {?} array
+         * @return {?}
+         */
+        function (_a, _, array) {
             var drag = _a.drag, clientRect = _a.clientRect;
             if (drag === item) {
                 // If there's only one item left in the container, it must be
@@ -2234,7 +2390,23 @@ DropListRef = /** @class */ (function () {
                 // 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. */
+    /**
+     * Caches the current items in the list and their positions.
+     * @private
+     * @return {?}
+     */
+    DropListRef.prototype._cacheItems = /**
+     * Caches the current items in the list and their positions.
+     * @private
+     * @return {?}
+     */
+    function () {
+        this._activeDraggables = this._draggables.slice();
+        this._cacheItemPositions();
+        this._cacheOwnPosition();
     };
     /**
      * Checks whether the user's pointer is positioned over the container.
@@ -2280,7 +2452,11 @@ DropListRef = /** @class */ (function () {
      * @return {?}
      */
     function (item, x, y) {
-        return this._siblings.find(function (sibling) { return sibling._canReceive(item, x, y); });
+        return this._siblings.find((/**
+         * @param {?} sibling
+         * @return {?}
+         */
+        function (sibling) { return sibling._canReceive(item, x, y); }));
     };
     /**
      * Checks whether the drop list can receive the passed-in item.
@@ -2307,19 +2483,21 @@ DropListRef = /** @class */ (function () {
             return false;
         }
         /** @type {?} */
-        var elementFromPoint = this._document.elementFromPoint(x, y);
+        var 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 {?} */
+        var nativeElement = coercion.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.
@@ -2405,7 +2583,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.
@@ -2458,11 +2636,15 @@ var DragDropRegistry = /** @class */ (function () {
          * 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 = function (event) {
+        this._preventDefaultWhileDragging = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             if (_this._activeDragInstances.size) {
                 event.preventDefault();
             }
-        };
+        });
         this._document = _document;
     }
     /** Adds a drop container to the registry. */
@@ -2502,11 +2684,14 @@ var DragDropRegistry = /** @class */ (function () {
         // 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(function () {
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            function () {
                 // The event handler has to be explicitly active,
                 // because newer browsers make it passive by default.
                 _this._document.addEventListener('touchmove', _this._preventDefaultWhileDragging, activeCapturingEventOptions);
-            });
+            }));
         }
     };
     /** Removes a drop container from the registry. */
@@ -2573,11 +2758,19 @@ var DragDropRegistry = /** @class */ (function () {
             // use `preventDefault` to prevent the page from scrolling while the user is dragging.
             this._globalListeners
                 .set(moveEvent, {
-                handler: function (e) { return _this.pointerMove.next((/** @type {?} */ (e))); },
+                handler: (/**
+                 * @param {?} e
+                 * @return {?}
+                 */
+                function (e) { return _this.pointerMove.next((/** @type {?} */ (e))); }),
                 options: activeCapturingEventOptions
             })
                 .set(upEvent, {
-                handler: function (e) { return _this.pointerUp.next((/** @type {?} */ (e))); },
+                handler: (/**
+                 * @param {?} e
+                 * @return {?}
+                 */
+                function (e) { return _this.pointerUp.next((/** @type {?} */ (e))); }),
                 options: true
             })
                 // Preventing the default action on `mousemove` isn't enough to disable text selection
@@ -2596,11 +2789,19 @@ var DragDropRegistry = /** @class */ (function () {
                     options: activeCapturingEventOptions
                 });
             }
-            this._ngZone.runOutsideAngular(function () {
-                _this._globalListeners.forEach(function (config, name) {
+            this._ngZone.runOutsideAngular((/**
+             * @return {?}
+             */
+            function () {
+                _this._globalListeners.forEach((/**
+                 * @param {?} config
+                 * @param {?} name
+                 * @return {?}
+                 */
+                function (config, name) {
                     _this._document.addEventListener(name, config.handler, config.options);
-                });
-            });
+                }));
+            }));
         }
     };
     /** Stops dragging a drag item instance. */
@@ -2654,7 +2855,11 @@ var DragDropRegistry = /** @class */ (function () {
      * @return {?}
      */
     function (id) {
-        return Array.from(this._dropInstances).find(function (instance) { return instance.id === id; });
+        return Array.from(this._dropInstances).find((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        function (instance) { return instance.id === id; }));
     };
     /**
      * @return {?}
@@ -2664,8 +2869,16 @@ var DragDropRegistry = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this._dragInstances.forEach(function (instance) { return _this.removeDragItem(instance); });
-        this._dropInstances.forEach(function (instance) { return _this.removeDropContainer(instance); });
+        this._dragInstances.forEach((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        function (instance) { return _this.removeDragItem(instance); }));
+        this._dropInstances.forEach((/**
+         * @param {?} instance
+         * @return {?}
+         */
+        function (instance) { return _this.removeDropContainer(instance); }));
         this._clearGlobalListeners();
         this.pointerMove.complete();
         this.pointerUp.complete();
@@ -2683,9 +2896,14 @@ var DragDropRegistry = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this._globalListeners.forEach(function (config, name) {
+        this._globalListeners.forEach((/**
+         * @param {?} config
+         * @param {?} name
+         * @return {?}
+         */
+        function (config, name) {
             _this._document.removeEventListener(name, config.handler, config.options);
-        });
+        }));
         this._globalListeners.clear();
     };
     DragDropRegistry.decorators = [
@@ -2696,13 +2914,13 @@ var DragDropRegistry = /** @class */ (function () {
         { type: core.NgZone },
         { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
     ]; };
-    /** @nocollapse */ DragDropRegistry.ngInjectableDef = core.defineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(core.inject(core.NgZone), core.inject(common.DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
+    /** @nocollapse */ DragDropRegistry.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(core.ɵɵinject(core.NgZone), core.ɵɵinject(common.DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
     return DragDropRegistry;
 }());
 
 /**
  * @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`.
@@ -2774,13 +2992,13 @@ var DragDrop = /** @class */ (function () {
         { type: scrolling.ViewportRuler },
         { type: DragDropRegistry }
     ]; };
-    /** @nocollapse */ DragDrop.ngInjectableDef = core.defineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(core.inject(common.DOCUMENT), core.inject(core.NgZone), core.inject(scrolling.ViewportRuler), core.inject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
+    /** @nocollapse */ DragDrop.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(core.ɵɵinject(common.DOCUMENT), core.ɵɵinject(core.NgZone), core.ɵɵinject(scrolling.ViewportRuler), core.ɵɵinject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
     return DragDrop;
 }());
 
 /**
  * @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.
@@ -2799,12 +3017,12 @@ var 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
@@ -2817,7 +3035,7 @@ var CDK_DRAG_PARENT = new core.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.
@@ -2881,7 +3099,7 @@ var CdkDragHandle = /** @class */ (function () {
 
 /**
  * @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
@@ -2909,7 +3127,7 @@ var CdkDragPlaceholder = /** @class */ (function () {
 
 /**
  * @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
@@ -2937,7 +3155,7 @@ var CdkDragPreview = /** @class */ (function () {
 
 /**
  * @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`.
@@ -3003,23 +3221,64 @@ var CdkDrag = /** @class */ (function () {
          * 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 rxjs.Observable(function (observer) {
+        this.moved = new rxjs.Observable((/**
+         * @param {?} observer
+         * @return {?}
+         */
+        function (observer) {
             /** @type {?} */
-            var subscription = _this._dragRef.moved.pipe(operators.map(function (movedEvent) { return ({
+            var subscription = _this._dragRef.moved.pipe(operators.map((/**
+             * @param {?} movedEvent
+             * @return {?}
+             */
+            function (movedEvent) { return ({
                 source: _this,
                 pointerPosition: movedEvent.pointerPosition,
                 event: movedEvent.event,
-                delta: movedEvent.delta
-            }); })).subscribe(observer);
-            return function () {
+                delta: movedEvent.delta,
+                distance: movedEvent.distance
+            }); }))).subscribe(observer);
+            return (/**
+             * @return {?}
+             */
+            function () {
                 subscription.unsubscribe();
-            };
-        });
+            });
+        }));
         this._dragRef = dragDrop.createDrag(element, config);
         this._dragRef.data = this;
         this._syncInputs(this._dragRef);
         this._handleEvents(this._dragRef);
     }
+    Object.defineProperty(CdkDrag.prototype, "boundaryElementSelector", {
+        /**
+         * 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
+         */
+        get: /**
+         * 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 {?}
+         */
+        function () {
+            return typeof this.boundaryElement === 'string' ? this.boundaryElement : (/** @type {?} */ (undefined));
+        },
+        set: /**
+         * @param {?} selector
+         * @return {?}
+         */
+        function (selector) {
+            this.boundaryElement = selector;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(CdkDrag.prototype, "disabled", {
         /** Whether starting to drag this element is disabled. */
         get: /**
@@ -3109,33 +3368,60 @@ var CdkDrag = /** @class */ (function () {
         // their original DOM position and then they get transferred to the portal.
         this._ngZone.onStable.asObservable()
             .pipe(operators.take(1), operators.takeUntil(this._destroyed))
-            .subscribe(function () {
+            .subscribe((/**
+         * @return {?}
+         */
+        function () {
             _this._updateRootElement();
             // Listen for any newly-added handles.
             _this._handles.changes.pipe(operators.startWith(_this._handles), 
             // Sync the new handles with the DragRef.
-            operators.tap(function (handles) {
+            operators.tap((/**
+             * @param {?} handles
+             * @return {?}
+             */
+            function (handles) {
                 /** @type {?} */
                 var childHandleElements = handles
-                    .filter(function (handle) { return handle._parentDrag === _this; })
-                    .map(function (handle) { return handle.element; });
+                    .filter((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                function (handle) { return handle._parentDrag === _this; }))
+                    .map((/**
+                 * @param {?} handle
+                 * @return {?}
+                 */
+                function (handle) { return handle.element; }));
                 _this._dragRef.withHandles(childHandleElements);
-            }), 
+            })), 
             // Listen if the state of any of the handles changes.
-            operators.switchMap(function (handles) {
-                return rxjs.merge.apply(void 0, handles.map(function (item) { return item._stateChanges; }));
-            }), operators.takeUntil(_this._destroyed)).subscribe(function (handleInstance) {
+            operators.switchMap((/**
+             * @param {?} handles
+             * @return {?}
+             */
+            function (handles) {
+                return rxjs.merge.apply(void 0, handles.map((/**
+                 * @param {?} item
+                 * @return {?}
+                 */
+                function (item) { return item._stateChanges; })));
+            })), operators.takeUntil(_this._destroyed)).subscribe((/**
+             * @param {?} handleInstance
+             * @return {?}
+             */
+            function (handleInstance) {
                 // Enabled/disable the handle that changed in the DragRef.
                 /** @type {?} */
                 var dragRef = _this._dragRef;
                 /** @type {?} */
                 var handle = handleInstance.element.nativeElement;
                 handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
-            });
+            }));
             if (_this.freeDragPosition) {
                 _this._dragRef.setFreeDragPosition(_this.freeDragPosition);
             }
-        });
+        }));
     };
     /**
      * @param {?} changes
@@ -3149,7 +3435,7 @@ var CdkDrag = /** @class */ (function () {
         /** @type {?} */
         var rootSelectorChange = changes['rootElementSelector'];
         /** @type {?} */
-        var positionChange = changes['positionChange'];
+        var 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) {
@@ -3194,21 +3480,32 @@ var CdkDrag = /** @class */ (function () {
         }
         this._dragRef.withRootElement(rootElement || element);
     };
-    /** Gets the boundary element, based on the `boundaryElementSelector`. */
+    /** Gets the boundary element, based on the `boundaryElement` value. */
     /**
-     * Gets the boundary element, based on the `boundaryElementSelector`.
+     * Gets the boundary element, based on the `boundaryElement` value.
      * @private
      * @return {?}
      */
     CdkDrag.prototype._getBoundaryElement = /**
-     * Gets the boundary element, based on the `boundaryElementSelector`.
+     * Gets the boundary element, based on the `boundaryElement` value.
      * @private
      * @return {?}
      */
     function () {
         /** @type {?} */
-        var selector = this.boundaryElementSelector;
-        return selector ? getClosestMatchingAncestor(this.element.nativeElement, selector) : null;
+        var boundary = this.boundaryElement;
+        if (!boundary) {
+            return null;
+        }
+        if (typeof boundary === 'string') {
+            return getClosestMatchingAncestor(this.element.nativeElement, boundary);
+        }
+        /** @type {?} */
+        var element = coercion.coerceElement(boundary);
+        if (core.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. */
     /**
@@ -3225,7 +3522,10 @@ var CdkDrag = /** @class */ (function () {
      */
     function (ref) {
         var _this = this;
-        ref.beforeStarted.subscribe(function () {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        function () {
             if (!ref.isDragging()) {
                 /** @type {?} */
                 var dir = _this._dir;
@@ -3253,7 +3553,7 @@ var CdkDrag = /** @class */ (function () {
                     ref.withDirection(dir.value);
                 }
             }
-        });
+        }));
     };
     /** Handles the events from the underlying `DragRef`. */
     /**
@@ -3270,43 +3570,67 @@ var CdkDrag = /** @class */ (function () {
      */
     function (ref) {
         var _this = this;
-        ref.started.subscribe(function () {
+        ref.started.subscribe((/**
+         * @return {?}
+         */
+        function () {
             _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(function () {
+        }));
+        ref.released.subscribe((/**
+         * @return {?}
+         */
+        function () {
             _this.released.emit({ source: _this });
-        });
-        ref.ended.subscribe(function () {
-            _this.ended.emit({ source: _this });
+        }));
+        ref.ended.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (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(function (event) {
+        }));
+        ref.entered.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.entered.emit({
                 container: event.container.data,
-                item: _this
+                item: _this,
+                currentIndex: event.currentIndex
             });
-        });
-        ref.exited.subscribe(function (event) {
+        }));
+        ref.exited.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.exited.emit({
                 container: event.container.data,
                 item: _this
             });
-        });
-        ref.dropped.subscribe(function (event) {
+        }));
+        ref.dropped.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (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 = [
         { type: core.Directive, args: [{
@@ -3339,7 +3663,7 @@ var CdkDrag = /** @class */ (function () {
         data: [{ type: core.Input, args: ['cdkDragData',] }],
         lockAxis: [{ type: core.Input, args: ['cdkDragLockAxis',] }],
         rootElementSelector: [{ type: core.Input, args: ['cdkDragRootElement',] }],
-        boundaryElementSelector: [{ type: core.Input, args: ['cdkDragBoundary',] }],
+        boundaryElement: [{ type: core.Input, args: ['cdkDragBoundary',] }],
         dragStartDelay: [{ type: core.Input, args: ['cdkDragStartDelay',] }],
         freeDragPosition: [{ type: core.Input, args: ['cdkDragFreeDragPosition',] }],
         disabled: [{ type: core.Input, args: ['cdkDragDisabled',] }],
@@ -3376,7 +3700,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`
@@ -3433,7 +3757,7 @@ var CdkDropListGroup = /** @class */ (function () {
 
 /**
  * @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.
@@ -3480,7 +3804,10 @@ var CdkDropList = /** @class */ (function () {
          * Function that is used to determine whether an item
          * is allowed to be moved into a drop container.
          */
-        this.enterPredicate = function () { return true; };
+        this.enterPredicate = (/**
+         * @return {?}
+         */
+        function () { return true; });
         /**
          * Emits when the user drops an item inside the container.
          */
@@ -3500,9 +3827,14 @@ var CdkDropList = /** @class */ (function () {
         this.sorted = new core.EventEmitter();
         this._dropListRef = dragDrop.createDropList(element);
         this._dropListRef.data = this;
-        this._dropListRef.enterPredicate = function (drag, drop) {
+        this._dropListRef.enterPredicate = (/**
+         * @param {?} drag
+         * @param {?} drop
+         * @return {?}
+         */
+        function (drag, drop) {
             return _this.enterPredicate(drag.data, drop.data);
-        };
+        });
         this._syncInputs(this._dropListRef);
         this._handleEvents(this._dropListRef);
         CdkDropList._dropLists.push(this);
@@ -3556,9 +3888,17 @@ var CdkDropList = /** @class */ (function () {
         var _this = this;
         this._draggables.changes
             .pipe(operators.startWith(this._draggables), operators.takeUntil(this._destroyed))
-            .subscribe(function (items) {
-            _this._dropListRef.withItems(items.map(function (drag) { return drag._dragRef; }));
-        });
+            .subscribe((/**
+         * @param {?} items
+         * @return {?}
+         */
+        function (items) {
+            _this._dropListRef.withItems(items.map((/**
+             * @param {?} drag
+             * @return {?}
+             */
+            function (drag) { return drag._dragRef; })));
+        }));
     };
     /**
      * @return {?}
@@ -3769,28 +4109,55 @@ var CdkDropList = /** @class */ (function () {
         if (this._dir) {
             this._dir.change
                 .pipe(operators.startWith(this._dir.value), operators.takeUntil(this._destroyed))
-                .subscribe(function (value) { return ref.withDirection(value); });
+                .subscribe((/**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) { return ref.withDirection(value); }));
         }
-        ref.beforeStarted.subscribe(function () {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        function () {
             /** @type {?} */
-            var siblings = coercion.coerceArray(_this.connectedTo).map(function (drop) {
+            var siblings = coercion.coerceArray(_this.connectedTo).map((/**
+             * @param {?} drop
+             * @return {?}
+             */
+            function (drop) {
                 return typeof drop === 'string' ?
-                    (/** @type {?} */ (CdkDropList._dropLists.find(function (list) { return list.id === drop; }))) : drop;
-            });
+                    (/** @type {?} */ (CdkDropList._dropLists.find((/**
+                     * @param {?} list
+                     * @return {?}
+                     */
+                    function (list) { return list.id === drop; })))) : drop;
+            }));
             if (_this._group) {
-                _this._group._items.forEach(function (drop) {
+                _this._group._items.forEach((/**
+                 * @param {?} drop
+                 * @return {?}
+                 */
+                function (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(function (drop) { return drop && drop !== _this; }).map(function (list) { return list._dropListRef; }))
+                .connectedTo(siblings.filter((/**
+             * @param {?} drop
+             * @return {?}
+             */
+            function (drop) { return drop && drop !== _this; })).map((/**
+             * @param {?} list
+             * @return {?}
+             */
+            function (list) { return list._dropListRef; })))
                 .withOrientation(_this.orientation);
-        });
+        }));
     };
     /** Handles events from the underlying DropListRef. */
     /**
@@ -3807,43 +4174,64 @@ var CdkDropList = /** @class */ (function () {
      */
     function (ref) {
         var _this = this;
-        ref.beforeStarted.subscribe(function () {
+        ref.beforeStarted.subscribe((/**
+         * @return {?}
+         */
+        function () {
             _this._changeDetectorRef.markForCheck();
-        });
-        ref.entered.subscribe(function (event) {
+        }));
+        ref.entered.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.entered.emit({
                 container: _this,
-                item: event.item.data
+                item: event.item.data,
+                currentIndex: event.currentIndex
             });
-        });
-        ref.exited.subscribe(function (event) {
+        }));
+        ref.exited.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.exited.emit({
                 container: _this,
                 item: event.item.data
             });
             _this._changeDetectorRef.markForCheck();
-        });
-        ref.sorted.subscribe(function (event) {
+        }));
+        ref.sorted.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
             _this.sorted.emit({
                 previousIndex: event.previousIndex,
                 currentIndex: event.currentIndex,
                 container: _this,
                 item: event.item.data
             });
-        });
-        ref.dropped.subscribe(function (event) {
+        }));
+        ref.dropped.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (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();
-        });
+        }));
     };
     /**
      * Keeps track of the drop lists that are currently on the page.
@@ -3876,7 +4264,10 @@ var CdkDropList = /** @class */ (function () {
         { type: CdkDropListGroup, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }
     ]; };
     CdkDropList.propDecorators = {
-        _draggables: [{ type: core.ContentChildren, args: [core.forwardRef(function () { return CdkDrag; }), {
+        _draggables: [{ type: core.ContentChildren, args: [core.forwardRef((/**
+                     * @return {?}
+                     */
+                    function () { 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
@@ -3899,7 +4290,7 @@ var CdkDropList = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var DragDropModule = /** @class */ (function () {
     function DragDropModule() {