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.

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,28 @@ <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>
-        <input md-input #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
+        <md-chip-list>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon md-chip-remove>cancel</md-icon>
+          </md-chip>
+
+          <input md-input #input (keyup.enter)="add(input)" placeholder="Material contributors..." />
+        </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 @@
   .md-basic-chip {
     margin: auto 10px;
   }
+
+  md-chip-list input {
+    width: 150px;
+  }
 }

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

@@ -19,6 +19,8 @@ export interface DemoColor {
 export class ChipsDemo {
   visible: boolean = true;
   color: string = '';
+  selectable: boolean = true;
+  removable: boolean = true;
 
   people: Person[] = [
     { name: 'Kara' },
@@ -47,6 +49,14 @@ export class ChipsDemo {
     }
   }
 
+  remove(person: Person): void {
+    let index = this.people.indexOf(person);
+
+    if (index >= 0) {
+      this.people.splice(index, 1);
+    }
+  }
+
   toggleVisible(): void {
     this.visible = false;
   }

src/lib/chips/_chips-theme.scss

@@ -1,6 +1,8 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
+//@import './chips';
+
 @mixin md-chips-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
   $primary: map-get($theme, primary);
@@ -16,34 +18,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, md-color($background, card), #e0e0e0);
+  $unselected-background: if($is-dark-theme, #656565, #e0e0e0);
   $unselected-foreground: if($is-dark-theme, md-color($foreground, text), $light-foreground);
 
   $selected-background: if($is-dark-theme, md-color($background, app-bar), #808080);
   $selected-foreground: if($is-dark-theme, md-color($foreground, text), $light-selected-foreground);
 
+  $focus-color: md-color($foreground, text);
+
   .md-chip:not(.md-basic-chip) {
     background-color: $unselected-background;
     color: $unselected-foreground;
+
+    .md-chip-focus-border {
+      pointer-events: none;
+    }
+
+    &:focus {
+      outline: none;
+      border: 2px solid $focus-color;
+    }
+
+    .md-chip-remove {
+      color: $unselected-foreground;
+      opacity: 0.3;
+
+      &:hover {
+        opacity: 0.54;
+      }
+    }
   }
 
   .md-chip.md-chip-selected:not(.md-basic-chip) {
     background-color: $selected-background;
     color: $selected-foreground;
 
+    .md-chip-remove {
+      color: $selected-foreground;
+      opacity: 0.4;
+
+      &:hover {
+        opacity: 0.54;
+      }
+    }
+
     &.md-primary {
       background-color: md-color($primary, 500);
       color: md-contrast($primary, 500);
+
+      .md-chip-remove {
+        color: md-contrast($primary, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
 
     &.md-accent {
       background-color: md-color($accent, 500);
       color: md-contrast($accent, 500);
+
+      .md-chip-remove {
+        color: md-contrast($accent, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
 
     &.md-warn {
       background-color: md-color($warn, 500);
       color: md-contrast($warn, 500);
+
+      .md-chip-remove {
+        color: md-contrast($warn, 500);
+        opacity: 0.4;
+
+        &:hover {
+          opacity: 0.54;
+        }
+      }
     }
   }
 }