feat: expand input types with coercion to work with ngtsc input type checking

Author: jelbourn

src/a11y-demo/datepicker/datepicker-a11y.ts

@@ -31,5 +31,5 @@ export class DatepickerAccessibilityDemo {
   appointmentDate: Date;
   minAppointmentDate = new Date();
   maxAppointmentDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
-  weekdaysOnly = (d: Date) => d.getDay() != 0 && d.getDay() != 6;
+  weekdaysOnly = (d: Date|null) => d !== null && d.getDay() != 0 && d.getDay() != 6;
 }

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -463,4 +463,7 @@ export class CdkAutoSizeVirtualScroll implements OnChanges {
   ngOnChanges() {
     this._scrollStrategy.updateBufferSize(this.minBufferPx, this.maxBufferPx);
   }
+
+  static ngAcceptInputType_minBufferPx: number | string;
+  static ngAcceptInputType_maxBufferPx: number | string;
 }

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -418,4 +418,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, DoCheck {
       this.focusTrap.attachAnchors();
     }
   }
+
+  static ngAcceptInputType_enabled: boolean | string;
+  static ngAcceptInputType_autoCapture: boolean | string;
 }

src/cdk/accordion/accordion-item.ts

@@ -152,4 +152,7 @@ export class CdkAccordionItem implements OnDestroy {
       }
     });
   }
+
+  static ngAcceptInputType_expanded: boolean | string;
+  static ngAcceptInputType_disabled: boolean | string;
 }

src/cdk/accordion/accordion.ts

@@ -59,4 +59,6 @@ export class CdkAccordion implements OnDestroy, OnChanges {
       this._openCloseAllActions.next(expanded);
     }
   }
+
+  static ngAcceptInputType_multi: boolean | string;
 }

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

@@ -46,4 +46,6 @@ export class CdkDragHandle implements OnDestroy {
   ngOnDestroy() {
     this._stateChanges.complete();
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
 }

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

@@ -408,6 +408,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
       });
     });
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
 }
 
 /** Gets the closest ancestor of an element that matches a selector. */

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

@@ -34,4 +34,6 @@ export class CdkDropListGroup<T> implements OnDestroy {
   ngOnDestroy() {
     this._items.clear();
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
 }

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

@@ -328,4 +328,7 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
     });
   }
 
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_sortingDisabled: boolean | string;
+  static ngAcceptInputType_autoScrollDisabled: boolean | string;
 }

src/cdk/observers/observe-content.ts

@@ -193,6 +193,9 @@ export class CdkObserveContent implements AfterContentInit, OnDestroy {
       this._currentSubscription.unsubscribe();
     }
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_debounce: boolean | string;
 }
 
 

src/cdk/overlay/overlay-directives.ts

@@ -383,6 +383,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
     this._backdropSubscription.unsubscribe();
   }
+
+  static ngAcceptInputType_hasBackdrop: boolean | string;
+  static ngAcceptInputType_lockPosition: boolean | string;
+  static ngAcceptInputType_flexibleDimensions: boolean | string;
+  static ngAcceptInputType_growAfterOpen: boolean | string;
+  static ngAcceptInputType_push: boolean | string;
 }
 
 

src/cdk/portal/portal-directives.ts

@@ -170,6 +170,8 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
 
     return viewRef;
   }
+
+  static ngAcceptInputType_portal: Portal<any> | null | undefined | '';
 }
 
 /**

src/cdk/scrolling/fixed-size-virtual-scroll.ts

@@ -203,4 +203,8 @@ export class CdkFixedSizeVirtualScroll implements OnChanges {
   ngOnChanges() {
     this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);
   }
+
+  static ngAcceptInputType_itemSize: string | number;
+  static ngAcceptInputType_minBufferPx: string | number;
+  static ngAcceptInputType_maxBufferPx: string | number;
 }

src/cdk/stepper/stepper.ts

@@ -231,6 +231,11 @@ export class CdkStep implements OnChanges {
     // underlying MatStepHeader, we have to make sure that change detection runs correctly.
     this._stepper._stateChanged();
   }
+
+  static ngAcceptInputType_editable: boolean | string;
+  static ngAcceptInputType_hasError: boolean | string;
+  static ngAcceptInputType_optional: boolean | string;
+  static ngAcceptInputType_completed: boolean | string;
 }
 
 @Directive({
@@ -519,6 +524,13 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
     const focusedElement = this._document.activeElement;
     return stepperElement === focusedElement || stepperElement.contains(focusedElement);
   }
+
+  static ngAcceptInputType_editable: boolean | string;
+  static ngAcceptInputType_optional: boolean | string;
+  static ngAcceptInputType_completed: boolean | string;
+  static ngAcceptInputType_hasError: boolean | string;
+  static ngAcceptInputType_linear: boolean | string;
+  static ngAcceptInputType_selectedIndex: number | string;
 }
 
 

src/cdk/table/cell.ts

@@ -107,6 +107,9 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
    * do not match are replaced by the '-' character.
    */
   cssClassFriendlyName: string;
