How to use ember-bootstrap - 10 common examples

selected = null;

  /**
   * @property itemComponent
   * @type {String}
   * @private
   */
  itemComponent = 'bs-accordion/item';

  /**
   * The value of the currently selected accordion item
   *
   * @property isSelected
   * @private
   */
  @listenTo('selected')
  isSelected;

  /**
   * Action when the selected accordion item is about to be changed.
   *
   * You can return false to prevent changing the active item, and do that in your action by
   * setting the `selected` accordingly.
   *
   * @event onChange
   * @param newValue
   * @param oldValue
   * @public
   */
  onChange(newValue, oldValue) {} // eslint-disable-line no-unused-vars

  @action

import FormElementLayoutHorizontal from 'ember-bootstrap/components/base/bs-form/element/layout/horizontal';
import { computed } from '@ember/object';
import { isBlank } from '@ember/utils';

export default FormElementLayoutHorizontal.extend({
  /**
   * Computed property that specifies the Bootstrap offset grid class for form controls within a horizontal layout
   * form, that have no label.
   *
   * @property horizontalInputOffsetGridClass
   * @type string
   * @readonly
   * @private
   */
  horizontalInputOffsetGridClass: computed('horizontalLabelGridClass', function() {
    if (isBlank(this.get('horizontalLabelGridClass'))) {
      return;
    }
    let parts = this.get('horizontalLabelGridClass').split('-');
    parts.splice(0, 1, 'offset');
    return parts.join('-');

import FormElementLayoutHorizontal from 'ember-bootstrap/components/base/bs-form/element/layout/horizontal';
import { computed } from '@ember/object';
import { isBlank } from '@ember/utils';

export default FormElementLayoutHorizontal.extend({
  /**
   * Computed property that specifies the Bootstrap offset grid class for form controls within a horizontal layout
   * form, that have no label.
   *
   * @property horizontalInputOffsetGridClass
   * @type string
   * @readonly
   * @private
   */
  horizontalInputOffsetGridClass: computed('horizontalLabelGridClass', function() {
    if (isBlank(this.get('horizontalLabelGridClass'))) {
      return;
    }
    let parts = this.get('horizontalLabelGridClass').split('-');
    parts.splice(2, 0, 'offset');
    return parts.join('-');

let tooltipShowComplete = () => {
      if (this.get('isDestroyed')) {
        return;
      }
      let prevHoverState = this.get('hoverState');

      this.get('onShown')(this);
      this.set('hoverState', null);

      if (prevHoverState === 'out') {
        this.leave();
      }
    };

    if (skipTransition === false && this.get('usesTransition')) {
      transitionEnd(this.get('overlayElement'), this.get('transitionDuration'))
        .then(tooltipShowComplete);
    } else {
      tooltipShowComplete();
    }
  }

hide() {
    this.get('onHide')();

    this.setProperties({
      transitioning: true,
      active: false
    });
    this.setCollapseSize(this.getExpandedSize('hide'));

    transitionEnd(this.get('element'), this.get('transitionDuration')).then(() => {
      if (this.get('isDestroyed')) {
        return;
      }
      this.set('transitioning', false);
      if (this.get('resetSizeWhenNotCollapsing')) {
        this.setCollapseSize(null);
      }
      this.get('onHidden')();
    });

    next(this, function() {
      if (!this.get('isDestroyed')) {
        this.setCollapseSize(this.get('collapsedSize'));
      }
    });
  }

schedule('afterRender', this, function() {
        let backdrop = this.get('backdropElement');
        assert('Backdrop element should be in DOM', backdrop);
        if (doAnimate) {
          transitionEnd(backdrop, this.get('backdropTransitionDuration'))
            .then(callback);
        } else {
          callback();
        }
      });

} else if (!this.get('isOpen') && this.get('backdrop')) {
      let backdrop = this.get('backdropElement');
      assert('Backdrop element should be in DOM', backdrop);

      let callbackRemove = () => {
        if (this.get('isDestroyed')) {
          return;
        }
        this.set('showBackdrop', false);
        if (callback) {
          callback.call(this);
        }
      };
      if (doAnimate) {
        transitionEnd(backdrop, this.get('backdropTransitionDuration'))
          .then(callbackRemove);
      } else {
        callbackRemove();
      }
    } else if (callback) {
      next(this, callback);
    }
  }

hide() {
    if (!this._isOpen) {
      return;
    }
    this._isOpen = false;

    this.resize();
    this.set('showModal', false);

    if (this.get('usesTransition')) {
      transitionEnd(this.get('modalElement'), this.get('transitionDuration'))
        .then(() => this.hideModal());
    } else {
      this.hideModal();
    }
  }

hide() {
    if (this.get('usesTransition')) {
      transitionEnd(this.get('element'), this.get('fadeDuration'))
        .then(() => {
          if (!this.get('isDestroyed')) {
            this.set('active', false);
          }
        });
      this.set('showContent', false);
    } else {
      this.set('active', false);
    }
  }

show() {
    if (this.get('usesTransition')) {
      transitionEnd(this.get('element'), this.get('fadeDuration'))
        .then(() => {
          if (!this.get('isDestroyed')) {
            this.setProperties({
              active: true,
              showContent: true
            });
          }
        });
    } else {
      this.set('active', true);
    }
  }