import { CalendarDate } from '@internationalized/date'; import { CSSResultArray, PropertyValues, TemplateResult } from 'lit'; import { LuzmoElement } from '../../utils/base'; import '../action-button'; import '../icon'; export interface CalendarWeekday { narrow: string; long: string; } export interface DateCellProperties { isOutsideMonth: boolean; isToday: boolean; isSelected: boolean; isDisabled: boolean; isTabbable: boolean; isRangeSelection: boolean; isRangeStart: boolean; isRangeEnd: boolean; isSelectionStart: boolean; isSelectionEnd: boolean; } export type CalendarSelectionMode = 'single' | 'range'; export type CalendarViewMode = 'days' | 'years'; export declare const YEARS_PER_PAGE = 16; export interface CalendarLabels { previous: string; next: string; today: string; selected: string; } export declare const DAYS_PER_WEEK = 7; declare const LuzmoCalendar_base: typeof LuzmoElement & { new (...args: any[]): import("../..").SizedElementInterface; prototype: import("../..").SizedElementInterface; }; /** * @element luzmo-calendar */ export declare class LuzmoCalendar extends LuzmoCalendar_base { /** * The styles of the calendar * @internal */ static get styles(): CSSResultArray; /** * The selected date in the calendar. If defined, this also indicates where the calendar opens. * If not, the calendar opens at the current month. */ value?: string; /** * The minimum allowed date a user can select */ min?: string; /** * The maximum allowed date a user can select */ max?: string; /** * Indicates when the calendar should be disabled entirely */ disabled: boolean; /** * The language used to format the dates and weekdays. */ language?: string; /** * Labels read by screen readers. The default values are in English * and can be overridden to localize the content. */ labels: CalendarLabels; /** * Selection mode: 'single' for a single date, 'range' for start/end date selection. */ selectionMode: CalendarSelectionMode; /** * The start date of the range selection (ISO date string, e.g. '2024-01-15'). * Only used when selectionMode is 'range'. */ startDate?: string; /** * The end date of the range selection (ISO date string, e.g. '2024-01-20'). * Only used when selectionMode is 'range'. */ endDate?: string; /** * The date that indicates the current position in the calendar. * @internal */ private currentDate; /** * The language used to format the dates and weekdays. * @internal */ get _language(): string; /** * The time zone of the calendar * @internal */ private timeZone; /** * The current date in the calendar * @internal */ private get today(); /** * The selected date in the calendar in CalendarDate format * @internal */ private _value?; /** * The minimum allowed date a user can select in CalendarDate format * @internal */ private _min?; /** * The maximum allowed date a user can select in CalendarDate format * @internal */ private _max?; /** * Parsed start date for range selection * @internal */ private _startDate?; /** * Parsed end date for range selection * @internal */ private _endDate?; /** * The date being hovered, used for range preview between start and end * during range selection. Can be set externally to synchronize hover * previews across multiple calendar instances. */ hoveredDate?: CalendarDate; /** * Current view mode: 'days' shows month grid, 'years' shows year grid * @internal */ private viewMode; /** * The base year for the year grid view (start of the displayed range) * @internal */ private yearGridStart; /** * The weekdays of the calendar, narrow and long * @internal */ private weekdays; /** * The dates of the current month, organized by week * @internal */ private currentMonthDates; /** * @internal */ private set isDateFocusIntent(value); /** * @internal */ private get isDateFocusIntent(); /** * @internal */ private _isDateFocusIntent; private setDateFocusIntent; private resetDateFocusIntent; connectedCallback(): void; disconnectedCallback(): void; /** * Resets the component's value */ clear(): void; constructor(); willUpdate(changedProperties: PropertyValues): void; updated(changedProperties: PropertyValues): void; /** * Focuses the tabbable day element in the calendar represented by the current date. * Useful while navigating through the calendar as the focus might be lost when the month changes. */ private focusCurrentDate; private parseDateOnly; private convertToCalendarDates; private convertRangeDates; /** * Validates the component's date properties (min, max and value) compliance with one another. * If the [min, max] constraint interval is invalid, both properties are reset. * If the value is not within the [min, max] (valid) interval, it is reset. * * @param checkInterval - Whether to check the [min, max] interval */ private checkDatePropsCompliance; private updateCurrentDate; /** * Whether the date is non-compliant with the min and max constraints */ private isNonCompliantDate; protected render(): TemplateResult; /** * The month and year of the calendar * @internal */ private get monthAndYear(); protected renderCalendarHeader(): TemplateResult; /** * Whether the previous month is disabled * @internal */ private get isPreviousMonthDisabled(); /** * Whether the next month is disabled * @internal */ private get isNextMonthDisabled(); private handlePreviousMonth; private handleNextMonth; protected renderCalendarGrid(): TemplateResult; protected renderCalendarTableHead(): TemplateResult; private renderWeekdayColumns; protected renderWeekdayColumn(weekday: CalendarWeekday): TemplateResult; protected renderCalendarTableBody(): TemplateResult; private renderCalendarWeeks; private renderDatesInWeek; private parseDateCellProperties; private computeRangeFlags; protected renderCalendarTableCell(calendarDate: CalendarDate): TemplateResult; private handleKeydown; private handleDaySelect; private handleRangeSelect; private handleDayHover; private toggleViewMode; private handlePreviousYearPage; private handleNextYearPage; private handleYearSelect; private renderYearGrid; private handleYearGridKeydown; private moveToPreviousDay; private moveToNextDay; private moveToPreviousWeek; private moveToNextWeek; private canMoveBackToDate; private canMoveForwardToDate; private moveToKeyboardPreviousMonth; private moveToKeyboardNextMonth; private moveToPreviousYear; private moveToNextYear; private moveToStartOfWeek; private moveToEndOfWeek; /** * Defines the array with data for the days of the week, starting on the first day of the week according to the * defined location (Sunday, Monday, etc.) */ private setWeekdays; /** * Defines the 2D-array with the dates of the current month */ private setCurrentMonthDates; /** * Returns an array with all days of the week in a specific month, corresponding to the given index, * starting with the first day of the week according to the language * * @param weekIndex - The index of the week */ private getDatesInWeek; private isMinLimitReached; private isMaxLimitReached; /** * Formats a `CalendarDate` object using the current language and the provided date format options * * @param calendarDate - The `CalendarDate` object that will be formatted * @param options - All date format options that will be used by the formatter */ private formatDate; /** * @internal */ private numberFormatter; private yearFormatter; private setNumberFormatter; private formatNumber; private formatYear; } export {};