import { html , TemplateResult } from '@spectrum-web-components/base' ; import { MenuGroup } from '..' ; import '../sp-menu.js' ; import '../sp-menu-divider.js' ; import '@spectrum-web-components/popover/sp-popover.js' ; import '@spectrum-web-components/menu/sp-menu.js' ; import '@spectrum-web-components/menu/sp-menu-item.js' ; import '@spectrum-web-components/menu/sp-menu-divider.js' ; import '@spectrum-web-components/menu/sp-menu-group.js' ; export default { component : 'sp-menu' , title : 'Menu Group' , } ; export const mixed = ( ) : TemplateResult => { let style = 'italic' ; let weight = '700' ; let color = 'blue' ; let decoration = 'overline' ; const styleRules = ( { style , weight , color , decoration , } ) : string => { return `
        .style-rule {
            font-weight: ${ weight };
            font-style: ${ style };
            color: ${ color };
            text-decoration: ${ decoration };
        }
        ` ; } ; const update = ( event ) : void => { const { value , id } = event . target as MenuGroup ; switch ( id ) { case 'font' : const values = value . split ( ',' ) ; style = values . indexOf ( 'italic' ) > - 1 ? 'italic' : 'normal' ; weight = values . indexOf ( 'bold' ) > - 1 ? '700' : '400' ; break ; case 'color' : color = value ; break ; case 'decoration' : decoration = value ; break ; } ( document . querySelector ( '#output' ) as HTMLElement ) . textContent = styleRules ( { style , weight , color , decoration , } ) ; } ; return html `
        <style>
            sp-popover {
                position: static;
                float: left;
            }
        </style>
        <sp-popover open>
            <sp-menu label="Style/Color" @change=${ update }>
                <sp-menu-group label="Font Style" selects="multiple" id="font">
                    <sp-menu-item value="bold" selected>Bold</sp-menu-item>
                    <sp-menu-item value="italic" selected>Italic</sp-menu-item>
                </sp-menu-group>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-group label="Text Color" selects="single" id="color">
                    <sp-menu-item value="black">Black</sp-menu-item>
                    <sp-menu-item value="blue" selected>Blue</sp-menu-item>
                    <sp-menu-item value="red">Red</sp-menu-item>
                    <sp-menu-item value="green">Green</sp-menu-item>
                </sp-menu-group>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-group
                    label="Text Decoration"
                    selects="single"
                    id="decoration"
                >
                    <sp-menu-item value="none">None</sp-menu-item>
                    <sp-menu-item value="overline" selected>
                        Overline
                    </sp-menu-item>
                    <sp-menu-item value="line-through">
                        Line-through
                    </sp-menu-item>
                    <sp-menu-item value="underline">Underline</sp-menu-item>
                </sp-menu-group>
            </sp-menu>
        </sp-popover>
        <pre id="output">
            ${ styleRules ( { style , weight , color , decoration } ) }
        </pre
        >
    ` ; } ; export const inherit = ( ) : TemplateResult => { return html `
        <style>
            sp-popover {
                position: static;
                float: left;
            }
        </style>
        <sp-popover open>
            <sp-menu label="Groceries" selects="multiple">
                <sp-menu-group label="Juice" selects="inherit">
                    <sp-menu-item selected>Orange</sp-menu-item>
                    <sp-menu-item selected>Apple</sp-menu-item>
                    <sp-menu-item>Grape</sp-menu-item>
                </sp-menu-group>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-group label="Vegetables" selects="inherit">
                    <sp-menu-item>Carrots</sp-menu-item>
                    <sp-menu-item selected>Summer Squash</sp-menu-item>
                    <sp-menu-item>Zuccini</sp-menu-item>
                </sp-menu-group>
                <sp-menu-divider></sp-menu-divider>
                <sp-menu-group label="Dry Goods" selects="inherit">
                    <sp-menu-item>Ceral</sp-menu-item>
                    <sp-menu-item selected>Flour</sp-menu-item>
                    <sp-menu-item>Salt</sp-menu-item>
                    <sp-menu-item>Sugar</sp-menu-item>
                </sp-menu-group>
            </sp-menu>
        </sp-popover>
    ` ; } ;