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.

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,29 @@ <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]="keys" [addOnBlur]="true" />
+        </md-chip-list>
       </md-input-container>
 
+      <p>
+        <md-checkbox name="selectable" [(ngModel)]="selectable">Selectable</md-checkbox>
+        <md-checkbox name="removable" [(ngModel)]="removable">Removable</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,9 @@ export interface DemoColor {
 export class ChipsDemo {
   visible: boolean = true;
   color: string = '';
+  selectable: boolean = true;
+  removable: boolean = true;
+  keys = [ENTER, COMMA, 186];
 
   people: Person[] = [
     { name: 'Kara' },
@@ -39,10 +43,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.ts

@@ -0,0 +1,58 @@
+import {Directive, Output, EventEmitter, Renderer, ElementRef, Input} from "@angular/core";
+import {MdInputDirective} from "../input/input-container";
+import {ENTER} from "../core/keyboard/keycodes";
+
+export interface MdChipInputEvent {
+  input: HTMLInputElement;
+  value: string;
+}
+
+@Directive({
+  selector: '[mdChipInput], [matChipInput]',
+  host: {
+    '(keydown)': '_add($event)',
+    '(blur)': '_blur()'
+  }
+})
+export class MdChipInput {
+
+  /**
+   * Whether or not the chipAdded event will be emitted when the input is blurred.
+   *
+   * Default `false`.
+   */
+  @Input() addOnBlur = false;
+
+  /**
+   * The list of key codes that will trigger a chipAdded event.
+   *
+   * Defaults to `[ENTER]`.
+   */
+  @Input() separatorKeys: number[] = [ENTER];
+
+  /** Emitted when a chip is to be added. */
+  @Output() chipAdded = new EventEmitter<MdChipInputEvent>();
+
+  /** The native input element to which this directive is attached. */
+  protected _inputElement: HTMLInputElement;
+
+  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {
+    this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
+  }
+
+  _add(event?: KeyboardEvent) {
+    if (!event || this.separatorKeys.indexOf(event.keyCode) > -1) {
+      this.chipAdded.emit({ input: this._inputElement, value: this._inputElement.value });
+
+      if (event) {
+        event.preventDefault();
+      }
+    }
+  }
+
+  _blur() {
+    if (this.addOnBlur) {
+      this._add();
+    }
+  }
+}