import { CSSResultArray , html , PropertyValues , TemplateResult , } from '@spectrum-web-components/base' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/menu/sp-menu.js' ; import '@spectrum-web-components/popover/sp-popover.js' ; import { PickerBase } from '@spectrum-web-components/picker' ; import '@spectrum-web-components/action-button/sp-action-button.js' ; import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js' ; import actionMenuStyles from './action-menu.css.js' ; element slot slot slot attr export class ActionMenu extends ObserveSlotText ( PickerBase , 'label' ) { public static get styles ( ) : CSSResultArray { return [ actionMenuStyles ] ; } @ property ( { type : String } ) public selects : undefined | 'single' = undefined ; protected listRole : 'listbox' | 'menu' = 'menu' ; protected itemRole = 'menuitem' ; private get hasLabel ( ) : boolean { return this . slotHasContent ; } protected get buttonContent ( ) : TemplateResult [ ] { return [ html `
                <slot name="icon" slot="icon" ?icon-only=${ ! this . hasLabel }>
                    <sp-icon-more class="icon"></sp-icon-more>
                </slot>
                <slot name="label" ?hidden=${ ! this . hasLabel }></slot>
            ` , ] ; } protected render ( ) { return html `
            <sp-action-button
                quiet
                ?selected=${ this . open }
                aria-haspopup="true"
                aria-controls="popover"
                aria-expanded=${ this . open ? 'true' : 'false' }
                aria-label=${ ifDefined ( this . label || undefined ) }
                id="button"
                class="button"
                size=${ this . size }
                @blur=${ this . onButtonBlur }
                @click=${ this . onButtonClick }
                @focus=${ this . onButtonFocus }
                ?disabled=${ this . disabled }
            >
                ${ this . buttonContent }
            </sp-action-button>
        ` ; } protected updated ( changedProperties ) { super . updated ( changedProperties ) ; if ( changedProperties . has ( 'invalid' ) ) { this . invalid = false ; } this . quiet = true ; } }