Feature/new chips

addon/components/paper-autocomplete.js

@@ -115,7 +115,7 @@ export default Ember.Component.extend(HasBlockMixin, {
       this.set('previousSearchText', searchText);
     }
   }),
-  
+
   modelDidChange: Ember.observer('model', function() {
     var model = this.get('model');
     var value = this.lookupLabelOfItem(model);
@@ -220,7 +220,7 @@ export default Ember.Component.extend(HasBlockMixin, {
   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');
   }),
 
   /**
@@ -244,11 +244,16 @@ export default Ember.Component.extend(HasBlockMixin, {
     },
 
     pickModel(model) {
-      this.set('model', model);
-      var 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);
+        var 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: function(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: function(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

@@ -98,3 +98,6 @@
 
 @import './angular-material/components/backdrop/backdrop';
 @import './angular-material/components/backdrop/backdrop-theme';
+
+@import './angular-material/components/chips/chips';
+@import './angular-material/components/chips/chips-theme';

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

@@ -100,7 +100,10 @@ module.exports = {
       'components/sidenav/sidenav.scss',
 
       'components/backdrop/backdrop.scss',
-      'components/backdrop/backdrop-theme.scss'
+      'components/backdrop/backdrop-theme.scss',
+
+      'components/chips/chips.scss',
+      'components/chips/chips-theme.scss'
     ];
 
     var angularScssFiles = new Funnel('node_modules/angular-material-source/src', {

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: '[email protected]',
+    image: 'tomster.png'
+  }]),
+
+  allContacts: Ember.A([{
+    name: 'James',
+    email: '[email protected]',
+    image: 'tomster.png'
+  }, {
+    name: 'Chris',
+    email: '[email protected]',
+    image: 'tomster.png'
+  }]),
+
+  remainingContacts: Ember.computed('[email protected]', '[email protected]', 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

@@ -27,6 +27,7 @@ Router.map(function() {
   this.route('paper-select');
   this.route('menu');
   this.route('grid-list');
+  this.route('chips');
 });
 
 export default Router;

tests/dummy/app/styles/app.scss

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

tests/dummy/app/templates/application.hbs

@@ -32,6 +32,7 @@
         {{#paper-item action="transitionTo" param="input"}}Input{{/paper-item}}
         {{#paper-item action="transitionTo" param="toolbar"}}Toolbar{{/paper-item}}
         {{#paper-item action="transitionTo" param="icons"}}Icons{{/paper-item}}
+        {{#paper-item action="transitionTo" param="chips"}}Chips{{/paper-item}}
       {{/paper-list}}
 
     {{/paper-content}}

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 checked=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 checked=readOnly}}Read Only\{{/paper-checkbox}}
+    {{/code-block}}
+  </div>
+{{/paper-content}}