import { EventEmitter } from '../../stencil-public-runtime'; import type { DatePickerBreakpoint, DatePickerChangeDetail, DatePickerHeaderStyle, DatePickerMode, DatePickerMonthChangeDetail } from './mud-date-picker.types'; /** * Romanian date picker — locale-aware calendar molecule. * * Three modes: * - `single` — pick exactly one date. `value` is `string` (ISO YYYY-MM-DD) or empty. * - `range` — pick a start + end. Click once to set `rangeStart`, click again to set `rangeEnd`; * click outside the range to start a new range. * - `multi` — toggle individual dates. `value` is `string[]`. * * Three breakpoints (visual modes): * - `desktop` — 320px elevated card with shadow. * - `mobile` — full-width bottom-sheet style with drag handle. * - `docked` — compact (no shadow) intended to attach beneath a `mud-date-input`. * * All weekday + month labels come from `Intl.DateTimeFormat` so the locale prop drives the language — * no hard-coded strings. Romanian (`ro-RO`) is the default. * * Keyboard: * - Arrow keys move focus by day * - PageUp/PageDown change month * - Shift+PageUp/PageDown change year * - Home/End jump to the start/end of the visible week * - Enter/Space selects the focused day * * @element mud-date-picker */ export declare class MudDatePicker { /** * Selection mode. * @default 'single' */ mode: DatePickerMode; /** * Visual breakpoint / placement. * @default 'desktop' */ breakpoint: DatePickerBreakpoint; /** * Header presentation. `title` (default) shows one "Month Year" button that * cycles views; `dropdown` shows separate month + year dropdown chips (the * "advanced" variant from the Figma spec). * @default 'title' */ headerStyle: DatePickerHeaderStyle; /** * Selected value: * - `single` → ISO `YYYY-MM-DD` string (or empty) * - `range` → ISO array `[start, end]` (use `rangeStart`/`rangeEnd` for explicit access) * - `multi` → array of ISO strings */ value?: string | string[]; /** Range mode: start date (ISO `YYYY-MM-DD`). Set together with `rangeEnd`. */ rangeStart?: string; /** Range mode: end date (ISO `YYYY-MM-DD`). Set together with `rangeStart`. */ rangeEnd?: string; /** Inclusive lower bound (ISO `YYYY-MM-DD`). Dates before this are disabled. */ min?: string; /** Inclusive upper bound (ISO `YYYY-MM-DD`). Dates after this are disabled. */ max?: string; /** ISO `YYYY-MM-DD` strings that should be marked disabled (e.g. holidays). */ disabledDates?: string[]; /** BCP-47 locale tag for weekday/month rendering. Defaults to Romanian. */ locale: string; /** * Accessible label for the entire picker. Set the `aria-label` attribute on * the host (or use this prop) and the component captures it on connect into * `resolvedAriaLabel`, then strips the host attribute to avoid Stencil's * attribute-observer / render-loop antipattern (same pattern as mud-radio / * mud-switch / mud-tooltip / mud-accordion / mud-breadcrumb). */ label?: string; /** * Week starts on this day of the week (0 = Sunday, 1 = Monday). Defaults to 1 (Monday) * which matches the Romanian + most European convention. */ firstDayOfWeek: number; /** Hide the "Today" quick-jump shortcut. Default keeps it visible. */ hideTodayShortcut: boolean; /** * ISO `YYYY-MM-DD` date that controls the initially displayed month without affecting selection. * Useful for tests and controlled scenarios where you need a specific month in view. */ viewDate?: string; private viewYear; private viewMonth; private view; private focusedIso; private hoverIso; private resolvedAriaLabel?; host: HTMLMudDatePickerElement; /** * Fires whenever the selection changes. For `range` mode, `detail.rangeStart` / `detail.rangeEnd` * carry the canonical ISO strings; for `multi`, `detail.value` is `string[]`. */ mudChange: EventEmitter; /** Fires when the visible month changes (arrows, swipe, keyboard). `month` is 0-indexed. */ mudMonthChange: EventEmitter; private readonly instanceId; private readonly gridLabelId; private readonly titleId; private todayIso; componentWillLoad(): void; private captureAriaLabel; syncLabel(next?: string): void; validateMode(next: DatePickerMode): void; validateBreakpoint(next: DatePickerBreakpoint): void; validateHeaderStyle(next: DatePickerHeaderStyle): void; handleValueChange(): void; handleRangeStartChange(): void; handleViewDateChange(): void; /** Move the visible month to whatever the selection (or today) implies. */ private syncViewFromValue; /** Localized month + weekday strings via Intl. Never hard-coded. */ private monthLabel; /** Short weekday names starting at `firstDayOfWeek`. Locale-driven. */ private weekdayLabels; /** * Build the 6×7 day grid for the current view month. Includes outside-month * spillover so the grid is always 42 cells. */ private buildDayGrid; private isDisabled; private isSelected; private isRangeMiddle; private isRangeEndpoint; private goToMonth; private goToYear; private selectDay; private moveFocus; handleHostKeyDown(ev: KeyboardEvent): void; private handleDayKeyDown; private todayLabel; private capitalize; private renderHeader; private renderHeaderTitle; private renderHeaderDropdowns; private renderDayLabels; private renderDayGrid; private renderMonthGrid; private renderYearGrid; private renderFooter; render(): any; }