chore: update MDC to latest canary (#17760)

* chore: update MDC to latest canary

* address feedback

Author: mmalerba

package.json

@@ -53,7 +53,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "^4.0.0",
+    "material-components-web": "5.0.0-canary.5729943ba.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

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 = "^9.0.0-0 || ^10.0.0-0"
-MDC_PACKAGE_VERSION = "^4.0.0"
+MDC_PACKAGE_VERSION = "5.0.0-canary.5729943ba.0"
 VERSION_PLACEHOLDER_REPLACEMENTS = {
     "0.0.0-MDC": MDC_PACKAGE_VERSION,
     "0.0.0-NG": ANGULAR_PACKAGE_VERSION,

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

@@ -6,11 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-} from '@angular/core';
+import {ChangeDetectorRef, Directive, ElementRef, OnDestroy} from '@angular/core';
 import {
   CanDisable,
   CanDisableCtor,
@@ -106,20 +102,32 @@ const _MatChipRemoveMixinBase:
       'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
     '[tabIndex]': 'tabIndex',
     'role': 'button',
-    '(click)': 'interaction.next($event)',
-    '(keydown)': 'interaction.next($event)',
+    '(click)': '_clicks.next($event)',
+    '(keydown)': '_keydowns.next($event)',
   }
 })
-export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable, HasTabIndex {
+export class MatChipRemove extends _MatChipRemoveMixinBase
+    implements CanDisable, HasTabIndex, OnDestroy {
   /**
-   * Emits when the user interacts with the icon.
+   * Emits when the user clicks the icon.
    * @docs-private
    */
-  interaction: Subject<MouseEvent | KeyboardEvent> = new Subject<MouseEvent | KeyboardEvent>();
+  _clicks: Subject<MouseEvent> = new Subject<MouseEvent>();
+
+  /**
+   * Emits when the user presses a key on the icon.
+   * @docs-private
+   */
+  _keydowns: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();
 
   constructor(_elementRef: ElementRef) {
     super(_elementRef);
   }
 
+  ngOnDestroy() {
+    this._clicks.complete();
+    this._keydowns.complete();
+  }
+
   static ngAcceptInputType_disabled: boolean | string | null | undefined;
 }

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

@@ -202,7 +202,7 @@ export class MatChipOption extends MatChip {
     if (this.disabled) {
       event.preventDefault();
     } else {
-      this._handleInteraction(event);
+      this._handleClick(event);
       event.stopPropagation();
     }
   }
@@ -221,7 +221,7 @@ export class MatChipOption extends MatChip {
         event.preventDefault();
         break;
       default:
-        this._handleInteraction(event);
+        this._handleKeydown(event);
     }
   }
 

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

@@ -62,7 +62,7 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
   cells!: HTMLElement[];
 
   /** Key codes for which this component has a custom handler. */
-  HANDLED_KEYS = NAVIGATION_KEYS.concat([BACKSPACE, DELETE]);
+  HANDLED_KEYS = new Set([...NAVIGATION_KEYS, BACKSPACE, DELETE]);
 
   ngAfterContentInit() {
     super.ngAfterContentInit();
@@ -145,7 +145,7 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
         event.preventDefault();
         break;
       default:
-        this._handleInteraction(event);
+        this._handleKeydown(event);
     }
   }
 

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

@@ -120,7 +120,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   /** Emits when the chip is blurred. */
   readonly _onBlur = new Subject<MatChipEvent>();
 
-  readonly HANDLED_KEYS: number[] = [];
+  readonly HANDLED_KEYS: Set<number> = new Set();
 
   /** Whether the chip has focus. */
   protected _hasFocusInternal = false;
@@ -330,24 +330,29 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   _initRemoveIcon() {
     if (this.removeIcon) {
       this._chipFoundation.setShouldRemoveOnTrailingIconClick(true);
-      this._listenToRemoveIconInteraction();
+      this._listenToRemoveIconInteractions();
       this.removeIcon.disabled = this.disabled;
     }
   }
 
   /** Handles interaction with the remove icon. */
