/**
 * TyDatePicker Web Component
 * PORTED FROM: cljs/ty/components/date_picker.cljs
 *
 * A date picker component with read-only input and calendar dropdown.
 * Supports date-only and date+time modes with smart time input.
 *
 * Architecture:
 * - Read-only input stub (displays formatted date)
 * - Calendar dropdown (modal dialog with ty-calendar)
 * - Optional time input (with smart digit navigation)
 * - Form participation via ElementInternals
 * - UTC output, local display
 *
 * Features:
 * - Date selection with calendar dropdown
 * - Optional time input with smart navigation
 * - Form integration (works with FormData)
 * - UTC value output for server communication
 * - Localized display formatting (Intl API)
 * - Clearable with clear button
 * - Keyboard navigation (Escape to close)
 * - Outside click handling
 *
 * @example
 * ```html
 * <!-- Basic date picker -->
 * <ty-date-picker
 *   label="Select Date"
 *   placeholder="Choose a date">
 * </ty-date-picker>
 *
 * <!-- With time -->
 * <ty-date-picker
 *   with-time="true"
 *   label="Select Date & Time">
 * </ty-date-picker>
 *
 * <!-- Form integration -->
 * <form>
 *   <ty-date-picker name="booking-date"></ty-date-picker>
 *   <button type="submit">Submit</button>
 * </form>
 *
 * <!-- Pre-filled value (UTC) -->
 * <ty-date-picker value="2024-09-21T08:30:00.000Z"></ty-date-picker>
 * ```
 */
import { TyComponent } from '../base/ty-component.js';
import type { PropertyChange } from '../utils/property-manager.js';
/**
 * Date components (internal representation in local timezone)
 */
interface DateComponents {
    year?: number;
    month?: number;
    day?: number;
    hour?: number;
    minute?: number;
}
/**
 * Internal date picker state
 */
interface DatePickerState extends DateComponents {
    withTime: boolean;
    open: boolean;
}
/**
 * Date picker sizes
 */
type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
 * Date picker flavors (visual styles)
 */
type DatePickerFlavor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning';
/**
 * Date format types
 */
type DateFormatType = 'short' | 'medium' | 'long' | 'full';
/**
 * Change event detail
 */
