refactor(cdk/drag-drop): switch to input transforms

Switches inputs in cdk/drag-drop to use transforms instead of getters/setters.

Author: crisbeto

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

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   Directive,
   ElementRef,
@@ -16,6 +15,7 @@ import {
   OnDestroy,
   Optional,
   SkipSelf,
+  booleanAttribute,
 } from '@angular/core';
 import {Subject} from 'rxjs';
 import {CDK_DRAG_PARENT} from '../drag-parent';
@@ -45,12 +45,12 @@ export class CdkDragHandle implements OnDestroy {
   readonly _stateChanges = new Subject<CdkDragHandle>();
 
   /** Whether starting to drag through this handle is disabled. */
-  @Input('cdkDragHandleDisabled')
+  @Input({alias: 'cdkDragHandleDisabled', transform: booleanAttribute})
   get disabled(): boolean {
     return this._disabled;
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
     this._stateChanges.next(this);
   }
   private _disabled = false;

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

@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, InjectionToken, Input, TemplateRef} from '@angular/core';
+import {Directive, InjectionToken, Input, TemplateRef, booleanAttribute} from '@angular/core';
 
 /**
  * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
@@ -30,14 +29,7 @@ export class CdkDragPreview<T = any> {
   @Input() data: T;
 
   /** Whether the preview should preserve the same size as the item that is being dragged. */
-  @Input()
-  get matchSize(): boolean {
-    return this._matchSize;
-  }
-  set matchSize(value: BooleanInput) {
-    this._matchSize = coerceBooleanProperty(value);
-  }
-  private _matchSize = false;
+  @Input({transform: booleanAttribute}) matchSize: boolean = false;
 
   constructor(public templateRef: TemplateRef<T>) {}
 }

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

@@ -29,13 +29,9 @@ import {
   ChangeDetectorRef,
   Self,
   InjectionToken,
+  booleanAttribute,
 } from '@angular/core';
-import {
-  coerceBooleanProperty,
-  coerceNumberProperty,
-  coerceElement,
-  BooleanInput,
-} from '@angular/cdk/coercion';
+import {coerceElement, coerceNumberProperty} from '@angular/cdk/coercion';
 import {Observable, Observer, Subject, merge} from 'rxjs';
 import {startWith, take, map, takeUntil, switchMap, tap} from 'rxjs/operators';
 import type {
@@ -128,12 +124,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   @Input('cdkDragFreeDragPosition') freeDragPosition: Point;
 
   /** Whether starting to drag this element is disabled. */
-  @Input('cdkDragDisabled')
+  @Input({alias: 'cdkDragDisabled', transform: booleanAttribute})
   get disabled(): boolean {
     return this._disabled || (this.dropContainer && this.dropContainer.disabled);
   }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  set disabled(value: boolean) {
+    this._disabled = value;
     this._dragRef.disabled = this._disabled;
   }
   private _disabled: boolean;

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

@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, OnDestroy, Input, InjectionToken} from '@angular/core';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Directive, OnDestroy, Input, InjectionToken, booleanAttribute} from '@angular/core';
 
 /**
  * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
@@ -35,14 +34,8 @@ export class CdkDropListGroup<T> implements OnDestroy {
   readonly _items = new Set<T>();
 
   /** Whether starting a dragging sequence from inside this group is disabled. */
