fix: input coercion

src/cdk/clipboard/BUILD.bazel

@@ -10,6 +10,7 @@ ng_module(
     ),
     assets = glob(["**/*.html"]),
     deps = [
+        "//src/cdk/coercion",
         "@npm//@angular/core",
         "@npm//rxjs",
     ],

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/BUILD.bazel

@@ -12,6 +12,7 @@ ng_module(
     ),
     deps = [
         "//src:dev_mode_types",
+        "//src/cdk/coercion",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",

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,10 +94,10 @@ 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 | undefined) {
+    this._zoom = zoom === undefined ? zoom : coerceNumberProperty(zoom);
   }
-  private _zoom: number;
+  private _zoom: number | undefined;
 
   @Input()
   set options(options: google.maps.MapOptions) {
@@ -505,6 +506,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';
 
@@ -51,8 +52,8 @@ export class MapCircle implements OnInit, OnDestroy {
   }
 
   @Input()
-  set radius(radius: number) {
-    this._radius.next(radius);
+  set radius(radius: number | undefined) {
+    this._radius.next(radius === undefined ? radius : 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.spec.ts

@@ -80,11 +80,11 @@ describe('MapMarkerClusterer', () => {
       imagePath: undefined,
       imageSizes: undefined,
       maxZoom: undefined,
-      minimumClusterSize: undefined,
+      minimumClusterSize: 0,
       styles: undefined,
       title: undefined,
       zIndex: undefined,
-      zoomOnClick: undefined,
+      zoomOnClick: false,
     });
   });
 

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';
 
@@ -59,18 +66,25 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   ariaLabelFn: AriaLabelFn = () => ''
 
   @Input()
-  set averageCenter(averageCenter: boolean) {
-    this._averageCenter = averageCenter;
+  set averageCenter(averageCenter: boolean | undefined) {
+    this._averageCenter = averageCenter === undefined
+      ? averageCenter
+      : coerceBooleanProperty(averageCenter);
   }
-  private _averageCenter: boolean;
+  private _averageCenter: boolean | undefined;
 
-  @Input() batchSize?: number;
+  @Input()
+  get batchSize(): number | undefined { return this._batchSize; }
+  set batchSize(batchSize: any) {
+    this._batchSize = batchSize === undefined ? batchSize : coerceNumberProperty(batchSize);
+  }
+  private _batchSize?: number;
 
   @Input()
-  set batchSizeIE(batchSizeIE: number) {
-    this._batchSizeIE = batchSizeIE;
+  set batchSizeIE(batchSizeIE: number | undefined) {
+    this._batchSizeIE = batchSizeIE === undefined ? batchSizeIE : coerceNumberProperty(batchSizeIE);
   }
-  private _batchSizeIE: number;
+  private _batchSizeIE?: number;
 
   @Input()
   set calculator(calculator: Calculator) {
@@ -85,22 +99,26 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   private _clusterClass: string;
 
   @Input()
-  set enableRetinaIcons(enableRetinaIcons: boolean) {
-    this._enableRetinaIcons = enableRetinaIcons;
+  set enableRetinaIcons(enableRetinaIcons: boolean | undefined) {
+    this._enableRetinaIcons = enableRetinaIcons === undefined
+      ? enableRetinaIcons
+      : coerceBooleanProperty(enableRetinaIcons);
   }
-  private _enableRetinaIcons: boolean;
+  private _enableRetinaIcons: boolean | undefined;
 
   @Input()
-  set gridSize(gridSize: number) {
-    this._gridSize = gridSize;
+  set gridSize(gridSize: number | undefined) {
+    this._gridSize = gridSize === undefined ? gridSize : coerceNumberProperty(gridSize);
   }
-  private _gridSize: number;
+  private _gridSize: number | undefined;
 
   @Input()
-  set ignoreHidden(ignoreHidden: boolean) {
-    this._ignoreHidden = ignoreHidden;
+  set ignoreHidden(ignoreHidden: boolean | undefined) {
+    this._ignoreHidden = ignoreHidden === undefined
+      ? ignoreHidden
+      : coerceBooleanProperty(ignoreHidden);
   }
-  private _ignoreHidden: boolean;
+  private _ignoreHidden: boolean | undefined;
 
   @Input()
   set imageExtension(imageExtension: string) {
@@ -115,20 +133,20 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   private _imagePath: string;
 
   @Input()
-  set imageSizes(imageSizes: number[]) {
-    this._imageSizes = imageSizes;
+  set imageSizes(imageSizes: number | number[] | undefined) {
+    this._imageSizes = imageSizes === undefined ? imageSizes : coerceArray(imageSizes);
   }
-  private _imageSizes: number[];
+  private _imageSizes: number[] | undefined;
 
   @Input()
-  set maxZoom(maxZoom: number) {
-    this._maxZoom = maxZoom;
+  set maxZoom(maxZoom: number | undefined) {
+    this._maxZoom = maxZoom === undefined ? maxZoom : coerceNumberProperty(maxZoom);
   }
-  private _maxZoom: number;
+  private _maxZoom: number | undefined;
 
   @Input()
   set minimumClusterSize(minimumClusterSize: number) {
-    this._minimumClusterSize = minimumClusterSize;
+    this._minimumClusterSize = coerceNumberProperty(minimumClusterSize);
   }
   private _minimumClusterSize: number;
 
@@ -145,14 +163,14 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   private _title: string;
 
   @Input()
-  set zIndex(zIndex: number) {
-    this._zIndex = zIndex;
+  set zIndex(zIndex: number | undefined) {
+    this._zIndex = zIndex === undefined ? zIndex : coerceNumberProperty(zIndex);
   }
-  private _zIndex: number;
+  private _zIndex: number | undefined;
 
   @Input()
   set zoomOnClick(zoomOnClick: boolean) {
-    this._zoomOnClick = zoomOnClick;
+    this._zoomOnClick = coerceBooleanProperty(zoomOnClick);
   }
   private _zoomOnClick: boolean;
 
@@ -480,4 +498,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;
 }