@malva-ui/core 0.1.13 → 0.1.14

package/esm2022/calendar/lib/calendar/calendar.js

@@ -1,672 +0,0 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { afterNextRender, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, Injector, input, model, signal, untracked, ViewEncapsulation, } from '@angular/core';
-import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
-import { MlvFade } from '@malva-ui/cdk/utils';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
-import { MLV_DATE_ADAPTER, } from '../date-provider/date-adapter';
-import { MlvNativeDateAdapter } from '../date-provider/native-date-adapter';
-import { MLV_CALENDAR_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
-import * as i0 from "@angular/core";
-export class MlvCalendar {
-    /** @private The active date adapter — a provided `MLV_DATE_ADAPTER`, or the native fallback. */
-    _dateAdapter = inject(MLV_DATE_ADAPTER, {
-        optional: true,
-    }) ??
-        inject(MlvNativeDateAdapter);
-    /** @protected The component's i18n strings signal. */
-    _i18n = inject(MLV_CALENDAR_I18N);
-    /** @private Resolver for ICU parameterized i18n strings. */
-    _resolver = inject(MlvI18nResolverService);
-    /** @private Host element used to locate the roving-focus cell. */
-    _elementRef = inject((ElementRef));
-    /** @private Injector for scheduling post-render focus of the active cell. */
-    _injector = inject(Injector);
-    /** Currently selected single date value. */
-    value = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Currently selected range value when range mode is enabled. */
-    rangeValue = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
-    /** Minimum selectable date. */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-    /** Maximum selectable date. */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-    /** Optional predicate for disabling arbitrary dates. */
-    disabledDates = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    /** Initial view shown by the calendar. */
-    startView = input('month', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
-    /** First day of the week where `0` is Sunday. */
-    firstDayOfWeek = input(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
-    /** Enables range selection mode. */
-    range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Removes standalone surface chrome when rendered inside another container such as a popup. */
-    embedded = input(false, { ...(ngDevMode ? { debugName: "embedded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /**
-     * Date currently focused by navigation and view state.
-     *
-     * Two-way bindable via `[(activeDate)]` so a parent can coordinate
-     * navigation across multiple calendars (e.g. the side-by-side panels in
-     * `mlv-date-range-picker`). Defaults to the selected value when present,
-     * otherwise to today.
-     */
-    activeDate = model(this._getInitialActiveDate(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
-    /** Current calendar view mode. */
-    currentView = signal(this.startView(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
-    /** @private Transient range endpoint used only for pointer/keyboard preview. */
-    _rangePreviewDate = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_rangePreviewDate" }] : /* istanbul ignore next */ []));
-    /**
-     * @protected Chronologically ordered interval currently painted in the grid.
-     * A committed end date wins; otherwise the hovered/focused preview date is
-     * paired with the selected anchor without mutating `rangeValue`.
-     */
-    _displayRange = computed(() => {
-        if (!this.range()) {
-            return null;
-        }
-        const value = this.rangeValue();
-        const anchor = value?.start;
-        const candidate = value?.end ?? this._rangePreviewDate();
-        if (!anchor || !candidate) {
-            return null;
-        }
-        return this._dateAdapter.compareDate(anchor, candidate) <= 0
-            ? { start: anchor, end: candidate }
-            : { start: candidate, end: anchor };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_displayRange" }] : /* istanbul ignore next */ []));
-    /** Whether the painted interval is a transient hover/focus preview. */
-    isRangePreviewing = computed(() => {
-        const value = this.rangeValue();
-        return !!value?.start && !value.end && !!this._rangePreviewDate();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isRangePreviewing" }] : /* istanbul ignore next */ []));
-    /** Whether both selected endpoints are set and the primary range band is committed. */
-    hasCompletedRange = computed(() => {
-        const value = this.rangeValue();
-        return !!value?.start && !!value.end;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasCompletedRange" }] : /* istanbul ignore next */ []));
-    /** Localized weekday labels rotated by `firstDayOfWeek`. */
-    weekdays = computed(() => {
-        this._dateAdapter.locale();
-        const days = this._dateAdapter.getDayOfWeekNames('short');
-        const start = this.firstDayOfWeek();
-        return [...days.slice(start), ...days.slice(0, start)];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
-    /** Month grid cells, including adjacent-month overflow days. */
-    monthDays = computed(() => {
-        const date = this.activeDate();
-        const year = this._dateAdapter.getYear(date);
-        const month = this._dateAdapter.getMonth(date);
-        const firstDay = this._dateAdapter.createDate(year, month, 1);
-        const lastDay = this._dateAdapter.createDate(year, month, this._dateAdapter.getNumDaysInMonth(firstDay));
-        const startOffset = (this._dateAdapter.getDayOfWeek(firstDay) - this.firstDayOfWeek() + 7) %
-            7;
-        const days = [];
-        for (let i = startOffset; i > 0; i--) {
-            days.push({
-                date: this._dateAdapter.addCalendarDays(firstDay, -i),
-                currentMonth: false,
-            });
-        }
-        for (let day = 1; day <= this._dateAdapter.getDate(lastDay); day++) {
-            days.push({
-                date: this._dateAdapter.createDate(year, month, day),
-                currentMonth: true,
-            });
-        }
-        let trailingDayOffset = 1;
-        while (days.length % 7 !== 0) {
-            days.push({
-                date: this._dateAdapter.addCalendarDays(lastDay, trailingDayOffset++),
-                currentMonth: false,
-            });
-        }
-        return days;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "monthDays" }] : /* istanbul ignore next */ []));
-    /**
-     * Month grid cells grouped into week rows (arrays of 7) so the template can
-     * render each week as a `role="row"` inside the `role="grid"` structure.
-     */
-    monthWeeks = computed(() => {
-        const days = this.monthDays();
-        const weeks = [];
-        for (let i = 0; i < days.length; i += 7) {
-            weeks.push(days.slice(i, i + 7));
-        }
-        return weeks;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "monthWeeks" }] : /* istanbul ignore next */ []));
-    /** Localized month labels used by the year view. */
-    months = computed(() => {
-        this._dateAdapter.locale();
-        return this._dateAdapter.getMonthNames('short');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-    /** Consecutive 24-year block used by the multi-year view. */
-    years = computed(() => {
-        const start = this._yearBlockStart(this.activeDate());
-        return Array.from({ length: 24 }, (_, index) => start + index);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
-    /** Localized header label for the active view. */
-    headerLabel = computed(() => {
-        const date = this.activeDate();
-        this._dateAdapter.locale();
-        if (this.currentView() === 'month') {
-            return this._dateAdapter.getMonthYearLabel(date);
-        }
-        if (this.currentView() === 'year') {
-            return this._dateAdapter.getYearLabel(date);
-        }
-        const start = this._yearBlockStart(date);
-        return `${this.getYearOptionLabel(start)} - ${this.getYearOptionLabel(start + 23)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * @protected Localized aria-label for the view-switching header button.
-     * Announces the view the button will switch to (month → year → multi-year → month).
-     */
-    _switchViewLabel = computed(() => {
-        const view = this.currentView();
-        const nextView = view === 'month' ? 'year' : view === 'year' ? 'multiYear' : 'month';
-        return this._resolver.resolve(this._i18n(), 'switchView', { view: nextView });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_switchViewLabel" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (this.range()) {
-                return;
-            }
-            const selected = this.value();
-            if (!selected) {
-                return;
-            }
-            const normalizedSelected = this._dateAdapter.clone(selected);
-            if (!this._dateAdapter.sameDate(untracked(this.activeDate), normalizedSelected)) {
-                this.activeDate.set(normalizedSelected);
-            }
-        });
-        effect(() => {
-            if (!this.range()) {
-                return;
-            }
-            const rangeValue = this.rangeValue();
-            const anchor = rangeValue?.end ?? rangeValue?.start;
-            if (!anchor) {
-                return;
-            }
-            const normalizedAnchor = this._dateAdapter.clone(anchor);
-            if (!this._dateAdapter.sameDate(untracked(this.activeDate), normalizedAnchor)) {
-                this.activeDate.set(normalizedAnchor);
-            }
-        });
-    }
-    /** Navigates to the previous visible period when available. */
-    navigatePrev() {
-        if (!this.canNavigatePrev()) {
-            return;
-        }
-        if (this.currentView() === 'month') {
-            this.activeDate.set(this._dateAdapter.addCalendarMonths(this.activeDate(), -1));
-            return;
-        }
-        if (this.currentView() === 'year') {
-            this.activeDate.set(this._dateAdapter.addCalendarYears(this.activeDate(), -1));
-            return;
-        }
-        this.activeDate.set(this._dateAdapter.addCalendarYears(this.activeDate(), -24));
-    }
-    /** Navigates to the next visible period when available. */
-    navigateNext() {
-        if (!this.canNavigateNext()) {
-            return;
-        }
-        if (this.currentView() === 'month') {
-            this.activeDate.set(this._dateAdapter.addCalendarMonths(this.activeDate(), 1));
-            return;
-        }
-        if (this.currentView() === 'year') {
-            this.activeDate.set(this._dateAdapter.addCalendarYears(this.activeDate(), 1));
-            return;
-        }
-        this.activeDate.set(this._dateAdapter.addCalendarYears(this.activeDate(), 24));
-    }
-    /** Cycles between month, year, and multi-year views. */
-    switchView() {
-        const views = ['month', 'year', 'multi-year'];
-        const index = views.indexOf(this.currentView());
-        this.currentView.set(views[(index + 1) % views.length]);
-    }
-    /** Selects a date or extends the current range selection. */
-    selectDate(date) {
-        if (this.isDateDisabled(date)) {
-            return;
-        }
-        const normalizedDate = this._dateAdapter.clone(date);
-        this._rangePreviewDate.set(null);
-        this.activeDate.set(normalizedDate);
-        if (!this.range()) {
-            this.value.set(normalizedDate);
-            return;
-        }
-        const currentRange = this.rangeValue();
-        const start = currentRange?.start
-            ? this._dateAdapter.clone(currentRange.start)
-            : null;
-        const end = currentRange?.end
-            ? this._dateAdapter.clone(currentRange.end)
-            : null;
-        if (!start || end) {
-            this.rangeValue.set({
-                start: normalizedDate,
-                end: null,
-            });
-            return;
-        }
-        if (this._dateAdapter.compareDate(normalizedDate, start) < 0) {
-            this.rangeValue.set({
-                start: normalizedDate,
-                end: start,
-            });
-            return;
-        }
-        this.rangeValue.set({
-            start,
-            end: normalizedDate,
-        });
-    }
-    /** Selects a month in the current year and returns to month view. */
-    selectMonth(month) {
-        if (this.isMonthDisabled(month)) {
-            return;
-        }
-        const activeDate = this.activeDate();
-        const nextDate = this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), month, Math.min(this._dateAdapter.getDate(activeDate), this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), month, 1))));
-        this.activeDate.set(nextDate);
-        this.currentView.set('month');
-    }
-    /** Selects a year and returns to year view. */
-    selectYear(year) {
-        if (this.isYearDisabled(year)) {
-            return;
-        }
-        const activeDate = this.activeDate();
-        const month = this._dateAdapter.getMonth(activeDate);
-        const nextDate = this._dateAdapter.createDate(year, month, Math.min(this._dateAdapter.getDate(activeDate), this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1))));
-        this.activeDate.set(nextDate);
-        this.currentView.set('year');
-    }
-    /** Returns `true` when the date is outside the allowed selection rules. */
-    isDateDisabled(date) {
-        const minDate = this.min();
-        const maxDate = this.max();
-        const disabledFn = this.disabledDates();
-        if (minDate && this._dateAdapter.compareDate(date, minDate) < 0) {
-            return true;
-        }
-        if (maxDate && this._dateAdapter.compareDate(date, maxDate) > 0) {
-            return true;
-        }
-        return !!disabledFn && disabledFn(date);
-    }
-    /** Returns `true` when the date matches today according to the adapter. */
-    isToday(date) {
-        return this._dateAdapter.sameDate(date, this._dateAdapter.today());
-    }
-    /** Returns `true` when the date matches the selected single value. */
-    isSelected(date) {
-        if (this.range()) {
-            return false;
-        }
-        return this._dateAdapter.sameDate(date, this.value());
-    }
-    /** Returns `true` when the date is the current range start. */
-    isRangeStart(date) {
-        return this._dateAdapter.sameDate(date, this.rangeValue()?.start ?? null);
-    }
-    /** Returns `true` when the date is the current range end. */
-    isRangeEnd(date) {
-        return this._dateAdapter.sameDate(date, this.rangeValue()?.end ?? null);
-    }
-    /** Returns `true` when the date is the leading endpoint currently painted. */
-    isDisplayRangeStart(date) {
-        return this._dateAdapter.sameDate(date, this._displayRange()?.start ?? null);
-    }
-    /** Returns `true` when the date is the trailing endpoint currently painted. */
-    isDisplayRangeEnd(date) {
-        return this._dateAdapter.sameDate(date, this._displayRange()?.end ?? null);
-    }
-    /** Returns `true` when the date lies inside the selected or previewed interval. */
-    isInDisplayRange(date) {
-        const range = this._displayRange();
-        if (!range) {
-            return false;
-        }
-        return (this._dateAdapter.compareDate(date, range.start) >= 0 &&
-            this._dateAdapter.compareDate(date, range.end) <= 0);
-    }
-    /** Previews a potential range end without changing the selected range value. */
-    previewRange(date) {
-        const value = this.rangeValue();
-        if (!this.range() ||
-            !value?.start ||
-            value.end ||
-            this.isDateDisabled(date)) {
-            return;
-        }
-        this._rangePreviewDate.set(this._dateAdapter.clone(date));
-    }
-    /** Clears the transient range preview when pointer/focus leaves the day grid. */
-    clearRangePreview() {
-        this._rangePreviewDate.set(null);
-    }
-    /** Returns `true` when the date lies inside the selected range. */
-    isInRange(date) {
-        const rangeValue = this.rangeValue();
-        if (!rangeValue?.start || !rangeValue?.end) {
-            return false;
-        }
-        return (this._dateAdapter.compareDate(date, rangeValue.start) >= 0 &&
-            this._dateAdapter.compareDate(date, rangeValue.end) <= 0);
-    }
-    /** Returns `true` when the date is the active navigated date. */
-    isActive(date) {
-        return this._dateAdapter.sameDate(date, this.activeDate());
-    }
-    /** Returns `true` when the given year matches the active year. */
-    isCurrentYear(year) {
-        return this._dateAdapter.getYear(this.activeDate()) === year;
-    }
-    /** Returns `true` when the given month index matches the active month. */
-    isCurrentMonthIndex(month) {
-        return this._dateAdapter.getMonth(this.activeDate()) === month;
-    }
-    /** Returns `true` when an entire month has no selectable dates. */
-    isMonthDisabled(month) {
-        const activeDate = this.activeDate();
-        return !this._hasSelectableDateInRange(this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), month, 1), this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), month, this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(this._dateAdapter.getYear(activeDate), month, 1))));
-    }
-    /** Returns `true` when an entire year has no selectable dates. */
-    isYearDisabled(year) {
-        return !this._hasSelectableDateInRange(this._dateAdapter.createDate(year, 0, 1), this._dateAdapter.createDate(year, 11, 31));
-    }
-    /** Returns `true` when navigating to the previous period is allowed. */
-    canNavigatePrev() {
-        const activeDate = this.activeDate();
-        if (this.currentView() === 'month') {
-            const previousMonth = this._dateAdapter.addCalendarMonths(activeDate, -1);
-            return this._hasSelectableDateInRange(this._dateAdapter.createDate(this._dateAdapter.getYear(previousMonth), this._dateAdapter.getMonth(previousMonth), 1), this._dateAdapter.createDate(this._dateAdapter.getYear(previousMonth), this._dateAdapter.getMonth(previousMonth), this._dateAdapter.getNumDaysInMonth(previousMonth)));
-        }
-        if (this.currentView() === 'year') {
-            const previousYear = this._dateAdapter.addCalendarYears(activeDate, -1);
-            return this._hasSelectableDateInRange(this._dateAdapter.createDate(this._dateAdapter.getYear(previousYear), 0, 1), this._dateAdapter.createDate(this._dateAdapter.getYear(previousYear), 11, 31));
-        }
-        const blockStart = this._yearBlockStart(activeDate) - 24;
-        return this._hasSelectableDateInRange(this._dateAdapter.createDate(blockStart, 0, 1), this._dateAdapter.createDate(blockStart + 23, 11, 31));
-    }
-    /** Returns `true` when navigating to the next period is allowed. */
-    canNavigateNext() {
-        const activeDate = this.activeDate();
-        if (this.currentView() === 'month') {
-            const nextMonth = this._dateAdapter.addCalendarMonths(activeDate, 1);
-            return this._hasSelectableDateInRange(this._dateAdapter.createDate(this._dateAdapter.getYear(nextMonth), this._dateAdapter.getMonth(nextMonth), 1), this._dateAdapter.createDate(this._dateAdapter.getYear(nextMonth), this._dateAdapter.getMonth(nextMonth), this._dateAdapter.getNumDaysInMonth(nextMonth)));
-        }
-        if (this.currentView() === 'year') {
-            const nextYear = this._dateAdapter.addCalendarYears(activeDate, 1);
-            return this._hasSelectableDateInRange(this._dateAdapter.createDate(this._dateAdapter.getYear(nextYear), 0, 1), this._dateAdapter.createDate(this._dateAdapter.getYear(nextYear), 11, 31));
-        }
-        const blockStart = this._yearBlockStart(activeDate) + 24;
-        return this._hasSelectableDateInRange(this._dateAdapter.createDate(blockStart, 0, 1), this._dateAdapter.createDate(blockStart + 23, 11, 31));
-    }
-    /** Produces a localized accessible label for a day cell. */
-    getDayLabel(date) {
-        this._dateAdapter.locale();
-        return this._dateAdapter.getDateLabel(date);
-    }
-    /** Produces a localized day-of-month label for a day cell. */
-    getDayNumber(date) {
-        this._dateAdapter.locale();
-        return this._dateAdapter.getDayOfMonthLabel(date);
-    }
-    /** Produces the localized ARIA label for the year-view month grid. */
-    getYearViewLabel() {
-        return this._resolver.resolve(this._i18n(), 'selectMonthForYear', { year: this._dateAdapter.getYearLabel(this.activeDate()) });
-    }
-    /** Produces a localized year label for multi-year buttons and ranges. */
-    getYearOptionLabel(year) {
-        this._dateAdapter.locale();
-        return this._dateAdapter.getYearLabel(this._dateAdapter.createDate(year, 0, 1));
-    }
-    /** Stable tracking key for month grid cells. */
-    trackDay(_index, day) {
-        return `${this._dateAdapter.toIso8601(day.date)}-${day.currentMonth ? 'current' : 'adjacent'}`;
-    }
-    /** Dispatches keyboard events to the active view's handler. */
-    onKeydown(event) {
-        switch (this.currentView()) {
-            case 'month':
-                this._handleMonthViewKeydown(event);
-                break;
-            case 'year':
-                this._handleYearViewKeydown(event);
-                break;
-            case 'multi-year':
-                this._handleMultiYearViewKeydown(event);
-                break;
-        }
-    }
-    /** @private Keyboard navigation for the month (day grid) view. */
-    _handleMonthViewKeydown(event) {
-        let nextDate = null;
-        switch (event.key) {
-            case 'ArrowLeft':
-                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), -1);
-                break;
-            case 'ArrowRight':
-                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), 1);
-                break;
-            case 'ArrowUp':
-                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), -7);
-                break;
-            case 'ArrowDown':
-                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), 7);
-                break;
-            case 'PageUp':
-                nextDate = this._dateAdapter.addCalendarMonths(this.activeDate(), -1);
-                break;
-            case 'PageDown':
-                nextDate = this._dateAdapter.addCalendarMonths(this.activeDate(), 1);
-                break;
-            case 'Home':
-                nextDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate()), this._dateAdapter.getMonth(this.activeDate()), 1);
-                break;
-            case 'End':
-                nextDate = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate()), this._dateAdapter.getMonth(this.activeDate()), this._dateAdapter.getNumDaysInMonth(this.activeDate()));
-                break;
-            case 'Enter':
-            case ' ':
-                this.selectDate(this.activeDate());
-                event.preventDefault();
-                return;
-            default:
-                return;
-        }
-        event.preventDefault();
-        this.activeDate.set(nextDate);
-        this._scheduleFocusActiveCell();
-    }
-    /** @private Keyboard navigation for the year (month grid, 4 columns) view. */
-    _handleYearViewKeydown(event) {
-        const activeDate = this.activeDate();
-        const currentMonth = this._dateAdapter.getMonth(activeDate);
-        let nextMonth = null;
-        switch (event.key) {
-            case 'ArrowLeft':
-                nextMonth = currentMonth - 1;
-                break;
-            case 'ArrowRight':
-                nextMonth = currentMonth + 1;
-                break;
-            case 'ArrowUp':
-                nextMonth = currentMonth - 4;
-                break;
-            case 'ArrowDown':
-                nextMonth = currentMonth + 4;
-                break;
-            case 'Home':
-                nextMonth = 0;
-                break;
-            case 'End':
-                nextMonth = 11;
-                break;
-            case 'Enter':
-            case ' ':
-                this.selectMonth(currentMonth);
-                event.preventDefault();
-                return;
-            default:
-                return;
-        }
-        event.preventDefault();
-        if (nextMonth < 0 || nextMonth > 11)
-            return;
-        const year = this._dateAdapter.getYear(activeDate);
-        const day = Math.min(this._dateAdapter.getDate(activeDate), this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, nextMonth, 1)));
-        this.activeDate.set(this._dateAdapter.createDate(year, nextMonth, day));
-        this._scheduleFocusActiveCell();
-    }
-    /** @private Keyboard navigation for the multi-year (year grid, 4 columns) view. */
-    _handleMultiYearViewKeydown(event) {
-        const activeDate = this.activeDate();
-        const currentYear = this._dateAdapter.getYear(activeDate);
-        const blockStart = this._yearBlockStart(activeDate);
-        let nextYear = null;
-        switch (event.key) {
-            case 'ArrowLeft':
-                nextYear = currentYear - 1;
-                break;
-            case 'ArrowRight':
-                nextYear = currentYear + 1;
-                break;
-            case 'ArrowUp':
-                nextYear = currentYear - 4;
-                break;
-            case 'ArrowDown':
-                nextYear = currentYear + 4;
-                break;
-            case 'Home':
-                nextYear = blockStart;
-                break;
-            case 'End':
-                nextYear = blockStart + 23;
-                break;
-            case 'Enter':
-            case ' ':
-                this.selectYear(currentYear);
-                event.preventDefault();
-                return;
-            default:
-                return;
-        }
-        event.preventDefault();
-        if (nextYear < blockStart || nextYear > blockStart + 23)
-            return;
-        const month = this._dateAdapter.getMonth(activeDate);
-        const day = Math.min(this._dateAdapter.getDate(activeDate), this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(nextYear, month, 1)));
-        this.activeDate.set(this._dateAdapter.createDate(nextYear, month, day));
-        this._scheduleFocusActiveCell();
-    }
-    /**
-     * Moves keyboard focus to the active cell of the current view (the day, month,
-     * or year button carrying `tabindex="0"`). Public entry point for consumers
-     * (e.g. `mlv-day-picker`, `mlv-date-range-picker`) that open the calendar in
-     * a popup and want focus to land inside the grid.
-     */
-    focus() {
-        this._focusActiveCell();
-    }
-    /**
-     * @private Schedule a focus move to the active cell after the next render, so
-     * the roving `tabindex="0"` element (re-rendered after `activeDate` changes)
-     * exists in the DOM before we focus it. Only invoked from keyboard handlers,
-     * so programmatic `activeDate` changes never steal focus.
-     */
-    _scheduleFocusActiveCell() {
-        afterNextRender(() => this._focusActiveCell(), {
-            injector: this._injector,
-        });
-    }
-    /** @private Focus the current view's active cell (roving `tabindex="0"`). */
-    _focusActiveCell() {
-        const selector = this.currentView() === 'month'
-            ? '.mlv-calendar__day--active'
-            : '.mlv-calendar__selection-button--current';
-        const host = this._elementRef.nativeElement;
-        const cell = host.querySelector(selector);
-        cell?.focus();
-    }
-    /** @private Resolves the initial active date from the selected value/range, falling back to today. */
-    _getInitialActiveDate() {
-        const selected = this.value() ?? this.rangeValue()?.start ?? this.rangeValue()?.end;
-        return selected
-            ? this._dateAdapter.clone(selected)
-            : this._dateAdapter.today();
-    }
-    /** @private Returns the first year of the 24-year block containing the given date. */
-    _yearBlockStart(date) {
-        const year = this._dateAdapter.getYear(date);
-        return year - (year % 24);
-    }
-    /** @private Whether at least one selectable (non-disabled, in-bounds) date exists in the inclusive range. */
-    _hasSelectableDateInRange(start, end) {
-        const minDate = this.min();
-        const maxDate = this.max();
-        if (minDate && this._dateAdapter.compareDate(end, minDate) < 0) {
-            return false;
-        }
-        if (maxDate && this._dateAdapter.compareDate(start, maxDate) > 0) {
-            return false;
-        }
-        let cursor = minDate && this._dateAdapter.compareDate(start, minDate) < 0
-            ? this._dateAdapter.clone(minDate)
-            : this._dateAdapter.clone(start);
-        const effectiveEnd = maxDate && this._dateAdapter.compareDate(end, maxDate) > 0
-            ? this._dateAdapter.clone(maxDate)
-            : this._dateAdapter.clone(end);
-        while (this._dateAdapter.compareDate(cursor, effectiveEnd) <= 0) {
-            if (!this.isDateDisabled(cursor)) {
-                return true;
-            }
-            cursor = this._dateAdapter.addCalendarDays(cursor, 1);
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvCalendar, isStandalone: true, selector: "mlv-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeDate: "activeDateChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.mlv-calendar--embedded": "embedded()" }, classAttribute: "mlv-calendar" }, ngImport: i0, template: "<div class=\"mlv-calendar__header\">\n  <button\n    class=\"mlv-calendar__nav-button\"\n    mlvButton\n    shape=\"circle\"\n    variant=\"transparent\"\n    mlvDensity=\"compact\"\n    [attr.aria-label]=\"_i18n().previousPeriod\"\n    type=\"button\"\n    [disabled]=\"!canNavigatePrev()\"\n    (click)=\"navigatePrev()\"\n  >\n    <svg mlvButtonIcon lucideChevronLeft />\n  </button>\n  <div mlvFade class=\"mlv-calendar__nav-header-wrapper\">\n    <button\n      class=\"mlv-calendar__header-button\"\n      mlvButton\n      variant=\"transparent\"\n      type=\"button\"\n      (click)=\"switchView()\"\n      [attr.aria-label]=\"_switchViewLabel()\"\n    >\n      {{ headerLabel() }}\n    </button>\n  </div>\n  <button\n    class=\"mlv-calendar__nav-button\"\n    mlvButton\n    shape=\"circle\"\n    variant=\"transparent\"\n    mlvDensity=\"compact\"\n    [attr.aria-label]=\"_i18n().nextPeriod\"\n    type=\"button\"\n    [disabled]=\"!canNavigateNext()\"\n    (click)=\"navigateNext()\"\n  >\n    <svg mlvButtonIcon lucideChevronRight />\n  </button>\n</div>\n\n@if (currentView() === 'month') {\n<div class=\"mlv-calendar__month\" [attr.aria-label]=\"headerLabel()\" role=\"grid\">\n  <div class=\"mlv-calendar__weekdays\" role=\"row\">\n    @for (day of weekdays(); track day) {\n    <span class=\"mlv-calendar__weekday\" role=\"columnheader\">{{ day }}</span>\n    }\n  </div>\n  <div\n    class=\"mlv-calendar__days\"\n    role=\"rowgroup\"\n    (mouseleave)=\"clearRangePreview()\"\n  >\n    @for (week of monthWeeks(); track $index) {\n    <div class=\"mlv-calendar__week\" role=\"row\">\n      @for (day of week; track trackDay($index, day); let rowStart = $first; let\n      rowEnd = $last) {\n      <div\n        class=\"mlv-calendar__day-cell\"\n        role=\"gridcell\"\n        [attr.aria-selected]=\"range() ? isInRange(day.date) : isSelected(day.date)\"\n      >\n        <button\n          class=\"mlv-calendar__cell-button mlv-calendar__day\"\n          [class.mlv-calendar__day--active]=\"isActive(day.date)\"\n          [class.mlv-calendar__day--in-range]=\"isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-preview]=\"isRangePreviewing() && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-complete]=\"hasCompletedRange() && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-start]=\"isDisplayRangeStart(day.date)\"\n          [class.mlv-calendar__day--range-end]=\"isDisplayRangeEnd(day.date)\"\n          [class.mlv-calendar__day--range-row-start]=\"rowStart && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-row-end]=\"rowEnd && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--outside]=\"!day.currentMonth\"\n          [class.mlv-calendar__day--today]=\"isToday(day.date)\"\n          [class.mlv-calendar__day--selected]=\"isSelected(day.date)\"\n          [class.mlv-calendar__day--disabled]=\"isDateDisabled(day.date)\"\n          [attr.tabindex]=\"isActive(day.date) ? 0 : -1\"\n          [attr.aria-label]=\"getDayLabel(day.date)\"\n          [attr.aria-current]=\"isToday(day.date) ? 'date' : null\"\n          [attr.aria-disabled]=\"isDateDisabled(day.date)\"\n          [disabled]=\"isDateDisabled(day.date)\"\n          mlvButton\n          shape=\"circle\"\n          [variant]=\"isSelected(day.date) || isDisplayRangeStart(day.date) || isDisplayRangeEnd(day.date) ? 'primary' : 'transparent'\"\n          mlvDensity=\"compact\"\n          (mouseenter)=\"previewRange(day.date)\"\n          (focus)=\"previewRange(day.date)\"\n          (blur)=\"clearRangePreview()\"\n          (click)=\"selectDate(day.date)\"\n          type=\"button\"\n        >\n          {{ getDayNumber(day.date) }}\n        </button>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n} @if (currentView() === 'year') {\n<div\n  class=\"mlv-calendar__selection-grid\"\n  [attr.aria-label]=\"getYearViewLabel()\"\n  role=\"group\"\n>\n  @for (month of months(); track month; let i = $index) {\n  <button\n    class=\"mlv-calendar__cell-button mlv-calendar__selection-button mlv-calendar__month-button\"\n    [class.mlv-calendar__selection-button--current]=\"isCurrentMonthIndex(i)\"\n    [attr.aria-pressed]=\"isCurrentMonthIndex(i)\"\n    [attr.tabindex]=\"isCurrentMonthIndex(i) ? 0 : -1\"\n    [disabled]=\"isMonthDisabled(i)\"\n    mlvButton\n    [variant]=\"isCurrentMonthIndex(i) ? 'primary' : 'transparent'\"\n    mlvDensity=\"compact\"\n    (click)=\"selectMonth(i)\"\n    type=\"button\"\n  >\n    {{ month }}\n  </button>\n  }\n</div>\n} @if (currentView() === 'multi-year') {\n<div\n  class=\"mlv-calendar__selection-grid\"\n  [attr.aria-label]=\"headerLabel()\"\n  role=\"group\"\n>\n  @for (year of years(); track year) {\n  <button\n    class=\"mlv-calendar__cell-button mlv-calendar__selection-button\"\n    [class.mlv-calendar__selection-button--current]=\"isCurrentYear(year)\"\n    [attr.aria-pressed]=\"isCurrentYear(year)\"\n    [attr.tabindex]=\"isCurrentYear(year) ? 0 : -1\"\n    [disabled]=\"isYearDisabled(year)\"\n    mlvButton\n    [variant]=\"isCurrentYear(year) ? 'primary' : 'transparent'\"\n    mlvDensity=\"compact\"\n    (click)=\"selectYear(year)\"\n    type=\"button\"\n  >\n    {{ getYearOptionLabel(year) }}\n  </button>\n  }\n</div>\n}\n", styles: [".mlv-calendar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-calendar *{box-sizing:border-box}.mlv-calendar{display:inline-flex;flex-direction:column;gap:var(--mlv-spacing-3);width:min(100%,19rem);padding:var(--mlv-spacing-4);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-2xl);background:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-1);outline:none;-webkit-user-select:none;user-select:none}.mlv-calendar--embedded{width:100%;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none}.mlv-calendar:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--mlv-border-focus) 20%,transparent),var(--mlv-shadow-1)}.mlv-calendar--embedded:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--mlv-border-focus) 20%,transparent)}.mlv-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-1)}.mlv-calendar__nav-button,.mlv-calendar__header-button{flex-shrink:0}.mlv-calendar__selection-button,.mlv-calendar__cell-button{width:auto}.mlv-calendar__header-button{justify-self:stretch}.mlv-calendar__weekdays,.mlv-calendar__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.mlv-calendar__weekdays{gap:var(--mlv-spacing-2);margin-bottom:var(--mlv-spacing-1)}.mlv-calendar__days{column-gap:0;row-gap:var(--mlv-spacing-2)}.mlv-calendar__week{display:contents}.mlv-calendar__weekday{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;color:var(--mlv-text-secondary);font-size:var(--mlv-font-size-s);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.mlv-calendar__day-cell,.mlv-calendar__day-placeholder{display:flex;justify-content:center}.mlv-calendar__day{aspect-ratio:1}.mlv-calendar__day.mlv-calendar__day--outside{opacity:.58}.mlv-calendar__day.mlv-calendar__day--disabled{--mlv-btn-text-color: var(--mlv-text-disabled);box-shadow:none;opacity:.4}.mlv-calendar__day.mlv-calendar__day--in-range{width:100%;min-width:0;padding-inline:0;border-radius:0;box-shadow:none}.mlv-calendar__day.mlv-calendar__day--range-preview:not(.mlv-calendar__day--range-start):not(.mlv-calendar__day--range-end){--mlv-btn-bg: var(--mlv-background-accent-1-pale);--mlv-btn-bg-hover: var(--mlv-background-accent-1-pale-hover);--mlv-btn-bg-active: var(--mlv-background-accent-1-pale-hover);--mlv-btn-text-color: var(--mlv-text-action)}.mlv-calendar__day.mlv-calendar__day--range-complete{--mlv-btn-bg: var(--mlv-background-accent-1);--mlv-btn-bg-hover: var(--mlv-background-accent-1);--mlv-btn-bg-active: var(--mlv-background-accent-1);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-1)}.mlv-calendar__day.mlv-calendar__day--range-start,.mlv-calendar__day.mlv-calendar__day--range-row-start{border-start-start-radius:var(--mlv-radius-full);border-end-start-radius:var(--mlv-radius-full)}.mlv-calendar__day.mlv-calendar__day--range-end,.mlv-calendar__day.mlv-calendar__day--range-row-end{border-start-end-radius:var(--mlv-radius-full);border-end-end-radius:var(--mlv-radius-full)}.mlv-calendar__selection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mlv-spacing-2)}.mlv-calendar__selection-button{min-height:var(--mlv-height-m);width:100%;color:var(--mlv-text-primary)}.mlv-calendar__selection-button:hover:not([disabled]){--mlv-btn-bg: var(--mlv-background-neutral-1-hover)}.mlv-calendar__selection-button:active:not([disabled]){--mlv-btn-bg: var(--mlv-background-neutral-1-active)}.mlv-calendar__selection-button.mlv-calendar__selection-button--current{box-shadow:var(--mlv-shadow-1)}.mlv-calendar__selection-button[disabled]{opacity:.45}.mlv-calendar__month-button{width:3rem;min-width:3rem;min-height:3rem;padding:0}.mlv-calendar__month-button-label{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:1.5rem;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "component", type: MlvFade, selector: "[mlvFade]", inputs: ["mlvFadeHeight", "mlvFadeSize", "mlvFadeOffset", "mlvFade"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvCalendar, decorators: [{
-            type: Component,
-            args: [{ selector: 'mlv-calendar', imports: [
-                        MlvButton,
-                        MlvButtonIcon,
-                        MlvFade,
-                        LucideChevronRight,
-                        LucideChevronLeft,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mlv-calendar',
-                        '[class.mlv-calendar--embedded]': 'embedded()',
-                        '(keydown)': 'onKeydown($event)',
-                    }, template: "<div class=\"mlv-calendar__header\">\n  <button\n    class=\"mlv-calendar__nav-button\"\n    mlvButton\n    shape=\"circle\"\n    variant=\"transparent\"\n    mlvDensity=\"compact\"\n    [attr.aria-label]=\"_i18n().previousPeriod\"\n    type=\"button\"\n    [disabled]=\"!canNavigatePrev()\"\n    (click)=\"navigatePrev()\"\n  >\n    <svg mlvButtonIcon lucideChevronLeft />\n  </button>\n  <div mlvFade class=\"mlv-calendar__nav-header-wrapper\">\n    <button\n      class=\"mlv-calendar__header-button\"\n      mlvButton\n      variant=\"transparent\"\n      type=\"button\"\n      (click)=\"switchView()\"\n      [attr.aria-label]=\"_switchViewLabel()\"\n    >\n      {{ headerLabel() }}\n    </button>\n  </div>\n  <button\n    class=\"mlv-calendar__nav-button\"\n    mlvButton\n    shape=\"circle\"\n    variant=\"transparent\"\n    mlvDensity=\"compact\"\n    [attr.aria-label]=\"_i18n().nextPeriod\"\n    type=\"button\"\n    [disabled]=\"!canNavigateNext()\"\n    (click)=\"navigateNext()\"\n  >\n    <svg mlvButtonIcon lucideChevronRight />\n  </button>\n</div>\n\n@if (currentView() === 'month') {\n<div class=\"mlv-calendar__month\" [attr.aria-label]=\"headerLabel()\" role=\"grid\">\n  <div class=\"mlv-calendar__weekdays\" role=\"row\">\n    @for (day of weekdays(); track day) {\n    <span class=\"mlv-calendar__weekday\" role=\"columnheader\">{{ day }}</span>\n    }\n  </div>\n  <div\n    class=\"mlv-calendar__days\"\n    role=\"rowgroup\"\n    (mouseleave)=\"clearRangePreview()\"\n  >\n    @for (week of monthWeeks(); track $index) {\n    <div class=\"mlv-calendar__week\" role=\"row\">\n      @for (day of week; track trackDay($index, day); let rowStart = $first; let\n      rowEnd = $last) {\n      <div\n        class=\"mlv-calendar__day-cell\"\n        role=\"gridcell\"\n        [attr.aria-selected]=\"range() ? isInRange(day.date) : isSelected(day.date)\"\n      >\n        <button\n          class=\"mlv-calendar__cell-button mlv-calendar__day\"\n          [class.mlv-calendar__day--active]=\"isActive(day.date)\"\n          [class.mlv-calendar__day--in-range]=\"isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-preview]=\"isRangePreviewing() && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-complete]=\"hasCompletedRange() && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-start]=\"isDisplayRangeStart(day.date)\"\n          [class.mlv-calendar__day--range-end]=\"isDisplayRangeEnd(day.date)\"\n          [class.mlv-calendar__day--range-row-start]=\"rowStart && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--range-row-end]=\"rowEnd && isInDisplayRange(day.date)\"\n          [class.mlv-calendar__day--outside]=\"!day.currentMonth\"\n          [class.mlv-calendar__day--today]=\"isToday(day.date)\"\n          [class.mlv-calendar__day--selected]=\"isSelected(day.date)\"\n          [class.mlv-calendar__day--disabled]=\"isDateDisabled(day.date)\"\n          [attr.tabindex]=\"isActive(day.date) ? 0 : -1\"\n          [attr.aria-label]=\"getDayLabel(day.date)\"\n          [attr.aria-current]=\"isToday(day.date) ? 'date' : null\"\n          [attr.aria-disabled]=\"isDateDisabled(day.date)\"\n          [disabled]=\"isDateDisabled(day.date)\"\n          mlvButton\n          shape=\"circle\"\n          [variant]=\"isSelected(day.date) || isDisplayRangeStart(day.date) || isDisplayRangeEnd(day.date) ? 'primary' : 'transparent'\"\n          mlvDensity=\"compact\"\n          (mouseenter)=\"previewRange(day.date)\"\n          (focus)=\"previewRange(day.date)\"\n          (blur)=\"clearRangePreview()\"\n          (click)=\"selectDate(day.date)\"\n          type=\"button\"\n        >\n          {{ getDayNumber(day.date) }}\n        </button>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n} @if (currentView() === 'year') {\n<div\n  class=\"mlv-calendar__selection-grid\"\n  [attr.aria-label]=\"getYearViewLabel()\"\n  role=\"group\"\n>\n  @for (month of months(); track month; let i = $index) {\n  <button\n    class=\"mlv-calendar__cell-button mlv-calendar__selection-button mlv-calendar__month-button\"\n    [class.mlv-calendar__selection-button--current]=\"isCurrentMonthIndex(i)\"\n    [attr.aria-pressed]=\"isCurrentMonthIndex(i)\"\n    [attr.tabindex]=\"isCurrentMonthIndex(i) ? 0 : -1\"\n    [disabled]=\"isMonthDisabled(i)\"\n    mlvButton\n    [variant]=\"isCurrentMonthIndex(i) ? 'primary' : 'transparent'\"\n    mlvDensity=\"compact\"\n    (click)=\"selectMonth(i)\"\n    type=\"button\"\n  >\n    {{ month }}\n  </button>\n  }\n</div>\n} @if (currentView() === 'multi-year') {\n<div\n  class=\"mlv-calendar__selection-grid\"\n  [attr.aria-label]=\"headerLabel()\"\n  role=\"group\"\n>\n  @for (year of years(); track year) {\n  <button\n    class=\"mlv-calendar__cell-button mlv-calendar__selection-button\"\n    [class.mlv-calendar__selection-button--current]=\"isCurrentYear(year)\"\n    [attr.aria-pressed]=\"isCurrentYear(year)\"\n    [attr.tabindex]=\"isCurrentYear(year) ? 0 : -1\"\n    [disabled]=\"isYearDisabled(year)\"\n    mlvButton\n    [variant]=\"isCurrentYear(year) ? 'primary' : 'transparent'\"\n    mlvDensity=\"compact\"\n    (click)=\"selectYear(year)\"\n    type=\"button\"\n  >\n    {{ getYearOptionLabel(year) }}\n  </button>\n  }\n</div>\n}\n", styles: [".mlv-calendar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-calendar *{box-sizing:border-box}.mlv-calendar{display:inline-flex;flex-direction:column;gap:var(--mlv-spacing-3);width:min(100%,19rem);padding:var(--mlv-spacing-4);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-2xl);background:var(--mlv-elevation-bg-2);color:var(--mlv-text-primary);box-shadow:var(--mlv-shadow-1);outline:none;-webkit-user-select:none;user-select:none}.mlv-calendar--embedded{width:100%;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none}.mlv-calendar:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--mlv-border-focus) 20%,transparent),var(--mlv-shadow-1)}.mlv-calendar--embedded:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--mlv-border-focus) 20%,transparent)}.mlv-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-1)}.mlv-calendar__nav-button,.mlv-calendar__header-button{flex-shrink:0}.mlv-calendar__selection-button,.mlv-calendar__cell-button{width:auto}.mlv-calendar__header-button{justify-self:stretch}.mlv-calendar__weekdays,.mlv-calendar__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.mlv-calendar__weekdays{gap:var(--mlv-spacing-2);margin-bottom:var(--mlv-spacing-1)}.mlv-calendar__days{column-gap:0;row-gap:var(--mlv-spacing-2)}.mlv-calendar__week{display:contents}.mlv-calendar__weekday{display:inline-flex;align-items:center;justify-content:center;min-height:1.75rem;color:var(--mlv-text-secondary);font-size:var(--mlv-font-size-s);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.mlv-calendar__day-cell,.mlv-calendar__day-placeholder{display:flex;justify-content:center}.mlv-calendar__day{aspect-ratio:1}.mlv-calendar__day.mlv-calendar__day--outside{opacity:.58}.mlv-calendar__day.mlv-calendar__day--disabled{--mlv-btn-text-color: var(--mlv-text-disabled);box-shadow:none;opacity:.4}.mlv-calendar__day.mlv-calendar__day--in-range{width:100%;min-width:0;padding-inline:0;border-radius:0;box-shadow:none}.mlv-calendar__day.mlv-calendar__day--range-preview:not(.mlv-calendar__day--range-start):not(.mlv-calendar__day--range-end){--mlv-btn-bg: var(--mlv-background-accent-1-pale);--mlv-btn-bg-hover: var(--mlv-background-accent-1-pale-hover);--mlv-btn-bg-active: var(--mlv-background-accent-1-pale-hover);--mlv-btn-text-color: var(--mlv-text-action)}.mlv-calendar__day.mlv-calendar__day--range-complete{--mlv-btn-bg: var(--mlv-background-accent-1);--mlv-btn-bg-hover: var(--mlv-background-accent-1);--mlv-btn-bg-active: var(--mlv-background-accent-1);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-1)}.mlv-calendar__day.mlv-calendar__day--range-start,.mlv-calendar__day.mlv-calendar__day--range-row-start{border-start-start-radius:var(--mlv-radius-full);border-end-start-radius:var(--mlv-radius-full)}.mlv-calendar__day.mlv-calendar__day--range-end,.mlv-calendar__day.mlv-calendar__day--range-row-end{border-start-end-radius:var(--mlv-radius-full);border-end-end-radius:var(--mlv-radius-full)}.mlv-calendar__selection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mlv-spacing-2)}.mlv-calendar__selection-button{min-height:var(--mlv-height-m);width:100%;color:var(--mlv-text-primary)}.mlv-calendar__selection-button:hover:not([disabled]){--mlv-btn-bg: var(--mlv-background-neutral-1-hover)}.mlv-calendar__selection-button:active:not([disabled]){--mlv-btn-bg: var(--mlv-background-neutral-1-active)}.mlv-calendar__selection-button.mlv-calendar__selection-button--current{box-shadow:var(--mlv-shadow-1)}.mlv-calendar__selection-button[disabled]{opacity:.45}.mlv-calendar__month-button{width:3rem;min-width:3rem;min-height:3rem;padding:0}.mlv-calendar__month-button-label{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:1.5rem;overflow:hidden;white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], activeDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }, { type: i0.Output, args: ["activeDateChange"] }] } });
-//# sourceMappingURL=calendar.js.map