// #region Imports
import { repeat, when } from '../../../../Controls/Directives/Directives';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { interpolate } from '../../../Directives/Interpolate/InterpolateDirective';
import { Appearance } from '../../../Types/Appearance';
import { Variant } from '../../../Types/Variant';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the `PaginatorElement`.
 *
 * @public
 */
export function paginatorElementTemplate(e) {
    return html `
        <mosaik-stack part="container"
                      .lang="${e.lang}"
                      .dir="${e.dir}"
                      .gap="${'8px'}"
                      .verticalAlignment="${VerticalAlignment.Center}">
            ${when(e.showFirstLastButtons, () => html `
                <mosaik-button part="first"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .icon="${Icons.chevronDoubleLeft}"
                               .appearance="${e.appearance}"
                               .variant="${e.variant}"
                               .disabled="${e.disabled || !e.hasPreviousPage}"
                               .ariaLabel="${e.intl.firstPageLabel}"
                               @click="${() => e.goToFirstPage()}"></mosaik-button>
            `)}
            <mosaik-button part="previous"
                           .lang="${e.lang}"
                           .dir="${e.dir}"
                           .icon="${Icons.chevronLeft}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"
                           .disabled="${e.disabled || !e.hasPreviousPage}"
                           .ariaLabel="${e.intl.previousPageLabel}"
                           @click="${() => e.goToPreviousPage()}"></mosaik-button>
            <mosaik-stack part="pages-container" .lang="${e.lang}"
                          .dir="${e.dir}">
                ${repeat(e.calculatePages(e.total, e.size), (x) => x, (x) => html `
                <mosaik-button part="page"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .label="${x.toString()}"
                               .appearance="${x - 1 === e.currentPage ? e.appearance : Appearance.Plain}"
                               .variant="${x - 1 === e.currentPage ? e.variant : Variant.Default}"
                               .disabled="${e.disabled}"
                               .ariaLabel="${'Page ' + x}"
                               .ariaCurrent="${x - 1 === e.currentPage ? 'page' : null}"
                               @click="${() => e.goToPage(x - 1)}"></mosaik-button>
                `)}
            </mosaik-stack>
            <mosaik-button part="next"
                           .lang="${e.lang}"
                           .dir="${e.dir}"
                           .icon="${Icons.chevronRight}"
                           .appearance="${e.appearance}"
                           .variant="${e.variant}"
                           .disabled="${e.disabled || !e.hasNextPage}"
                           .ariaLabel="${e.intl.nextPageLabel}"
                           @click="${() => e.goToNextPage()}"></mosaik-button>
            ${when(e.showFirstLastButtons, () => html `
                <mosaik-button part="last"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .icon="${Icons.chevronDoubleRight}"
                               .appearance="${e.appearance}"
                               .variant="${e.variant}"
                               .disabled="${e.disabled || !e.hasNextPage}"
                               .ariaLabel="${e.intl.lastPageLabel}"
                               @click="${() => e.goToLastPage()}"></mosaik-button>
            `)}

            ${when(e.showSizes, () => html `
            <mosaik-stack part="size-selector-container"
                          .lang="${e.lang}"
                          .dir="${e.dir}">
                <mosaik-select part="size-selector" .lang="${e.lang}"
                               .dir="${e.dir}"
                               .appearance="${e.appearance}"
                               .variant="${e.variant}"
                               .disabled="${e.disabled}"
                               .value="${e.size.toString()}"
                               .ariaLabel="${e.intl.itemsPerPageLabel}"
                               @selectionChanged="${(event) => e.changePageSize(event.detail.newValue.value)}">
                    ${repeat(e.sizes, (x) => x, (x) => html `
                    <mosaik-select-item .lang="${e.lang}"
                                        .dir="${e.dir}"
                                        .value="${x}"
                                        .label="${x.toString()}"></mosaik-select-item>
                    `)}
                </mosaik-select>
            </mosaik-stack>
            `)}
        </mosaik-stack>
        <mosaik-stack part="range-container"
                      .lang="${e.lang}"
                      .dir="${e.dir}">
            <mosaik-text part="range"
                         .lang="${e.lang}"
                         .dir="${e.dir}"
                         .text="${interpolate(e.intl.rangeLabel, e.rangeStart, e.rangeEnd, e.total)}"></mosaik-text>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=PaginatorElementTemplate.js.map