Feature/new new chips

addon/components/paper-autocomplete.js

@@ -175,6 +175,7 @@ export default Ember.Component.extend({
       // no cache
 
       let data = this.filterArray(source, searchText, lookupKey);
+
       if (source.then && source.get('isFulfilled')) {
         // cache when we have a PromiseArray
         this.cacheSet(searchText, data);
@@ -240,11 +241,16 @@ export default Ember.Component.extend({
     },
 
     pickModel(model) {
-      this.set('model', model);
-      let value = this.lookupLabelOfItem(model);
-      // First set previousSearchText then searchText ( do not trigger observer only update value! ).
-      this.set('previousSearchText', value);
-      this.set('searchText', value);
+      if (this.attrs.pickModel) {
+        this.attrs.pickModel(model);
+      } else {
+        this.set('model', model);
+        let value = this.lookupLabelOfItem(model);
+        // First set previousSearchText then searchText ( do not trigger observer only update value! ).
+        this.set('previousSearchText', value);
+        this.set('searchText', value);
+      }
+
       this.set('hidden', true);
     },
 

addon/components/paper-chips.js

@@ -0,0 +1,25 @@
+import Ember from 'ember';
+
+const { get, Component } = Ember;
+
+export default Component.extend({
+  tagName: 'md-chips',
+  classNames: ['md-default-theme'],
+
+  actions: {
+    addItem(newItem) {
+      if (get(newItem, 'length')) {
+        this.sendAction('addItem', newItem);
+        this.set('newChipValue', '');
+      }
+    },
+
+    inputFocus() {
+      this.set('isFocused', true);
+    },
+
+    inputBlur() {
+      this.set('isFocused', false);
+    }
+  }
+});

addon/components/paper-contact-chips.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+let { Component } = Ember;
+
+export default Component.extend({
+  tagName: 'md-contact-chips',
+  classNames: ['md-default-theme'],
+
+  actions: {
+    inputFocus() {
+      this.set('isFocused', true);
+    },
+
+    inputBlur() {
+      this.set('isFocused', false);
+    }
+  }
+});

app/components/paper-chips.js

@@ -0,0 +1,3 @@
+import PaperChips from 'ember-paper/components/paper-chips';
+
+export default PaperChips;

app/components/paper-contact-chips.js

@@ -0,0 +1,3 @@
+import PaperContactChips from 'ember-paper/components/paper-contact-chips';
+
+export default PaperContactChips;

app/styles/ember-paper.scss

@@ -118,5 +118,8 @@
 @import './angular-material/components/dialog/dialog';
 @import './angular-material/components/dialog/dialog-theme';
 
+@import './angular-material/components/chips/chips';
+@import './angular-material/components/chips/chips-theme';
+
 // Backports of features from future versions of angular-material-source to this version
 @import './backports/paper-input';

app/templates/components/paper-chips.hbs

@@ -0,0 +1,29 @@
+<md-chips-wrap class="md-chips {{if isFocused 'md-focused'}}">
+  {{#each content as |item|}}
+    <md-chip class="md-chip md-default-theme">
+      <div class="md-chip-content" tabindex="-1" aria-hidden="true">
+        {{#if hasBlock}}
+          {{yield item}}
+        {{else}}
+          <span>{{item}}</span>
+        {{/if}}
+      </div>
+      <div class="md-chip-remove-container">
+        {{#unless readOnly}}
+          <button class="md-chip-remove" {{action (action removeItem item)}} type="button" aria-hidden="true" tabindex="-1">
+            {{paper-icon icon="clear"}}
+            <span class="md-visually-hidden"> Remove </span>
+          </button>
+        {{/unless}}
+      </div>
+      {{#unless readOnly}}
+        <span class="md-visually-hidden"> Press delete to remove this chip. </span>
+      {{/unless}}
+    </md-chip>
+  {{/each}}
+  {{#unless readOnly}}
+    <div class="md-chip-input-container">
+      {{input tabindex="0" placeholder=placeholder aria-label="Add Tag" value=newChipValue focus-in="inputFocus" focus-out="inputBlur" enter=(action 'addItem' newChipValue)}}
+    </div>
+  {{/unless}}
+</md-chips-wrap>

app/templates/components/paper-contact-chips.hbs

@@ -0,0 +1,37 @@
+<md-chips-wrap class="md-chips md-contact-chips {{if isFocused 'md-focused'}}">
+  {{#each content as |item|}}
+    <md-chip class="md-chip md-default-theme">
+      <div class="md-chip-content" tabindex="-1" aria-hidden="true">
+        <div class="md-contact-avatar">
+          <img src={{item.image}}>
+        </div>
+        <span class="md-contact-name">{{item.name}}</span>
+      </div>
+      <div class="md-chip-remove-container">
+        {{#unless readOnly}}
+          <button class="md-chip-remove" {{action (action removeItem item)}} type="button" aria-hidden="true" tabindex="-1">
+            {{paper-icon icon="clear"}}
+            <span class="md-visually-hidden"> Remove </span>
+          </button>
+        {{/unless}}
+      </div>
+      {{#unless readOnly}}
+        <span class="md-visually-hidden"> Press delete to remove this chip. </span>
+      {{/unless}}
+    </md-chip>
+  {{/each}}
+  {{#unless readOnly}}
+    {{#if source.length}}
+      <div class="md-chip-input-container">
+        {{#paper-autocomplete minLength=0 placeholder="Add A Contact" source=source lookupKey="email" pickModel=(action addItem) as |searchText item index|}}
+          <div class="md-contact-suggestion">
+            <img src={{item.image}} alt={{item.name}} class="md-contact-avatar">
+
+            <span class="md-contact-name">{{item.name}}</span>
+            <span class="md-contact-email">{{item.email}}</span>
+          </div>
+        {{/paper-autocomplete}}
+      </div>
+    {{/if}}
+  {{/unless}}
+</md-chips-wrap>

index.js

@@ -103,7 +103,10 @@ module.exports = {
       'components/backdrop/backdrop-theme.scss',
 
       'components/dialog/dialog.scss',
-      'components/dialog/dialog-theme.scss'
+      'components/dialog/dialog-theme.scss',
+
+      'components/chips/chips.scss',
+      'components/chips/chips-theme.scss',
     ];
 
     /*

tests/dummy/app/controllers/demo/chips.js

@@ -0,0 +1,57 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  fruitNames: Ember.A(['Apple', 'Banana', 'Orange']),
+
+  customFruitNames: Ember.A(['Apple', 'Banana', 'Orange']),
+
+  contacts: Ember.A([{
+    name: 'James',
+    email: 'james@ember.com',
+    image: 'tomster.png'
+  }]),
+
+  allContacts: Ember.A([{
+    name: 'James',
+    email: 'james@ember.com',
+    image: 'tomster.png'
+  }, {
+    name: 'Chris',
+    email: 'chris@ember.com',
+    image: 'tomster.png'
+  }]),
+
+  remainingContacts: Ember.computed('allContacts.@each.email', 'contacts.@each.email', function() {
+    return this.get('allContacts').filter((source) => {
+      return !this.get('contacts').any(function(myContact) {
+        return source.email === myContact.email;
+      });
+    });
+  }),
+
+  actions: {
+    removeItem(item) {
+      this.get('fruitNames').removeObject(item);
+    },
+
+    addItem(item) {
+      this.get('fruitNames').pushObject(item);
+    },
+
+    removeCustomItem(item) {
+      this.get('customFruitNames').removeObject(item);
+    },
+
+    addCustomItem(item) {
+      this.get('customFruitNames').pushObject(item);
+    },
+
+    addContact(item) {
+      this.get('contacts').pushObject(item);
+    },
+
+    removeContact(item) {
+      this.get('contacts').removeObject(item);
+    }
+  }
+});

tests/dummy/app/router.js

@@ -15,6 +15,7 @@ Router.map(function() {
     this.route('button');
     this.route('card');
     this.route('checkbox');
+    this.route('chips');
     this.route('dialog');
     this.route('divider');
     this.route('grid-list');

tests/dummy/app/templates/application.hbs

@@ -21,6 +21,7 @@
             {{#submenu-item active=(is-active "demo.button" currentRouteName) onClick=(transition-to "demo.button")}}Button{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.card" currentRouteName) onClick=(transition-to "demo.card")}}Card{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.checkbox" currentRouteName) onClick=(transition-to "demo.checkbox")}}Checkbox{{/submenu-item}}
+            {{#submenu-item active=(is-active "demo.chips" currentRouteName) onClick=(transition-to "demo.chips")}}Chips{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.dialog" currentRouteName) onClick=(transition-to "demo.dialog")}}Dialog{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.grid-list" currentRouteName) onClick=(transition-to "demo.grid-list")}}Grid List {{paper-icon "warning" title="Not updated yet."}}{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.icons" currentRouteName) onClick=(transition-to "demo.icons")}}Icons{{/submenu-item}}

tests/dummy/app/templates/demo/chips.hbs

@@ -0,0 +1,24 @@
+{{page-toolbar pageTitle="Chips" isDemo=true}}
+
+{{#doc-content}}
+
+  {{! BEGIN-SNIPPET chips.example }}
+  <h2>Default Template</h2>
+  {{paper-chips content=fruitNames readOnly=readOnly removeItem=(action 'removeItem') addItem=(action 'addItem') placeholder="Add a tag"}}
+
+  <h2>Custom Template</h2>
+  {{#paper-chips readOnly=readOnly removeItem=(action 'removeCustomItem') addItem=(action 'addCustomItem') placeholder="Add a tag" content=customFruitNames as |item|}}
+    <strong>{{item}}</strong>
+    <em>(fruit)</em>
+  {{/paper-chips}}
+
+  <h2>Contact Chips</h2>
+  {{paper-contact-chips class="md-contact-chips" readOnly=readOnly removeItem=(action 'removeContact') addItem=(action 'addContact') placeholder="Add a tag" content=contacts source=remainingContacts}}
+
+  {{#paper-checkbox value=readOnly onChange=(action (mut readOnly))}}Read Only{{/paper-checkbox}}
+  {{! END-SNIPPET }}
+
+  <h3>Template</h3>
+  {{code-snippet name="chips.example.hbs"}}
+
+{{/doc-content}}