Update MDC to latest alpha (#16724)

* update MDC version

* fix errors

* fix lint

Author: mmalerba

package.json

@@ -37,7 +37,7 @@
   },
   "version": "8.1.2",
   "requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
-  "requiredMDCVersion": "^3.0.0",
+  "requiredMDCVersion": "^4.0.0-alpha.0",
   "dependencies": {
     "@angular/animations": "^8.1.0",
     "@angular/common": "^8.1.0",
@@ -50,7 +50,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",
-    "material-components-web": "^3.0.0",
+    "material-components-web": "^4.0.0-alpha.0",
     "rxjs": "^6.4.0",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",
@@ -67,8 +67,8 @@
     "@angular/router": "^8.1.0",
     "@angular/upgrade": "^8.1.0",
     "@bazel/bazel": "^0.27.0",
-    "@bazel/hide-bazel-files": "0.32.2",
     "@bazel/buildifier": "^0.25.1",
+    "@bazel/hide-bazel-files": "0.32.2",
     "@bazel/ibazel": "^0.10.3",
     "@bazel/jasmine": "0.32.2",
     "@bazel/karma": "0.32.2",

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

@@ -60,12 +60,13 @@ export class MatChipGridChange {
 class MatChipGridBase extends MatChipSet {
   constructor(_elementRef: ElementRef,
               _changeDetectorRef: ChangeDetectorRef,
+              _dir: Directionality,
               public _defaultErrorStateMatcher: ErrorStateMatcher,
               public _parentForm: NgForm,
               public _parentFormGroup: FormGroupDirective,
               /** @docs-private */
               public ngControl: NgControl) {
-    super(_elementRef, _changeDetectorRef);
+    super(_elementRef, _changeDetectorRef, _dir);
   }
 }
 const _MatChipGridMixinBase: CanUpdateErrorStateCtor & typeof MatChipGridBase =
@@ -237,14 +238,14 @@ export class MatChipGrid extends _MatChipGridMixinBase implements AfterContentIn
 
   constructor(_elementRef: ElementRef,
               _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Directionality,
+              @Optional() _dir: Directionality,
               @Optional() _parentForm: NgForm,
               @Optional() _parentFormGroup: FormGroupDirective,
               _defaultErrorStateMatcher: ErrorStateMatcher,
               /** @docs-private */
               @Optional() @Self() public ngControl: NgControl) {
-    super(_elementRef, _changeDetectorRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup,
-      ngControl);
+    super(_elementRef, _changeDetectorRef, _dir, _defaultErrorStateMatcher, _parentForm,
+        _parentFormGroup, ngControl);
     if (this.ngControl) {
       this.ngControl.valueAccessor = this;
     }

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

@@ -35,12 +35,11 @@ import {Subject} from 'rxjs';
 })
 export class MatChipAvatar {
   constructor(private _changeDetectorRef: ChangeDetectorRef,
-              private _elementRef: ElementRef) {}
+              private _elementRef: ElementRef<HTMLElement>) {}
 
   /** Sets whether the given CSS class should be applied to the leading icon. */
   setClass(cssClass: string, active: boolean) {
-    const element = this._elementRef.nativeElement;
-    active ? element.addClass(cssClass) : element.removeClass(cssClass);
+    this._elementRef.nativeElement.classList.toggle(cssClass, active);
     this._changeDetectorRef.markForCheck();
   }
 }
