import { SupportedLocale } from "./types/locales.js"; import { CalendarDateSelectedEvent, CalendarDayClickEvent, CalendarDayHoverEvent, CalendarDayLeaveEvent, CalendarRangeSelectedEvent, GoToDateOptions, GoToMonthOptions, GoToYearOptions, MjoCalendarEventMarker } from "./types/mjo-calendar.js"; import { LitElement } from "lit"; import { type IFormMixin } from "./mixins/form-mixin.js"; import { type IThemeMixin } from "./mixins/theme-mixin.js"; import "./components/calendar/mjoint-calendar-grid.js"; import "./components/calendar/mjoint-calendar-header.js"; import "./components/calendar/mjoint-calendar-month-picker.js"; import "./components/calendar/mjoint-calendar-year-picker.js"; declare const MjoCalendar_base: import("./types/mixins.js").MixinConstructor & import("./types/mixins.js").MixinConstructor & typeof LitElement; /** * A configurable calendar component for date selection. * Supports single date and date range selection with navigation controls, internationalization, * accessibility features, form integration, and extensive theming capabilities. * * @fires mjo-calendar:date-selected - Fired when a date is selected in single mode * @fires mjo-calendar:range-selected - Fired when a date range is selected in range mode * @fires mjo-calendar:day-click - Fired when a day is clicked * @fires mjo-calendar:day-hover - Fired when a day is hovered * @fires mjo-calendar:day-leave - Fired when mouse leaves a day * @fires change - Standard change event for form compatibility * * @cssprop --mjo-calendar-font-family - Calendar font family * @cssprop --mjo-calendar-background - Calendar background color * @cssprop --mjo-calendar-border - Calendar border style * @cssprop --mjo-calendar-border-radius - Calendar border radius * @cssprop --mjo-calendar-shadow - Calendar box shadow * @cssprop --mjo-calendar-padding - Calendar internal padding * @cssprop --mjo-calendar-week-day-color - Week day headers text color * @cssprop --mjo-calendar-week-day-font-weight - Week day headers font weight * @cssprop --mjo-calendar-day-border-radius - Individual day cell border radius * @cssprop --mjo-calendar-day-hover-background - Day cell hover background * @cssprop --mjo-calendar-focus-outline - Focused element outline color * @cssprop --mjo-calendar-today-background - Today's date background * @cssprop --mjo-calendar-today-color - Today's date text color * @cssprop --mjo-calendar-event-offset - Event indicator offset from bottom-right corner * @cssprop --mjo-calendar-event-font-size - Event indicator font size * @cssprop --mjo-calendar-event-font-weight - Event indicator font weight * @cssprop --mjo-calendar-event-background-color - Event indicator background color * @cssprop --mjo-calendar-event-foreground-color - Event indicator foreground color * @cssprop --mjo-calendar-event-single-size - Single event indicator size * @cssprop --mjo-calendar-event-multiple-size - Multiple events indicator size * @cssprop --mjo-calendar-selected-background - Selected date background * @cssprop --mjo-calendar-selected-color - Selected date text color * @cssprop --mjo-calendar-range-endpoint-background - Range start/end background * @cssprop --mjo-calendar-range-endpoint-color - Range start/end text color * @cssprop --mjo-calendar-range-background - Range middle dates background * @cssprop --mjo-calendar-range-color - Range middle dates text color * @cssprop --mjo-calendar-disabled-color - Disabled dates text color * @cssprop --mjo-calendar-disabled-background - Disabled dates background * @cssprop --mjo-calendar-picker-background - Month/year picker background * @cssprop --mjo-calendar-picker-radius - Month/year picker border radius * @cssprop --mjo-calendar-picker-shadow - Month/year picker shadow * @cssprop --mjo-calendar-picker-button-background - Picker button background * @cssprop --mjo-calendar-picker-button-hover-background - Picker button hover background * @cssprop --mjo-calendar-picker-button-selected-background - Picker button selected background * @cssprop --mjo-calendar-nav-button-border - Navigation button border * @cssprop --mjo-calendar-nav-button-color - Navigation button text color * @cssprop --mjo-calendar-selector-button-color - Month/year selector text color * * @csspart calendar - The main calendar container * @csspart header - The calendar header container * @csspart navigation - Navigation buttons and selectors toolbar * @csspart nav-button - Navigation buttons (previous/next month) * @csspart selectors-container - Container for month and year selectors * @csspart selector-button - Month and year selector buttons * @csspart calendar-grid - The main calendar grid container * @csspart week-days-container - Container for weekday headers * @csspart week-day - Individual weekday header cell * @csspart days-container - Container for calendar days * @csspart day - Individual day cell * @csspart day-selected - Selected day cell (applied with day part) * @csspart day-today - Today's date cell (applied with day part) * @csspart event-indicator - Event indicator container * @csspart event-indicator-single - Single event indicator (applied with event-indicator part) * @csspart event-indicator-multiple - Multiple events indicator (applied with event-indicator part) * @csspart month-picker-container - Month picker overlay container * @csspart month-picker-grid - Month picker grid layout * @csspart month-picker-button - Individual month selection button * @csspart year-picker-container - Year picker overlay container * @csspart year-picker-navigation - Year picker navigation controls * @csspart year-picker-nav-button - Year picker navigation buttons * @csspart year-picker-decade-label - Decade range label in year picker * @csspart year-picker-grid - Year picker grid layout * @csspart year-picker-button - Individual year selection button */ export declare class MjoCalendar extends MjoCalendar_base implements IFormMixin, IThemeMixin { #private; mode: "single" | "range"; name?: string; value?: string; startDate?: string; endDate?: string; locale: SupportedLocale; minDate?: string; maxDate?: string; disabled: boolean; size: "small" | "medium" | "large"; color: "primary" | "secondary"; disabledDates?: string[]; showToday: boolean; firstDayOfWeek: "sunday" | "monday"; rangeCalendars: "1" | "2" | "auto"; eventMarkers?: MjoCalendarEventMarker[]; enableKeyboardNavigation: boolean; announceSelections: boolean; ariaLabelledby: string | null; ariaDescribedby: string | null; ariaLive: "polite" | "assertive" | "off"; private selectedDate?; private selectedStartDate?; private selectedEndDate?; private hoverDate?; private picker; private autoDual; private displayedMonths; private focusedDate?; private announcementText; private eventsMap; render(): import("lit-html").TemplateResult<1>; connectedCallback(): void; disconnectedCallback(): void; willUpdate(changedProperties: Map): void; /** Returns a shallow copy of the currently displayed months (length 1 or 2). */ getDisplayedMonths(): { month: number; year: number; }[]; /** * Sets the displayed months. * If two months provided and not adjacent, the second will be coerced to be +1 month from the first by default. */ setDisplayedMonths(months: { month: number; year: number; }[], enforceAdjacency?: boolean): void; /** Navigate to a specific month with automatic side detection */ goToMonth(options: GoToMonthOptions): void; /** Navigate to a specific year with automatic side detection */ goToYear(options: GoToYearOptions): void; /** Navigate to a specific date (month and year simultaneously) */ goToDate(options: GoToDateOptions): void; /** Reset any current selection (single or range) and displayed months to initial state. */ resetSelection(): void; /** Full controlled reset API: clears selection, months, pickers and forces fresh today-based view. */ reset(): void; /** * Programmatic date selection helper. * Exposed primarily to facilitate unit testing without relying on internal * shadow DOM event wiring. Mirrors a user clicking a date cell. */ selectDate(date: Date): void; static styles: import("lit").CSSResult[]; } declare global { interface HTMLElementTagNameMap { "mjo-calendar": MjoCalendar; } interface HTMLElementEventMap { "mjo-calendar:date-selected": CalendarDateSelectedEvent; "mjo-calendar:range-selected": CalendarRangeSelectedEvent; "mjo-calendar:day-click": CalendarDayClickEvent; "mjo-calendar:day-hover": CalendarDayHoverEvent; "mjo-calendar:day-leave": CalendarDayLeaveEvent; } } export {}; //# sourceMappingURL=mjo-calendar.d.ts.map