import { type MaterialIcon } from '@3mo/icon';
import { FieldDateTimeBase as FieldDateTimeBase } from './FieldDateTimeBase.js';
import { type FieldDateTimePrecision } from './FieldDateTimePrecision.js';
declare enum FieldDateRangeSelection {
    Start = "start",
    End = "end"
}
/**
 * @element mo-field-date-range
 *
 * @attr selection - The selected date range. Either "start" or "end". Defaults to "start".
 * @attr value - The selected date range.
 *
 * @i18n "Period"
 * @i18n "Start"
 * @i18n "End"
 */
export declare class FieldDateTimeRange extends FieldDateTimeBase<DateTimeRange | undefined> {
    protected get selectedDate(): import("@3mo/date-time/DateTime.js").DateTime | undefined;
    label: string;
    selection: FieldDateRangeSelection;
    value?: DateTimeRange;
    protected resetNavigationDate(): void;
    static get styles(): import("@a11d/lit").CSSResult;
    protected calendarIconButtonIcon: MaterialIcon;
    protected get placeholder(): string;
    protected get calendarValue(): import("@3mo/date-time/DateTimeRange.js").DateTimeRange | undefined;
    protected get popoverContentTemplate(): import("lit-html").HTMLTemplateResult;
    protected get popoverToolbarTemplate(): import("lit-html").HTMLTemplateResult;
    private get startEndTabBarTemplate();
    handleSelectedDateChange(date: DateTime, precision: FieldDateTimePrecision): void;
    protected valueToInputValue(value: DateTimeRange | undefined): string;
    protected inputValueToValue(value: string): import("@3mo/date-time/DateTimeRange.js").DateTimeRange | undefined;
}
declare global {
    interface HTMLElementTagNameMap {
        'mo-field-date-time-range': FieldDateTimeRange;
    }
}
export {};
//# sourceMappingURL=FieldDateTimeRange.d.ts.map