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,11 @@
+<div class="chips-demo">
+  <section>
+    <h3>Static Chips</h3>
+
+    <md-chip-list>
+      <md-chip>Chip 1</md-chip>
+      <md-chip>Chip 2</md-chip>
+      <md-chip>Chip 3</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';
@@ -48,6 +49,7 @@ import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tab
     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';
@@ -33,6 +34,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/chip-list.ts

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

src/lib/chips/chip.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  ElementRef,
+  Renderer
+} from '@angular/core';
+
+@Component(MdChip.COMPONENT_CONFIG)
+export class MdChip {
+
+  static COMPONENT_CONFIG:Component = {
+    selector: 'md-chip, [md-chip]',
+    template: `<ng-content></ng-content>`,
+    host: {
+      // Properties
+      'tabindex': '-1',
+      'role': 'option'
+    }
+  };
+
+  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {
+  }
+
+  ngAfterContentInit(): void {
+    this._elementRef.nativeElement.classList.add('md-chip');
+  }
+}

src/lib/chips/chips.scss

@@ -0,0 +1,18 @@
+$md-chip-vertical-padding: 8px;
+$md-chip-horizontal-padding: 12px;
+
+.md-chip-list {
+  padding: $md-chip-horizontal-padding;
+}
+
+.md-chip {
+  display: inline-block;
+  padding: $md-chip-vertical-padding $md-chip-horizontal-padding
+    $md-chip-vertical-padding $md-chip-horizontal-padding;
+  border-radius: $md-chip-horizontal-padding * 2;
+
+  background-color: #E0E0E0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 13px;
+  line-height: 16px;
+}

src/lib/chips/index.ts

@@ -0,0 +1,2 @@
+export * from './chip-list';
+export * from './chip';

src/lib/index.ts

@@ -4,6 +4,7 @@ export * from './module';
 export * from './button/index';
 export * from './button-toggle/index';
 export * from './card/index';
+export * from './chips/index';
 export * from './checkbox/index';
 export * from './dialog/index';
 export * from './grid-list/index';

src/lib/module.ts

@@ -20,6 +20,7 @@ import {MdSidenavModule} from './sidenav/index';
 import {MdListModule} from './list/index';
 import {MdGridListModule} from './grid-list/index';
 import {MdCardModule} from './card/index';
+import {MdChipsModule} from './chips/index';
 import {MdIconModule} from './icon/index';
 import {MdProgressCircleModule} from './progress-circle/index';
 import {MdProgressBarModule} from './progress-bar/index';
@@ -36,6 +37,7 @@ const MATERIAL_MODULES = [
   MdButtonModule,
   MdButtonToggleModule,
   MdCardModule,
+  MdChipsModule,
   MdCheckboxModule,
   MdDialogModule,
   MdGridListModule,
@@ -66,6 +68,7 @@ const MATERIAL_MODULES = [
   imports: [
     MdButtonModule.forRoot(),
     MdCardModule.forRoot(),
+    MdChipsModule.forRoot(),
     MdCheckboxModule.forRoot(),
     MdGridListModule.forRoot(),
     MdInputModule.forRoot(),