@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-calendar.mjs

@@ -0,0 +1,938 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, inject, Injectable, ElementRef, Injector, model, input, computed, effect, untracked, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
+import { MlvRtlService, MlvFade } from '@malva-ui/cdk/utils';
+import { LucideChevronRight, LucideChevronLeft } from '@lucide/angular';
+import { MLV_CALENDAR_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+
+/**
+ * Application-level locale token consumed by Malva UI date adapters.
+ *
+ * Defaults to `navigator.language` when available and falls back to `en-US`.
+ */
+const MLV_DATE_LOCALE = new InjectionToken('MLV_DATE_LOCALE', {
+    providedIn: 'root',
+    factory: () => {
+        if (typeof navigator !== 'undefined' && navigator.language) {
+            return navigator.language;
+        }
+        return 'en-US';
+    },
+});
+/**
+ * Injection token for the active Malva UI date adapter.
+ *
+ * Applications can provide a custom adapter implementation when they need
+ * a different date object model or library-backed date math.
+ */
+const MLV_DATE_ADAPTER = new InjectionToken('MLV_DATE_ADAPTER');
+/**
+ * Registers a custom Malva UI date adapter and optionally overrides the locale.
+ *
+ * @param adapter Adapter class to instantiate for date operations.
+ * @param locale Optional locale string passed to `MLV_DATE_LOCALE`.
+ */
+function provideMlvDateAdapter(adapter, locale) {
+    return [
+        {
+            provide: MLV_DATE_ADAPTER,
+            useClass: adapter,
+        },
+        ...(locale
+            ? [
+                {
+                    provide: MLV_DATE_LOCALE,
+                    useValue: locale,
+                },
+            ]
+            : []),
+    ];
+}
+/**
+ * Abstract date-manipulation and localization contract used by calendar-aware
+ * Malva UI components.
+ *
+ * Implementations may wrap native `Date`, Luxon, Moment, date-fns-backed value
+ * objects, or any other date representation, as long as they provide calendar
+ * arithmetic, comparison, parsing, and localized labels through this surface.
+ */
+class MlvDateAdapter {
+    /** Reactive locale used by formatting and label methods. */
+    locale = signal('en-US', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Sets the active locale for this adapter. */
+    setLocale(locale) {
+        this.locale.set(locale);
+    }
+    /** Compares two dates by year, month, and day. */
+    compareDate(first, second) {
+        const firstYear = this.getYear(first);
+        const secondYear = this.getYear(second);
+        if (firstYear !== secondYear) {
+            return firstYear - secondYear;
+        }
+        const firstMonth = this.getMonth(first);
+        const secondMonth = this.getMonth(second);
+        if (firstMonth !== secondMonth) {
+            return firstMonth - secondMonth;
+        }
+        return this.getDate(first) - this.getDate(second);
+    }
+    /** Returns `true` when both values represent the same calendar day. */
+    sameDate(first, second) {
+        if (!first || !second) {
+            return first === second;
+        }
+        return this.compareDate(first, second) === 0;
+    }
+    /** Produces a localized accessible label for a full calendar date. */
+    getDateLabel(date) {
+        return this.format(date, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    }
+    /** Produces a localized month-and-year header label. */
+    getMonthYearLabel(date) {
+        return this.format(date, {
+            month: 'long',
+            year: 'numeric',
+        });
+    }
+    /** Produces a localized year label. */
+    getYearLabel(date) {
+        return this.format(date, {
+            year: 'numeric',
+        });
+    }
+    /** Produces a localized day-of-month label. */
+    getDayOfMonthLabel(date) {
+        return this.format(date, {
+            day: 'numeric',
+        });
+    }
+}
+
+/**
+ * Default Malva UI date adapter backed by native `Date` and `Intl.DateTimeFormat`.
+ *
+ * This implementation keeps the adapter contract lightweight while still
+ * providing localized labels, month names, weekday names, parsing, and
+ * calendar arithmetic for apps that do not need a third-party date library.
+ */
+class MlvNativeDateAdapter extends MlvDateAdapter {
+    /** @private Locale injected at construction and applied via `setLocale`. */
+    _initialLocale = inject(MLV_DATE_LOCALE);
+    /** @private Cache of `Intl.DateTimeFormat` instances keyed by locale + format options. */
+    _intlCache = new Map();
+    constructor() {
+        super();
+        this.setLocale(this._initialLocale);
+    }
+    /** Returns today's date normalized to local midnight. */
+    today() {
+        return this._normalizeDate(new Date());
+    }
+    /** Clones and normalizes a native `Date`. */
+    clone(date) {
+        return this._normalizeDate(date);
+    }
+    /** Creates a valid local date or throws when the input is invalid. */
+    createDate(year, month, day) {
+        if (month < 0 || month > 11) {
+            throw new Error(`Invalid month index "${month}". Expected 0-11.`);
+        }
+        if (day < 1) {
+            throw new Error(`Invalid day "${day}". Expected a value greater than 0.`);
+        }
+        const result = new Date(year, month, day);
+        if (result.getFullYear() !== year ||
+            result.getMonth() !== month ||
+            result.getDate() !== day) {
+            throw new Error(`Invalid date "${year}-${month + 1}-${day}".`);
+        }
+        return this._normalizeDate(result);
+    }
+    /** Returns the year part of the given date. */
+    getYear(date) {
+        return date.getFullYear();
+    }
+    /** Returns the zero-based month index of the given date. */
+    getMonth(date) {
+        return date.getMonth();
+    }
+    /** Returns the day-of-month of the given date. */
+    getDate(date) {
+        return date.getDate();
+    }
+    /** Returns the weekday index of the given date. */
+    getDayOfWeek(date) {
+        return date.getDay();
+    }
+    /** Returns the number of days in the given date's month. */
+    getNumDaysInMonth(date) {
+        return new Date(this.getYear(date), this.getMonth(date) + 1, 0).getDate();
+    }
+    /** Returns localized month names using `Intl.DateTimeFormat`. */
+    getMonthNames(style) {
+        return Array.from({ length: 12 }, (_, monthIndex) => this.format(new Date(2020, monthIndex, 1), { month: style }));
+    }
+    /** Returns localized weekday names using `Intl.DateTimeFormat`. */
+    getDayOfWeekNames(style) {
+        return Array.from({ length: 7 }, (_, dayOffset) => this.format(new Date(2020, 10, 1 + dayOffset), { weekday: style }));
+    }
+    /** Adds calendar days while preserving local calendar semantics. */
+    addCalendarDays(date, days) {
+        const result = this.clone(date);
+        result.setDate(result.getDate() + days);
+        return this._normalizeDate(result);
+    }
+    /** Adds calendar months and clamps the day when needed. */
+    addCalendarMonths(date, months) {
+        return this._createClampedDate(this.getYear(date), this.getMonth(date) + months, this.getDate(date));
+    }
+    /** Adds calendar years and clamps the day when needed. */
+    addCalendarYears(date, years) {
+        return this._createClampedDate(this.getYear(date) + years, this.getMonth(date), this.getDate(date));
+    }
+    /** Formats a date with the current locale and `Intl` options. */
+    format(date, displayFormat) {
+        return this._getFormatter(displayFormat).format(date);
+    }
+    /** Returns a stable `YYYY-MM-DD` string for the given local date. */
+    toIso8601(date) {
+        const year = this.getYear(date);
+        const month = `${this.getMonth(date) + 1}`.padStart(2, '0');
+        const day = `${this.getDate(date)}`.padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    /** Deserializes native `Date`, ISO-like strings, and timestamps. */
+    deserialize(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        if (this.isDateInstance(value)) {
+            return this.isValid(value) ? this.clone(value) : null;
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            const parsed = new Date(value);
+            return this.isValid(parsed) ? this._normalizeDate(parsed) : null;
+        }
+        return null;
+    }
+    /** Returns `true` when the value is a native `Date` instance. */
+    isDateInstance(value) {
+        return value instanceof Date;
+    }
+    /** Returns `true` when the `Date` has a valid timestamp. */
+    isValid(date) {
+        return !Number.isNaN(date.getTime());
+    }
+    /** @private Strips the time component, returning a new `Date` at local midnight. */
+    _normalizeDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    /** @private Builds a date for the given fields, clamping the day to the target month's length. */
+    _createClampedDate(year, month, day) {
+        const normalizedMonth = new Date(year, month, 1);
+        const normalizedYear = normalizedMonth.getFullYear();
+        const normalizedMonthIndex = normalizedMonth.getMonth();
+        const daysInTargetMonth = new Date(normalizedYear, normalizedMonthIndex + 1, 0).getDate();
+        return this.createDate(normalizedYear, normalizedMonthIndex, Math.min(day, daysInTargetMonth));
+    }
+    /** @private Returns a cached (or freshly created) `Intl.DateTimeFormat` for the current locale and format. */
+    _getFormatter(displayFormat) {
+        const cacheKey = `${this.locale()}::${JSON.stringify(displayFormat)}`;
+        const formatter = this._intlCache.get(cacheKey);
+        if (formatter) {
+            return formatter;
+        }
+        const nextFormatter = new Intl.DateTimeFormat(this.locale(), displayFormat);
+        this._intlCache.set(cacheKey, nextFormatter);
+        return nextFormatter;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvNativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvNativeDateAdapter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvNativeDateAdapter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+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 Normalizes horizontal calendar navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /** @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 (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case LEFT_ARROW:
+                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), -1);
+                break;
+            case RIGHT_ARROW:
+                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), 1);
+                break;
+            case UP_ARROW:
+                nextDate = this._dateAdapter.addCalendarDays(this.activeDate(), -7);
+                break;
+            case DOWN_ARROW:
+                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 (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case LEFT_ARROW:
+                nextMonth = currentMonth - 1;
+                break;
+            case RIGHT_ARROW:
+                nextMonth = currentMonth + 1;
+                break;
+            case UP_ARROW:
+                nextMonth = currentMonth - 4;
+                break;
+            case DOWN_ARROW:
+                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 (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case LEFT_ARROW:
+                nextYear = currentYear - 1;
+                break;
+            case RIGHT_ARROW:
+                nextYear = currentYear + 1;
+                break;
+            case UP_ARROW:
+                nextYear = currentYear - 4;
+                break;
+            case DOWN_ARROW:
+                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: ["@layer mlv.components{.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-raised);-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{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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-selected);--mlv-btn-bg-hover: var(--mlv-background-selected-hover);--mlv-btn-bg-active: var(--mlv-background-selected-hover);--mlv-btn-text-color: var(--mlv-text-on-selected)}.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-raised)}.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", "selected"] }, { 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: ["@layer mlv.components{.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-raised);-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{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.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-selected);--mlv-btn-bg-hover: var(--mlv-background-selected-hover);--mlv-btn-bg-active: var(--mlv-background-selected-hover);--mlv-btn-text-color: var(--mlv-text-on-selected)}.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-raised)}.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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MLV_DATE_ADAPTER, MLV_DATE_LOCALE, MlvCalendar, MlvDateAdapter, MlvNativeDateAdapter, provideMlvDateAdapter };
+//# sourceMappingURL=malva-ui-core-calendar.mjs.map