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,8 @@ import {
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material/core';
+import {MDCChipTrailingActionAdapter, MDCChipTrailingActionFoundation} from '@material/chips';
+import {MatChip} from './chip';
 import {Subject} from 'rxjs';
 
 
@@ -57,8 +60,36 @@ 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, private _chip: MatChip) {
+    this._foundation = new MDCChipTrailingActionFoundation(this._adapter);
+
+    // TODO(crisbeto): for the time being we need to assign the trailing icon like this in order
+    // to avoid circular references, because the chip foundation still depends on it for the
+    // `setTrailingActionAttr` method. Once that method is removed in favor of the trailing
+    // action foundation, we can remove this call.
+    _chip.trailingIcon = this;
+  }
+
+  ngOnDestroy() {
+    this._foundation.destroy();
+  }
 
   focus() {
     this._elementRef.nativeElement.focus();
@@ -75,8 +106,8 @@ export class MatChipTrailingIcon {
  * @docs-private
  */
 class MatChipRemoveBase extends MatChipTrailingIcon {
-  constructor(_elementRef: ElementRef) {
-    super(_elementRef);
+  constructor(elementRef: ElementRef, chip: MatChip) {
+    super(elementRef, chip);
   }
 }
 
@@ -123,8 +154,8 @@ export class MatChipRemove extends _MatChipRemoveMixinBase implements CanDisable
    */
   interaction: Subject<MouseEvent | KeyboardEvent> = new Subject<MouseEvent | KeyboardEvent>();
 
-  constructor(elementRef: ElementRef) {
-    super(elementRef);
+  constructor(elementRef: ElementRef, chip: MatChip) {
+    super(elementRef, chip);
 
     if (elementRef.nativeElement.nodeName === 'BUTTON') {
       elementRef.nativeElement.setAttribute('type', 'button');

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

@@ -226,7 +226,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   @ContentChild(MatChipAvatar) leadingIcon: MatChipAvatar;
 
   /** The chip's trailing icon. */
-  @ContentChild(MatChipTrailingIcon) trailingIcon: MatChipTrailingIcon;
+  trailingIcon: MatChipTrailingIcon;
 
   /** The chip's trailing remove icon. */
   @ContentChild(MatChipRemove) removeIcon: MatChipRemove;
@@ -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;