@angular/cdk 16.0.2 → 16.0.3

package/fesm2022/drag-drop.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, InjectionToken, Directive, Input, EventEmitter, Optional, SkipSelf, Output, Self, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { Injectable, Inject, InjectionToken, Directive, Optional, SkipSelf, Input, EventEmitter, Self, ContentChildren, ContentChild, Output, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { _getEventTarget, normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
-import { coerceBooleanProperty, coerceElement, coerceArray, coerceNumberProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
 import { isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { Subject, Subscription, interval, animationFrameScheduler, Observable, merge } from 'rxjs';
-import { takeUntil, startWith, map, take, tap, switchMap } from 'rxjs/operators';
-import * as i3 from '@angular/cdk/bidi';
+import { takeUntil, map, take, startWith, tap, switchMap } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/bidi';
 
 /**
  * Shallow-extends a stylesheet object with another stylesheet-like object.
@@ -2640,270 +2640,431 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
 
 /**
- * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
- * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary
- * retention of the class and its directive metadata.
+ * Asserts that a particular node is an element.
+ * @param node Node to be checked.
+ * @param name Name to attach to the error message.
  */
-const CDK_DROP_LIST_GROUP = new InjectionToken('CdkDropListGroup');
+function assertElementNode(node, name) {
+    if (node.nodeType !== 1) {
+        throw Error(`${name} must be attached to an element node. ` + `Currently attached to "${node.nodeName}".`);
+    }
+}
+
 /**
- * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
- * elements that are placed inside a `cdkDropListGroup` will be connected to each other
- * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
- * from `cdkDropList`.
+ * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as
+ * alternative token to the actual `CdkDragHandle` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-class CdkDropListGroup {
-    constructor() {
-        /** Drop lists registered inside the group. */
-        this._items = new Set();
-        this._disabled = false;
-    }
-    /** Whether starting a dragging sequence from inside this group is disabled. */
+const CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle');
+/** Handle that can be used to drag a CdkDrag instance. */
+class CdkDragHandle {
+    /** Whether starting to drag through this handle is disabled. */
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
+        this._stateChanges.next(this);
+    }
+    constructor(element, parentDrag) {
+        this.element = element;
+        /** Emits when the state of the handle has changed. */
+        this._stateChanges = new Subject();
+        this._disabled = false;
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            assertElementNode(element.nativeElement, 'cdkDragHandle');
+        }
+        this._parentDrag = parentDrag;
     }
     ngOnDestroy() {
-        this._items.clear();
+        this._stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkDropListGroup, isStandalone: true, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled"] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: "14.0.0", version: "16.0.0", type: CdkDragHandle, isStandalone: true, 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: "16.0.0", ngImport: i0, type: CdkDropListGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDragHandle, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cdkDropListGroup]',
-                    exportAs: 'cdkDropListGroup',
+                    selector: '[cdkDragHandle]',
                     standalone: true,
-                    providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }],
+                    host: {
+                        'class': 'cdk-drag-handle',
+                    },
+                    providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }],
                 }]
-        }], propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CDK_DRAG_PARENT]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { disabled: [{
                 type: Input,
-                args: ['cdkDropListGroupDisabled']
+                args: ['cdkDragHandleDisabled']
             }] } });
 
 /**
- * Injection token that can be used to configure the
- * behavior of the drag&drop-related components.
+ * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as
+ * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG');
+const CDK_DRAG_PLACEHOLDER = new InjectionToken('CdkDragPlaceholder');
+/**
+ * Element that will be used as a template for the placeholder of a CdkDrag when
+ * it is being dragged. The placeholder is displayed in place of the element being dragged.
+ */
+class CdkDragPlaceholder {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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: "16.0.0", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cdkDragPlaceholder]',
+                    standalone: true,
+                    providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
 
 /**
- * Asserts that a particular node is an element.
- * @param node Node to be checked.
- * @param name Name to attach to the error message.
+ * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
+ * alternative token to the actual `CdkDragPreview` class which could cause unnecessary
+ * retention of the class and its directive metadata.
  */
-function assertElementNode(node, name) {
-    if (node.nodeType !== 1) {
-        throw Error(`${name} must be attached to an element node. ` + `Currently attached to "${node.nodeName}".`);
+const CDK_DRAG_PREVIEW = new InjectionToken('CdkDragPreview');
+/**
+ * Element that will be used as a template for the preview
+ * of a CdkDrag when it is being dragged.
+ */
+class CdkDragPreview {
+    /** Whether the preview should preserve the same size as the item that is being dragged. */
+    get matchSize() {
+        return this._matchSize;
+    }
+    set matchSize(value) {
+        this._matchSize = coerceBooleanProperty(value);
+    }
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this._matchSize = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkDragPreview, isStandalone: true, 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: "16.0.0", ngImport: i0, type: CdkDragPreview, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cdkDragPreview]',
+                    standalone: true,
+                    providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], matchSize: [{
+                type: Input
+            }] } });
 
-/** Counter used to generate unique ids for drop zones. */
-let _uniqueIdCounter = 0;
+/**
+ * Injection token that can be used to configure the
+ * behavior of the drag&drop-related components.
+ */
+const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG');
+
+const DRAG_HOST_CLASS = 'cdk-drag';
 /**
  * Injection token that can be used to reference instances of `CdkDropList`. It serves as
  * alternative token to the actual `CdkDropList` class which could cause unnecessary
  * retention of the class and its directive metadata.
  */
 const CDK_DROP_LIST = new InjectionToken('CdkDropList');
