import { CSSResultArray , html , PropertyValues , SizedMixin , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/button/sp-clear-button.js' ; import styles from './tag.css.js' ; element slot slot slot export class Tag extends SizedMixin ( SpectrumElement , { validSizes : [ 's' , 'm' , 'l' ] , } ) { public static get styles ( ) : CSSResultArray { return [ styles ] ; } @ property ( { type : Boolean , reflect : true } ) public deletable = false ; @ property ( { type : Boolean , reflect : true } ) public disabled = false ; @ property ( { type : Boolean , reflect : true } ) public readonly = false ; private get hasIcon ( ) : boolean { return ! ! this . querySelector ( '[slot="icon"]' ) ; } private get hasAvatar ( ) : boolean { return ! ! this . querySelector ( '[slot="avatar"]' ) ; } constructor ( ) { super ( ) ; this . addEventListener ( 'focusin' , this . handleFocusin ) ; } private handleFocusin = ( ) : void => { this . addEventListener ( 'focusout' , this . handleFocusout ) ; this . addEventListener ( 'keydown' , this . handleKeydown ) ; } ; private handleFocusout = ( ) : void => { this . removeEventListener ( 'keydown' , this . handleKeydown ) ; this . removeEventListener ( 'focusout' , this . handleFocusout ) ; } ; private handleKeydown = ( event ) : void => { if ( ! this . deletable ) { return ; } const { code } = event ; switch ( code ) { case 'Backspace' : case 'Space' : case 'Delete' : this . delete ( ) ; return ; default : return ; } } ; private delete ( ) { if ( this . readonly ) { return ; } this . dispatchEvent ( new Event ( 'delete' , { bubbles : true , } ) ) ; } protected render ( ) { const slots = [ ] ; if ( this . hasAvatar ) { slots . push ( html `
                    <slot name="avatar"></slot>
                ` ) ; } if ( this . hasIcon ) { slots . push ( html `
                    <slot name="icon"></slot>
                ` ) ; } return html `
            ${ slots }
            <span class="label"><slot></slot></span>
            ${ this . deletable ? html `
                      <sp-clear-button
                          class="clear-button"
                          ?disabled=${ this . disabled }
                          label="Remove"
                          size="s"
                          tabindex="-1"
                          @click=${ this . delete }
                      ></sp-clear-button>
                  ` : html `` }
        ` ; } protected firstUpdated ( changes ) { super . firstUpdated ( changes ) ; if ( ! this . hasAttribute ( 'role' ) ) { this . setAttribute ( 'role' , 'listitem' ) ; } if ( this . deletable ) { this . setAttribute ( 'tabindex' , ! this . disabled && this . matches ( ':first-of-type:not([disabled])' ) ? '0' : '-1' ) ; } } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'disabled' ) ) { if ( this . disabled ) { this . setAttribute ( 'aria-disabled' , 'true' ) ; } else { this . removeAttribute ( 'aria-disabled' ) ; } } } }