feat: expand input types with coercion to work with ngtsc input type checking (#17528)

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

* refactor: add workaround for strict metadata emit of coercion static members

See: angular/angular#33451

* build: patch ng_module bazel rule to enable strict template type checking

Workaround for: angular/angular#33452

* refactor: disable strict metadata emit for legacy build output

Workaround for angular/angular#33451. This makes
sense at the current time since the Bazel output does *never* work with
strict metadata emit... and considering that with Ivy there is no metadata
anyway, it could be disabled in the meanwhile.

* build: disable strict attribute type checking

We are temporarily disabling strict attribute type checking
since we have a few templates that set a coerced input while
the `NgModel` directive is applied. In those cases, the empty string
for the `disabled` input, is not assignable to the `NgModel#disabled` input,
since it does not do coercion. We need to figure out what to do in those
scenarios.

Author: devversion

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/dialog/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental/dialog",
     "skipTemplateCodegen": true,

src/cdk-experimental/popover-edit/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental/popover-edit",
     "skipTemplateCodegen": true,

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-experimental/scrolling/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental/scrolling",
     "skipTemplateCodegen": true,

src/cdk-experimental/tsconfig-build.json

@@ -24,7 +24,6 @@
   "angularCompilerOptions": {
     "enableIvy": false,
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk-experimental",
     "skipTemplateCodegen": true,

src/cdk-experimental/tsconfig-tests.json

@@ -14,7 +14,6 @@
     }
   },
   "angularCompilerOptions": {
-    "strictMetadataEmit": true,
     "skipTemplateCodegen": true,
     "emitDecoratorMetadata": true,
 

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/a11y/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/a11y",
     "skipTemplateCodegen": true,

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/accordion/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/accordion",
     "skipTemplateCodegen": true,

src/cdk/bidi/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/bidi",
     "skipTemplateCodegen": true,

src/cdk/clipboard/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/clipboard",
     "skipTemplateCodegen": true,

src/cdk/coercion/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/coercion",
     "skipTemplateCodegen": true,

src/cdk/collections/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/collections",
     "skipTemplateCodegen": true,

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/drag-drop/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/drag-drop",
     "skipTemplateCodegen": true,

src/cdk/keycodes/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/keycodes",
     "skipTemplateCodegen": true,

src/cdk/layout/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/layout",
     "skipTemplateCodegen": true,

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/observers/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/observers",
     "skipTemplateCodegen": true,

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/overlay/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/overlay",
     "skipTemplateCodegen": true,

src/cdk/platform/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/platform",
     "skipTemplateCodegen": true,

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/portal/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/portal",
     "skipTemplateCodegen": true,

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/scrolling/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/scrolling",
     "skipTemplateCodegen": true,

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/stepper/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/stepper",
     "skipTemplateCodegen": true,

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/table/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/table",
     "skipTemplateCodegen": true,

src/cdk/testing/tsconfig-build.json

@@ -6,7 +6,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/testing",
     "skipTemplateCodegen": true,

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/text-field/tsconfig-build.json

@@ -5,7 +5,6 @@
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
     "flatModuleOutFile": "index.js",
     "flatModuleId": "@angular/cdk/text-field",
     "skipTemplateCodegen": true,

src/cdk/tree/padding.ts

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