-  _listenToRemoveIconInteraction() {
-    this.removeIcon.interaction
+  _listenToRemoveIconInteractions() {
+    this.removeIcon._clicks
         .pipe(takeUntil(this._destroyed))
-        .subscribe((event) => {
+        .subscribe(event => {
+          if (!this.disabled) {
+            this._chipFoundation.handleClick(event);
+          }
+        });
+    this.removeIcon._keydowns
+        .pipe(takeUntil(this._destroyed))
+        .subscribe(event => {
           // The MDC chip foundation calls stopPropagation() for any trailing icon interaction
           // event, even ones it doesn't handle, so we want to avoid passing it keyboard events
           // for which we have a custom handler.
-          if (this.disabled || (event instanceof KeyboardEvent &&
-            this.HANDLED_KEYS.indexOf(event.keyCode) !== -1)) {
-            return;
+          if (!this.disabled && !this.HANDLED_KEYS.has(event.keyCode)) {
+            this._chipFoundation.handleKeydown(event);
           }
-          this._chipFoundation.handleTrailingIconInteraction(event);
         });
   }
 
@@ -391,10 +396,17 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     this._rippleRenderer.setupTriggerEvents(this._elementRef);
   }
 
-  /** Forwards interaction events to the MDC chip foundation. */
-  _handleInteraction(event: MouseEvent | KeyboardEvent) {
+  /** Forwards click events to the MDC chip foundation. */
+  _handleClick(event: MouseEvent) {
+    if (!this.disabled) {
+      this._chipFoundation.handleClick(event);
+    }
+  }
+
+  /** Forwards keydown events to the MDC chip foundation. */
+  _handleKeydown(event: KeyboardEvent) {
     if (!this.disabled) {
-      this._chipFoundation.handleInteraction(event);
+      this._chipFoundation.handleKeydown(event);
     }
   }
 

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

@@ -18,7 +18,7 @@ ng_module(
 # Add all MDC Sass files that we depend on here. After updating MDC dependencies, use the following
 # command to generate an updated list:
 #
-# `find node_modules/@material/ -name "_*.scss" | sort | sed -r 's/(.*\/@material\/[^/]*)\/(.*)/"@npm\/\/\1:\2",/'`
+# `find node_modules/@material/ -name "_*.scss" | sort | sed -r 's/(.*)/"@npm\/\/:\1",/'`
 #
 # TODO(mmalerba): Find a less tedious way to do this...
 sass_library(
@@ -45,6 +45,7 @@ sass_library(
         "@npm//:node_modules/@material/dialog/_variables.scss",
         "@npm//:node_modules/@material/drawer/_mixins.scss",
         "@npm//:node_modules/@material/drawer/_variables.scss",
+        "@npm//:node_modules/@material/elevation/_functions.scss",
         "@npm//:node_modules/@material/elevation/_mixins.scss",
         "@npm//:node_modules/@material/elevation/_variables.scss",
         "@npm//:node_modules/@material/fab/_mixins.scss",
@@ -108,6 +109,7 @@ sass_library(
         "@npm//:node_modules/@material/tab-bar/_variables.scss",
         "@npm//:node_modules/@material/tab-indicator/_mixins.scss",
         "@npm//:node_modules/@material/tab-scroller/_mixins.scss",
+        "@npm//:node_modules/@material/tab-scroller/_variables.scss",
         "@npm//:node_modules/@material/tab/_mixins.scss",
         "@npm//:node_modules/@material/tab/_variables.scss",
         "@npm//:node_modules/@material/textfield/_functions.scss",

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -86,7 +86,10 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
     removeClass: (className: string) => this._rootElement.classList.remove(className),
     setStyle: (el: HTMLElement, styleProperty: string, value: string) => {
       (el.style as any)[styleProperty] = value;
-    }
+    },
+    removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
+    setAttribute: (name: string, value: string) =>
+        this._elementRef.nativeElement.setAttribute(name, value),
   };
 
   /** Flag that indicates whether NoopAnimations mode is set to true. */