igniteui-webcomponents/components/date-time-input/date-time-input.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import type { AbstractConstructor } from '../common/mixins/constructor.js';
import { DatePart, type DatePartDeltas } from './date-part.js';
import { IgcDateTimeInputBaseComponent } from './date-time-input.base.js';
import { DateTimeMaskParser } from './datetime-mask-parser.js';
export interface IgcDateTimeInputComponentEventMap {
    igcInput: CustomEvent<string>;
    igcChange: CustomEvent<Date | null>;
    focus: FocusEvent;
    blur: FocusEvent;
}
declare const IgcDateTimeInputComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & AbstractConstructor<IgcDateTimeInputBaseComponent>;
/**
 * 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 _themes: import("../../theming/theming-controller.js").ThemingController;
    protected readonly _parser: DateTimeMaskParser;
    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<Date | null>;
    protected get __validators(): import("../common/validators.js").Validator<IgcDateTimeInputComponent>[];
    protected get _datePartDeltas(): DatePartDeltas;
    protected _oldValue: Date | null;
    /**
     * The value of the input.
     * @attr
     */
    set value(value: Date | string | null | undefined);
    get value(): Date | null;
    protected _handleFocus(): Promise<void>;
    protected _handleBlur(): 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
     */
    protected _calculatePartNavigationPosition(inputValue: string, direction: number): number;
    /**
     * 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.
     */
    protected _getDatePartAtCursor(): DatePart | undefined;
    /**
     * Gets the default date part to target when the input is not focused.
     * Prioritizes: Date > Hours > First available part
     */
    protected _getDefaultDatePart(): DatePart | undefined;
    /**
     * Builds the masked value string from the current date value.
     * Returns empty mask if no value, or existing masked value if incomplete.
     */
    protected _buildMaskedValue(): string;
    /**
     * Builds the formatted display value shown when the input is not focused.
     */
    protected _buildDisplayValue(): string;
    /**
     * Commits a value produced by spinning a date part.
     */
    protected _commitSpunValue(value: unknown): void;
    /**
     * Sets the value to the current date/time.
     */
    protected _setCurrentDateTime(): void;
    /**
     * Emits an `igcInput` event whose `detail` is the parsed value as an ISO
     * string (preserving the legacy contract for this component).
     */
    protected _emitInputEvent(): void;
    /**
     * Calculates the new date value after spinning a date part.
     */
    protected _calculateSpunValue(datePart: DatePart, delta: number | undefined, isDecrement: boolean): Date;
    /**
     * Spins a specific date part by the given delta.
     */
    protected _spinDatePart(datePart: DatePart, delta: number): Date;
    /**
     * 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.
     */
    protected _syncValueFromMask(): void;
    /** 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;
}
declare global {
    interface HTMLElementTagNameMap {
        'igc-date-time-input': IgcDateTimeInputComponent;
    }
}
export {};