-/** Container that wraps a set of draggable items. */
-class CdkDropList {
-    /** Keeps track of the drop lists that are currently on the page. */
-    static { this._dropLists = []; }
-    /** Whether starting a dragging sequence from this container is disabled. */
+/** Element that can be moved inside a CdkDropList container. */
+class CdkDrag {
+    static { this._dragInstances = []; }
+    /** Whether starting to drag this element is disabled. */
     get disabled() {
-        return this._disabled || (!!this._group && this._group.disabled);
+        return this._disabled || (this.dropContainer && this.dropContainer.disabled);
     }
     set disabled(value) {
-        // Usually we sync the directive and ref state right before dragging starts, in order to have
-        // a single point of failure and to avoid having to use setters for everything. `disabled` is
-        // a special case, because it can prevent the `beforeStarted` event from firing, which can lock
-        // the user in a disabled state, so we also need to sync it as it's being set.
-        this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
+        this._disabled = coerceBooleanProperty(value);
+        this._dragRef.disabled = this._disabled;
     }
     constructor(
-    /** Element that the drop list is attached to. */
-    element, dragDrop, _changeDetectorRef, _scrollDispatcher, _dir, _group, config) {
+    /** Element that the draggable is attached to. */
+    element, 
+    /** Droppable container that the draggable is a part of. */
+    dropContainer, 
+    /**
+     * @deprecated `_document` parameter no longer being used and will be removed.
+     * @breaking-change 12.0.0
+     */
+    _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle, _parentDrag) {
         this.element = element;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._scrollDispatcher = _scrollDispatcher;
+        this.dropContainer = dropContainer;
+        this._ngZone = _ngZone;
+        this._viewContainerRef = _viewContainerRef;
         this._dir = _dir;
-        this._group = _group;
-        /** Emits when the list has been destroyed. */
+        this._changeDetectorRef = _changeDetectorRef;
+        this._selfHandle = _selfHandle;
+        this._parentDrag = _parentDrag;
         this._destroyed = new Subject();
-        /**
-         * Other draggable containers that this container is connected to and into which the
-         * container's items can be transferred. Can either be references to other drop containers,
-         * or their unique IDs.
-         */
-        this.connectedTo = [];
-        /**
-         * Unique ID for the drop zone. Can be used as a reference
-         * in the `connectedTo` of another `CdkDropList`.
-         */
-        this.id = `cdk-drop-list-${_uniqueIdCounter++}`;
-        /**
-         * 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 when the user drops an item inside the container. */
-        this.dropped = new EventEmitter();
-        /**
-         * Emits when the user has moved a new drag item into this container.
-         */
+        /** Emits when the user starts dragging the item. */
+        this.started = new EventEmitter();
+        /** Emits when the user has released a drag item, before any animations have started. */
+        this.released = new EventEmitter();
+        /** Emits when the user stops dragging an item in the container. */
+        this.ended = new EventEmitter();
+        /** Emits when the user has moved the item into a new container. */
         this.entered = new EventEmitter();
-        /**
-         * Emits when the user removes an item from the container
-         * by dragging it into another container.
-         */
+        /** Emits when the user removes the item its container by dragging it into another container. */
         this.exited = new EventEmitter();
-        /** Emits as the user is swapping items while actively dragging. */
-        this.sorted = new EventEmitter();
+        /** Emits when the user drops the item inside a container. */
+        this.dropped = new EventEmitter();
         /**
-         * Keeps track of the items that are registered with this container. Historically we used to
-         * do this with a `ContentChildren` query, however queries don't handle transplanted views very
-         * well which means that we can't handle cases like dragging the headers of a `mat-table`
-         * correctly. What we do instead is to have the items register themselves with the container
-         * and then we sort them based on their position in the DOM.
+         * Emits as the user is dragging the item. Use with caution,
+         * because this event will fire for every pixel that the user has dragged.
          */
-        this._unsortedItems = new Set();
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            assertElementNode(element.nativeElement, 'cdkDropList');
-        }
-        this._dropListRef = dragDrop.createDropList(element);
-        this._dropListRef.data = this;
-        if (config) {
-            this._assignDefaults(config);
-        }
-        this._dropListRef.enterPredicate = (drag, drop) => {
-            return this.enterPredicate(drag.data, drop.data);
-        };
-        this._dropListRef.sortPredicate = (index, drag, drop) => {
-            return this.sortPredicate(index, drag.data, drop.data);
-        };
-        this._setupInputSyncSubscription(this._dropListRef);
-        this._handleEvents(this._dropListRef);
-        CdkDropList._dropLists.push(this);
-        if (_group) {
-            _group._items.add(this);
-        }
-    }
-    /** Registers an items with the drop list. */
-    addItem(item) {
-        this._unsortedItems.add(item);
-        if (this._dropListRef.isDragging()) {
-            this._syncItemsWithRef();
+        this.moved = new Observable((observer) => {
+            const subscription = this._dragRef.moved
+                .pipe(map(movedEvent => ({
+                source: this,
+                pointerPosition: movedEvent.pointerPosition,
+                event: movedEvent.event,
+                delta: movedEvent.delta,
+                distance: movedEvent.distance,
+            })))
+                .subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+            };
+        });
+        this._dragRef = dragDrop.createDrag(element, {
+            dragStartThreshold: config && config.dragStartThreshold != null ? config.dragStartThreshold : 5,
+            pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null
+                ? config.pointerDirectionChangeThreshold
+                : 5,
+            zIndex: config?.zIndex,
+        });
+        this._dragRef.data = this;
+        // We have to keep track of the drag instances in order to be able to match an element to
+        // a drag instance. We can't go through the global registry of `DragRef`, because the root
+        // element could be different.
+        CdkDrag._dragInstances.push(this);
+        if (config) {
+            this._assignDefaults(config);
         }
-    }
-    /** Removes an item from the drop list. */
-    removeItem(item) {
-        this._unsortedItems.delete(item);
-        if (this._dropListRef.isDragging()) {
-            this._syncItemsWithRef();
+        // Note that usually the container is assigned when the drop list is picks up the item, but in
+        // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
+        // where there are no items on the first change detection pass, but the items get picked up as
+        // soon as the user triggers another pass by dragging. This is a problem, because the item would
+        // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
+        // is too late since the two modes save different kinds of information. We work around it by
+        // assigning the drop container both from here and the list.
+        if (dropContainer) {
+            this._dragRef._withDropContainer(dropContainer._dropListRef);
+            dropContainer.addItem(this);
         }
+        this._syncInputs(this._dragRef);
+        this._handleEvents(this._dragRef);
     }
-    /** Gets the registered items in the list, sorted by their position in the DOM. */
-    getSortedItems() {
-        return Array.from(this._unsortedItems).sort((a, b) => {
-            const documentPosition = a._dragRef
-                .getVisibleElement()
-                .compareDocumentPosition(b._dragRef.getVisibleElement());
-            // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
-            // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
-            // tslint:disable-next-line:no-bitwise
-            return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+    /**
+     * Returns the element that is being used as a placeholder
+     * while the current element is being dragged.
+     */
+    getPlaceholderElement() {
+        return this._dragRef.getPlaceholderElement();
+    }
+    /** Returns the root draggable element. */
+    getRootElement() {
+        return this._dragRef.getRootElement();
+    }
+    /** Resets a standalone drag item to its initial position. */
+    reset() {
+        this._dragRef.reset();
+    }
+    /**
+     * Gets the pixel coordinates of the draggable outside of a drop container.
+     */
+    getFreeDragPosition() {
+        return this._dragRef.getFreeDragPosition();
+    }
+    /**
+     * Sets the current position in pixels the draggable outside of a drop container.
+     * @param value New position to be set.
+     */
+    setFreeDragPosition(value) {
+        this._dragRef.setFreeDragPosition(value);
+    }
+    ngAfterViewInit() {
+        // Normally this isn't in the zone, but it can cause major performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this._ngZone.runOutsideAngular(() => {
+            // We need to wait for the zone to stabilize, in order for the reference
+            // element to be in the proper place in the DOM. This is mostly relevant
+            // for draggable elements inside portals since they get stamped out in
+            // their original DOM position and then they get transferred to the portal.
+            this._ngZone.onStable.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
+                this._updateRootElement();
+                this._setupHandlesListener();
+                if (this.freeDragPosition) {
+                    this._dragRef.setFreeDragPosition(this.freeDragPosition);
+                }
+            });
         });
     }
+    ngOnChanges(changes) {
+        const rootSelectorChange = changes['rootElementSelector'];
+        const positionChange = changes['freeDragPosition'];
+        // We don't have to react to the first change since it's being
+        // handled in `ngAfterViewInit` where it needs to be deferred.
+        if (rootSelectorChange && !rootSelectorChange.firstChange) {
+            this._updateRootElement();
+        }
+        // Skip the first change since it's being handled in `ngAfterViewInit`.
+        if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
+            this._dragRef.setFreeDragPosition(this.freeDragPosition);
+        }
+    }
     ngOnDestroy() {
-        const index = CdkDropList._dropLists.indexOf(this);
+        if (this.dropContainer) {
+            this.dropContainer.removeItem(this);
+        }
+        const index = CdkDrag._dragInstances.indexOf(this);
         if (index > -1) {
-            CdkDropList._dropLists.splice(index, 1);
+            CdkDrag._dragInstances.splice(index, 1);
         }
-        if (this._group) {
-            this._group._items.delete(this);
+        // Unnecessary in most cases, but used to avoid extra change detections with `zone-paths-rxjs`.
+        this._ngZone.runOutsideAngular(() => {
+            this._destroyed.next();
+            this._destroyed.complete();
+            this._dragRef.dispose();
+        });
+    }
+    /** Syncs the root element with the `DragRef`. */
+    _updateRootElement() {
+        const element = this.element.nativeElement;
+        let rootElement = element;
+        if (this.rootElementSelector) {
+            rootElement =
+                element.closest !== undefined
+                    ? element.closest(this.rootElementSelector)
+                    : // Comment tag doesn't have closest method, so use parent's one.
+                        element.parentElement?.closest(this.rootElementSelector);
         }
-        this._unsortedItems.clear();
-        this._dropListRef.dispose();
-        this._destroyed.next();
-        this._destroyed.complete();
+        if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            assertElementNode(rootElement, 'cdkDrag');
+        }
+        this._dragRef.withRootElement(rootElement || element);
     }