@@ -58,15 +57,25 @@ export class MatChipAvatar {
   }
 })
 export class MatChipTrailingIcon {
+  constructor(public _elementRef: ElementRef) {}
+
+  focus() {
+    this._elementRef.nativeElement.focus();
+  }
+
+  /** Sets an attribute on the icon. */
+  setAttribute(name: string, value: string) {
+    this._elementRef.nativeElement.setAttribute(name, value);
+  }
 }
 
 /**
  * Boilerplate for applying mixins to MatChipRemove.
  * @docs-private
  */
 class MatChipRemoveBase extends MatChipTrailingIcon {
-  constructor(public _elementRef: ElementRef) {
-    super();
+  constructor(_elementRef: ElementRef) {
+    super(_elementRef);
   }
 }
 

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

@@ -9,7 +9,7 @@
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {HOME, END} from '@angular/cdk/keycodes';
+import {END, HOME} from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -26,7 +26,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MDCChipSetAdapter, MDCChipSetFoundation} from '@material/chips';
+import {MDCChipSetFoundation} from '@material/chips';
 import {merge, Observable, Subscription} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';
@@ -96,22 +96,6 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
   /** Subscription to focus changes in the chips. */
   private _chipFocusSubscription: Subscription | null;
 
-  /**
-   * Implementation of the MDC chip-set adapter interface.
-   * These methods are called by the chip set foundation.
-   *
-   * Overrides the base MatChipSet adapter to provide a setSelected method.
-   */
-  protected _chipSetAdapter: MDCChipSetAdapter = {
-    hasClass: (className: string) => this._hasMdcClass(className),
-    // No-op. We keep track of chips via ContentChildren, which will be updated when a chip is
-    // removed.
-    removeChip: () => {},
-    setSelected: (chipId: string, selected: boolean) => {
-      this._setSelected(chipId, selected);
-    }
-  };
-
   /** The FocusKeyManager which handles focus. */
   _keyManager: FocusKeyManager<MatChip>;
 
@@ -223,8 +207,11 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
 
   constructor(protected _elementRef: ElementRef,
               _changeDetectorRef: ChangeDetectorRef,
-              @Optional() private _dir: Directionality) {
-    super(_elementRef, _changeDetectorRef);
+              @Optional() _dir: Directionality) {
+    super(_elementRef, _changeDetectorRef, _dir);
+    this._chipSetAdapter.selectChipAtIndex = (index: number, selected: boolean) => {
+      this._setSelected(index, selected);
+    };
     // Reinitialize the foundation with our overridden adapter
     this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
     this._updateMdcSelectionClasses();
@@ -319,8 +306,8 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
   }
 
   /** Selects or deselects a chip by id. */
