// #region Imports
import { html } from '../../../../../Dom/Html';
import { drag, dragHandle, dropList } from '../../../../../DragDrop';
import { Icons } from '../../../../../Resources/Icons';
import { repeat, when } from '../../../../Directives/Directives';
// #endregion
/**
 * The template of the `TableColumnEditorElement`.
 *
 * @public
 */
export function tableColumnEditorElementTemplate(e) {
    return html `
        <div part="header">
            <mosaik-text part="title"
                         .lang="${e.lang}"
                         .dir="${e.dir}"
                         .text="${e.intl.header}"></mosaik-text>
            <mosaik-dismiss slot="suffix"
                            .appearance="${'plain'}"
                            .size="${'small'}"
                            .lang="${e.lang}"
                            .dir="${e.dir}"
                            @click="${() => e.dismiss()}"></mosaik-dismiss>
        </div>
        <div part="filter">
            <mosaik-searchbox part="search"
                              .lang="${e.lang}"
                              .dir="${e.dir}"
                              .placeholder="${e.intl.searchPlaceholder}"
                              .value="${e.filter}"
                              .variant="${'primary'}"
                              .mode="${'input'}"
                              @searched="${(ev) => e.handleFilterChange(ev.detail.query)}"></mosaik-searchbox>
        </div>
        <mosaik-scroll part="scroll"
                       .orientation="${'vertical'}">
            <mosaik-checkbox part="item"
                             .lang="${e.lang}"
                             .dir="${e.dir}"
                             .isChecked="${e.allVisible}"
                             .variant="${'primary'}"
                             .appearance="${'outline'}"
                             .label="${e.intl.allColumnsLabel}"
                             @checked="${() => e.toggleAll(true)}"
                             @unchecked="${() => e.toggleAll(false)}"></mosaik-checkbox>
            <div part="list"
                 ${dropList({ orientation: 'vertical', disabled: !e.isDragEnabled })}
                 @drop="${(ev) => e.handleDrop(ev)}">
                ${repeat(e.filteredColumns, (col) => col.key, (col) => html `
                    <div part="item" ${drag({ disabled: !e.isDragEnabled, lockAxis: 'y' })}>
                        <mosaik-checkbox part="checkbox"
                                         .lang="${e.lang}"
                                         .dir="${e.dir}"
                                         .isChecked="${col.visible}"
                                         .variant="${'primary'}"
                                         .appearance="${'outline'}"
                                         .label="${col.title}"
                                         @checked="${() => e.setColumnVisibility(col.key, true)}"
                                         @unchecked="${() => e.setColumnVisibility(col.key, false)}"></mosaik-checkbox>
                        ${when(e.isDragEnabled, () => html `
                            <div part="drag-handle" ${dragHandle()}>
                                <mosaik-icon .lang="${e.lang}"
                                             .dir="${e.dir}"
                                             .data="${Icons.reorderDotsVertical}"
                                             .size="${'tiny'}"></mosaik-icon>
                            </div>
                        `)}
                    </div>
                `)}
            </div>
        </mosaik-scroll>
    `;
}
//# sourceMappingURL=TableColumnEditorElementTemplate.js.map