-    /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
-    _setupInputSyncSubscription(ref) {
-        if (this._dir) {
-            this._dir.change
-                .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
-                .subscribe(value => ref.withDirection(value));
+    /** Gets the boundary element, based on the `boundaryElement` value. */
+    _getBoundaryElement() {
+        const boundary = this.boundaryElement;
+        if (!boundary) {
+            return null;
+        }
+        if (typeof boundary === 'string') {
+            return this.element.nativeElement.closest(boundary);
         }
+        return coerceElement(boundary);
+    }
+    /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
+    _syncInputs(ref) {
         ref.beforeStarted.subscribe(() => {
-            const siblings = coerceArray(this.connectedTo).map(drop => {
-                if (typeof drop === 'string') {
-                    const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);
-                    if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-                        console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
+            if (!ref.isDragging()) {
+                const dir = this._dir;
+                const dragStartDelay = this.dragStartDelay;
+                const placeholder = this._placeholderTemplate
+                    ? {
+                        template: this._placeholderTemplate.templateRef,
+                        context: this._placeholderTemplate.data,
+                        viewContainer: this._viewContainerRef,
                     }
-                    return correspondingDropList;
-                }
-                return drop;
-            });
-            if (this._group) {
-                this._group._items.forEach(drop => {
-                    if (siblings.indexOf(drop) === -1) {
-                        siblings.push(drop);
+                    : null;
+                const preview = this._previewTemplate
+                    ? {
+                        template: this._previewTemplate.templateRef,
+                        context: this._previewTemplate.data,
+                        matchSize: this._previewTemplate.matchSize,
+                        viewContainer: this._viewContainerRef,
                     }
-                });
+                    : null;
+                ref.disabled = this.disabled;
+                ref.lockAxis = this.lockAxis;
+                ref.dragStartDelay =
+                    typeof dragStartDelay === 'object' && dragStartDelay
+                        ? dragStartDelay
+                        : coerceNumberProperty(dragStartDelay);
+                ref.constrainPosition = this.constrainPosition;
+                ref.previewClass = this.previewClass;
+                ref
+                    .withBoundaryElement(this._getBoundaryElement())
+                    .withPlaceholderTemplate(placeholder)
+                    .withPreviewTemplate(preview)
+                    .withPreviewContainer(this.previewContainer || 'global');
+                if (dir) {
+                    ref.withDirection(dir.value);
+                }
             }
-            // Note that we resolve the scrollable parents here so that we delay the resolution
-            // as long as possible, ensuring that the element is in its final place in the DOM.
-            if (!this._scrollableParentsResolved) {
-                const scrollableParents = this._scrollDispatcher
-                    .getAncestorScrollContainers(this.element)
-                    .map(scrollable => scrollable.getElementRef().nativeElement);
-                this._dropListRef.withScrollableParents(scrollableParents);
-                // Only do this once since it involves traversing the DOM and the parents
-                // shouldn't be able to change without the drop list being destroyed.
-                this._scrollableParentsResolved = true;
+        });
+        // This only needs to be resolved once.
+        ref.beforeStarted.pipe(take(1)).subscribe(() => {
+            // If we managed to resolve a parent through DI, use it.
+            if (this._parentDrag) {
+                ref.withParent(this._parentDrag._dragRef);
+                return;
+            }
+            // Otherwise fall back to resolving the parent by looking up the DOM. This can happen if
+            // the item was projected into another item by something like `ngTemplateOutlet`.
+            let parent = this.element.nativeElement.parentElement;
+            while (parent) {
+                if (parent.classList.contains(DRAG_HOST_CLASS)) {
+                    ref.withParent(CdkDrag._dragInstances.find(drag => {
+                        return drag.element.nativeElement === parent;
+                    })?._dragRef || null);
+                    break;
+                }
+                parent = parent.parentElement;
             }
-            ref.disabled = this.disabled;
-            ref.lockAxis = this.lockAxis;
-            ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);
-            ref.autoScrollDisabled = coerceBooleanProperty(this.autoScrollDisabled);
-            ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);
-            ref
-                .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
-                .withOrientation(this.orientation);
         });
     }
-    /** Handles events from the underlying DropListRef. */
+    /** Handles the events from the underlying `DragRef`. */
     _handleEvents(ref) {
-        ref.beforeStarted.subscribe(() => {
-            this._syncItemsWithRef();
+        ref.started.subscribe(startEvent => {
+            this.started.emit({ source: this, event: startEvent.event });
+            // Since all of these events run outside of change detection,
+            // we need to ensure that everything is marked correctly.
             this._changeDetectorRef.markForCheck();
         });
-        ref.entered.subscribe(event => {
-            this.entered.emit({
-                container: this,
-                item: event.item.data,
-                currentIndex: event.currentIndex,
-            });
+        ref.released.subscribe(releaseEvent => {
+            this.released.emit({ source: this, event: releaseEvent.event });
         });
-        ref.exited.subscribe(event => {
-            this.exited.emit({
-                container: this,
-                item: event.item.data,
+        ref.ended.subscribe(endEvent => {
+            this.ended.emit({
+                source: this,
+                distance: endEvent.distance,
+                dropPoint: endEvent.dropPoint,
+                event: endEvent.event,
             });
+            // Since all of these events run outside of change detection,
+            // we need to ensure that everything is marked correctly.
             this._changeDetectorRef.markForCheck();
         });
-        ref.sorted.subscribe(event => {
-            this.sorted.emit({
-                previousIndex: event.previousIndex,
-                currentIndex: event.currentIndex,
-                container: this,
-                item: event.item.data,
+        ref.entered.subscribe(enterEvent => {
+            this.entered.emit({
+                container: enterEvent.container.data,
+                item: this,
+                currentIndex: enterEvent.currentIndex,
+            });
+        });
+        ref.exited.subscribe(exitEvent => {
+            this.exited.emit({
+                container: exitEvent.container.data,
+                item: this,
             });
         });
         ref.dropped.subscribe(dropEvent => {
@@ -2912,522 +3073,420 @@ class CdkDropList {
                 currentIndex: dropEvent.currentIndex,
                 previousContainer: dropEvent.previousContainer.data,
                 container: dropEvent.container.data,
-                item: dropEvent.item.data,
                 isPointerOverContainer: dropEvent.isPointerOverContainer,
+                item: this,
                 distance: dropEvent.distance,
                 dropPoint: dropEvent.dropPoint,
                 event: dropEvent.event,
             });
-            // Mark for check since all of these events run outside of change
-            // detection and we're not guaranteed for something else to have triggered it.
-            this._changeDetectorRef.markForCheck();
         });
-        merge(ref.receivingStarted, ref.receivingStopped).subscribe(() => this._changeDetectorRef.markForCheck());
     }
     /** Assigns the default input values based on a provided config object. */
     _assignDefaults(config) {
-        const { lockAxis, draggingDisabled, sortingDisabled, listAutoScrollDisabled, listOrientation } = config;
+        const { lockAxis, dragStartDelay, constrainPosition, previewClass, boundaryElement, draggingDisabled, rootElementSelector, previewContainer, } = config;
         this.disabled = draggingDisabled == null ? false : draggingDisabled;
-        this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
-        this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
-        this.orientation = listOrientation || 'vertical';
+        this.dragStartDelay = dragStartDelay || 0;
         if (lockAxis) {
             this.lockAxis = lockAxis;
         }
+        if (constrainPosition) {
+            this.constrainPosition = constrainPosition;
+        }
+        if (previewClass) {
+            this.previewClass = previewClass;
+        }
+        if (boundaryElement) {
+            this.boundaryElement = boundaryElement;
+        }
+        if (rootElementSelector) {
+            this.rootElementSelector = rootElementSelector;
+        }
+        if (previewContainer) {
+            this.previewContainer = previewContainer;
+        }
     }
-    /** Syncs up the registered drag items with underlying drop list ref. */
-    _syncItemsWithRef() {
-        this._dropListRef.withItems(this.getSortedItems().map(item => item._dragRef));
+    /** Sets up the listener that syncs the handles with the drag ref. */
+    _setupHandlesListener() {
+        // Listen for any newly-added handles.
+        this._handles.changes
+            .pipe(startWith(this._handles), 
+        // Sync the new handles with the DragRef.
+        tap((handles) => {
+            const childHandleElements = handles
+                .filter(handle => handle._parentDrag === this)
+                .map(handle => handle.element);
+            // Usually handles are only allowed to be a descendant of the drag element, but if
+            // the consumer defined a different drag root, we should allow the drag element
+            // itself to be a handle too.
+            if (this._selfHandle && this.rootElementSelector) {
+                childHandleElements.push(this.element);
+            }
+            this._dragRef.withHandles(childHandleElements);
+        }), 
+        // Listen if the state of any of the handles changes.
+        switchMap((handles) => {
+            return merge(...handles.map(item => {
+                return item._stateChanges.pipe(startWith(item));
+            }));
+        }), takeUntil(this._destroyed))
+            .subscribe(handleInstance => {
+            // Enabled/disable the handle that changed in the DragRef.
+            const dragRef = this._dragRef;
+            const handle = handleInstance.element.nativeElement;
+            handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", 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 }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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"], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: "14.0.0", version: "16.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"], 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: "16.0.0", ngImport: i0, type: CdkDropList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDrag, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cdkDropList], cdk-drop-list',
-                    exportAs: 'cdkDropList',
+                    selector: '[cdkDrag]',
+                    exportAs: 'cdkDrag',
                     standalone: true,
-                    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 },
-                    ],
                     host: {
-                        'class': 'cdk-drop-list',
-                        '[attr.id]': 'id',
-                        '[class.cdk-drop-list-disabled]': 'disabled',
-                        '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
-                        '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
+                        'class': DRAG_HOST_CLASS,
+                        '[class.cdk-drag-disabled]': 'disabled',
+                        '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
                     },
+                    providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragDrop }, { type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: CdkDropListGroup, decorators: [{
-                    type: Optional
-                }, {
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [CDK_DROP_LIST_GROUP]
+                    args: [CDK_DROP_LIST]
+                }, {
+                    type: Optional
                 }, {
                     type: SkipSelf
                 }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [CDK_DRAG_CONFIG]
-                }] }]; }, propDecorators: { connectedTo: [{
-                type: Input,
-                args: ['cdkDropListConnectedTo']
-            }], data: [{
-                type: Input,
-                args: ['cdkDropListData']
-            }], orientation: [{
-                type: Input,
-                args: ['cdkDropListOrientation']
-            }], id: [{
-                type: Input
+                }] }, { type: i1$1.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: DragDrop }, { type: i0.ChangeDetectorRef }, { type: CdkDragHandle, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [CDK_DRAG_HANDLE]
+                }] }, { type: CdkDrag, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }, {
+                    type: Inject,
+                    args: [CDK_DRAG_PARENT]
+                }] }]; }, propDecorators: { _handles: [{
+                type: ContentChildren,
+                args: [CDK_DRAG_HANDLE, { descendants: true }]
+            }], _previewTemplate: [{
+                type: ContentChild,
+                args: [CDK_DRAG_PREVIEW]
+            }], _placeholderTemplate: [{
+                type: ContentChild,
+                args: [CDK_DRAG_PLACEHOLDER]
+            }], data: [{
+                type: Input,
+                args: ['cdkDragData']
             }], lockAxis: [{
                 type: Input,
-                args: ['cdkDropListLockAxis']
-            }], disabled: [{
+                args: ['cdkDragLockAxis']
+            }], rootElementSelector: [{
                 type: Input,
-                args: ['cdkDropListDisabled']
-            }], sortingDisabled: [{
+                args: ['cdkDragRootElement']
+            }], boundaryElement: [{
                 type: Input,
-                args: ['cdkDropListSortingDisabled']
-            }], enterPredicate: [{
+                args: ['cdkDragBoundary']
+            }], dragStartDelay: [{
                 type: Input,
-                args: ['cdkDropListEnterPredicate']
-            }], sortPredicate: [{
+                args: ['cdkDragStartDelay']
+            }], freeDragPosition: [{
                 type: Input,
-                args: ['cdkDropListSortPredicate']
-            }], autoScrollDisabled: [{
+                args: ['cdkDragFreeDragPosition']
+            }], disabled: [{
                 type: Input,
-                args: ['cdkDropListAutoScrollDisabled']
-            }], autoScrollStep: [{
+                args: ['cdkDragDisabled']
+            }], constrainPosition: [{
                 type: Input,
-                args: ['cdkDropListAutoScrollStep']
-            }], dropped: [{
+                args: ['cdkDragConstrainPosition']
+            }], previewClass: [{
+                type: Input,
+                args: ['cdkDragPreviewClass']
+            }], previewContainer: [{
+                type: Input,
+                args: ['cdkDragPreviewContainer']
+            }], started: [{
                 type: Output,
-                args: ['cdkDropListDropped']
+                args: ['cdkDragStarted']
+            }], released: [{
+                type: Output,
+                args: ['cdkDragReleased']
+            }], ended: [{
+                type: Output,
+                args: ['cdkDragEnded']
             }], entered: [{
                 type: Output,
-                args: ['cdkDropListEntered']
+                args: ['cdkDragEntered']
             }], exited: [{
                 type: Output,
-                args: ['cdkDropListExited']
-            }], sorted: [{
+                args: ['cdkDragExited']
+            }], dropped: [{
                 type: Output,
-                args: ['cdkDropListSorted']
+                args: ['cdkDragDropped']
+            }], moved: [{
+                type: Output,
+                args: ['cdkDragMoved']
             }] } });
 
 /**
- * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as
- * alternative token to the actual `CdkDragHandle` class which could cause unnecessary
+ * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
+ * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary
  * retention of the class and its directive metadata.
  */
-const CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle');
-/** Handle that can be used to drag a CdkDrag instance. */
-class CdkDragHandle {
-    /** Whether starting to drag through this handle is disabled. */
+const CDK_DROP_LIST_GROUP = new InjectionToken('CdkDropListGroup');
+/**
+ * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
+ * elements that are placed inside a `cdkDropListGroup` will be connected to each other
+ * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
+ * from `cdkDropList`.
+ */
+class CdkDropListGroup {
+    constructor() {
+        /** Drop lists registered inside the group. */
+        this._items = new Set();
+        this._disabled = false;
+    }
+    /** Whether starting a dragging sequence from inside this group is disabled. */
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
-        this._stateChanges.next(this);
-    }
-    constructor(element, parentDrag) {
-        this.element = element;
-        /** Emits when the state of the handle has changed. */
-        this._stateChanges = new Subject();
-        this._disabled = false;
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            assertElementNode(element.nativeElement, 'cdkDragHandle');
-        }
-        this._parentDrag = parentDrag;
     }
     ngOnDestroy() {
-        this._stateChanges.complete();
+        this._items.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: "14.0.0", version: "16.0.0", type: CdkDragHandle, isStandalone: true, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled"] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkDropListGroup, isStandalone: true, 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: "16.0.0", ngImport: i0, type: CdkDragHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDropListGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cdkDragHandle]',
+                    selector: '[cdkDropListGroup]',
+                    exportAs: 'cdkDropListGroup',
                     standalone: true,
-                    host: {
-                        'class': 'cdk-drag-handle',
-                    },
-                    providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }],
+                    providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CDK_DRAG_PARENT]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input,
-                args: ['cdkDragHandleDisabled']
-            }] } });
-
-/**
- * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as
- * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary
- * retention of the class and its directive metadata.
- */
-const CDK_DRAG_PLACEHOLDER = new InjectionToken('CdkDragPlaceholder');
-/**
- * Element that will be used as a template for the placeholder of a CdkDrag when
- * it is being dragged. The placeholder is displayed in place of the element being dragged.
- */
-class CdkDragPlaceholder {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDragPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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: "16.0.0", ngImport: i0, type: CdkDragPlaceholder, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[cdkDragPlaceholder]',
-                    standalone: true,
-                    providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
-                type: Input
-            }] } });
-
-/**
- * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
- * alternative token to the actual `CdkDragPreview` class which could cause unnecessary
- * retention of the class and its directive metadata.
- */
-const CDK_DRAG_PREVIEW = new InjectionToken('CdkDragPreview');
-/**
- * Element that will be used as a template for the preview
- * of a CdkDrag when it is being dragged.
- */
-class CdkDragPreview {
-    /** Whether the preview should preserve the same size as the item that is being dragged. */
-    get matchSize() {
-        return this._matchSize;
-    }
-    set matchSize(value) {
-        this._matchSize = coerceBooleanProperty(value);
-    }
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-        this._matchSize = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDragPreview, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkDragPreview, isStandalone: true, 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: "16.0.0", ngImport: i0, type: CdkDragPreview, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[cdkDragPreview]',
-                    standalone: true,
-                    providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
-                type: Input
-            }], matchSize: [{
-                type: Input
+                args: ['cdkDropListGroupDisabled']
             }] } });
 
