How to use the ember-basic-dropdown/components/basic-dropdown/content.extend function in ember-basic-dropdown

} 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'));
  })
});