import { type PropertyValues } from 'lit'; import type { AbstractConstructor } from '../common/mixins/constructor.js'; import type { IgcInputComponentEventMap } from '../input/input-base.js'; import { IgcMaskInputBaseComponent, type MaskSelection } from '../mask-input/mask-input-base.js'; import { DatePart, type DatePartDeltas } from './date-part.js'; import { DateTimeMaskParser } from './datetime-mask-parser.js'; export interface IgcDateTimeInputComponentEventMap extends Omit { igcChange: CustomEvent; } declare const IgcDateTimeInputComponent_base: import("../common/mixins/constructor.js").Constructor> & AbstractConstructor; /** * A date time input is an input field that lets you set and edit the date and time in a chosen input element * using customizable display and input formats. * * @element igc-date-time-input * * @slot prefix - Renders content before the input. * @slot suffix - Renders content after input. * @slot helper-text - Renders content below the input. * @slot value-missing - Renders content when the required validation fails. * @slot range-overflow - Renders content when the max validation fails. * @slot range-underflow - Renders content when the min validation fails. * @slot custom-error - Renders content when setCustomValidity(message) is set. * @slot invalid - Renders content when the component is in invalid state (validity.valid = false). * * @fires igcInput - Emitted when the control input receives user input. * @fires igcChange - Emitted when the control's checked state changes. * * @csspart container - The main wrapper that holds all main input elements. * @csspart input - The native input element. * @csspart label - The native label element. * @csspart prefix - The prefix wrapper. * @csspart suffix - The suffix wrapper. * @csspart helper-text - The helper text wrapper. */ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent_base { static readonly tagName = "igc-date-time-input"; static styles: import("lit").CSSResult[]; static register(): void; protected readonly _parser: DateTimeMaskParser; private _defaultDisplayFormat; private _displayFormat?; private _inputFormat?; private _oldValue; private _min; private _max; private readonly _i18nController; protected readonly _themes: import("../../theming/theming-controller.js").ThemingController; protected readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "helper-text" | "suffix" | "value-missing" | "range-overflow" | "range-underflow" | "custom-error">; protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue; protected get __validators(): import("../common/validators.js").Validator[]; /** * Determines which date/time part is currently targeted based on cursor position. * When focused, returns the part under the cursor. * When unfocused, returns a default part based on available parts. */ private get _targetDatePart(); private get _datePartDeltas(); /** * The date format to apply on the input. * @attr input-format */ set inputFormat(val: string); get inputFormat(): string; /** * The value of the input. * @attr */ set value(value: Date | string | null | undefined); get value(): Date | null; /** * The minimum value required for the input to remain valid. * @attr */ set min(value: Date | string | null | undefined); get min(): Date | null; /** * The maximum value required for the input to remain valid. * @attr */ set max(value: Date | string | null | undefined); get max(): Date | null; /** * Format to display the value in when not editing. * Defaults to the locale format if not set. * @attr display-format */ set displayFormat(value: string); get displayFormat(): string; /** * Delta values used to increment or decrement each date part on step actions. * All values default to `1`. */ spinDelta?: DatePartDeltas; /** * Sets whether to loop over the currently spun segment. * @attr spin-loop */ spinLoop: boolean; /** * Gets/Sets the locale used for formatting the display value. * @attr locale */ set locale(value: string); get locale(): string; constructor(); protected update(props: PropertyValues): void; protected _resolvePartNames(base: string): { [x: string]: boolean; prefixed: boolean; suffixed: boolean; filled: boolean; }; protected _updateSetRangeTextValue(): void; private _emitInputEvent; private _handleResourceChange; protected _handleDragLeave(): void; protected _handleDragEnter(): void; private _handleWheel; protected _handleFocus(): Promise; protected _handleBlur(): void; protected _setCurrentDateTime(): void; /** * Navigates to the previous or next date part. */ protected _navigateParts(direction: number): void; /** * Calculates the new cursor position when navigating between date parts. * direction = 0: navigate to start of previous part * direction = 1: navigate to start of next part */ private _calculatePartNavigationPosition; /** * Handles keyboard-triggered spinning (arrow up/down). */ protected _keyboardSpin(direction: 'up' | 'down'): Promise; /** * Updates the displayed mask value based on focus state. * When focused, shows the editable mask. When unfocused, shows formatted display value. */ protected _updateMaskDisplay(): void; protected _updateInput(text: string, { start, end }: MaskSelection): Promise; /** * Common logic for stepping up or down a date part. */ private _performStep; /** * Calculates the new date value after spinning a date part. */ private _calculateSpunValue; /** * Spins a specific date part by the given delta. */ private _spinDatePart; /** * Updates the default display format based on current locale. */ private _updateDefaultDisplayFormat; /** * Applies a mask pattern to the input, parsing the format string into date parts. */ private _applyMask; /** * Builds the masked value string from the current date value. * Returns empty mask if no value, or existing masked value if incomplete. */ private _buildMaskedValue; protected _initializeDefaultMask(): void; /** * Gets the date part at the current cursor position. * Uses inclusive end to handle cursor at the end of the last part. * Returns undefined if cursor is not within a valid date part. */ private _getDatePartAtCursor; /** * Gets the default date part to target when the input is not focused. * Prioritizes: Date > Hours > First available part */ private _getDefaultDatePart; /** * Checks if all mask positions are filled (no prompt characters remain). */ private _isMaskComplete; /** * Updates the internal value based on the current masked input. * Only sets a value if the mask is complete and parses to a valid date. */ private _updateValueFromMask; /** Increments a date/time portion. */ stepUp(datePart?: DatePart, delta?: number): void; /** Decrements a date/time portion. */ stepDown(datePart?: DatePart, delta?: number): void; /** Clears the input element of user input. */ clear(): void; /** * Checks whether the current format includes date parts (day, month, year). * @internal */ hasDateParts(): boolean; /** * Checks whether the current format includes time parts (hours, minutes, seconds). * @internal */ hasTimeParts(): boolean; protected _renderInput(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'igc-date-time-input': IgcDateTimeInputComponent; } } export {};