chore: Update MDC to latest alpha (#16772)

* Revert "Revert "Update MDC to latest alpha (#16724)" (#16770)"

This reverts commit cc8f37f.

* minor tweak to mdc chips adapter for latest upstream update to unbreak pantheon

angular already manages focus fully and this hook does negligible good and a lot of harm (e.g., focusing thigns that were never meant to be focused). long term we probably want to consolidate the code, but for now just keep it unbroken.

squash this commit into the main PR

Author: mmalerba

package.json

@@ -37,7 +37,7 @@
   },
   "version": "8.1.3",
   "requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
-  "requiredMDCVersion": "^3.0.0",
+  "requiredMDCVersion": "^4.0.0-alpha.0",
   "dependencies": {
     "@angular/animations": "^8.2.2",
     "@angular/common": "^8.2.2",
@@ -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.5.2",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",

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,41 @@ 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: () => {
+      // Angular Material MDC chips fully manage focus. TODO: Managing focus and handling keyboard
+      // events was added by MDC after our implementation; consider consolidating.
+    },
+    focusTrailingAction: () => {},
+    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 +292,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",