// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { choose } from '../../../Directives/Directives';
import { ifTrue } from '../../../Directives/IfTrue';
import { Appearance } from '../../../Types/Appearance';
import { CalendarView } from '../../../Types/CalendarView';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the {@link CalendarElement}.
 *
 * @public
 */
export function calendarElementTemplate(e) {
    return html `
        <mosaik-stack .dir="${e.dir}"
                      .orientation="${e.orientation}">
            <div part="header">
                <mosaik-calendar-header .dir="${e.dir}"
                                        .text="${e.header}"
                                        ?disabled="${e.disabled}"></mosaik-calendar-header>
                <mosaik-calendar-sub-header .dir="${e.dir}"
                                            .text="${e.value ? e.value.toLocaleString(e.locale, { day: 'numeric', month: 'long', year: 'numeric' }) : ''}"
                                            ?disabled="${e.disabled}"></mosaik-calendar-sub-header>
            </div>
            <div part="content">
                ${choose(e.view, [[CalendarView.Year, () => html `
                <mosaik-calendar-years-view part="yearsView"
                                            .dir="${e.dir}"
                                            .blackoutDates="${e.blackoutDates}"
                                            .specialDates="${e.specialDates}"
                                            .markerHandler="${e.markerHandler}"
                                            .value="${e.value ?? undefined}"
                                            .intl="${e.intl}"
                                            .variant="${e.variant}"
                                            .appearance="${e.appearance}"
                                            .locale="${e.locale}"
                                            .selection="${e.selectionMode}"
                                            .displayDate="${e.displayDate}"
                                            .displayDateStart="${e.displayDateStart}"
                                            .displayDateEnd="${e.displayDateEnd}"
                                            ?disabled="${e.disabled}"
                                            @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                            @viewChanged="${(x) => e.onViewChanged(x.detail)}">
                    <div part="navigation"
                         slot="header">
                        <mosaik-button-group .dir="${e.dir}"
                                             .appearance="${Appearance.Plain}">
                            <mosaik-button part="previous"
                                           .icon="${Icons.caretUp}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigatePrevious()}"></mosaik-button>
                            <mosaik-button part="today"
                                           .icon="${Icons.today}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateToday()}"></mosaik-button>
                            <mosaik-button part="next"
                                           .icon="${Icons.caretDown}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateNext()}"></mosaik-button>
                        </mosaik-button-group>
                    </div>
                </mosaik-calendar-years-view>
                `], [CalendarView.Month, () => html `
                <mosaik-calendar-months-view part="monthView"
                                             .dir="${e.dir}"
                                             .blackoutDates="${e.blackoutDates}"
                                             .specialDates="${e.specialDates}"
                                             .markerHandler="${e.markerHandler}"
                                             .value="${e.value ?? undefined}"
                                             .intl="${e.intl}"
                                             .variant="${e.variant}"
                                             .appearance="${e.appearance}"
                                             .locale="${e.locale}"
                                             .selection="${e.selectionMode}"
                                             .displayDate="${e.displayDate}"
                                             .displayDateStart="${e.displayDateStart}"
                                             .displayDateEnd="${e.displayDateEnd}"
                                             ?disabled="${e.disabled}"
                                             @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                             @viewChanged="${(x) => e.onViewChanged(x.detail)}">
                    <div part="navigation"
                         slot="header">
                        <mosaik-button-group .dir="${e.dir}"
                                             .appearance="${Appearance.Plain}">
                            <mosaik-button part="previous"
                                           .icon="${Icons.caretUp}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigatePrevious()}"></mosaik-button>
                            <mosaik-button part="today"
                                           .icon="${Icons.today}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateToday()}"></mosaik-button>
                            <mosaik-button part="next"
                                           .icon="${Icons.caretDown}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateNext()}"></mosaik-button>
                        </mosaik-button-group>
                    </div>
                </mosaik-calendar-months-view>
                `], [CalendarView.Day, () => html `
                <mosaik-calendar-days-view part="daysView"
                                           .dir="${e.dir}"
                                           .blackoutDates="${e.blackoutDates}"
                                           .specialDates="${e.specialDates}"
                                           .firstDayOfWeek="${e.firstDayOfWeek}"
                                           .showWeekNumbers="${e.showWeekNumbers}"
                                           .showAdjacent="${e.showAdjacent}"
                                           .markerHandler="${e.markerHandler}"
                                           .value="${e.value ?? undefined}"
                                           .values="${e.values}"
                                           .intl="${e.intl}"
                                           .variant="${e.variant}"
                                           .appearance="${e.appearance}"
                                           .locale="${e.locale}"
                                           .selection="${e.selectionMode}"
                                           .displayDate="${e.displayDate}"
                                           .displayDateStart="${e.displayDateStart}"
                                           .displayDateEnd="${e.displayDateEnd}"
                                           ?is-today-highlighted="${ifTrue(e.isTodayHighlighted)}"
                                           ?is-weekend-highlighted="${ifTrue(e.isWeekendHighlighted)}"
                                           ?disabled="${e.disabled}"
                                           @valueChanged="${(x) => e.onValueChanged(x.detail)}"
                                           @viewChanged="${(x) => e.onViewChanged(x.detail)}">
                    <div part="navigation"
                         slot="header">
                        <mosaik-button-group .dir="${e.dir}"
                                             .appearance="${Appearance.Plain}">
                            <mosaik-button part="previous"
                                           .icon="${Icons.caretUp}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigatePrevious()}"></mosaik-button>
                            <mosaik-button part="today"
                                           .icon="${Icons.today}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateToday()}"></mosaik-button>
                            <mosaik-button part="next"
                                           .icon="${Icons.caretDown}"
                                           .iconSize="${Size.Small}"
                                           @click="${() => e.navigateNext()}"></mosaik-button>
                        </mosaik-button-group>
                    </div>
                </mosaik-calendar-days-view>
                `]])}
            </div>
            <slot name="footer"></slot>
        </mosaik-stack>
    `;
}
//# sourceMappingURL=CalendarElementTemplate.js.map