-  @Input('cdkDropListGroupDisabled')
-  get disabled(): boolean {
-    return this._disabled;
-  }
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
-  }
-  private _disabled = false;
+  @Input({alias: 'cdkDropListGroupDisabled', transform: booleanAttribute})
+  disabled: boolean = false;
 
   ngOnDestroy() {
     this._items.clear();

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

@@ -6,13 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  BooleanInput,
-  coerceArray,
-  coerceNumberProperty,
-  coerceBooleanProperty,
-  NumberInput,
-} from '@angular/cdk/coercion';
+import {NumberInput, coerceArray, coerceNumberProperty} from '@angular/cdk/coercion';
 import {
   ElementRef,
   EventEmitter,
@@ -24,6 +18,7 @@ import {
   ChangeDetectorRef,
   SkipSelf,
   Inject,
+  booleanAttribute,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
@@ -96,22 +91,22 @@ export class CdkDropList<T = any> implements OnDestroy {
   @Input('cdkDropListLockAxis') lockAxis: DragAxis;
 
   /** Whether starting a dragging sequence from this container is disabled. */
-  @Input('cdkDropListDisabled')
+  @Input({alias: 'cdkDropListDisabled', transform: booleanAttribute})
   get disabled(): boolean {
     return this._disabled || (!!this._group && this._group.disabled);
   }
-  set disabled(value: BooleanInput) {
+  set disabled(value: boolean) {
     // 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._dropListRef.disabled = this._disabled = value;
   }
   private _disabled: boolean;
 
   /** Whether sorting within this drop list is disabled. */
-  @Input('cdkDropListSortingDisabled')
-  sortingDisabled: BooleanInput;
+  @Input({alias: 'cdkDropListSortingDisabled', transform: booleanAttribute})
+  sortingDisabled: boolean;
 
   /**
    * Function that is used to determine whether an item
@@ -125,8 +120,8 @@ export class CdkDropList<T = any> implements OnDestroy {
   sortPredicate: (index: number, drag: CdkDrag, drop: CdkDropList) => boolean = () => true;
 
   /** Whether to auto-scroll the view when the user moves their pointer close to the edges. */
-  @Input('cdkDropListAutoScrollDisabled')
-  autoScrollDisabled: BooleanInput;
+  @Input({alias: 'cdkDropListAutoScrollDisabled', transform: booleanAttribute})
+  autoScrollDisabled: boolean;
 
   /** Number of pixels to scroll for each frame when auto-scrolling an element. */
   @Input('cdkDropListAutoScrollStep')
@@ -302,8 +297,8 @@ export class CdkDropList<T = any> implements OnDestroy {
 
       ref.disabled = this.disabled;
       ref.lockAxis = this.lockAxis;
-      ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);
-      ref.autoScrollDisabled = coerceBooleanProperty(this.autoScrollDisabled);
+      ref.sortingDisabled = this.sortingDisabled;
+      ref.autoScrollDisabled = this.autoScrollDisabled;
       ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);
       ref
         .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))

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

@@ -14,7 +14,7 @@ import {
   _getEventTarget,
   _getShadowRoot,
 } from '@angular/cdk/platform';
-import {coerceBooleanProperty, coerceElement} from '@angular/cdk/coercion';
+import {coerceElement} from '@angular/cdk/coercion';
 import {isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader} from '@angular/cdk/a11y';
 import {Subscription, Subject, Observable} from 'rxjs';
 import type {DropListRef} from './drop-list-ref';
@@ -287,12 +287,10 @@ export class DragRef<T = any> {
     return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);
   }
   set disabled(value: boolean) {
-    const newValue = coerceBooleanProperty(value);
-
-    if (newValue !== this._disabled) {
-      this._disabled = newValue;
+    if (value !== this._disabled) {
+      this._disabled = value;
       this._toggleNativeDragInteractions();
-      this._handles.forEach(handle => toggleNativeDragInteractions(handle, newValue));
+      this._handles.forEach(handle => toggleNativeDragInteractions(handle, value));
     }
   }
   private _disabled = false;

tools/public_api_guard/cdk/drag-drop.md

@@ -5,7 +5,6 @@
 ```ts
 
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
@@ -58,7 +57,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point;
     data: T;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     _dragRef: DragRef<CdkDrag<T>>;
     dragStartDelay: DragStartDelay;
     dropContainer: CdkDropList;
@@ -75,6 +74,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     lockAxis: DragAxis;
     readonly moved: Observable<CdkDragMove<T>>;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
@@ -145,10 +146,12 @@ export interface CdkDragExit<T = any, I = T> {
 export class CdkDragHandle implements OnDestroy {
     constructor(element: ElementRef<HTMLElement>, parentDrag?: any);
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     // (undocumented)
     element: ElementRef<HTMLElement>;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngOnDestroy(): void;
     _parentDrag: {} | undefined;
     readonly _stateChanges: Subject<CdkDragHandle>;
@@ -192,8 +195,9 @@ export class CdkDragPlaceholder<T = any> {
 export class CdkDragPreview<T = any> {
     constructor(templateRef: TemplateRef<T>);
     data: T;
-    get matchSize(): boolean;
-    set matchSize(value: BooleanInput);
+    matchSize: boolean;
+    // (undocumented)
+    static ngAcceptInputType_matchSize: unknown;
     // (undocumented)
     templateRef: TemplateRef<T>;
     // (undocumented)
@@ -227,12 +231,12 @@ export class CdkDropList<T = any> implements OnDestroy {
     constructor(
     element: ElementRef<HTMLElement>, dragDrop: DragDrop, _changeDetectorRef: ChangeDetectorRef, _scrollDispatcher: ScrollDispatcher, _dir?: Directionality | undefined, _group?: CdkDropListGroup<CdkDropList<any>> | undefined, config?: DragDropConfig);
     addItem(item: CdkDrag): void;
-    autoScrollDisabled: BooleanInput;
+    autoScrollDisabled: boolean;
     autoScrollStep: NumberInput;
     connectedTo: (CdkDropList | string)[] | CdkDropList | string;
     data: T;
     get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    set disabled(value: boolean);
     _dropListRef: DropListRef<CdkDropList<T>>;
     readonly dropped: EventEmitter<CdkDragDrop<T, any>>;
     element: ElementRef<HTMLElement>;
@@ -243,11 +247,17 @@ export class CdkDropList<T = any> implements OnDestroy {
     id: string;
     lockAxis: DragAxis;
     // (undocumented)
+    static ngAcceptInputType_autoScrollDisabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
+    static ngAcceptInputType_sortingDisabled: unknown;
+    // (undocumented)
     ngOnDestroy(): void;
     orientation: DropListOrientation;
     removeItem(item: CdkDrag): void;
     readonly sorted: EventEmitter<CdkDragSortEvent<T>>;
-    sortingDisabled: BooleanInput;
+    sortingDisabled: boolean;
     sortPredicate: (index: number, drag: CdkDrag, drop: CdkDropList) => boolean;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDropList<any>, "[cdkDropList], cdk-drop-list", ["cdkDropList"], { "connectedTo": { "alias": "cdkDropListConnectedTo"; "required": false; }; "data": { "alias": "cdkDropListData"; "required": false; }; "orientation": { "alias": "cdkDropListOrientation"; "required": false; }; "id": { "alias": "id"; "required": false; }; "lockAxis": { "alias": "cdkDropListLockAxis"; "required": false; }; "disabled": { "alias": "cdkDropListDisabled"; "required": false; }; "sortingDisabled": { "alias": "cdkDropListSortingDisabled"; "required": false; }; "enterPredicate": { "alias": "cdkDropListEnterPredicate"; "required": false; }; "sortPredicate": { "alias": "cdkDropListSortPredicate"; "required": false; }; "autoScrollDisabled": { "alias": "cdkDropListAutoScrollDisabled"; "required": false; }; "autoScrollStep": { "alias": "cdkDropListAutoScrollStep"; "required": false; }; }, { "dropped": "cdkDropListDropped"; "entered": "cdkDropListEntered"; "exited": "cdkDropListExited"; "sorted": "cdkDropListSorted"; }, never, never, true, never>;
@@ -257,10 +267,11 @@ export class CdkDropList<T = any> implements OnDestroy {
 
 // @public
 export class CdkDropListGroup<T> implements OnDestroy {
-    get disabled(): boolean;
-    set disabled(value: BooleanInput);
+    disabled: boolean;
     readonly _items: Set<T>;
     // (undocumented)
+    static ngAcceptInputType_disabled: unknown;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDropListGroup<any>, "[cdkDropListGroup]", ["cdkDropListGroup"], { "disabled": { "alias": "cdkDropListGroupDisabled"; "required": false; }; }, {}, never, never, true, never>;