feat(chips): Add remove functionality/styling.

Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References #120. Closes #3143.

Author: topherfangio

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

@@ -23,8 +23,10 @@ <h4>Advanced</h4>
 
       <md-chip-list selectable="false">
         <md-chip color="accent" selected="true">Selected/Colored</md-chip>
+
         <md-chip color="warn" selected="true" *ngIf="visible"
-                 (destroy)="alert('chip destroyed')" (click)="toggleVisible()">
+                 (destroy)="alert('chip destroyed')" (remove)="toggleVisible()">
+          <md-icon md-chip-remove>cancel</md-icon>
           With Events
         </md-chip>
       </md-chip-list>
@@ -37,16 +39,37 @@ <h4>Advanced</h4>
     <md-card-content>
       <h4>Input Container</h4>
 
-      <md-chip-list>
-        <md-chip *ngFor="let person of people" [color]="color">
-          {{person.name}}
-        </md-chip>
-      </md-chip-list>
+      <p>
+        You can easily put the the <code>&lt;md-chip-list&gt;</code> inside of an
+        <code>&lt;md-input-container&gt;</code>.
+      </p>
+
+      <md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
+        <md-chip-list>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon mdChipRemove>cancel</md-icon>
+          </md-chip>
 
-      <md-input-container>
-        <input mdInput #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
+          <input mdInput placeholder="New Contributor..."
+                 mdChipInput (chipAdded)="add($event)"
+                 [separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
+        </md-chip-list>
       </md-input-container>
 
+      <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.
+      </p>
+
+      <h4>Options</h4>
+      <p>
+        <md-checkbox name="selectable" [(ngModel)]="selectable">Selectable</md-checkbox>
+        <md-checkbox name="removable" [(ngModel)]="removable">Removable</md-checkbox>
+        <md-checkbox name="addOnBlur" [(ngModel)]="addOnBlur">Add on Blur</md-checkbox>
+      </p>
+
       <h4>Stacked Chips</h4>
 
       <p>

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

@@ -20,4 +20,8 @@
   .mat-basic-chip {
     margin: auto 10px;
   }
+
+  md-chip-list input {
+    width: 150px;
+  }
 }

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

