import { CSSResultArray , html , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import actionBarStyles from './action-bar.css.js' ; export const actionBarVariants = [ 'sticky' , 'fixed' ] ; element slot export class ActionBar extends SpectrumElement { public static get styles ( ) : CSSResultArray { return [ actionBarStyles ] ; } param { Boolean } flexible @ property ( { type : Boolean , reflect : true } ) public flexible = false ; @ property ( { type : Boolean , reflect : true } ) public open = false ; param { String } variant @ property ( { type : String , reflect : true } ) public set variant ( variant ) { if ( variant === this . variant ) { return ; } if ( actionBarVariants . includes ( variant ) ) { this . setAttribute ( 'variant' , variant ) ; this . _variant = variant ; return ; } this . removeAttribute ( 'variant' ) ; this . _variant = '' ; } public get variant ( ) : string { return this . _variant ; } private _variant = '' ; public render ( ) { return html `
            <sp-popover ?open=${ this . open } id="popover">
                <slot></slot>
            </sp-popover>
        ` ; } }