import { html, ref, when } from '@ni/fast-element';
import { iconThreeDotsLineTag } from '../../../icons/three-dots-line';
import { menuButtonTag } from '../../../menu-button';
import { ButtonAppearance } from '../../../menu-button/types';
import { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';
export const template = html `
    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
        @focusin="${x => x.onCellFocusIn()}"
        @blur="${x => x.onCellBlur()}"
    >
        <div ${ref('cellViewContainer')} class="cell-view-container" @focusin="${x => x.onCellViewFocusIn()}">
            ${x => x.cellViewTemplate}
        </div>
        ${when(x => x.hasActionMenu, html `
            <${menuButtonTag} ${ref('actionMenuButton')}
                content-hidden
                appearance="${ButtonAppearance.ghost}"
                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                tabindex="-1"
                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                @click="${(_, c) => c.event.stopPropagation()}"
                @blur="${x => x.onActionMenuBlur()}"
                class="action-menu"
                title="${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}"
            >
                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                ${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}
                <slot name="cellActionMenu" slot="menu"></slot>
            </${menuButtonTag}>
        `)}
    </template>
`;
//# sourceMappingURL=template.js.map