import { CSSResultArray , html , PropertyValues , SizedMixin , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import progressCircleStyles from './progress-circle.css.js' ; element export class ProgressCircle extends SizedMixin ( SpectrumElement , { validSizes : [ 's' , 'm' , 'l' ] , } ) { public static get styles ( ) : CSSResultArray { return [ progressCircleStyles ] ; } @ 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 : Number } ) public progress = 0 ; private makeRotation ( rotation ) { return this . indeterminate ? undefined : `transform: rotate(${ rotation }deg);` ; } protected render ( ) { const styles = [ this . makeRotation ( - 180 + ( 180 / 50 ) * Math . min ( this . progress , 50 ) ) , this . makeRotation ( - 180 + ( 180 / 50 ) * Math . max ( this . progress - 50 , 0 ) ) , ] ; const masks = [ 'Mask1' , 'Mask2' ] ; return html `
            <div class="track"></div>
            <div class="fills">
                ${ masks . map ( ( mask , index ) => html `
                        <div class="fill${ mask }">
                            <div
                                class="fillSub${ mask }"
                                style=${ ifDefined ( styles [ index ] ) }
                            >
                                <div class="fill"></div>
                            </div>
                        </div>
                    ` ) }
            </div>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; if ( ! this . hasAttribute ( 'role' ) ) { this . setAttribute ( 'role' , 'progressbar' ) ; } } protected updated ( changes ) { super . updated ( changes ) ; 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 ) ; } } }