import TerraElement from '../../internal/terra-element.js'; import type { CSSResultGroup } from 'lit'; import TerraButton from '../button/button.component.js'; import TerraInput from '../input/input.component.js'; import TerraDropdown from '../dropdown/dropdown.component.js'; interface DateRange { startDate: Date | null; endDate: Date | null; } interface PresetRange { label: string; getValue: () => DateRange; } /** * @summary A date picker component that implements the Horizon Design System (HDS) Date Picker patterns. Supports single date selection or date range selection with calendar popup. * @documentation https://terra-ui.netlify.app/components/date-picker * @status stable * @since 1.0 * * @dependency terra-input * @dependency terra-button * @dependency terra-dropdown * * @slot - The default slot. * * @event terra-date-range-change - Emitted when a date selection is made or changed. * @eventDetail { startDate: string, endDate: string } - ISO date strings or YYYY-MM-DD format. * * @csspart base - The component's base wrapper. * @csspart input - The date input element (terra-input). * @csspart calendar - The calendar dropdown. * @csspart sidebar - The preset ranges sidebar. * * @cssproperty --terra-date-picker-* - All date picker design tokens from horizon.css are supported. */ export default class TerraDatePicker extends TerraElement { static styles: CSSResultGroup; static dependencies: { 'terra-button': typeof TerraButton; 'terra-input': typeof TerraInput; 'terra-dropdown': typeof TerraDropdown; }; id: string; range: boolean; minDate?: string; maxDate?: string; startDate?: string; endDate?: string; hideLabel: boolean; label: string; helpText: string; startHelpText: string; endHelpText: string; startLabel?: string; endLabel?: string; showPresets: boolean; presets: PresetRange[]; enableTime: boolean; displayFormat?: string; inline: boolean; splitInputs: boolean; placeholder: string; startPlaceholder: string; endPlaceholder: string; /** The ARIA role for the button. Defaults to 'group'. */ role: string | null; /** The ARIA label for the date picker. Defaults to 'Date picker'.*/ ariaLabel: string | null; hideClearAll: boolean; clearAllLabel: string; useEndOfDay: boolean; isOpen: boolean; leftMonth: Date; rightMonth: Date; selectedStart: Date | null; selectedEnd: Date | null; hoverDate: Date | null; isSelectingRange: boolean; showLeftMonthDropdown: boolean; showRightMonthDropdown: boolean; startHour: number; startMinute: number; startSecond: number; endHour: number; endMinute: number; endSecond: number; private getDefaultEndHour; private getDefaultEndMinute; private getDefaultEndSecond; selectedDates: { startDate: string; endDate: string; }; dropdown: HTMLElement; dropdownRef: import("lit-html/directives/ref.js").Ref; private readonly DAYS; private readonly MONTHS; constructor(); /** * Parse a date string (YYYY-MM-DD or ISO datetime) as a local date, avoiding timezone issues. * When you do `new Date("2024-03-20")`, JavaScript interprets it as UTC midnight, * which can cause off-by-one day errors when using getDate() in local timezone. * This function parses the date as a local date instead. * * When enableTime is true, datetime strings are parsed as UTC to match API min/max dates. */ private parseLocalDate; /** * Check if two dates are in the same calendar month and year */ private isSameMonth; /** * Check if a date's month/year matches a given month Date */ private isDateInMonth; private getBounds; private doesRangeOverlapBounds; private isPresetWithinBounds; private get filteredPresets(); open(): void; close(): void; /** * Clears the selected date(s) and resets the date picker to its initial state. */ clear(): void; setOpen(open: boolean): void; willUpdate(changedProperties: Map): void; private initializePresets; firstUpdated(): void; disconnectedCallback(): void; private handleDropdownShow; private handleDropdownHide; private formatDisplayDate; private getDisplayValue; private getStartDateDisplayValue; private getEndDateDisplayValue; private parseAndFormatDate; private clearInputValidation; /** * Format a date string for display in error messages * When time is disabled, only show the date portion (YYYY-MM-DD) */ private formatDateForError; /** * Set validation error on input and emit invalid event */ private setInputValidationError; private handleInputBlur; private handleStartInputBlur; private handleEndInputBlur; private updateMonthViews; private handleKeydown; private previousMonth; private nextMonth; private toggleMonthDropdown; private selectMonth; private changeYear; private handleYearInput; private getDaysInMonth; private isSameDay; private isInRange; private isInHoverRange; private isDisabled; selectDate(date: Date): void; private handleDateHover; private selectPreset; private emitChange; private initializeTimeFromDate; private changeTime; private handleTimeInput; private renderCalendar; private renderTimePicker; private renderCalendarIcon; private renderCalendarContent; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'terra-date-picker': TerraDatePicker; } } export {};