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