paper menu, paper select and paper autocomplete

.jshintrc

@@ -2,6 +2,7 @@
   "predef": [
     "document",
     "window",
+    "self",
     "-Promise"
   ],
   "browser": true,

CHANGELOG.md

@@ -16,6 +16,13 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 - `paper-icon`'s `size` attribute now takes a size in pixels, and `lg` or `sm` values are no longer supported.
 - renamed the `paper-radio-group` `paper-radio` to just `radio` -- usage would now be `group.radio` as opposed to `group.paper-radio`.
 
+#### 1.0.0-alpha.6
+- [#395](https://github.com/miguelcobain/ember-paper/pull/395) The Great Update of paper-menu et al:
+  - `paper-menu` was updated. It uses  [ember-basic-dropdown](https://github.com/cibernox/ember-basic-dropdown) under the hood and the API is the same
+  - `paper-select` and `paper-autocomplete` were updated. They use  [ember-power-select](https://github.com/cibernox/ember-power-select) under the hood and the API is the same
+  - See the referenced projects and ember-paper's documentation examples to understand the new API
+  - Special thanks to the champions of this update @xomaczar and @ibarrick
+
 #### 1.0.0-alpha.5
 - [#521](https://github.com/miguelcobain/ember-paper/pull/521) Update Angular SCSS import to work with yarn and npm3 flat node_modules
 - [#520](https://github.com/miguelcobain/ember-paper/pull/520) fixes issues with people seeing `regeneratorRuntime is not defined`

addon/components/paper-autocomplete-content.js

@@ -0,0 +1,3 @@
+import ContentComponent from 'ember-basic-dropdown/components/basic-dropdown/content';
+
+export default ContentComponent;

addon/components/paper-autocomplete-dropdown.js

@@ -0,0 +1,94 @@
+import Ember from 'ember';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+const { $ } = Ember;
+
+export default BasicDropdown.extend({
+  triggerComponent: 'paper-autocomplete-trigger-container',
+
+  reposition() {
+    if (!this.publicAPI.isOpen) {
+      return;
+    }
+
+    let dropdownElement = $(`.${this.dropdownId}`).get(0);
+    let triggerElement = document.getElementById(this.triggerId);
+
+    if (!dropdownElement || !triggerElement) {
+      return;
+    }
+
+    let renderInPlace = this.get('renderInPlace');
+    if (renderInPlace) {
+      this.performNaiveReposition(triggerElement, dropdownElement);
+    } else {
+      this.performFullReposition(triggerElement, dropdownElement);
+    }
+  },
+
+  performFullReposition(trigger, dropdown) {
+    let {
+      horizontalPosition, verticalPosition, matchTriggerWidth
+    } = this.getProperties('horizontalPosition', 'verticalPosition', 'matchTriggerWidth');
+    let $window = $(window);
+    let scroll = { left: $window.scrollLeft(), top: $window.scrollTop() };
+    let { left: triggerLeft, top: triggerTop, width: triggerWidth, height: triggerHeight } = trigger.getBoundingClientRect();
+    let { height: dropdownHeight, width: dropdownWidth } = dropdown.getBoundingClientRect();
+    let dropdownLeft = triggerLeft;
+    let dropdownTop;
+    dropdownWidth = matchTriggerWidth ? triggerWidth : dropdownWidth;
+
+    if (horizontalPosition === 'auto') {
+      let viewportRight = scroll.left + window.innerWidth;
+      let roomForRight = viewportRight - triggerLeft;
+      let roomForLeft = triggerLeft;
+      horizontalPosition = roomForRight > roomForLeft ? 'left' : 'right';
+    } else if (horizontalPosition === 'right') {
+      dropdownLeft = triggerLeft + triggerWidth - dropdownWidth;
+    } else if (horizontalPosition === 'center') {
+      dropdownLeft = triggerLeft + (triggerWidth - dropdownWidth) / 2;
+    }
+
+    let triggerTopWithScroll = triggerTop + scroll.top;
+    if (verticalPosition === 'above') {
+      dropdownTop = triggerTopWithScroll - dropdownHeight;
+    } else if (verticalPosition === 'below') {
+      dropdownTop = triggerTopWithScroll + triggerHeight;
+    } else {
+      let viewportBottom = scroll.top + window.innerHeight;
+      let enoughRoomBelow = triggerTopWithScroll + triggerHeight + dropdownHeight < viewportBottom;
+      let enoughRoomAbove = triggerTop > dropdownHeight;
+
+      if (this.previousVerticalPosition === 'below' && !enoughRoomBelow && enoughRoomAbove) {
+        verticalPosition = 'above';
+      } else if (this.previousVerticalPosition === 'above' && !enoughRoomAbove && enoughRoomBelow) {
+        verticalPosition = 'below';
+      } else if (!this.previousVerticalPosition) {
+        verticalPosition = enoughRoomBelow ? 'below' : 'above';
+      } else {
+        verticalPosition = this.previousVerticalPosition;
+      }
+
+      dropdownTop = triggerTopWithScroll + (verticalPosition === 'below' ? triggerHeight : -dropdownHeight) - (verticalPosition === 'below' ? getVerticalOffset() : 0);
+    }
+    function getVerticalOffset() {
+      let offset = 0;
+      let inputContainer = $(trigger).find('md-input-container');
+      if (inputContainer.length) {
+        let input = inputContainer.find('input');
+        offset = inputContainer.prop('offsetHeight');
+        offset -= input.prop('offsetTop');
+        offset -= input.prop('offsetHeight');
+        // add in the height left up top for the floating label text
+        offset += inputContainer.prop('offsetTop');
+      }
+      return offset;
+    }
+    let style = { top: `${dropdownTop}px`, left: `${dropdownLeft}px` };
+    if (matchTriggerWidth) {
+      style.width = `${dropdownWidth}px`;
+    }
+    this.applyReposition(trigger, dropdown, { horizontalPosition, verticalPosition, style });
+  }
+
+});

addon/components/paper-autocomplete-highlight.js

@@ -17,6 +17,7 @@ export default Component.extend({
     let text = this.get('label');
     let flags = this.get('flags');
     let regex = this.getRegExp(this.get('searchText'), flags);
+
     let html = text.replace(regex, '<span class="highlight">$&</span>');
     return htmlSafe(html);
   }),

addon/components/paper-autocomplete-options.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+import PowerOptions from 'ember-power-select/components/power-select/options';
+
+const { get } = Ember;
+
+export default PowerOptions.extend({
+
+  _optionFromIndex(index) {
+    let parts = index.split('.');
+    let options = this.get('options');
+    let option = options[parseInt(parts[0], 10)];
+    for (let i = 1; i < parts.length; i++) {
+      option = option.options[parseInt(parts[i], 10)];
+    }
+    return option !== undefined ? get(option, 'raw') : option;
+  }
+});

addon/components/paper-autocomplete-trigger-container.js

@@ -0,0 +1,34 @@
+import Ember from 'ember';
+import BasicTrigger from 'ember-basic-dropdown/components/basic-dropdown/trigger';
+const { computed } = Ember;
+
+export default BasicTrigger.extend({
+  tagName: 'md-autocomplete',
+  attributeBindings: ['label:md-floating-label','disabled:disabled'],
+  disabled: computed('disabledProxy', function() {
+    return this.get('disabledProxy') ? this.get('disabledProxy') : undefined;
+  }),
+
+  // Chrome 51: setting tabindex=0 explicitly stops tab propogation to
+  // other elements. We need to verify that other browsers behave as expected.
+  tabIndex: computed('dropdown.disabled', 'tabindex', function() {
+    let tabindex = this.get('tabindex');
+
+    // tabindex = falsy - don't set tabindex attr
+    if (!tabindex || this.get('dropdown.disabled')) {
+      return null;
+    }
+    return tabindex;
+  }),
+
+  actions: {
+
+    handleMousedown() {
+      let dropdown = this.get('dropdown');
+      if (dropdown.disabled) {
+        return;
+      }
+      this.stopTextSelectionUntilMouseup();
+    }
+  }
+});