import { html , TemplateResult } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js' ; export class CheckboxBase extends Focusable { @ property ( { type : Boolean , reflect : true } ) public checked = false ; @ property ( { type : Boolean , reflect : true } ) public readonly = false ; @ query ( '#input' ) protected inputElement ! : HTMLInputElement ; public get focusElement ( ) : HTMLElement { return this . inputElement ; } public handleChange ( event ) { if ( this . readonly ) { this . inputElement . checked = this . checked ; return ; } this . checked = this . inputElement . checked ; const changeEvent = new CustomEvent ( 'change' , { detail : { sourceEvent : event , } , bubbles : event . bubbles , cancelable : event . cancelable , } ) ; this . dispatchEvent ( changeEvent ) ; } protected render ( ) { return html `
            <input
                id="input"
                aria-labelledby="label"
                type="checkbox"
                .checked=${ this . checked }
                @change=${ this . handleChange }
            />
        ` ; } }