-  _setSelected(chipId: string, selected: boolean) {
-    const chip = this._chips.find(c => c.id === chipId);
+  _setSelected(index: number, selected: boolean) {
+    const chip = this._chips.toArray()[index];
     if (chip && chip.selected != selected) {
       chip.toggleSelected(true);
     }
@@ -468,7 +455,7 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
 
   /** Initializes the key manager to manage focus. */
   private _initKeyManager() {
-    this._keyManager = new FocusKeyManager<MatChipOption>(this._chips)
+    this._keyManager = new FocusKeyManager<MatChip>(this._chips)
       .withWrap()
       .withVerticalOrientation()
       .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
@@ -543,7 +530,7 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
     this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(
       (chipSelectionChange: MatChipSelectionChange) => {
         this._chipSetFoundation.handleChipSelection(
-          chipSelectionChange.source.id, chipSelectionChange.selected);
+          chipSelectionChange.source.id, chipSelectionChange.selected, false);
         if (chipSelectionChange.isUserInput) {
           this._propagateChanges();
         }

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
@@ -17,18 +18,15 @@ import {
   ElementRef,
   Input,
   OnDestroy,
+  Optional,
   QueryList,
   ViewEncapsulation
 } from '@angular/core';
+import {HasTabIndex, HasTabIndexCtor, mixinTabIndex} from '@angular/material/core';
 import {MDCChipSetAdapter, MDCChipSetFoundation} from '@material/chips';
-import {MatChip, MatChipEvent} from './chip';
 import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
-import {
-  HasTabIndex,
-  HasTabIndexCtor,
-  mixinTabIndex,
-} from '@angular/material/core';
+import {MatChip, MatChipEvent} from './chip';
 
 
 let uid = 0;
@@ -97,9 +95,15 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
     hasClass: (className) => this._hasMdcClass(className),
     // No-op. We keep track of chips via ContentChildren, which will be updated when a chip is
     // removed.
-    removeChip: () => {},
+    removeChipAtIndex: () => {},
     // No-op for base chip set. MatChipListbox overrides the adapter to provide this method.
-    setSelected: () => {}
+    selectChipAtIndex: () => {},
+    getIndexOfChipById: (id: string) => this._chips.toArray().findIndex(chip => chip.id === id),
+    focusChipPrimaryActionAtIndex: () => {},
+    focusChipTrailingActionAtIndex: () => {},
+    removeFocusFromChipAtIndex: () => {},
+    isRTL: () => !!this._dir && this._dir.value === 'rtl',
+    getChipListCount: () => this._chips.length,
   };
 
   /** The aria-describedby attribute on the chip list for improved a11y. */
@@ -151,7 +155,8 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   @ContentChildren(MatChip) _chips: QueryList<MatChip>;
 
   constructor(protected _elementRef: ElementRef,
-              protected _changeDetectorRef: ChangeDetectorRef) {
+              protected _changeDetectorRef: ChangeDetectorRef,
+              @Optional() protected _dir: Directionality) {
     super(_elementRef);
     this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
   }

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

@@ -1,3 +1,3 @@
 <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-<div class="mdc-chip__text"><ng-content></ng-content></div>
+<div class="mdc-chip__text mdc-chip__action--primary"><ng-content></ng-content></div>
 <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -247,28 +248,38 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       // No-op. We call dispatchSelectionEvent ourselves in MatChipOption, because we want to
       // specify whether selection occurred via user input.
     },
+    notifyNavigation: () => {
+      // TODO: This is a new feature added by MDC, consider exposing this event to users in the
+      //  future.
+    },
     notifyTrailingIconInteraction: () => this.removeIconInteraction.emit(this.id),
     notifyRemoval: () => this.removed.emit({chip: this}),
-    getComputedStyleValue: (propertyName) => {
-      return window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName);
-    },
+    getComputedStyleValue: propertyName =>
+        window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName),
     setStyleProperty: (propertyName: string, value: string) => {
       this._elementRef.nativeElement.style.setProperty(propertyName, value);
     },
-    hasLeadingIcon: () => { return !!this.leadingIcon; },
-    setAttr: (name: string, value: string) => {
+    hasLeadingIcon: () => !!this.leadingIcon,
+    hasTrailingAction: () => !!this.trailingIcon,
+    isRTL: () => !!this._dir && this._dir.value === 'rtl',
+    focusPrimaryAction: () => this._elementRef.nativeElement.focus(),
+    focusTrailingAction: () => this.trailingIcon && this.trailingIcon.focus(),
+    setTrailingActionAttr: (attr, value) =>
+        this.trailingIcon && this.trailingIcon.setAttribute(attr, value),
+    setPrimaryActionAttr: (name: string, value: string) => {
       // MDC is currently using this method to set aria-checked on choice and filter chips,
       // which in the MDC templates have role="checkbox" and role="radio" respectively.
       // We have role="option" on those chips instead, so we do not want aria-checked.
-      if (name === 'aria-checked') {
+      // Since we also manage the tabindex ourselves, we don't allow MDC to set it.
+      if (name === 'aria-checked' || name === 'tabindex') {
         return;
       }
       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(),
-    getCheckmarkBoundingClientRect: () => { return null; },
+    getCheckmarkBoundingClientRect: () => null,
  };
 
  constructor(
@@ -278,6 +289,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     protected _ngZone: NgZone,
     @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
     private _globalRippleOptions: RippleGlobalOptions | null,
+    @Optional() private _dir: Directionality,
     // @breaking-change 8.0.0 `animationMode` parameter to become required.
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(_elementRef);

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

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