import Component from '@glimmer/component';
import arg from '../utils/decorators/arg';
/**
Implements a [Spinner element](https://getbootstrap.com/docs/5.2/components/spinners/).
### Basic Usage
```hbs
<BsSpinner/>
<BsSpinner>Loading...</BsSpinner>
```
The (optional) component's block will render as visually invisible but accessible text for assistive technology like screen readers.
### Advanced Usage
```hbs
<BsSpinner @spinnerType="grow" @size="sm" @type="warning"/>
```
### Usage with `BsButton`
```hbs
<BsButton @onClick={{this.download}} as |button|>
Download
{{#if button.isPending}}
<BsSpinner @size="sm"/>
{{/if}}
</BsButton>
```
@class Spinner
@namespace Components
@extends Glimmer.Component
@public
*/
export default class SpinnerComponent extends Component {
/**
* Property for size styling, set to 'sm'
*
* Also see the [Bootstrap docs](https://getbootstrap.com/docs/5.2/components/spinners/#size)
*
* @property size
* @type String
* @public
*/
/**
* Property for type styling
*
* For the available types see the [Bootstrap docs](https://getbootstrap.com/docs/5.2/components/spinners/#colors)
*
* @property type
* @type String
* @default 'primary'
* @public
*/
/**
* Spinner type - 'border' or 'grow'
*
* @property spinnerType
* @type string
* @default 'border'
* @public
*/
@arg
spinnerType = 'border';
get spinnerClass() {
return `spinner-${this.spinnerType}`;
}
}