import type { EventEmitter } from '../../stencil-public-runtime'; import type { LocaleProp } from '../../utils/locale'; import type { TimePickerChangeDetail } from './mud-time-picker.types'; /** * Time picker — an hour column and a minute column, the dropdown of * `mud-time-input` (Figma Time frame 13807:8471, dropdown 13810:9450). * * The selected value of the column being edited is solid (`.day-cell` Active); * the other column's selected value is tinted (`.day-cell` Middle). Picking an * hour moves on to the minutes while no minute is chosen, and stays on the hour * when one is; picking a minute completes the time and fires `mudChange`. * * Keyboard: each column is a listbox with one tab stop. Up / Down move within a * column, Home / End jump to its ends, Left / Right switch columns, Enter or * Space picks the focused option. * * @element mud-time-picker */ export declare class MudTimePicker { /** Selected time, `HH:MM` (24-hour). Updated when a time is completed. */ value?: string; /** Earliest selectable time, `HH:MM` inclusive. */ min?: string; /** Latest selectable time, `HH:MM` inclusive. */ max?: string; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Accessible name of the picker. Overrides the `locale`'s copy when set to a non-empty string. * @default 'Selectează ora' (ro-MD) */ label?: string; /** * Accessible name of the hour column. Overrides the `locale`'s copy when set to a non-empty string. * @default 'Ore' (ro-MD) */ hoursLabel?: string; /** * Accessible name of the minute column. Overrides the `locale`'s copy when set to a non-empty string. * @default 'Minute' (ro-MD) */ minutesLabel?: string; private hours; private minutes; private activeColumn; /** The option of each column that holds the tab stop. */ private focusedHour; private focusedMinute; host: HTMLMudTimePickerElement; /** Fires when a time is complete — a minute is picked while an hour is set. */ mudChange: EventEmitter; /** Column whose tab-stop option takes focus after the next render. */ private focusColumnOnRender; private stopLang?; syncFromValue(): void; connectedCallback(): void; disconnectedCallback(): void; componentWillLoad(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; componentDidLoad(): void; componentDidRender(): void; /** Keyboard in a column; bound on each listbox, so the option is the event's first target. */ private handleKeyDown; private options; /** Whether an hour has any selectable minute, or a minute is selectable in the chosen hour. */ private isDisabled; /** The next enabled option from `from` in `direction`, or `from` when there is none. */ private nextEnabled; /** Option that holds the column's tab stop: the focused one, else the selected, else the first enabled. */ private tabStop; /** * Make `column` the one being edited and focus its tab stop after the next * render. The tab stop is fixed here, in the event handler, so the focus that * lands during `componentDidRender` changes no state mid-render. */ private editColumn; private moveFocus; private pick; private columnElement; /** Scroll offset that puts option `n` at the top of its column, or `null` when there is none. */ private topOffset; private renderColumn; render(): any; }