export interface DatePickerChangeDetail {
    value: string | null;
    localValue: string | null;
    milliseconds: number | null;
    formatted: string | null;
    source: 'selection' | 'time-change' | 'clear' | 'external';
}
export declare class TyDatePicker extends TyComponent<DatePickerState> {
    protected static properties: {
        size: {
            type: "string";
            visual: boolean;
            default: string;
            validate: (v: any) => boolean;
            coerce: (v: any) => any;
        };
        flavor: {
            type: "string";
            visual: boolean;
            default: string;
        };
        label: {
            type: "string";
            visual: boolean;
            default: string;
        };
        placeholder: {
            type: "string";
            visual: boolean;
            default: string;
        };
        name: {
            type: "string";
            visual: boolean;
            default: string;
        };
        required: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        disabled: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
        clearable: {
            type: "boolean";
            visual: boolean;
            default: boolean;
            aliases: {
                'not-clearable': boolean;
            };
        };
        format: {
            type: "string";
            visual: boolean;
            default: string;
            validate: (v: any) => boolean;
            coerce: (v: any) => any;
        };
        locale: {
            type: "string";
            visual: boolean;
            default: string;
        };
        value: {
            type: "string";
            visual: boolean;
            formValue: boolean;
            emitChange: boolean;
            default: null;
        };
        'with-time': {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
    };
    private _state;
    private _clickListener?;
    private _keydownListener?;
    private _dialogClickListener?;
    private _closeTimestamp;
    private _timeInput?;
    private _localeObserver?;
    /**
     * Form-associated custom element
     */
    static formAssociated: boolean;
    constructor();
    /**
     * Called when component connects to DOM
     * TyComponent handles property capture automatically
     */
    protected onConnect(): void;
    /**
     * Called when component disconnects from DOM
     */
    protected onDisconnect(): void;
    /**
     * Called when properties change
     * Handle state updates BEFORE render
     */
    protected onPropertiesChanged(changes: PropertyChange[]): void;
    /**
     * Get form value - returns UTC string from current state
     * TyComponent calls this automatically when value property changes
     */
    protected getFormValue(): FormDataEntryValue | null;
    /**
     * Extract current date components from internal state
     */
    private getComponents;
    /**
     * Whether internal state has a complete date
     */
    private hasDate;
    /**
     * Format current components for display using Intl API
     */
    private getFormattedValue;
    /**
     * Initialize component state from attributes
     *
     * PORTED FROM: init-component-state! in date_picker.cljs
     */
    private initializeState;
    /**
     * Update internal state
     *
     * PORTED FROM: update-component-state! in date_picker.cljs
     */
    private updateState;
    /**
     * Sync form value with current state
     * Compares before setting to prevent circular triggers
     */
    private syncFormValue;
    /**
     * Handle time input changes from TimeInput class
     *
     * PORTED FROM: handle-time-change! in date_picker.cljs
     */
    handleTimeInputChange(hour: number, minute: number): void;
    /**
     * Emit change event
     *
     * PORTED FROM: emit-change-event! in date_picker.cljs
     */
    private emitChangeEvent;
    get size(): DatePickerSize;
    set size(v: DatePickerSize);
    get flavor(): DatePickerFlavor;
    set flavor(v: DatePickerFlavor);
    get label(): string;
    set label(v: string);
    get placeholder(): string;
    set placeholder(v: string);
    get name(): string;
    set name(v: string);
    get format(): DateFormatType;
    set format(v: DateFormatType);
    get locale(): string;
    set locale(v: string);
    get required(): boolean;
    set required(v: boolean);
    get disabled(): boolean;
    set disabled(v: boolean);
    get clearable(): boolean;
    set clearable(v: boolean);
    get withTime(): boolean;
    set withTime(v: boolean);
    /**
     * Get current value (UTC ISO string)
     */
    get value(): string | null;
    /**
     * Set value (UTC ISO string, Date object, or null)
     *
     * When set to null/undefined/empty string, the attribute is removed.
     * When set to a valid date, the attribute is set to ISO UTC string.
     */
    set value(val: string | Date | null);
    /**
     * Build CSS classes for the stub element
     *
     * PORTED FROM: build-stub-classes in date_picker.cljs
     */
    private buildStubClasses;
    /**
     * Render the date picker stub (input display)
     *
     * PORTED FROM: render-date-picker-stub in date_picker.cljs
     */
    private renderStub;
    /**
     * Create time input element
     *
     * PORTED FROM: create-time-input in date_picker.cljs
     */
    private createTimeInputElement;
    /**
     * Render time input section
     */
    private renderTimeSection;
    /**
     * Render calendar dropdown with dialog
     *
     * PORTED FROM: render-calendar-dropdown in date_picker.cljs
     */
    private renderCalendarDropdown;
    /**
     * Render native date input for mobile touch devices.
     * Uses <input type="date"> or <input type="datetime-local"> when with-time.
     * Reuses .date-picker-stub styling and existing event/state infrastructure.
     */
    private renderNativeInput;
    /**
     * Calculate calendar position
     *
     * PORTED FROM: calculate-calendar-position! in date_picker.cljs
     */
    private calculateCalendarPosition;
    /**
     * Render container structure
     *
     * PORTED FROM: render-container-structure in date_picker.cljs
     */
    private renderContainer;
    /**
     * Main render method
     *
     * PORTED FROM: render! in date_picker.cljs
     */
    protected render(): void;
    /**
     * Update display without destroying DOM (for open dialog)
     *
     * PORTED FROM: update-display! in date_picker.cljs
     */
    private updateDisplay;
    /**
     * Setup document-level event listeners
     */
    private setupEventListeners;
    private handleStubClick;
    /**
     * Clear the date value, sync state, emit event, and re-render.
     */
    private clearValue;
    private handleClearClick;
    /**
     * Handle calendar date selection
     *
     * PORTED FROM: handle-calendar-change! in date_picker.cljs
     */
    private handleCalendarChange;
    /**
     * Handle dialog backdrop clicks
     *
     * PORTED FROM: handle-dialog-click! in date_picker.cljs
     */
    private handleDialogClick;
    /**
     * Handle clicks outside the date picker
     *
     * PORTED FROM: handle-outside-click! in date_picker.cljs
     */
    private handleOutsideClick;
    /**
     * Handle Escape key press
     *
     * PORTED FROM: handle-escape-key! in date_picker.cljs
     */
    private handleEscapeKey;
    /**
     * Open calendar dropdown
     *
     * PORTED FROM: open-dropdown! in date_picker.cljs
     */
    private openDropdown;
    /**
     * Close calendar dropdown
     *
     * PORTED FROM: close-dropdown! in date_picker.cljs
     */
    private closeDropdown;
    /**
     * Clean up event listeners and state
     *
     * PORTED FROM: cleanup! in date_picker.cljs
     */
    private cleanup;
}
export {};
//# sourceMappingURL=date-picker.d.ts.map