@@ -1,4 +1,5 @@
-import {Component, ElementRef} from '@angular/core';
+import {Component} from '@angular/core';
+import {MdChipInputEvent, ENTER, COMMA} from "@angular/material";
 
 export interface Person {
   name: string;
@@ -18,6 +19,12 @@ export interface DemoColor {
 export class ChipsDemo {
   visible: boolean = true;
   color: string = '';
+  selectable: boolean = true;
+  removable: boolean = true;
+  addOnBlur: boolean = true;
+
+  // Enter, comma, semi-colon
+  separatorKeys = [ENTER, COMMA, 186];
 
   people: Person[] = [
     { name: 'Kara' },
@@ -39,10 +46,26 @@ export class ChipsDemo {
     alert(message);
   }
 
-  add(input: ElementRef): void {
-    if (input.nativeElement.value && input.nativeElement.value.trim() != '') {
-      this.people.push({ name: input.nativeElement.value.trim() });
-      input.nativeElement.value = '';
+  add(event: MdChipInputEvent): void {
+    let input = event.input;
+    let value = event.value;
+
+    // Add our person
+    if (value && value.trim() != '') {
+      this.people.push({ name: value.trim() });
+    }
+
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  remove(person: Person): void {
+    let index = this.people.indexOf(person);
+
+    if (index >= 0) {
+      this.people.splice(index, 1);
     }
   }
 

src/lib/chips/_chips-theme.scss

@@ -16,34 +16,90 @@
 
   // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
   // to standard background and foreground colors.
-  $unselected-background: if($is-dark-theme, mat-color($background, card), #e0e0e0);
+  $unselected-background: if($is-dark-theme, #656565, #e0e0e0);
   $unselected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-foreground);
 
   $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
   $selected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-selected-foreground);
 
+  $focus-color: mat-color($foreground, text);
+
   .mat-chip:not(.mat-basic-chip) {
     background-color: $unselected-background;
     color: $unselected-foreground;
+
+    .mat-chip-focus-border {
+      pointer-events: none;
+    }
+
+    &:focus {
+      outline: none;
+      border: 2px solid $focus-color;
+    }
+
+    .mat-chip-remove {
+      color: $unselected-foreground;
+      opacity: 0.3;
+
+      &:hover {
+        opacity: 0.54;
+      }
+    }
   }
 
   .mat-chip.mat-chip-selected:not(.mat-basic-chip) {
     background-color: $selected-background;
     color: $selected-foreground;
 
+    .mat-chip-remove {
+      color: $selected-foreground;
+      opacity: 0.4;
+
+      &:hover {
+        opacity: 0.54;
+      }
+    }
+
     &.mat-primary {
       background-color: mat-color($primary, 500);
       color: mat-contrast($primary, 500);
+
+      .mat-chip-remove {
+        color: mat-contrast($primary, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
 
     &.mat-accent {
       background-color: mat-color($accent, 500);
       color: mat-contrast($accent, 500);
+
+      .mat-chip-remove {
+        color: mat-contrast($accent, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
 
     &.mat-warn {
       background-color: mat-color($warn, 500);
       color: mat-contrast($warn, 500);
+
+      .mat-chip-remove {
+        color: mat-contrast($warn, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,115 @@
+import {async, TestBed, ComponentFixture} from "@angular/core/testing";
+import {MdChipsModule} from "./index";
+import {Component, DebugElement} from "@angular/core";
+import {MdChipInput, MdChipInputEvent} from "./chip-input";
+import {By} from "@angular/platform-browser";
+import {Dir} from "../core/rtl/dir";
+import {FakeKeyboardEvent} from "./chip-list.spec";
+import {ENTER, COMMA} from "../core/keyboard/keycodes";
+
+describe('MdChipInput', () => {
+  let fixture: ComponentFixture<any>;
+  let testChipInput: TestChipInput;
+  let inputDebugElement: DebugElement;
+  let inputNativeElement: HTMLElement;
+  let chipInputDirective: MdChipInput;
+
+  let dir = 'ltr';
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdChipsModule],
+      declarations: [TestChipInput],
+      providers: [{
+        provide: Dir, useFactory: () => {
+          return {value: dir.toLowerCase()}
+        }
+      }]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(TestChipInput);
+    testChipInput = fixture.debugElement.componentInstance;
+    fixture.detectChanges();
+
+    inputDebugElement = fixture.debugElement.query(By.directive(MdChipInput));
+    chipInputDirective = inputDebugElement.injector.get(MdChipInput) as MdChipInput;
+    inputNativeElement = inputDebugElement.nativeElement;
+  }));
+
+  describe('basic behavior', () => {
+    it('emits the (chipAdded) on enter keyup', () => {
+      let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
+
+      spyOn(testChipInput, 'add');
+
+      chipInputDirective._keydown(ENTER_EVENT);
+      expect(testChipInput.add).toHaveBeenCalled();
+    });
+  });
+
+  describe('[addOnBlur]', () => {
+    it('allows (chipAdded) when true', () => {
+      spyOn(testChipInput, 'add');
+
+      testChipInput.addOnBlur = true;
+      fixture.detectChanges();
+
+      chipInputDirective._blur();
+      expect(testChipInput.add).toHaveBeenCalled();
+    });
+
+    it('disallows (chipAdded) when false', () => {
+      spyOn(testChipInput, 'add');
+
+      testChipInput.addOnBlur = false;
+      fixture.detectChanges();
+
+      chipInputDirective._blur();
+      expect(testChipInput.add).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('[separatorKeys]', () => {
+    it('does not emit (chipAdded) when a non-separator key is pressed', () => {
+      let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
+      spyOn(testChipInput, 'add');
+
+      testChipInput.separatorKeys = [COMMA];
+      fixture.detectChanges();
+
+      chipInputDirective._keydown(ENTER_EVENT);
+      expect(testChipInput.add).not.toHaveBeenCalled();
+    });
+
+    it('emits (chipAdded) when a custom separator keys is pressed', () => {
+      let COMMA_EVENT = new FakeKeyboardEvent(COMMA, inputNativeElement) as any;
+      spyOn(testChipInput, 'add');
+
+      testChipInput.separatorKeys = [COMMA];
+      fixture.detectChanges();
+
+      chipInputDirective._keydown(COMMA_EVENT);
+      expect(testChipInput.add).toHaveBeenCalled();
+    });
+  });
+});
+
+@Component({
+  template: `
+    <md-chip-list>
+      <input mdChipInput [addOnBlur]="addOnBlur" [separatorKeys]="separatorKeys"
+             (chipAdded)="add($event)" />
+    </md-chip-list>
+  `
+})
+class TestChipInput {
+  addOnBlur: boolean = false;
+  separatorKeys: number[] = [ENTER];
+
+  add(event: MdChipInputEvent) {
+  }
+}