import { LitElement, TemplateResult } from 'lit';
import { DateRange } from './internals/DatePickerUtils.js';
import './internals/DatePickerCalendar.js';
import '../../md/dialog/ui-dialog.js';
import '../../md/button/ui-button.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/icons/ui-icon.js';
export interface ModalDatePickerChangeEvent {
    range: DateRange;
    formattedRange: {
        start: string | null;
        end: string | null;
    };
}
/**
 * A modal date picker for selecting date ranges.
 * Extends full-screen and is ideal for date range selection like flight bookings.
 *
 * ## Features
 * - Full-screen modal interface
 * - Date range selection with visual feedback
 * - Calendar and input mode toggle
 * - Min/max date constraints
 * - Disabled dates support
 * - Accessible design with proper ARIA attributes and semantic HTML
 * - Real-time date range validation
 *
 * ## Events
 *
 * ### `date-range-change`
 * Fired when a date range is selected or changed.
 *
 * **Detail:**
 * ```typescript
 * {
 *   range: DateRange,
 *   formattedRange: {
 *     start: string | null,
 *     end: string | null
 *   }
 * }
 * ```
 *
 * ### `close`
 * Fired when the modal is closed.
 *
 * **Detail:**
 * ```typescript
 * {
 *   confirmed: boolean,
 *   range: DateRange | null
 * }
 * ```
 *
 * ## Usage
 *
 * ### Basic usage
 * ```html
 * <ui-date-picker-modal
 *   .open=${true}
 *   .selectedRange=${{ start: new Date(), end: null }}
 *   @date-range-change=${this.handleRangeChange}
 *   @close=${this.handleClose}
 * ></ui-date-picker-modal>
 * ```
 *
 * ### Custom labels and constraints
 * ```html
 * <ui-date-picker-modal
 *   title="Select travel dates"
 *   startLabel="Check-in"
 *   endLabel="Check-out"
 *   .minDate=${new Date()}
 *   .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
 *   .disabledDates=${[new Date('2024-12-25')]}
 * ></ui-date-picker-modal>
 * ```
 *
 * ### With mode toggle disabled
 * ```html
 * <ui-date-picker-modal
 *   .showModeToggle=${false}
 * ></ui-date-picker-modal>
 * ```
 */
export declare class UiDatePickerModal extends LitElement {
    static styles: import("lit").CSSResult;
    /**
     * Whether the modal is open
     */
    accessor open: boolean;
    /**
     * The modal title
     */
    accessor title: string;
    /**
     * Label for the start date
     */
    accessor startLabel: string;
    /**
     * Label for the end date
     */
    accessor endLabel: string;
    /**
     * The selected date range
     */
    accessor selectedRange: DateRange | null;
    /**
     * Minimum selectable date
     */
    accessor minDate: Date | undefined;
    /**
     * Maximum selectable date
     */
    accessor maxDate: Date | undefined;
    /**
     * Array of disabled dates
     */
    accessor disabledDates: Date[] | undefined;
    /**
     * Locale for date formatting
     */
    accessor locale: string | undefined;
    /**
     * Whether to show edit/calendar toggle button
     */
    accessor showModeToggle: boolean;
    private accessor isInputMode;
    constructor();
    private handleRangeSelect;
    private handleCancel;
    private handleConfirm;
    private handleModeToggle;
    private dispatchChangeEvent;
    private dispatchCloseEvent;
    private renderHeader;
    private renderDateDisplay;
    private renderCalendar;
    private renderInputMode;
    private renderContent;
    private renderActions;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'ui-date-picker-modal': UiDatePickerModal;
    }
    interface HTMLElementEventMap {
        'date-range-change': CustomEvent<ModalDatePickerChangeEvent>;
        'close': CustomEvent<{
            confirmed: boolean;
            range: DateRange | null;
        }>;
    }
}
//# sourceMappingURL=ui-date-picker-modal.d.ts.map