import { ExecutionContext, children, elements, html, ref, repeat, when } from '@ni/fast-element';
import { tableHeaderTag } from './components/header';
import { tableRowTag } from './components/row';
import { TableColumnSortDirection, TableRowSelectionMode, TableRowSelectionState } from './types';
import { tableGroupRowTag } from './components/group-row';
import { buttonTag } from '../button';
import { ButtonAppearance } from '../button/types';
import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal';
import { checkboxTag } from '../checkbox';
import { tableCollapseAllLabel, tableRowOperationColumnLabel, tableSelectAllLabel } from '../label-provider/table/label-tokens';
export const template = html `
    <template
        role="treegrid"
        ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
        tabindex="0"
        aria-multiselectable="${x => x.ariaMultiSelectable}"
        ${children({ property: 'childItems', filter: elements() })}
    >
        <style>:host{ --ni-private-table-scroll-height: ${x => x.virtualizer.scrollHeight}px; --ni-private-table-horizontal-scrollbar-height: ${x => x.virtualizer.horizontalScrollbarHeight}px; }</style>
        <div class="table-container ${x => (x.windowShiftKeyDown ? 'disable-select' : '')}"
            style="
            --ni-private-table-scroll-x: -${x => x.scrollX}px;
            --ni-private-table-header-container-margin-right: ${x => x.virtualizer.headerContainerMarginRight}px;
            --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px;
            --ni-private-table-row-grid-columns: ${x => (x.rowGridColumns ? x.rowGridColumns : '')};
            --ni-private-table-cursor-override: ${x => (x.layoutManager.isColumnBeingSized ? 'col-resize' : 'default')};
            --ni-private-table-scrollable-min-width: ${x => x.tableScrollableMinWidth}px;
            ">
            <div role="rowgroup" class="header-row-container">
                <div class="header-row" role="row">
                    <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
                        ${when(x => x.showRowOperationColumn, html `
                            <span class="accessibly-hidden">
                                ${x => tableRowOperationColumnLabel.getValueFor(x)}
                            </span>
                        `)}
                        ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
                            <span class="checkbox-container">
                                <${checkboxTag}
                                    ${ref('selectionCheckbox')}
                                    ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                    tabindex="-1"
                                    class="selection-checkbox"
                                    @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
                                    title="${x => tableSelectAllLabel.getValueFor(x)}"
                                    aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
                                >
                                </${checkboxTag}>
                            </span>
                        `)}
                        <span class="collapse-all-button-container">
                            <${buttonTag}
                                ${ref('collapseAllButton')}
                                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                tabindex="-1"
                                class="collapse-all-button ${x => x.collapseButtonVisibility}"
                                content-hidden
                                appearance="${ButtonAppearance.ghost}"
                                title="${x => tableCollapseAllLabel.getValueFor(x)}"
                                @click="${x => x.handleCollapseAllRows()}"
                            >
                                <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
                                ${x => tableCollapseAllLabel.getValueFor(x)}
                            </${buttonTag}>
                        </span>
                    </span>
                    <span class="column-headers-container" ${ref('columnHeadersContainer')}>
                        ${repeat(x => x.visibleColumns, html `
                            <div class="header-container">
                                ${when((_, c) => c.index > 0, html `
                                    <div
                                        class="
                                            column-divider
                                            left
                                            ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
                                            ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
                                            ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
                                        "
                                        @pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event, c.index)}">
                                    </div>
                                `)}
                                    <${tableHeaderTag}
                                        class="header"
                                        ${'' /* tabindex managed dynamically by KeyboardNavigationManager (if column sorting not disabled) */}
                                        sort-direction="${x => (typeof x.columnInternals.currentSortIndex === 'number' ? x.columnInternals.currentSortDirection : TableColumnSortDirection.none)}"
                                        ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
                                        ?indicators-hidden="${x => x.columnInternals.hideHeaderIndicators}"
                                        @keydown="${(x, c) => c.parent.onHeaderKeyDown(x, c.event)}"
                                        @click="${(x, c) => c.parent.toggleColumnSort(x, c.event.shiftKey)}"
                                        :alignment="${x => x.columnInternals.headerAlignment}"
                                        :isGrouped=${x => (typeof x.columnInternals.groupIndex === 'number' && !x.columnInternals.groupingDisabled)}
                                    >
                                        <slot name="${x => x.slot}"></slot>
                                    </${tableHeaderTag}>
                                ${when((_, c) => c.index < c.length - 1, html `
                                    <div
                                        class="
                                            column-divider
                                            right
                                            ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
                                            ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
                                            ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
                                        "
                                        @pointerdown="${(_, c) => c.parent.onRightDividerPointerDown(c.event, c.index)}">
                                    </div>
                                `)}                        
                            </div>
                        `, { positioning: true })}
                        <div class="header-scrollbar-spacer"></div>
                    </span>
                </div>
            </div>
            <div class="table-viewport" tabindex="-1" ${ref('viewport')}>
                <div class="table-scroll"></div>
                <div class="table-row-container ${x => `${x.showCollapseAll ? 'collapse-all-visible' : ''}`}" ${children({ property: 'rowElements', filter: elements(`${tableRowTag}, ${tableGroupRowTag}`) })}
                    role="rowgroup">
                    ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                        ${repeat(x => x.virtualizer.visibleItems, html `
                            ${when((x, c) => c.parent.tableData[x.index]?.isGroupRow, html `
                                <${tableGroupRowTag}
                                    class="group-row"
                                    ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                    tabindex="-1"
                                    :groupRowValue="${(x, c) => c.parent.tableData[x.index]?.groupRowValue}"
                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                    :immediateChildCount="${(x, c) => c.parent.tableData[x.index]?.immediateChildCount}"
                                    :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
                                    ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
                                    selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
                                    :resolvedRowIndex="${x => x.index}"
                                    ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
                                    @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
                                    @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
                                    @group-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                    @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
                                >
                                </${tableGroupRowTag}>
                            `)}
                            ${when((x, c) => !c.parent.tableData[x.index]?.isGroupRow, html `
                                <${tableRowTag}
                                    class="row"
                                    ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
                                    tabindex="-1"
                                    record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                    ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
                                    ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
                                    ?expanded="${(x, c) => c.parent.tableData[x.index]?.isExpanded}"
                                    ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
                                    ?reserve-collapse-space="${(_, c) => c.parent.canHaveCollapsibleRows}"
                                    :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                    :columns="${(_, c) => c.parent.columns}"
                                    :isParentRow="${(x, c) => c.parent.tableData[x.index]?.isParentRow}"
                                    :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                    ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                    ?loading="${(x, c) => c.parent.tableData[x.index]?.isLoadingChildren}"
                                    :resolvedRowIndex="${x => x.index}"
                                    ?allow-hover="${(_, c) => !c.parent.virtualizer.isScrolling}"
                                    @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                    @focusin="${(_, c) => c.parent.onRowFocusIn(c.event)}"
                                    @blur="${(_, c) => c.parent.onRowBlur(c.event)}"
                                    @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                    @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
                                    @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                    @row-slots-request="${(_, c) => c.parent.onRowSlotsRequest(c.event)}"
                                    @row-expand-toggle="${(x, c) => c.parent.handleRowExpanded(x.index)}"
                                >
                                ${repeat((x, c) => (c.parent.tableData[x.index]?.requestedSlots || []), html `
                                    <slot
                                        name="${x => x.name}"
                                        slot="${x => x.slot}"
                                    ></slot>
                                `)}
                                </${tableRowTag}>
                            `)}
                        `)}
                    `)}
                </div>
            </div>
        </div>
    </template>
`;
//# sourceMappingURL=template.js.map