import { CSSResultArray , html , PropertyValues , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js' ; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js' ; import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js' ; import styles from './accordion-item.css.js' ; element slot fires export class AccordionItem extends Focusable { public static get styles ( ) : CSSResultArray { return [ styles , chevronIconStyles ] ; } @ property ( { type : Boolean , reflect : true } ) public open = false ; @ property ( { type : String , reflect : true } ) public label = '' ; @ property ( { type : Boolean , reflect : true } ) public disabled = false ; public get focusElement ( ) : HTMLElement { return this . shadowRoot . querySelector ( '#header' ) as HTMLElement ; } constructor ( ) { super ( ) ; this . addEventListener ( 'keydown' , this . onKeyDown ) ; } private onKeyDown ( event ) { if ( this . disabled ) { return ; } if ( event . code === 'Enter' || event . code === 'Space' ) { event . preventDefault ( ) ; this . toggle ( ) ; } } private onClick ( ) { if ( this . disabled ) { return ; } this . toggle ( ) ; } private toggle ( ) { this . open = ! this . open ; const applyDefault = this . dispatchEvent ( new CustomEvent ( 'sp-accordion-item-toggle' , { bubbles : true , composed : true , cancelable : true , } ) ) ; if ( ! applyDefault ) { this . open = ! this . open ; } } protected render ( ) { return html `
            <h3 id="heading">
                <button
                    id="header"
                    @click=${ this . onClick }
                    aria-expanded=${ this . open }
                    aria-controls="content"
                >
                    ${ this . label }
                </button>
                <sp-icon-chevron100
                    id="indicator"
                    class="spectrum-UIIcon-ChevronRight100"
                ></sp-icon-chevron100>
            </h3>
            <div id="content" role="region" aria-labelledby="header">
                <slot></slot>
            </div>
        ` ; } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'disabled' ) ) { if ( this . disabled ) { this . setAttribute ( 'aria-disabled' , 'true' ) ; } else { this . removeAttribute ( 'aria-disabled' ) ; } } } }