chore(drag-drop): rename cdkDrop to cdkDropList (#13619)

src/cdk/drag-drop/drag-drop-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CdkDrop} from './drop';
+import {CdkDropList} from './drop-list';
 import {CdkDrag} from './drag';
 import {CdkDragHandle} from './drag-handle';
 import {CdkDragPreview} from './drag-preview';
@@ -15,14 +15,14 @@ import {CdkDragPlaceholder} from './drag-placeholder';
 
 @NgModule({
   declarations: [
-    CdkDrop,
+    CdkDropList,
     CdkDrag,
     CdkDragHandle,
     CdkDragPreview,
     CdkDragPlaceholder,
   ],
   exports: [
-    CdkDrop,
+    CdkDropList,
     CdkDrag,
     CdkDragHandle,
     CdkDragPreview,

src/cdk/drag-drop/drag-drop-registry.spec.ts

@@ -9,12 +9,12 @@ import {
 import {DragDropRegistry} from './drag-drop-registry';
 import {DragDropModule} from './drag-drop-module';
 import {CdkDrag} from './drag';
-import {CdkDrop} from './drop';
+import {CdkDropList} from './drop-list';
 
 describe('DragDropRegistry', () => {
   let fixture: ComponentFixture<SimpleDropZone>;
   let testComponent: SimpleDropZone;
-  let registry: DragDropRegistry<CdkDrag, CdkDrop>;
+  let registry: DragDropRegistry<CdkDrag, CdkDropList>;
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
@@ -26,7 +26,7 @@ describe('DragDropRegistry', () => {
     testComponent = fixture.componentInstance;
     fixture.detectChanges();
 
-    inject([DragDropRegistry], (c: DragDropRegistry<CdkDrag, CdkDrop>) => {
+    inject([DragDropRegistry], (c: DragDropRegistry<CdkDrag, CdkDropList>) => {
       registry = c;
     })();
   }));
@@ -159,16 +159,16 @@ describe('DragDropRegistry', () => {
 
 @Component({
   template: `
-    <div cdkDrop id="items" [cdkDropData]="items">
+    <div cdkDropList id="items" [cdkDropListData]="items">
       <div *ngFor="let item of items" cdkDrag>{{item}}</div>
     </div>
 
-    <div cdkDrop id="items" *ngIf="showDuplicateContainer"></div>
+    <div cdkDropList id="items" *ngIf="showDuplicateContainer"></div>
   `
 })
 class SimpleDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
-  @ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
+  @ViewChildren(CdkDropList) dropInstances: QueryList<CdkDropList>;
   items = ['Zero', 'One', 'Two', 'Three'];
   showDuplicateContainer = false;
 }

src/cdk/drag-drop/drag-drop.md

@@ -6,62 +6,62 @@ in addition to horizontal lists and locking along an axis.
 ### Getting started
 Start by importing `DragDropModule` into the `NgModule` where you want to use drag-and-drop
 features. You can now add the `cdkDrag` directive to elements to make them draggable. When
-outside of a `cdkDrop` element, draggable elements can be freely moved around the page.
-You can add `cdkDrop` elements to constrain where elements may be dropped.
+outside of a `cdkDropList` element, draggable elements can be freely moved around the page.
+You can add `cdkDropList` elements to constrain where elements may be dropped.
 
 <!-- example(cdk-drag-drop-overview) -->
 
 ### Reordering lists
-Adding `cdkDrop` around a set of `cdkDrag` elements groups the draggables into a
+Adding `cdkDropList` around a set of `cdkDrag` elements groups the draggables into a
 reorderable collection. Items will automatically rearrange as an element moves. Note
-that this will *not* update your data model; you can listen to the `cdkDropDropped` event to
+that this will *not* update your data model; you can listen to the `cdkDropListDropped` event to
 update the data model once the user finishes dragging.
 
 <!-- example(cdk-drag-drop-sorting) -->
 
 ### Transferring items between lists
-The `cdkDrop` directive supports transferring dragged items between connected drop zones.
-You can connect one or more `cdkDrop` instances together by setting the `cdkDropConnectedTo`
+The `cdkDropList` directive supports transferring dragged items between connected drop zones.
+You can connect one or more `cdkDropList` instances together by setting the `cdkDropListConnectedTo`
 property.
 
 <!-- example(cdk-drag-drop-connected-sorting) -->
 
-Note that `cdkDropConnectedTo` works both with a direct reference to another `cdkDrop`, or by
+Note that `cdkDropListConnectedTo` works both with a direct reference to another `cdkDropList`, or by
 referencing the `id` of another drop container:
 
 ```html
 <!-- This is valid -->
-<div cdkDrop #listOne="cdkDrop" [cdkDropConnectedTo]="[listTwo]"></div>
-<div cdkDrop #listTwo="cdkDrop" [cdkDropConnectedTo]="[listOne]"></div>
+<div cdkDropList #listOne="cdkDropList" [cdkDropListConnectedTo]="[listTwo]"></div>
+<div cdkDropList #listTwo="cdkDropList" [cdkDropListConnectedTo]="[listOne]"></div>
 
 <!-- This is valid as well -->
-<div cdkDrop id="list-one" [cdkDropConnectedTo]="['list-two']"></div>
-<div cdkDrop id="list-two" [cdkDropConnectedTo]="['list-one']"></div>
+<div cdkDropList id="list-one" [cdkDropListConnectedTo]="['list-two']"></div>
+<div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
 ```
 
 ### Attaching data
-You can associate some arbitrary data with both `cdkDrag` and `cdkDrop` by setting `cdkDragData`
-or `cdkDropData`, respectively. Events fired from both directives include this data, allowing
+You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData`
+or `cdkDropListData`, respectively. Events fired from both directives include this data, allowing
 you to easily identify the origin of the drag or drop interaction.
 
 ```html
-<div cdkDrop [cdkDropData]="list" *ngFor="let list of lists" (cdkDropDropped)="drop($event)">
+<div cdkDropList [cdkDropListData]="list" *ngFor="let list of lists" (cdkDropListDropped)="drop($event)">
   <div cdkDrag [cdkDragData]="item" *ngFor="let item of list"></div>
 </div>
 ```
 
 ### Styling
-The `cdkDrag` and `cdkDrop` directive include only those styles strictly necessary for
+The `cdkDrag` and `cdkDropList` directive include only those styles strictly necessary for
 functionality. The application can then customize the elements by styling CSS classes added
 by the directives:
 
 | Selector            | Description                                                              |
 |---------------------|--------------------------------------------------------------------------|
-| `.cdk-drop`         | Corresponds to the `cdkDrop` container.                                  |
+| `.cdk-drop-list`         | Corresponds to the `cdkDropList` container.                                  |
 | `.cdk-drag`         | Corresponds to a `cdkDrag` instance.                                     |
 | `.cdk-drag-preview` | This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged. |
-| `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDrop`. By default this will look exactly like the element that is being sorted. |
-| `.cdk-drop-dragging` | A class that is added to `cdkDrop` while the user is dragging an item.  |
+| `.cdk-drag-placeholder` | This is element that will be shown instead of the real element as it's being dragged inside a `cdkDropList`. By default this will look exactly like the element that is being sorted. |
+| `.cdk-drop-dragging` | A class that is added to `cdkDropList` while the user is dragging an item.  |
 
 ### Animations
 The drag-and-drop module supports animations both while sorting an element inside a list, as well as
@@ -73,7 +73,7 @@ following classes can be used for animations:
     through a list.
 * `.cdk-drag-animating` - This class is added to a `cdkDrag` when the user has stopped dragging.
     If you add a `transition` to it, the CDK will animate the element from its drop position to
-    the final position inside the `cdkDrop` container.
+    the final position inside the `cdkDropList` container.
 
 Example animations:
 
@@ -105,14 +105,14 @@ This preview can be customized, though, by providing a custom template via `*cdk
 <!-- example(cdk-drag-drop-custom-preview) -->
 
 ### List orientation
-The `cdkDrop` directive assumes that lists are vertical by default. This can be
+The `cdkDropList` directive assumes that lists are vertical by default. This can be
 changed by setting the `orientation` property to `"horizontal".
 
 <!-- example(cdk-drag-drop-horizontal-sorting) -->
 
 ### Restricting movement along an axis
 By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a
-specific axis, you can set `cdkDragLockAxis` on `cdkDrag` or `lockAxis` on `cdkDrop`
+specific axis, you can set `cdkDragLockAxis` on `cdkDrag` or `lockAxis` on `cdkDropList`
 to either `"x"` or `"y"`.
 
 <!-- example(cdk-drag-drop-axis-lock) -->

src/cdk/drag-drop/drag-events.ts

@@ -7,7 +7,7 @@
  */
 
 import {CdkDrag} from './drag';
-import {CdkDropContainer} from './drop-container';
+import {CdkDropListContainer} from './drop-list-container';
 
 /** Event emitted when the user starts dragging a draggable. */
 export interface CdkDragStart<T = any> {
@@ -24,7 +24,7 @@ export interface CdkDragEnd<T = any> {
 /** Event emitted when the user moves an item into a new drop container. */
 export interface CdkDragEnter<T = any, I = T> {
   /** Container into which the user has moved the item. */
-  container: CdkDropContainer<T>;
+  container: CdkDropListContainer<T>;
   /** Item that was removed from the container. */
   item: CdkDrag<I>;
 }
@@ -35,7 +35,7 @@ export interface CdkDragEnter<T = any, I = T> {
  */
 export interface CdkDragExit<T = any, I = T> {
   /** Container from which the user has a removed an item. */
-  container: CdkDropContainer<T>;
+  container: CdkDropListContainer<T>;
   /** Item that was removed from the container. */
   item: CdkDrag<I>;
 }
@@ -50,9 +50,9 @@ export interface CdkDragDrop<T, O = T> {
   /** Item that is being dropped. */
   item: CdkDrag;
   /** Container in which the item was dropped. */
-  container: CdkDropContainer<T>;
+  container: CdkDropListContainer<T>;
   /** Container from which the item was picked up. Can be the same as the `container`. */
-  previousContainer: CdkDropContainer<O>;
+  previousContainer: CdkDropListContainer<O>;
 }
 
 /** Event emitted as the user is dragging a draggable item. */

src/cdk/drag-drop/drag.spec.ts

@@ -22,7 +22,7 @@ import {Directionality} from '@angular/cdk/bidi';
 import {CdkDrag, CDK_DRAG_CONFIG, CdkDragConfig} from './drag';
 import {CdkDragDrop} from './drag-events';
 import {moveItemInArray} from './drag-utils';
-import {CdkDrop} from './drop';
+import {CdkDropList} from './drop-list';
 import {CdkDragHandle} from './drag-handle';
 
 const ITEM_HEIGHT = 25;
@@ -478,11 +478,11 @@ describe('CdkDrag', () => {
       const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
       const dropZone = fixture.componentInstance.dropInstance;
 
-      expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-dragging');
+      expect(dropZone.element.nativeElement.classList).not.toContain('cdk-drop-list-dragging');
 
       startDraggingViaMouse(fixture, item);
 
-      expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-dragging');
+      expect(dropZone.element.nativeElement.classList).toContain('cdk-drop-list-dragging');
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();
@@ -1749,11 +1749,11 @@ class StandaloneDraggableWithMultipleHandles {
 @Component({
   template: `
     <div
-      cdkDrop
+      cdkDropList
       style="width: 100px; background: pink;"
       [id]="dropZoneId"
-      [cdkDropData]="items"
-      (cdkDropDropped)="droppedSpy($event)">
+      [cdkDropListData]="items"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div
         *ngFor="let item of items"
         cdkDrag
@@ -1764,7 +1764,7 @@ class StandaloneDraggableWithMultipleHandles {
 })
 class DraggableInDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
-  @ViewChild(CdkDrop) dropInstance: CdkDrop;
+  @ViewChild(CdkDropList) dropInstance: CdkDropList;
   items = ['Zero', 'One', 'Two', 'Three'];
   dropZoneId = 'items';
   droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop<string[]>) => {
@@ -1778,7 +1778,7 @@ class DraggableInDropZone {
   styles: [
   // Use inline blocks here to avoid flexbox issues and not to have to flip floats in rtl.
   `
-    .cdk-drop {
+    .cdk-drop-list {
       display: block;
       width: 300px;
       background: pink;
@@ -1794,17 +1794,17 @@ class DraggableInDropZone {
   `],
   template: `
     <div
-      cdkDrop
-      cdkDropOrientation="horizontal"
-      [cdkDropData]="items"
-      (cdkDropDropped)="droppedSpy($event)">
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      [cdkDropListData]="items"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div *ngFor="let item of items" cdkDrag>{{item}}</div>
     </div>
   `
 })
 class DraggableInHorizontalDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
-  @ViewChild(CdkDrop) dropInstance: CdkDrop;
+  @ViewChild(CdkDropList) dropInstance: CdkDropList;
   items = ['Zero', 'One', 'Two', 'Three'];
   droppedSpy = jasmine.createSpy('dropped spy').and.callFake((event: CdkDragDrop<string[]>) => {
     moveItemInArray(this.items, event.previousIndex, event.currentIndex);
@@ -1813,7 +1813,7 @@ class DraggableInHorizontalDropZone {
 
 @Component({
   template: `
-    <div cdkDrop style="width: 100px; background: pink;">
+    <div cdkDropList style="width: 100px; background: pink;">
       <div *ngFor="let item of items" cdkDrag
         style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
@@ -1823,7 +1823,7 @@ class DraggableInHorizontalDropZone {
   `
 })
 class DraggableInDropZoneWithCustomPreview {
-  @ViewChild(CdkDrop) dropInstance: CdkDrop;
+  @ViewChild(CdkDropList) dropInstance: CdkDropList;
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   items = ['Zero', 'One', 'Two', 'Three'];
 }
@@ -1831,7 +1831,7 @@ class DraggableInDropZoneWithCustomPreview {
 
 @Component({
   template: `
-    <div cdkDrop style="width: 100px; background: pink;">
+    <div cdkDropList style="width: 100px; background: pink;">
       <div *ngFor="let item of items" cdkDrag
         style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
@@ -1849,7 +1849,7 @@ class DraggableInDropZoneWithCustomPlaceholder {
 @Component({
   encapsulation: ViewEncapsulation.None,
   styles: [`
-    .cdk-drop {
+    .cdk-drop-list {
       display: block;
       width: 100px;
       min-height: ${ITEM_HEIGHT}px;
@@ -1864,27 +1864,27 @@ class DraggableInDropZoneWithCustomPlaceholder {
   `],
   template: `
     <div
-      cdkDrop
-      #todoZone="cdkDrop"
-      [cdkDropData]="todo"
-      [cdkDropConnectedTo]="[doneZone]"
-      (cdkDropDropped)="droppedSpy($event)">
+      cdkDropList
+      #todoZone="cdkDropList"
+      [cdkDropListData]="todo"
+      [cdkDropListConnectedTo]="[doneZone]"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div [cdkDragData]="item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
     </div>
 
     <div
-      cdkDrop
-      #doneZone="cdkDrop"
-      [cdkDropData]="done"
-      [cdkDropConnectedTo]="[todoZone]"
-      (cdkDropDropped)="droppedSpy($event)">
+      cdkDropList
+      #doneZone="cdkDropList"
+      [cdkDropListData]="done"
+      [cdkDropListConnectedTo]="[todoZone]"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div [cdkDragData]="item" *ngFor="let item of done" cdkDrag>{{item}}</div>
     </div>
   `
 })
 class ConnectedDropZones implements AfterViewInit {
   @ViewChildren(CdkDrag) rawDragItems: QueryList<CdkDrag>;
-  @ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
+  @ViewChildren(CdkDropList) dropInstances: QueryList<CdkDropList>;
 
   groupedDragItems: CdkDrag[][] = [];
   todo = ['Zero', 'One', 'Two', 'Three'];
@@ -1924,7 +1924,7 @@ class DraggableWithAlternateRoot {
 @Component({
   encapsulation: ViewEncapsulation.None,
   styles: [`
-    .cdk-drop {
+    .cdk-drop-list {
       display: block;
       width: 100px;
       min-height: ${ITEM_HEIGHT}px;
@@ -1939,25 +1939,25 @@ class DraggableWithAlternateRoot {
   `],
   template: `
     <div
-      cdkDrop
-      #todoZone="cdkDrop"
-      [cdkDropConnectedTo]="[doneZone]"
-      (cdkDropDropped)="droppedSpy($event)">
+      cdkDropList
+      #todoZone="cdkDropList"
+      [cdkDropListConnectedTo]="[doneZone]"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div cdkDrag>One</div>
     </div>
 
     <div
-      cdkDrop
-      #doneZone="cdkDrop"
-      [cdkDropConnectedTo]="[todoZone]"
-      (cdkDropDropped)="droppedSpy($event)">
+      cdkDropList
+      #doneZone="cdkDropList"
+      [cdkDropListConnectedTo]="[todoZone]"
+      (cdkDropListDropped)="droppedSpy($event)">
       <div cdkDrag>Two</div>
     </div>
   `
 })
 class ConnectedDropZonesWithSingleItems {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
-  @ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
+  @ViewChildren(CdkDropList) dropInstances: QueryList<CdkDropList>;
 
   droppedSpy = jasmine.createSpy('dropped spy');
 }

src/cdk/drag-drop/drag.ts

@@ -42,7 +42,7 @@ import {
 import {CdkDragHandle} from './drag-handle';
 import {CdkDragPlaceholder} from './drag-placeholder';
 import {CdkDragPreview} from './drag-preview';
-import {CDK_DROP_CONTAINER, CdkDropContainer} from './drop-container';
+import {CDK_DROP_LIST_CONTAINER, CdkDropListContainer} from './drop-list-container';
 import {getTransformTransitionDurationInMs} from './transition-duration';
 import {extendStyles, toggleNativeDragInteractions} from './drag-styling';
 
@@ -134,7 +134,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
   private _hasMoved: boolean;
 
   /** Drop container in which the CdkDrag resided when dragging began. */
-  private _initialContainer: CdkDropContainer;
+  private _initialContainer: CdkDropListContainer;
 
   /** Cached scroll position on the page when the element was picked up. */
   private _scrollPosition: {top: number, left: number};
@@ -222,12 +222,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
     /** Element that the draggable is attached to. */
     public element: ElementRef<HTMLElement>,
     /** Droppable container that the draggable is a part of. */
-    @Inject(CDK_DROP_CONTAINER) @Optional() @SkipSelf() public dropContainer: CdkDropContainer,
+    @Inject(CDK_DROP_LIST_CONTAINER) @Optional() @SkipSelf()
+    public dropContainer: CdkDropListContainer,
     @Inject(DOCUMENT) document: any,
     private _ngZone: NgZone,
     private _viewContainerRef: ViewContainerRef,
     private _viewportRuler: ViewportRuler,
-    private _dragDropRegistry: DragDropRegistry<CdkDrag<T>, CdkDropContainer>,
+    private _dragDropRegistry: DragDropRegistry<CdkDrag<T>, CdkDropListContainer>,
     @Inject(CDK_DRAG_CONFIG) private _config: CdkDragConfig,
     @Optional() private _dir: Directionality) {
       this._document = document;

src/cdk/drag-drop/drop-list-container.ts

@@ -10,7 +10,7 @@ import {InjectionToken, QueryList, ElementRef} from '@angular/core';
 import {CdkDrag} from './drag';
 
 
-export interface CdkDropContainer<T = any> {
+export interface CdkDropListContainer<T = any> {
   /** DOM node that corresponds to the drop container. */
   element: ElementRef<HTMLElement>;
 
@@ -35,7 +35,7 @@ export interface CdkDropContainer<T = any> {
    * @param currentIndex Index at which the item should be inserted.
    * @param previousContainer Container from which the item got dragged in.
    */
-  drop(item: CdkDrag, currentIndex: number, previousContainer?: CdkDropContainer): void;
+  drop(item: CdkDrag, currentIndex: number, previousContainer?: CdkDropListContainer): void;
 
   /**
    * Emits an event to indicate that the user moved an item into the container.
@@ -58,7 +58,8 @@ export interface CdkDropContainer<T = any> {
   getItemIndex(item: CdkDrag): number;
   _sortItem(item: CdkDrag, pointerX: number, pointerY: number, delta: {x: number, y: number}): void;
   _draggables: QueryList<CdkDrag>;
-  _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropContainer | null;
+  _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number):
+      CdkDropListContainer | null;
   _canReturnItem(item: CdkDrag, x: number, y: number): boolean;
 }
 
@@ -66,4 +67,5 @@ export interface CdkDropContainer<T = any> {
  * Injection token that is used to provide a CdkDrop instance to CdkDrag.
  * Used for avoiding circular imports.
  */
-export const CDK_DROP_CONTAINER = new InjectionToken<CdkDropContainer>('CDK_DROP_CONTAINER');
+export const CDK_DROP_LIST_CONTAINER =
+    new InjectionToken<CdkDropListContainer>('CDK_DROP_LIST_CONTAINER');

src/cdk/drag-drop/drop-list.ts

@@ -25,7 +25,7 @@ import {CdkDrag} from './drag';
 import {DragDropRegistry} from './drag-drop-registry';
 import {CdkDragDrop, CdkDragEnter, CdkDragExit} from './drag-events';
 import {moveItemInArray} from './drag-utils';
-import {CDK_DROP_CONTAINER} from './drop-container';
+import {CDK_DROP_LIST_CONTAINER} from './drop-list-container';
 
 
 /** Counter used to generate unique ids for drop zones. */
@@ -39,18 +39,18 @@ const DROP_PROXIMITY_THRESHOLD = 0.05;
 
 /** Container that wraps a set of draggable items. */
 @Directive({
-  selector: '[cdkDrop], cdk-drop',
-  exportAs: 'cdkDrop',
+  selector: '[cdkDropList], cdk-drop-list',
+  exportAs: 'cdkDropList',
   providers: [
-    {provide: CDK_DROP_CONTAINER, useExisting: CdkDrop},
+    {provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList},
   ],
   host: {
-    'class': 'cdk-drop',
+    'class': 'cdk-drop-list',
     '[id]': 'id',
-    '[class.cdk-drop-dragging]': '_dragging'
+    '[class.cdk-drop-list-dragging]': '_dragging'
   }
 })
-export class CdkDrop<T = any> implements OnInit, OnDestroy {
+export class CdkDropList<T = any> implements OnInit, OnDestroy {
   /** Draggable items in the container. */
   @ContentChildren(forwardRef(() => CdkDrag)) _draggables: QueryList<CdkDrag>;
 
@@ -59,51 +59,51 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
    * container's items can be transferred. Can either be references to other drop containers,
    * or their unique IDs.
    */
-  @Input('cdkDropConnectedTo') connectedTo: (CdkDrop | string)[] | CdkDrop | string = [];
+  @Input('cdkDropListConnectedTo')
+  connectedTo: (CdkDropList | string)[] | CdkDropList | string = [];
 
   /** Arbitrary data to attach to this container. */
-  @Input('cdkDropData') data: T;
+  @Input('cdkDropListData') data: T;
 
   /** Direction in which the list is oriented. */
-  @Input('cdkDropOrientation') orientation: 'horizontal' | 'vertical' = 'vertical';
+  @Input('cdkDropListOrientation') orientation: 'horizontal' | 'vertical' = 'vertical';
 
   /**
    * Unique ID for the drop zone. Can be used as a reference
-   * in the `connectedTo` of another `CdkDrop`.
+   * in the `connectedTo` of another `CdkDropList`.
    */
-  @Input() id: string = `cdk-drop-${_uniqueIdCounter++}`;
+  @Input() id: string = `cdk-drop-list-${_uniqueIdCounter++}`;
 
   /** Locks the position of the draggable elements inside the container along the specified axis. */
-  @Input('cdkDropLockAxis') lockAxis: 'x' | 'y';
+  @Input('cdkDropListLockAxis') lockAxis: 'x' | 'y';
 
   /**
-   * Function that is used to determine whether an item is allowed to be moved
-   * into a drop container. The function will be called with the item that is
-   * being dragged and the container that it's being moved into.
+   * Function that is used to determine whether an item
+   * is allowed to be moved into a drop container.
    */
-  @Input('cdkDropEnterPredicate')
-  enterPredicate: (drag: CdkDrag, drop: CdkDrop) => boolean = () => true
+  @Input('cdkDropListEnterPredicate')
+  enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean = () => true
 
   /** Emits when the user drops an item inside the container. */
-  @Output('cdkDropDropped')
+  @Output('cdkDropListDropped')
   dropped: EventEmitter<CdkDragDrop<T, any>> = new EventEmitter<CdkDragDrop<T, any>>();
 
   /**
    * Emits when the user has moved a new drag item into this container.
    */
-  @Output('cdkDropEntered')
+  @Output('cdkDropListEntered')
   entered: EventEmitter<CdkDragEnter<T>> = new EventEmitter<CdkDragEnter<T>>();
 
   /**
    * Emits when the user removes an item from the container
    * by dragging it into another container.
    */
-  @Output('cdkDropExited')
+  @Output('cdkDropListExited')
   exited: EventEmitter<CdkDragExit<T>> = new EventEmitter<CdkDragExit<T>>();
 
   constructor(
     public element: ElementRef<HTMLElement>,
-    private _dragDropRegistry: DragDropRegistry<CdkDrag, CdkDrop<T>>,
+    private _dragDropRegistry: DragDropRegistry<CdkDrag, CdkDropList<T>>,
     @Optional() private _dir?: Directionality) {}
 
   ngOnInit() {
@@ -120,7 +120,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
   /** Cache of the dimensions of all the items and the sibling containers. */
   private _positionCache = {
     items: [] as {drag: CdkDrag, clientRect: ClientRect, offset: number}[],
-    siblings: [] as {drop: CdkDrop, clientRect: ClientRect}[],
+    siblings: [] as {drop: CdkDropList, clientRect: ClientRect}[],
     self: {} as ClientRect
   };
 
@@ -150,7 +150,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
    * @param currentIndex Index at which the item should be inserted.
    * @param previousContainer Container from which the item got dragged in.
    */
-  drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDrop): void {
+  drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList): void {
     this._reset();
     this.dropped.emit({
       item,
@@ -312,7 +312,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
    * @param x Position of the item along the X axis.
    * @param y Position of the item along the Y axis.
    */
-  _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDrop | null {
+  _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropList | null {
     const result = this._positionCache.siblings
         .find(sibling => isInsideClientRect(sibling.clientRect, x, y));
 

src/cdk/drag-drop/public-api.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './drop';
-export * from './drop-container';
+export * from './drop-list';
+export * from './drop-list-container';
 export * from './drag';
 export * from './drag-handle';
 export * from './drag-events';

src/demo-app/drag-drop/drag-drop-demo.html

@@ -2,12 +2,12 @@
   <div class="demo-list">
     <h2>To do</h2>
     <div
-      cdkDrop
-      #one="cdkDrop"
-      (cdkDropDropped)="drop($event)"
-      [cdkDropLockAxis]="axisLock"
-      [cdkDropData]="todo"
-      [cdkDropConnectedTo]="[two]">
+      cdkDropList
+      #one="cdkDropList"
+      (cdkDropListDropped)="drop($event)"
+      [cdkDropListLockAxis]="axisLock"
+      [cdkDropListData]="todo"
+      [cdkDropListConnectedTo]="[two]">
       <div *ngFor="let item of todo" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -18,12 +18,12 @@
   <div class="demo-list">
     <h2>Done</h2>
     <div
-      cdkDrop
-      #two="cdkDrop"
-      (cdkDropDropped)="drop($event)"
-      [cdkDropLockAxis]="axisLock"
-      [cdkDropData]="done"
-      [cdkDropConnectedTo]="[one]">
+      cdkDropList
+      #two="cdkDropList"
+      (cdkDropListDropped)="drop($event)"
+      [cdkDropListLockAxis]="axisLock"
+      [cdkDropListData]="done"
+      [cdkDropListConnectedTo]="[one]">
       <div *ngFor="let item of done" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -36,11 +36,11 @@
   <div class="demo-list demo-list-horizontal">
     <h2>Horizontal list</h2>
     <div
-      cdkDrop
-      cdkDropOrientation="horizontal"
-      (cdkDropDropped)="drop($event)"
-      [cdkDropLockAxis]="axisLock"
-      [cdkDropData]="horizontalData">
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      (cdkDropListDropped)="drop($event)"
+      [cdkDropListLockAxis]="axisLock"
+      [cdkDropListData]="horizontalData">
       <div *ngFor="let item of horizontalData" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>

src/demo-app/drag-drop/drag-drop-demo.scss

@@ -18,7 +18,7 @@
   margin-left: 0;
 }
 
-.cdk-drop {
+.cdk-drop-list {
   border: solid 1px #ccc;
   min-height: 60px;
   display: block;
@@ -38,7 +38,7 @@
   justify-content: space-between;
   box-sizing: border-box;
 
-  .cdk-drop-dragging &:not(.cdk-drag-placeholder) {
+  .cdk-drop-list-dragging &:not(.cdk-drag-placeholder) {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 
@@ -54,7 +54,7 @@
     }
   }
 
-  .cdk-drop &:last-child {
+  .cdk-drop-list &:last-child {
     border: none;
   }
 }

src/demo-app/drag-drop/drag-drop-demo.ts

@@ -21,10 +21,10 @@ import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag
 export class DragAndDropDemo {
   axisLock: 'x' | 'y';
   todo = [
-    'Come up with catchy start-up name',
-    'Add "blockchain" to name',
-    'Sell out',
-    'Profit',
+    'Go out for Lunch',
+    'Make a cool app',
+    'Watch TV',
+    'Eat a healthy dinner',
     'Go to sleep'
   ];
   done = [

src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.css

@@ -49,6 +49,6 @@
   border: none;
 }
 
-.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

src/material-examples/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html

@@ -2,12 +2,12 @@
   <h2>To do</h2>
 
   <div
-    cdkDrop
-    #todoList="cdkDrop"
-    [cdkDropData]="todo"
-    [cdkDropConnectedTo]="[doneList]"
+    cdkDropList
+    #todoList="cdkDropList"
+    [cdkDropListData]="todo"
+    [cdkDropListConnectedTo]="[doneList]"
     class="example-list"
-    (cdkDropDropped)="drop($event)">
+    (cdkDropListDropped)="drop($event)">
     <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
   </div>
 </div>
@@ -16,12 +16,12 @@
   <h2>Done</h2>
 
   <div
-    cdkDrop
-    #doneList="cdkDrop"
-    [cdkDropData]="done"
-    [cdkDropConnectedTo]="[todoList]"
+    cdkDropList
+    #doneList="cdkDropList"
+    [cdkDropListData]="done"
+    [cdkDropListConnectedTo]="[todoList]"
     class="example-list"
-    (cdkDropDropped)="drop($event)">
+    (cdkDropListDropped)="drop($event)">
     <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
   </div>
 </div>

src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.css

@@ -43,6 +43,6 @@
   border: none;
 }
 
-.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

src/material-examples/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html

@@ -1,4 +1,4 @@
-<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let movie of movies" cdkDrag>
     {{movie.title}}
     <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">

src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.css

@@ -46,6 +46,6 @@
   border: none;
 }
 
-.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

src/material-examples/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html

@@ -1,3 +1,3 @@
-<div cdkDrop cdkDropOrientation="horizontal" class="example-list" (cdkDropDropped)="drop($event)">
+<div cdkDropList cdkDropOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
 </div>

src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.css

@@ -43,6 +43,6 @@
   border: none;
 }
 
-.example-list.cdk-drop-dragging .example-box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

src/material-examples/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html

@@ -1,3 +1,3 @@
-<div cdkDrop class="example-list" (cdkDropDropped)="drop($event)">
+<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
 </div>