import { IClearable } from '../../../Behaviors/Clearable'; import { type IDropDownable } from '../../../Behaviors/DropDownable'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { KeyboardController } from '../../../Controllers/KeyboardController'; import type { IDateChangedEventDetail } from '../../../events'; import { CalendarMarkerHandler } from '../../../Types/CalendarMarkerHandler'; import { CalendarView } from '../../../Types/CalendarView'; import { DayOfWeek } from '../../../Types/DayOfWeek'; import { RangeSelectionMode } from '../../../Types/RangeSelectionMode'; import { TextAlignment } from '../../../Types/TextAlignment'; import { InputBaseElement } from '../Abstracts/InputBase'; import type { IDateBoxElementProps } from './IDateBoxElementProps'; declare const DateBoxElement_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; /** * Date Box - A comprehensive date input control with calendar dropdown and flexible date selection capabilities. * * @description * The Date Box component provides an intuitive interface for date selection and input, combining text input * with a visual calendar dropdown. It supports multiple input methods including direct text entry, calendar * selection, and keyboard navigation. Features include internationalization support, date formatting and parsing, * range selection modes, minimum and maximum date constraints, calendar markers for special dates, and extensive * customization options. The component handles various date formats, locales, and provides comprehensive validation * and accessibility features. Perfect for forms, scheduling interfaces, and any application requiring date input. * * @name Date Box * @element mosaik-datebox * @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 date input field. * @csspart suffix - The suffix content container. * @csspart calendarButton - The calendar dropdown toggle button. * @csspart portal - The portal container for the dropdown. * @csspart popup - The floating calendar container. * @csspart calendar - The calendar component. * * @cssprop {Color} --date-box-background-color - The background color. * @cssprop {Color} --date-box-border-color - The border color. * @cssprop {String} --date-box-border-radius - The border radius. * @cssprop {String} --date-box-border-style - The border style. * @cssprop {String} --date-box-border-width - The border width. * @cssprop {String} --date-box-font-family - The font family. * @cssprop {String} --date-box-font-size - The font size. * @cssprop {String} --date-box-font-weight - The font weight. * @cssprop {Color} --date-box-foreground-color - The foreground color. * @cssprop {String} --date-box-gap - The gap between elements. * @cssprop {String} --date-box-height - The height. * @cssprop {String} --date-box-padding-bottom - The padding bottom. * @cssprop {String} --date-box-padding-left - The padding left. * @cssprop {String} --date-box-padding-right - The padding right. * @cssprop {String} --date-box-padding-top - The padding top. * @cssprop {String} --date-box-shadow - The shadow. * @cssprop {String} --date-box-transition-duration - The transition duration. * @cssprop {String} --date-box-width - The width. * * @dependency mosaik-focus-ring - Used for focus indication. * @dependency mosaik-button - Used for the calendar dropdown button. * @dependency mosaik-portal - Used for dropdown positioning. * @dependency mosaik-floating - Used for dropdown positioning. * @dependency mosaik-calendar - Used for date selection interface. * * @keyhandle Space - Toggles the dropdown. * @keyhandle Enter - Toggles the dropdown. * @keyhandle Escape - Closes the dropdown if it is open, otherwise clears the value. * @keyhandle Tab - Closes the dropdown. * * @fires cleared {ClearedEvent} - Fired when the input value is cleared. * * @example * Basic date box: * ```html * * * ``` * * @example * Date box with min/max range constraint: * ```html * * * ``` * * @example * Date box with clearable option and primary variant: * ```html * * * ``` * * @public */ export declare class DateBoxElement extends DateBoxElement_base implements IDateBoxElementProps, IDropDownable, IInvalidable, IClearable, ISlottable { private _inputElement; private readonly _clickOutsideController; private readonly _keyboardController; private readonly _projectionController; private _value; private _displayValue; private _readonly; private _required; private _autofocus; private _name; private _placeholder; private _autocomplete; private _values; private _view; private _selectionMode; private _blackoutDates; private _specialDates; private _minDate; private _maxDate; private _firstDayOfWeek; private _isTodayHighlighted; private _isWeekendHighlighted; private _showWeekNumbers; private _markerHandler; private _showAdjacent; private _format; private _invalidInput; private _textAlign; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Returns the `displayDate` property. * The `displayDate` property represents the initial date to display in the calendar. * * @public */ get displayDate(): Date | null; set displayDate(value: Date | null); /** * Returns the `displayDateStart` property. * The `displayDateStart` property represents the start date to display in the calendar. * * @public */ get displayDateStart(): Date | null; set displayDateStart(value: Date | null); /** * Returns the `displayDateEnd` property. * The `displayDateEnd` property represents the end date to display in the calendar. * * @public */ get displayDateEnd(): Date | null; set displayDateEnd(value: Date | null); /** * Gets or sets the `value` property. * * @public * @override */ get value(): Date | null; set value(value: Date | null); /** * Gets or sets the `displayValue` property. * * @public * @readonly */ get displayValue(): string; private set displayValue(value); /** * 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 `values` property. * * @public * @attr */ get values(): Array; set values(value: Array); /** * Gets or sets the `view` property. * * @public * @attr */ get view(): CalendarView; set view(value: CalendarView); /** * Gets or sets the `selectionMode` property. * * @public * @attr */ get selectionMode(): RangeSelectionMode; set selectionMode(value: RangeSelectionMode); /** * Gets or sets the `blackoutDates` property. * * @public * @attr */ get blackoutDates(): Array; set blackoutDates(value: Array); /** * Gets or sets the `specialDates` property. * * @public * @attr */ get specialDates(): Array; set specialDates(value: Array); /** * Gets or sets the `minDate` property. * * @public * @attr */ get minDate(): Date | null; set minDate(value: Date | null); /** * Gets or sets the `maxDate` property. * * @public * @attr */ get maxDate(): Date | null; set maxDate(value: Date | null); /** * Gets or sets the `firstDayOfWeek` property. * * @public * @attr */ get firstDayOfWeek(): DayOfWeek; set firstDayOfWeek(value: DayOfWeek); /** * Gets or sets the `isTodayHighlighted` property. * * @public * @attr */ get isTodayHighlighted(): boolean; set isTodayHighlighted(value: boolean); /** * Gets or sets the `isWeekendHighlighted` property. * * @public * @attr */ get isWeekendHighlighted(): boolean; set isWeekendHighlighted(value: boolean); /** * Gets or sets the `showWeekNumbers` property. * * @public * @attr */ get showWeekNumbers(): boolean; set showWeekNumbers(value: boolean); /** * A handler that gets date and returns null or a tuple with circled marker data. See `CalendarMarkerData`. * * @public */ get markerHandler(): CalendarMarkerHandler; set markerHandler(value: CalendarMarkerHandler); /** * Gets or sets the `showAdjacent` property. * * @public * @attr */ get showAdjacent(): boolean; set showAdjacent(value: boolean); /** * Gets or sets the `format` property. * * Supported date format specifiers: * - `d` : Day of the month (1-31) without leading zero. * - `dd` : Day of the month (01-31) with leading zero. * - `ddd` : Abbreviated name of the day of the week (e.g., Mon, Tue). * - `dddd`: Full name of the day of the week (e.g., Monday, Tuesday). * - `M` : Month (1-12) without leading zero. * - `MM` : Month (01-12) with leading zero. * - `MMM` : Abbreviated name of the month (e.g., Jan, Feb). * - `MMMM`: Full name of the month (e.g., January, February). * - `y` : Year as the last two digits without leading zero (e.g., 9 for 2009). * - `yy` : Year as the last two digits with leading zero (e.g., 09 for 2009). * - `yyy` : Year with a minimum of three digits (e.g., 009, 2009). * - `yyyy`: Year as a four-digit number (e.g., 2009). * - `-` : Custom separator (e.g., hyphen). * - `/` : Date separator (e.g., slash). * - `.` : Custom separator (e.g., dot). * * @public * @attr */ get format(): string; set format(value: string); /** * Determines the text alignment of the component. * * @public * @attr */ get textAlign(): TextAlignment; set textAlign(value: TextAlignment); /** * 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; /** * @protected * @readonly */ protected get keyboard(): KeyboardController; /** * @public * @override */ connectedCallback(): 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 */ onDateChanged(detail: IDateChangedEventDetail): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onFormatPropertyChanged(_prev?: string, next?: string): void; /** * @protected */ protected onDisabledPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onValuePropertyChanged(_prev?: Date | null, next?: Date | null): void; } /** * @public */ export declare namespace DateBoxElement { type Props = IDateBoxElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-datebox': DateBoxElement; } } export {}; //# sourceMappingURL=DateBoxElement.d.ts.map