import { CSSResultArray , html , PropertyValues , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js' ; import radioStyles from './radio.css.js' ; element slot attr attr attr attr attr fires export class Radio extends FocusVisiblePolyfillMixin ( SpectrumElement ) { public static get styles ( ) : CSSResultArray { return [ radioStyles ] ; } private @ property ( { type : Boolean } ) public autofocus = false ; @ property ( { type : String , reflect : true } ) public value = '' ; @ property ( { type : Boolean , reflect : true } ) public checked = false ; @ property ( { type : Boolean , reflect : true } ) public disabled = false ; @ property ( { type : Boolean , reflect : true } ) public emphasized = false ; @ property ( { type : Boolean , reflect : true } ) public invalid = false ; @ property ( { type : Boolean , reflect : true } ) public readonly = false ; @ query ( '#input' ) private inputElement ! : HTMLInputElement ; public click ( ) { if ( this . disabled ) { return ; } this . activate ( ) ; } protected manageAutoFocus ( ) { if ( this . autofocus ) { private this . dispatchEvent ( new KeyboardEvent ( 'keydown' , { code : 'Tab' , } ) ) ; this . focus ( ) ; } } public handleChange ( event ) { event . stopPropagation ( ) ; if ( this . readonly ) { this . inputElement . checked = this . checked ; return ; } this . checked = this . inputElement . checked ; this . dispatchEvent ( new Event ( 'change' , { bubbles : true , composed : true , } ) ) ; } protected activate ( ) { this . checked = true ; this . dispatchEvent ( new Event ( 'change' , { bubbles : true , composed : true , } ) ) ; } protected handleKeyup ( event ) { if ( event . code === 'Space' ) { this . activate ( ) ; } } protected render ( ) { return html `
            <div id="input"></div>
            <span id="button"></span>
            <span id="label" role="presentation"><slot></slot></span>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; this . setAttribute ( 'role' , 'radio' ) ; if ( ! this . hasAttribute ( 'tabindex' ) ) { this . tabIndex = 0 ; } this . manageAutoFocus ( ) ; this . addEventListener ( 'click' , this . activate ) ; this . addEventListener ( 'keyup' , this . handleKeyup ) ; } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'invalid' ) ) { if ( this . invalid ) { this . setAttribute ( 'aria-invalid' , 'true' ) ; } else { this . removeAttribute ( 'aria-invalid' ) ; } } if ( changes . has ( 'checked' ) ) { if ( this . checked ) { this . setAttribute ( 'aria-checked' , 'true' ) ; } else { this . setAttribute ( 'aria-checked' , 'false' ) ; } } if ( changes . has ( 'disabled' ) ) { if ( this . disabled ) { this . setAttribute ( 'aria-disabled' , 'true' ) ; } else { this . removeAttribute ( 'aria-disabeld' ) ; } } } }