feat(chips): Initial skeleton/demo. (#1855)

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: []
+    };
+  }
+}

src/lib/chips/chip.spec.ts

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

src/lib/chips/chip.ts

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

src/lib/chips/chips.scss

@@ -0,0 +1,16 @@
+$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;
+
+  font-size: 13px;
+  line-height: 16px;
+}

src/lib/chips/index.ts

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

src/lib/core/theming/_all-theme.scss

@@ -4,6 +4,7 @@
 @import '../../button-toggle/button-toggle-theme';
 @import '../../card/card-theme';
 @import '../../checkbox/checkbox-theme';
+@import '../../chips/chips-theme';
 @import '../../dialog/dialog-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
@@ -29,6 +30,7 @@
   @include md-button-toggle-theme($theme);
   @include md-card-theme($theme);
   @include md-checkbox-theme($theme);
+  @include md-chips-theme($theme);
   @include md-dialog-theme($theme);
   @include md-grid-list-theme($theme);
   @include md-icon-theme($theme);

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

@@ -21,6 +21,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';
@@ -37,6 +38,7 @@ const MATERIAL_MODULES = [
   MdButtonModule,
   MdButtonToggleModule,
   MdCardModule,
+  MdChipsModule,
   MdCheckboxModule,
   MdDialogModule,
   MdGridListModule,
@@ -68,6 +70,7 @@ const MATERIAL_MODULES = [
   imports: [
     MdButtonModule.forRoot(),
     MdCardModule.forRoot(),
+    MdChipsModule.forRoot(),
     MdCheckboxModule.forRoot(),
     MdGridListModule.forRoot(),
     MdInputModule.forRoot(),