import { html , TemplateResult } from '@spectrum-web-components/base' ; import '../sp-split-button.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; const menu = ( { firstItemHandler = function ( ) { return ; } , secondItemHandler = function ( ) { return ; } , thirdItemHandler = function ( ) { return ; } , } ) : TemplateResult => html `
    <sp-menu-item @click=${ firstItemHandler }>Option 1</sp-menu-item>
    <sp-menu-item @click=${ secondItemHandler }>Option Extended</sp-menu-item>
    <sp-menu-item @click=${ thirdItemHandler }>Short</sp-menu-item>
` ; interface Properties { disabled ? : boolean ; invalid ? : boolean ; left ? : boolean ; open ? : boolean ; size ? : 's' | 'm' | 'l' | 'xl' ; type ? : 'field' | 'more' ; variant ? : 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative' ; } export const splitbutton = ( properties = { } , options = { } ) : TemplateResult => html `
    <sp-split-button
        ?left=${ ! ! properties . left }
        size=${ properties . size || 'm' }
        variant=${ properties . variant || 'cta' }
        type=${ properties . type || 'field' }
        ?open=${ ! ! properties . open }
        ?disabled=${ properties . disabled }
    >
        ${ menu ( options ) }
    </sp-split-button>
` ; const left = true ; export const renderSplitButtonSet = ( properties = { } , options = { } ) : TemplateResult => html `
    ${ splitbutton ( properties , options ) }
    ${ splitbutton ( { ... properties , left , } , options ) }
` ;