feat(chips): Add choice property to mdc-chip-set (#744)

Choice chips are a variant of chips that allow single selection from a set of chip options.

Closes #743

Author: trimox

src/demo-app/components/chips-demo/chips-demo.html

@@ -102,6 +102,22 @@ <h3>Chips</h3>
       </mdc-chip-set>
     </div>
   </div>
+  <div class="demo-content">
+    <h3>Choice Chips</h3>
+    <div class="demo-content--row">
+      <mdc-chip-set [choice]="true">
+        <mdc-chip>
+          <mdc-chip-text>Get Directions</mdc-chip-text>
+        </mdc-chip>
+        <mdc-chip>
+          <mdc-chip-text>Get Weather</mdc-chip-text>
+        </mdc-chip>
+        <mdc-chip>
+          <mdc-chip-text>Add to Calendar</mdc-chip-text>
+        </mdc-chip>
+      </mdc-chip-set>
+    </div>
+  </div>
   <div class="demo-content">
     <h3>Entry Chips</h3>
     <div class="demo-content--row">

src/lib/chips/chip-set.ts

@@ -6,6 +6,7 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
+  Input,
   OnDestroy,
   OnInit,
   QueryList,
@@ -15,6 +16,8 @@ import {
 import { Subscription } from 'rxjs/Subscription';
 import { startWith } from 'rxjs/operators/startWith';
 
+import { toBoolean, EventRegistry } from '@angular-mdc/web/common';
+
 import { MdcChip } from './chip';
 import { MDCChipSetAdapter } from '@material/chips/chip-set/adapter';
 import { MDCChipSetFoundation } from '@material/chips';
@@ -36,9 +39,23 @@ export class MdcChipSetChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
+  providers: [EventRegistry]
 })
 export class MdcChipSet implements AfterContentInit, OnInit, OnDestroy {
+  /**
+  * Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
+  */
+  @Input()
+  get choice(): boolean { return this._choice; }
+  set choice(value: boolean) {
+    this._choice = toBoolean(value);
+  }
+  protected _choice: boolean = false;
+
   @HostBinding('class.mdc-chip-set') isHostClass = true;
+  @HostBinding('class.mdc-chip-set--choice') get classChoice(): string {
+    return this._choice ? 'mdc-chip-set--choice' : '';
+  }
   @ContentChildren(MdcChip) chips: QueryList<MdcChip>;
 
   /** Subscription to changes in the chip list. */
@@ -48,6 +65,10 @@ export class MdcChipSet implements AfterContentInit, OnInit, OnDestroy {
     hasClass: (className: string) => {
       return this._getHostElement().classList.contains(className);
     },
+    registerInteractionHandler: (evtType: string, handler: EventListener) =>
+      this._registry.listen(evtType, handler, this._getHostElement()),
+    deregisterInteractionHandler: (evtType: string, handler: EventListener) =>
+      this._registry.unlisten(evtType, handler),
   };
 
   private _foundation: {
@@ -57,7 +78,8 @@ export class MdcChipSet implements AfterContentInit, OnInit, OnDestroy {
 
   constructor(
     private _renderer: Renderer2,
-    public elementRef: ElementRef) { }
+    public elementRef: ElementRef,
+    private _registry: EventRegistry) { }
 
   ngAfterContentInit(): void {
     // When the list changes, re-subscribe