add disabled/selected styles and events demo

Author: vanessanschmitt

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {MatToolbarModule} from '@angular/material/toolbar';
@@ -16,6 +17,7 @@ import {MdcChipsDemo} from './mdc-chips-demo';
 
 @NgModule({
   imports: [
+    CommonModule,
     MatCardModule,
     MatChipsModule,
     MatIconModule,

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

@@ -23,7 +23,14 @@ <h4>Advanced</h4>
 
       <mat-chip-grid selectable="false">
         <mat-chip-cell color="accent" selected="true">Selected/Colored</mat-chip-cell>
+
+        <mat-chip-cell color="warn" selected="true" *ngIf="visible"
+                       (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
+          With Events
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip-cell>
       </mat-chip-grid>
+      <div>{{message}}</div>
 
       <h4>With avatar and icons</h4>
 

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

@@ -15,4 +15,14 @@ import {Component} from '@angular/core';
   styleUrls: ['mdc-chips-demo.css'],
 })
 export class MdcChipsDemo {
+  visible = true;
+  message = '';
+
+  displayMessage(message: string): void {
+    this.message = message;
+  }
+
+  toggleVisible(): void {
+    this.visible = false;
+  }
 }

src/material-experimental/mdc-chips/_mdc-chips.scss

@@ -11,8 +11,22 @@
     $primary: mat-color(map-get($theme, primary));
     $accent: mat-color(map-get($theme, accent));
     $warn: mat-color(map-get($theme, warn));
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    $unselected-background: mat-color($background, unselected-chip);
+    $unselected-foreground: mat-color($foreground, text);
+
+
+    &.mat-chip-disabled {
+      opacity: 0.4;
+    }
 
     &.mat-mdc-chip-cell {
+      .mdc-chip {
+        @include mdc-chip-fill-color-accessible($unselected-background);
+      }
+
       .mat-primary {
 	@include mdc-chip-fill-color-accessible($primary);
       }

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

@@ -4,6 +4,9 @@
   [class.mat-accent] = "color === 'accent'"
   [class.mat-warn] = "color === 'warn'"
   [ngClass]="_classes"
+  (click)='_handleInteraction($event)'
+  (keydown)='_handleInteraction($event)'
+  (transitionend)='_chipFoundation.handleTransitionEnd($event)'
   tabindex="0">
   <div class="mdc-chip__text"><ng-content></ng-content></div>
 </div>

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

@@ -16,8 +16,14 @@ import {takeUntil} from 'rxjs/operators';
 
 let uid = 0;
 
+/** Represents an event fired on an individual `mat-chip`. */
+export interface MatChipCellEvent {
+  /** The chip the event was fired on. */
+  chip: MatChipCell;
+}
+
 /**
- * Dummy directive to add CSS class to chip leading icon.
+ * Directive to add CSS classes to chip leading icon.
  * @docs-private
  */
 @Directive({
@@ -27,23 +33,26 @@ let uid = 0;
   }
 })
 export class MatChipAvatar {
-  _classes: {[key: string]: boolean} = {};
+  constructor(private _changeDetectorRef: ChangeDetectorRef,
+              private _elementRef: ElementRef) {}
 
   /** 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.
+ * Directive to add CSS class to chip trailing icon and notify parent chip
+ * about trailing icon interactions.
+ *
+ * If matChipRemove is used to add this directive, the parent chip will be
+ * removed when the trailing icon is clicked.
+ *
  * @docs-private
- */
+z */
 @Directive({
   selector: 'mat-chip-trailing-icon, [matChipTrailingIcon], [matChipRemove]',
   host: {
@@ -56,8 +65,16 @@ export class MatChipAvatar {
 })
 export class MatChipTrailingIcon {
   @Output() interaction = new EventEmitter<MouseEvent | KeyboardEvent>();
+  shouldRemove!: boolean;
+
+  constructor(_elementRef: ElementRef) {
+    this.shouldRemove = _elementRef.nativeElement.getAttribute('matChipRemove') !== null;
+  }
 }
 
+/**
+ * Material design styled Chip component. Used inside the MatChipGrid component.
+ */
 @Component({
   selector: 'mat-chip-cell, mat-basic-chip-cell',
   templateUrl: 'chip-cell.html',
@@ -67,9 +84,6 @@ export class MatChipTrailingIcon {
     '[id]': 'id',
     '[class.mat-chip-disabled]': 'disabled',
     '[class.mat-chip-selected]': 'selected',
-    '(click)': '_chipFoundation.handleInteraction($event)',
-    '(keydown)': '_chipFoundation.handleInteraction($event)',
-    '(transitionend)': '_chipFoundation.handleTransitionEnd($event)'
   },
 })
 export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
@@ -93,34 +107,22 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
     this._changeDetectorRef.markForCheck();
   }
 
-  /**
-   * 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. */
+  @Input()
   get selected(): boolean {
     return this._chipFoundation.isSelected();
   }
-
-  @Input()
-  /** 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);
-  }
+  /**
+   * 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}>();
 
   /** The MDC foundation containing business logic for MDC chip. */
   _chipFoundation: MDCChipFoundation;
@@ -131,6 +133,12 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
    */
   _classes: {[key: string]: boolean} = {};
 
+  /** Emitted when the chip is destroyed. */
+  @Output() readonly destroyed: EventEmitter<MatChipCellEvent> = new EventEmitter<MatChipCellEvent>();
+
+  /** Emitted when a chip is to be removed. */
+  @Output() readonly removed: EventEmitter<MatChipCellEvent> = new EventEmitter<MatChipCellEvent>();
+
   /** Subject that emits when the component has been destroyed. */
   private _destroyed = new Subject<void>();
 
@@ -143,10 +151,12 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
   /** The chip's trailing icon. */
   @ContentChild(MatChipTrailingIcon, {static: false}) trailingIcon: MatChipTrailingIcon;
 
+  /** The div element that is styled as an MDC chip. */
   @ViewChild('wrapper') _wrapper!: ElementRef;
-  /**
-   * Implementation of the MDC chip adapter interface.
-   * These methods are called by the chip foundation.
+
+ /**
+  * Implementation of the MDC chip adapter interface.
+  * These methods are called by the chip foundation.
    */
   private _chipAdapter: MDCChipAdapter = {
     addClass: (className) => this._setClass(className, true),
@@ -160,14 +170,19 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
     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),
+    notifyRemoval: () => {
+      this.removed.emit({chip: this});
+      this.removal.emit(this.id);
+    },
     getComputedStyleValue: (propertyName) => {
-      return window.getComputedStyle(this._elementRef.nativeElement).getPropertyValue(propertyName);
+      return window.getComputedStyle(this._wrapper.nativeElement).getPropertyValue(propertyName);
     },
     setStyleProperty: (propertyName: string, value: string) => {
-      this._elementRef.nativeElement.style.setProperty(propertyName, value);
+      this._wrapper.nativeElement.style.setProperty(propertyName, value);
     },
     hasLeadingIcon: () => {return !!this.leadingIcon},
+    // 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},
  };
@@ -183,9 +198,14 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
 
   ngAfterContentInit() {
     if (this.trailingIcon) {
+      this._chipFoundation.setShouldRemoveOnTrailingIconClick(this.trailingIcon.shouldRemove);
       this.trailingIcon.interaction
         .pipe(takeUntil(this._destroyed))
-        .subscribe((event) => this._chipFoundation.handleTrailingIconInteraction(event));
+        .subscribe((event) => {
+          if (!this.disabled) {
+            this._chipFoundation.handleTrailingIconInteraction(event);
+          }
+        });
     }
   }
 
@@ -195,27 +215,30 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.destroyed.emit({chip: this});
     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
+   * If you aren't using the matChipRemove Directive, you must manually call
    * this method to remove the chip.
    */
   beginExit() {
     this._chipFoundation.beginExit();
   }
 
+  /** Whether this chip is a basic (unstyled) chip. */
   _isBasicChip() {
     const basicChipAttrName = 'mat-basic-chip-cell';
     const element = this._elementRef.nativeElement as HTMLElement;
     return element.hasAttribute(basicChipAttrName) ||
       element.tagName.toLowerCase() === basicChipAttrName;
   }
 
+  /** Adds a class to non-basic chips. */
   _addHostClassName() {
     if (!this._isBasicChip()) {
       this._elementRef.nativeElement.classList.add('mat-standard-chip-cell');
@@ -237,12 +260,17 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
           exitDuration: 150 /* MDCRippleFoundation.numbers.FG_DEACTIVATION_MS */,
         },
       },
-      rippleDisabled: this._isBasicChip()
+      rippleDisabled: this.disabled || this._isBasicChip(),
     };
 
     this._rippleRenderer =
       new RippleRenderer(rippleTarget, this._ngZone, this._wrapper, this._platform);
     this._rippleRenderer.setupTriggerEvents(this._wrapper.nativeElement);
   }
+
+  /** Forwards interaction events to the MDC chip foundation. */
+  _handleInteraction(event: MouseEvent | KeyboardEvent) {
+    if (!this.disabled) this._chipFoundation.handleInteraction(event);
+  }
 }
 

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

@@ -8,7 +8,7 @@
 
 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 {MatChipCell, MatChipCellEvent} from './chip-cell';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -52,10 +52,8 @@ export class MatChipGrid implements AfterContentInit, AfterViewInit, OnDestroy {
    */
   private _chipSetAdapter: MDCChipSetAdapter = {
     hasClass: (className) => this._elementRef.nativeElement.classList.contains(className),
-    removeChip: (chipId) => {
-      const chip = document.getElementById(chipId);
-      this._wrapper.nativeElement.removeChild(chip);
-    },
+    removeChip: () => {
+     },
     setSelected: (chipId, selected) => {
       const chip = this._chips.find(c => c.id === chipId);
       if (chip) chip.selected = selected;
@@ -77,10 +75,10 @@ export class MatChipGrid implements AfterContentInit, AfterViewInit, OnDestroy {
         this._chipSetFoundation.select(chip.id);
       }
 
-      chip.removal
+      chip.removed
         .pipe(takeUntil(this._destroyed))
-        .subscribe((id: string) => {
-          this._chipSetFoundation.handleChipRemoval(id);
+        .subscribe((chipEvent: MatChipCellEvent) => {
+          this._chipSetFoundation.handleChipRemoval(chipEvent.chip.id);
         });
 
       chip.interaction