import { html, ref, when } from '@ni/fast-element';
import { menuButtonTag } from '../../../menu-button';
import { ButtonAppearance } from '../../../menu-button/types';
import { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';
import { cellViewMenuSlotName } from '../types';
export const template = html `
    ${when(x => x.showMenuButton, html `
        <${menuButtonTag}
            ${ref('menuButton')}
            appearance="${ButtonAppearance.ghost}"
            @beforetoggle="${(x, c) => x.onMenuButtonBeforeToggle(c.event)}"
            @mouseover="${x => x.onMenuButtonMouseOver()}"
            @mouseout="${x => x.onMenuButtonMouseOut()}"
            @click="${(x, c) => x.onMenuButtonClick(c.event)}"
            title=${x => (x.hasOverflow ? x.cellRecord.value : null)}
        >
            <span ${ref('valueSpan')} class="value-label">${x => x.cellRecord.value}</span>
            <${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>

            <slot name="${cellViewMenuSlotName}" slot="menu"></slot>
        </${menuButtonTag}>
    `)}
`;
//# sourceMappingURL=template.js.map