fix(material-experimental/mdc-form-field): error with latest canary version (#22623)

Fixes an error in the latest canary version, because we were passing `undefined` to a method that was expecting a number.

Author: crisbeto

package.json

@@ -61,7 +61,7 @@
     "@types/googlemaps": "^3.43.1",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "12.0.0-canary.b52196498.0",
+    "material-components-web": "12.0.0-canary.af453daf8.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
@@ -90,53 +90,53 @@
     "@bazel/terser": "3.3.0",
     "@bazel/typescript": "3.3.0",
     "@firebase/app-types": "^0.6.1",
-    "@material/animation": "12.0.0-canary.b52196498.0",
-    "@material/auto-init": "12.0.0-canary.b52196498.0",
-    "@material/banner": "12.0.0-canary.b52196498.0",
-    "@material/base": "12.0.0-canary.b52196498.0",
-    "@material/button": "12.0.0-canary.b52196498.0",
-    "@material/card": "12.0.0-canary.b52196498.0",
-    "@material/checkbox": "12.0.0-canary.b52196498.0",
-    "@material/chips": "12.0.0-canary.b52196498.0",
-    "@material/circular-progress": "12.0.0-canary.b52196498.0",
-    "@material/data-table": "12.0.0-canary.b52196498.0",
-    "@material/density": "12.0.0-canary.b52196498.0",
-    "@material/dialog": "12.0.0-canary.b52196498.0",
-    "@material/dom": "12.0.0-canary.b52196498.0",
-    "@material/drawer": "12.0.0-canary.b52196498.0",
-    "@material/elevation": "12.0.0-canary.b52196498.0",
-    "@material/fab": "12.0.0-canary.b52196498.0",
-    "@material/feature-targeting": "12.0.0-canary.b52196498.0",
-    "@material/floating-label": "12.0.0-canary.b52196498.0",
-    "@material/form-field": "12.0.0-canary.b52196498.0",
-    "@material/icon-button": "12.0.0-canary.b52196498.0",
-    "@material/image-list": "12.0.0-canary.b52196498.0",
-    "@material/layout-grid": "12.0.0-canary.b52196498.0",
-    "@material/line-ripple": "12.0.0-canary.b52196498.0",
-    "@material/linear-progress": "12.0.0-canary.b52196498.0",
-    "@material/list": "12.0.0-canary.b52196498.0",
-    "@material/menu": "12.0.0-canary.b52196498.0",
-    "@material/menu-surface": "12.0.0-canary.b52196498.0",
-    "@material/notched-outline": "12.0.0-canary.b52196498.0",
-    "@material/radio": "12.0.0-canary.b52196498.0",
-    "@material/ripple": "12.0.0-canary.b52196498.0",
-    "@material/rtl": "12.0.0-canary.b52196498.0",
-    "@material/segmented-button": "12.0.0-canary.b52196498.0",
-    "@material/select": "12.0.0-canary.b52196498.0",
-    "@material/shape": "12.0.0-canary.b52196498.0",
-    "@material/slider": "12.0.0-canary.b52196498.0",
-    "@material/snackbar": "12.0.0-canary.b52196498.0",
-    "@material/switch": "12.0.0-canary.b52196498.0",
-    "@material/tab": "12.0.0-canary.b52196498.0",
-    "@material/tab-bar": "12.0.0-canary.b52196498.0",
-    "@material/tab-indicator": "12.0.0-canary.b52196498.0",
-    "@material/tab-scroller": "12.0.0-canary.b52196498.0",
-    "@material/textfield": "12.0.0-canary.b52196498.0",
-    "@material/theme": "12.0.0-canary.b52196498.0",
-    "@material/tooltip": "12.0.0-canary.b52196498.0",
-    "@material/top-app-bar": "12.0.0-canary.b52196498.0",
-    "@material/touch-target": "12.0.0-canary.b52196498.0",
-    "@material/typography": "12.0.0-canary.b52196498.0",
+    "@material/animation": "12.0.0-canary.af453daf8.0",
+    "@material/auto-init": "12.0.0-canary.af453daf8.0",
+    "@material/banner": "12.0.0-canary.af453daf8.0",
+    "@material/base": "12.0.0-canary.af453daf8.0",
+    "@material/button": "12.0.0-canary.af453daf8.0",
+    "@material/card": "12.0.0-canary.af453daf8.0",
+    "@material/checkbox": "12.0.0-canary.af453daf8.0",
+    "@material/chips": "12.0.0-canary.af453daf8.0",
+    "@material/circular-progress": "12.0.0-canary.af453daf8.0",
+    "@material/data-table": "12.0.0-canary.af453daf8.0",
+    "@material/density": "12.0.0-canary.af453daf8.0",
+    "@material/dialog": "12.0.0-canary.af453daf8.0",
+    "@material/dom": "12.0.0-canary.af453daf8.0",
+    "@material/drawer": "12.0.0-canary.af453daf8.0",
+    "@material/elevation": "12.0.0-canary.af453daf8.0",
+    "@material/fab": "12.0.0-canary.af453daf8.0",
+    "@material/feature-targeting": "12.0.0-canary.af453daf8.0",
+    "@material/floating-label": "12.0.0-canary.af453daf8.0",
+    "@material/form-field": "12.0.0-canary.af453daf8.0",
+    "@material/icon-button": "12.0.0-canary.af453daf8.0",
+    "@material/image-list": "12.0.0-canary.af453daf8.0",
+    "@material/layout-grid": "12.0.0-canary.af453daf8.0",
+    "@material/line-ripple": "12.0.0-canary.af453daf8.0",
+    "@material/linear-progress": "12.0.0-canary.af453daf8.0",
+    "@material/list": "12.0.0-canary.af453daf8.0",
+    "@material/menu": "12.0.0-canary.af453daf8.0",
+    "@material/menu-surface": "12.0.0-canary.af453daf8.0",
+    "@material/notched-outline": "12.0.0-canary.af453daf8.0",
+    "@material/radio": "12.0.0-canary.af453daf8.0",
+    "@material/ripple": "12.0.0-canary.af453daf8.0",
+    "@material/rtl": "12.0.0-canary.af453daf8.0",
+    "@material/segmented-button": "12.0.0-canary.af453daf8.0",
+    "@material/select": "12.0.0-canary.af453daf8.0",
+    "@material/shape": "12.0.0-canary.af453daf8.0",
+    "@material/slider": "12.0.0-canary.af453daf8.0",
+    "@material/snackbar": "12.0.0-canary.af453daf8.0",
+    "@material/switch": "12.0.0-canary.af453daf8.0",
+    "@material/tab": "12.0.0-canary.af453daf8.0",
+    "@material/tab-bar": "12.0.0-canary.af453daf8.0",
+    "@material/tab-indicator": "12.0.0-canary.af453daf8.0",
+    "@material/tab-scroller": "12.0.0-canary.af453daf8.0",
+    "@material/textfield": "12.0.0-canary.af453daf8.0",
+    "@material/theme": "12.0.0-canary.af453daf8.0",
+    "@material/tooltip": "12.0.0-canary.af453daf8.0",
+    "@material/top-app-bar": "12.0.0-canary.af453daf8.0",
+    "@material/touch-target": "12.0.0-canary.af453daf8.0",
+    "@material/typography": "12.0.0-canary.af453daf8.0",
     "@octokit/rest": "18.3.5",
     "@schematics/angular": "^12.0.0-rc.0",
     "@types/autoprefixer": "^9.7.2",

packages.bzl

@@ -2,7 +2,7 @@
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = "^12.0.0-0 || ^13.0.0-0"
-MDC_PACKAGE_VERSION = "^12.0.0-canary.b52196498.0"
+MDC_PACKAGE_VERSION = "^12.0.0-canary.af453daf8.0"
 TSLIB_PACKAGE_VERSION = "^2.1.0"
 RXJS_PACKAGE_VERSION = "^6.5.3"
 

src/material-experimental/mdc-form-field/form-field.ts

@@ -220,7 +220,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   _subscriptAnimationState = '';
 
   /** Width of the outline notch. */
-  _outlineNotchWidth: number;
+  _outlineNotchWidth = 0;
 
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {