Add Chips to paper-menu branch

addon/components/paper-chips.js

@@ -0,0 +1,226 @@
+import Ember from 'ember';
+
+const { Component, isEmpty, isPresent, computed, observer, run } = Ember;
+
+export default Component.extend({
+  tagName: 'md-chips',
+  classNames: ['md-default-theme'],
+  activeChip: -1,
+  focusedElement: 'none',
+  isFocused: computed('focusedElement', function() {
+    if (this.get('focusedElement') === 'none') {
+      return false;
+    }
+
+    return true;
+  }),
+  resetTimer: null,
+  lastItemChosen: false,
+
+  handleFocusChange: observer('focusedElement', 'activeChip', function() {
+    let element = this.get('focusedElement');
+
+    if (!this.get('isFocused')) {
+      this.set('activeChip', -1);
+    }
+
+    if ((element === 'chips' && (this.get('activeChip') !== -1)) || element === 'input') {
+      this.sendAction('focusIn', window.event);
+    } else {
+      this.sendAction('focusOut', window.event);
+    }
+  }),
+
+  actions: {
+    addItem(newItem) {
+      if (this.get('requireMatch')) {
+        // Don't add a new item - we're set to require a match.
+        return;
+      }
+
+      if (isPresent(newItem)) {
+        let item = newItem;
+
+        if (isPresent(this.get('searchField'))) {
+          item = {};
+          item[this.get('searchField')] = newItem;
+        }
+
+        this.sendAction('addItem', item);
+        this.set('newChipValue', '');
+
+        if (isPresent(this.get('autocomplete'))) {
+          // We have an autocomplete - reset it once it's closed itself.
+          this.queueReset();
+        }
+      }
+    },
+
+    inputFocus(autocomplete) {
+      let input = this.getInput();
+
+      this.set('focusedElement', 'input');
+
+      if (!this.get('content').length && !input.is(':focus')) {
+        input.focus();
+      } else {
+        this.set('activeChip', -1);
+      }
+
+      // Keep track of the autocomplete, so we can force it to close when navigating to chips.
+      if (isEmpty(this.get('autocomplete')) && input.is('.ember-power-select-typeahead-input')) {
+        this.set('autocomplete', autocomplete);
+      }
+    },
+
+    inputBlur() {
+      if (this.focusMovingTo('.ember-power-select-option')) {
+        // Focus has shifted to an item - don't mess with this event.
+        return true;
+      }
+
+      if (this.get('lastItemChosen')) {
+        // Last item has been chosen; select will be replaced with an input - ignore blur event.
+        this.set('lastItemChosen', false);
+        return true;
+      }
+
+      this.closeAutocomplete();
+
+      if (!this.focusMovingTo('md-chips-wrap')) {
+        this.set('focusedElement', 'none');
+      }
+    },
+
+    chipsFocus() {
+      this.set('focusedElement', 'chips');
+    },
+
+    chipsBlur() {
+      if (!this.focusMovingTo(this.getInput())) {
+        this.set('focusedElement', 'none');
+      }
+    },
+
+    autocompleteChange(item) {
+      if (item) {
+        // Trigger onChange for the new item.
+        this.sendAction('addItem', item);
+
+        this.queueReset();
+
+        // Track selection of last item if no match required.
+        if (this.get('source').length === 1 && !this.get('requireMatch')) {
+          this.set('lastItemChosen', true);
+          this.set('autocomplete', null);
+        }
+
+        return true;
+      }
+    },
+
+    keyDown(event) {
+      let [input] = this.getInput();
+      if (!this.get('readOnly') && isEmpty(input.value) && isPresent(this.get('content'))) {
+        this.keyboardNavigation(event);
+        if (this.get('activeChip') >= 0) {
+          this.closeAutocomplete();
+        }
+      } else {
+        // Make sure we don't leave a chip focused while typing.
+        this.set('activeChip', -1);
+        this.set('focusedElement', 'input');
+      }
+    },
+
+    noUnselected(old, event) {
+      if (['Backspace', 'Delete', 'Del', 'ArrowLeft', 'Left', 'ArrowRight', 'Right'].includes(event.key)) {
+        this.sendAction('keyDown', event);
+      } else if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
+        // Reject printable key presses
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+
+    }
+  },
+
+  keyboardNavigation({ key }) {
+    // No text has been entered, but we have chips; cursor keys should select chips.
+    let current = this.get('activeChip');
+    let chips = this.get('content');
+    let input = this.getInput();
+
+    if (['ArrowLeft', 'Left'].includes(key) || (key === 'Backspace' && current === -1)) {
+      if (current === -1) {
+        input.blur();
+        this.$('md-chips-wrap', this.element).focus();
+        this.set('activeChip', chips.length - 1);
+      } else if (current > 0) {
+        this.decrementProperty('activeChip');
+      }
+    } else if (['ArrowRight', 'Right'].includes(key)) {
+      if (current >= 0) {
+        this.incrementProperty('activeChip');
+      }
+
+      if (this.get('activeChip') >= chips.length) {
+        this.set('activeChip', -1);
+        input.focus();
+      }
+    } else if (current >= 0 && ['Backspace', 'Delete', 'Del'].includes(key)) {
+      this.sendAction('removeItem', chips[current]);
+      if (current >= chips.length) {
+        this.queueReset();
+        this.set('activeChip', -1);
+      }
+    }
+  },
+
+  resetInput() {
+    let select = this.get('autocomplete');
+    let input = this.getInput();
+
+    if (input.is('.ember-power-select-typeahead-input') && isPresent(select)) {
+      // Reset the underlying ember-power-select so that it's ready for another selection.
+      input.val('');
+      select.actions.search('');
+
+      // Re-open ember-power-select to trigger it to reposition the dropdown.
+      select.actions.close();
+      select.actions.open();
+    }
+
+    input.focus();
+
+    this.set('focusedElement', 'input');
+    this.set('resetTimer', null);
+  },
+
+  queueReset() {
+    if (this.get('resetTimer')) {
+      run.cancel(this.get('resetTimer'));
+    }
+
+    this.set('resetTimer', run.next(this, this.resetInput));
+  },
+
+  closeAutocomplete() {
+    if (!isEmpty(this.get('autocomplete')) && !isEmpty(this.get('autocomplete').actions)) {
+      this.get('autocomplete').actions.close();
+    }
+  },
+
+  getInput() {
+    return this.$('.md-chip-input-container input');
+  },
+
+  focusMovingTo(selector) {
+    if (!isEmpty(event) && !isEmpty(event.relatedTarget) && this.$(event.relatedTarget).is(selector)) {
+      return true;
+    }
+
+    return false;
+  }
+});

