build: update to MDC 3.0.0 (#16526)

Bumps the repo to `[email protected]` and fixes a compilation error that showed up as a result.

Author: crisbeto

package.json

@@ -36,7 +36,7 @@
   },
   "version": "8.0.2",
   "requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
-  "requiredMDCVersion": "^2.3.1",
+  "requiredMDCVersion": "^3.0.0",
   "dependencies": {
     "@angular/animations": "^8.1.0",
     "@angular/common": "^8.1.0",
@@ -47,7 +47,7 @@
     "@angular/platform-browser": "^8.1.0",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",
-    "material-components-web": "^2.3.1",
+    "material-components-web": "^3.0.0",
     "rxjs": "^6.4.0",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",

src/dev-app/system-config.ts

@@ -50,7 +50,6 @@ System.config({
     '@material/tab-indicator': 'node:@material/tab-indicator/dist/mdc.tabIndicator.js',
     '@material/tab-scroller': 'node:@material/tab-scroller/dist/mdc.tabScroller.js',
     '@material/text-field': 'node:@material/textfield/dist/mdc.textField.js',
-    '@material/toolbar': 'node:@material/toolbar/dist/mdc.toolbar.js',
     '@material/top-app-bar': 'node:@material/top-app-bar/dist/mdc.topAppBar.js',
 
     // Angular specific mappings.

src/e2e-app/devserver-configure.js

@@ -34,7 +34,6 @@ require.config({
     '@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator',
     '@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller',
     '@material/text-field': '@material/textfield/dist/mdc.textField',
-    '@material/toolbar': '@material/toolbar/dist/mdc.toolbar',
     '@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar',
   }
 });

src/material-experimental/mdc-chips/chip.ts

@@ -256,6 +256,9 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       this._elementRef.nativeElement.style.setProperty(propertyName, value);
     },
     hasLeadingIcon: () => { return !!this.leadingIcon; },
+    setAttr: (name: string, value: string) => {
+      this._elementRef.nativeElement.setAttribute(name, value);
+    },
     // The 2 functions below are used by the MDC ripple, which we aren't using,
     // so they will never be called
     getRootBoundingClientRect: () => this._elementRef.nativeElement.getBoundingClientRect(),

src/material-experimental/mdc-helpers/BUILD.bazel

@@ -116,8 +116,6 @@ sass_library(
         "@npm//:node_modules/@material/theme/_functions.scss",
         "@npm//:node_modules/@material/theme/_mixins.scss",
         "@npm//:node_modules/@material/theme/_variables.scss",
-        "@npm//:node_modules/@material/toolbar/_mixins.scss",
-        "@npm//:node_modules/@material/toolbar/_variables.scss",
         "@npm//:node_modules/@material/top-app-bar/_mixins.scss",
         "@npm//:node_modules/@material/top-app-bar/_variables.scss",
         "@npm//:node_modules/@material/typography/_functions.scss",

src/material-experimental/mdc_require_config.js

@@ -31,7 +31,6 @@ require.config({
     '@material/tab-indicator': '/base/npm/node_modules/@material/tab-indicator/dist/mdc.tabIndicator',
     '@material/tab-scroller': '/base/npm/node_modules/@material/tab-scroller/dist/mdc.tabScroller',
     '@material/text-field': '/base/npm/node_modules/@material/textfield/dist/mdc.textField',
-    '@material/toolbar': '/base/npm/node_modules/@material/toolbar/dist/mdc.toolbar',
     '@material/top-app-bar': '/base/npm/node_modules/@material/top-app-bar/dist/mdc.topAppBar',
   }
 });

test/karma-system-config.js

@@ -37,7 +37,6 @@ System.config({
     '@material/tab-indicator': 'node:@material/tab-indicator/dist/mdc.tabIndicator.js',
     '@material/tab-scroller': 'node:@material/tab-scroller/dist/mdc.tabScroller.js',
     '@material/text-field': 'node:@material/textfield/dist/mdc.textField.js',
-    '@material/toolbar': 'node:@material/toolbar/dist/mdc.toolbar.js',
     '@material/top-app-bar': 'node:@material/top-app-bar/dist/mdc.topAppBar.js',
 
     // Angular specific mappings.

tools/package-tools/rollup-globals.ts

@@ -81,7 +81,6 @@ export const rollupGlobals = {
   '@material/tab-indicator': 'mdc.tabIndicator',
   '@material/tab-scroller': 'mdc.tabScroller',
   '@material/text-field': 'mdc.textField',
-  '@material/toolbar': 'mdc.toolbar',
   '@material/top-app-bar': 'mdc.topAppBar',
 
   '@angular/animations': 'ng.animations',