import { CSSResultArray , html , PropertyValues , SizedMixin , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/field-label/sp-field-label.js' ; import styles from './progress-bar.css.js' ; element export class ProgressBar extends SizedMixin ( SpectrumElement ) { public static get styles ( ) : CSSResultArray { return [ styles ] ; } @ property ( { type : Boolean , reflect : true } ) public indeterminate = false ; @ property ( { type : String } ) public label = '' ; @ property ( { type : Boolean , reflect : true , attribute : 'over-background' } ) public overBackground = false ; @ property ( { type : Boolean , reflect : true , attribute : 'side-label' } ) public sideLabel = false ; @ property ( { type : Number } ) public progress = 0 ; protected render ( ) { return html `
            ${ this . label ? html `
                      <sp-field-label size=${ this . size } class="label">
                          ${ this . label }
                      </sp-field-label>
                      ${ this . indeterminate ? html `` : html `
                                <sp-field-label
                                    size=${ this . size }
                                    class="percentage"
                                >
                                    ${ this . progress }%
                                </sp-field-label>
                            ` }
                  ` : html `` }
            <div class="track">
                <div
                    class="fill"
                    style="transform: scaleX(calc(${ this . progress } / 100));"
                ></div>
            </div>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; if ( ! this . hasAttribute ( 'role' ) ) { this . setAttribute ( 'role' , 'progressbar' ) ; } } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'indeterminate' ) ) { if ( this . indeterminate ) { this . removeAttribute ( 'aria-valuemin' ) ; this . removeAttribute ( 'aria-valuemax' ) ; } else { this . setAttribute ( 'aria-valuemin' , '0' ) ; this . setAttribute ( 'aria-valuemax' , '100' ) ; } } if ( ! this . indeterminate && changes . has ( 'progress' ) ) { this . setAttribute ( 'aria-valuenow' , '' + this . progress ) ; } else if ( this . hasAttribute ( 'aria-valuenow' ) ) { this . removeAttribute ( 'aria-valuenow' ) ; } if ( this . label && changes . has ( 'label' ) ) { this . setAttribute ( 'aria-label' , this . label ) ; } } }