@malva-ui/core 0.1.12

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

@@ -0,0 +1,672 @@
+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