+
+  static ngAcceptInputType_sticky: boolean | string;
+  static ngAcceptInputType_stickyEnd: boolean | string;
 }
 
 /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */

src/cdk/table/row.ts

@@ -99,6 +99,8 @@ export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements CanStick, O
   ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
   }
+
+  static ngAcceptInputType_sticky: boolean | string;
 }
 
 // Boilerplate for applying mixins to CdkFooterRowDef.
@@ -125,6 +127,8 @@ export class CdkFooterRowDef extends _CdkFooterRowDefBase implements CanStick, O
   ngOnChanges(changes: SimpleChanges): void {
     super.ngOnChanges(changes);
   }
+
+  static ngAcceptInputType_sticky: boolean | string;
 }
 
 /**

src/cdk/table/table.ts

@@ -1077,6 +1077,8 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
           this.updateStickyColumnStyles();
         });
   }
+
+  static ngAcceptInputType_multiTemplateDataRows: boolean | string;
 }
 
 /** Utility function that gets a merged list of the entries in a QueryList and values of a Set. */

src/cdk/text-field/autosize.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
 import {
   Directive,
   ElementRef,
@@ -56,15 +56,15 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
   @Input('cdkAutosizeMinRows')
   get minRows(): number { return this._minRows; }
   set minRows(value: number) {
-    this._minRows = value;
+    this._minRows = coerceNumberProperty(value);
     this._setMinHeight();
   }
 
   /** Maximum amount of rows in the textarea. */
   @Input('cdkAutosizeMaxRows')
   get maxRows(): number { return this._maxRows; }
   set maxRows(value: number) {
-    this._maxRows = value;
+    this._maxRows = coerceNumberProperty(value);
     this._setMaxHeight();
   }
 
@@ -272,4 +272,8 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy {
       textarea.setSelectionRange(selectionStart, selectionEnd);
     }
   }
+
+  static ngAcceptInputType_minRows: number | string;
+  static ngAcceptInputType_maxRows: number | string;
+  static ngAcceptInputType_enabled: boolean | string;
 }

src/cdk/tree/padding.ts

@@ -109,4 +109,6 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
       this._currentPadding = padding;
     }
   }
+
+  static ngAcceptInputType_level: number | string;
 }

src/cdk/tree/toggle.ts

@@ -38,4 +38,6 @@ export class CdkTreeNodeToggle<T> {
 
     event.stopPropagation();
   }
+
+  static ngAcceptInputType_recursive: boolean | string;
 }

src/dev-app/badge/badge-demo.html

@@ -65,7 +65,7 @@ <h3>Buttons</h3>
     </button>
 
     <button mat-raised-button>
-      <mat-icon color="primary" matBadge="22" color="accent">home</mat-icon>
+      <mat-icon matBadge="22" color="accent">home</mat-icon>
     </button>
   </div>
 

src/dev-app/checkbox/checkbox-demo.html

@@ -30,7 +30,7 @@ <h1>mat-checkbox: Basic Example</h1>
            value="after"
            id="align-after"
            name="labelPosition"
-           (click)="labelPosition = after.value"
+           (click)="labelPosition = 'after'"
            checked>
     <label for="align-after">After</label>
   </div>
@@ -39,7 +39,7 @@ <h1>mat-checkbox: Basic Example</h1>
            value="before"
            id="align-before"
            name="labelPosition"
-           (click)="labelPosition = before.value">
+           (click)="labelPosition = 'before'">
     <label for="align-before">Before</label>
   </div>
 </div>

src/dev-app/dialog/dialog-demo.ts

