@angular/cdk 14.0.1 → 14.1.0-next.1

package/fesm2015/drag-drop.mjs

@@ -467,11 +467,12 @@ class DragRef {
                 this._updateActiveDropContainer(constrainedPointerPosition, pointerPosition);
             }
             else {
+                // If there's a position constraint function, we want the element's top/left to be at the
+                // specific position on the page. Use the initial position as a reference if that's the case.
+                const offset = this.constrainPosition ? this._initialClientRect : this._pickupPositionOnPage;
                 const activeTransform = this._activeTransform;
-                activeTransform.x =
-                    constrainedPointerPosition.x - this._pickupPositionOnPage.x + this._passiveTransform.x;
-                activeTransform.y =
-                    constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
+                activeTransform.x = constrainedPointerPosition.x - offset.x + this._passiveTransform.x;
+                activeTransform.y = constrainedPointerPosition.y - offset.y + this._passiveTransform.y;
                 this._applyRootElementTransform(activeTransform.x, activeTransform.y);
             }
             // Since this event gets fired for every pixel while dragging, we only
@@ -889,6 +890,7 @@ class DragRef {
         // Avoid multiple subscriptions and memory leaks when multi touch
         // (isDragging check above isn't enough because of possible temporal and/or dimensional delays)
         this._removeSubscriptions();
+        this._initialClientRect = this._rootElement.getBoundingClientRect();
         this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
         this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
         this._scrollSubscription = this._dragDropRegistry
@@ -904,7 +906,7 @@ class DragRef {
         this._pickupPositionInElement =
             previewTemplate && previewTemplate.template && !previewTemplate.matchSize
                 ? { x: 0, y: 0 }
-                : this._getPointerPositionInElement(referenceElement, event);
+                : this._getPointerPositionInElement(this._initialClientRect, referenceElement, event);
         const pointerPosition = (this._pickupPositionOnPage =
             this._lastKnownPointerPosition =
                 this._getPointerPositionOnPage(event));
@@ -923,7 +925,11 @@ class DragRef {
         this._anchor.parentNode.replaceChild(this._rootElement, this._anchor);
         this._destroyPreview();
         this._destroyPlaceholder();
-        this._boundaryRect = this._previewRect = this._initialTransform = undefined;
+        this._initialClientRect =
+            this._boundaryRect =
+                this._previewRect =
+                    this._initialTransform =
+                        undefined;
         // Re-enter the NgZone since we bound `document` events on the outside.
         this._ngZone.run(() => {
             const container = this._dropContainer;
@@ -987,7 +993,12 @@ class DragRef {
         if (this.isDragging()) {
             this._dropContainer._startScrollingIfNecessary(rawX, rawY);
             this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);
-            this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+            if (this.constrainPosition) {
+                this._applyPreviewTransform(x, y);
+            }
+            else {
+                this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+            }
         }
     }
     /**
@@ -1002,7 +1013,7 @@ class DragRef {
         if (previewTemplate && previewConfig) {
             // Measure the element before we've inserted the preview
             // since the insertion could throw off the measurement.
-            const rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
+            const rootRect = previewConfig.matchSize ? this._initialClientRect : null;
             const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
             viewRef.detectChanges();
             preview = getRootNode(viewRef, this._document);
@@ -1015,9 +1026,8 @@ class DragRef {
             }
         }
         else {
-            const element = this._rootElement;
-            preview = deepCloneNode(element);
-            matchElementSize(preview, element.getBoundingClientRect());
+            preview = deepCloneNode(this._rootElement);
+            matchElementSize(preview, this._initialClientRect);
             if (this._initialTransform) {
                 preview.style.transform = this._initialTransform;
             }
@@ -1111,8 +1121,7 @@ class DragRef {
      * @param referenceElement Element that initiated the dragging.
      * @param event Event that initiated the dragging.
      */
-    _getPointerPositionInElement(referenceElement, event) {
-        const elementRect = this._rootElement.getBoundingClientRect();
+    _getPointerPositionInElement(elementRect, referenceElement, event) {
         const handleElement = referenceElement === this._rootElement ? null : referenceElement;
         const referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
         const point = isTouchEvent(event) ? event.targetTouches[0] : event;
@@ -1155,7 +1164,9 @@ class DragRef {
     /** Gets the pointer position on the page, accounting for any position constraints. */
     _getConstrainedPointerPosition(point) {
         const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
-        let { x, y } = this.constrainPosition ? this.constrainPosition(point, this) : point;
+        let { x, y } = this.constrainPosition
+            ? this.constrainPosition(point, this, this._initialClientRect)
+            : point;
         if (this.lockAxis === 'x' || dropContainerLock === 'x') {
             y = this._pickupPositionOnPage.y;
         }
@@ -1272,8 +1283,9 @@ class DragRef {
         if ((x === 0 && y === 0) || this.isDragging() || !this._boundaryElement) {
             return;
         }
-        const boundaryRect = this._boundaryElement.getBoundingClientRect();
+        // Note: don't use `_clientRectAtStart` here, because we want the latest position.
         const elementRect = this._rootElement.getBoundingClientRect();
+        const boundaryRect = this._boundaryElement.getBoundingClientRect();
         // It's possible that the element got hidden away after dragging (e.g. by switching to a
         // different tab). Don't do anything in this case so we don't clear the user's position.
         if ((boundaryRect.width === 0 && boundaryRect.height === 0) ||
@@ -1391,7 +1403,9 @@ class DragRef {
         // Cache the preview element rect if we haven't cached it already or if
         // we cached it too early before the element dimensions were computed.
         if (!this._previewRect || (!this._previewRect.width && !this._previewRect.height)) {
-            this._previewRect = (this._preview || this._rootElement).getBoundingClientRect();
+            this._previewRect = this._preview
+                ? this._preview.getBoundingClientRect()
+                : this._initialClientRect;
         }
         return this._previewRect;
     }
@@ -1515,140 +1529,99 @@ function clamp(value, max) {
  * found in the LICENSE file at https://angular.io/license
  */
 /**
- * Proximity, as a ratio to width/height, at which a
- * dragged item will affect the drop container.
- */
-const DROP_PROXIMITY_THRESHOLD = 0.05;
-/**
- * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
- * viewport. The value comes from trying it out manually until it feels right.
- */
-const SCROLL_PROXIMITY_THRESHOLD = 0.05;
-/**
- * Reference to a drop list. Used to manipulate or dispose of the container.
+ * Strategy that only supports sorting along a single axis.
+ * Items are reordered using CSS transforms which allows for sorting to be animated.
+ * @docs-private
  */
-class DropListRef {
-    constructor(element, _dragDropRegistry, _document, _ngZone, _viewportRuler) {
+class SingleAxisSortStrategy {
+    constructor(_element, _dragDropRegistry) {
+        this._element = _element;
         this._dragDropRegistry = _dragDropRegistry;
-        this._ngZone = _ngZone;
-        this._viewportRuler = _viewportRuler;
-        /** Whether starting a dragging sequence from this container is disabled. */
-        this.disabled = false;
-        /** Whether sorting items within the list is disabled. */
-        this.sortingDisabled = false;
-        /**
-         * Whether auto-scrolling the view when the user
-         * moves their pointer close to the edges is disabled.
-         */
-        this.autoScrollDisabled = false;
-        /** Number of pixels to scroll for each frame when auto-scrolling an element. */
-        this.autoScrollStep = 2;
-        /**
-         * Function that is used to determine whether an item
-         * is allowed to be moved into a drop container.
-         */
-        this.enterPredicate = () => true;
-        /** Functions that is used to determine whether an item can be sorted into a particular index. */
-        this.sortPredicate = () => true;
-        /** Emits right before dragging has started. */
-        this.beforeStarted = new Subject();
-        /**
-         * Emits when the user has moved a new drag item into this container.
-         */
-        this.entered = new Subject();
-        /**
-         * Emits when the user removes an item from the container
-         * by dragging it into another container.
-         */
-        this.exited = new Subject();
-        /** Emits when the user drops an item inside the container. */
-        this.dropped = new Subject();
-        /** Emits as the user is swapping items while actively dragging. */
-        this.sorted = new Subject();
-        /** Whether an item in the list is being dragged. */
-        this._isDragging = false;
         /** Cache of the dimensions of all the items inside the container. */
         this._itemPositions = [];
+        /** Direction in which the list is oriented. */
+        this.orientation = 'vertical';
         /**
          * 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 and whether the user's pointer continued to
          * overlap with the swapped item after the swapping occurred.
          */
-        this._previousSwap = { drag: null, delta: 0, overlaps: false };
-        /** Draggable items in the container. */
-        this._draggables = [];
-        /** Drop lists that are connected to the current one. */
-        this._siblings = [];
-        /** Direction in which the list is oriented. */
-        this._orientation = 'vertical';
-        /** Connected siblings that currently have a dragged item. */
-        this._activeSiblings = new Set();
-        /** Layout direction of the drop list. */
-        this._direction = 'ltr';
-        /** Subscription to the window being scrolled. */
-        this._viewportScrollSubscription = Subscription.EMPTY;
-        /** Vertical direction in which the list is currently scrolling. */
-        this._verticalScrollDirection = 0 /* AutoScrollVerticalDirection.NONE */;
-        /** Horizontal direction in which the list is currently scrolling. */
-        this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
-        /** Used to signal to the current auto-scroll sequence when to stop. */
-        this._stopScrollTimers = new Subject();
-        /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
-        this._cachedShadowRoot = null;
-        /** Starts the interval that'll auto-scroll the element. */
-        this._startScrollInterval = () => {
-            this._stopScrolling();
-            interval(0, animationFrameScheduler)
-                .pipe(takeUntil(this._stopScrollTimers))
-                .subscribe(() => {
-                const node = this._scrollNode;
-                const scrollStep = this.autoScrollStep;
-                if (this._verticalScrollDirection === 1 /* AutoScrollVerticalDirection.UP */) {
-                    node.scrollBy(0, -scrollStep);
-                }
-                else if (this._verticalScrollDirection === 2 /* AutoScrollVerticalDirection.DOWN */) {
-                    node.scrollBy(0, scrollStep);
-                }
-                if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
-                    node.scrollBy(-scrollStep, 0);
-                }
-                else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
-                    node.scrollBy(scrollStep, 0);
-                }
-            });
+        this._previousSwap = {
+            drag: null,
+            delta: 0,
+            overlaps: false,
         };
-        this.element = coerceElement(element);
-        this._document = _document;
-        this.withScrollableParents([this.element]);
-        _dragDropRegistry.registerDropContainer(this);
-        this._parentPositions = new ParentPositionTracker(_document);
-    }
-    /** Removes the drop list functionality from the DOM element. */
-    dispose() {
-        this._stopScrolling();
-        this._stopScrollTimers.complete();
-        this._viewportScrollSubscription.unsubscribe();
-        this.beforeStarted.complete();
-        this.entered.complete();
-        this.exited.complete();
-        this.dropped.complete();
-        this.sorted.complete();
-        this._activeSiblings.clear();
-        this._scrollNode = null;
-        this._parentPositions.clear();
-        this._dragDropRegistry.removeDropContainer(this);
     }
-    /** Whether an item from this list is currently being dragged. */
-    isDragging() {
-        return this._isDragging;
+    /**
+     * To be called when the drag sequence starts.
+     * @param items Items that are currently in the list.
+     */
+    start(items) {
+        this.withItems(items);
     }
-    /** Starts dragging an item. */
-    start() {
-        this._draggingStarted();
-        this._notifyReceivingSiblings();
+    /**
+     * To be called when an item is being sorted.
+     * @param item Item to be sorted.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param pointerDelta Direction in which the pointer is moving along each axis.
+     */
+    sort(item, pointerX, pointerY, pointerDelta) {
+        const siblings = this._itemPositions;
+        const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);
+        if (newIndex === -1 && siblings.length > 0) {
+            return null;
+        }
+        const isHorizontal = this.orientation === 'horizontal';
+        const currentIndex = siblings.findIndex(currentItem => currentItem.drag === item);
+        const siblingAtNewPosition = siblings[newIndex];
+        const currentPosition = siblings[currentIndex].clientRect;
+        const newPosition = siblingAtNewPosition.clientRect;
+        const delta = currentIndex > newIndex ? 1 : -1;
+        // How many pixels the item's placeholder should be offset.
+        const itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta);
+        // How many pixels all the other items should be offset.
+        const siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta);
+        // Save the previous order of the items before moving the item to its new index.
+        // We use this to check whether an item has been moved as a result of the sorting.
+        const oldOrder = siblings.slice();
+        // Shuffle the array in place.
+        moveItemInArray(siblings, currentIndex, newIndex);
+        siblings.forEach((sibling, index) => {
+            // Don't do anything if the position hasn't changed.
+            if (oldOrder[index] === sibling) {
+                return;
+            }
+            const isDraggedItem = sibling.drag === item;
+            const offset = isDraggedItem ? itemOffset : siblingOffset;
+            const elementToOffset = isDraggedItem
+                ? item.getPlaceholderElement()
+                : sibling.drag.getRootElement();
+            // Update the offset to reflect the new position.
+            sibling.offset += offset;
+            // Since we're moving the items with a `transform`, we need to adjust their cached
+            // client rects to reflect their new position, as well as swap their positions in the cache.
+            // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
+            // elements may be mid-animation which will give us a wrong result.
+            if (isHorizontal) {
+                // Round the transforms since some browsers will
+                // blur the elements, for sub-pixel transforms.
+                elementToOffset.style.transform = combineTransforms(`translate3d(${Math.round(sibling.offset)}px, 0, 0)`, sibling.initialTransform);
+                adjustClientRect(sibling.clientRect, 0, offset);
+            }
+            else {
+                elementToOffset.style.transform = combineTransforms(`translate3d(0, ${Math.round(sibling.offset)}px, 0)`, sibling.initialTransform);
+                adjustClientRect(sibling.clientRect, offset, 0);
+            }
+        });
+        // Note that it's important that we do this after the client rects have been adjusted.
+        this._previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
+        this._previousSwap.drag = siblingAtNewPosition.drag;
+        this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y;
+        return { previousIndex: currentIndex, currentIndex: newIndex };
     }
     /**
-     * Emits an event to indicate that the user moved an item into the container.
+     * Called when an item is being moved into the container.
      * @param item Item that was moved into the container.
      * @param pointerX Position of the item along the X axis.
      * @param pointerY Position of the item along the Y axis.
@@ -1656,21 +1629,11 @@ class DropListRef {
      *   out automatically.
      */
     enter(item, pointerX, pointerY, index) {
-        this._draggingStarted();
-        // If sorting is disabled, we want the item to return to its starting
-        // position if the user is returning it to its initial container.
-        let newIndex;
-        if (index == null) {
-            newIndex = this.sortingDisabled ? this._draggables.indexOf(item) : -1;
-            if (newIndex === -1) {
-                // We use the coordinates of where the item entered the drop
+        const newIndex = index == null || index < 0
+            ? // We use the coordinates of where the item entered the drop
                 // zone to figure out at which index it should be inserted.
-                newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
-            }
-        }
-        else {
-            newIndex = index;
-        }
+                this._getItemIndexFromPointerPosition(item, pointerX, pointerY)
+            : index;
         const activeDraggables = this._activeDraggables;
         const currentIndex = activeDraggables.indexOf(item);
         const placeholder = item.getPlaceholderElement();
@@ -1701,78 +1664,413 @@ class DropListRef {
             activeDraggables.splice(newIndex, 0, item);
         }
         else {
-            coerceElement(this.element).appendChild(placeholder);
+            coerceElement(this._element).appendChild(placeholder);
             activeDraggables.push(item);
         }
         // The transform needs to be cleared so it doesn't throw off the measurements.
         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 and also parent rects.
+        // Note that usually `start` is called together with `enter` when an item goes into a new
+        // container. This will cache item positions, but we need to refresh them since the amount
+        // of items has changed.
         this._cacheItemPositions();
-        this._cacheParentPositions();
-        // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.
-        this._notifyReceivingSiblings();
-        this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) });
     }
-    /**
-     * Removes an item from the container after it was dragged into another container by the user.
-     * @param item Item that was dragged out.
-     */
-    exit(item) {
-        this._reset();
-        this.exited.next({ item, container: this });
+    /** Sets the items that are currently part of the list. */
+    withItems(items) {
+        this._activeDraggables = items.slice();
+        this._cacheItemPositions();
     }
-    /**
-     * Drops an item into this container.
-     * @param item Item being dropped into the container.
-     * @param currentIndex Index at which the item should be inserted.
-     * @param previousIndex Index of the item when dragging started.
-     * @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.
-     * @param event Event that triggered the dropping sequence.
-     *
-     * @breaking-change 15.0.0 `previousIndex` and `event` parameters to become required.
-     */
-    drop(item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint, event = {}) {
-        this._reset();
-        this.dropped.next({
-            item,
-            currentIndex,
-            previousIndex,
-            container: this,
-            previousContainer,
-            isPointerOverContainer,
-            distance,
-            dropPoint,
-            event,
+    /** Assigns a sort predicate to the strategy. */
+    withSortPredicate(predicate) {
+        this._sortPredicate = predicate;
+    }
+    /** Resets the strategy to its initial state before dragging was started. */
+    reset() {
+        // TODO(crisbeto): may have to wait for the animations to finish.
+        this._activeDraggables.forEach(item => {
+            var _a;
+            const rootElement = item.getRootElement();
+            if (rootElement) {
+                const initialTransform = (_a = this._itemPositions.find(p => p.drag === item)) === null || _a === void 0 ? void 0 : _a.initialTransform;
+                rootElement.style.transform = initialTransform || '';
+            }
         });
+        this._itemPositions = [];
+        this._activeDraggables = [];
+        this._previousSwap.drag = null;
+        this._previousSwap.delta = 0;
+        this._previousSwap.overlaps = false;
     }
     /**
-     * Sets the draggable items that are a part of this list.
-     * @param items Items that are a part of this list.
+     * Gets a snapshot of items currently in the list.
+     * Can include items that we dragged in from another list.
      */
-    withItems(items) {
-        const previousItems = this._draggables;
-        this._draggables = items;
-        items.forEach(item => item._withDropContainer(this));
-        if (this.isDragging()) {
-            const draggedItems = previousItems.filter(item => item.isDragging());
-            // If all of the items being dragged were removed
-            // from the list, abort the current drag sequence.
-            if (draggedItems.every(item => items.indexOf(item) === -1)) {
-                this._reset();
-            }
-            else {
-                this._cacheItems();
+    getActiveItemsSnapshot() {
+        return this._activeDraggables;
+    }
+    /** Gets the index of a specific item. */
+    getItemIndex(item) {
+        // Items are sorted always by top/left in the cache, however they flow differently in RTL.
+        // The rest of the logic still stands no matter what orientation we're in, however
+        // we need to invert the array when determining the index.
+        const items = this.orientation === 'horizontal' && this.direction === 'rtl'
+            ? this._itemPositions.slice().reverse()
+            : this._itemPositions;
+        return items.findIndex(currentItem => currentItem.drag === item);
+    }
+    /** Used to notify the strategy that the scroll position has changed. */
+    updateOnScroll(topDifference, leftDifference) {
+        // Since we know the amount that the user has scrolled we can shift all of the
+        // client rectangles ourselves. This is cheaper than re-measuring everything and
+        // we can avoid inconsistent behavior where we might be measuring the element before
+        // its position has changed.
+        this._itemPositions.forEach(({ clientRect }) => {
+            adjustClientRect(clientRect, topDifference, leftDifference);
+        });
+        // We need two loops for this, because we want all of the cached
+        // positions to be up-to-date before we re-sort the item.
+        this._itemPositions.forEach(({ drag }) => {
+            if (this._dragDropRegistry.isDragging(drag)) {
+                // We need to re-sort the item manually, because the pointer move
+                // events won't be dispatched while the user is scrolling.
+                drag._sortFromLastPointerPosition();
+            }
+        });
+    }
+    /** Refreshes the position cache of the items and sibling containers. */
+    _cacheItemPositions() {
+        const isHorizontal = this.orientation === 'horizontal';
+        this._itemPositions = this._activeDraggables
+            .map(drag => {
+            const elementToMeasure = drag.getVisibleElement();
+            return {
+                drag,
+                offset: 0,
+                initialTransform: elementToMeasure.style.transform || '',
+                clientRect: getMutableClientRect(elementToMeasure),
+            };
+        })
+            .sort((a, b) => {
+            return isHorizontal
+                ? a.clientRect.left - b.clientRect.left
+                : a.clientRect.top - b.clientRect.top;
+        });
+    }
+    /**
+     * Gets the offset in pixels by which the item that is being dragged should be moved.
+     * @param currentPosition Current position of the item.
+     * @param newPosition Position of the item where the current item should be moved.
+     * @param delta Direction in which the user is moving.
+     */
+    _getItemOffsetPx(currentPosition, newPosition, delta) {
+        const isHorizontal = this.orientation === 'horizontal';
+        let itemOffset = isHorizontal
+            ? newPosition.left - currentPosition.left
+            : newPosition.top - currentPosition.top;
+        // Account for differences in the item width/height.
+        if (delta === -1) {
+            itemOffset += isHorizontal
+                ? newPosition.width - currentPosition.width
+                : newPosition.height - currentPosition.height;
+        }
+        return itemOffset;
+    }
+    /**
+     * Gets the offset in pixels by which the items that aren't being dragged should be moved.
+     * @param currentIndex Index of the item currently being dragged.
+     * @param siblings All of the items in the list.
+     * @param delta Direction in which the user is moving.
+     */
+    _getSiblingOffsetPx(currentIndex, siblings, delta) {
+        const isHorizontal = this.orientation === 'horizontal';
+        const currentPosition = siblings[currentIndex].clientRect;
+        const immediateSibling = siblings[currentIndex + delta * -1];
+        let siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta;
+        if (immediateSibling) {
+            const start = isHorizontal ? 'left' : 'top';
+            const end = isHorizontal ? 'right' : 'bottom';
+            // Get the spacing between the start of the current item and the end of the one immediately
+            // after it in the direction in which the user is dragging, or vice versa. We add it to the
+            // offset in order to push the element to where it will be when it's inline and is influenced
+            // by the `margin` of its siblings.
+            if (delta === -1) {
+                siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end];
+            }
+            else {
+                siblingOffset += currentPosition[start] - immediateSibling.clientRect[end];
+            }
+        }
+        return siblingOffset;
+    }
+    /**
+     * Checks if pointer is entering in the first position
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     */
+    _shouldEnterAsFirstChild(pointerX, pointerY) {
+        if (!this._activeDraggables.length) {
+            return false;
+        }
+        const itemPositions = this._itemPositions;
+        const isHorizontal = this.orientation === 'horizontal';
+        // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index
+        // check if container is using some sort of "reverse" ordering (eg: flex-direction: row-reverse)
+        const reversed = itemPositions[0].drag !== this._activeDraggables[0];
+        if (reversed) {
+            const lastItemRect = itemPositions[itemPositions.length - 1].clientRect;
+            return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;
+        }
+        else {
+            const firstItemRect = itemPositions[0].clientRect;
+            return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;
+        }
+    }
+    /**
+     * Gets the index of an item in the drop container, based on the position of the user's pointer.
+     * @param item Item that is being sorted.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     * @param delta Direction in which the user is moving their pointer.
+     */
+    _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {
+        const isHorizontal = this.orientation === 'horizontal';
+        const index = this._itemPositions.findIndex(({ drag, clientRect }) => {
+            // Skip the item itself.
+            if (drag === item) {
+                return false;
+            }
+            if (delta) {
+                const direction = isHorizontal ? delta.x : delta.y;
+                // If the user is still hovering over the same item as last time, their cursor hasn't left
+                // the item after we made the swap, and they didn't change the direction in which they're
+                // dragging, we don't consider it a direction swap.
+                if (drag === this._previousSwap.drag &&
+                    this._previousSwap.overlaps &&
+                    direction === this._previousSwap.delta) {
+                    return false;
+                }
+            }
+            return isHorizontal
+                ? // Round these down since most browsers report client rects with
+                    // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
+                    pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right)
+                : pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);
+        });
+        return index === -1 || !this._sortPredicate(index, item) ? -1 : index;
+    }
+}
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * Proximity, as a ratio to width/height, at which a
+ * dragged item will affect the drop container.
+ */
+const DROP_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
+ * viewport. The value comes from trying it out manually until it feels right.
+ */
+const SCROLL_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Reference to a drop list. Used to manipulate or dispose of the container.
+ */
+class DropListRef {
+    constructor(element, _dragDropRegistry, _document, _ngZone, _viewportRuler) {
+        this._dragDropRegistry = _dragDropRegistry;
+        this._ngZone = _ngZone;
+        this._viewportRuler = _viewportRuler;
+        /** Whether starting a dragging sequence from this container is disabled. */
+        this.disabled = false;
+        /** Whether sorting items within the list is disabled. */
+        this.sortingDisabled = false;
+        /**
+         * Whether auto-scrolling the view when the user
+         * moves their pointer close to the edges is disabled.
+         */
+        this.autoScrollDisabled = false;
+        /** Number of pixels to scroll for each frame when auto-scrolling an element. */
+        this.autoScrollStep = 2;
+        /**
+         * Function that is used to determine whether an item
+         * is allowed to be moved into a drop container.
+         */
+        this.enterPredicate = () => true;
+        /** Function that is used to determine whether an item can be sorted into a particular index. */
+        this.sortPredicate = () => true;
+        /** Emits right before dragging has started. */
+        this.beforeStarted = new Subject();
+        /**
+         * Emits when the user has moved a new drag item into this container.
+         */
+        this.entered = new Subject();
+        /**
+         * Emits when the user removes an item from the container
+         * by dragging it into another container.
+         */
+        this.exited = new Subject();
+        /** Emits when the user drops an item inside the container. */
+        this.dropped = new Subject();
+        /** Emits as the user is swapping items while actively dragging. */
+        this.sorted = new Subject();
+        /** Whether an item in the list is being dragged. */
+        this._isDragging = false;
+        /** Draggable items in the container. */
+        this._draggables = [];
+        /** Drop lists that are connected to the current one. */
+        this._siblings = [];
+        /** Connected siblings that currently have a dragged item. */
+        this._activeSiblings = new Set();
+        /** Subscription to the window being scrolled. */
+        this._viewportScrollSubscription = Subscription.EMPTY;
+        /** Vertical direction in which the list is currently scrolling. */
+        this._verticalScrollDirection = 0 /* AutoScrollVerticalDirection.NONE */;
+        /** Horizontal direction in which the list is currently scrolling. */
+        this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
+        /** Used to signal to the current auto-scroll sequence when to stop. */
+        this._stopScrollTimers = new Subject();
+        /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
+        this._cachedShadowRoot = null;
+        /** Starts the interval that'll auto-scroll the element. */
+        this._startScrollInterval = () => {
+            this._stopScrolling();
+            interval(0, animationFrameScheduler)
+                .pipe(takeUntil(this._stopScrollTimers))
+                .subscribe(() => {
+                const node = this._scrollNode;
+                const scrollStep = this.autoScrollStep;
+                if (this._verticalScrollDirection === 1 /* AutoScrollVerticalDirection.UP */) {
+                    node.scrollBy(0, -scrollStep);
+                }
+                else if (this._verticalScrollDirection === 2 /* AutoScrollVerticalDirection.DOWN */) {
+                    node.scrollBy(0, scrollStep);
+                }
+                if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+                    node.scrollBy(-scrollStep, 0);
+                }
+                else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+                    node.scrollBy(scrollStep, 0);
+                }
+            });
+        };
+        this.element = coerceElement(element);
+        this._document = _document;
+        this.withScrollableParents([this.element]);
+        _dragDropRegistry.registerDropContainer(this);
+        this._parentPositions = new ParentPositionTracker(_document);
+        this._sortStrategy = new SingleAxisSortStrategy(this.element, _dragDropRegistry);
+        this._sortStrategy.withSortPredicate((index, item) => this.sortPredicate(index, item, this));
+    }
+    /** Removes the drop list functionality from the DOM element. */
+    dispose() {
+        this._stopScrolling();
+        this._stopScrollTimers.complete();
+        this._viewportScrollSubscription.unsubscribe();
+        this.beforeStarted.complete();
+        this.entered.complete();
+        this.exited.complete();
+        this.dropped.complete();
+        this.sorted.complete();
+        this._activeSiblings.clear();
+        this._scrollNode = null;
+        this._parentPositions.clear();
+        this._dragDropRegistry.removeDropContainer(this);
+    }
+    /** Whether an item from this list is currently being dragged. */
+    isDragging() {
+        return this._isDragging;
+    }
+    /** Starts dragging an item. */
+    start() {
+        this._draggingStarted();
+        this._notifyReceivingSiblings();
+    }
+    /**
+     * Attempts to move an item into the container.
+     * @param item Item that was moved into the container.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param index Index at which the item entered. If omitted, the container will try to figure it
+     *   out automatically.
+     */
+    enter(item, pointerX, pointerY, index) {
+        this._draggingStarted();
+        // If sorting is disabled, we want the item to return to its starting
+        // position if the user is returning it to its initial container.
+        if (index == null && this.sortingDisabled) {
+            index = this._draggables.indexOf(item);
+        }
+        this._sortStrategy.enter(item, pointerX, pointerY, index);
+        // Note that this usually happens inside `_draggingStarted` as well, but the dimensions
+        // can change when the sort strategy moves the item around inside `enter`.
+        this._cacheParentPositions();
+        // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.
+        this._notifyReceivingSiblings();
+        this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) });
+    }
+    /**
+     * Removes an item from the container after it was dragged into another container by the user.
+     * @param item Item that was dragged out.
+     */
+    exit(item) {
+        this._reset();
+        this.exited.next({ item, container: this });
+    }
+    /**
+     * Drops an item into this container.
+     * @param item Item being dropped into the container.
+     * @param currentIndex Index at which the item should be inserted.
+     * @param previousIndex Index of the item when dragging started.
+     * @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.
+     * @param event Event that triggered the dropping sequence.
+     *
+     * @breaking-change 15.0.0 `previousIndex` and `event` parameters to become required.
+     */
+    drop(item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint, event = {}) {
+        this._reset();
+        this.dropped.next({
+            item,
+            currentIndex,
+            previousIndex,
+            container: this,
+            previousContainer,
+            isPointerOverContainer,
+            distance,
+            dropPoint,
+            event,
+        });
+    }
+    /**
+     * Sets the draggable items that are a part of this list.
+     * @param items Items that are a part of this list.
+     */
+    withItems(items) {
+        const previousItems = this._draggables;
+        this._draggables = items;
+        items.forEach(item => item._withDropContainer(this));
+        if (this.isDragging()) {
+            const draggedItems = previousItems.filter(item => item.isDragging());
+            // If all of the items being dragged were removed
+            // from the list, abort the current drag sequence.
+            if (draggedItems.every(item => items.indexOf(item) === -1)) {
+                this._reset();
+            }
+            else {
+                this._sortStrategy.withItems(this._draggables);
             }
         }
         return this;
     }
     /** Sets the layout direction of the drop list. */
     withDirection(direction) {
-        this._direction = direction;
+        this._sortStrategy.direction = direction;
         return this;
     }
     /**
@@ -1789,7 +2087,9 @@ class DropListRef {
      * @param orientation New orientation for the container.
      */
     withOrientation(orientation) {
-        this._orientation = orientation;
+        // TODO(crisbeto): eventually we should be constructing the new sort strategy here based on
+        // the new orientation. For now we can assume that it'll always be `SingleAxisSortStrategy`.
+        this._sortStrategy.orientation = orientation;
         return this;
     }
     /**
@@ -1813,16 +2113,9 @@ class DropListRef {
      * @param item Item whose index should be determined.
      */
     getItemIndex(item) {
-        if (!this._isDragging) {
-            return this._draggables.indexOf(item);
-        }
-        // Items are sorted always by top/left in the cache, however they flow differently in RTL.
-        // The rest of the logic still stands no matter what orientation we're in, however
-        // we need to invert the array when determining the index.
-        const items = this._orientation === 'horizontal' && this._direction === 'rtl'
-            ? this._itemPositions.slice().reverse()
-            : this._itemPositions;
-        return items.findIndex(currentItem => currentItem.drag === item);
+        return this._isDragging
+            ? this._sortStrategy.getItemIndex(item)
+            : this._draggables.indexOf(item);
     }
     /**
      * Whether the list is able to receive the item that
@@ -1845,63 +2138,15 @@ class DropListRef {
             !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
             return;
         }
-        const siblings = this._itemPositions;
-        const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);
-        if (newIndex === -1 && siblings.length > 0) {
-            return;
+        const result = this._sortStrategy.sort(item, pointerX, pointerY, pointerDelta);
+        if (result) {
+            this.sorted.next({
+                previousIndex: result.previousIndex,
+                currentIndex: result.currentIndex,
+                container: this,
+                item,
+            });
         }
-        const isHorizontal = this._orientation === 'horizontal';
-        const currentIndex = siblings.findIndex(currentItem => currentItem.drag === item);
-        const siblingAtNewPosition = siblings[newIndex];
-        const currentPosition = siblings[currentIndex].clientRect;
-        const newPosition = siblingAtNewPosition.clientRect;
-        const delta = currentIndex > newIndex ? 1 : -1;
-        // How many pixels the item's placeholder should be offset.
-        const itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta);
-        // How many pixels all the other items should be offset.
-        const siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta);
-        // Save the previous order of the items before moving the item to its new index.
-        // We use this to check whether an item has been moved as a result of the sorting.
-        const oldOrder = siblings.slice();
-        // Shuffle the array in place.
-        moveItemInArray(siblings, currentIndex, newIndex);
-        this.sorted.next({
-            previousIndex: currentIndex,
-            currentIndex: newIndex,
-            container: this,
-            item,
-        });
-        siblings.forEach((sibling, index) => {
-            // Don't do anything if the position hasn't changed.
-            if (oldOrder[index] === sibling) {
-                return;
-            }
-            const isDraggedItem = sibling.drag === item;
-            const offset = isDraggedItem ? itemOffset : siblingOffset;
-            const elementToOffset = isDraggedItem
-                ? item.getPlaceholderElement()
-                : sibling.drag.getRootElement();
-            // Update the offset to reflect the new position.
-            sibling.offset += offset;
-            // Since we're moving the items with a `transform`, we need to adjust their cached
-            // client rects to reflect their new position, as well as swap their positions in the cache.
-            // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
-            // elements may be mid-animation which will give us a wrong result.
-            if (isHorizontal) {
-                // Round the transforms since some browsers will
-                // blur the elements, for sub-pixel transforms.
-                elementToOffset.style.transform = combineTransforms(`translate3d(${Math.round(sibling.offset)}px, 0, 0)`, sibling.initialTransform);
-                adjustClientRect(sibling.clientRect, 0, offset);
-            }
-            else {
-                elementToOffset.style.transform = combineTransforms(`translate3d(0, ${Math.round(sibling.offset)}px, 0)`, sibling.initialTransform);
-                adjustClientRect(sibling.clientRect, offset, 0);
-            }
-        });
-        // Note that it's important that we do this after the client rects have been adjusted.
-        this._previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
-        this._previousSwap.drag = siblingAtNewPosition.drag;
-        this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y;
     }
     /**
      * Checks whether the user's pointer is close to the edges of either the
@@ -1974,7 +2219,8 @@ class DropListRef {
         // that we can't increment/decrement the scroll position.
         this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';
         styles.scrollSnapType = styles.msScrollSnapType = 'none';
-        this._cacheItems();
+        this._sortStrategy.start(this._draggables);
+        this._cacheParentPositions();
         this._viewportScrollSubscription.unsubscribe();
         this._listenToScrollEvents();
     }
@@ -1986,157 +2232,17 @@ class DropListRef {
         // so we can take advantage of the cached `ClientRect`.
         this._clientRect = this._parentPositions.positions.get(element).clientRect;
     }
-    /** Refreshes the position cache of the items and sibling containers. */
-    _cacheItemPositions() {
-        const isHorizontal = this._orientation === 'horizontal';
-        this._itemPositions = this._activeDraggables
-            .map(drag => {
-            const elementToMeasure = drag.getVisibleElement();
-            return {
-                drag,
-                offset: 0,
-                initialTransform: elementToMeasure.style.transform || '',
-                clientRect: getMutableClientRect(elementToMeasure),
-            };
-        })
-            .sort((a, b) => {
-            return isHorizontal
-                ? a.clientRect.left - b.clientRect.left
-                : a.clientRect.top - b.clientRect.top;
-        });
-    }
     /** Resets the container to its initial state. */
     _reset() {
         this._isDragging = false;
         const styles = coerceElement(this.element).style;
         styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
-        // TODO(crisbeto): may have to wait for the animations to finish.
-        this._activeDraggables.forEach(item => {
-            var _a;
-            const rootElement = item.getRootElement();
-            if (rootElement) {
-                const initialTransform = (_a = this._itemPositions.find(current => current.drag === item)) === null || _a === void 0 ? void 0 : _a.initialTransform;
-                rootElement.style.transform = initialTransform || '';
-            }
-        });
         this._siblings.forEach(sibling => sibling._stopReceiving(this));
-        this._activeDraggables = [];
-        this._itemPositions = [];
-        this._previousSwap.drag = null;
-        this._previousSwap.delta = 0;
-        this._previousSwap.overlaps = false;
+        this._sortStrategy.reset();
         this._stopScrolling();
         this._viewportScrollSubscription.unsubscribe();
         this._parentPositions.clear();
     }
-    /**
-     * Gets the offset in pixels by which the items that aren't being dragged should be moved.
-     * @param currentIndex Index of the item currently being dragged.
-     * @param siblings All of the items in the list.
-     * @param delta Direction in which the user is moving.
-     */
-    _getSiblingOffsetPx(currentIndex, siblings, delta) {
-        const isHorizontal = this._orientation === 'horizontal';
-        const currentPosition = siblings[currentIndex].clientRect;
-        const immediateSibling = siblings[currentIndex + delta * -1];
-        let siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta;
-        if (immediateSibling) {
-            const start = isHorizontal ? 'left' : 'top';
-            const end = isHorizontal ? 'right' : 'bottom';
-            // Get the spacing between the start of the current item and the end of the one immediately
-            // after it in the direction in which the user is dragging, or vice versa. We add it to the
-            // offset in order to push the element to where it will be when it's inline and is influenced
-            // by the `margin` of its siblings.
-            if (delta === -1) {
-                siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end];
-            }
-            else {
-                siblingOffset += currentPosition[start] - immediateSibling.clientRect[end];
-            }
-        }
-        return siblingOffset;
-    }
-    /**
-     * Gets the offset in pixels by which the item that is being dragged should be moved.
-     * @param currentPosition Current position of the item.
-     * @param newPosition Position of the item where the current item should be moved.
-     * @param delta Direction in which the user is moving.
-     */
-    _getItemOffsetPx(currentPosition, newPosition, delta) {
-        const isHorizontal = this._orientation === 'horizontal';
-        let itemOffset = isHorizontal
-            ? newPosition.left - currentPosition.left
-            : newPosition.top - currentPosition.top;
-        // Account for differences in the item width/height.
-        if (delta === -1) {
-            itemOffset += isHorizontal
-                ? newPosition.width - currentPosition.width
-                : newPosition.height - currentPosition.height;
-        }
-        return itemOffset;
-    }
-    /**
-     * Checks if pointer is entering in the first position
-     * @param pointerX Position of the user's pointer along the X axis.
-     * @param pointerY Position of the user's pointer along the Y axis.
-     */
-    _shouldEnterAsFirstChild(pointerX, pointerY) {
-        if (!this._activeDraggables.length) {
-            return false;
-        }
-        const itemPositions = this._itemPositions;
-        const isHorizontal = this._orientation === 'horizontal';
-        // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index
-        // check if container is using some sort of "reverse" ordering (eg: flex-direction: row-reverse)
-        const reversed = itemPositions[0].drag !== this._activeDraggables[0];
-        if (reversed) {
-            const lastItemRect = itemPositions[itemPositions.length - 1].clientRect;
-            return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;
-        }
-        else {
-            const firstItemRect = itemPositions[0].clientRect;
-            return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;
-        }
-    }
-    /**
-     * Gets the index of an item in the drop container, based on the position of the user's pointer.
-     * @param item Item that is being sorted.
-     * @param pointerX Position of the user's pointer along the X axis.
-     * @param pointerY Position of the user's pointer along the Y axis.
-     * @param delta Direction in which the user is moving their pointer.
-     */
-    _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {
-        const isHorizontal = this._orientation === 'horizontal';
-        const index = this._itemPositions.findIndex(({ drag, clientRect }) => {
-            // Skip the item itself.
-            if (drag === item) {
-                return false;
-            }
-            if (delta) {
-                const direction = isHorizontal ? delta.x : delta.y;
-                // If the user is still hovering over the same item as last time, their cursor hasn't left
-                // the item after we made the swap, and they didn't change the direction in which they're
-                // dragging, we don't consider it a direction swap.
-                if (drag === this._previousSwap.drag &&
-                    this._previousSwap.overlaps &&
-                    direction === this._previousSwap.delta) {
-                    return false;
-                }
-            }
-            return isHorizontal
-                ? // Round these down since most browsers report client rects with
-                    // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
-                    pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right)
-                : pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);
-        });
-        return index === -1 || !this.sortPredicate(index, item, this) ? -1 : index;
-    }
-    /** Caches the current items in the list and their positions. */
-    _cacheItems() {
-        this._activeDraggables = this._draggables.slice();
-        this._cacheItemPositions();
-        this._cacheParentPositions();
-    }
     /**
      * Checks whether the user's pointer is positioned over the container.
      * @param x Pointer position along the X axis.
@@ -2220,22 +2326,7 @@ class DropListRef {
             if (this.isDragging()) {
                 const scrollDifference = this._parentPositions.handleScroll(event);
                 if (scrollDifference) {
-                    // Since we know the amount that the user has scrolled we can shift all of the
-                    // client rectangles ourselves. This is cheaper than re-measuring everything and
-                    // we can avoid inconsistent behavior where we might be measuring the element before
-                    // its position has changed.
-                    this._itemPositions.forEach(({ clientRect }) => {
-                        adjustClientRect(clientRect, scrollDifference.top, scrollDifference.left);
-                    });
-                    // We need two loops for this, because we want all of the cached
-                    // positions to be up-to-date before we re-sort the item.
-                    this._itemPositions.forEach(({ drag }) => {
-                        if (this._dragDropRegistry.isDragging(drag)) {
-                            // We need to re-sort the item manually, because the pointer move
-                            // events won't be dispatched while the user is scrolling.
-                            drag._sortFromLastPointerPosition();
-                        }
-                    });
+                    this._sortStrategy.updateOnScroll(scrollDifference.top, scrollDifference.left);
                 }
             }
             else if (this.isReceiving()) {
@@ -2258,7 +2349,9 @@ class DropListRef {
     }
     /** Notifies any siblings that may potentially receive the item. */
     _notifyReceivingSiblings() {
-        const draggedItems = this._activeDraggables.filter(item => item.isDragging());
+        const draggedItems = this._sortStrategy
+            .getActiveItemsSnapshot()
+            .filter(item => item.isDragging());
         this._siblings.forEach(sibling => sibling._startReceiving(this, draggedItems));
     }
 }
@@ -2552,9 +2645,9 @@ class DragDropRegistry {
         this._globalListeners.clear();
     }
 }
-DragDropRegistry.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropRegistry, deps: [{ token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-DragDropRegistry.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropRegistry, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropRegistry, decorators: [{
+DragDropRegistry.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropRegistry, deps: [{ token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+DragDropRegistry.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropRegistry, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () {
@@ -2602,9 +2695,9 @@ class DragDrop {
         return new DropListRef(element, this._dragDropRegistry, this._document, this._ngZone, this._viewportRuler);
     }
 }
-DragDrop.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDrop, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i1.ViewportRuler }, { token: DragDropRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
-DragDrop.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDrop, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDrop, decorators: [{
+DragDrop.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDrop, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i1.ViewportRuler }, { token: DragDropRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
+DragDrop.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDrop, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDrop, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () {
@@ -2665,9 +2758,9 @@ class CdkDropListGroup {
         this._items.clear();
     }
 }
-CdkDropListGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkDropListGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled"] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDropListGroup, decorators: [{
+CdkDropListGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkDropListGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled"] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDropListGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDropListGroup]',
@@ -2956,13 +3049,13 @@ class CdkDropList {
 }
 /** Keeps track of the drop lists that are currently on the page. */
 CdkDropList._dropLists = [];
-CdkDropList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDropList, deps: [{ token: i0.ElementRef }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: i3.Directionality, optional: true }, { token: CDK_DROP_LIST_GROUP, optional: true, skipSelf: true }, { token: CDK_DRAG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkDropList.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled"], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled"], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled"], autoScrollStep: ["cdkDropListAutoScrollStep", "autoScrollStep"] }, outputs: { dropped: "cdkDropListDropped", entered: "cdkDropListEntered", exited: "cdkDropListExited", sorted: "cdkDropListSorted" }, host: { properties: { "attr.id": "id", "class.cdk-drop-list-disabled": "disabled", "class.cdk-drop-list-dragging": "_dropListRef.isDragging()", "class.cdk-drop-list-receiving": "_dropListRef.isReceiving()" }, classAttribute: "cdk-drop-list" }, providers: [
+CdkDropList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDropList, deps: [{ token: i0.ElementRef }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: i3.Directionality, optional: true }, { token: CDK_DROP_LIST_GROUP, optional: true, skipSelf: true }, { token: CDK_DRAG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkDropList.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled"], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled"], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled"], autoScrollStep: ["cdkDropListAutoScrollStep", "autoScrollStep"] }, outputs: { dropped: "cdkDropListDropped", entered: "cdkDropListEntered", exited: "cdkDropListExited", sorted: "cdkDropListSorted" }, host: { properties: { "attr.id": "id", "class.cdk-drop-list-disabled": "disabled", "class.cdk-drop-list-dragging": "_dropListRef.isDragging()", "class.cdk-drop-list-receiving": "_dropListRef.isReceiving()" }, classAttribute: "cdk-drop-list" }, providers: [
         // Prevent child drop lists from picking up the same group as their parent.
         { provide: CDK_DROP_LIST_GROUP, useValue: undefined },
         { provide: CDK_DROP_LIST, useExisting: CdkDropList },
     ], exportAs: ["cdkDropList"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDropList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDropList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDropList], cdk-drop-list',
@@ -3079,9 +3172,9 @@ class CdkDragHandle {
         this._stateChanges.complete();
     }
 }
-CdkDragHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragHandle, deps: [{ token: i0.ElementRef }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkDragHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled"] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragHandle, decorators: [{
+CdkDragHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragHandle, deps: [{ token: i0.ElementRef }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkDragHandle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled"] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDragHandle]',
@@ -3126,9 +3219,9 @@ class CdkDragPlaceholder {
         this.templateRef = templateRef;
     }
 }
-CdkDragPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CdkDragPlaceholder.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: { data: "data" }, providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
+CdkDragPlaceholder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CdkDragPlaceholder.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: { data: "data" }, providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cdkDragPlaceholder]',
@@ -3168,9 +3261,9 @@ class CdkDragPreview {
         this._matchSize = coerceBooleanProperty(value);
     }
 }
-CdkDragPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CdkDragPreview.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: { data: "data", matchSize: "matchSize" }, providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDragPreview, decorators: [{
+CdkDragPreview.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CdkDragPreview.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: { data: "data", matchSize: "matchSize" }, providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDragPreview, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cdkDragPreview]',
@@ -3539,9 +3632,9 @@ class CdkDrag {
     }
 }
 CdkDrag._dragInstances = [];
-CdkDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDrag, deps: [{ token: i0.ElementRef }, { token: CDK_DROP_LIST, optional: true, skipSelf: true }, { token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: CDK_DRAG_CONFIG, optional: true }, { token: i3.Directionality, optional: true }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: CDK_DRAG_HANDLE, optional: true, self: true }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkDrag.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0-rc.1", type: CdkDrag, selector: "[cdkDrag]", inputs: { data: ["cdkDragData", "data"], lockAxis: ["cdkDragLockAxis", "lockAxis"], rootElementSelector: ["cdkDragRootElement", "rootElementSelector"], boundaryElement: ["cdkDragBoundary", "boundaryElement"], dragStartDelay: ["cdkDragStartDelay", "dragStartDelay"], freeDragPosition: ["cdkDragFreeDragPosition", "freeDragPosition"], disabled: ["cdkDragDisabled", "disabled"], constrainPosition: ["cdkDragConstrainPosition", "constrainPosition"], previewClass: ["cdkDragPreviewClass", "previewClass"], previewContainer: ["cdkDragPreviewContainer", "previewContainer"] }, outputs: { started: "cdkDragStarted", released: "cdkDragReleased", ended: "cdkDragEnded", entered: "cdkDragEntered", exited: "cdkDragExited", dropped: "cdkDragDropped", moved: "cdkDragMoved" }, host: { properties: { "class.cdk-drag-disabled": "disabled", "class.cdk-drag-dragging": "_dragRef.isDragging()" }, classAttribute: "cdk-drag" }, providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }], queries: [{ propertyName: "_previewTemplate", first: true, predicate: CDK_DRAG_PREVIEW, descendants: true }, { propertyName: "_placeholderTemplate", first: true, predicate: CDK_DRAG_PLACEHOLDER, descendants: true }, { propertyName: "_handles", predicate: CDK_DRAG_HANDLE, descendants: true }], exportAs: ["cdkDrag"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: CdkDrag, decorators: [{
+CdkDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDrag, deps: [{ token: i0.ElementRef }, { token: CDK_DROP_LIST, optional: true, skipSelf: true }, { token: DOCUMENT }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: CDK_DRAG_CONFIG, optional: true }, { token: i3.Directionality, optional: true }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: CDK_DRAG_HANDLE, optional: true, self: true }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkDrag.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkDrag, selector: "[cdkDrag]", inputs: { data: ["cdkDragData", "data"], lockAxis: ["cdkDragLockAxis", "lockAxis"], rootElementSelector: ["cdkDragRootElement", "rootElementSelector"], boundaryElement: ["cdkDragBoundary", "boundaryElement"], dragStartDelay: ["cdkDragStartDelay", "dragStartDelay"], freeDragPosition: ["cdkDragFreeDragPosition", "freeDragPosition"], disabled: ["cdkDragDisabled", "disabled"], constrainPosition: ["cdkDragConstrainPosition", "constrainPosition"], previewClass: ["cdkDragPreviewClass", "previewClass"], previewContainer: ["cdkDragPreviewContainer", "previewContainer"] }, outputs: { started: "cdkDragStarted", released: "cdkDragReleased", ended: "cdkDragEnded", entered: "cdkDragEntered", exited: "cdkDragExited", dropped: "cdkDragDropped", moved: "cdkDragMoved" }, host: { properties: { "class.cdk-drag-disabled": "disabled", "class.cdk-drag-dragging": "_dragRef.isDragging()" }, classAttribute: "cdk-drag" }, providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }], queries: [{ propertyName: "_previewTemplate", first: true, predicate: CDK_DRAG_PREVIEW, descendants: true }, { propertyName: "_placeholderTemplate", first: true, predicate: CDK_DRAG_PLACEHOLDER, descendants: true }, { propertyName: "_handles", predicate: CDK_DRAG_HANDLE, descendants: true }], exportAs: ["cdkDrag"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkDrag, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDrag]',
@@ -3657,8 +3750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ng
  */
 class DragDropModule {
 }
-DragDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DragDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropModule, declarations: [CdkDropList,
+DragDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: DragDropModule, declarations: [CdkDropList,
         CdkDropListGroup,
         CdkDrag,
         CdkDragHandle,
@@ -3670,8 +3763,8 @@ DragDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         CdkDragHandle,
         CdkDragPreview,
         CdkDragPlaceholder] });
-DragDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropModule, providers: [DragDrop], imports: [CdkScrollableModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-rc.1", ngImport: i0, type: DragDropModule, decorators: [{
+DragDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropModule, providers: [DragDrop], imports: [CdkScrollableModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [