@angular/cdk 7.2.1 → 7.2.2

package/esm2015/cdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.js","sources":["../../src/cdk/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('7.2.1');\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAWA,AAAA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;;"}
+{"version":3,"file":"cdk.js","sources":["../../src/cdk/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('7.2.2');\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAWA,AAAA,MAAa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;;"}

package/esm2015/drag-drop.js

@@ -8,11 +8,11 @@
 import { InjectionToken, Injectable, NgZone, Inject, NgModule, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, Optional, Directive, ChangeDetectorRef, SkipSelf, ContentChild, ViewContainerRef, TemplateRef, defineInjectable, inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import { Subject, Subscription, Observable } from 'rxjs';
-import { coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
+import { Subject, Subscription, Observable, merge } from 'rxjs';
+import { coerceBooleanProperty, coerceElement, coerceArray } from '@angular/cdk/coercion';
 import { Directionality } from '@angular/cdk/bidi';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { startWith, take, map } from 'rxjs/operators';
+import { startWith, take, map, takeUntil, switchMap, tap } from 'rxjs/operators';
 
 /**
  * @fileoverview added by tsickle
@@ -408,6 +408,10 @@ class CdkDragHandle {
      */
     constructor(element, parentDrag) {
         this.element = element;
+        /**
+         * Emits when the state of the handle has changed.
+         */
+        this._stateChanges = new Subject();
         this._disabled = false;
         this._parentDrag = parentDrag;
         toggleNativeDragInteractions(element.nativeElement, false);
@@ -423,6 +427,13 @@ class CdkDragHandle {
      */
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
+        this._stateChanges.next(this);
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this._stateChanges.complete();
     }
 }
 CdkDragHandle.decorators = [
@@ -645,6 +656,10 @@ class DragRef {
          * Elements that can be used to drag the draggable item.
          */
         this._handles = [];
+        /**
+         * Registered handles that are currently disabled.
+         */
+        this._disabledHandles = new Set();
         this._disabled = false;
         /**
          * Emits as the drag sequence is being prepared.
@@ -678,7 +693,7 @@ 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 = Observable.create((observer) => {
+        this.moved = new Observable((observer) => {
             /** @type {?} */
             const subscription = this._moveEvents.subscribe(observer);
             this._moveEventSubscriptions++;
@@ -696,14 +711,12 @@ class DragRef {
             if (this._handles.length) {
                 /** @type {?} */
                 const targetHandle = this._handles.find(handle => {
-                    /** @type {?} */
-                    const element = handle.element.nativeElement;
                     /** @type {?} */
                     const target = event.target;
-                    return !!target && (target === element || element.contains((/** @type {?} */ (target))));
+                    return !!target && (target === handle || handle.contains((/** @type {?} */ (target))));
                 });
-                if (targetHandle && !targetHandle.disabled && !this.disabled) {
-                    this._initializeDragSequence(targetHandle.element.nativeElement, event);
+                if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {
+                    this._initializeDragSequence(targetHandle, event);
                 }
             }
             else if (!this.disabled) {
@@ -756,9 +769,11 @@ class DragRef {
                     constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
                 /** @type {?} */
                 const transform = getTransform(activeTransform.x, activeTransform.y);
-                // Preserve the previous `transform` value, if there was one.
+                // Preserve the previous `transform` value, if there was one. Note that we apply our own
+                // transform before the user's, because things like rotation can affect which direction
+                // the element will be translated towards.
                 this._rootElement.style.transform = this._initialTransform ?
-                    this._initialTransform + ' ' + transform : transform;
+                    transform + ' ' + this._initialTransform : transform;
                 // Apply transform as attribute if dragging and svg element to work for IE
                 if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {
                     /** @type {?} */
@@ -860,9 +875,8 @@ class DragRef {
      * @return {THIS}
      */
     withHandles(handles) {
-        // TODO(crisbeto): have this accept HTMLElement[] | ElementRef<HTMLElement>[]
-        (/** @type {?} */ (this))._handles = handles;
-        handles.forEach(handle => toggleNativeDragInteractions(handle.element.nativeElement, false));
+        (/** @type {?} */ (this))._handles = handles.map(handle => coerceElement(handle));
+        (/** @type {?} */ (this))._handles.forEach(handle => toggleNativeDragInteractions(handle, false));
         (/** @type {?} */ (this))._toggleNativeDragInteractions();
         return (/** @type {?} */ (this));
     }
@@ -870,24 +884,24 @@ class DragRef {
      * Registers the template that should be used for the drag preview.
      * @template THIS
      * @this {THIS}
-     * @param {?} template
+     * @param {?} template Template that from which to stamp out the preview.
+     * @param {?=} context Variables to add to the template's context.
      * @return {THIS}
      */
-    withPreviewTemplate(template) {
-        // TODO(crisbeto): have this accept a TemplateRef
-        (/** @type {?} */ (this))._previewTemplate = template;
+    withPreviewTemplate(template, context) {
+        (/** @type {?} */ (this))._previewTemplate = { template, context };
         return (/** @type {?} */ (this));
     }
     /**
      * Registers the template that should be used for the drag placeholder.
      * @template THIS
      * @this {THIS}
-     * @param {?} template
+     * @param {?} template Template that from which to stamp out the placeholder.
+     * @param {?=} context Variables to add to the template's context.
      * @return {THIS}
      */
-    withPlaceholderTemplate(template) {
-        // TODO(crisbeto): have this accept a TemplateRef
-        (/** @type {?} */ (this))._placeholderTemplate = template;
+    withPlaceholderTemplate(template, context) {
+        (/** @type {?} */ (this))._placeholderTemplate = { template, context };
         return (/** @type {?} */ (this));
     }
     /**
@@ -901,13 +915,14 @@ class DragRef {
      */
     withRootElement(rootElement) {
         /** @type {?} */
-        const element = rootElement instanceof ElementRef ? rootElement.nativeElement : rootElement;
+        const element = coerceElement(rootElement);
         if (element !== (/** @type {?} */ (this))._rootElement) {
             if ((/** @type {?} */ (this))._rootElement) {
                 (/** @type {?} */ (this))._removeRootElementListeners((/** @type {?} */ (this))._rootElement);
             }
             element.addEventListener('mousedown', (/** @type {?} */ (this))._pointerDown, activeEventListenerOptions);
             element.addEventListener('touchstart', (/** @type {?} */ (this))._pointerDown, passiveEventListenerOptions);
+            (/** @type {?} */ (this))._initialTransform = undefined;
             (/** @type {?} */ (this))._rootElement = element;
         }
         return (/** @type {?} */ (this));
@@ -920,8 +935,7 @@ class DragRef {
      * @return {THIS}
      */
     withBoundaryElement(boundaryElement) {
-        (/** @type {?} */ (this))._boundaryElement = boundaryElement instanceof ElementRef ?
-            boundaryElement.nativeElement : boundaryElement;
+        (/** @type {?} */ (this))._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null;
         return (/** @type {?} */ (this));
     }
     /**
@@ -950,6 +964,7 @@ class DragRef {
         this.dropped.complete();
         this._moveEvents.complete();
         this._handles = [];
+        this._disabledHandles.clear();
         this._boundaryElement = this._rootElement = this._placeholderTemplate =
             this._previewTemplate = this._nextSibling = (/** @type {?} */ (null));
     }
@@ -965,10 +980,28 @@ class DragRef {
      * @return {?}
      */
     reset() {
-        this._rootElement.style.transform = '';
+        this._rootElement.style.transform = this._initialTransform || '';
         this._activeTransform = { x: 0, y: 0 };
         this._passiveTransform = { x: 0, y: 0 };
     }
+    /**
+     * Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.
+     * @param {?} handle Handle element that should be disabled.
+     * @return {?}
+     */
+    disableHandle(handle) {
+        if (this._handles.indexOf(handle) > -1) {
+            this._disabledHandles.add(handle);
+        }
+    }
+    /**
+     * Enables a handle, if it has been disabled.
+     * @param {?} handle Handle element to be enabled.
+     * @return {?}
+     */
+    enableHandle(handle) {
+        this._disabledHandles.delete(handle);
+    }
     /**
      * Unsubscribes from the global subscriptions.
      * @private
@@ -1097,7 +1130,8 @@ class DragRef {
         }
         // If we have a custom preview template, the element won't be visible anyway so we avoid the
         // extra `getBoundingClientRect` calls and just move the preview next to the cursor.
-        this._pickupPositionInElement = this._previewTemplate ? { x: 0, y: 0 } :
+        this._pickupPositionInElement = this._previewTemplate && this._previewTemplate.template ?
+            { x: 0, y: 0 } :
             this._getPointerPositionInElement(referenceElement, event);
         /** @type {?} */
         const pointerPosition = this._pickupPositionOnPage = this._getPointerPositionOnPage(event);
@@ -1158,7 +1192,8 @@ class DragRef {
     _updateActiveDropContainer({ x, y }) {
         // Drop container that draggable has been moved into.
         /** @type {?} */
-        let newContainer = (/** @type {?} */ (this.dropContainer))._getSiblingContainerFromPosition(this, x, y);
+        let newContainer = (/** @type {?} */ (this.dropContainer))._getSiblingContainerFromPosition(this, x, y) ||
+            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
@@ -1167,7 +1202,7 @@ class DragRef {
             this._initialContainer._isOverContainer(x, y)) {
             newContainer = this._initialContainer;
         }
-        if (newContainer) {
+        if (newContainer && newContainer !== this.dropContainer) {
             this._ngZone.run(() => {
                 // Notify the old container that the item has left.
                 this.exited.next({ item: this, container: (/** @type {?} */ (this.dropContainer)) });
@@ -1189,11 +1224,13 @@ class DragRef {
      * @return {?}
      */
     _createPreviewElement() {
+        /** @type {?} */
+        const previewTemplate = this._previewTemplate;
         /** @type {?} */
         let preview;
-        if (this._previewTemplate) {
+        if (previewTemplate && previewTemplate.template) {
             /** @type {?} */
-            const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef, this._previewTemplate.data);
+            const viewRef = this._viewContainerRef.createEmbeddedView(previewTemplate.template, previewTemplate.context);
             preview = viewRef.rootNodes[0];
             this._previewRef = viewRef;
             preview.style.transform =
@@ -1273,10 +1310,12 @@ class DragRef {
      * @return {?}
      */
     _createPlaceholderElement() {
+        /** @type {?} */
+        const placeholderTemplate = this._placeholderTemplate;
         /** @type {?} */
         let placeholder;
-        if (this._placeholderTemplate) {
-            this._placeholderRef = this._viewContainerRef.createEmbeddedView(this._placeholderTemplate.templateRef, this._placeholderTemplate.data);
+        if (placeholderTemplate && placeholderTemplate.template) {
+            this._placeholderRef = this._viewContainerRef.createEmbeddedView(placeholderTemplate.template, placeholderTemplate.context);
             placeholder = this._placeholderRef.rootNodes[0];
         }
         else {
@@ -1516,10 +1555,7 @@ class CdkDrag {
         this._dragDropRegistry = _dragDropRegistry;
         this._config = _config;
         this._dir = _dir;
-        /**
-         * Subscription to the stream that initializes the root element.
-         */
-        this._rootElementInitSubscription = Subscription.EMPTY;
+        this._destroyed = new Subject();
         this._disabled = false;
         /**
          * Emits when the user starts dragging the item.
@@ -1549,7 +1585,7 @@ 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 = Observable.create((observer) => {
+        this.moved = new Observable((observer) => {
             /** @type {?} */
             const subscription = this._dragRef.moved.pipe(map(movedEvent => ({
                 source: this,
@@ -1564,16 +1600,7 @@ class CdkDrag {
         /** @type {?} */
         const ref = this._dragRef = new DragRef(element, this._document, this._ngZone, this._viewContainerRef, this._viewportRuler, this._dragDropRegistry, this._config, this.dropContainer ? this.dropContainer._dropListRef : undefined, this._dir);
         ref.data = this;
-        ref.beforeStarted.subscribe(() => {
-            if (!ref.isDragging()) {
-                ref.disabled = this.disabled;
-                ref.lockAxis = this.lockAxis;
-                ref
-                    .withBoundaryElement(this._getBoundaryElement())
-                    .withPlaceholderTemplate(this._placeholderTemplate)
-                    .withPreviewTemplate(this._previewTemplate);
-            }
-        });
+        this._syncInputs(ref);
         this._proxyEvents(ref);
     }
     /**
@@ -1621,14 +1648,30 @@ class CdkDrag {
         // element to be in the proper place in the DOM. This is mostly relevant
         // for draggable elements inside portals since they get stamped out in
         // their original DOM position and then they get transferred to the portal.
-        this._rootElementInitSubscription = this._ngZone.onStable.asObservable()
-            .pipe(take(1))
+        this._ngZone.onStable.asObservable()
+            .pipe(take(1), takeUntil(this._destroyed))
             .subscribe(() => {
             this._updateRootElement();
-            this._handles.changes
-                .pipe(startWith(this._handles))
-                .subscribe((handleList) => {
-                this._dragRef.withHandles(handleList.filter(handle => handle._parentDrag === this));
+            // Listen for any newly-added handles.
+            this._handles.changes.pipe(startWith(this._handles), 
+            // Sync the new handles with the DragRef.
+            tap((handles) => {
+                /** @type {?} */
+                const childHandleElements = handles
+                    .filter(handle => handle._parentDrag === this)
+                    .map(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 => {
+                // 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);
             });
         });
     }
@@ -1649,7 +1692,8 @@ class CdkDrag {
      * @return {?}
      */
     ngOnDestroy() {
-        this._rootElementInitSubscription.unsubscribe();
+        this._destroyed.next();
+        this._destroyed.complete();
         this._dragRef.dispose();
     }
     /**
@@ -1679,6 +1723,26 @@ class CdkDrag {
         const selector = this.boundaryElementSelector;
         return selector ? getClosestMatchingAncestor(this.element.nativeElement, selector) : null;
     }
+    /**
+     * Syncs the inputs of the CdkDrag with the options of the underlying DragRef.
+     * @private
+     * @param {?} ref
+     * @return {?}
+     */
+    _syncInputs(ref) {
+        ref.beforeStarted.subscribe(() => {
+            if (!ref.isDragging()) {
+                const { _placeholderTemplate: placeholder, _previewTemplate: preview } = this;
+                ref.disabled = this.disabled;
+                ref.lockAxis = this.lockAxis;
+                ref.withBoundaryElement(this._getBoundaryElement());
+                placeholder ? ref.withPlaceholderTemplate(placeholder.templateRef, placeholder.data) :
+                    ref.withPlaceholderTemplate(null);
+                preview ? ref.withPreviewTemplate(preview.templateRef, preview.data) :
+                    ref.withPreviewTemplate(null);
+            }
+        });
+    }
     /**
      * Proxies the events from a DragRef to events that
      * match the interfaces of the CdkDrag outputs.
@@ -1900,23 +1964,26 @@ class DropListRef {
          */
         this._isDragging = false;
         /**
-         * Cache of the dimensions of all the items and the sibling containers.
+         * Cache of the dimensions of all the items inside the container.
          */
-        this._positionCache = { items: [], siblings: [], self: (/** @type {?} */ ({})) };
+        this._itemPositions = [];
         /**
          * Keeps track of the item that was last swapped with the dragged item, as
          * well as what direction the pointer was moving in when the swap occured.
          */
         this._previousSwap = { drag: (/** @type {?} */ (null)), delta: 0 };
+        /**
+         * Drop lists that are connected to the current one.
+         */
         this._siblings = [];
         /**
          * Direction in which the list is oriented.
          */
         this._orientation = 'vertical';
         /**
-         * Amount of connected siblings that currently have a dragged item.
+         * Connected siblings that currently have a dragged item.
          */
-        this._activeSiblings = 0;
+        this._activeSiblings = new Set();
         _dragDropRegistry.registerDropContainer(this);
         this._document = _document;
     }
@@ -1930,6 +1997,7 @@ class DropListRef {
         this.exited.complete();
         this.dropped.complete();
         this.sorted.complete();
+        this._activeSiblings.clear();
         this._dragDropRegistry.removeDropContainer(this);
     }
     /**
@@ -1947,8 +2015,9 @@ class DropListRef {
         this.beforeStarted.next();
         this._isDragging = true;
         this._activeDraggables = this._draggables.slice();
-        this._cachePositions();
-        this._positionCache.siblings.forEach(sibling => sibling.drop._toggleIsReceiving(true));
+        this._cacheOwnPosition();
+        this._cacheItemPositions();
+        this._siblings.forEach(sibling => sibling._startReceiving(this));
     }
     /**
      * Emits an event to indicate that the user moved an item into the container.
@@ -1991,7 +2060,7 @@ class DropListRef {
         placeholder.style.transform = '';
         // Note that the positions were already cached when we called `start` above,
         // but we need to refresh them since the amount of items has changed.
-        this._cachePositions();
+        this._cacheItemPositions();
     }
     /**
      * Removes an item from the container after it was dragged into another container by the user.
@@ -2070,7 +2139,7 @@ class DropListRef {
         // we need to invert the array when determining the index.
         /** @type {?} */
         const items = this._orientation === 'horizontal' && this._dir && this._dir.value === 'rtl' ?
-            this._positionCache.items.slice().reverse() : this._positionCache.items;
+            this._itemPositions.slice().reverse() : this._itemPositions;
         return findIndex(items, currentItem => currentItem.drag === item);
     }
     /**
@@ -2079,7 +2148,7 @@ class DropListRef {
      * @return {?}
      */
     isReceiving() {
-        return this._activeSiblings > 0;
+        return this._activeSiblings.size > 0;
     }
     /**
      * Sorts an item inside the container based on its position.
@@ -2095,7 +2164,7 @@ class DropListRef {
             return;
         }
         /** @type {?} */
-        const siblings = this._positionCache.items;
+        const siblings = this._itemPositions;
         /** @type {?} */
         const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);
         if (newIndex === -1 && siblings.length > 0) {
@@ -2163,17 +2232,23 @@ class DropListRef {
             }
         });
     }
+    /**
+     * Caches the position of the drop list.
+     * @private
+     * @return {?}
+     */
+    _cacheOwnPosition() {
+        this._clientRect = this.element.nativeElement.getBoundingClientRect();
+    }
     /**
      * Refreshes the position cache of the items and sibling containers.
      * @private
      * @return {?}
      */
-    _cachePositions() {
+    _cacheItemPositions() {
         /** @type {?} */
         const isHorizontal = this._orientation === 'horizontal';
-        this._positionCache.self = this.element.nativeElement.getBoundingClientRect();
-        this._positionCache.items = this._activeDraggables
-            .map(drag => {
+        this._itemPositions = this._activeDraggables.map(drag => {
             /** @type {?} */
             const elementToMeasure = this._dragDropRegistry.isDragging(drag) ?
                 // If the element is being dragged, we have to measure the
@@ -2198,24 +2273,10 @@ class DropListRef {
                     height: clientRect.height
                 }
             };
-        })
-            .sort((a, b) => {
+        }).sort((a, b) => {
             return isHorizontal ? a.clientRect.left - b.clientRect.left :
                 a.clientRect.top - b.clientRect.top;
         });
-        this._positionCache.siblings = this._siblings.map(drop => ({
-            drop,
-            clientRect: drop.element.nativeElement.getBoundingClientRect()
-        }));
-    }
-    /**
-     * Toggles whether the list can receive the item that is currently being dragged.
-     * Usually called by a sibling that initiated the dragging.
-     * @param {?} isDragging
-     * @return {?}
-     */
-    _toggleIsReceiving(isDragging) {
-        this._activeSiblings = Math.max(0, this._activeSiblings + (isDragging ? 1 : -1));
     }
     /**
      * Resets the container to its initial state.
@@ -2226,10 +2287,9 @@ class DropListRef {
         this._isDragging = false;
         // TODO(crisbeto): may have to wait for the animations to finish.
         this._activeDraggables.forEach(item => item.getRootElement().style.transform = '');
-        this._positionCache.siblings.forEach(sibling => sibling.drop._toggleIsReceiving(false));
+        this._siblings.forEach(sibling => sibling._stopReceiving(this));
         this._activeDraggables = [];
-        this._positionCache.items = [];
-        this._positionCache.siblings = [];
+        this._itemPositions = [];
         this._previousSwap.drag = null;
         this._previousSwap.delta = 0;
     }
@@ -2276,7 +2336,7 @@ class DropListRef {
      * @return {?}
      */
     _isPointerNearDropContainer(pointerX, pointerY) {
-        const { top, right, bottom, left, width, height } = this._positionCache.self;
+        const { top, right, bottom, left, width, height } = this._clientRect;
         /** @type {?} */
         const xThreshold = width * DROP_PROXIMITY_THRESHOLD;
         /** @type {?} */
@@ -2317,7 +2377,7 @@ class DropListRef {
     _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {
         /** @type {?} */
         const isHorizontal = this._orientation === 'horizontal';
-        return findIndex(this._positionCache.items, ({ drag, clientRect }, _, array) => {
+        return findIndex(this._itemPositions, ({ 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.
@@ -2346,7 +2406,7 @@ class DropListRef {
      * @return {?}
      */
     _isOverContainer(x, y) {
-        return isInsideClientRect(this._positionCache.self, x, y);
+        return isInsideClientRect(this._clientRect, x, y);
     }
     /**
      * Figures out whether an item should be moved into a sibling
@@ -2357,34 +2417,56 @@ class DropListRef {
      * @return {?}
      */
     _getSiblingContainerFromPosition(item, x, y) {
-        /** @type {?} */
-        const results = this._positionCache.siblings.filter(sibling => {
-            return isInsideClientRect(sibling.clientRect, x, y);
-        });
-        // No drop containers are intersecting with the pointer.
-        if (!results.length) {
-            return null;
+        return this._siblings.find(sibling => sibling._canReceive(item, x, y));
+    }
+    /**
+     * Checks whether the drop list can receive the passed-in item.
+     * @param {?} item Item that is being dragged into the list.
+     * @param {?} x Position of the item along the X axis.
+     * @param {?} y Position of the item along the Y axis.
+     * @return {?}
+     */
+    _canReceive(item, x, y) {
+        if (!this.enterPredicate(item, this) || !isInsideClientRect(this._clientRect, x, y)) {
+            return false;
         }
         /** @type {?} */
         const elementFromPoint = 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 null;
+            return false;
         }
+        /** @type {?} */
+        const element = this.element.nativeElement;
         // 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 === element || element.contains(elementFromPoint);
+    }
+    /**
+     * Called by one of the connected drop lists when a dragging sequence has started.
+     * @param {?} sibling Sibling in which dragging has started.
+     * @return {?}
+     */
+    _startReceiving(sibling) {
         /** @type {?} */
-        const result = results.find(sibling => {
-            /** @type {?} */
-            const element = sibling.drop.element.nativeElement;
-            return element === elementFromPoint || element.contains(elementFromPoint);
-        });
-        return result && result.drop.enterPredicate(item, result.drop) ? result.drop : null;
+        const activeSiblings = this._activeSiblings;
+        if (!activeSiblings.has(sibling)) {
+            activeSiblings.add(sibling);
+            this._cacheOwnPosition();
+        }
+    }
+    /**
+     * Called by a connected drop list when dragging has stopped.
+     * @param {?} sibling Sibling whose dragging has stopped.
+     * @return {?}
+     */
+    _stopReceiving(sibling) {
+        this._activeSiblings.delete(sibling);
     }
 }
 /**
@@ -2506,7 +2588,7 @@ class CdkDropList {
             return this.enterPredicate(drag.data, drop.data);
         };
         this._syncInputs(ref);
-        this._proxyEvents(ref);
+        this._handleEvents(ref);
         CdkDropList._dropLists.push(this);
         if (_group) {
             _group._items.add(this);
@@ -2646,13 +2728,12 @@ class CdkDropList {
         });
     }
     /**
-     * Proxies the events from a DropListRef to events that
-     * match the interfaces of the CdkDropList outputs.
+     * Handles events from the underlying DropListRef.
      * @private
      * @param {?} ref
      * @return {?}
      */
-    _proxyEvents(ref) {
+    _handleEvents(ref) {
         ref.beforeStarted.subscribe(() => {
             this._changeDetectorRef.markForCheck();
         });
@@ -2685,6 +2766,9 @@ class CdkDropList {
                 item: event.item.data,
                 isPointerOverContainer: event.isPointerOverContainer
             });
+            // 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();
         });
     }
 }