// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { partMap } from '../../../Directives/part-map/PartMapDirective';
import { CarouselDisplayMode } from '../../../Types/CarouselDisplayMode';
// #endregion
/**
 * The template of the `CarouselElement`.
 *
 * @public
 */
export function carouselElementTemplate(e) {
    return html `
        ${when(e.showNavigation, () => html `
        <mosaik-fab part="previous"
                    aria-label="previous"
                    .lang="${e.lang}"
                    .dir="${e.dir}"
                    .appearance="${e.appearance}"
                    .variant="${e.variant}"
                    .disabled="${e.disabled || !e.hasPrevious}"
                    .icon="${'M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z'}"
                    @click="${() => e.selectPrevious()}"></mosaik-fab>
        `)}
        <div part="content"
             role="region">
            <div part=${partMap({ 'list': true, 'slide': e.displayMode === CarouselDisplayMode.Slide, 'deck': e.displayMode === CarouselDisplayMode.Deck })}
                 role="list"
                 tabindex="0">
                <slot></slot>
            </div>
        </div>
        ${when(e.showNavigation, () => html `
        <mosaik-fab part="next"
                    aria-label="next"
                    .lang="${e.lang}"
                    .dir="${e.dir}"
                    .appearance="${e.appearance}"
                    .variant="${e.variant}"
                    .disabled="${e.disabled || !e.hasNext}"
                    .icon="${'M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z'}"
                    @click="${() => e.selectNext()}"></mosaik-fab>
        `)}
        ${when(e.showIndicator, () => html `
        <div part="indicator">
            <slot name="indicator">
                <mosaik-text .lang="${e.lang}"
                             .dir="${e.dir}"
                             .text="${e.selectedIndex + 1} / ${e.items.length}"></mosaik-text>
            </slot>
        </div>
        `)}
    `;
}
//# sourceMappingURL=CarouselElementTemplate.js.map