How to use ember-basic-dropdown - 10 common examples

} else if (computedStyle.animationName !== 'none' && computedStyle.animationPlayState === 'running') {
    let eventCallback = function() {
      element.removeEventListener('animationend', eventCallback);
      callback();
    };
    element.addEventListener('animationend', eventCallback);
  } else {
    callback();
  }
}

/**
 * @class PaperMenuContent
 * @extends ContentComponent
 */
export default ContentComponent.extend({
  layout,

  // We need to overwrite this CP because:
  //   1. we don't want to use the width property
  //   2. we need additional styles
  style: computed('top', 'left', 'right', 'transform', 'transformOrigin', function() {
    let style = '';
    let { top, left, right, transform, transformOrigin } = this.getProperties('top', 'left', 'right', 'transform', 'transformOrigin');
    if (top) {
      style += `top: ${top};`;
    }
    if (left) {
      style += `left: ${left};`;
    }
    if (right) {
      style += `right: ${right};`;

import ContentComponent from 'ember-basic-dropdown/components/basic-dropdown/content';
import layout from '../templates/components/paper-autocomplete-content';
import { computed } from '@ember/object';

export default ContentComponent.extend({
  layout,

  // returns `destinationElement` for ember-basic-dropdown >= 1.0.0
  // finds destination by `to` for ember-basic-dropdown < 1.0.0
  destinationEl: computed('destinationElement', 'to', function() {
    return this.get('destinationElement') || document.getElementById(this.get('to'));
  })
});

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;

calculatePosition(this: ResponsiveDropdown, ...args: any[]): object {
        // On Desktop
        const pos = calculatePosition(...args);
        if (!this.useOverlay) {
            if (pos && pos.style) {
                pos.style.top += 10;
            }
            return pos;
        }

        // Prevent body scroll when modal is open
        document.querySelector('body')!.classList.add('modal-open');

        const [, content] = args;
        const { height: dropdownHeight, width: dropdownWidth } = content.getBoundingClientRect();
        content.style.marginLeft = `${-(dropdownWidth / 2)}px`;
        content.style.marginTop = `${-(dropdownHeight / 2)}px`;
        content.style.top = `${pos.style.top}px`;
        content.style.left = '50%';

registerAsyncHelper('datepickerSelect', async function(app, selector, selected) {
    assert('`datepickerSelect` expect a Date or MomentJS object as second argument', selected);
    let $selector = find(selector);
    assert('`datepickerSelect` couln\'t find any element with selector: ' + selector, $selector.length);
    let $trigger;
    if ($selector.hasClass('ember-power-datepicker-trigger')) {
      $trigger = $selector;
    } else {
      $trigger = find(`${selector} .ember-power-datepicker-trigger`);
      assert('`datepickerSelect` couln\'t find any datepicker within the selector ' + selector, $trigger.length);
      selector = `${selector} .ember-power-datepicker-trigger`;
    }

    await clickTrigger(selector);
    await calendarSelect('.ember-power-datepicker-content', selected);
  });
}

calculatePosition() {
    let pos = calculatePosition(...arguments);
    pos.style.top += 3;
    return pos;
  }
});

import Trigger from 'ember-basic-dropdown/components/basic-dropdown-trigger';

export default Trigger.extend({
  didOpen: false,

  didReceiveAttrs() {
    let { dropdown, oldDropdown = {} } = this;
    if ((oldDropdown && oldDropdown.isOpen) === false && dropdown.isOpen) {
      this.set('didOpen', true);
    }
    this.set('oldDropdown', dropdown);
  }
});

import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
import layout from 'ember-basic-dropdown/templates/components/basic-dropdown';
import {inject as service} from '@ember/service';

export default BasicDropdown.extend({
    dropdown: service(),

    layout,

    didInsertElement() {
        this._super(...arguments);
        this.dropdown.on('close', this, this.close);
    },

    willDestroyElement() {
        this._super(...arguments);
        this.dropdown.off('close', this, this.close);
    }
});

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) {