Add MDC adapters and verify foundation and adapters communicating

Author: vanessanschmitt

src/dev-app/mdc-chips/mdc-chips-demo-module.ts

@@ -7,13 +7,17 @@
  */
 
 import {NgModule} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {RouterModule} from '@angular/router';
 import {MdcChipsDemo} from './mdc-chips-demo';
 
 @NgModule({
   imports: [
+    MatCardModule,
     MatChipsModule,
+    MatToolbarModule,
     RouterModule.forChild([{path: '', component: MdcChipsDemo}]),
   ],
   declarations: [MdcChipsDemo],

src/dev-app/mdc-chips/mdc-chips-demo.html

@@ -1,2 +1,25 @@
-<!-- TODO: copy in demo template from existing mat-chip demo. -->
-<mat-chip-grid></mat-chip-grid>
+<div class="demo-chips">
+  <mat-card>
+    <mat-toolbar color="primary">Static Chips</mat-toolbar>
+
+    <mat-card-content>
+      <h4>Simple</h4>
+
+      <mat-chip-grid>
+        <mat-chip-cell>Chip 1</mat-chip-cell>
+        <mat-chip-cell>Chip 2</mat-chip-cell>
+        <mat-chip-cell disabled>Chip 3</mat-chip-cell>
+      </mat-chip-grid>
+
+      <h4>With avatar and icons</h4>
+
+      <mat-chip-grid>
+        <mat-chip-cell disabled>
+          <i matChipAvatar class="material-icons">home</i>
+          Home
+          <i matChipTrailingIcon class="material-icons">cancel</i>
+        </mat-chip-cell>
+      </mat-chip-grid>
+    </mat-card-content>
+  </mat-card>
+</div>

src/dev-app/mdc-chips/mdc-chips-demo.scss

@@ -1 +1,31 @@
-// TODO: copy in demo styles from existing mat-chips demo.
+.demo-chips {
+  .mat-chip-list-stacked {
+    display: block;
+    max-width: 200px;
+  }
+
+  .mat-card {
+    padding: 0;
+    margin: 16px;
+
+    & .mat-toolbar {
+      margin: 0;
+    }
+
+    & .mat-card-content {
+      padding: 24px;
+    }
+  }
+
+  .mat-basic-chip {
+    margin: auto 10px;
+  }
+
+  mat-chip-list input {
+    width: 150px;
+  }
+}
+
+.demo-has-chip-list {
+  width: 100%;
+}

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

@@ -0,0 +1,4 @@
+<div class="mdc-chip" [ngClass]="_classes" tabindex="0">
+  <div class="mdc-chip__text"><ng-content></ng-content></div>
+</div>
+

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

@@ -6,31 +6,184 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
-import {MDCChipFoundation} from '@material/chips';
+import {AfterContentInit, AfterViewInit, Component, ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {MDCChipAdapter, MDCChipFoundation} from '@material/chips';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+let uid = 0;
+
+/**
+ * Dummy directive to add CSS class to chip leading icon.
+ * @docs-private
+ */
+@Directive({
+  selector: 'mat-chip-avatar, [matChipAvatar]',
+  host: {
+    'class': 'mat-chip-avatar mdc-chip__icon mdc-chip__icon--leading',
+  }
+})
+export class MatChipAvatar {
+  _classes: {[key: string]: boolean} = {};
+
+  /** 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._changeDetectorRef.markForCheck();
+  }
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef,
+              private _elementRef: ElementRef) {}
+}
+
+/**
+ * Dummy directive to add CSS class to chip trailing icon.
+ * @docs-private
+ */
+@Directive({
+  selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
+  host: {
+    'class': 'mat-chip-trailing-icon mdc-chip__icon mdc-chip__icon--trailing',
+    'tabindex': '0',
+    'role': 'button',
+    '(click)': 'interaction.emit($event)',
+    '(keydown)': 'interaction.emit($event)',
+  }
+})
+export class MatChipTrailingIcon {
+  @Output() interaction = new EventEmitter<MouseEvent | KeyboardEvent>();
+}
 
 @Component({
   selector: 'mat-chip-cell',
   templateUrl: 'chip-cell.html',
   styleUrls: ['chips.css'],
   host: {
     'class': 'mat-mdc-chip-cell',
+    '[id]': 'id',
     '(click)': '_chipFoundation.handleInteraction($event)',
-    '(keydown)': '_chipFoundation.handleInteraction($event)'
+    '(keydown)': '_chipFoundation.handleInteraction($event)',
+    '(transitionend)': '_chipFoundation.handleTransitionEnd($event)'
   },
 })
-export class MatChipCell {
+export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
+  private _uniqueId = `mat-mdc-chip-${uid++}`;
+
+  /** A unique id for the chip. If none is supplied, it will be auto-generated. */
+  @Input() id: string = this._uniqueId;
+
+  /**
+   * EventEmitters used to notify the parent chip-set of an event on the chip.
+   */
+  @Output() removal = new EventEmitter<string>();
+  @Output() trailingIconInteraction = new EventEmitter<string>();
+  @Output() interaction = new EventEmitter<string>();
+  @Output() selection = new EventEmitter<{id: string, selected: boolean}>();
+
+  /** Whether the chip is selected. */
+  get selected(): boolean {
+    return this._chipFoundation.isSelected();
+  }
+
+  /** Sets selected state on the chip. */
+  set selected(selected: boolean) {
+    this._chipFoundation.setSelected(selected);
+  }
+
+  /** Whether a trailing icon click should trigger exit/removal of the chip. */
+  get shouldRemoveOnTrailingIconClick(): boolean {
+    return this._chipFoundation.getShouldRemoveOnTrailingIconClick();
+  }
+
+  /** Sets whether a trailing icon click should trigger exit/removal of the chip. */
+  set shouldRemoveOnTrailingIconClick(shouldRemove: boolean) {
+    this._chipFoundation.setShouldRemoveOnTrailingIconClick(shouldRemove);
+  }
+
+  /** The MDC foundation containing business logic for MDC chip. */
   _chipFoundation: MDCChipFoundation;
 
-  constructor() {
-    this._chipFoundation = new MDCChipFoundation();
+  /**
+   * Map from class to whether the class is enabled.
+   * Enabled classes are set on the chip element.
+   */
+  _classes: {[key: string]: boolean} = {};
+
+  /** Subject that emits when the component has been destroyed. */
+  private _destroyed = new Subject<void>();
+
+  /** The chip's leading icon. */
+  @ContentChild(MatChipAvatar, {static: false}) leadingIcon: MatChipAvatar;
+
+  /** The chip's trailing icon. */
+  @ContentChild(MatChipTrailingIcon, {static: false}) trailingIcon: MatChipTrailingIcon;
+
+  /**
+   * Implementation of the MDC chip adapter interface.
+   * These methods are called by the chip foundation.
+   */
+  private _chipAdapter: MDCChipAdapter = {
+    addClass: (className) => this._setClass(className, true),
+    removeClass: (className) => this._setClass(className, false),
+    hasClass: (className) => className in this._classes,
+    addClassToLeadingIcon: (className) => this.leadingIcon.setClass(className, true),
+    removeClassFromLeadingIcon: (className) => this.leadingIcon.setClass(className, false),
+    eventTargetHasClass: (target: EventTarget | null, className: string) => {
+      return target ? (target as Element).classList.contains(className) : false;
+    },
+    notifyInteraction: () => this.interaction.emit(this.id),
+    notifySelection: () => this.selection.emit({id: this.id, selected: this.selected}),
+    notifyTrailingIconInteraction: () => this.trailingIconInteraction.emit(this.id),
+    notifyRemoval: () => this.removal.emit(this.id),
+    getComputedStyleValue: (propertyName) => {
+      return window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName);
+    },
+    setStyleProperty: (propertyName: string, value: string) => {
+      this._elementRef.nativeElement.style.setProperty(propertyName, value);
+    },
+    hasLeadingIcon: () => {return !!this.leadingIcon},
+    getRootBoundingClientRect: () => this._elementRef.nativeElement.getBoundingClientRect(),
+    getCheckmarkBoundingClientRect: () => {return null},
+ };
+
+ constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _elementRef: ElementRef) {
+    this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
+  }
+
+  ngAfterContentInit() {
+    if (this.trailingIcon) {
+      this.trailingIcon.interaction
+        .pipe(takeUntil(this._destroyed))
+        .subscribe((event) => this._chipFoundation.handleTrailingIconInteraction(event));
+    }
   }
 
   ngAfterViewInit() {
     this._chipFoundation.init();
   }
 
   ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
     this._chipFoundation.destroy();
   }
+
+  /**
+   * Begins the exit animation which leads to removal of the chip.
+   * If shouldRemoveOnTrailingIconClick is set to false, you must manually call
+   * this method to remove the chip.
+   */
+  beginExit() {
+    this._chipFoundation.beginExit();
+  }
+
+  /** Sets whether the given CSS class should be applied to the chip. */
+  private _setClass(cssClass: string, active: boolean) {
+    this._classes[cssClass] = active;
+    this._changeDetectorRef.markForCheck();
+  }
 }
+

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

@@ -1,9 +1,4 @@
-<div class="mdc-chip-set">
-  <div class="mdc-chip" tabindex="0">
-    <div class="mdc-chip__text">Chip 1</div>
-  </div>
-  <div class="mdc-chip" tabindex="0">
-    <div class="mdc-chip__text">Chip 2</div>
-  </div>
+<div #chipSetWrapper class="mdc-chip-set">
+  <ng-content></ng-content>
 </div>
 

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

@@ -6,8 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, ViewEncapsulation} from '@angular/core';
-import {MDCChipSetFoundation} from '@material/chips';
+import {AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, OnDestroy, QueryList, ViewChild, ViewEncapsulation} from '@angular/core';
+import {MDCChipSetAdapter, MDCChipSetFoundation} from '@material/chips';
+import {MatChipCell} from './chip-cell';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 @Component({
   moduleId: module.id,
@@ -20,18 +23,83 @@ import {MDCChipSetFoundation} from '@material/chips';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatChipGrid implements AfterViewInit, OnDestroy {
-  _chipSetFoundation: MDCChipSetFoundation;
+export class MatChipGrid implements AfterContentInit, AfterViewInit, OnDestroy {
+  /** Returns all chips in the set. */
+  get chips(): ReadonlyArray<MatChipCell> {
+    return this._chips.toArray();
+  }
+
+  /** Returns the ids of all selected chips. */
+  get selectedChipIds(): ReadonlyArray<string> {
+    return this._chipSetFoundation.getSelectedChipIds();
+  }
+
+  /** The chips that are part of this chip set.*/
+  @ContentChildren(MatChipCell) _chips: QueryList<MatChipCell>;
+
+  /** The wrapper div around the chips. */
+  @ViewChild('chipSetWrapper') _wrapper!: ElementRef;
+
+  /** The MDC foundation containing business logic for MDC chip-set. */
+  private _chipSetFoundation: MDCChipSetFoundation;
+
+  /** Subject that emits when the component has been destroyed. */
+  private _destroyed = new Subject<void>();
 
-  constructor() {
-    this._chipSetFoundation = new MDCChipSetFoundation();
+  /**
+   * Implementation of the MDC chip-set adapter interface.
+   * These methods are called by the chip set foundation.
+   */
+  private _chipSetAdapter: MDCChipSetAdapter = {
+    hasClass: (className) => this._elementRef.nativeElement.classList.contains(className),
+    removeChip: (chipId) => {
+      const chip = document.getElementById(chipId);
+      this._wrapper.nativeElement.removeChild(chip);
+    },
+    setSelected: (chipId, selected) => {
+      const chip = this._chips.find(c => c.id === chipId);
+      if (chip) chip.selected = selected;
+    },
+  }
+
+  constructor(private _elementRef: ElementRef) {
+    this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
   }
 
   ngAfterViewInit() {
     this._chipSetFoundation.init();
   }
 
+  // TODO sync chips when content changes
+  ngAfterContentInit() {
+    this._chips.forEach(chip => {
+      if (chip.selected) {
+        this._chipSetFoundation.select(chip.id);
+      }
+
+      chip.removal
+        .pipe(takeUntil(this._destroyed))
+        .subscribe((id: string) => {
+          this._chipSetFoundation.handleChipRemoval(id);
+        });
+
+      chip.interaction
+        .pipe(takeUntil(this._destroyed))
+        .subscribe((id: string) => {
+          this._chipSetFoundation.handleChipInteraction(id);
+        });
+
+      chip.selection
+        .pipe(takeUntil(this._destroyed))
+        .subscribe((event: {id: string, selected: boolean}) => {
+          this._chipSetFoundation.handleChipSelection(event.id, event.selected);
+        });
+    });
+  }
+
   ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
     this._chipSetFoundation.destroy();
   }
 }