import { tagName } from '@ember-decorators/component';
import Component from '@ember/component';
import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';

  Component to display a Bootstrap progress bar, see

  ### Usage

  The component yields a [Components.ProgressBar](Components.ProgressBar.html) component that represents a single bar.
  Use the `value` property to control the progress bar's width. To apply the different styling options supplied by
  Bootstrap, use the appropriate properties like `type`, `showLabel`, `striped` or `animate`.

  <BsProgress as |pg| >
    < @value={{this.progressValue}} @minValue={{0}} @maxValue={{10}} @showLabel={{true}} @type="danger" aria-label="Loading" />

  > Don't forget to add a `aria-label` attribute to the progress bar for accessibility!

  ### Stacked

  You can place multiple progress bar components in a single progress component to
  create a stack of progress bars as seen in

  <BsProgress as |pg| >
    < @value={{this.progressValue1}} @type="success" />
    < @value={{this.progressValue2}} @type="warning" />
    < @value={{this.progressValue3}} @type="danger" />

  *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*

  @class Progress
  @namespace Components
  @extends Ember.Component
export default class Progress extends Component {
   * @property progressBarComponent
   * @type {String}
   * @private