-const DRAG_HOST_CLASS = 'cdk-drag';
-/** Element that can be moved inside a CdkDropList container. */
-class CdkDrag {
-    static { this._dragInstances = []; }
-    /** Whether starting to drag this element is disabled. */
+/** Counter used to generate unique ids for drop zones. */
+let _uniqueIdCounter = 0;
+/** Container that wraps a set of draggable items. */
+class CdkDropList {
+    /** Keeps track of the drop lists that are currently on the page. */
+    static { this._dropLists = []; }
+    /** Whether starting a dragging sequence from this container is disabled. */
     get disabled() {
-        return this._disabled || (this.dropContainer && this.dropContainer.disabled);
+        return this._disabled || (!!this._group && this._group.disabled);
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._dragRef.disabled = this._disabled;
+        // Usually we sync the directive and ref state right before dragging starts, in order to have
+        // a single point of failure and to avoid having to use setters for everything. `disabled` is
+        // a special case, because it can prevent the `beforeStarted` event from firing, which can lock
+        // the user in a disabled state, so we also need to sync it as it's being set.
+        this._dropListRef.disabled = this._disabled = coerceBooleanProperty(value);
     }
     constructor(
-    /** Element that the draggable is attached to. */
-    element, 
-    /** Droppable container that the draggable is a part of. */
-    dropContainer, 
-    /**
-     * @deprecated `_document` parameter no longer being used and will be removed.
-     * @breaking-change 12.0.0
-     */
-    _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle, _parentDrag) {
+    /** Element that the drop list is attached to. */
+    element, dragDrop, _changeDetectorRef, _scrollDispatcher, _dir, _group, config) {
         this.element = element;
-        this.dropContainer = dropContainer;
-        this._ngZone = _ngZone;
-        this._viewContainerRef = _viewContainerRef;
-        this._dir = _dir;
         this._changeDetectorRef = _changeDetectorRef;
-        this._selfHandle = _selfHandle;
-        this._parentDrag = _parentDrag;
+        this._scrollDispatcher = _scrollDispatcher;
+        this._dir = _dir;
+        this._group = _group;
+        /** Emits when the list has been destroyed. */
         this._destroyed = new Subject();
-        /** Emits when the user starts dragging the item. */
-        this.started = new EventEmitter();
-        /** Emits when the user has released a drag item, before any animations have started. */
-        this.released = new EventEmitter();
-        /** Emits when the user stops dragging an item in the container. */
-        this.ended = new EventEmitter();
-        /** Emits when the user has moved the item into a new container. */
+        /**
+         * Other draggable containers that this container is connected to and into which the
+         * container's items can be transferred. Can either be references to other drop containers,
+         * or their unique IDs.
+         */
+        this.connectedTo = [];
+        /**
+         * Unique ID for the drop zone. Can be used as a reference
+         * in the `connectedTo` of another `CdkDropList`.
+         */
+        this.id = `cdk-drop-list-${_uniqueIdCounter++}`;
+        /**
+         * 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 when the user drops an item inside the container. */
+        this.dropped = new EventEmitter();
+        /**
+         * Emits when the user has moved a new drag item into this container.
+         */
         this.entered = new EventEmitter();
-        /** Emits when the user removes the item its container by dragging it into another container. */
+        /**
+         * Emits when the user removes an item from the container
+         * by dragging it into another container.
+         */
         this.exited = new EventEmitter();
-        /** Emits when the user drops the item inside a container. */
-        this.dropped = new EventEmitter();
+        /** Emits as the user is swapping items while actively dragging. */
+        this.sorted = new EventEmitter();
         /**
-         * Emits as the user is dragging the item. Use with caution,
-         * because this event will fire for every pixel that the user has dragged.
+         * Keeps track of the items that are registered with this container. Historically we used to
+         * do this with a `ContentChildren` query, however queries don't handle transplanted views very
+         * well which means that we can't handle cases like dragging the headers of a `mat-table`
+         * correctly. What we do instead is to have the items register themselves with the container
+         * and then we sort them based on their position in the DOM.
          */
-        this.moved = new Observable((observer) => {
-            const subscription = this._dragRef.moved
-                .pipe(map(movedEvent => ({
-                source: this,
-                pointerPosition: movedEvent.pointerPosition,
-                event: movedEvent.event,
-                delta: movedEvent.delta,
-                distance: movedEvent.distance,
-            })))
-                .subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-            };
-        });
-        this._dragRef = dragDrop.createDrag(element, {
-            dragStartThreshold: config && config.dragStartThreshold != null ? config.dragStartThreshold : 5,
-            pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null
-                ? config.pointerDirectionChangeThreshold
-                : 5,
-            zIndex: config?.zIndex,
-        });
-        this._dragRef.data = this;
-        // We have to keep track of the drag instances in order to be able to match an element to
-        // a drag instance. We can't go through the global registry of `DragRef`, because the root
-        // element could be different.
-        CdkDrag._dragInstances.push(this);
+        this._unsortedItems = new Set();
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            assertElementNode(element.nativeElement, 'cdkDropList');
+        }
+        this._dropListRef = dragDrop.createDropList(element);
+        this._dropListRef.data = this;
         if (config) {
             this._assignDefaults(config);
         }
-        // Note that usually the container is assigned when the drop list is picks up the item, but in
-        // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
-        // where there are no items on the first change detection pass, but the items get picked up as
-        // soon as the user triggers another pass by dragging. This is a problem, because the item would
-        // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
-        // is too late since the two modes save different kinds of information. We work around it by
-        // assigning the drop container both from here and the list.
-        if (dropContainer) {
-            this._dragRef._withDropContainer(dropContainer._dropListRef);
-            dropContainer.addItem(this);
+        this._dropListRef.enterPredicate = (drag, drop) => {
+            return this.enterPredicate(drag.data, drop.data);
+        };
+        this._dropListRef.sortPredicate = (index, drag, drop) => {
+            return this.sortPredicate(index, drag.data, drop.data);
+        };
+        this._setupInputSyncSubscription(this._dropListRef);
+        this._handleEvents(this._dropListRef);
+        CdkDropList._dropLists.push(this);
+        if (_group) {
+            _group._items.add(this);
         }
-        this._syncInputs(this._dragRef);
-        this._handleEvents(this._dragRef);
-    }
-    /**
-     * Returns the element that is being used as a placeholder
-     * while the current element is being dragged.
-     */
-    getPlaceholderElement() {
-        return this._dragRef.getPlaceholderElement();
-    }
-    /** Returns the root draggable element. */
-    getRootElement() {
-        return this._dragRef.getRootElement();
     }
-    /** Resets a standalone drag item to its initial position. */
-    reset() {
-        this._dragRef.reset();
-    }
-    /**
-     * Gets the pixel coordinates of the draggable outside of a drop container.
-     */
-    getFreeDragPosition() {
-        return this._dragRef.getFreeDragPosition();
+    /** Registers an items with the drop list. */
+    addItem(item) {
+        this._unsortedItems.add(item);
+        if (this._dropListRef.isDragging()) {
+            this._syncItemsWithRef();
+        }
     }
-    /**
-     * Sets the current position in pixels the draggable outside of a drop container.
-     * @param value New position to be set.
-     */
-    setFreeDragPosition(value) {
-        this._dragRef.setFreeDragPosition(value);
+    /** Removes an item from the drop list. */
+    removeItem(item) {
+        this._unsortedItems.delete(item);
+        if (this._dropListRef.isDragging()) {
+            this._syncItemsWithRef();
+        }
     }
-    ngAfterViewInit() {
-        // Normally this isn't in the zone, but it can cause major performance regressions for apps
-        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
-        this._ngZone.runOutsideAngular(() => {
-            // We need to wait for the zone to stabilize, in order for the reference
-            // element to be in the proper place in the DOM. This is mostly relevant
-            // for draggable elements inside portals since they get stamped out in
-            // their original DOM position and then they get transferred to the portal.
-            this._ngZone.onStable.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
-                this._updateRootElement();
-                this._setupHandlesListener();
-                if (this.freeDragPosition) {
-                    this._dragRef.setFreeDragPosition(this.freeDragPosition);
-                }
-            });
+    /** Gets the registered items in the list, sorted by their position in the DOM. */
+    getSortedItems() {
+        return Array.from(this._unsortedItems).sort((a, b) => {
+            const documentPosition = a._dragRef
+                .getVisibleElement()
+                .compareDocumentPosition(b._dragRef.getVisibleElement());
+            // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
+            // tslint:disable-next-line:no-bitwise
+            return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
         });
     }
-    ngOnChanges(changes) {
-        const rootSelectorChange = changes['rootElementSelector'];
-        const positionChange = changes['freeDragPosition'];
-        // We don't have to react to the first change since it's being
-        // handled in `ngAfterViewInit` where it needs to be deferred.
-        if (rootSelectorChange && !rootSelectorChange.firstChange) {
-            this._updateRootElement();
-        }
-        // Skip the first change since it's being handled in `ngAfterViewInit`.
-        if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
-            this._dragRef.setFreeDragPosition(this.freeDragPosition);
-        }
-    }
     ngOnDestroy() {
-        if (this.dropContainer) {
-            this.dropContainer.removeItem(this);
-        }
-        const index = CdkDrag._dragInstances.indexOf(this);
+        const index = CdkDropList._dropLists.indexOf(this);
         if (index > -1) {
-            CdkDrag._dragInstances.splice(index, 1);
-        }
-        // Unnecessary in most cases, but used to avoid extra change detections with `zone-paths-rxjs`.
-        this._ngZone.runOutsideAngular(() => {
-            this._destroyed.next();
-            this._destroyed.complete();
-            this._dragRef.dispose();
-        });
-    }
-    /** Syncs the root element with the `DragRef`. */
-    _updateRootElement() {
-        const element = this.element.nativeElement;
-        let rootElement = element;
-        if (this.rootElementSelector) {
-            rootElement =
-                element.closest !== undefined
-                    ? element.closest(this.rootElementSelector)
-                    : // Comment tag doesn't have closest method, so use parent's one.
-                        element.parentElement?.closest(this.rootElementSelector);
+            CdkDropList._dropLists.splice(index, 1);
         }
-        if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-            assertElementNode(rootElement, 'cdkDrag');
+        if (this._group) {
+            this._group._items.delete(this);
         }
-        this._dragRef.withRootElement(rootElement || element);
+        this._unsortedItems.clear();
+        this._dropListRef.dispose();
+        this._destroyed.next();
+        this._destroyed.complete();
     }
-    /** Gets the boundary element, based on the `boundaryElement` value. */
-    _getBoundaryElement() {
-        const boundary = this.boundaryElement;
-        if (!boundary) {
-            return null;
-        }
-        if (typeof boundary === 'string') {
-            return this.element.nativeElement.closest(boundary);
+    /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
+    _setupInputSyncSubscription(ref) {
+        if (this._dir) {
+            this._dir.change
+                .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
+                .subscribe(value => ref.withDirection(value));
         }
-        return coerceElement(boundary);
-    }
-    /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
-    _syncInputs(ref) {
         ref.beforeStarted.subscribe(() => {
-            if (!ref.isDragging()) {
-                const dir = this._dir;
-                const dragStartDelay = this.dragStartDelay;
-                const placeholder = this._placeholderTemplate
-                    ? {
-                        template: this._placeholderTemplate.templateRef,
-                        context: this._placeholderTemplate.data,
-                        viewContainer: this._viewContainerRef,
-                    }
-                    : null;
-                const preview = this._previewTemplate
-                    ? {
-                        template: this._previewTemplate.templateRef,
-                        context: this._previewTemplate.data,
-                        matchSize: this._previewTemplate.matchSize,
-                        viewContainer: this._viewContainerRef,
+            const siblings = coerceArray(this.connectedTo).map(drop => {
+                if (typeof drop === 'string') {
+                    const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);
+                    if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+                        console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
                     }
-                    : null;
-                ref.disabled = this.disabled;
-                ref.lockAxis = this.lockAxis;
-                ref.dragStartDelay =
-                    typeof dragStartDelay === 'object' && dragStartDelay
-                        ? dragStartDelay
-                        : coerceNumberProperty(dragStartDelay);
-                ref.constrainPosition = this.constrainPosition;
-                ref.previewClass = this.previewClass;
-                ref
-                    .withBoundaryElement(this._getBoundaryElement())
-                    .withPlaceholderTemplate(placeholder)
-                    .withPreviewTemplate(preview)
-                    .withPreviewContainer(this.previewContainer || 'global');
-                if (dir) {
-                    ref.withDirection(dir.value);
-                }
-            }
-        });
-        // This only needs to be resolved once.
-        ref.beforeStarted.pipe(take(1)).subscribe(() => {
-            // If we managed to resolve a parent through DI, use it.
-            if (this._parentDrag) {
-                ref.withParent(this._parentDrag._dragRef);
-                return;
-            }
-            // Otherwise fall back to resolving the parent by looking up the DOM. This can happen if
-            // the item was projected into another item by something like `ngTemplateOutlet`.
-            let parent = this.element.nativeElement.parentElement;
-            while (parent) {
-                if (parent.classList.contains(DRAG_HOST_CLASS)) {
-                    ref.withParent(CdkDrag._dragInstances.find(drag => {
-                        return drag.element.nativeElement === parent;
-                    })?._dragRef || null);
-                    break;
+                    return correspondingDropList;
                 }
-                parent = parent.parentElement;
+                return drop;
+            });
+            if (this._group) {
+                this._group._items.forEach(drop => {
+                    if (siblings.indexOf(drop) === -1) {
+                        siblings.push(drop);
+                    }
+                });
+            }
+            // Note that we resolve the scrollable parents here so that we delay the resolution
+            // as long as possible, ensuring that the element is in its final place in the DOM.
+            if (!this._scrollableParentsResolved) {
+                const scrollableParents = this._scrollDispatcher
+                    .getAncestorScrollContainers(this.element)
+                    .map(scrollable => scrollable.getElementRef().nativeElement);
+                this._dropListRef.withScrollableParents(scrollableParents);
+                // Only do this once since it involves traversing the DOM and the parents
+                // shouldn't be able to change without the drop list being destroyed.
+                this._scrollableParentsResolved = true;
             }
+            ref.disabled = this.disabled;
+            ref.lockAxis = this.lockAxis;
+            ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);
+            ref.autoScrollDisabled = coerceBooleanProperty(this.autoScrollDisabled);
+            ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);
+            ref
+                .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
+                .withOrientation(this.orientation);
         });
     }
-    /** Handles the events from the underlying `DragRef`. */
+    /** Handles events from the underlying DropListRef. */
     _handleEvents(ref) {
-        ref.started.subscribe(startEvent => {
-            this.started.emit({ source: this, event: startEvent.event });
-            // Since all of these events run outside of change detection,
-            // we need to ensure that everything is marked correctly.
-            this._changeDetectorRef.markForCheck();
-        });
-        ref.released.subscribe(releaseEvent => {
-            this.released.emit({ source: this, event: releaseEvent.event });
-        });
-        ref.ended.subscribe(endEvent => {
-            this.ended.emit({
-                source: this,
-                distance: endEvent.distance,
-                dropPoint: endEvent.dropPoint,
-                event: endEvent.event,
-            });
-            // Since all of these events run outside of change detection,
-            // we need to ensure that everything is marked correctly.
+        ref.beforeStarted.subscribe(() => {
+            this._syncItemsWithRef();
             this._changeDetectorRef.markForCheck();
         });
-        ref.entered.subscribe(enterEvent => {
+        ref.entered.subscribe(event => {
             this.entered.emit({
-                container: enterEvent.container.data,
-                item: this,
-                currentIndex: enterEvent.currentIndex,
+                container: this,
+                item: event.item.data,
+                currentIndex: event.currentIndex,
             });
         });
-        ref.exited.subscribe(exitEvent => {
+        ref.exited.subscribe(event => {
             this.exited.emit({
-                container: exitEvent.container.data,
-                item: this,
+                container: this,
+                item: event.item.data,
+            });
+            this._changeDetectorRef.markForCheck();
+        });
+        ref.sorted.subscribe(event => {
+            this.sorted.emit({
+                previousIndex: event.previousIndex,
+                currentIndex: event.currentIndex,
+                container: this,
+                item: event.item.data,
             });
         });
         ref.dropped.subscribe(dropEvent => {
@@ -3436,176 +3495,117 @@ class CdkDrag {
                 currentIndex: dropEvent.currentIndex,
                 previousContainer: dropEvent.previousContainer.data,
                 container: dropEvent.container.data,
+                item: dropEvent.item.data,
                 isPointerOverContainer: dropEvent.isPointerOverContainer,
-                item: this,
                 distance: dropEvent.distance,
                 dropPoint: dropEvent.dropPoint,
                 event: dropEvent.event,
             });
+            // Mark for check since all of these events run outside of change
+            // detection and we're not guaranteed for something else to have triggered it.
+            this._changeDetectorRef.markForCheck();
         });
+        merge(ref.receivingStarted, ref.receivingStopped).subscribe(() => this._changeDetectorRef.markForCheck());
     }
     /** Assigns the default input values based on a provided config object. */
     _assignDefaults(config) {
-        const { lockAxis, dragStartDelay, constrainPosition, previewClass, boundaryElement, draggingDisabled, rootElementSelector, previewContainer, } = config;
+        const { lockAxis, draggingDisabled, sortingDisabled, listAutoScrollDisabled, listOrientation } = config;
         this.disabled = draggingDisabled == null ? false : draggingDisabled;
-        this.dragStartDelay = dragStartDelay || 0;
+        this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
+        this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
+        this.orientation = listOrientation || 'vertical';
         if (lockAxis) {
             this.lockAxis = lockAxis;
         }
-        if (constrainPosition) {
-            this.constrainPosition = constrainPosition;
-        }
-        if (previewClass) {
-            this.previewClass = previewClass;
-        }
-        if (boundaryElement) {
-            this.boundaryElement = boundaryElement;
-        }
-        if (rootElementSelector) {
-            this.rootElementSelector = rootElementSelector;
-        }
-        if (previewContainer) {
-            this.previewContainer = previewContainer;
-        }
     }
-    /** Sets up the listener that syncs the handles with the drag ref. */
-    _setupHandlesListener() {
-        // Listen for any newly-added handles.
-        this._handles.changes
-            .pipe(startWith(this._handles), 
-        // Sync the new handles with the DragRef.
-        tap((handles) => {
-            const childHandleElements = handles
-                .filter(handle => handle._parentDrag === this)
-                .map(handle => handle.element);
-            // Usually handles are only allowed to be a descendant of the drag element, but if
-            // the consumer defined a different drag root, we should allow the drag element
-            // itself to be a handle too.
-            if (this._selfHandle && this.rootElementSelector) {
-                childHandleElements.push(this.element);
-            }
-            this._dragRef.withHandles(childHandleElements);
-        }), 
-        // Listen if the state of any of the handles changes.
-        switchMap((handles) => {
-            return merge(...handles.map(item => {
-                return item._stateChanges.pipe(startWith(item));
-            }));
-        }), takeUntil(this._destroyed))
-            .subscribe(handleInstance => {
-            // Enabled/disable the handle that changed in the DragRef.
-            const dragRef = this._dragRef;
-            const handle = handleInstance.element.nativeElement;
-            handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
-        });
+    /** Syncs up the registered drag items with underlying drop list ref. */
+    _syncItemsWithRef() {
+        this._dropListRef.withItems(this.getSortedItems().map(item => item._dragRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: 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 }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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"], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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: "14.0.0", version: "16.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"], 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: "16.0.0", ngImport: i0, type: CdkDrag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkDropList, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[cdkDrag]',
-                    exportAs: 'cdkDrag',
+                    selector: '[cdkDropList], cdk-drop-list',
+                    exportAs: 'cdkDropList',
                     standalone: true,
+                    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 },
+                    ],
                     host: {
-                        'class': DRAG_HOST_CLASS,
-                        '[class.cdk-drag-disabled]': 'disabled',
-                        '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
+                        'class': 'cdk-drop-list',
+                        '[attr.id]': 'id',
+                        '[class.cdk-drop-list-disabled]': 'disabled',
+                        '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
+                        '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
                     },
-                    providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CDK_DROP_LIST]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragDrop }, { type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }, {
-                    type: Inject,
-                    args: [CDK_DRAG_CONFIG]
-                }] }, { type: i3.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: DragDrop }, { type: i0.ChangeDetectorRef }, { type: CdkDragHandle, decorators: [{
+                }] }, { type: CdkDropListGroup, decorators: [{
                     type: Optional
-                }, {
-                    type: Self
                 }, {
                     type: Inject,
-                    args: [CDK_DRAG_HANDLE]
-                }] }, { type: CdkDrag, decorators: [{
-                    type: Optional
+                    args: [CDK_DROP_LIST_GROUP]
                 }, {
                     type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
                 }, {
                     type: Inject,
-                    args: [CDK_DRAG_PARENT]
-                }] }]; }, propDecorators: { _handles: [{
-                type: ContentChildren,
-                args: [CDK_DRAG_HANDLE, { descendants: true }]
-            }], _previewTemplate: [{
-                type: ContentChild,
-                args: [CDK_DRAG_PREVIEW]
-            }], _placeholderTemplate: [{
-                type: ContentChild,
-                args: [CDK_DRAG_PLACEHOLDER]
-            }], data: [{
+                    args: [CDK_DRAG_CONFIG]
+                }] }]; }, propDecorators: { connectedTo: [{
                 type: Input,
-                args: ['cdkDragData']
-            }], lockAxis: [{
+                args: ['cdkDropListConnectedTo']
+            }], data: [{
                 type: Input,
-                args: ['cdkDragLockAxis']
-            }], rootElementSelector: [{
+                args: ['cdkDropListData']
+            }], orientation: [{
                 type: Input,
-                args: ['cdkDragRootElement']
-            }], boundaryElement: [{
+                args: ['cdkDropListOrientation']
+            }], id: [{
+                type: Input
+            }], lockAxis: [{
                 type: Input,
-                args: ['cdkDragBoundary']
-            }], dragStartDelay: [{
+                args: ['cdkDropListLockAxis']
+            }], disabled: [{
                 type: Input,
-                args: ['cdkDragStartDelay']
-            }], freeDragPosition: [{
+                args: ['cdkDropListDisabled']
+            }], sortingDisabled: [{
                 type: Input,
-                args: ['cdkDragFreeDragPosition']
-            }], disabled: [{
+                args: ['cdkDropListSortingDisabled']
+            }], enterPredicate: [{
                 type: Input,
-                args: ['cdkDragDisabled']
-            }], constrainPosition: [{
+                args: ['cdkDropListEnterPredicate']
+            }], sortPredicate: [{
                 type: Input,
-                args: ['cdkDragConstrainPosition']
-            }], previewClass: [{
+                args: ['cdkDropListSortPredicate']
+            }], autoScrollDisabled: [{
                 type: Input,
-                args: ['cdkDragPreviewClass']
-            }], previewContainer: [{
+                args: ['cdkDropListAutoScrollDisabled']
+            }], autoScrollStep: [{
                 type: Input,
-                args: ['cdkDragPreviewContainer']
-            }], started: [{
-                type: Output,
-                args: ['cdkDragStarted']
-            }], released: [{
-                type: Output,
-                args: ['cdkDragReleased']
-            }], ended: [{
+                args: ['cdkDropListAutoScrollStep']
+            }], dropped: [{
                 type: Output,
-                args: ['cdkDragEnded']
+                args: ['cdkDropListDropped']
             }], entered: [{
                 type: Output,
-                args: ['cdkDragEntered']
+                args: ['cdkDropListEntered']
             }], exited: [{
                 type: Output,
-                args: ['cdkDragExited']
-            }], dropped: [{
-                type: Output,
-                args: ['cdkDragDropped']
-            }], moved: [{
+                args: ['cdkDropListExited']
+            }], sorted: [{
                 type: Output,
-                args: ['cdkDragMoved']
+                args: ['cdkDropListSorted']
             }] } });
 
 const DRAG_DROP_DIRECTIVES = [