Merge branch 'feature/chips' into wow

* feature/chips:
  fixing jscs
  cleaning up code to jscs style
  convering template to hasBlock
  importing chips from angular-material
  fixing an issue with length checking
  adding basic contact chips
  fixing scrolling issue
  escaping {{item}}
  fixing chips implementation based on new master
  fixing deprecation warning
  updating the demo
  adding the ability to include custom templates
  implementing basic 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);
@@ -216,7 +217,7 @@ export default Ember.Component.extend({
   shouldHide: Ember.computed.not('isMinLengthMet'),
 
   isMinLengthMet: Ember.computed('searchText', 'minLength', function() {
-    return this.get('searchText').length >= this.get('minLength');
+    return this.get('searchText.length') >= this.get('minLength');
   }),
 
   /*
@@ -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,27 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'md-chips',
+  classNames: ['md-default-theme'],
+
+  actions: {
+    removeItem(item) {
+      this.sendAction('removeItem', item);
+    },
+
+    addItem() {
+      if (this.get('newItem.length')) {
+        this.sendAction('addItem', this.get('newItem'));
+        this.set('newItem', '');
+      }
+    },
+
+    inputFocus() {
+      this.set('isFocused', true);
+    },
+
+    inputBlur() {
+      this.set('isFocused', false);
+    }
+  }
+});

addon/components/paper-contact-chips.js

@@ -0,0 +1,24 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'md-contact-chips',
+  classNames: ['md-default-theme'],
+
+  actions: {
+    removeItem(item) {
+      this.sendAction('removeItem', item);
+    },
+
+    addItem(item) {
+      this.sendAction('addItem', item);
+    },
+
+    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 '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=newItem focus-in="inputFocus" focus-out="inputBlur" enter='addItem'}}
+    </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 '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

@@ -102,7 +102,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/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/styles/app.scss

@@ -10,7 +10,6 @@ $accent: 'pink';
  */
 
 body {
-  overflow: hidden;
   max-width: 100%;
   max-height: 100%;
 }

tests/dummy/app/templates/chips.hbs

@@ -0,0 +1,46 @@
+{{#paper-toolbar}}
+  <h2 class="md-toolbar-tools">
+    {{#paper-sidenav-toggle class="menu-sidenav-toggle" }}
+      {{paper-icon icon="menu"}}
+    {{/paper-sidenav-toggle}}
+    <span>Chips</span>
+  </h2>
+{{/paper-toolbar}}
+{{#paper-content classNames="md-padding demo-buttons" }}
+  <div class="doc-content">
+    {{#paper-card}}
+      <md-card-content>
+        <h2>Default Template</h2>
+        {{paper-chips content=fruitNames readOnly=readOnly removeItem="removeItem" addItem="addItem" placeholder="Add a tag"}}
+
+        <h2>Custom Template</h2>
+        {{#paper-chips readOnly=readOnly removeItem="removeCustomItem" addItem="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="removeContact" addItem="addContact" placeholder="Add a tag" content=contacts source=remainingContacts}}
+
+        {{#paper-checkbox value=readOnly onChange=(action (mut readOnly))}}Read Only{{/paper-checkbox}}
+      </md-card-content>
+    {{/paper-card}}
+
+    <h3>Template</h3>
+    {{#code-block language='handlebars' }}
+&lt;h2&gt;Default Template&lt;/h2&gt;
+\{{paper-chips content=fruitNames readOnly=readOnly removeItem=&quot;removeItem&quot; addItem=&quot;addItem&quot; placeholder=&quot;Add a tag&quot;}}
+
+&lt;h2&gt;Custom Template&lt;/h2&gt;
+\{{#paper-chips readOnly=readOnly removeItem=&quot;removeCustomItem&quot; addItem=&quot;addCustomItem&quot; placeholder=&quot;Add a tag&quot; content=customFruitNames as |item|}}
+  &lt;strong&gt;\{{item}}&lt;/strong&gt;
+  &lt;em&gt;(fruit)&lt;/em&gt;
+\{{/paper-chips}}
+
+&lt;h2&gt;Contact Chips&lt;/h2&gt;
+\{{paper-contact-chips class="md-contact-chips" readOnly=readOnly removeItem="removeContact" addItem="addContact" placeholder="Add a tag" content=contacts source=remainingContacts}}
+
+\{{#paper-checkbox value=readOnly checked=(action (mut readOnly))}}Read Only\{{/paper-checkbox}}
+    {{/code-block}}
+  </div>
+{{/paper-content}}