// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `TableHeaderCellElement`.
 *
 * @public
 */
export function tableHeaderCellElementTemplate(e) {
    return html `
        <div part="root">
            <div part="content"
                 @click="${() => e.sort()}">
                <slot>
                    <mosaik-text part="text"
                                 .text="${e.text}"
                                 .formatter="${e.formatter}"
                                 ?truncate="${e.textOverflow === 'truncate'}"
                                 ?wrap="${e.textOverflow === 'wrap'}"></mosaik-text>
                </slot>
                ${when(e.sortable && e.sortDirection !== 'none', () => html `
                <mosaik-icon part="icon"
                             .size="${'small'}"
                             .data="${Icons.arrowSortDown}"
                             .inline="${true}"></mosaik-icon>
                ${when(e.sortMode === 'multiple' && e.sortIndex !== undefined, () => html `
                <mosaik-text part="sort-index" .text="${String(e.sortIndex)}"></mosaik-text>
                `)}
                `)}
            </div>
            <div part="actions">
                ${when(e.sortable || e.pinable || e.hideable || e.autoSizeable || e.columnChoosable, () => html `
                <mosaik-dropdown-button part="menu"
                                        .size="${'small'}"
                                        .caretVisible="${false}"
                                        .icon="${Icons.moreVertical}"
                                        .appearance="${'plain'}"
                                        .dropDownPlacement="${'bottom-start'}">
                    <mosaik-menu>
                        ${when(e.sortable, () => html `
                        ${when(e.sortDirection !== 'asc', () => html `
                        <mosaik-menu-item .label="${e.intl.sortAscendingLabel}"
                                          .icon="${Icons.arrowSortUp}"
                                          @click="${() => e.sort('asc')}"></mosaik-menu-item>
                        `)}
                        ${when(e.sortDirection !== 'desc', () => html `
                        <mosaik-menu-item .label="${e.intl.sortDescendingLabel}"
                                          .icon="${Icons.arrowSortDown}"
                                          @click="${() => e.sort('desc')}"></mosaik-menu-item>
                        `)}
                        ${when(e.sorted, () => html `
                        <mosaik-menu-item .label="${e.intl.clearSortingLabel}"
                                          .subLabel="${e.sortDirection}"
                                          .icon="${Icons.arrowSortNone}"
                                          @click="${() => e.unsort()}"></mosaik-menu-item>
                        `)}
                        ${when(e.pinable || e.hideable || e.autoSizeable || e.columnChoosable, () => html `
                        <mosaik-divider></mosaik-divider>
                        `)}
                        `)}
                        ${when(e.pinable, () => html `
                        <mosaik-menu-item .label="${e.intl.pinColumnsLabel}"
                                          .icon="${Icons.pinColumn}"
                                          .menuMode="${'popover'}">
                            <mosaik-menu-item .label="${e.intl.noPinLabel}"
                                              @click="${() => e.pin('none')}"></mosaik-menu-item>
                            <mosaik-menu-item .label="${e.intl.pinLeftLabel}"
                                              .isChecked="${e.pinned === 'left'}"
                                              @click="${() => e.pin('left')}"></mosaik-menu-item>
                            <mosaik-menu-item .label="${e.intl.pinRightLabel}"
                                              .isChecked="${e.pinned === 'right'}"
                                              @click="${() => e.pin('right')}"></mosaik-menu-item>
                        </mosaik-menu-item>
                        ${when(e.hideable || e.autoSizeable || e.columnChoosable, () => html `
                        <mosaik-divider></mosaik-divider>
                        `)}
                        `)}
                        ${when(e.hideable, () => html `
                        <mosaik-menu-item .label="${e.intl.hideColumnLabel}"
                                          .icon="${Icons.hideColumn}"
                                          @click="${() => e.columnHidden = true}"></mosaik-menu-item>
                        `)}
                        ${when(e.autoSizeable, () => html `
                        <mosaik-menu-item .label="${e.intl.autoSizeColumnLabel}"
                                          .icon="${Icons.autoFitColumn}"
                                          @click="${() => e.autoSize()}"></mosaik-menu-item>
                        `)}
                        ${when(e.columnChoosable, () => html `
                        <mosaik-menu-item .label="${e.intl.chooseColumnsLabel}"
                                          .icon="${Icons.chooseColumns}"
                                          @click="${() => e.requestChooseColumns()}"></mosaik-menu-item>
                        `)}
                    </mosaik-menu>
                </mosaik-dropdown-button>
                `)}
            </div>
        </div>
        <mosaik-divider part="separator"
                        .orientation="${'vertical'}"></mosaik-divider>
        ${when(e.resizable, () => html `
        <div part="resize-handle"
             @pointerdown="${(ev) => e.startResize(ev)}"
             @dblclick="${() => e.autoSize()}"></div>
        `)}
    `;
}
//# sourceMappingURL=TableHeaderCellElementTemplate.js.map