@aurodesignsystem-dev/auro-formkit 0.0.0-pr1379.0 → 0.0.0-pr1379.10

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

@@ -1,722 +0,0 @@
-/**
- * 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;
-    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";