// #region Imports
import { html } from '../../../../../Dom/Html';
import { Appearance } from '../../../../Types/Appearance';
import { CalendarView } from '../../../../Types/CalendarView';
// #endregion
/**
 * The template of the `CalendarMonthsViewElement`.
 *
 * @public
 */
export function calendarMonthsViewElementTemplate(e) {
    const displayDate = e.displayDate ?? new Date();
    return html `
        <div part="heading"
             style="display: flex; flex: 1;">
            <mosaik-button-group .dir="${e.dir}"
                                 .appearance="${Appearance.Plain}">
                <mosaik-button part="month"
                               .label="${e.displayDate?.toLocaleString(e.locale, { year: 'numeric' }) ?? ''}"
                               @click="${() => e.setView(CalendarView.Year)}"></mosaik-button>
            </mosaik-button-group>
            <div part="navigation">
                <slot name="header"></slot>
            </div>
        </div>

        <div part="monthView">
            ${Array.from({ length: 12 }, (_, i) => i).map((month) => html `
            <mosaik-calendar-item part="item"
                                  .dir="${e.dir}"
                                  .text="${new Date(displayDate.getFullYear(), month).toLocaleString(e.locale, { month: e.format })}"
                                  .value="${new Date(displayDate.getFullYear(), month)}"
                                  .markers="${e.markerHandler(new Date(displayDate.getFullYear(), month))}"
                                  ?disabled="${e.disabled && e.isDateInRange(new Date(displayDate.getFullYear(), month))}"
                                  @click="${() => e.selectMonth(month)}"></mosaik-calendar-item>
            `)}
        </div>
    `;
}
//# sourceMappingURL=CalendarMonthsViewElementTemplate.js.map