refactor(cdk/drag-drop): remove circular dependencies

Uses type-only imports to resolve the circular dependencies in the drag-drop module.

(cherry picked from commit 81e6ead)

Author: crisbeto

goldens/ts-circular-deps.json

@@ -1,12 +1,10 @@
 [
-  ["src/cdk/drag-drop/directives/drag.ts", "src/cdk/drag-drop/directives/drop-list.ts"],
   [
-    "src/cdk/drag-drop/directives/drag.ts",
-    "src/cdk/drag-drop/directives/drop-list.ts",
-    "src/cdk/drag-drop/drag-events.ts"
+    "src/cdk/scrolling/scroll-dispatcher.ts",
+    "src/cdk/scrolling/scrollable.ts"
   ],
-  ["src/cdk/drag-drop/directives/drag.ts", "src/cdk/drag-drop/drag-events.ts"],
-  ["src/cdk/drag-drop/drag-ref.ts", "src/cdk/drag-drop/drop-list-ref.ts"],
-  ["src/cdk/scrolling/scroll-dispatcher.ts", "src/cdk/scrolling/scrollable.ts"],
-  ["src/cdk/scrolling/virtual-scroll-strategy.ts", "src/cdk/scrolling/virtual-scroll-viewport.ts"]
-]
+  [
+    "src/cdk/scrolling/virtual-scroll-strategy.ts",
+    "src/cdk/scrolling/virtual-scroll-viewport.ts"
+  ]
+]

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

