import type { EventEmitter } from '../../stencil-public-runtime'; import type { LocaleProp } from '../../utils/locale'; 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-MD`) 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 and language of the "jump to today" footer * shortcut. Unset, both follow the closest ancestor `lang` (`` included), else * `ro-MD`. A tag whose language has no built-in dictionary (`de-DE`) reaches `Intl` as the * shown dictionary's locale instead, with one `console.warn` — see `formatLocale`. */ locale?: LocaleProp; /** * Label of the "jump to today" footer shortcut, when `todayShortcut` is set. Overrides the * `locale`'s copy when set to a non-empty string. * @default 'Azi' (ro-MD) */ todayLabel?: 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; /** * Show the "Today" quick-jump shortcut under the grid. Off by default: no * date-picker variant in the Figma spec (159:904) has it. * @default false */ todayShortcut: boolean; /** * Hide the "Today" quick-jump shortcut. * @deprecated The shortcut is hidden by default now; use `todayShortcut` to show it. When set, * this still wins over `todayShortcut`. */ 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; /** * Selector of the control to focus after the next render — set when a view * switch removes the control that had focus (a header chip, a month / year * cell). */ private focusOnRender; /** Where picking a year from the year chip leads back to: the view the chip was in. */ private yearChipReturn; private stopLang?; syncLabel(next?: string): void; validateMode(next: DatePickerMode): void; validateBreakpoint(next: DatePickerBreakpoint): void; validateHeaderStyle(next: DatePickerHeaderStyle): void; handleValueChange(): void; handleRangeStartChange(): void; handleViewDateChange(): void; handleHostKeyDown(ev: KeyboardEvent): void; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; componentDidRender(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; /** * The BCP-47 tag handed to every `Intl` call — `formatLocale`'s result: a tag whose language * has a built-in dictionary reaches `Intl` as given (region added when absent, `ro` → `ro-MD`); * a tag whose language has none (`de-DE`) is rewritten to the shown dictionary's own locale. */ private resolvedIntlTag; private captureAriaLabel; /** 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; private handleDayKeyDown; /** * Change view and move focus once rendered — by default into the new view: * its tab-stop day, or its selected month / year (the view year and month * are always in their grids). */ private switchView; /** * The view a click on the header title cycles to: days → months → years → days. A class * field (not an inline JSX arrow) so its literal view names never sit inside the render * tree — see `mud/no-hardcoded-copy`'s JSX-descendant rule. */ private readonly cycleView; private readonly goToMonths; private readonly goToDays; private readonly goToYears; private readonly pickMonth; private readonly pickYear; /** * The day holding the grid's single tab stop: the focused day, else the * selection, today, or the first enabled day — whichever is first in the * visible month. The grid always keeps one, or focus would fall to * when neither today nor a focused day is in view. */ private dayTabStop; /** First year of the 12-cell year grid: the decade the view year falls in (Figma 524:1858). */ private yearGridBase; private capitalize; private renderHeader; private renderHeaderTitle; private renderHeaderDropdowns; private renderDayLabels; private renderDayGrid; private renderMonthGrid; private renderYearGrid; private renderFooter; render(): any; }