import CwElement from '../../internal/cw-element.js';
import CwIcon from '../icon/icon.component.js';
import CwIconButton from '../icon-button/icon-button.component.js';
import CwPopup from '../popup/popup.component.js';
import type { CSSResultGroup } from 'lit';
import type { CwFormControl } from '../../internal/cw-element.js';
/**
 * @summary Date pickers let users select a date from a calendar.
 * @documentation https://cw-elements-b0c7e5.gitlab.io/components/date-picker
 * @status experimental
 * @since 1.1
 *
 * @dependency cw-icon
 * @dependency cw-icon-button
 * @dependency cw-popup
 *
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event cw-change - Emitted when the control's value changes.
 * @event cw-clear - Emitted when the control's value is cleared.
 * @event cw-input - Emitted when the control receives input.
 * @event cw-focus - Emitted when the control gains focus.
 * @event cw-blur - Emitted when the control loses focus.
 * @event cw-show - Emitted when the date picker's calendar opens.
 * @event cw-after-show - Emitted after the date picker's calendar opens and all animations are complete.
 * @event cw-hide - Emitted when the date picker's calendar closes.
 * @event cw-after-hide - Emitted after the date picker's calendar closes and all animations are complete.
 * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The date picker's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, display input, clear icon, and expand icon.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected date, an `<input>` element.
 * @csspart calendar - The calendar container where the header and date grid are rendered.
 * @csspart header - The calendar's header containing the previous/next buttons and heading.
 * @csspart heading - The heading that displays the focused month and year.
 * @csspart previous-button - The button that navigates to the previous month.
 * @csspart next-button - The button that navigates to the next month.
 * @csspart grid - The grid that contains the weekday headers and days.
 * @csspart day - An individual day within the grid.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 */
export default class CwDatePicker extends CwElement implements CwFormControl {
    static styles: CSSResultGroup;
    static dependencies: {
        'cw-icon': typeof CwIcon;
        'cw-icon-button': typeof CwIconButton;
        'cw-popup': typeof CwPopup;
    };
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private closeWatcher;
    popup: CwPopup;
    combobox: HTMLElement;
    displayInput: HTMLInputElement;
    valueInput: HTMLInputElement;
    calendar: HTMLElement;
    private hasFocus;
    private focusedDate;
    private valueHasChanged;
    /** The name of the date picker, submitted as a name/value pair with form data. */
    name: string;
    private _value;
    get value(): string;
    /** The current value of the date picker, submitted as a name/value pair with form data. The value is an ISO 8601 date string in `YYYY-MM-DD` format. */
    set value(val: string);
    /** The default value of the form control. Primarily used for resetting the form control. */
    defaultValue: string;
    /** The earliest date a user may select, as a `YYYY-MM-DD` string. */
    min: string;
    /** The latest date a user may select, as a `YYYY-MM-DD` string. */
    max: string;
    /**
     * The first day of the week, where `0` is Sunday and `6` is Saturday. When not set, the first day of the week is
     * determined by the page's locale, falling back to Sunday.
     */
    firstDayOfWeek?: number;
    /** The date picker's size. */
    size: 'small' | 'medium' | 'large';
    /** Placeholder text to show as a hint when the date picker is empty. */
    placeholder: string;
    /** Disables the date picker. */
    disabled: boolean;
    /** Adds a clear button when the date picker is not empty. */
    clearable: boolean;
    /**
     * Indicates whether or not the date picker is open. You can toggle this attribute to show and hide the calendar, or
     * you can use the `show()` and `hide()` methods and this attribute will reflect the date picker's open state.
     */
    open: boolean;
    /**
     * Enable this option to prevent the calendar from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /** Draws a filled date picker. */
    filled: boolean;
    /** Draws a pill-style date picker with rounded edges. */
    pill: boolean;
    /** The date picker's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * The preferred placement of the date picker's calendar. Note that the actual placement may vary as needed to keep the
     * calendar inside of the viewport.
     */
    placement: 'top' | 'bottom';
    /** The date picker's help text. If you need to display HTML, use the `help-text` slot instead. */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /** The date picker's required attribute. */
    required: boolean;
    /** Gets the validity state object */
    get validity(): ValidityState;
    /** Gets the validation message */
    get validationMessage(): string;
    private get parsedValue();
    private get parsedMin();
    private get parsedMax();
    connectedCallback(): void;
    private addOpenListeners;
    private removeOpenListeners;
    private handleFocus;
    private handleBlur;
    private handleLabelClick;
    private handleDocumentFocusIn;
    private handleDocumentMouseDown;
    private handleDocumentKeyDown;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleCalendarMouseDown;
    private handleDayClick;
    private handlePreviousMonthClick;
    private handleNextMonthClick;
    private handleInvalid;
    private getFirstDayOfWeek;
    private getWeekdayLabels;
    private getHeaderLabel;
    private getDayLabel;
    private get displayLabel();
    private moveFocusedDate;
    private moveFocusedDateToStartOfWeek;
    private moveFocusedDateToEndOfWeek;
    private navigateMonth;
    private navigateYear;
    private isDateDisabled;
    private selectDate;
    private setDateValue;
    private getInitialFocusDate;
    private renderDay;
    private renderCalendar;
    handleDisabledChange(): void;
    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
    handleValueChange(): void;
    handleOpenChange(): Promise<void>;
    /** Shows the calendar. */
    show(): Promise<void>;
    /** Hides the calendar. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): import("lit-html").TemplateResult<1>;
}