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

This reverts commit 8942602.

(cherry picked from commit cc8f37f)

Author: mmalerba

package.json

@@ -37,7 +37,7 @@
   },
   "version": "8.1.2",
   "requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
-  "requiredMDCVersion": "^4.0.0-alpha.0",
+  "requiredMDCVersion": "^3.0.0",
   "dependencies": {
     "@angular/animations": "^8.2.2",
     "@angular/common": "^8.2.2",
@@ -48,7 +48,7 @@
     "@angular/platform-browser": "^8.2.2",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",
-    "material-components-web": "^4.0.0-alpha.0",
+    "material-components-web": "^3.0.0",
     "rxjs": "^6.4.0",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",

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

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

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

@@ -35,11 +35,12 @@ import {Subject} from 'rxjs';
 })
 export class MatChipAvatar {
   constructor(private _changeDetectorRef: ChangeDetectorRef,
-              private _elementRef: ElementRef<HTMLElement>) {}
+              private _elementRef: ElementRef) {}
 
   /** Sets whether the given CSS class should be applied to the leading icon. */
   setClass(cssClass: string, active: boolean) {
-    this._elementRef.nativeElement.classList.toggle(cssClass, active);
+    const element = this._elementRef.nativeElement;
+    active ? element.addClass(cssClass) : element.removeClass(cssClass);
     this._changeDetectorRef.markForCheck();
   }
 }
@@ -57,25 +58,15 @@ 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(_elementRef: ElementRef) {
-    super(_elementRef);
+  constructor(public _elementRef: ElementRef) {
+    super();
   }
 }
 

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 {END, HOME} from '@angular/cdk/keycodes';
+import {HOME, END} 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 {MDCChipSetFoundation} from '@material/chips';
+import {MDCChipSetAdapter, MDCChipSetFoundation} from '@material/chips';
 import {merge, Observable, Subscription} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {MatChip, MatChipEvent} from './chip';
@@ -96,6 +96,22 @@ 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>;
 
@@ -207,11 +223,8 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
 
   constructor(protected _elementRef: ElementRef,
               _changeDetectorRef: ChangeDetectorRef,
-              @Optional() _dir: Directionality) {
-    super(_elementRef, _changeDetectorRef, _dir);
-    this._chipSetAdapter.selectChipAtIndex = (index: number, selected: boolean) => {
-      this._setSelected(index, selected);
-    };
+              @Optional() private _dir: Directionality) {
+    super(_elementRef, _changeDetectorRef);
     // Reinitialize the foundation with our overridden adapter
     this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
     this._updateMdcSelectionClasses();
@@ -306,8 +319,8 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
   }
 
   /** Selects or deselects a chip by id. */
-  _setSelected(index: number, selected: boolean) {
-    const chip = this._chips.toArray()[index];
+  _setSelected(chipId: string, selected: boolean) {
+    const chip = this._chips.find(c => c.id === chipId);
     if (chip && chip.selected != selected) {
       chip.toggleSelected(true);
     }
@@ -455,7 +468,7 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
 
   /** Initializes the key manager to manage focus. */
   private _initKeyManager() {
-    this._keyManager = new FocusKeyManager<MatChip>(this._chips)
+    this._keyManager = new FocusKeyManager<MatChipOption>(this._chips)
       .withWrap()
       .withVerticalOrientation()
       .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
@@ -530,7 +543,7 @@ export class MatChipListbox extends MatChipSet implements AfterContentInit, Cont
     this._chipSelectionSubscription = this.chipSelectionChanges.subscribe(
       (chipSelectionChange: MatChipSelectionChange) => {
         this._chipSetFoundation.handleChipSelection(
-          chipSelectionChange.source.id, chipSelectionChange.selected, false);
+          chipSelectionChange.source.id, chipSelectionChange.selected);
         if (chipSelectionChange.isUserInput) {
           this._propagateChanges();
         }

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

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterContentInit,
@@ -18,15 +17,18 @@ 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 {MatChip, MatChipEvent} from './chip';
+import {
+  HasTabIndex,
+  HasTabIndexCtor,
+  mixinTabIndex,
+} from '@angular/material/core';
 
 
 let uid = 0;
@@ -95,15 +97,9 @@ 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.
-    removeChipAtIndex: () => {},
+    removeChip: () => {},
     // No-op for base chip set. MatChipListbox overrides the adapter to provide this method.
-    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,
+    setSelected: () => {}
   };
 
   /** The aria-describedby attribute on the chip list for improved a11y. */
@@ -155,8 +151,7 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit
   @ContentChildren(MatChip) _chips: QueryList<MatChip>;
 
   constructor(protected _elementRef: ElementRef,
-              protected _changeDetectorRef: ChangeDetectorRef,
-              @Optional() protected _dir: Directionality) {
+              protected _changeDetectorRef: ChangeDetectorRef) {
     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 mdc-chip__action--primary"><ng-content></ng-content></div>
+<div class="mdc-chip__text"><ng-content></ng-content></div>
 <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>

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

@@ -6,7 +6,6 @@
  * 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';
@@ -248,38 +247,28 @@ 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 =>
-        window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName),
+    getComputedStyleValue: (propertyName) => {
+      return window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName);
+    },
     setStyleProperty: (propertyName: string, value: string) => {
       this._elementRef.nativeElement.style.setProperty(propertyName, value);
     },
-    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) => {
+    hasLeadingIcon: () => { return !!this.leadingIcon; },
+    setAttr: (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.
-      // Since we also manage the tabindex ourselves, we don't allow MDC to set it.
-      if (name === 'aria-checked' || name === 'tabindex') {
+      if (name === 'aria-checked') {
         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: () => null,
+    getCheckmarkBoundingClientRect: () => { return null; },
  };
 
  constructor(
@@ -289,7 +278,6 @@ 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,8 +118,6 @@ 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",