igniteui-webcomponents
Version:
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.
213 lines (212 loc) • 8.36 kB
TypeScript
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<IgcInputComponentEventMap, 'igcChange'> {
igcChange: CustomEvent<Date | null>;
}
declare const IgcDateTimeInputComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & AbstractConstructor<IgcMaskInputBaseComponent>;
/**
* 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<Date | null>;
protected get __validators(): import("../common/validators.js").Validator<IgcDateTimeInputComponent>[];
/**
* 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<this>): 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<void>;
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<void>;
/**
* 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<void>;
/**
* 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 {};