refactor(material-experimental/mdc-chips): implement trailing icon foundation

The new foundation isn't being used yet, but these changes implement it so it's easier to roll out in the future.

Author: crisbeto

package.json

@@ -56,7 +56,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "6.0.0-canary.d5808057f.0",
+    "material-components-web": "6.0.0-canary.35a32aaea.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

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

@@ -11,6 +11,7 @@ import {
   ChangeDetectorRef,
   Directive,
   ElementRef,
+  OnDestroy,
 } from '@angular/core';
 import {
   CanDisable,
@@ -20,6 +21,7 @@ import {
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material/core';
+import {MDCChipTrailingActionAdapter, MDCChipTrailingActionFoundation} from '@material/chips';
 import {Subject} from 'rxjs';
 
 
@@ -57,8 +59,40 @@ export class MatChipAvatar {
     'aria-hidden': 'true',
   }
 })
-export class MatChipTrailingIcon {
-  constructor(public _elementRef: ElementRef) {}
+export class MatChipTrailingIcon implements OnDestroy {
+  private _foundation: MDCChipTrailingActionFoundation;
+  private _adapter: MDCChipTrailingActionAdapter = {
+    focus: () => this._elementRef.nativeElement.focus(),
+    getAttribute: (name: string) => this._elementRef.nativeElement.getAttribute(name),
+    setAttribute: (name: string, value: string) => {
+      this._elementRef.nativeElement.setAttribute(name, value);
+    },
+    // TODO(crisbeto): this also a `trigger` parameter that the chip isn't
+    // handling yet. Consider passing it along once MDC start using it.
+    notifyInteraction: () => {
+      // this._chip._notifyInteraction();
+    },
+
+    // TODO(crisbeto): this also a `key` parameter that the chip isn't
+    // handling yet. Consider passing it along once MDC start using it.
+    notifyNavigation: () => {
+      // this._chip._notifyNavigation();
+    }
+  };
+
+  constructor(
+    public _elementRef: ElementRef,
+    // TODO(crisbeto): currently the chip needs a reference to the trailing icon for the deprecated
+    // `setTrailingActionAttr` method. Until the method is removed, we can't use the chip here,
+    // because it causes a circular import.
+    // private _chip: MatChip
+  ) {
+    this._foundation = new MDCChipTrailingActionFoundation(this._adapter);
+  }
+
+  ngOnDestroy() {
+    this._foundation.destroy();
+  }
 
   focus() {
     this._elementRef.nativeElement.focus();
@@ -75,8 +109,8 @@ export class MatChipTrailingIcon {
  * @docs-private
  */
 class MatChipRemoveBase extends MatChipTrailingIcon {
-  constructor(_elementRef: ElementRef) {
-    super(_elementRef);
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
   }
 }
 

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

@@ -250,15 +250,12 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       return (target && (target as Element).classList) ?
           (target as Element).classList.contains(className) : false;
     },
-    notifyInteraction: () => this.interaction.emit(this.id),
+    notifyInteraction: () => this._notifyInteraction(),
     notifySelection: () => {
       // 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.
-    },
+    notifyNavigation: () => this._notifyNavigation(),
     notifyTrailingIconInteraction: () => this.removeIconInteraction.emit(this.id),
     notifyRemoval: () => {
       this.removed.emit({ chip: this });
@@ -408,6 +405,14 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     return this.disabled || this.disableRipple || this._isBasicChip();
   }
 
+  _notifyInteraction() {
+    this.interaction.emit(this.id);
+  }
+
+  _notifyNavigation() {
+    // TODO: This is a new feature added by MDC. Consider exposing it to users in the future.
+  }
+
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_removable: BooleanInput;
   static ngAcceptInputType_highlighted: BooleanInput;