/**
* The `auro-datepicker` component provides users with a way to select a date or date range from a calendar popup or fullscreen calendar on mobile.
* @customElement auro-datepicker
*
* @slot helpText - Defines the content of the helpText.
* @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
* @slot ariaLabel.input.clear - Sets aria-label on clear button
* @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
* @slot bib.fullscreen.dateLabel - **DEPRECATED** - Use `bib.fullscreen.fromLabel` instead.
* @slot bib.fullscreen.fromLabel - Defines the content to display above the first input in the mobile layout.
* @slot bib.fullscreen.toLabel - Defines the content to display above the second input in the mobile layout when `range` is true.
* @slot label - Defines the label content for the entire datepicker when `layout="snowflake"`.
* @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
* @slot fromLabel - Defines the label content for the first input.
* @slot optionalFromLabel - Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`.
* @slot optionalToLabel - Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`.
* @slot date_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.
* @slot popover_YYYY_MM_DD - Defines the content to display in the auro-calendar-cell popover for the specified date.
* @csspart dropdown - Use for customizing the style of the dropdown.
* @csspart trigger - Use for customizing the style of the datepicker trigger.
* @csspart wrapper - Use for customizing the style of the trigger content wrapper.
* @csspart mainLabel - Use for customizing the style of the main label in the snowflake layout.
* @csspart inputSection - Use for customizing the style of the input section within the trigger.
* @csspart accentIcon - Use for customizing the style of the leading calendar accent icon.
* @csspart input - Use for customizing the style of the datepicker inputs.
* @csspart calendarWrapper - Use for customizing the style of the calendar container.
* @csspart calendar - Use for customizing the style of the calendar.
* @csspart helpTextSpan - Use for customizing the style of the datepicker help text span.
* @csspart helpText - Use for customizing the style of the datepicker help text.
* @event auroDatePicker-toggled - Notifies that the calendar dropdown has been opened/closed.
* @event auroDatePicker-monthChanged - Notifies that the visible calendar month(s) have changed.
* @event auroFormElement-validated - Notifies that the component value(s) have been validated.
* @event auroDatePicker-newSlotContent - Notifies that new slot content has been added to the datepicker.
* @event input - Notifies that the datepicker's value has changed.
*/
export class AuroDatePicker extends AuroElement {
static get shadowRootOptions(): {
delegatesFocus: boolean;
clonable?: boolean;
customElementRegistry?: CustomElementRegistry | null;
mode: ShadowRootMode;
serializable?: boolean;
slotAssignment?: SlotAssignmentMode;
};
static get properties(): {
/**
* Defines whether the component will be on lighter or darker backgrounds.
* @type {'default' | 'inverse'}
* @default 'default'
*/
appearance: "default" | "inverse";
/**
* If declared, bib's position will be automatically calculated where to appear.
* @default false
*/
autoPlacement: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).
*
* **Immutable update required.** The datepicker treats this array as
* immutable and memoizes a lookup Set keyed on the array's reference
* identity — matching Lit's own reactivity semantics for array
* properties. In-place mutations (`blackoutDates.push(...)`,
* `blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not
* invalidate the cache and the new entries will be silently ignored.
* To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.
* @type {string[]}
*/
blackoutDates: string[];
/**
* Label announced for blackout (disabled but in-range) date cells.
* @default 'unavailable'
*/
blackoutLabel: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* The last date that may be displayed in the calendar.
*/
calendarEndDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Accessible label for the calendar grid containing the days of the month.
* @default 'Calendar days of the month'
*/
calendarGridLabel: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* The date that will first be visually rendered to the user in the calendar.
*/
calendarFocusDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* The first date that may be displayed in the calendar.
*/
calendarStartDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* The date that determines the currently visible month.
*/
centralDate: {
type: StringConstructor;
attribute: string;
};
/**
* If set, disables the datepicker.
*/
disabled: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
*/
dvInputOnly: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
*/
error: {
type: StringConstructor;
reflect: boolean;
};
/**
* Specifies the date format. The default is `mm/dd/yyyy`.
*/
format: {
type: StringConstructor;
reflect: boolean;
};
/**
* Defines the locale of the element. Used to derive the date format when `format` is not explicitly set.
*/
locale: {
type: StringConstructor;
reflect: boolean;
};
/**
* Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
*
* When expanded, the dropdown will automatically display in fullscreen mode
* if the screen size is equal to or smaller than the selected breakpoint.
* @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
* @default 'sm'
*/
fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
/**
* @private
*/
hasAllValues: {
type: BooleanConstructor;
attribute: boolean;
reflect: boolean;
};
hasFocus: {
type: BooleanConstructor;
attribute: boolean;
reflect: boolean;
};
/**
* @private
*/
hasValue: {
type: BooleanConstructor;
attribute: boolean;
reflect: boolean;
};
/**
* Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display.
* @type {'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'}
*/
inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
/**
* If declared, make bib.fullscreen.headline in HeadingDisplay.
* Otherwise, Heading 600.
*/
largeFullscreenHeadline: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* Sets the layout of the datepicker.
* @type {'classic' | 'snowflake'}
* @default 'classic'
*/
layout: "classic" | "snowflake";
/**
* Sets the shape of the datepicker.
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
* @default 'classic'
*/
shape: "box" | "classic" | "pill" | "pill-left" | "pill-right" | "rounded" | "snowflake";
/**
* Sets the size of the datepicker.
* @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
* @default 'lg'
*/
size: "xs" | "sm" | "md" | "lg" | "xl";
/**
* Maximum date. All dates after will be disabled.
*/
maxDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Minimum date. All dates before will be disabled.
*/
minDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* When set, the calendar displays the month before the year in the header.
*/
monthFirst: {
type: BooleanConstructor;
attribute: string;
};
/**
* Names of all 12 months to render in the calendar.
* When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).
* @type {string[]}
*/
monthNames: string[];
/**
* Accessible label for the next month navigation button.
* @default 'Next month'
*/
navLabelNextMonth: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Accessible label for the previous month navigation button.
* @default 'Previous month'
*/
navLabelPrevMonth: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* If declared, the bib will NOT flip to an alternate position
* when there isn't enough space in the specified `placement`.
*/
noFlip: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* If set, disables auto-validation on blur.
*/
noValidate: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* Gap between the trigger element and bib.
* @default 0
*/
offset: {
type: NumberConstructor;
reflect: boolean;
};
/**
* DEPRECATED - use `appearance="inverse"` instead.
* @deprecated Use `appearance="inverse"` instead.
*/
onDark: {
type: BooleanConstructor;
attribute: string;
reflect: boolean;
};
/**
* Placeholder text to display in the input(s) when no value is set.
*/
placeholder: {
type: StringConstructor;
reflect: boolean;
};
/**
* Optional placeholder text to display in the second input when using date range.
* By default, datepicker will use `placeholder` for both inputs if placeholder is
* specified, but placeholderEndDate is not.
*/
placeholderEndDate: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Position where the bib should appear relative to the trigger.
* @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
* @default 'bottom-start'
*/
placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
/**
* If set, turns on date range functionality in auro-calendar.
*/
range: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Label announced for cells after a fully selected range (both
* `dateFrom` and `dateTo` are set). While a range is still being
* picked (`dateFrom` set, `dateTo` unset), focused cells past the
* start use `rangeLabelEndPreview` instead.
* @default 'after range'
*/
rangeLabelAfterRange: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Label announced for cells before the range start.
* @default 'before range'
*/
rangeLabelBeforeRange: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Label announced for the range end date cell.
* @default 'range end'
*/
rangeLabelEnd: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Label announced for the focused cell while previewing a range end
* (dateFrom set, dateTo not yet selected). Tells AT users that
* pressing Enter would commit this cell as the range end.
* @default 'previewing range end'
*/
rangeLabelEndPreview: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Label announced for cells within the selected range.
* @default 'in range'
*/
rangeLabelInRange: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Label announced for the range start date cell.
* @default 'range start'
*/
rangeLabelStart: {
type: StringConstructor;
attribute: string;
reflect: boolean;
};
/**
* Dates that the user should have for reference as part of their decision-making when selecting a date.
* This should be a JSON string array of ISO date strings (`YYYY-MM-DD`).
* @type {string[]}
*/
referenceDates: string[];
/**
* Populates the `required` attribute on the input. Used for client-side validation.
*/
required: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Sets a custom help text message to display for all validityStates.
*/
setCustomValidity: {
type: StringConstructor;
attribute: string;
};
/**
* Custom help text message to display when validity = `customError`.
* Also used as the validation message when a blackout date is typed into the input.
*/
setCustomValidityCustomError: {
type: StringConstructor;
attribute: string;
};
/**
* Custom help text message to display when validity = `rangeOverflow`.
*/
setCustomValidityRangeOverflow: {
type: StringConstructor;
attribute: string;
};
/**
* Custom help text message to display when validity = `rangeUnderflow`.
*/
setCustomValidityRangeUnderflow: {
type: StringConstructor;
attribute: string;
};
/**
* Custom help text message to display when validity = `valueMissing`.
*/
setCustomValidityValueMissing: {
type: StringConstructor;
attribute: string;
};
/**
* If declared, the dropdown will shift its position to avoid being cut off by the viewport.
*/
shift: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Set true to make datepicker stacked style.
*/
stacked: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* Indicates whether the datepicker is in a dirty state (has been interacted with).
* @private
*/
touched: {
type: BooleanConstructor;
reflect: boolean;
attribute: boolean;
};
/**
* Specifies the `validityState` this element is in.
*/
validity: {
type: StringConstructor;
reflect: boolean;
};
/**
* Value selected for the datepicker.
*/
value: {
type: StringConstructor;
};
/**
* Value selected for the second datepicker when using date range.
*/
valueEnd: {
type: StringConstructor;
attribute: string;
};
};
static get styles(): import("lit").CSSResult[];
/**
* This will register this element with the browser.
* @param {string} [name="auro-datepicker"] - The name of the element that you want to register.
*
* @example
* AuroDatePicker.register("custom-datepicker") // this will register this element to
*
*/
static register(name?: string): void;
/**
* Per-class dedup set used by `_warnInvalidLocale`. Static so the dedup
* spans every datepicker instance on the page; lives on the class (not
* at module scope) so it stays an encapsulated implementation detail of
* this component and does not interfere with WCA's class-JSDoc
* attachment.
* @private
*/
private static _warnedInvalidLocales;
/**
* @private
*/
private util;
/**
* @private
*/
private calendarRenderUtil;
/**
* @private
*/
private domHandler;
/** @type {'default' | 'inverse'} */
appearance: "default" | "inverse";
touched: boolean;
disabled: boolean;
dvInputOnly: boolean;
required: boolean;
onDark: boolean;
range: boolean;
rangeLabelStart: string;
rangeLabelEnd: string;
rangeLabelBeforeRange: string;
rangeLabelInRange: string;
rangeLabelAfterRange: string;
rangeLabelEndPreview: string;
/** @type {string[]} */
blackoutDates: string[];
blackoutLabel: string;
navLabelPrevMonth: string;
navLabelNextMonth: string;
calendarGridLabel: string;
stacked: boolean;
noValidate: boolean;
validity: any;
value: any;
valueEnd: any;
calendarStartDate: any;
calendarEndDate: any;
calendarFocusDate: any;
/** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
_validLocale: string;
/** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
offset: number;
noFlip: boolean;
shift: boolean;
autoPlacement: boolean;
largeFullscreenHeadline: boolean;
/**
* @private
* @type {HTMLElement[]}
*/
private dateSlotContent;
/**
* @private
*/
private hasDisplayValueContent;
/**
* @private
*/
private hasFocus;
/**
* @private
*/
private hasValue;
/**
* @private
*/
private hasAllValues;
/**
* @private
*/
private validation;
/**
* @private
*/
private runtimeUtils;
/**
* @private
*/
private forceScrollOnNextMobileCalendarRender;
/**
* @private
*/
private dropdownTag;
/**
* @private
*/
private buttonTag;
/**
* @private
*/
private iconTag;
/**
* @private
*/
private inputTag;
/**
* @private
*/
private helpTextTag;
/**
* Handles click events on the datepicker.
* @param {PointerEvent} event - The pointer event object.
* @private
* @returns {void}
*/
private handleClick;
/**
* Single AbortController shared by every listener registered in the
* configure* methods. Lets disconnectedCallback tear all of them down
* with one abort() call.
*
* The genuine leak risk is the listeners attached to children that can
* outlive the host if they get reparented — `this.dropdown`,
* `this.calendar`, and the inputs inside the dropdown's slot.
* Listeners attached to `this` (e.g. focusin/focusout on the host)
* form a self-contained reference graph that the GC can collect with
* the host anyway, but they share the same signal so the cleanup
* pattern stays uniform across all configure* sites.
* @private
*/
private _listenerAbortController;
/**
* Handles click on the clear button.
* @private
* @param {MouseEvent} event - The mouse event from the clear button click.
* @returns {void}
*/
private handleClearClick;
initializeArchitectureDefaults(): void;
layout: string | undefined;
shape: string | undefined;
size: string | undefined;
/**
* A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
* @returns {string[]}
*/
get values(): string[];
/**
* Whether the label is being hidden currently based on state.
* @returns {boolean} - Returns true if the label is hidden.
* @private
*/
private get labelHidden();
/**
* Whether the displayValue container is being hidden currently based on state.
* @returns {boolean} - Returns true if the label is hidden.
* @private
*/
private get dvHidden();
/**
* Returns the input font class based on layout and visibility state.
* @private
* @returns {string} - The font class for the input.
*/
private get displayValueFontClass();
/**
* Common display value wrapper classes.
* @private
* @returns {Object} Class map for Lit's classMap directive.
*/
private get commonDisplayValueWrapperClasses();
/**
* Function to determine if there is any displayValue content to render.
* @private
* @returns {void}
*/
private checkDisplayValueSlotChange;
/**
* Force the calendar view to the focus date when it changes.
* @private
* @returns {void}
*/
private handleFocusDateChange;
/**
* @private
* @param {Number} length - Number of characters for the returned random string.
* @returns {string}
*/
private generateRandomString;
/**
* Focuses the datepicker trigger input.
* @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
* @returns {void}
*/
focus(focusInput?: string): void;
/**
* Converts valid time number to format used by wc-date-range API.
* @private
* @param {Date} date - Date to be converted.
* @returns {Number} Simplified number.
*/
private convertToWcValidTime;
/**
* Converts date object into a string.
* @private
* @param {String} time - Unix timestamp to be converted to a date object.
* @returns {Date} Date formatted as a string.
*/
/**
* Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date.
* @returns {Date|undefined}
*/
get valueObject(): Date | undefined;
/**
* Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date.
* @returns {Date|undefined}
*/
get valueEndObject(): Date | undefined;
/**
* Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get minDateObject(): Date | undefined;
/**
* Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get maxDateObject(): Date | undefined;
/**
* Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get calendarStartDateObject(): Date | undefined;
/**
* Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get calendarEndDateObject(): Date | undefined;
/**
* Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get centralDateObject(): Date | undefined;
/**
* Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date.
* @returns {Date|undefined}
*/
get calendarFocusDateObject(): Date | undefined;
/**
* Converts a Unix timestamp (seconds) from the vendored range-datepicker
* (`src/vendor/wc-range-datepicker/day.js`) to an ISO date string.
*
* Timezone contract:
* - INPUT: `time` is assumed to be the seconds-since-epoch of **local
* midnight** for the intended calendar day. The vendor's Day constructor
* builds it via `date-fns format(date, 't')` from a locally-constructed
* Date, so this assumption currently holds end-to-end.
* - OUTPUT: `dateFormatter.toISOFormatString` reads the Date's local
* getFullYear/getMonth/getDate components, so the returned YYYY-MM-DD
* string matches the local calendar day.
*
* If the vendor ever switches to emitting UTC-midnight timestamps, this
* conversion will silently shift the returned date by one day in zones
* west of UTC. Any vendor swap should re-verify this contract; the TZ
* regression suite (`npm run test:hst`, UTC-10) will catch the symptom.
*
* @private
* @param {number} time - Unix timestamp (seconds), local midnight of the day.
* @returns {string} ISO date string (yyyy-mm-dd) reflecting the local calendar day.
*/
private convertWcTimeToDate;
/**
* Sends event notifying that the input has changed it's value.
* @private
* @returns {void}
*/
private notifyValueChanged;
/**
* Changes the calendar's visibility to reflect the value of the central date attribute.
* @private
* @returns {void}
*/
private handleCentralDateChange;
/**
* Sends event notifying that the calendar popover has been opened.
* @private
* @returns {void}
*/
private notifyDatepickerToggled;
/**
* Sends event notifying that the calendar's visible month has changed.
* @param {Object} event - Event passed in from auro-calendar when the event triggered this function.
* @private
* @returns {void}
*/
private notifyMonthChanged;
/**
* Attempts to focus the active calendar cell using a rAF retry loop.
* Shared by both fullscreen and desktop open paths.
* @private
* @returns {void}
*/
private focusActiveCellWhenReady;
/**
* Binds all behavior needed to the dropdown after rendering.
* @private
* @returns {void}
*/
private configureDropdown;
dropdown: any;
_restoreFocusOnClose: boolean | undefined;
/**
* Binds all behavior needed to the input after rendering.
* @private
* @returns {void}
*/
private configureInput;
triggerInput: any;
inputList: any[] | undefined;
errorMessage: any;
/**
* Binds all behavior needed to the dropdown after rendering.
* @private
* @returns {void}
*/
private configureCalendar;
calendar: Element | null | undefined;
/**
* Binds all behavior needed to the datepicker after rendering.
* @private
* @returns {void}
*/
private configureDatepicker;
/**
* Hides the dropdown bib if its open.
* @returns {void}
*/
hideBib(): void;
/**
* Shows the dropdown bib if there are options to show.
* @returns {void}
*/
showBib(): void;
/**
* Keep the datepicker in sync with the calendar's central date.
* @private
* @param {Number} event - Event received from calendar with the new central date.
* @returns {void}
*/
private handleCalendarCentralDateChange;
/**
* Sets the datepicker's values to the auro-calendar-cell that was clicked.
* @private
* @param {Number} time - Unix timestamp to be converted to a date.
* @returns {void}
*/
private handleCellClick;
cellClickActive: boolean | undefined;
/**
* Emits an event to notify the calendar cells to fetch their slot content.
* @private
* @returns {void}
*/
private pushSlotContent;
/**
* Resets values without resetting validation.
*/
resetInputs(): void;
/**
* Resets component to initial state.
* @returns {void}
*/
reset(): void;
/**
* Clears the current value(s) of the datepicker.
* @returns {void}
*/
clear(): void;
/**
* Checks whether a formatted date string matches a blackout date.
* @private
* @param {string} dateStr - A date string in the component's configured format.
* @returns {boolean} True if the date is in the blackoutDates list.
*/
private isBlackoutDate;
/**
* Validates value.
* @param {boolean} [force=false] - Whether to force validation.
*/
validate(force?: boolean): void;
/**
* Private method for interacting with the `hasValue` property.
* @private
*/
private setHasValue;
/**
* Returns `true` when the datepicker has an active validation error.
* @returns {boolean}
*/
get hasError(): boolean;
/**
* Logs a one-time `console.debug` when an unsupported locale falls back to
* en-US. Deduped by the offending tag so noisy re-renders that resurface
* the same bad value stay quiet, but each new bad value still signals so
* consumers can spot the typo or missing tag.
* @private
* @param {string|undefined} badLocale - The locale value that failed.
* @returns {void}
*/
private _warnInvalidLocale;
/**
* Lifecycle method to check if the locale is valid.
* @ignore
* @param {Map} changedProperties - The map of properties that have changed since the last update.
* @returns {void}
*/
willUpdate(changedProperties: Map): void;
format: string | undefined;
updated(changedProperties: any): void;
previousTabIndex: string | null | undefined;
wasCellClick: boolean | undefined;
/**
* Handles the transfer of content between slots in the component.
*
* @private
* @method handleSlotToSlot
* @param {Event} event - The event object containing information about the slot transfer.
* @throws {Error} Throws an error if the slot cannot be found or injected.
*/
private handleSlotToSlot;
/**
* Set up click handling for the datepicker.
* @private
* @returns {void}
*/
private configureClickHandler;
firstUpdated(): void;
locale: any;
/**
* Renders the snowflake layout for the datepicker.
* @private
* @returns {import("lit").TemplateResult}
*/
private renderSnowflakeLayout;
/**
* Renders the snowflake layout for the datepicker.
* @private
* @returns {import("lit").TemplateResult}
*/
private renderClassicLayout;
/**
* Renders the layout based on the `layout` attribute.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderLayoutFromAttributes;
/**
* Simple formatter that ONLY WORKS FOR US DATES.
* Returns formatted date like Apr 21 or Dec 25.
* @private
* @param {Date} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
* @returns {string}
*/
private formatShortDate;
/**
* Format and render the provided date value.
* @private
* @param {Date} date - The date value to format and render.
* @returns {import('lit').TemplateResult}
*/
private renderDisplayTextDate;
/**
* Renders the HTML inputs for the datepicker.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderHtmlInputs;
/**
* Renders the clear action button.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderHtmlActionClear;
/**
* Renders the error icon.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderHtmlIconError;
/**
* Renders the calendar icon.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderHtmlIconCalendar;
/**
* Returns HTML for the help text and error message.
* @private
* @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
*/
private renderHtmlHelpText;
/**
* Separate method for rendering the calendar.
* @private
* @returns {import('lit').TemplateResult}
*/
private renderCalendar;
render(): import("lit-html").TemplateResult;
}
import { AuroElement } from "@aurodesignsystem/auro-layout-element";