import { PropertyValues } from 'lit'; import { DDSFormElement } from "../../base/index.js"; import { default as DaikinInputGroup } from "../input-group/daikin-input-group.js"; /** * Represents the hour and minute parts of a time value. * The `hour` and `minute` values can be placeholder strings ('hh', 'mm') or numeric strings representing time values. */ type TimeParts = { hour: string; minute: string; }; /** * Type for time input item: hour or minute. */ type TimeItem = "hour" | "minute"; /** * Converts a 12-hour time string and AM/PM to 24-hour format (e.g. "02:30", "PM" => "14:30"). */ export declare function to24HourFormat(time: string, meridiem: "AM" | "PM"): string; /** * Converts a 24-hour time string to 12-hour format and AM/PM (e.g. "14:30" => { time: "02:30", meridiem: "PM" }). */ export declare function from24HourFormat(time: string): { time: string; meridiem: "AM" | "PM"; }; /** * Validates if a time string matches the 24-hour format. */ export declare function isValidValueTime(str: string): boolean; /** * Checks if a time is out of the given range. */ export declare function isTimeOutOfRange(time: string, min: string, max: string): boolean; /** * Formats a time object as a UI display string (HH:MM). * The hour/minute values do not have to be valid. */ export declare function formatPartsForUI({ hour, minute, }: Readonly): string; /** * Parses a UI time string (HH:MM) and returns an hour/minute object. * The result is not guaranteed to be valid. */ export declare function parsePartsFromUIValue(value: string): TimeParts; /** * Attempts to parse a valid time string from a UI value (HH:MM). * Returns null if invalid. */ export declare function tryParseTimeFromUIValue(value: string): string | null; /** * Formats a valid time string as a UI display string (HH:MM). */ export declare function formatTimeForUI(timeString: string): string; /** * Determines whether the current selection is on the hour or minute part. * Returns null if no match. */ export declare function getTimeItemInSelection(selectionStart: number, selectionEnd: number): TimeItem | null; /** * Calculate digit key input, returns new time parts and whether input is complete. * @returns { parts, done } or null */ export declare function calcDigitInput(parts: Readonly, item: TimeItem, digit: string, hourDigitIndex: number): { parts: TimeParts; done: boolean; } | null; /** * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format. * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format. * * @attr form - The form the component belongs to. * @attr name - The form name, submitted as a name/value pair when submitting the form. * @attr value - The initial form value, submitted as a name/value pair when submitting the form. * @prop {String} formAttr - The form the component belongs to. * @prop {String} name - The form name, submitted as a name/value pair when submitting the form. * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. * * @fires change - A custom event emitted when the value of component changed. Validation errors will not trigger this event. * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when user type value to input area and change the value of component. change dropdown or validation errors will not trigger this event. * * @example * * ```js * import "@daikin-oss/design-system-web-components/components/time-picker/index.js"; * ``` * * ```html * * ``` */ export declare class DaikinTimePicker extends DDSFormElement { static readonly styles: import('lit').CSSResult; /** * Placeholder text. * * @default "hh:mm" */ placeholder: string; /** * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state. * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format. * * @default "00:00" */ min: string; /** * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state. * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format. * * @default "23:59" */ max: string; /** * Whether the field is disabled. Controlled by daikin-input-group. */ disabled: boolean; /** * Whether the field is required. Controlled by daikin-input-group. */ required: boolean; /** * Whether to show error state. Controlled by daikin-input-group. Ignored if disabled. */ error: boolean; /** * Minutes step. Specify the step size for the minutes when using the up and down arrow keys. * * @default "1" */ minutesStep: string; private _label; private _inputValue; private _currentSelection; private _meridiem; /** * Returns the value to be displayed in the input field. * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display. * - If the current input value is not valid or meridiem is empty, returns the raw input value. * - Otherwise, returns null. */ private get _value(); private _timeInputElement; /** * Tracks the current digit index for hour input (0: first digit, 1: second digit). */ private _hourDigitIndex; /** * Returns the value to display in the input field (from _inputValue state). */ private get _timeValue(); /** * Syncs the AM/PM value with the current value (24-hour) if value changes externally. */ private _syncMeridiemWithValue; private get _min(); private get _max(); private _convertZeroHourToTwelve; private _handleFocusIn; private _handleFocusOut; private _handleChange; private _handleMouseUp; private _handleDigitInput; private _handleKeyDown; private _updateTimeByOffset; private _handleBeforeInput; /** * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format. */ private _updateValue; private _updateInputSelection; private _updateSelection; private _handleDropdownChange; /** * Focuses on the inner time input. * @param options focus options */ focus(options?: FocusOptions): void; render(): import('lit-html').TemplateResult<1>; protected willUpdate(changedProperties: PropertyValues): void; protected updated(changedProperties: PropertyValues): void; /** * This method is used by `daikin-input-group` to reflect it's attributes to this component. * @private */ reflectInputGroup(inputGroup: DaikinInputGroup): void; } declare global { interface HTMLElementTagNameMap { "daikin-time-picker": DaikinTimePicker; } } export {};