/** * 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 date_MM_DD_YYYY - 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_MM_DD_YYYY - 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 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-valueSet - Notifies that the component has a new value set. * @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. */ export class AuroDatePicker extends AuroElement { static get shadowRootOptions(): { delegatesFocus: boolean; clonable?: boolean; customElementRegistry?: CustomElementRegistry; mode: ShadowRootMode; serializable?: boolean; slotAssignment?: SlotAssignmentMode; }; static get properties(): { /** * Defines whether the component will be on lighter or darker backgrounds. * @property {'default', 'inverse'} * @default 'default' */ appearance: { type: StringConstructor; reflect: boolean; }; /** * If declared, bib's position will be automatically calculated where to appear. * @default false */ autoPlacement: { type: BooleanConstructor; reflect: boolean; }; /** * The last date that may be displayed in the calendar. */ calendarEndDate: { type: StringConstructor; reflect: boolean; }; /** * The date that will first be visually rendered to the user in the calendar. */ calendarFocusDate: { type: StringConstructor; reflect: boolean; }; /** * The first date that may be displayed in the calendar. */ calendarStartDate: { type: StringConstructor; reflect: boolean; }; /** * The date that determines the currently visible month. */ centralDate: { type: StringConstructor; }; /** * 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; reflect: boolean; }; /** * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. */ error: { type: StringConstructor; reflect: boolean; }; hasFocus: { type: BooleanConstructor; reflect: boolean; }; /** * @private */ hasValue: { type: BooleanConstructor; reflect: boolean; }; /** * @private */ hasAllValues: { type: BooleanConstructor; reflect: boolean; }; /** * Specifies the date format. The default is `mm/dd/yyyy`. */ format: { 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"; /** Exposes inputmode attribute for input. */ inputmode: { type: StringConstructor; attribute: boolean; reflect: boolean; }; /** * If declared, make bib.fullscreen.headline in HeadingDisplay. * Otherwise, Heading 600. */ largeFullscreenHeadline: { type: BooleanConstructor; reflect: boolean; }; /** * Sets the layout of the datepicker. * @type {'classic' | 'snowflake'} * @default 'classic' */ layout: "classic" | "snowflake"; /** * Maximum date. All dates after will be disabled. */ maxDate: { type: StringConstructor; reflect: boolean; }; /** * Minimum date. All dates before will be disabled. */ minDate: { type: StringConstructor; reflect: boolean; }; /** * Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. */ monthNames: { type: ArrayConstructor; }; /** * @private */ monthFirst: { type: BooleanConstructor; }; /** * If declared, the bib will NOT flip to an alternate position * when there isn't enough space in the specified `placement`. */ noFlip: { type: BooleanConstructor; reflect: boolean; }; /** * If declared, the dropdown will shift its position to avoid being cut off by the viewport. */ shift: { type: BooleanConstructor; reflect: boolean; }; /** * If set, disables auto-validation on blur. */ noValidate: { type: BooleanConstructor; reflect: boolean; }; /** * Gap between the trigger element and bib. * @default 0 */ offset: { type: NumberConstructor; reflect: boolean; }; /** * DEPRECATED - use `appearance="inverse"` instead. */ onDark: { type: BooleanConstructor; 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; 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; }; /** * 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 dates in the format of `MM-DD-YYYY`. */ referenceDates: { type: ArrayConstructor; reflect: boolean; }; /** * 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; }; /** * Custom help text message to display when validity = `customError`. */ setCustomValidityCustomError: { type: StringConstructor; }; /** * Custom help text message to display when validity = `rangeOverflow`. */ setCustomValidityRangeOverflow: { type: StringConstructor; }; /** * Custom help text message to display when validity = `rangeUnderflow`. */ setCustomValidityRangeUnderflow: { type: StringConstructor; }; /** * Custom help text message to display when validity = `valueMissing`. */ setCustomValidityValueMissing: { type: StringConstructor; }; /** * Set true to make datepicker stacked style. */ stacked: { type: BooleanConstructor; reflect: 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; }; /** * Indicates whether the datepicker is in a dirty state (has been interacted with). * @private */ touched: { type: BooleanConstructor; reflect: boolean; attribute: boolean; }; }; 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; /** * @private */ private util; /** * @private */ private calendarRenderUtil; formattedStartDate: boolean; appearance: string; touched: boolean; disabled: boolean; dvInputOnly: boolean; required: boolean; onDark: boolean; range: boolean; stacked: boolean; noValidate: boolean; validity: any; value: any; valueEnd: any; calendarStartDate: any; calendarEndDate: any; calendarFocusDate: any; format: string; fullscreenBreakpoint: string; monthNames: string[]; placement: string; offset: number; noFlip: boolean; shift: boolean; autoPlacement: boolean; largeFullscreenHeadline: boolean; /** * @private */ 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; layout: string; shape: string; size: string; /** * 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(); /** * @private * Common display value wrapper classes. */ 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. */ 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; /** * Binds all behavior needed to the dropdown after rendering. * @private * @returns {void} */ private configureDropdown; dropdown: any; /** * Binds all behavior needed to the input after rendering. * @private * @returns {void} */ private configureInput; triggerInput: any; inputList: any[]; errorMessage: any; /** * Binds all behavior needed to the dropdown after rendering. * @private * @returns {void} */ private configureCalendar; calendar: Element; /** * 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; /** * Sets the readonly attribute on the inputs based on the window width. * @private * @returns {void} */ private handleReadOnly; mobileBreakpoint: number; /** * 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; /** * Emits an event to notify the calendar cells to fetch their slot content. * @private * @returns {void} */ private pushSlotContent; /** * Handle enter/space keydown on the reset button. * @private * @param {KeyboardEvent} event - The keydown event. */ private handleKeydownReset; /** * 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; /** * 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; get hasError(): boolean; updated(changedProperties: any): void; monthFirst: boolean; previousTabIndex: string; formattedFocusDate: boolean; formattedEndDate: boolean; formattedValue: boolean; formattedValueEnd: boolean; formattedMinDate: boolean; formattedMaxDate: boolean; /** * 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; /** * 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 {string} 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 {string} dateValue - 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";