import { nothing, type TemplateResult } from 'lit';
import { type DateRangeDescriptor, type WeekDays } from '../calendar/types.js';
import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
import type { AbstractConstructor } from '../common/mixins/constructor.js';
import type { ContentOrientation, PickerMode } from '../types.js';
export interface DateRangeValue {
    start: Date | null;
    end: Date | null;
}
export interface CustomDateRange {
    label: string;
    dateRange: DateRangeValue;
}
export interface IgcDateRangePickerComponentEventMap {
    igcOpening: CustomEvent<void>;
    igcOpened: CustomEvent<void>;
    igcClosing: CustomEvent<void>;
    igcClosed: CustomEvent<void>;
    igcChange: CustomEvent<DateRangeValue | null>;
    igcInput: CustomEvent<DateRangeValue | null>;
}
declare const IgcDateRangePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateRangePickerComponentEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
/**
 * The igc-date-range-picker allows the user to select a range of dates.
 *
 * @element igc-date-range-picker
 *
 * @slot prefix - Renders content before the input (single input).
 * @slot prefix-start - Renders content before the start input (two inputs).
 * @slot prefix-end - Renders content before the end input (two inputs).
 * @slot suffix - Renders content after the input (single input).
 * @slot suffix-start - Renders content after the start input (single input).
 * @slot suffix-end - Renders content after the end input (single input).
 * @slot helper-text - Renders content below the input.
 * @slot bad-input - Renders content when the value is in the disabledDates ranges.
 * @slot value-missing - Renders content when the required validation fails.
 * @slot range-overflow - Renders content when the max validation fails.
 * @slot range-underflow - Renders content when the min validation fails.
 * @slot custom-error - Renders content when setCustomValidity(message) is set.
 * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
 * @slot title - Renders content in the calendar title.
 * @slot header-date - Renders content instead of the current date/range in the calendar header.
 * @slot clear-icon - Renders a clear icon template.
 * @slot clear-icon-start - Renders a clear icon template for the start input (two inputs).
 * @slot clear-icon-end - Renders a clear icon template for the end input (two inputs).
 * @slot calendar-icon - Renders the icon/content for the calendar picker.
 * @slot calendar-icon-start - Renders the icon/content for the calendar picker for the start input (two inputs).
 * @slot calendar-icon-end - Renders the icon/content for the calendar picker for the end input (two inputs).
 * @slot calendar-icon-open - Renders the icon/content for the picker in open state.
 * @slot calendar-icon-open-start - Renders the icon/content for the picker in open state for the start input (two inputs).
 * @slot calendar-icon-open-end - Renders the icon/content for the picker in open state for the end input (two inputs).
 * @slot actions - Renders content in the action part of the picker in open state.
 * @slot separator - Renders the separator element between the two inputs.
 *
 * @fires igcOpening - Emitted just before the calendar dropdown is shown.
 * @fires igcOpened - Emitted after the calendar dropdown is shown.
 * @fires igcClosing - Emitted just before the calendar dropdown is hidden.
 * @fires igcClosed - Emitted after the calendar dropdown is hidden.
 * @fires igcChange - Emitted when the user modifies and commits the elements's value.
 * @fires igcInput - Emitted when when the user types in the element.
 *
 * @csspart separator - The separator element between the two inputs.
 * @csspart ranges - The wrapper that renders the custom and predefined ranges.
 * @csspart label - The label wrapper that renders content above the target input.
 * @csspart calendar-icon - The calendar icon wrapper for closed state (single input).
 * @csspart calendar-icon-start - The calendar icon wrapper for closed state for the start input (two inputs).
 * @csspart calendar-icon-end - The calendar icon wrapper for closed state for the end input (two inputs).
 * @csspart calendar-icon-open - The calendar icon wrapper for opened state (single input).
 * @csspart calendar-icon-open-start - The calendar icon wrapper for opened state for the start input (two inputs).
 * @csspart calendar-icon-open-end - The calendar icon wrapper for opened state for the end input (two inputs).
 * @csspart clear-icon - The clear icon wrapper (single input).
 * @csspart clear-icon-start - The clear icon wrapper for the start input (two inputs).
 * @csspart clear-icon-end - The clear icon wrapper for the end input (two inputs).
 * @csspart actions - The wrapper for the custom actions area.
 * @csspart clear-icon - The clear icon wrapper.
 * @csspart input - The native input element.
 * @csspart prefix - The prefix wrapper.
 * @csspart suffix - The suffix wrapper.
 * @csspart helper-text - The helper-text wrapper that renders content below the target input.
 * @csspart header - The calendar header element.
 * @csspart header-title - The calendar header title element.
 * @csspart header-date - The calendar header date element.
 * @csspart calendar-content - The calendar content element which contains the views and navigation elements.
 * @csspart navigation - The calendar navigation container element.
 * @csspart months-navigation - The calendar months navigation button element.
 * @csspart years-navigation - The calendar years navigation button element.
 * @csspart years-range - The calendar years range element.
 * @csspart navigation-buttons - The calendar navigation buttons container.
 * @csspart navigation-button - The calendar previous/next navigation button.
 * @csspart days-view-container - The calendar days view container element.
 * @csspart days-view - The calendar days view element.
 * @csspart months-view - The calendar months view element.
 * @csspart years-view - The calendar years view element.
 * @csspart days-row - The calendar days row element.
 * @csspart calendar-label - The calendar week header label element.
 * @csspart week-number - The calendar week number element.
 * @csspart week-number-inner - The calendar week number inner element.
 * @csspart date - The calendar date element.
 * @csspart date-inner - The calendar date inner element.
 * @csspart first - The calendar first selected date element in range selection.
 * @csspart last - The calendar last selected date element in range selection.
 * @csspart inactive - The calendar inactive date element.
 * @csspart hidden - The calendar hidden date element.
 * @csspart weekend - The calendar weekend date element.
 * @csspart range - The calendar range selected element.
 * @csspart special - The calendar special date element.
 * @csspart disabled - The calendar disabled date element.
 * @csspart single - The calendar single selected date element.
 * @csspart preview - The calendar range selection preview date element.
 * @csspart month - The calendar month element.
 * @csspart month-inner - The calendar month inner element.
 * @csspart year - The calendar year element.
 * @csspart year-inner - The calendar year inner element.
 * @csspart selected - The calendar selected state for element(s). Applies to date, month and year elements.
 * @csspart current - The calendar current state for element(s). Applies to date, month and year elements.
 */
