refactor(drag-drop): allow single instance/id to be passed to connectedTo (#12811)

Something that I ran into while writing docs. Currently if a non-array is passed to `connectedTo`, a vague error will be thrown. These changes coerce single values into an array to make it more convenient.

src/cdk/drag-drop/BUILD.bazel

@@ -14,6 +14,7 @@ ng_module(
     "//src/cdk/platform",
     "//src/cdk/overlay",
     "//src/cdk/bidi",
+    "//src/cdk/coercion",
   ],
   tsconfig = "//src/cdk:tsconfig-build.json",
 )

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

@@ -1151,6 +1151,36 @@ describe('CdkDrag', () => {
       });
     }));
 
+    it('should be able to pass a single id to `connectedTo`', fakeAsync(() => {
+      const fixture = createComponent(ConnectedDropZones);
+      fixture.detectChanges();
+
+      const dropInstances = fixture.componentInstance.dropInstances.toArray();
+
+      dropInstances[1].id = 'done';
+      dropInstances[0].connectedTo = ['done'];
+      fixture.detectChanges();
+
+      const groups = fixture.componentInstance.groupedDragItems;
+      const element = groups[0][1].element.nativeElement;
+      const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
+
+      dragElementViaMouse(fixture, element, targetRect.left + 1, targetRect.top + 1);
+      flush();
+      fixture.detectChanges();
+
+      const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      expect(event).toBeTruthy();
+      expect(event).toEqual({
+        previousIndex: 1,
+        currentIndex: 3,
+        item: groups[0][1],
+        container: dropInstances[1],
+        previousContainer: dropInstances[0]
+      });
+    }));
+
   });
 
 });

src/cdk/drag-drop/drop.ts

@@ -20,6 +20,7 @@ import {
   QueryList,
   ViewEncapsulation,
 } from '@angular/core';
+import {coerceArray} from '@angular/cdk/coercion';
 import {CdkDrag} from './drag';
 import {CdkDragExit, CdkDragEnter, CdkDragDrop} from './drag-events';
 import {CDK_DROP_CONTAINER} from './drop-container';
@@ -56,7 +57,7 @@ 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() connectedTo: (CdkDrop | string)[] = [];
+  @Input() connectedTo: (CdkDrop | string)[] | CdkDrop | string = [];
 
   /** Arbitrary data to attach to this container. */
   @Input() data: T;
@@ -316,7 +317,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
       })
       .sort((a, b) => a.clientRect.top - b.clientRect.top);
 
-    this._positionCache.siblings = this.connectedTo
+    this._positionCache.siblings = coerceArray(this.connectedTo)
       .map(drop => typeof drop === 'string' ? this._dragDropRegistry.getDropContainer(drop)! : drop)
       .filter(drop => drop && drop !== this)
       .map(drop => ({drop, clientRect: drop.element.nativeElement.getBoundingClientRect()}));