@@ -175,7 +175,7 @@ export class JazzDialog {
 
       <button
         mat-button
-        color="secondary"
+        color="accent"
         (click)="showInStackedDialog()">
         Show in Dialog</button>
     </mat-dialog-actions>

src/dev-app/example/example-list.ts

@@ -65,4 +65,6 @@ export class ExampleList {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
+
+  static ngAcceptInputType_expandAll: boolean | string;
 }

src/dev-app/input/input-demo.html

@@ -552,7 +552,7 @@ <h3>Regular &lt;textarea&gt; with maxRows and minRows</h3>
         cdkTextareaAutosize
         [cdkAutosizeMinRows]="parseNumber(minRows.value)"
         [cdkAutosizeMaxRows]="parseNumber(maxRows.value)"></textarea>
-    <button type="button" (click)="minRows.value = parseNumber(minRows.value) - 1">Decrement minRows</button>
+    <button type="button" (click)="minRows.value = (parseNumber(minRows.value) - 1) + ''">Decrement minRows</button>
 
     <h3>&lt;textarea&gt; with mat-form-field</h3>
     <div>

src/dev-app/mdc-checkbox/mdc-checkbox-demo.html

@@ -30,7 +30,7 @@ <h1>mat-checkbox: Basic Example</h1>
            value="after"
            id="align-after"
            name="labelPosition"
-           (click)="labelPosition = after.value"
+           (click)="labelPosition = 'after'"
            checked>
     <label for="align-after">After</label>
   </div>
@@ -39,7 +39,7 @@ <h1>mat-checkbox: Basic Example</h1>
            value="before"
            id="align-before"
            name="labelPosition"
-           (click)="labelPosition = before.value">
+           (click)="labelPosition = 'before'">
     <label for="align-before">Before</label>
   </div>
 </div>

src/dev-app/toolbar/toolbar-demo.html

@@ -46,7 +46,7 @@
 
       <button mat-button>Text</button>
       <button mat-flat-button>Flat</button>
-      <button mat-mini-fab color="">
+      <button mat-mini-fab>
         <mat-icon>done</mat-icon>
       </button>
       <button mat-mini-fab color="primary">

src/material-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts

@@ -13,7 +13,7 @@ export class CdkDragDropEnterPredicateExample {
   all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   even = [10];
 
-  drop(event: CdkDragDrop<string[]>) {
+  drop(event: CdkDragDrop<number[]>) {
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     } else {

src/material-examples/material/datepicker/datepicker-filter/datepicker-filter-example.ts

@@ -7,8 +7,8 @@ import {Component} from '@angular/core';
   styleUrls: ['datepicker-filter-example.css'],
 })
 export class DatepickerFilterExample {
-  myFilter = (d: Date): boolean => {
-    const day = d.getDay();
+  myFilter = (d: Date | null): boolean => {
+    const day = (d || new Date()).getDay();
     // Prevent Saturday and Sunday from being selected.
     return day !== 0 && day !== 6;
   }

src/material-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts

@@ -149,4 +149,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   _handleInput(): void {
     this.onChange(this.parts.value);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_required: boolean | string;
 }

src/material-experimental/mdc-button/button.ts

@@ -56,6 +56,9 @@ export class MatButton extends MatButtonBase {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }
 
 /**
@@ -85,4 +88,7 @@ export class MatAnchor extends MatAnchorBase {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }

src/material-experimental/mdc-button/fab.ts

@@ -55,6 +55,9 @@ export class MatFabButton extends MatButtonBase {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }
 
 
@@ -85,4 +88,7 @@ export class MatFabAnchor extends MatAnchor {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }

src/material-experimental/mdc-button/icon-button.ts

@@ -52,6 +52,9 @@ export class MatIconButton extends MatButtonBase {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }
 
 /**
@@ -79,4 +82,7 @@ export class MatIconAnchor extends MatAnchorBase {
       @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, ngZone, animationMode);
   }
+
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -349,4 +349,10 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
     this._classes[cssClass] = active;
     this._changeDetectorRef.markForCheck();
   }
+
+  static ngAcceptInputType_checked: boolean | string;
+  static ngAcceptInputType_indeterminate: boolean | string;
+  static ngAcceptInputType_disabled: boolean | string;
+  static ngAcceptInputType_required: boolean | string;
+  static ngAcceptInputType_disableRipple: boolean | string;
 }