refactor: input coercion

Author: lekhmanrus

src/cdk/clipboard/copy-to-clipboard.ts

@@ -17,6 +17,7 @@ import {
   Optional,
   OnDestroy,
 } from '@angular/core';
+import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 import {Clipboard} from './clipboard';
 import {PendingCopy} from './pending-copy';
 
@@ -48,7 +49,10 @@ export class CdkCopyToClipboard implements OnDestroy {
    * How many times to attempt to copy the text. This may be necessary for longer text, because
    * the browser needs time to fill an intermediate textarea element and copy the content.
    */
-  @Input('cdkCopyToClipboardAttempts') attempts: number = 1;
+  @Input('cdkCopyToClipboardAttempts')
+  get attempts(): number { return this._attempts; }
+  set attempts(value: number) { this._attempts = coerceNumberProperty(value); }
+  private _attempts = 1;
 
   /**
    * Emits when some text is copied to the clipboard. The
@@ -109,4 +113,6 @@ export class CdkCopyToClipboard implements OnDestroy {
     this._pending.clear();
     this._destroyed = true;
   }
+
+  static ngAcceptInputType_attempts: NumberInput;
 }

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

@@ -8,10 +8,10 @@
 
 import {
   BooleanInput,
+  NumberInput,
   coerceArray,
-  coerceNumberProperty,
   coerceBooleanProperty,
-  NumberInput,
+  coerceNumberProperty,
 } from '@angular/cdk/coercion';
 import {
   ElementRef,

src/cdk/overlay/overlay-directives.ts

@@ -7,7 +7,12 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {
+  BooleanInput,
+  NumberInput,
+  coerceBooleanProperty,
+  coerceNumberProperty,
+} from '@angular/cdk/coercion';
 import {ESCAPE, hasModifierKey} from '@angular/cdk/keycodes';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
@@ -100,6 +105,9 @@ export class CdkOverlayOrigin {
 export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _overlayRef: OverlayRef;
   private _templatePortal: TemplatePortal;
+  private _viewportMargin = 0;
+  private _open = false;
+  private _disableClose = false;
   private _hasBackdrop = false;
   private _lockPosition = false;
   private _growAfterOpen = false;
@@ -131,7 +139,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayOffsetX')
   get offsetX(): number { return this._offsetX; }
   set offsetX(offsetX: number) {
-    this._offsetX = offsetX;
+    this._offsetX = coerceNumberProperty(offsetX);
 
     if (this._position) {
       this._updatePositionStrategy(this._position);
@@ -142,7 +150,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayOffsetY')
   get offsetY() { return this._offsetY; }
   set offsetY(offsetY: number) {
-    this._offsetY = offsetY;
+    this._offsetY = coerceNumberProperty(offsetY);
 
     if (this._position) {
       this._updatePositionStrategy(this._position);
@@ -168,16 +176,22 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayPanelClass') panelClass: string | string[];
 
   /** Margin between the overlay and the viewport edges. */
-  @Input('cdkConnectedOverlayViewportMargin') viewportMargin: number = 0;
+  @Input('cdkConnectedOverlayViewportMargin')
+  get viewportMargin(): number { return this._viewportMargin; }
+  set viewportMargin(value: number) { this._viewportMargin = coerceNumberProperty(value); }
 
   /** Strategy to be used when handling scroll events while the overlay is open. */
   @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy;
 
   /** Whether the overlay is open. */
-  @Input('cdkConnectedOverlayOpen') open: boolean = false;
+  @Input('cdkConnectedOverlayOpen')
+  get open() { return this._open; }
+  set open(value: any) { this._open = coerceBooleanProperty(value); }
 
   /** Whether the overlay can be closed by user interaction. */
-  @Input('cdkConnectedOverlayDisableClose') disableClose: boolean = false;
+  @Input('cdkConnectedOverlayDisableClose')
+  get disableClose() { return this._disableClose; }
+  set disableClose(value: any) { this._disableClose = coerceBooleanProperty(value); }
 
   /** CSS selector which to set the transform origin. */
   @Input('cdkConnectedOverlayTransformOriginOn') transformOriginSelector: string;
@@ -428,6 +442,11 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     this._positionSubscription.unsubscribe();
   }
 