addon/components/paper-contact-chips.js

@@ -0,0 +1,6 @@
+import PaperChips from 'ember-paper/components/paper-chips';
+
+export default PaperChips.extend({
+  tagName: 'md-contact-chips',
+  classNames: ['md-default-theme']
+});

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

@@ -139,6 +139,9 @@
 
 @import './angular-material/components/virtualRepeat/virtual-repeater';
 
+@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';
 @import './backports/paper-select';

app/templates/components/paper-chips.hbs

@@ -0,0 +1,39 @@
+<md-chips-wrap class="md-chips {{if isFocused 'md-focused'}}" tabindex="-1" onkeydown={{action 'keyDown'}} onfocus={{action 'chipsFocus'}} onblur={{action 'chipsBlur'}}>
+  {{#each content as |item index|}}
+    <md-chip class="md-chip md-default-theme {{if (eq activeChip index) 'md-focused'}}">
+      <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" size=18}}
+            <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">
+      {{#if (or requireMatch source)}}
+        {{#paper-autocomplete closeOnSelect=false onBlur=(action 'inputBlur') onSelectionChange=(action 'autocompleteChange') onFocus=(action 'inputFocus') onOpen=(action 'inputFocus') onCreate=(action 'addItem') placeholder=placeholder options=source searchField=searchField noMatchesMessage=noMatchesMessage as |item|}}
+          {{#if hasBlock}}
+            {{yield item}}
+          {{else}}
+            <span>{{item}}</span>
+          {{/if}}
+        {{/paper-autocomplete}}
+      {{else}}
+        {{input tabindex="0" placeholder=placeholder aria-label="Add Tag" value=newChipValue focus-in="inputFocus" focus-out="inputBlur" enter=(action 'addItem' newChipValue)}}
+      {{/if}}
+    </div>
+  {{/unless}}
+</md-chips-wrap>

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

@@ -0,0 +1,37 @@
+<md-chips class="md-chips md-contact-chips {{if isFocused 'md-focused'}}">
+  <md-chips-wrap class="md-chips md-contact-chips {{if isFocused 'md-focused'}}" tabindex="-1" onkeydown={{action 'keyDown'}} onfocus={{action 'chipsFocus'}} onblur={{action 'chipsBlur'}}>
+    {{#each content as |item index|}}
+      <md-chip class="md-chip md-default-theme {{if (eq activeChip index) 'md-focused'}}">
+        <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" size=18}}
+              <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">
+        {{#paper-autocomplete closeOnSelect=false onBlur=(action 'inputBlur') onSelectionChange=(action 'autocompleteChange') onFocus=(action 'inputFocus') onOpen=(action 'inputFocus') placeholder=placeholder options=source searchField="email" as |item select|}}
+          <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>
+    {{/unless}}
+  </md-chips-wrap>
+</md-chips>

index.js

@@ -110,7 +110,10 @@ module.exports = {
       'components/dialog/dialog.scss',
       'components/dialog/dialog-theme.scss',
 
-      'components/virtualRepeat/virtual-repeater.scss'
+      'components/virtualRepeat/virtual-repeater.scss',
+
+      'components/chips/chips.scss',
+      'components/chips/chips-theme.scss'
     ];
 
     var angularScssFiles = new Funnel(this.pathBase(), {