/**
 * @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 - Defines the content to display above selected dates in the mobile layout.
 * @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 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 (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
         * 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.
         * @default sm
         */
        fullscreenBreakpoint: {
            type: StringConstructor;
            reflect: boolean;
        };
        /** 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;
        };
        /**
         * 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`.
         * @default false
         */
        noFlip: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
         * @default false
         */
        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` 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.
         * Accepted values:
         * "top" | "right" | "bottom" | "left" |
         * "bottom-start" | "top-start" | "top-end" |
         * "right-start" | "right-end" | "bottom-end" |
         * "left-start" | "left-end"
         * @default bottom-start
         */
        placement: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * 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).
         * @type {boolean}
         * @default false
         * @private
         */
        touched: boolean;
    };
    static get styles(): import("lit").CSSResult[];
    /**
     * This will register this element with the browser.
     * @param {string} [name="auro-datepicker"] - The name of element that you want to register to.
     *
     * @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();
    get commonDisplayValueWrapperClasses(): {
        [x: string]: boolean;
        displayValueWrapper: boolean;
        util_displayHiddenVisually: boolean;
    };
    /**
     * 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";
