import { CSSResultArray , html , PropertyValues , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js' ; import switchStyles from './switch.css.js' ; import legacyStyles from './switch-legacy.css.js' ; element slot export class Switch extends CheckboxBase { public static get styles ( ) : CSSResultArray { if ( window . hasOwnProperty ( 'ShadyDOM' ) ) { return [ switchStyles , legacyStyles ] ; } return [ switchStyles ] ; } @ property ( { type : Boolean , reflect : true } ) public emphasized = false ; protected render ( ) { return html `
            ${ super . render ( ) }
            <span id="switch"></span>
            <label id="label" for="input"><slot></slot></label>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; this . inputElement . setAttribute ( 'role' , 'switch' ) ; } protected updated ( changes ) { if ( changes . has ( 'checked' ) ) { this . inputElement . setAttribute ( 'aria-checked' , this . checked ? 'true' : 'false' ) ; } } }