@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -0,0 +1,716 @@
+/**
+ * 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 <custom-datepicker/>
+     *
+     */
+    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;
+    /**
+     * Handles click on the clear button.
+     * @private
+     * @param {MouseEvent} event
+     * @returns {void}
+     */
+    private handleClearClick;
+    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;
+    /**
+     * 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;
+    /**
+     * 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";

package/components/datepicker/dist/buttonVersion.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "12.3.2";
+export default _default;