@angular/cdk 18.1.0-next.1 → 18.1.0-next.3

package/fesm2022/drag-drop.mjs

@@ -921,7 +921,8 @@ class DragRef {
             const element = this._rootElement;
             const parent = element.parentNode;
             const placeholder = (this._placeholder = this._createPlaceholderElement());
-            const anchor = (this._anchor = this._anchor || this._document.createComment(''));
+            const anchor = (this._anchor =
+                this._anchor || this._document.createComment(ngDevMode ? 'cdk-drag-anchor' : ''));
             // Insert an anchor node so that we can restore the element's position in the DOM.
             parent.insertBefore(anchor, element);
             // There's no risk of transforms stacking when inside a drop container so
@@ -1549,8 +1550,7 @@ function clamp(value, max) {
  * @docs-private
  */
 class SingleAxisSortStrategy {
-    constructor(_element, _dragDropRegistry) {
-        this._element = _element;
+    constructor(_dragDropRegistry) {
         this._dragDropRegistry = _dragDropRegistry;
         /** Cache of the dimensions of all the items inside the container. */
         this._itemPositions = [];
@@ -1679,7 +1679,7 @@ class SingleAxisSortStrategy {
             activeDraggables.splice(newIndex, 0, item);
         }
         else {
-            coerceElement(this._element).appendChild(placeholder);
+            this._element.appendChild(placeholder);
             activeDraggables.push(item);
         }
         // The transform needs to be cleared so it doesn't throw off the measurements.
@@ -1701,7 +1701,7 @@ class SingleAxisSortStrategy {
     /** 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 => {
+        this._activeDraggables?.forEach(item => {
             const rootElement = item.getRootElement();
             if (rootElement) {
                 const initialTransform = this._itemPositions.find(p => p.drag === item)?.initialTransform;
@@ -1750,6 +1750,9 @@ class SingleAxisSortStrategy {
             }
         });
     }
+    withElementContainer(container) {
+        this._element = container;
+    }
     /** Refreshes the position cache of the items and sibling containers. */
     _cacheItemPositions() {
         const isHorizontal = this.orientation === 'horizontal';
@@ -1873,6 +1876,243 @@ class SingleAxisSortStrategy {
     }
 }
 
+/**
+ * Strategy that only supports sorting on a list that might wrap.
+ * Items are reordered by moving their DOM nodes around.
+ * @docs-private
+ */
+class MixedSortStrategy {
+    constructor(_document, _dragDropRegistry) {
+        this._document = _document;
+        this._dragDropRegistry = _dragDropRegistry;
+        /**
+         * 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 occurred and whether the user's pointer continued to
+         * overlap with the swapped item after the swapping occurred.
+         */
+        this._previousSwap = {
+            drag: null,
+            deltaX: 0,
+            deltaY: 0,
+            overlaps: false,
+        };
+        /**
+         * Keeps track of the relationship between a node and its next sibling. This information
+         * is used to restore the DOM to the order it was in before dragging started.
+         */
+        this._relatedNodes = [];
+    }
+    /**
+     * To be called when the drag sequence starts.
+     * @param items Items that are currently in the list.
+     */
+    start(items) {
+        const childNodes = this._element.childNodes;
+        this._relatedNodes = [];
+        for (let i = 0; i < childNodes.length; i++) {
+            const node = childNodes[i];
+            this._relatedNodes.push([node, node.nextSibling]);
+        }
+        this.withItems(items);
+    }
+    /**
+     * 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 newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
+        const previousSwap = this._previousSwap;
+        if (newIndex === -1 || this._activeItems[newIndex] === item) {
+            return null;
+        }
+        const toSwapWith = this._activeItems[newIndex];
+        // Prevent too many swaps over the same item.
+        if (previousSwap.drag === toSwapWith &&
+            previousSwap.overlaps &&
+            previousSwap.deltaX === pointerDelta.x &&
+            previousSwap.deltaY === pointerDelta.y) {
+            return null;
+        }
+        const previousIndex = this.getItemIndex(item);
+        const current = item.getPlaceholderElement();
+        const overlapElement = toSwapWith.getRootElement();
+        if (newIndex > previousIndex) {
+            overlapElement.after(current);
+        }
+        else {
+            overlapElement.before(current);
+        }
+        moveItemInArray(this._activeItems, previousIndex, newIndex);
+        const newOverlapElement = this._getRootNode().elementFromPoint(pointerX, pointerY);
+        // Note: it's tempting to save the entire `pointerDelta` object here, however that'll
+        // break this functionality, because the same object is passed for all `sort` calls.
+        previousSwap.deltaX = pointerDelta.x;
+        previousSwap.deltaY = pointerDelta.y;
+        previousSwap.drag = toSwapWith;
+        previousSwap.overlaps =
+            overlapElement === newOverlapElement || overlapElement.contains(newOverlapElement);
+        return {
+            previousIndex,
+            currentIndex: newIndex,
+        };
+    }
+    /**
+     * 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.
+     * @param index Index at which the item entered. If omitted, the container will try to figure it
+     *   out automatically.
+     */
+    enter(item, pointerX, pointerY, index) {
+        let enterIndex = index == null || index < 0
+            ? this._getItemIndexFromPointerPosition(item, pointerX, pointerY)
+            : index;
+        // In some cases (e.g. when the container has padding) we might not be able to figure
+        // out which item to insert the dragged item next to, because the pointer didn't overlap
+        // with anything. In that case we find the item that's closest to the pointer.
+        if (enterIndex === -1) {
+            enterIndex = this._getClosestItemIndexToPointer(item, pointerX, pointerY);
+        }
+        const targetItem = this._activeItems[enterIndex];
+        const currentIndex = this._activeItems.indexOf(item);
+        if (currentIndex > -1) {
+            this._activeItems.splice(currentIndex, 1);
+        }
+        if (targetItem && !this._dragDropRegistry.isDragging(targetItem)) {
+            this._activeItems.splice(enterIndex, 0, item);
+            targetItem.getRootElement().before(item.getPlaceholderElement());
+        }
+        else {
+            this._activeItems.push(item);
+            this._element.appendChild(item.getPlaceholderElement());
+        }
+    }
+    /** Sets the items that are currently part of the list. */
+    withItems(items) {
+        this._activeItems = items.slice();
+    }
+    /** Assigns a sort predicate to the strategy. */
+    withSortPredicate(predicate) {
+        this._sortPredicate = predicate;
+    }
+    /** Resets the strategy to its initial state before dragging was started. */
+    reset() {
+        const root = this._element;
+        const previousSwap = this._previousSwap;
+        // Moving elements around in the DOM can break things like the `@for` loop, because it
+        // uses comment nodes to know where to insert elements. To avoid such issues, we restore
+        // the DOM nodes in the list to their original order when the list is reset.
+        // Note that this could be simpler if we just saved all the nodes, cleared the root
+        // and then appended them in the original order. We don't do it, because it can break
+        // down depending on when the snapshot was taken. E.g. we may end up snapshotting the
+        // placeholder element which is removed after dragging.
+        for (let i = this._relatedNodes.length - 1; i > -1; i--) {
+            const [node, nextSibling] = this._relatedNodes[i];
+            if (node.parentNode === root && node.nextSibling !== nextSibling) {
+                if (nextSibling === null) {
+                    root.appendChild(node);
+                }
+                else if (nextSibling.parentNode === root) {
+                    root.insertBefore(node, nextSibling);
+                }
+            }
+        }
+        this._relatedNodes = [];
+        this._activeItems = [];
+        previousSwap.drag = null;
+        previousSwap.deltaX = previousSwap.deltaY = 0;
+        previousSwap.overlaps = false;
+    }
+    /**
+     * Gets a snapshot of items currently in the list.
+     * Can include items that we dragged in from another list.
+     */
+    getActiveItemsSnapshot() {
+        return this._activeItems;
+    }
+    /** Gets the index of a specific item. */
+    getItemIndex(item) {
+        return this._activeItems.indexOf(item);
+    }
+    /** Used to notify the strategy that the scroll position has changed. */
+    updateOnScroll() {
+        this._activeItems.forEach(item => {
+            if (this._dragDropRegistry.isDragging(item)) {
+                // We need to re-sort the item manually, because the pointer move
+                // events won't be dispatched while the user is scrolling.
+                item._sortFromLastPointerPosition();
+            }
+        });
+    }
+    withElementContainer(container) {
+        if (container !== this._element) {
+            this._element = container;
+            this._rootNode = undefined;
+        }
+    }
+    /**
+     * 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) {
+        const elementAtPoint = this._getRootNode().elementFromPoint(Math.floor(pointerX), Math.floor(pointerY));
+        const index = elementAtPoint
+            ? this._activeItems.findIndex(item => {
+                const root = item.getRootElement();
+                return elementAtPoint === root || root.contains(elementAtPoint);
+            })
+            : -1;
+        return index === -1 || !this._sortPredicate(index, item) ? -1 : index;
+    }
+    /** Lazily resolves the list's root node. */
+    _getRootNode() {
+        // Resolve the root node lazily to ensure that the drop list is in its final place in the DOM.
+        if (!this._rootNode) {
+            this._rootNode = _getShadowRoot(this._element) || this._document;
+        }
+        return this._rootNode;
+    }
+    /**
+     * Finds the index of the item that's closest to the item being dragged.
+     * @param item Item being dragged.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     */
+    _getClosestItemIndexToPointer(item, pointerX, pointerY) {
+        if (this._activeItems.length === 0) {
+            return -1;
+        }
+        if (this._activeItems.length === 1) {
+            return 0;
+        }
+        let minDistance = Infinity;
+        let minIndex = -1;
+        // Find the Euclidean distance (https://en.wikipedia.org/wiki/Euclidean_distance) between each
+        // item and the pointer, and return the smallest one. Note that this is a bit flawed in that DOM
+        // nodes are rectangles, not points, so we use the top/left coordinates. It should be enough
+        // for our purposes.
+        for (let i = 0; i < this._activeItems.length; i++) {
+            const current = this._activeItems[i];
+            if (current !== item) {
+                const { x, y } = current.getRootElement().getBoundingClientRect();
+                const distance = Math.hypot(pointerX - x, pointerY - y);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    minIndex = i;
+                }
+            }
+        }
+        return minIndex;
+    }
+}
+
 /**
  * Proximity, as a ratio to width/height, at which a
  * dragged item will affect the drop container.
@@ -1960,6 +2200,10 @@ class DropListRef {
         this._stopScrollTimers = new Subject();
         /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
         this._cachedShadowRoot = null;
+        /** Elements that can be scrolled while the user is dragging. */
+        this._scrollableElements = [];
+        /** Direction of the list's layout. */
+        this._direction = 'ltr';
         /** Starts the interval that'll auto-scroll the element. */
         this._startScrollInterval = () => {
             this._stopScrolling();
@@ -1982,13 +2226,11 @@ class DropListRef {
                 }
             });
         };
-        this.element = coerceElement(element);
+        const coercedElement = (this.element = coerceElement(element));
         this._document = _document;
-        this.withScrollableParents([this.element]);
+        this.withOrientation('vertical').withElementContainer(coercedElement);
         _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() {
@@ -2097,7 +2339,10 @@ class DropListRef {
     }
     /** Sets the layout direction of the drop list. */
     withDirection(direction) {
-        this._sortStrategy.direction = direction;
+        this._direction = direction;
+        if (this._sortStrategy instanceof SingleAxisSortStrategy) {
+            this._sortStrategy.direction = direction;
+        }
         return this;
     }
     /**
@@ -2114,9 +2359,17 @@ class DropListRef {
      * @param orientation New orientation for the container.
      */
     withOrientation(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;
+        if (orientation === 'mixed') {
+            this._sortStrategy = new MixedSortStrategy(this._document, this._dragDropRegistry);
+        }
+        else {
+            const strategy = new SingleAxisSortStrategy(this._dragDropRegistry);
+            strategy.direction = this._direction;
+            strategy.orientation = orientation;
+            this._sortStrategy = strategy;
+        }
+        this._sortStrategy.withElementContainer(this._container);
+        this._sortStrategy.withSortPredicate((index, item) => this.sortPredicate(index, item, this));
         return this;
     }
     /**
@@ -2124,13 +2377,46 @@ class DropListRef {
      * @param elements Elements that can be scrolled.
      */
     withScrollableParents(elements) {
-        const element = coerceElement(this.element);
+        const element = this._container;
         // We always allow the current element to be scrollable
         // so we need to ensure that it's in the array.
         this._scrollableElements =
             elements.indexOf(element) === -1 ? [element, ...elements] : elements.slice();
         return this;
     }
+    /**
+     * Configures the drop list so that a different element is used as the container for the
+     * dragged items. This is useful for the cases when one might not have control over the
+     * full DOM that sets up the dragging.
+     * Note that the alternate container needs to be a descendant of the drop list.
+     * @param container New element container to be assigned.
+     */
+    withElementContainer(container) {
+        if (container === this._container) {
+            return this;
+        }
+        const element = coerceElement(this.element);
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+            container !== element &&
+            !element.contains(container)) {
+            throw new Error('Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.');
+        }
+        const oldContainerIndex = this._scrollableElements.indexOf(this._container);
+        const newContainerIndex = this._scrollableElements.indexOf(container);
+        if (oldContainerIndex > -1) {
+            this._scrollableElements.splice(oldContainerIndex, 1);
+        }
+        if (newContainerIndex > -1) {
+            this._scrollableElements.splice(newContainerIndex, 1);
+        }
+        if (this._sortStrategy) {
+            this._sortStrategy.withElementContainer(container);
+        }
+        this._cachedShadowRoot = null;
+        this._scrollableElements.unshift(container);
+        this._container = container;
+        return this;
+    }
     /** Gets the scrollable parents that are registered with this drop container. */
     getScrollableParents() {
         return this._scrollableElements;
@@ -2196,7 +2482,7 @@ class DropListRef {
                 return;
             }
             if (isPointerNearDomRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
-                [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections(element, position.clientRect, this._sortStrategy.direction, pointerX, pointerY);
+                [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections(element, position.clientRect, this._direction, pointerX, pointerY);
                 if (verticalScrollDirection || horizontalScrollDirection) {
                     scrollNode = element;
                 }
@@ -2238,9 +2524,19 @@ class DropListRef {
     }
     /** Starts the dragging sequence within the list. */
     _draggingStarted() {
-        const styles = coerceElement(this.element).style;
+        const styles = this._container.style;
         this.beforeStarted.next();
         this._isDragging = true;
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+            // Prevent the check from running on apps not using an alternate container. Ideally we
+            // would always run it, but introducing it at this stage would be a breaking change.
+            this._container !== coerceElement(this.element)) {
+            for (const drag of this._draggables) {
+                if (!drag.isDragging() && drag.getVisibleElement().parentNode !== this._container) {
+                    throw new Error('Invalid DOM structure for drop list. All items must be placed directly inside of the element container.');
+                }
+            }
+        }
         // We need to disable scroll snapping while the user is dragging, because it breaks automatic
         // scrolling. The browser seems to round the value based on the snapping points which means
         // that we can't increment/decrement the scroll position.
@@ -2253,16 +2549,15 @@ class DropListRef {
     }
     /** Caches the positions of the configured scrollable parents. */
     _cacheParentPositions() {
-        const element = coerceElement(this.element);
         this._parentPositions.cache(this._scrollableElements);
         // The list element is always in the `scrollableElements`
         // so we can take advantage of the cached `DOMRect`.
-        this._domRect = this._parentPositions.positions.get(element).clientRect;
+        this._domRect = this._parentPositions.positions.get(this._container).clientRect;
     }
     /** Resets the container to its initial state. */
     _reset() {
         this._isDragging = false;
-        const styles = coerceElement(this.element).style;
+        const styles = this._container.style;
         styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
         this._siblings.forEach(sibling => sibling._stopReceiving(this));
         this._sortStrategy.reset();
@@ -2306,14 +2601,13 @@ class DropListRef {
         if (!elementFromPoint) {
             return false;
         }
-        const nativeElement = coerceElement(this.element);
         // The `DOMRect`, 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 === nativeElement || nativeElement.contains(elementFromPoint);
+        return elementFromPoint === this._container || this._container.contains(elementFromPoint);
     }
     /**
      * Called by one of the connected drop lists when a dragging sequence has started.
@@ -2375,7 +2669,7 @@ class DropListRef {
      */
     _getShadowRoot() {
         if (!this._cachedShadowRoot) {
-            const shadowRoot = _getShadowRoot(coerceElement(this.element));
+            const shadowRoot = _getShadowRoot(this._container);
             this._cachedShadowRoot = (shadowRoot || this._document);
         }
         return this._cachedShadowRoot;
@@ -2488,10 +2782,10 @@ const activeApps = new Set();
  * @docs-private
  */
 class _ResetsLoader {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: _ResetsLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: _ResetsLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "cdk-drag-resets-container": "" } }, ngImport: i0, template: '', isInline: true, styles: ["@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: _ResetsLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0-next.1", type: _ResetsLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "cdk-drag-resets-container": "" } }, ngImport: i0, template: '', isInline: true, styles: ["@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: _ResetsLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: _ResetsLoader, decorators: [{
             type: Component,
             args: [{ standalone: true, encapsulation: ViewEncapsulation.None, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'cdk-drag-resets-container': '' }, styles: ["@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}"] }]
         }] });
@@ -2721,10 +3015,10 @@ class DragDropRegistry {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropRegistry, deps: [{ token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropRegistry, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropRegistry, deps: [{ token: i0.NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined, decorators: [{
@@ -2762,10 +3056,10 @@ class DragDrop {
     createDropList(element) {
         return new DropListRef(element, this._dragDropRegistry, this._document, this._ngZone, this._viewportRuler);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDrop, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i1.ViewportRuler }, { token: DragDropRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDrop, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDrop, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i1.ViewportRuler }, { token: DragDropRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDrop, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDrop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDrop, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2823,10 +3117,10 @@ class CdkDragHandle {
         this._parentDrag?._removeHandle(this);
         this._stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragHandle, deps: [{ token: i0.ElementRef }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: CdkDragHandle, isStandalone: true, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled", booleanAttribute] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragHandle, deps: [{ token: i0.ElementRef }, { token: CDK_DRAG_PARENT, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.0-next.1", type: CdkDragHandle, isStandalone: true, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled", booleanAttribute] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragHandle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDragHandle]',
@@ -3239,10 +3533,10 @@ class CdkDrag {
             handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", 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: i1$1.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 }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: CdkDrag, isStandalone: true, selector: "[cdkDrag]", inputs: { data: ["cdkDragData", "data"], lockAxis: ["cdkDragLockAxis", "lockAxis"], rootElementSelector: ["cdkDragRootElement", "rootElementSelector"], boundaryElement: ["cdkDragBoundary", "boundaryElement"], dragStartDelay: ["cdkDragStartDelay", "dragStartDelay"], freeDragPosition: ["cdkDragFreeDragPosition", "freeDragPosition"], disabled: ["cdkDragDisabled", "disabled", booleanAttribute], 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 }], exportAs: ["cdkDrag"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.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: i1$1.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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.0-next.1", type: CdkDrag, isStandalone: true, selector: "[cdkDrag]", inputs: { data: ["cdkDragData", "data"], lockAxis: ["cdkDragLockAxis", "lockAxis"], rootElementSelector: ["cdkDragRootElement", "rootElementSelector"], boundaryElement: ["cdkDragBoundary", "boundaryElement"], dragStartDelay: ["cdkDragStartDelay", "dragStartDelay"], freeDragPosition: ["cdkDragFreeDragPosition", "freeDragPosition"], disabled: ["cdkDragDisabled", "disabled", booleanAttribute], 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 }], exportAs: ["cdkDrag"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDrag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDrag, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDrag]',
@@ -3361,10 +3655,10 @@ class CdkDropListGroup {
     ngOnDestroy() {
         this._items.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: CdkDropListGroup, isStandalone: true, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled", booleanAttribute] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.0-next.1", type: CdkDropListGroup, isStandalone: true, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled", booleanAttribute] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDropListGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDropListGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDropListGroup]',
@@ -3539,6 +3833,13 @@ class CdkDropList {
                 // shouldn't be able to change without the drop list being destroyed.
                 this._scrollableParentsResolved = true;
             }
+            if (this.elementContainerSelector) {
+                const container = this.element.nativeElement.querySelector(this.elementContainerSelector);
+                if (!container && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+                    throw new Error(`CdkDropList could not find an element container matching the selector "${this.elementContainerSelector}"`);
+                }
+                ref.withElementContainer(container);
+            }
             ref.disabled = this.disabled;
             ref.lockAxis = this.lockAxis;
             ref.sortingDisabled = this.sortingDisabled;
@@ -3610,14 +3911,14 @@ class CdkDropList {
     _syncItemsWithRef() {
         this._dropListRef.withItems(this.getSortedItems().map(item => item._dragRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDropList, deps: [{ token: i0.ElementRef }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: i1$1.Directionality, optional: true }, { token: CDK_DROP_LIST_GROUP, optional: true, skipSelf: true }, { token: CDK_DRAG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: CdkDropList, isStandalone: true, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled", booleanAttribute], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled", booleanAttribute], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled", booleanAttribute], 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDropList, deps: [{ token: i0.ElementRef }, { token: DragDrop }, { token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: i1$1.Directionality, optional: true }, { token: CDK_DROP_LIST_GROUP, optional: true, skipSelf: true }, { token: CDK_DRAG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.0-next.1", type: CdkDropList, isStandalone: true, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled", booleanAttribute], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled", booleanAttribute], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled", booleanAttribute], autoScrollStep: ["cdkDropListAutoScrollStep", "autoScrollStep"], elementContainerSelector: ["cdkDropListElementContainer", "elementContainerSelector"] }, 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: "18.0.0", ngImport: i0, type: CdkDropList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDropList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkDropList], cdk-drop-list',
@@ -3682,6 +3983,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             }], autoScrollStep: [{
                 type: Input,
                 args: ['cdkDropListAutoScrollStep']
+            }], elementContainerSelector: [{
+                type: Input,
+                args: ['cdkDropListElementContainer']
             }], dropped: [{
                 type: Output,
                 args: ['cdkDropListDropped']
@@ -3717,10 +4021,10 @@ class CdkDragPreview {
     ngOnDestroy() {
         this._drag?._resetPreviewTemplate(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0", type: CdkDragPreview, isStandalone: true, selector: "ng-template[cdkDragPreview]", inputs: { data: "data", matchSize: ["matchSize", "matchSize", booleanAttribute] }, providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.0-next.1", type: CdkDragPreview, isStandalone: true, selector: "ng-template[cdkDragPreview]", inputs: { data: "data", matchSize: ["matchSize", "matchSize", booleanAttribute] }, providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragPreview, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragPreview, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cdkDragPreview]',
@@ -3753,10 +4057,10 @@ class CdkDragPlaceholder {
     ngOnDestroy() {
         this._drag?._resetPlaceholderTemplate(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: CdkDragPlaceholder, isStandalone: true, selector: "ng-template[cdkDragPlaceholder]", inputs: { data: "data" }, providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0-next.1", type: CdkDragPlaceholder, isStandalone: true, selector: "ng-template[cdkDragPlaceholder]", inputs: { data: "data" }, providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cdkDragPlaceholder]',
@@ -3776,8 +4080,8 @@ const DRAG_DROP_DIRECTIVES = [
     CdkDragPlaceholder,
 ];
 class DragDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: DragDropModule, imports: [CdkDropList,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropModule, imports: [CdkDropList,
             CdkDropListGroup,
             CdkDrag,
             CdkDragHandle,
@@ -3788,9 +4092,9 @@ class DragDropModule {
             CdkDragHandle,
             CdkDragPreview,
             CdkDragPlaceholder] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropModule, providers: [DragDrop], imports: [CdkScrollableModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropModule, providers: [DragDrop], imports: [CdkScrollableModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0-next.1", ngImport: i0, type: DragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: DRAG_DROP_DIRECTIVES,