import { CSSResultArray , html , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/underlay/sp-underlay.js' ; import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js' ; import modalStyles from '@spectrum-web-components/modal/src/modal.css.js' ; import styles from './tray.css.js' ; element slot fires export class Tray extends SpectrumElement { public static get styles ( ) : CSSResultArray { return [ modalStyles , styles ] ; } @ property ( { type : Boolean , reflect : true } ) public open = false ; @ query ( '.tray' ) private tray ! : HTMLDivElement ; public focus ( ) { const firstFocusable = firstFocusableIn ( this ) ; if ( firstFocusable ) { firstFocusable . focus ( ) ; } else if ( this . children . length === 1 ) { this . tray . focus ( ) ; } else { super . focus ( ) ; } } public close ( ) { this . open = false ; this . dispatchEvent ( new Event ( 'close' , { bubbles : true , } ) ) ; } protected render ( ) { return html `
            <sp-underlay ?open=${ this . open } @click=${ this . close }></sp-underlay>
            <div class="tray modal" tabindex="-1">
                <slot></slot>
            </div>
        ` ; } }