import { IClearable } from '../../../Behaviors/Clearable'; import { type IDropDownable } from '../../../Behaviors/DropDownable'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { TextAlignment } from '../../../Types/TextAlignment'; import { TimeMarkerHandler } from '../../../Types/TimeMarkerHandler'; import { ITimeSpan } from '../../../Types/TimeSpan'; import { InputBaseElement } from '../Abstracts/InputBase'; import { ITimeBoxElementProps } from './ITimeBoxElementProps'; declare const TimeBoxElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable) & (abstract new (...args: Array) => import("../../../Behaviors/Localeable").ILocaleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/DropDownable").IDropDownableProps & IDropDownable) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof InputBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Time Box - A sophisticated time input control with dropdown time selection and flexible time formatting. * * @description * The Time Box component provides an intuitive interface for selecting and inputting time values with support * for various time formats, locales, and input methods. It features a text input field combined with a dropdown * time picker that displays selectable time slots. The component handles time parsing and validation, supports * 12/24-hour formats, customizable time intervals, minimum and maximum time constraints, and keyboard navigation. * Features include internationalization support, custom time markers, flexible formatting options, and comprehensive * accessibility features. Ideal for scheduling applications, appointment booking, form inputs, and any interface * requiring precise time selection. * * @name Time Box * @element mosaik-timebox * @category Inputs * * @slot prefix - Content placed before the input field. * @slot suffix - Content placed after the input field. * * @csspart focusRing - The focus ring indicator. * @csspart prefix - The prefix content container. * @csspart inner - The inner container wrapper. * @csspart label - The floating label element. * @csspart input - The time input field. * @csspart suffix - The suffix content container. * @csspart timeButton - The time dropdown toggle button. * @csspart portal - The portal container for the dropdown. * @csspart popup - The floating time picker container. * @csspart menu - The time selection menu. * @csspart timeSlot - Individual time slot items in the dropdown. * * @cssprop {Color} --time-box-background-color - The background color. * @cssprop {Color} --time-box-border-color - The border color. * @cssprop {String} --time-box-border-radius - The border radius. * @cssprop {String} --time-box-border-style - The border style. * @cssprop {String} --time-box-border-width - The border width. * @cssprop {String} --time-box-font-family - The font family. * @cssprop {String} --time-box-font-size - The font size. * @cssprop {String} --time-box-font-weight - The font weight. * @cssprop {Color} --time-box-foreground-color - The foreground color. * @cssprop {String} --time-box-gap - The gap between elements. * @cssprop {String} --time-box-height - The height. * @cssprop {String} --time-box-padding-bottom - The padding bottom. * @cssprop {String} --time-box-padding-left - The padding left. * @cssprop {String} --time-box-padding-right - The padding right. * @cssprop {String} --time-box-padding-top - The padding top. * @cssprop {String} --time-box-shadow - The shadow. * @cssprop {String} --time-box-transition-duration - The transition duration. * @cssprop {String} --time-box-width - The width. * * @dependency mosaik-focus-ring - Used for focus indication. * @dependency mosaik-button - Used for the time dropdown button. * @dependency mosaik-portal - Used for dropdown positioning. * @dependency mosaik-floating - Used for dropdown positioning. * @dependency mosaik-menu - Used for time selection interface. * @dependency mosaik-menu-item - Used for individual time slots. * * @fires cleared {ClearedEvent} - Fired when the value is cleared. * * @keyhandle UpArrow - Selects the previous time unit. * @keyhandle DownArrow - Selects the next time unit. * * @example * ```html * * * ``` * * @public */ export declare class TimeBoxElement extends TimeBoxElement_base implements ITimeBoxElementProps, IDropDownable, IInvalidable, IClearable, ISlottable { private readonly _clickOutsideController; private readonly _keyboardController; private readonly _projectionController; private _inputElement; private _floatingElement; private _interval; private _value; private _readonly; private _required; private _autofocus; private _name; private _placeholder; private _autocomplete; private _isEditable; private _blackoutTimes; private _specialTimes; private _minTime; private _maxTime; private _markerHandler; private _textAlign; /** * Constructs a new instance of the `TimeBoxElement` class. * * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `value` property. * * @public * @override */ get value(): ITimeSpan | null; set value(value: ITimeSpan | null); /** * Gets or sets the `readonly` property. * * @public * @attr */ get readonly(): boolean; set readonly(value: boolean); /** * Gets or sets the `required` property. * * @public * @attr */ get required(): boolean; set required(value: boolean); /** * Gets or sets the `autofocus` property. * * @public * @override */ get autofocus(): boolean; set autofocus(value: boolean); /** * Gets or sets the `name` property. * * @public * @attr */ get name(): string; set name(value: string); /** * Gets or sets the `placeholder` property. * * @public * @attr */ get placeholder(): string; set placeholder(value: string); /** * Gets or sets the `autocomplete` property. * * @public * @attr */ get autocomplete(): boolean; set autocomplete(value: boolean); /** * Gets or sets the `isEditable` property. * * @public * @attr */ get isEditable(): boolean; set isEditable(value: boolean); /** * Gets or sets the `interval` property. * * @public * @attr */ get interval(): number; set interval(value: number); /** * Gets or sets the `blackoutTimes` property. * * @public * @attr */ get blackoutTimes(): Array; set blackoutTimes(value: Array); /** * Gets or sets the `specialTimes` property. * * @public * @attr */ get specialTimes(): Array; set specialTimes(value: Array); /** * Gets or sets the `minTime` property. * * @public * @attr */ get minTime(): ITimeSpan | null; set minTime(value: ITimeSpan | null); /** * Gets or sets the `maxTime` property. * * @public * @attr */ get maxTime(): ITimeSpan | null; set maxTime(value: ITimeSpan | null); /** * Determines the text alignment of the component. * * @public * @attr */ get textAlign(): TextAlignment; set textAlign(value: TextAlignment); /** * A handler that gets date and returns null or a tuple with circled marker data. See `TimeMarkerData`. * * @public * @attr */ get markerHandler(): TimeMarkerHandler; set markerHandler(value: TimeMarkerHandler); /** * Determines whether the element has a prefix or not. * The Prefix is a slot that is displayed before the input. * * @private * @readonly * @attr */ get hasPrefix(): boolean; /** * Determines whether the element has a suffix or not. * The Suffix is a slot that is displayed after the input. * * @private * @readonly * @attr */ get hasSuffix(): boolean; /** * @public * @override */ connectedCallback(): void; /** * Selects the next time span in the list. * * @public */ selectNext(): void; /** * Selects the previous time span in the list. * * @public */ selectPrevious(): void; /** * Sets focus on the input. * * @public * @override */ focus(): void; /** * Removes keyboard focus from the input. * * @public * @override */ blur(): void; /** * Clears the value of the element but not the validation. * * @public * @override */ clear(force?: boolean): boolean; /** * Resets the value, all kinds of validation and errors. * * @public * @override */ reset(): void; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * @protected * @template */ onChange(event: Event): void; /** * @protected * @template * @override */ onInput(event: InputEvent): void; /** * @protected * @template * @override */ onFocus(event: FocusEvent): void; /** * @protected * @template * @override */ onBlur(event: FocusEvent): void; /** * @protected * @template */ onKeyDown(event: KeyboardEvent): void; /** * @private * @template */ setTimeSpan(value: ITimeSpan): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; } /** * @public */ export declare namespace TimeBoxElement { type Props = ITimeBoxElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-timebox': TimeBoxElement; } } export {}; //# sourceMappingURL=TimeBoxElement.d.ts.map