import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime'; import type { ActionSheetDatePickerData } from 'q2-tecton-common/lib/types/action-sheet'; import type { DatePickerChangeDetail, DatePickerCloseDetail, DatePickerDisplayFormat, DatePickerErrorDetail, DatePickerMode, DatePickerMomentLike, DatePickerSuccessDetail, DatePickerValue } from "../../utils/date-picker/date-picker-types"; type DatePickerStandaloneElement = HTMLElement & { focusDate: (value: string | Date) => Promise; setValue: (value: string | Date) => Promise; }; /** * @name Date Picker * @category Forms * @summary Use for selecting a date or date range with an input and calendar popup. * @slot label - Custom content for the input label. */ export declare class Q2DatePicker implements ComponentInterface { calendarElement: DatePickerStandaloneElement; closeTimeout: ReturnType; committingValue: boolean; controlElement: HTMLQ2InputElement; normalizedDateLists: WeakMap; popoverElement: HTMLQ2PopoverElement; hostElement: HTMLElement; activePopoverDirection: 'up' | 'down'; calendarError: string; typeableError: string; typeableValue: string; /** * Renders the calendar panel inline with behavior specific to being hosted by `q2-action-sheet`. * @private */ _actionSheet: boolean; /** * Determines the year for a committed month/day typeable date with no year. * `future` selects the next year for dates before today, while `past` selects the prior year for dates after today. * Only applies to `single-typeable` mode with a month-first or day-first display format. */ assume: 'current' | 'future' | 'past'; /** A label shown above the date picker navigation. */ calendarLabel: string; /** Displays a button in the input field allowing the user to clear the selected date or range. */ clearable: boolean; /** Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately. */ closeDelay: number | undefined; /** * Specifies a time of day after which a date is no longer valid. * * @warning * Must be a valid ISO date string. */ cutoffTime: string; /** * Defines valid days of the week using the calendar checksum values. * * Sunday begins at `1` and each following day doubles through Saturday at `64`. */ daysOfWeekChecksum: number; /** Indicates the date picker cannot be focused or interacted with. */ disabled: boolean; /** Text displayed as the input placeholder when the field is disabled. */ disabledMsg: string; /** Text shown below the date grid. */ disclaimer: string; /** * Formats the displayed date using legacy Moment-style tokens. Typeable modes support the numeric formats defined * by `DatePickerDisplayFormat` and fall back to `MM/DD/YYYY` for other formats. */ displayFormat?: string; /** * Defines the last selectable date. ISO date strings are preferred; legacy date strings and * timestamps are normalized to their calendar date, without shifting timestamp time zones. */ endDate: string; /** Consumer-provided error messages displayed below the input field. */ errors: string[]; /** * Hides the input field's visible label while retaining its accessible name. * @warning * Hides the label visually. `label` text is still required for screenreader compliance. */ hideLabel: boolean; /** Consumer-provided hint messages displayed below the input field. */ hints: string[]; /** * Instructs the component to use the action sheet workflow for displaying its calendar. * * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/). */ hoist: boolean | undefined; /** Shows the input field's error visual state. */ invalid: boolean; /** * Defines an explicit date blacklist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates. * * Assign a new array when changing this property. Mutating the existing array does not trigger validation updates. */ invalidDates: string[]; /** * The visible label for the date picker input field. * @warning * Required for screen reader compliance even when `hideLabel` is `true`. */ label: string; /** Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks. */ locale: string | string[]; /** * Selects calendar or typeable behavior for a single date or date range. * Enabling the legacy `typeable` prop uses `single-typeable` when `mode` is left at its default; an explicit mode takes precedence. */ mode: DatePickerMode; /** Controls whether the date picker popover is open or closed. */ open: boolean; /** Appends "(optional)" to the input label and marks the field as not required. */ optional: boolean; /** Text shown in the input field when no date is selected. */ placeholder: string; /** * Forces the direction of the popover when it opens. * @deprecated Use `popoverDirection` instead. */ popDirection: 'up' | 'down'; /** Aligns the calendar popover to the left or right side of the input field. */ popoverAlignment: 'left' | 'right'; /** * Forces the direction of the popover when it opens. * * If no value is passed, the popover automatically selects a direction based on available space. * Use `up` to place navigation below the date grid. */ popoverDirection: 'up' | 'down'; /** @deprecated Retained for compatibility with `q2-date-picker`. */ popoverMinHeight: number; /** * Uses absolute positioning for the popover when set to `legacy`. * * This compatibility option supports layouts where transformed ancestors interfere with fixed positioning. */ popoverMode: 'legacy'; /** The selected range end. ISO dates, legacy date strings, and timestamps are accepted. */ rangeEnd: string; /** The selected range start. ISO dates, legacy date strings, and timestamps are accepted. */ rangeStart: string; /** * The field's content is not editable, but the field remains focusable. * * Appends "(read only)" to the field label. */ readonly: boolean; /** * Defines the first selectable date. ISO date strings are preferred; legacy date strings and * timestamps are normalized to their calendar date, without shifting timestamp time zones. */ startDate: string; /** Enables the legacy single-date typeable input behavior. */ typeable: boolean; /** Shows the input field's success visual state when no errors are active. */ valid: boolean; /** * Defines an explicit date whitelist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates. * * Assign a new array when changing this property. Mutating the existing array does not trigger validation updates. */ validDates: string[]; /** * The selected date. ISO date strings are preferred; legacy date strings and Moment-like values are normalized to * an ISO date string. */ value: DatePickerValue; /** * Emitted when a date is selected. * @legacyEvent * @deprecated Use `tctChange` instead. */ change: EventEmitter; /** * Emitted when an invalid single date is entered or assigned. * @deprecated Use `tctError` instead. */ error: EventEmitter; /** * Emitted when a valid single date is entered, selected, or assigned. * @deprecated Use `tctSuccess` instead. */ success: EventEmitter; /** Emitted when an action-sheet date range is cancelled. */ tctCancel: EventEmitter; /** Emitted when a date is selected. */ tctChange: EventEmitter; /** Emitted when the picker closes after confirmation. Includes validation details when confirmation fails. */ tctClose: EventEmitter; /** Emitted when an invalid single date is entered or assigned. */ tctError: EventEmitter; /** Emitted when a valid single date is entered, selected, or assigned. */ tctSuccess: EventEmitter; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; componentDidLoad(): void; componentDidRender(): void; beforeInputHandler(event: InputEvent): void; delegateFocus(event: FocusEvent): void; popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean; }>): void; /** Closes the calendar popover if it is open. */ closePopover(): Promise; /** Moves the visible month to the provided date and focuses that day. */ focusDate(date: Date): Promise; /** Opens the calendar popover if it is closed. */ openPopover(): Promise; /** Clears selected values, uncommitted typeable input, and error state without changing configuration props. */ reset(): Promise; /** Opens the calendar and selects the provided date when it is valid. */ setValue(value: string | Date | DatePickerMomentLike): Promise; /** * Focuses the single typeable input and stages a valid date without committing it. * * @warning * Only applicable when the effective mode is `single-typeable`. */ typeValue(value: string | Date): Promise; constraintsChanged(): void; disabledChanged(disabled: boolean): void; displayFormatChanged(): void; modeChanged(): void; openChanged(open: boolean): void; popDirectionChanged(): void; popoverDirectionChanged(): void; rangeEndChanged(): void; rangeStartChanged(): void; readonlyChanged(readonly: boolean): void; valueChanged(value: DatePickerValue): void; get acceptsTypeableInput(): boolean; get actionSheetData(): ActionSheetDatePickerData; get automaticPopoverDirection(): 'up' | 'down'; get canClear(): boolean; get computedErrors(): string[] | undefined; get computedPlaceholder(): string; get dateFormatValidationError(): string; get effectiveMode(): DatePickerMode; get effectivePopoverDirection(): 'up' | 'down' | undefined; get formattedTypeableValue(): string; get formattedValue(): string; get isRangeMode(): boolean; get isRangeTypeable(): boolean; get isSingleTypeable(): boolean; get normalizedDisplayFormat(): DatePickerDisplayFormat; get normalizedInvalidDates(): string[] | undefined; get normalizedValidDates(): string[] | undefined; get normalizedValue(): string | undefined; get rangeEndDate(): Date | undefined; get rangeFormatValidationError(): string; get rangeOrderValidationError(): string; get rangeTypeableFormat(): string; get rangeValidationError(): string; get selectedDate(): Date | undefined; get typeableAllowedCharacters(): RegExp; closeAfterSelection(): void; closeCalendar(returnFocus?: boolean, emitClose?: boolean): void; commitSingleValue(value: string): void; emitValidationError(message: string): void; emitValidationSuccess(value: string): void; focusRenderedDate(value?: string): void; formatDateWithModifier(date: Date): string; formatLongDate(date: Date): string; formatTypeableDate(value: string): string; isDateValid(date: Date): boolean; isRangeValid(start: Date, end: Date): boolean; isTypeableDatePrefixInvalid(digits: string): boolean; localizeForLocale(value: string, substitutions?: Record): string; normalizeDateList(values?: string[]): string[] | undefined; onCalendarCancel: (event: CustomEvent) => void; onCalendarCommit: (event: CustomEvent) => void; onCalendarDismiss: (event: CustomEvent) => void; onCalendarError: (event: CustomEvent) => void; onCalendarToggleClick: (event: MouseEvent) => void; onClear: () => void; onClickElsewhere: (event: CustomEvent) => void; onInputClick: () => void; onInputKeydown: (event: KeyboardEvent) => void; onTypeableChange: (event: CustomEvent<{ value: string; }>) => void; onTypeableInput: (event: CustomEvent<{ value: string; }>) => void; parseTypeableDate(value: string): Date | undefined; /** * Recomputes the typeable error from the current `typeableValue`, applying the same range checks the commit path * uses so a stale error cannot outlive the text that produced it. */ revalidateTypeableValue(): void; scrollDownCalendarToTop(): Promise; scrollUpCalendarToBottom(): Promise; setActivePopoverDirection(): void; setTypeableError(error: string): void; showActionSheet(): Promise; syncTypeableValue(): void; toggleCalendar(): void; typeableRangeError(start: Date, end: Date): string; validateCurrentValue(value?: DatePickerValue): void; validateTypeableValue(): void; renderCalendar(): any; render(): any; } export {};