export default class IgcDateRangePickerComponent extends IgcDateRangePickerComponent_base {
    static readonly tagName = "igc-date-range-picker";
    static styles: import("lit").CSSResult[];
    static register(): void;
    private static readonly _increment;
    protected readonly _inputId: string;
    private readonly _themes;
    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<DateRangeValue | null>;
    protected readonly _rootClickController: import("../common/controllers/root-click.js").RootClickController;
    private _activeDate;
    private _min;
    private _max;
    private _disabledDates;
    private _dateConstraints;
    private _displayFormat?;
    private _inputFormat?;
    private _placeholder?;
    private _defaultMask;
    private _oldValue;
    private _visibleMonths;
    protected get __validators(): import("../common/validators.js").Validator<IgcDateRangePickerComponent>[];
    private get _isDropDown();
    private get _firstDefinedInRange();
    private _maskedRangeValue;
    private readonly _inputs;
    private readonly _input;
    private readonly _calendar;
    private readonly _prefixes;
    private readonly _startPrefixes;
    private readonly _endPrefixes;
    private readonly _suffixes;
    private readonly _startSuffixes;
    private readonly _endSuffixes;
    private readonly _actions;
    private readonly _headerDateSlotItems;
    set value(value: DateRangeValue | string | null | undefined);
    get value(): DateRangeValue | null;
    /**
     * Renders chips with custom ranges based on the elements of the array.
     */
    customRanges: CustomDateRange[];
    /**
     * Determines whether the calendar is opened in a dropdown or a modal dialog
     * @attr mode
     */
    mode: PickerMode;
    /**
     * Use two inputs to display the date range values. Makes the input editable in dropdown mode.
     * @attr use-two-inputs
     */
    useTwoInputs: boolean;
    /**
     * Whether the control will show chips with predefined ranges.
     * @attr
     */
    usePredefinedRanges: boolean;
    /**
     * The locale settings used to display the value.
     * @attr
     */
    locale: string;
    /** The resource strings of the date range picker. */
    resourceStrings: import("../common/i18n/date-range-picker.resources.js").IgcDateRangePickerResourceStrings;
    /**
     * Makes the control a readonly field.
     * @attr readonly
     */
    readOnly: boolean;
    /**
     * Whether to allow typing in the input.
     * @attr non-editable
     */
    nonEditable: boolean;
    /**
     * Whether the control will have outlined appearance.
     * @attr
     */
    outlined: boolean;
    /**
     * The label of the control (single input).
     * @attr label
     */
    label: string;
    /**
     * The label attribute of the start input.
     * @attr label-start
     */
    labelStart: string;
    /**
     * The label attribute of the end input.
     * @attr label-end
     */
    labelEnd: string;
    /**
     * The placeholder attribute of the control (single input).
     * @attr
     */
    set placeholder(value: string);
    get placeholder(): string;
    /**
     * The placeholder attribute of the start input.
     * @attr placeholder-start
     */
    placeholderStart: string;
    /**
     * The placeholder attribute of the end input.
     * @attr placeholder-end
     */
    placeholderEnd: string;
    /** The prompt symbol to use for unfilled parts of the mask.
     *  @attr
     */
    prompt: string;
    /**
     * Format to display the value in when not editing.
     * Defaults to the input format if not set.
     * @attr display-format
     */
    set displayFormat(value: string);
    get displayFormat(): string;
    /**
     * The date format to apply on the inputs.
     * Defaults to the current locale Intl.DateTimeFormat
     * @attr input-format
     */
    set inputFormat(value: string);
    get inputFormat(): string;
    /**
     * The minimum value required for the date range picker to remain valid.
     * @attr
     */
    set min(value: Date | string | null | undefined);
    get min(): Date | null;
    /**
     * The maximum value required for the date range picker to remain valid.
     * @attr
     */
    set max(value: Date | string | null | undefined);
    get max(): Date | null;
    /** Gets/sets disabled dates. */
    set disabledDates(dates: DateRangeDescriptor[]);
    get disabledDates(): DateRangeDescriptor[];
    /**
     * The number of months displayed in the calendar.
     * @attr visible-months
     */
    get visibleMonths(): number;
    set visibleMonths(value: number);
    /**
     * The orientation of the calendar header.
     * @attr header-orientation
     */
    headerOrientation: ContentOrientation;
    /**
     * The orientation of the multiple months displayed in the calendar's days view.
     *  @attr
     */
    orientation: ContentOrientation;
    /**
     * Determines whether the calendar hides its header.
     * @attr hide-header
     */
    hideHeader: boolean;
    /**
     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
     * By default it is the current date.
     */
    set activeDate(value: Date | string | null | undefined);
    get activeDate(): Date;
    /**
     * Whether to show the number of the week in the calendar.
     * @attr show-week-numbers
     */
    showWeekNumbers: boolean;
    /**
     * Controls the visibility of the dates that do not belong to the current month.
     * @attr hide-outside-days
     */
    hideOutsideDays: boolean;
    /** Gets/sets special dates. */
    specialDates: DateRangeDescriptor[];
    /** Sets the start day of the week for the calendar. */
    weekStart: WeekDays;
    constructor();
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    protected firstUpdated(): void;
    protected formResetCallback(): void;
    /** Clears the input parts of the component of any user input */
    clear(): void;
    /** Selects a date range value in the picker */
    select(value: DateRangeValue | null): void;
    protected _openChange(): void;
    protected _updateDefaultMask(): void;
    protected _updateDateRange(): Promise<void>;
    protected _modeChanged(): Promise<void>;
    protected _handleClosing(): void;
    protected _handleDialogClosing(event: Event): void;
    protected _handleDialogClosed(event: Event): void;
    protected _dialogCancel(): void;
    protected _dialogDone(): void;
    protected _handleInputEvent(event: CustomEvent<Date | null>): void;
    protected _handleInputChangeEvent(event: CustomEvent<Date | null>): void;
    protected _handleFocusOut({ relatedTarget }: FocusEvent): void;
    protected _handleInputClick(event: Event): void;
    protected _onEscapeKey(): Promise<void>;
    protected handleAnchorClick(): Promise<void>;
    protected _handleCalendarChangeEvent(event: CustomEvent<Date>): Promise<void>;
    protected _handleCalendarIconSlotPointerDown(event: PointerEvent): void;
    protected _revertValue(): void;
    /**
     * Sets the active date of the calendar based on current selection, if any,
     * or its current active date and its active day view index to always be the first one.
     */
    private _setCalendarActiveDateAndViewIndex;
    private _getUpdatedDateRange;
    private _delegateInputsValidity;
    private _setDateConstraints;
    private _updateMaskedRangeValue;
    private _setCalendarRangeValues;
    private _swapDates;
    private _shouldCloseCalendarDropdown;
    private _select;
    private _renderClearIcon;
    private _renderCalendarIcon;
    private _renderCalendarSlots;
    private _renderCalendar;
    protected _renderActions(): TemplateResult<1>;
    protected _renderPredefinedRanges(): typeof nothing | TemplateResult<1>;
    protected _renderPicker(id: string): TemplateResult<1>;
    private _renderHelperText;
    protected _renderInput(id: string, picker?: DateRangePickerInput): TemplateResult<1>;
    private _renderInputs;
    private _renderSingleInput;
    protected render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-date-range-picker': IgcDateRangePickerComponent;
    }
}
type DateRangePickerInput = 'start' | 'end';
export {};