+  static ngAcceptInputType_offsetX: NumberInput;
+  static ngAcceptInputType_offsetY: NumberInput;
+  static ngAcceptInputType_viewportMargin: NumberInput;
+  static ngAcceptInputType_open: BooleanInput;
+  static ngAcceptInputType_disableClose: BooleanInput;
   static ngAcceptInputType_hasBackdrop: BooleanInput;
   static ngAcceptInputType_lockPosition: BooleanInput;
   static ngAcceptInputType_flexibleDimensions: BooleanInput;

src/google-maps/google-map/google-map.ts

@@ -26,6 +26,7 @@ import {
   EventEmitter,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
+import {NumberInput, coerceNumberProperty} from '@angular/cdk/coercion';
 import {Observable} from 'rxjs';
 import {MapEventManager} from '../map-event-manager';
 
@@ -93,9 +94,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _center: google.maps.LatLngLiteral|google.maps.LatLng;
 
   @Input()
-  set zoom(zoom: number) {
-    this._zoom = zoom;
-  }
+  set zoom(zoom: number) { this._zoom = coerceNumberProperty(zoom); }
   private _zoom: number;
 
   @Input()
@@ -505,6 +504,8 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
                   'Please wait for the API to load before trying to interact with it.');
     }
   }
+
+  static ngAcceptInputType_zoom: NumberInput;
 }
 
 const cssUnitsPattern = /([A-Za-z%]+)$/;

src/google-maps/map-circle/map-circle.ts

@@ -10,6 +10,7 @@
 /// <reference types="googlemaps" />
 
 import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
+import {NumberInput, coerceNumberProperty} from '@angular/cdk/coercion';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
 
