feat(chips): implement chips and chip-sets

README.md

@@ -24,7 +24,7 @@ Component            | Documentation |
 button               | [button docs & demo](https://blox.src.zone/material/directives/button) |
 card                 | [card docs & demo](https://blox.src.zone/material/directives/card) |
 checkbox             | [checkbox docs & demo](https://blox.src.zone/material/directives/checkbox) |
-chips                | in tracker |
+chips                | [chips docs & demo](https://blox.src.zone/material/directives/chips) |
 dialog               | [dialog docs & demo](https://blox.src.zone/material/directives/drawer) |
 drawer               | [drawer docs & demo](https://blox.src.zone/material/directives/drawer) |
 elevation            | [elevation docs & demo](https://blox.src.zone/material/directives/elevation) |

bundle/src/components/chips/mdc.chip-set.adapter.ts

@@ -0,0 +1,8 @@
+/** @docs-private */
+export interface MdcChipSetAdapter {
+    hasClass: (className: string) => boolean,
+    registerInteractionHandler: (evtType: string, handler: EventListener) => void,
+    deregisterInteractionHandler: (evtType: string, handler: EventListener) => void,
+    appendChip: (text: string, leadingIcon: Element, trailingIcon: Element) => Element,
+    removeChip: (chip: any) => void
+}

bundle/src/components/chips/mdc.chip.adapter.ts

@@ -0,0 +1,18 @@
+/** @docs-private */
+export interface MdcChipAdapter {
+    addClass: (className: string) => void,
+    removeClass: (className: string) => void,
+    hasClass: (className: string) => boolean,
+    addClassToLeadingIcon: (className: string) => void,
+    removeClassFromLeadingIcon: (className: string) => void,
+    eventTargetHasClass: (target: EventTarget, className: string) => boolean,
+    registerEventHandler: (evtType: string, handler: EventListener) => void,
+    deregisterEventHandler: (evtType: string, handler: EventListener) => void,
+    registerTrailingIconInteractionHandler: (evtType: string, handler: EventListener) => void,
+    deregisterTrailingIconInteractionHandler: (evtType: string, handler: EventListener) => void,
+    notifyInteraction: () => void,
+    notifyTrailingIconInteraction: () => void,
+    notifyRemoval: () => void,
+    getComputedStyleValue: (propertyName: string) => string,
+    setStyleProperty: (propertyName: string, value: string) => void
+}

bundle/src/material.module.ts

@@ -10,6 +10,7 @@ import { MdcCardDirective,
     MdcCardPrimaryActionDirective } from './components/card/mdc.card.directive';
 import { MdcCheckboxDirective,
     MdcCheckboxInputDirective } from './components/checkbox/mdc.checkbox.directive';
+import { CHIP_DIRECTIVES } from './components/chips/mdc.chip.directive';
 import { DIALOG_DIRECTIVES } from './components/dialog/mdc.dialog.directive';
 import { MdcDrawerDirective,
     MdcDrawerContainerDirective,
@@ -84,6 +85,7 @@ export { MdcCardDirective,
     MdcCardPrimaryActionDirective } from './components/card/mdc.card.directive';
 export { MdcCheckboxDirective,
     MdcCheckboxInputDirective } from './components/checkbox/mdc.checkbox.directive';
+export * from './components/chips/mdc.chip.directive';
 export * from './components/dialog/mdc.dialog.directive';
 export { MdcDrawerDirective,
     MdcDrawerContainerDirective,
@@ -160,6 +162,7 @@ export { MdcEventRegistry } from './utils/mdc.event.registry';
         MdcCardDirective, MdcCardMediaDirective, MdcCardMediaContentDirective,
         MdcCardActionButtonsDirective, MdcCardActionIconsDirective, MdcCardActionsDirective, MdcCardPrimaryActionDirective,
         MdcCheckboxDirective, MdcCheckboxInputDirective,
+        ...CHIP_DIRECTIVES,
         ...DIALOG_DIRECTIVES,
         MdcDrawerDirective, MdcDrawerContainerDirective, MdcDrawerToolbarSpacerDirective, MdcDrawerHeaderDirective, MdcDrawerHeaderContentDirective, MdcDrawerContentDirective,
         MdcElevationDirective,
@@ -191,6 +194,7 @@ export { MdcEventRegistry } from './utils/mdc.event.registry';
         MdcCardDirective, MdcCardMediaDirective, MdcCardMediaContentDirective,
         MdcCardActionButtonsDirective, MdcCardActionIconsDirective, MdcCardActionsDirective, MdcCardPrimaryActionDirective,
         MdcCheckboxDirective, MdcCheckboxInputDirective,
+        ...CHIP_DIRECTIVES,
         ...DIALOG_DIRECTIVES,
         MdcDrawerDirective, MdcDrawerContainerDirective, MdcDrawerToolbarSpacerDirective, MdcDrawerHeaderDirective, MdcDrawerHeaderContentDirective, MdcDrawerContentDirective,
         MdcElevationDirective,

bundle/tools/ngbundler/index.ts

@@ -9,6 +9,7 @@ const globals = {
   '@angular/router': 'ng.router',
   '@material/animation': 'mdc.animation',
   '@material/checkbox': 'mdc.checkbox',
+  '@material/chips': 'mdc.chips',
   '@material/dialog': 'mdc.dialog',
   '@material/drawer': 'mdc.drawer',
   '@material/drawer/slidable': 'mdc.drawer',

site/src/app/app.module.ts

@@ -24,6 +24,7 @@ import {
   SnippetButtonComponent,
   SnippetCardComponent,
   SnippetCheckboxComponent,
+  SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
   SnippetDialogComponent,
   SnippetDrawerPermanentBelowComponent,
   SnippetDrawerPermanentComponent,
@@ -77,6 +78,7 @@ import { ThemeService } from './services';
     SnippetButtonComponent,
     SnippetCardComponent,
     SnippetCheckboxComponent,
+    SnippetChipsComponent, SnippetChipsChoiceComponent, SnippetChipsFilterComponent, SnippetChipsInputComponent,
     SnippetDialogComponent,
     SnippetDrawerPermanentBelowComponent,
     SnippetDrawerPermanentComponent,

site/src/app/app.routes.ts

@@ -12,6 +12,7 @@ import {
     ButtonDirectivesComponent,
     CardDirectivesComponent,
     CheckboxDirectivesComponent,
+    ChipsDirectivesComponent,
     DialogDirectivesComponent,
     DrawerDirectivesComponent,
     ElevationDirectivesComponent,
@@ -45,6 +46,7 @@ export const routes: Routes = [
         {path: ButtonDirectivesComponent.DOC_HREF, component: ButtonDirectivesComponent},
         {path: CardDirectivesComponent.DOC_HREF, component: CardDirectivesComponent},
         {path: CheckboxDirectivesComponent.DOC_HREF, component: CheckboxDirectivesComponent},
+        {path: ChipsDirectivesComponent.DOC_HREF, component: ChipsDirectivesComponent},
         {path: DialogDirectivesComponent.DOC_HREF, component: DialogDirectivesComponent},
         {path: DrawerDirectivesComponent.DOC_HREF, component: DrawerDirectivesComponent},
         {path: ElevationDirectivesComponent.DOC_HREF, component: ElevationDirectivesComponent},

site/src/app/components/directives.demo/chips.directives.component.html

@@ -0,0 +1,24 @@
+<h1>Chips</h1>
+<p>Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
+</p>
+<blox-code-sample>
+  <span bloxSampleTitle>Action Chips Demo</span>
+  <blox-snippet-chips bloxSample></blox-snippet-chips>
+</blox-code-sample>
+<br/>
+<blox-code-sample>
+  <span bloxSampleTitle>Choice Chips Demo</span>
+  <blox-snippet-chips-choice bloxSample></blox-snippet-chips-choice>
+</blox-code-sample>
+<br/>
+<blox-code-sample>
+  <span bloxSampleTitle>Filter Chips Demo</span>
+  <blox-snippet-chips-filter bloxSample></blox-snippet-chips-filter>
+</blox-code-sample>
+<br/>
+<blox-code-sample>
+  <span bloxSampleTitle>Input Chips Demo</span>
+  <blox-snippet-chips-input bloxSample></blox-snippet-chips-input>
+</blox-code-sample>
+
+<div class="blox-docs-api">${require('@blox/material/apidocs/chips.html')}</div>

site/src/app/components/directives.demo/chips.directives.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'blox-chips-directives',
+  templateUrl: './chips.directives.component.html'
+})
+export class ChipsDirectivesComponent {
+    static DOC_SVG = require('assets/img/mdc-icons/chip.svg');
+    static DOC_TYPE = 'components';
+    static DOC_HREF = 'chips';
+
+    constructor() {
+    }
+}

site/src/app/components/directives.demo/index.ts

@@ -1,6 +1,7 @@
 import { ButtonDirectivesComponent } from './button.directives.component';
 import { CardDirectivesComponent } from './card.directives.component';
 import { CheckboxDirectivesComponent } from './checkbox.directives.component';
+import { ChipsDirectivesComponent } from './chips.directives.component';
 import { DialogDirectivesComponent } from './dialog.directives.component';
 import { DrawerDirectivesComponent } from './drawer.directives.component';
 import { ElevationDirectivesComponent } from './elevation.directives.component';
@@ -24,6 +25,7 @@ import { UtilityDirectivesComponent } from './utility.directives.component';
 export * from './button.directives.component';
 export * from './card.directives.component';
 export * from './checkbox.directives.component';
+export * from './chips.directives.component';
 export * from './dialog.directives.component';
 export * from './drawer.directives.component';
 export * from './elevation.directives.component';
@@ -48,6 +50,7 @@ export const MDC_DIRECTIVE_DOC_COMPONENTS = [
     ButtonDirectivesComponent,
     CardDirectivesComponent,
     CheckboxDirectivesComponent,
+    ChipsDirectivesComponent,
     DialogDirectivesComponent,
     DrawerDirectivesComponent,
     ElevationDirectivesComponent,

site/src/app/components/snippets/directives/index.ts

@@ -1,6 +1,10 @@
 export * from './snippet.button.component';
 export * from './snippet.card.component';
 export * from './snippet.checkbox.component';
+export * from './snippet.chips.component';
+export * from './snippet.chips.choice.component';
+export * from './snippet.chips.filter.component';
+export * from './snippet.chips.input.component';
 export * from './snippet.dialog.component';
 export * from './snippet.drawer.permanent.below.component';
 export * from './snippet.drawer.permanent.component';

site/src/app/components/snippets/directives/snippet.chips.choice.component.html

@@ -0,0 +1,9 @@
+<fieldset class="blox-snippet snippet-skip-line">
+<div mdcChipSet="choice">
+  <div mdcChip><div mdcChipText>Extra Small</div></div>
+  <div mdcChip><div mdcChipText>Small</div></div>
+  <div mdcChip><div mdcChipText>Medium</div></div>
+  <div mdcChip><div mdcChipText>Large</div></div>
+  <div mdcChip><div mdcChipText>Extra Large</div></div>
+</div>
+</fieldset><div class="snippet-skip-line"></div>

site/src/app/components/snippets/directives/snippet.chips.choice.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+//snip:skip
+import { forwardRef } from '@angular/core';
+import { AbstractSnippetComponent } from '../abstract.snippet.component';
+//snip:endskip
+@Component({
+    //snip:skip
+    providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsChoiceComponent)}],
+    //snip:endskip
+    selector: 'blox-snippet-chips-choice',
+    templateUrl: './snippet.chips.choice.component.html'
+})
+export class SnippetChipsChoiceComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ {
+    //snip:skip
+    constructor() {
+        super({
+          'html': require('!raw-loader!./snippet.chips.choice.component.html'),
+          'typescript': require('!raw-loader!./snippet.chips.choice.component.ts')
+        });
+    }
+    //snip:endskip
+}

site/src/app/components/snippets/directives/snippet.chips.component.html

@@ -0,0 +1,20 @@
+<fieldset class="blox-snippet snippet-skip-line">
+<div mdcChipSet>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">wb_sunny</i>
+    <div mdcChipText>Turn lights on</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">bookmark</i>
+    <div mdcChipText>Bookmark</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">alarm</i>
+    <div mdcChipText>Set alarm</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">directions</i>
+    <div mdcChipText>Get directions</div>
+  </div>
+</div>
+</fieldset><div class="snippet-skip-line"></div>

site/src/app/components/snippets/directives/snippet.chips.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+//snip:skip
+import { forwardRef } from '@angular/core';
+import { AbstractSnippetComponent } from '../abstract.snippet.component';
+//snip:endskip
+@Component({
+    //snip:skip
+    providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsComponent)}],
+    //snip:endskip
+    selector: 'blox-snippet-chips',
+    templateUrl: './snippet.chips.component.html'
+})
+export class SnippetChipsComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ {
+    //snip:skip
+    constructor() {
+        super({
+          'html': require('!raw-loader!./snippet.chips.component.html'),
+          'typescript': require('!raw-loader!./snippet.chips.component.ts')
+        });
+    }
+    //snip:endskip
+}

site/src/app/components/snippets/directives/snippet.chips.filter.component.html

@@ -0,0 +1,20 @@
+<fieldset class="blox-snippet snippet-skip-line">
+<div mdcChipSet="filter">
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">message</i>
+    <div mdcChipText>Messages</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">notification_important</i>
+    <div mdcChipText>Notifications</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">warning</i>
+    <div mdcChipText>Warnings</div>
+  </div>
+  <div mdcChip>
+    <i mdcChipIcon class="material-icons">error</i>
+    <div mdcChipText>Errors</div>
+  </div>
+</div>
+</fieldset><div class="snippet-skip-line"></div>

site/src/app/components/snippets/directives/snippet.chips.filter.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+//snip:skip
+import { forwardRef } from '@angular/core';
+import { AbstractSnippetComponent } from '../abstract.snippet.component';
+//snip:endskip
+@Component({
+    //snip:skip
+    providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsFilterComponent)}],
+    //snip:endskip
+    selector: 'blox-snippet-chips-filter',
+    templateUrl: './snippet.chips.filter.component.html'
+})
+export class SnippetChipsFilterComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ {
+    //snip:skip
+    constructor() {
+        super({
+          'html': require('!raw-loader!./snippet.chips.filter.component.html'),
+          'typescript': require('!raw-loader!./snippet.chips.filter.component.ts')
+        });
+    }
+    //snip:endskip
+}

site/src/app/components/snippets/directives/snippet.chips.input.component.html

@@ -0,0 +1,16 @@
+<fieldset class="blox-snippet snippet-skip-line">
+<div mdcChipSet="input">
+  <div *ngFor="let chip of chips; let i = index" mdcChip (remove)="removeChip(i)">
+    <i mdcChipIcon class="material-icons">face</i>
+    <div mdcChipText>{{chip}}</div>
+    <i class="material-icons" mdcChipIcon>cancel</i>
+  </div>
+</div>
+<form (submit)="addChip()">
+  <div mdcTextField>
+    <input mdcTextFieldInput type="text" name="chipInput" [(ngModel)]="newChip" autocomplete="off"/>
+    <label mdcFloatingLabel>Add Chip</label>
+  </div>
+  <button type="submit" mdcButton [disabled]="!newChip">Add Chip</button>
+</form>
+</fieldset><div class="snippet-skip-line"></div>

site/src/app/components/snippets/directives/snippet.chips.input.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+//snip:skip
+import { forwardRef } from '@angular/core';
+import { AbstractSnippetComponent } from '../abstract.snippet.component';
+//snip:endskip
+@Component({
+    //snip:skip
+    providers: [{provide: AbstractSnippetComponent, useExisting: forwardRef(() => SnippetChipsInputComponent)}],
+    //snip:endskip
+    selector: 'blox-snippet-chips-input',
+    templateUrl: './snippet.chips.input.component.html'
+})
+export class SnippetChipsInputComponent/*snip:skip*/extends AbstractSnippetComponent/*snip:endskip*/ {
+    chips = [ 'claire', 'pete', 'anne' ];
+    newChip: string;
+
+    //snip:skip
+    constructor() {
+        super({
+          'html': require('!raw-loader!./snippet.chips.input.component.html'),
+          'typescript': require('!raw-loader!./snippet.chips.input.component.ts')
+        });
+    }
+    //snip:endskip
+
+    addChip() {
+        if (this.newChip) {
+            let value = this.newChip.trim();
+            if (value.length)
+                this.chips.push(value);
+        }
+        this.newChip = null;
+    }
+
+    removeChip(index: number) {
+        this.chips.splice(index, 1);
+    }
+}

site/src/app/messages.json

@@ -11,6 +11,9 @@
     "components.checkbox.title": "Checkbox",
     "components.checkbox.description": "Multi selection controls",
     "components.checkbox.meta.description": "Checkbox (mdcCheckbox) component of ${default.meta.description}",
+    "components.chips.title": "Chips",
+    "components.chips.description": "Chips for actions, selection, and input",
+    "components.chips.meta.description": "Chips (mdcChip, mdcChipSet) components of ${default.meta.description}",
     "components.dialog.title": "Dialog",
     "components.dialog.description": "Modal Dialogs",
     "components.dialog.meta.description": "Dialog (mdcDialog) component of ${default.meta.description}",