@@ -28,6 +28,7 @@ import {
   SimpleChanges,
   ChangeDetectorRef,
   Self,
+  InjectionToken,
 } from '@angular/core';
 import {
   coerceBooleanProperty,
@@ -37,7 +38,7 @@ import {
 } from '@angular/cdk/coercion';
 import {Observable, Observer, Subject, merge} from 'rxjs';
 import {startWith, take, map, takeUntil, switchMap, tap} from 'rxjs/operators';
-import {
+import type {
   CdkDragDrop,
   CdkDragEnd,
   CdkDragEnter,
@@ -51,13 +52,20 @@ import {CDK_DRAG_PLACEHOLDER, CdkDragPlaceholder} from './drag-placeholder';
 import {CDK_DRAG_PREVIEW, CdkDragPreview} from './drag-preview';
 import {CDK_DRAG_PARENT} from '../drag-parent';
 import {DragRef, Point, PreviewContainer} from '../drag-ref';
-import {CDK_DROP_LIST, CdkDropListInternal as CdkDropList} from './drop-list';
+import type {CdkDropList} from './drop-list';
 import {DragDrop} from '../drag-drop';
 import {CDK_DRAG_CONFIG, DragDropConfig, DragStartDelay, DragAxis} from './config';
 import {assertElementNode} from './assertions';
 
 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.
+ */
+export const CDK_DROP_LIST = new InjectionToken<CdkDropList>('CdkDropList');
+
 /** Element that can be moved inside a CdkDropList container. */
 @Directive({
   selector: '[cdkDrag]',

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

@@ -24,11 +24,10 @@ import {
   ChangeDetectorRef,
   SkipSelf,
   Inject,
-  InjectionToken,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
-import {CdkDrag} from './drag';
+import {CDK_DROP_LIST, CdkDrag} from './drag';
 import {CdkDragDrop, CdkDragEnter, CdkDragExit, CdkDragSortEvent} from '../drag-events';
 import {CDK_DROP_LIST_GROUP, CdkDropListGroup} from './drop-list-group';
 import {DropListRef} from '../drop-list-ref';
@@ -42,20 +41,6 @@ import {assertElementNode} from './assertions';
 /** Counter used to generate unique ids for drop zones. */
 let _uniqueIdCounter = 0;
 
-/**
- * Internal compile-time-only representation of a `CdkDropList`.
- * Used to avoid circular import issues between the `CdkDropList` and the `CdkDrag`.
- * @docs-private
- */
-export interface CdkDropListInternal extends CdkDropList {}
-
-/**
- * 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.
- */
-export const CDK_DROP_LIST = new InjectionToken<CdkDropList>('CdkDropList');
-
 /** Container that wraps a set of draggable items. */
 @Directive({
   selector: '[cdkDropList], cdk-drop-list',

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

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CdkDrag} from './directives/drag';
-import {CdkDropList} from './directives/drop-list';
+import type {CdkDrag} from './directives/drag';
+import type {CdkDropList} from './directives/drop-list';
 
 /** Event emitted when the user starts dragging a draggable. */
 export interface CdkDragStart<T = any> {

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

@@ -17,7 +17,7 @@ import {
 import {coerceBooleanProperty, coerceElement} from '@angular/cdk/coercion';
 import {isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader} from '@angular/cdk/a11y';
 import {Subscription, Subject, Observable} from 'rxjs';
-import {DropListRefInternal as DropListRef} from './drop-list-ref';
+import type {DropListRef} from './drop-list-ref';
 import {DragDropRegistry} from './drag-drop-registry';
 import {
   combineTransforms,
@@ -69,13 +69,6 @@ const MOUSE_EVENT_IGNORE_TIME = 800;
 // TODO(crisbeto): add an API for moving a draggable up/down the
 // list programmatically. Useful for keyboard controls.
 
-/**
- * Internal compile-time-only representation of a `DragRef`.
- * Used to avoid circular import issues between the `DragRef` and the `DropListRef`.
- * @docs-private
- */
-export interface DragRefInternal extends DragRef {}
-
 /** Template that can be used to create a drag helper element (e.g. a preview or a placeholder). */
 interface DragHelperTemplate<T = any> {
   template: TemplateRef<T> | null;

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

@@ -14,7 +14,7 @@ import {_getShadowRoot} from '@angular/cdk/platform';
 import {Subject, Subscription, interval, animationFrameScheduler} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {DragDropRegistry} from './drag-drop-registry';
-import {DragRefInternal as DragRef, Point} from './drag-ref';
+import type {DragRef, Point} from './drag-ref';
 import {isPointerNearClientRect, isInsideClientRect} from './dom/client-rect';
 import {ParentPositionTracker} from './dom/parent-position-tracker';
 import {DragCSSStyleDeclaration} from './dom/styling';
@@ -47,13 +47,6 @@ const enum AutoScrollHorizontalDirection {
   RIGHT,
 }
 
-/**
- * Internal compile-time-only representation of a `DropListRef`.
- * Used to avoid circular import issues between the `DropListRef` and the `DragRef`.
- * @docs-private
- */
-export interface DropListRefInternal extends DropListRef {}
-
 type RootNode = DocumentOrShadowRoot & {
   // As of TS 4.4 the built in DOM typings don't include `elementFromPoint` on `ShadowRoot`,
   // even though it exists (see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).

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

@@ -16,7 +16,7 @@ export * from './drag-utils';
 export * from './drag-drop-module';
 export * from './drag-drop-registry';
 
-export {CdkDropList, CDK_DROP_LIST} from './directives/drop-list';
+export {CdkDropList} from './directives/drop-list';
 export * from './directives/config';
 export * from './directives/drop-list-group';
 export * from './directives/drag';

tools/public_api_guard/cdk/drag-drop.md

@@ -52,7 +52,7 @@ export const CDK_DROP_LIST_GROUP: InjectionToken<CdkDropListGroup<unknown>>;
 export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     constructor(
     element: ElementRef<HTMLElement>,
-    dropContainer: CdkDropListInternal,
+    dropContainer: CdkDropList,
     _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, config: DragDropConfig, _dir: Directionality, dragDrop: DragDrop, _changeDetectorRef: ChangeDetectorRef, _selfHandle?: CdkDragHandle | undefined, _parentDrag?: CdkDrag<any> | undefined);
     boundaryElement: string | ElementRef<HTMLElement> | HTMLElement;
     constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point;
@@ -61,7 +61,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     set disabled(value: BooleanInput);
     _dragRef: DragRef<CdkDrag<T>>;
     dragStartDelay: DragStartDelay;
-    dropContainer: CdkDropListInternal;
+    dropContainer: CdkDropList;
     readonly dropped: EventEmitter<CdkDragDrop<any>>;
     element: ElementRef<HTMLElement>;
     readonly ended: EventEmitter<CdkDragEnd>;
@@ -353,7 +353,7 @@ export class DragDropRegistry<I extends {
 
 // @public
 export class DragRef<T = any> {
-    constructor(element: ElementRef<HTMLElement> | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRefInternal>);
+    constructor(element: ElementRef<HTMLElement> | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>);
     readonly beforeStarted: Subject<void>;
     constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point;
     data: T;
@@ -369,8 +369,8 @@ export class DragRef<T = any> {
         previousIndex: number;
         currentIndex: number;
         item: DragRef;
-        container: DropListRefInternal;
-        previousContainer: DropListRefInternal;
+        container: DropListRef;
+        previousContainer: DropListRef;
         distance: Point;
         dropPoint: Point;
         isPointerOverContainer: boolean;
@@ -384,12 +384,12 @@ export class DragRef<T = any> {
         event: MouseEvent | TouchEvent;
     }>;
     readonly entered: Subject<{
-        container: DropListRefInternal;
+        container: DropListRef;
         item: DragRef;
         currentIndex: number;
     }>;
     readonly exited: Subject<{
-        container: DropListRefInternal;
+        container: DropListRef;
         item: DragRef;
     }>;
     getFreeDragPosition(): Readonly<Point>;
@@ -425,7 +425,7 @@ export class DragRef<T = any> {
     }>;
     withBoundaryElement(boundaryElement: ElementRef<HTMLElement> | HTMLElement | null): this;
     withDirection(direction: Direction): this;
-    _withDropContainer(container: DropListRefInternal): void;
+    _withDropContainer(container: DropListRef): void;
     withHandles(handles: (HTMLElement | ElementRef<HTMLElement>)[]): this;
     withParent(parent: DragRef<unknown> | null): this;
     withPlaceholderTemplate(template: DragHelperTemplate | null): this;
@@ -453,18 +453,18 @@ export type DropListOrientation = 'horizontal' | 'vertical';
 
 // @public
 export class DropListRef<T = any> {
-    constructor(element: ElementRef<HTMLElement> | HTMLElement, _dragDropRegistry: DragDropRegistry<DragRefInternal, DropListRef>, _document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler);
+    constructor(element: ElementRef<HTMLElement> | HTMLElement, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler);
     autoScrollDisabled: boolean;
     autoScrollStep: number;
     readonly beforeStarted: Subject<void>;
-    _canReceive(item: DragRefInternal, x: number, y: number): boolean;
+    _canReceive(item: DragRef, x: number, y: number): boolean;
     connectedTo(connectedTo: DropListRef[]): this;
     data: T;
     disabled: boolean;
     dispose(): void;
-    drop(item: DragRefInternal, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point, event?: MouseEvent | TouchEvent): void;
+    drop(item: DragRef, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point, event?: MouseEvent | TouchEvent): void;
     readonly dropped: Subject<{
-        item: DragRefInternal;
+        item: DragRef;
         currentIndex: number;
         previousIndex: number;
         container: DropListRef;
@@ -475,29 +475,29 @@ export class DropListRef<T = any> {
         event: MouseEvent | TouchEvent;
     }>;
     element: HTMLElement | ElementRef<HTMLElement>;
-    enter(item: DragRefInternal, pointerX: number, pointerY: number, index?: number): void;
+    enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
     readonly entered: Subject<{
-        item: DragRefInternal;
+        item: DragRef;
         container: DropListRef;
         currentIndex: number;
     }>;
-    enterPredicate: (drag: DragRefInternal, drop: DropListRef) => boolean;
-    exit(item: DragRefInternal): void;
+    enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
+    exit(item: DragRef): void;
     readonly exited: Subject<{
-        item: DragRefInternal;
+        item: DragRef;
         container: DropListRef;
     }>;
-    getItemIndex(item: DragRefInternal): number;
+    getItemIndex(item: DragRef): number;
     getScrollableParents(): readonly HTMLElement[];
-    _getSiblingContainerFromPosition(item: DragRefInternal, x: number, y: number): DropListRef | undefined;
+    _getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined;
     isDragging(): boolean;
     _isOverContainer(x: number, y: number): boolean;
     isReceiving(): boolean;
     lockAxis: 'x' | 'y';
     readonly receivingStarted: Subject<{
         receiver: DropListRef;
         initiator: DropListRef;
-        items: DragRefInternal[];
+        items: DragRef[];
     }>;
     readonly receivingStopped: Subject<{
         receiver: DropListRef;
@@ -507,21 +507,21 @@ export class DropListRef<T = any> {
         previousIndex: number;
         currentIndex: number;
         container: DropListRef;
-        item: DragRefInternal;
+        item: DragRef;
     }>;
     sortingDisabled: boolean;
-    _sortItem(item: DragRefInternal, pointerX: number, pointerY: number, pointerDelta: {
+    _sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
         x: number;
         y: number;
     }): void;
-    sortPredicate: (index: number, drag: DragRefInternal, drop: DropListRef) => boolean;
+    sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean;
     start(): void;
-    _startReceiving(sibling: DropListRef, items: DragRefInternal[]): void;
+    _startReceiving(sibling: DropListRef, items: DragRef[]): void;
     _startScrollingIfNecessary(pointerX: number, pointerY: number): void;
     _stopReceiving(sibling: DropListRef): void;
     _stopScrolling(): void;
     withDirection(direction: Direction): this;
-    withItems(items: DragRefInternal[]): this;
+    withItems(items: DragRef[]): this;
     withOrientation(orientation: 'vertical' | 'horizontal'): this;
     withScrollableParents(elements: HTMLElement[]): this;
 }