@@ -52,7 +53,7 @@ export class MapCircle implements OnInit, OnDestroy {
 
   @Input()
   set radius(radius: number) {
-    this._radius.next(radius);
+    this._radius.next(coerceNumberProperty(radius));
   }
 
   /**
@@ -282,4 +283,6 @@ export class MapCircle implements OnInit, OnDestroy {
       }
     }
   }
+
+  static ngAcceptInputType_radius: NumberInput;
 }

src/google-maps/map-ground-overlay/map-ground-overlay.ts

@@ -10,6 +10,12 @@
 /// <reference types="googlemaps" />
 
 import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  BooleanInput,
+  NumberInput,
+  coerceBooleanProperty,
+  coerceNumberProperty
+} from '@angular/cdk/coercion';
 import {BehaviorSubject, Observable, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -27,6 +33,7 @@ import {MapEventManager} from '../map-event-manager';
 })
 export class MapGroundOverlay implements OnInit, OnDestroy {
   private _eventManager = new MapEventManager(this._ngZone);
+  private _clickable = false;
 
   private readonly _opacity = new BehaviorSubject<number>(1);
   private readonly _url = new BehaviorSubject<string>('');
@@ -58,12 +65,14 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
   }
 
   /** Whether the overlay is clickable */
-  @Input() clickable: boolean = false;
+  @Input()
+  get clickable() { return this._clickable; }
+  set clickable(value: any) { this._clickable = coerceBooleanProperty(value); }
 
   /** Opacity of the overlay. */
   @Input()
   set opacity(opacity: number) {
-    this._opacity.next(opacity);
+    this._opacity.next(coerceNumberProperty(opacity));
   }
 
   /**
@@ -189,4 +198,7 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
       }
     }
   }
+
+  static ngAcceptInputType_clickable: BooleanInput;
+  static ngAcceptInputType_opacity: NumberInput;
 }

src/google-maps/map-marker-clusterer/map-marker-clusterer.ts

@@ -25,6 +25,13 @@ import {
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
+import {
+  BooleanInput,
+  NumberInput,
+  coerceArray,
+  coerceBooleanProperty,
+  coerceNumberProperty
+} from '@angular/cdk/coercion';
 import {Observable, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -60,15 +67,18 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
 
   @Input()
   set averageCenter(averageCenter: boolean) {
-    this._averageCenter = averageCenter;
+    this._averageCenter = coerceBooleanProperty(averageCenter);
   }
   private _averageCenter: boolean;
 
-  @Input() batchSize?: number;
+  @Input()
+  get batchSize(): number | undefined { return this._batchSize; }
+  set batchSize(value: any) { this._batchSize = coerceNumberProperty(value); }
+  private _batchSize?: number;
 
   @Input()
   set batchSizeIE(batchSizeIE: number) {
-    this._batchSizeIE = batchSizeIE;
+    this._batchSizeIE = coerceNumberProperty(batchSizeIE);
   }
   private _batchSizeIE: number;
 
@@ -86,19 +96,19 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
 
   @Input()
   set enableRetinaIcons(enableRetinaIcons: boolean) {
-    this._enableRetinaIcons = enableRetinaIcons;
+    this._enableRetinaIcons = coerceBooleanProperty(enableRetinaIcons);
   }
   private _enableRetinaIcons: boolean;
 
   @Input()
   set gridSize(gridSize: number) {
-    this._gridSize = gridSize;
+    this._gridSize = coerceNumberProperty(gridSize);
   }
   private _gridSize: number;
 
   @Input()
   set ignoreHidden(ignoreHidden: boolean) {
-    this._ignoreHidden = ignoreHidden;
+    this._ignoreHidden = coerceBooleanProperty(ignoreHidden);
   }
   private _ignoreHidden: boolean;
 
@@ -115,20 +125,20 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   private _imagePath: string;
 
   @Input()
-  set imageSizes(imageSizes: number[]) {
-    this._imageSizes = imageSizes;
+  set imageSizes(imageSizes: number | number[]) {
+    this._imageSizes = coerceArray(imageSizes);
   }
   private _imageSizes: number[];
 
   @Input()
   set maxZoom(maxZoom: number) {
-    this._maxZoom = maxZoom;
+    this._maxZoom = coerceNumberProperty(maxZoom);
   }
   private _maxZoom: number;
 
   @Input()
   set minimumClusterSize(minimumClusterSize: number) {
-    this._minimumClusterSize = minimumClusterSize;
+    this._minimumClusterSize = coerceNumberProperty(minimumClusterSize);
   }
   private _minimumClusterSize: number;
 
@@ -146,13 +156,13 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
 
   @Input()
   set zIndex(zIndex: number) {
-    this._zIndex = zIndex;
+    this._zIndex = coerceNumberProperty(zIndex);
   }
   private _zIndex: number;
 
   @Input()
   set zoomOnClick(zoomOnClick: boolean) {
-    this._zoomOnClick = zoomOnClick;
+    this._zoomOnClick = coerceBooleanProperty(zoomOnClick);
   }
   private _zoomOnClick: boolean;
 
@@ -480,4 +490,15 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
       }
     }
   }
+
+  static ngAcceptInputType_averageCenter: BooleanInput;
+  static ngAcceptInputType_batchSize: NumberInput;
+  static ngAcceptInputType_batchSizeIE: NumberInput;
+  static ngAcceptInputType_enableRetinaIcons: BooleanInput;
+  static ngAcceptInputType_gridSize: NumberInput;
+  static ngAcceptInputType_ignoreHidden: BooleanInput;
+  static ngAcceptInputType_maxZoom: NumberInput;
+  static ngAcceptInputType_minimumClusterSize: NumberInput;
+  static ngAcceptInputType_zIndex: NumberInput;
+  static ngAcceptInputType_zoomOnClick: BooleanInput;
 }

src/google-maps/map-marker/map-marker.ts

@@ -19,6 +19,7 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Observable} from 'rxjs';
 
 import {GoogleMap} from '../google-map/google-map';
@@ -81,7 +82,7 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    */
   @Input()
   set clickable(clickable: boolean) {
-    this._clickable = clickable;
+    this._clickable = coerceBooleanProperty(clickable);
   }
   private _clickable: boolean;
 
@@ -111,7 +112,7 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    */
   @Input()
   set visible(value: boolean) {
-    this._visible = value;
+    this._visible = coerceBooleanProperty(value);
   }
   private _visible: boolean;
 
@@ -471,4 +472,7 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
       }
     }
   }
+
+  static ngAcceptInputType_clickable: BooleanInput;
+  static ngAcceptInputType_visible: BooleanInput;
 }

src/google-maps/map-traffic-layer/map-traffic-layer.ts

@@ -10,6 +10,7 @@
 /// <reference types="googlemaps" />
 
 import {Directive, Input, NgZone, OnDestroy, OnInit} from '@angular/core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {BehaviorSubject, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
 
@@ -40,7 +41,7 @@ export class MapTrafficLayer implements OnInit, OnDestroy {
    */
   @Input()
   set autoRefresh(autoRefresh: boolean) {
-    this._autoRefresh.next(autoRefresh);
+    this._autoRefresh.next(coerceBooleanProperty(autoRefresh));
   }
 
   constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
@@ -94,4 +95,6 @@ export class MapTrafficLayer implements OnInit, OnDestroy {
           'Please wait for the Traffic Layer to load before trying to interact with it.');
     }
   }
+
+  static ngAcceptInputType_autoRefresh: BooleanInput;
 }