import { LitElement, TemplateResult } from 'lit';
import { DateRange } from './internals/DatePickerUtils.js';
import '../../md/dialog/ui-dialog.js';
import '../../md/button/ui-button.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/text-field/ui-outlined-text-field.js';
import '../../md/icons/ui-icon.js';
export interface ModalInputDatePickerChangeEvent {
    range: DateRange;
    formattedRange: {
        start: string | null;
        end: string | null;
    };
}
/**
 * A modal date input picker for manual date entry using keyboard.
 * Ideal for compact layouts and precise date entry. Supports both single
 * date selection and date range selection modes.
 *
 * ## Features
 * - Manual date entry with keyboard input
 * - Single date and date range modes
 * - Input validation with error messages
 * - Min/max date constraints
 * - Multiple date format support (MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD)
 * - Accessible design with proper ARIA labels and semantic HTML
 * - Real-time validation feedback
 *
 * ## Events
 *
 * ### `date-input-change`
 * Fired when a valid date is entered in the input fields.
 *
 * **Detail for range mode:**
 * ```typescript
 * {
 *   range: DateRange,
 *   formattedRange: {
 *     start: string | null,
 *     end: string | null
 *   }
 * }
 * ```
 *
 * **Detail for single date mode:**
 * ```typescript
 * {
 *   date: Date,
 *   formattedDate: string
 * }
 * ```
 *
 * ### `modal-input-close`
 * Fired when the modal is closed, either by confirmation or cancellation.
 *
 * **Detail:**
 * ```typescript
 * {
 *   confirmed: boolean,
 *   date?: Date | null,     // Available in single date mode
 *   range?: DateRange | null // Available in range mode
 * }
 * ```
 *
 * ## Usage
 *
 * ### Range mode (default)
 * ```html
 * <ui-date-picker-modal-input
 *   .open=${true}
 *   .selectedRange=${{ start: new Date(), end: null }}
 *   @date-input-change=${this.handleRangeChange}
 *   @modal-input-close=${this.handleClose}
 * ></ui-date-picker-modal-input>
 * ```
 *
 * ### Single date mode
 * ```html
 * <ui-date-picker-modal-input
 *   .rangeMode=${false}
 *   .selectedDate=${new Date()}
 *   @date-input-change=${this.handleDateChange}
 *   @modal-input-close=${this.handleClose}
 * ></ui-date-picker-modal-input>
 * ```
 *
 * ### With constraints
 * ```html
 * <ui-date-picker-modal-input
 *   .minDate=${new Date('2024-01-01')}
 *   .maxDate=${new Date('2024-12-31')}
 *   .locale=${'en-US'}
 * ></ui-date-picker-modal-input>
 * ```
 */
export declare class UiDatePickerModalInput extends LitElement {
    static styles: import("lit").CSSResult;
    /**
     * Whether the modal is open
     */
    accessor open: boolean;
    /**
     * The modal title
     */
    accessor title: string;
    /**
     * Whether to use range mode (two date inputs) or single date mode
     */
    accessor rangeMode: boolean;
    /**
     * Label for the start date (or single date)
     */
    accessor startLabel: string;
    /**
     * Label for the end date (only used in range mode)
     */
    accessor endLabel: string;
    /**
     * Placeholder for date inputs
     */
    accessor placeholder: string;
    /**
     * The selected date (single mode)
     */
    accessor selectedDate: Date | null;
    /**
     * The selected date range (range mode)
     */
    accessor selectedRange: DateRange | null;
    /**
     * Minimum selectable date
     */
    accessor minDate: Date | undefined;
    /**
     * Maximum selectable date
     */
    accessor maxDate: Date | undefined;
    /**
     * Locale for date formatting
     */
    accessor locale: string | undefined;
    private accessor startInput;
    private accessor endInput;
    private accessor startError;
    private accessor endError;
    constructor();
    connectedCallback(): void;
    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
    private updateInputValues;
    private validateDate;
    private handleStartInput;
    private handleEndInput;
    private handleCancel;
    private handleConfirm;
    private dispatchChangeEvent;
    private dispatchCloseEvent;
    private renderHeader;
    private renderInputs;
    private renderActions;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'ui-date-picker-modal-input': UiDatePickerModalInput;
    }
    interface HTMLElementEventMap {
        'date-input-change': CustomEvent<ModalInputDatePickerChangeEvent | {
            date: Date;
            formattedDate: string;
        }>;
        'modal-input-close': CustomEvent<{
            confirmed: boolean;
            date?: Date | null;
            range?: DateRange | null;
        }>;
    }
}
//# sourceMappingURL=ui-date-picker-modal-input.d.ts.map