feat(chips): Initial skeleton/demo.

Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References #120.

Author: topherfangio

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

@@ -0,0 +1,12 @@
+<div class="chips-demo">
+  <section>
+    <h3>Static Chips</h3>
+
+    <md-chip-list>
+      <md-chip>Basic Chip</md-chip>
+      <md-chip class="selected md-primary">Primary</md-chip>
+      <md-chip class="selected md-accent">Accent</md-chip>
+      <md-chip class="selected md-warn">Warn</md-chip>
+    </md-chip-list>
+  </section>
+</div>

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

@@ -0,0 +1,2 @@
+.chips-demo {
+}

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

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'chips-demo',
+  templateUrl: 'chips-demo.html',
+  styleUrls: ['chips-demo.scss']
+})
+export class ChipsDemo {
+}

src/demo-app/demo-app-module.ts

@@ -13,6 +13,7 @@ import {IconDemo} from './icon/icon-demo';
 import {GesturesDemo} from './gestures/gestures-demo';
 import {InputDemo} from './input/input-demo';
 import {CardDemo} from './card/card-demo';
+import {ChipsDemo} from './chips/chips-demo';
 import {RadioDemo} from './radio/radio-demo';
 import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
 import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
@@ -49,6 +50,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d
     ButtonDemo,
     ButtonToggleDemo,
     CardDemo,
+    ChipsDemo,
     CheckboxDemo,
     DemoApp,
     DialogDemo,

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

@@ -23,6 +23,7 @@ export class DemoApp {
     {name: 'Button', route: 'button'},
     {name: 'Button Toggle', route: 'button-toggle'},
     {name: 'Card', route: 'card'},
+    {name: 'Chips', route: 'chips'},
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Dialog', route: 'dialog'},
     {name: 'Gestures', route: 'gestures'},

src/demo-app/demo-app/routes.ts

@@ -22,6 +22,7 @@ import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
 import {SliderDemo} from '../slider/slider-demo';
 import {RadioDemo} from '../radio/radio-demo';
 import {CardDemo} from '../card/card-demo';
+import {ChipsDemo} from '../chips/chips-demo';
 import {MenuDemo} from '../menu/menu-demo';
 import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
@@ -34,6 +35,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'button', component: ButtonDemo},
   {path: 'card', component: CardDemo},
+  {path: 'chips', component: ChipsDemo},
   {path: 'radio', component: RadioDemo},
   {path: 'select', component: SelectDemo},
   {path: 'sidenav', component: SidenavDemo},

src/lib/chips/README.md

@@ -0,0 +1,7 @@
+# md-chips
+
+`md-chips` provides a horizontal display of (optionally) selectable, addable, and removable,
+items and an input to create additional ones (again; optional). You can read more about chips
+in the [Material Design spec](https://material.google.com/components/chips.html).
+
+This is a placeholder README for the eventual chips component.

src/lib/chips/_chips-theme.scss

@@ -0,0 +1,29 @@
+@import '../core/theming/theming';
+
+@mixin md-chips-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+
+  .md-chip {
+    background-color: #e0e0e0;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .md-chip.selected {
+    &.md-primary {
+      background-color: md-color($primary, 500);
+      color: md-contrast($primary, 500);
+    }
+    &.md-accent {
+      background-color: md-color($accent, 500);
+      color: md-contrast($accent, 500);
+    }
+    &.md-warn {
+      background-color: md-color($warn, 500);
+      color: md-contrast($warn, 500);
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement}  from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdChipList, MdChipsModule} from './index';
+
+describe('MdChip', () => {
+  let fixture: ComponentFixture<any>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdChipsModule.forRoot()],
+      declarations: [
+        StaticChipList
+      ]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('basic behaviors', () => {
+    let chipListDebugElement: DebugElement;
+    let chipListNativeElement: HTMLElement;
+    let chipListInstance: MdChipList;
+    let testComponent: StaticChipList;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(StaticChipList);
+      fixture.detectChanges();
+
+      chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList));
+      chipListNativeElement = chipListDebugElement.nativeElement;
+      chipListInstance = chipListDebugElement.componentInstance;
+      testComponent = fixture.debugElement.componentInstance;
+    });
+
+    it('adds the `md-chip-list` class', () => {
+      expect(chipListNativeElement.classList).toContain('md-chip-list');
+    });
+  });
+});
+
+@Component({
+  template: `
+    <md-chip-list>
+      <md-chip>{{name}} 1</md-chip>
+      <md-chip>{{name}} 2</md-chip>
+      <md-chip>{{name}} 3</md-chip>
+    </md-chip-list>
+  `
+})
+class StaticChipList {
+  name: 'Test';
+}

src/lib/chips/chip-list.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ModuleWithProviders,
+  NgModule,
+  ViewEncapsulation
+} from '@angular/core';
+
+import {MdChip} from './chip';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-chip-list',
+  template: `<ng-content></ng-content>`,
+  host: {
+    // Properties
+    'tabindex': '0',
+    'role': 'listbox',
+    'class': 'md-chip-list'
+  },
+  styleUrls: ['chips.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdChipList {
+  constructor(private _elementRef: ElementRef) {}
+
+  ngAfterContentInit(): void {}
+}
+
+@NgModule({
+  imports: [],
+  exports: [MdChipList, MdChip],
+  declarations: [MdChipList, MdChip]
+})
+export class MdChipsModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdChipsModule,
+      providers: []
+    };
+  }
+}