feat(chip-list): implement FormFieldControl and ControlValueAccessor (#6686)

BREAKING CHANGES:
 - Deprecated: @output() select, and @output() deselect
 - Added @output() onSelectionChange = EventEmitter<MdChipSelectionChange>

Author: tinayuangao

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

@@ -45,20 +45,22 @@ <h4>Form Field</h4>
         <code>&lt;md-form-field&gt;</code>.
       </p>
 
-
-      <md-form-field>
-        <md-chip-list mdPrefix #chipList1>
-          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+      <button md-button (click)="tabIndex = (tabIndex === 0 ? -1 : 0)">
+        Set tabIndex to {{tabIndex === 0 ? -1 : 0}}
+      </button>
+      <md-form-field class="has-chip-list">
+        <md-chip-list [tabIndex]="tabIndex" #chipList1 [(ngModel)]="selectedPeople" required>
+          <md-chip  *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (remove)="remove(person)">
             {{person.name}}
             <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
           </md-chip>
+          <input placeholder="New Contributor..."
+                 [mdChipInputFor]="chipList1"
+                 [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 [mdChipInputAddOnBlur]="false"
+                 (mdChipInputTokenEnd)="add($event)" />
         </md-chip-list>
-        <input mdInput placeholder="New Contributor..."
-               [mdChipInputFor]="chipList1"
-               [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
-               [mdChipInputAddOnBlur]="addOnBlur"
-               (mdChipInputTokenEnd)="add($event)" />
       </md-form-field>
 
 
@@ -68,21 +70,37 @@ <h4>Form Field</h4>
         With <code>mdChipInput</code> the input work with chip-list
       </p>
 
-      <md-chip-list #chipList2>
-        <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
-                 [removable]="removable" (remove)="remove(person)">
-          {{person.name}}
-          <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
-        </md-chip>
-      </md-chip-list>
       <md-form-field>
-        <input mdInput placeholder="New Contributor..."
+        <md-chip-list [tabIndex]="tabIndex"  #chipList2 [(ngModel)]="selectedPeople" required>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
+          </md-chip>
+        </md-chip-list>
+        <input placeholder="New Contributor..."
                [mdChipInputFor]="chipList2"
                [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [mdChipInputAddOnBlur]="addOnBlur"
                (mdChipInputTokenEnd)="add($event)" />
       </md-form-field>
 
+      <p>
+        Chips list without input
+      </p>
+
+
+      <md-form-field class="has-chip-list">
+        <md-chip-list #chipList3>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
+          </md-chip>
+        </md-chip-list>
+      </md-form-field>
+
+
       <p>
         The example above has overridden the <code>[separatorKeys]</code> input to allow for
         <code>ENTER</code>, <code>COMMA</code> and <code>SEMI COLON</code> keys.
@@ -108,6 +126,28 @@ <h4>Stacked Chips</h4>
           {{aColor.name}}
         </md-chip>
       </md-chip-list>
+
+      <h4>NgModel with chip list</h4>
+      <md-chip-list [multiple]="true" [(ngModel)]="selectedColors">
+        <md-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
+                 [value]="aColor.name" (remove)="removeColor(aColor)">
+          {{aColor.name}}
+          <md-icon mdChipRemove>cancel</md-icon>
+        </md-chip>
+      </md-chip-list>
+
+      The selected colors are <span *ngFor="let color of selectedColors"> {{color}}</span>.
+
+      <h4>NgModel with single selection chip list</h4>
+      <md-chip-list [(ngModel)]="selectedColor">
+        <md-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
+                 [value]="aColor.name" (remove)="removeColor(aColor)">
+          {{aColor.name}}
+          <md-icon mdChipRemove>cancel</md-icon>
+        </md-chip>
+      </md-chip-list>
+
+      The selected color is {{selectedColor}}.
     </md-card-content>
   </md-card>
 </div>

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

@@ -25,3 +25,7 @@
     width: 150px;
   }
 }
+
+.has-chip-list {
+  width: 100%;
+}

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

@@ -20,6 +20,7 @@ export interface DemoColor {
   styleUrls: ['chips-demo.css']
 })
 export class ChipsDemo {
+  tabIndex: number = 0;
   visible: boolean = true;
   color: string = '';
   selectable: boolean = true;
@@ -30,6 +31,8 @@ export class ChipsDemo {
   // Enter, comma, semi-colon
   separatorKeysCodes = [ENTER, COMMA, 186];
 
+  selectedPeople = null;
+
   people: Person[] = [
     { name: 'Kara' },
     { name: 'Jeremy' },
@@ -73,7 +76,23 @@ export class ChipsDemo {
     }
   }
 
+  removeColor(color: DemoColor) {
+    let index = this.availableColors.indexOf(color);
+
+    if (index >= 0) {
+      this.availableColors.splice(index, 1);
+    }
+
+    index = this.selectedColors.indexOf(color.name);
+
+    if (index >= 0) {
+      this.selectedColors.splice(index, 1);
+    }
+  }
+
   toggleVisible(): void {
     this.visible = false;
   }
+  selectedColors: any[] = ['Primary', 'Warn'];
+  selectedColor = 'Accent';
 }

src/lib/chips/chip-input.spec.ts

@@ -1,6 +1,7 @@
 import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {MdChipsModule} from './index';
 import {Component, DebugElement} from '@angular/core';
+import {PlatformModule} from '../core/platform/index';
 import {MdChipInput, MdChipInputEvent} from './chip-input';
 import {By} from '@angular/platform-browser';
 import {Directionality} from '@angular/material/core';
@@ -21,7 +22,7 @@ describe('MdChipInput', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdChipsModule],
+      imports: [MdChipsModule, PlatformModule],
       declarations: [TestChipInput],
       providers: [{
         provide: Directionality, useFactory: () => {

src/lib/chips/chip-input.ts

@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Output, EventEmitter, ElementRef, Input} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  Output,
+  EventEmitter,
+  Input,
+} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ENTER} from '@angular/material/core';
 import {MdChipList} from './chip-list';
@@ -16,24 +22,29 @@ export interface MdChipInputEvent {
   value: string;
 }
 
+/**
+ * Directive that adds chip-specific behaviors to an input element inside <md-form-field>.
+ * May be placed inside or outside of an <md-chip-list>.
+ */
 @Directive({
   selector: 'input[mdChipInputFor], input[matChipInputFor]',
   host: {
-    'class': 'mat-chip-input',
+    'class': 'mat-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',
-    '(blur)': '_blur()'
+    '(blur)': '_blur()',
+    '(focus)': '_focus()',
   }
 })
 export class MdChipInput {
-
+  focused: boolean = false;
   _chipList: MdChipList;
 
   /** Register input for chip list */
   @Input('mdChipInputFor')
   set chipList(value: MdChipList) {
     if (value) {
       this._chipList = value;
-      this._chipList.registerInput(this._inputElement);
+      this._chipList.registerInput(this);
     }
   }
 
@@ -68,6 +79,13 @@ export class MdChipInput {
   get matSeparatorKeyCodes() { return this.separatorKeyCodes; }
   set matSeparatorKeyCodes(v: number[]) { this.separatorKeyCodes = v; }
 
+  @Input() placeholder: string = '';
+
+  get empty(): boolean {
+    let value: string | null = this._inputElement.value;
+    return value == null || value === '';
+  }
+
   /** The native input element to which this directive is attached. */
   protected _inputElement: HTMLInputElement;
 
@@ -85,6 +103,17 @@ export class MdChipInput {
     if (this.addOnBlur) {
       this._emitChipEnd();
     }
+    this.focused = false;
+    // Blur the chip list if it is not focused
+    if (!this._chipList.focused) {
+      this._chipList._blur();
+    }
+    this._chipList.stateChanges.next();
+  }
+
+  _focus() {
+    this.focused = true;
+    this._chipList.stateChanges.next();
   }
 
   /** Checks to see if the (chipEnd) event needs to be emitted. */
@@ -100,4 +129,6 @@ export class MdChipInput {
       }
     }
   }
+
+  focus() { this._inputElement.focus(); }
 }