import { CSSResultArray , html , PropertyValues , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import { FocusVisiblePolyfillMixin , ObserveSlotPresence , ObserveSlotText , } from '@spectrum-web-components/shared' ; import tabItemStyles from './tab.css.js' ; element slot slot export class Tab extends FocusVisiblePolyfillMixin ( ObserveSlotText ( ObserveSlotPresence ( SpectrumElement , '[slot="icon"]' ) , '' ) ) { public static get styles ( ) : CSSResultArray { return [ tabItemStyles ] ; } private static instanceCount = 0 ; protected get hasIcon ( ) : boolean { return this . slotContentIsPresent ; } protected get hasLabel ( ) : boolean { return ! ! this . label || this . slotHasContent ; } @ property ( { type : Boolean , reflect : true } ) public disabled = false ; @ property ( { reflect : true } ) public label = '' ; @ property ( { type : Boolean , reflect : true } ) public selected = false ; @ property ( { type : Boolean , reflect : true } ) public vertical = false ; @ property ( { type : String , reflect : true } ) public value = '' ; protected handleContentChange ( ) { /**
         * When the content in a tab has changed, JS powered layout related to that content may also need to be changed.
         */ this . dispatchEvent ( new Event ( 'sp-tab-contentchange' , { bubbles : true , composed : true , } ) ) ; } protected render ( ) { return html `
            ${ this . hasIcon ? html `
                      <slot name="icon"></slot>
                  ` : html `` }
            <label id="item-label" ?hidden=${ ! this . hasLabel }>
                ${ this . slotHasContent ? html `` : this . label }
                <slot>${ this . label }</slot>
            </label>
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; this . setAttribute ( 'role' , 'tab' ) ; if ( ! this . hasAttribute ( 'id' ) ) { this . id = `sp-tab-${ Tab . instanceCount ++ }` ; } this . shadowRoot . addEventListener ( 'slotchange' , this . handleContentChange ) ; } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'label' ) && typeof changes . get ( 'label' ) !== 'undefined' ) { this . handleContentChange ( ) ; } if ( changes . has ( 'selected' ) ) { this . setAttribute ( 'aria-selected' , this . selected ? 'true' : 'false' ) ; this . setAttribute ( 'tabindex' , this . selected ? '0' : '-1' ) ; } if ( changes . has ( 'disabled' ) ) { if ( this . disabled ) { this . setAttribute ( 'aria-disabled' , 'true' ) ; } else { this . removeAttribute ( 'aria-disabled' ) ; } } } }