feat(drag-drop): move into cdk (#12758)

Moves the `drag-drop` module from `cdk-experimental` to `cdk`.

.github/CODEOWNERS

@@ -64,6 +64,7 @@
 /src/cdk/bidi/**                                   @jelbourn
 /src/cdk/coercion/**                               @jelbourn
 /src/cdk/collections/**                            @jelbourn @crisbeto @andrewseguin
+/src/cdk/drag-drop/**                              @crisbeto
 /src/cdk/keycodes/**                               @jelbourn
 /src/cdk/layout/**                                 @josephperrott
 /src/cdk/observers/**                              @jelbourn @crisbeto
@@ -87,7 +88,6 @@
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
 /src/cdk-experimental/scrolling/**                 @mmalerba
-/src/cdk-experimental/drag-drop/**                 @crisbeto
 
 # Docs examples & guides
 /guides/**                                         @amcdnl @jelbourn

packages.bzl

@@ -1,22 +1,23 @@
 # List of all components / subpackages.
 
 CDK_PACKAGES = [
-  "coercion",
-  "keycodes",
-  "scrolling",
-  "accordion",
-  "observers",
   "a11y",
+  "accordion",
+  "bidi",
+  "coercion",
+  "collections",
+  "drag-drop",
+  "keycodes",
+  "layout",
+  "observers",
   "overlay",
   "platform",
-  "bidi",
-  "table",
-  "tree",
   "portal",
-  "layout",
+  "scrolling",
   "stepper",
+  "table",
   "text-field",
-  "collections",
+  "tree",
 ]
 
 CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
@@ -24,7 +25,6 @@ CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
 CDK_EXPERIMENTAL_PACKAGES = [
   "dialog",
   "scrolling",
-  "drag-drop",
 ]
 
 CDK_EXPERIMENTAL_TARGETS = ["//src/cdk-experimental"] + [

src/cdk/drag-drop/BUILD.bazel

@@ -7,7 +7,7 @@ load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
 ng_module(
   name = "drag-drop",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
-  module_name = "@angular/cdk-experimental/drag-drop",
+  module_name = "@angular/cdk/drag-drop",
   assets = [":drop.css"],
   deps = [
     "@rxjs",
@@ -15,7 +15,7 @@ ng_module(
     "//src/cdk/overlay",
     "//src/cdk/bidi",
   ],
-  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+  tsconfig = "//src/cdk:tsconfig-build.json",
 )
 
 
@@ -28,7 +28,7 @@ ts_library(
     "//src/cdk/testing",
     "//src/cdk/bidi",
   ],
-  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+  tsconfig = "//src/cdk:tsconfig-build.json",
 )
 
 sass_binary(

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

@@ -166,7 +166,7 @@ describe('DragDropRegistry', () => {
     <cdk-drop id="items" *ngIf="showDuplicateContainer"></cdk-drop>
   `
 })
-export class SimpleDropZone {
+class SimpleDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   @ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
   items = ['Zero', 'One', 'Two', 'Three'];

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

@@ -1165,7 +1165,7 @@ describe('CdkDrag', () => {
       style="width: 100px; height: 100px; background: red;"></div>
   `
 })
-export class StandaloneDraggable {
+class StandaloneDraggable {
   @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
   @ViewChild(CdkDrag) dragInstance: CdkDrag;
   startedSpy = jasmine.createSpy('started spy');
@@ -1180,7 +1180,7 @@ export class StandaloneDraggable {
     </div>
   `
 })
-export class StandaloneDraggableWithHandle {
+class StandaloneDraggableWithHandle {
   @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
   @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
 }
@@ -1196,7 +1196,7 @@ export class StandaloneDraggableWithHandle {
     </div>
   `
 })
-export class StandaloneDraggableWithDelayedHandle {
+class StandaloneDraggableWithDelayedHandle {
   @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
   @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
   showHandle = false;
@@ -1221,7 +1221,7 @@ export class StandaloneDraggableWithDelayedHandle {
     </div>
   `
 })
-export class StandaloneDraggableWithMultipleHandles {
+class StandaloneDraggableWithMultipleHandles {
   @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
   @ViewChildren(CdkDragHandle) handles: QueryList<CdkDragHandle>;
 }
@@ -1241,7 +1241,7 @@ export class StandaloneDraggableWithMultipleHandles {
     </cdk-drop>
   `
 })
-export class DraggableInDropZone {
+class DraggableInDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   @ViewChild(CdkDrop) dropInstance: CdkDrop;
   items = ['Zero', 'One', 'Two', 'Three'];
@@ -1280,7 +1280,7 @@ export class DraggableInDropZone {
     </cdk-drop>
   `
 })
-export class DraggableInHorizontalDropZone {
+class DraggableInHorizontalDropZone {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   @ViewChild(CdkDrop) dropInstance: CdkDrop;
   items = ['Zero', 'One', 'Two', 'Three'];
@@ -1300,7 +1300,7 @@ export class DraggableInHorizontalDropZone {
     </cdk-drop>
   `
 })
-export class DraggableInDropZoneWithCustomPreview {
+class DraggableInDropZoneWithCustomPreview {
   @ViewChild(CdkDrop) dropInstance: CdkDrop;
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   items = ['Zero', 'One', 'Two', 'Three'];
@@ -1318,7 +1318,7 @@ export class DraggableInDropZoneWithCustomPreview {
     </cdk-drop>
   `
 })
-export class DraggableInDropZoneWithCustomPlaceholder {
+class DraggableInDropZoneWithCustomPlaceholder {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
   items = ['Zero', 'One', 'Two', 'Three'];
 }
@@ -1358,7 +1358,7 @@ export class DraggableInDropZoneWithCustomPlaceholder {
     </cdk-drop>
   `
 })
-export class ConnectedDropZones implements AfterViewInit {
+class ConnectedDropZones implements AfterViewInit {
   @ViewChildren(CdkDrag) rawDragItems: QueryList<CdkDrag>;
   @ViewChildren(CdkDrop) dropInstances: QueryList<CdkDrop>;
 

src/cdk/drag-drop/tsconfig-build.json

@@ -8,7 +8,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
-    "flatModuleId": "@angular/cdk-experimental/drag-drop",
+    "flatModuleId": "@angular/cdk/drag-drop",
     "skipTemplateCodegen": true,
     "fullTemplateTypeCheck": true
   }

src/demo-app/demo-material-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {DialogModule} from '@angular/cdk-experimental/dialog';
-import {DragDropModule} from '@angular/cdk-experimental/drag-drop';
+import {DragDropModule} from '@angular/cdk/drag-drop';
 import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
 import {A11yModule} from '@angular/cdk/a11y';
 import {CdkAccordionModule} from '@angular/cdk/accordion';

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

@@ -9,7 +9,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {MatIconRegistry} from '@angular/material/icon';
 import {DomSanitizer} from '@angular/platform-browser';
-import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk-experimental/drag-drop';
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
 
 @Component({
   moduleId: module.id,

src/demo-app/system-config.ts

@@ -49,6 +49,7 @@ System.config({
     '@angular/cdk/bidi': 'dist/packages/cdk/bidi/index.js',
     '@angular/cdk/coercion': 'dist/packages/cdk/coercion/index.js',
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
+    '@angular/cdk/drag-drop': 'dist/packages/cdk/drag-drop/index.js',
     '@angular/cdk/keycodes': 'dist/packages/cdk/keycodes/index.js',
     '@angular/cdk/layout': 'dist/packages/cdk/layout/index.js',
     '@angular/cdk/observers': 'dist/packages/cdk/observers/index.js',
@@ -63,8 +64,6 @@ System.config({
 
     '@angular/cdk-experimental/scrolling': 'dist/packages/cdk-experimental/scrolling/index.js',
     '@angular/cdk-experimental/dialog': 'dist/packages/cdk-experimental/dialog/index.js',
-    '@angular/cdk-experimental/drag-drop':
-        'dist/packages/cdk-experimental/drag-drop/index.js',
 
     '@angular/material/autocomplete': 'dist/packages/material/autocomplete/index.js',
     '@angular/material/bottom-sheet': 'dist/packages/material/bottom-sheet/index.js',

src/e2e-app/e2e-app-module.ts

@@ -1,5 +1,5 @@
 import {DialogModule} from '@angular/cdk-experimental/dialog';
-import {DragDropModule} from '@angular/cdk-experimental/drag-drop';
+import {DragDropModule} from '@angular/cdk/drag-drop';
 import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {ScrollingModule} from '@angular/cdk/scrolling';

src/e2e-app/system-config.ts

@@ -38,6 +38,7 @@ System.config({
     '@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js',
     '@angular/cdk/coercion': 'dist/bundles/cdk-coercion.umd.js',
     '@angular/cdk/collections': 'dist/bundles/cdk-collections.umd.js',
+    '@angular/cdk/drag-drop': 'dist/bundles/cdk-drag-drop.umd.js',
     '@angular/cdk/keycodes': 'dist/bundles/cdk-keycodes.umd.js',
     '@angular/cdk/layout': 'dist/bundles/cdk-layout.umd.js',
     '@angular/cdk/observers': 'dist/bundles/cdk-observers.umd.js',
@@ -54,7 +55,6 @@ System.config({
 
     '@angular/cdk-experimental/scrolling': 'dist/bundles/cdk-experimental-scrolling.umd.js',
     '@angular/cdk-experimental/dialog': 'dist/bundles/cdk-experimental-dialog.umd.js',
-    '@angular/cdk-experimental/drag-drop': 'dist/bundles/cdk-experimental-drag-drop.umd.js',
 
     '@angular/material/autocomplete': 'dist/bundles/material-autocomplete.umd.js',
     '@angular/material/bottom-sheet': 'dist/bundles/material-bottom-sheet.umd.js',

test/karma-system-config.js

@@ -44,6 +44,7 @@ System.config({
     '@angular/cdk/bidi': 'dist/packages/cdk/bidi/index.js',
     '@angular/cdk/coercion': 'dist/packages/cdk/coercion/index.js',
     '@angular/cdk/collections': 'dist/packages/cdk/collections/index.js',
+    '@angular/cdk/drag-drop': 'dist/packages/cdk/drag-drop/index.js',
     '@angular/cdk/keycodes': 'dist/packages/cdk/keycodes/index.js',
     '@angular/cdk/layout': 'dist/packages/cdk/layout/index.js',
     '@angular/cdk/observers': 'dist/packages/cdk/observers/index.js',
@@ -59,8 +60,6 @@ System.config({
 
     '@angular/cdk-experimental/scrolling': 'dist/packages/cdk-experimental/scrolling/index.js',
     '@angular/cdk-experimental/dialog': 'dist/packages/cdk-experimental/dialog/index.js',
-    '@angular/cdk-experimental/drag-drop':
-      'dist/packages/cdk-experimental/drag-drop/index.js',
 
     '@angular/material/autocomplete': 'dist/packages/material/autocomplete/index.js',
     '@angular/material/badge': 'dist/packages/material/badge/index.js',