igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/date-time-input/date-time-input.d.ts

@@ -1,4 +1,4 @@
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
+import type { AbstractConstructor } from '#internals/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';
@@ -8,7 +8,7 @@ export interface IgcDateTimeInputComponentEventMap {
     focus: FocusEvent;
     blur: FocusEvent;
 }
-declare const IgcDateTimeInputComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & AbstractConstructor<IgcDateTimeInputBaseComponent>;
+declare const IgcDateTimeInputComponent_base: import("#internals/mixins/constructor.js").Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & AbstractConstructor<IgcDateTimeInputBaseComponent<Date>>;
 /**
  * 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.
@@ -38,20 +38,24 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
     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 _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 readonly _formValue: import("#internals/mixins/forms/form-value.js").FormValue<Date | null>;
+    protected get __validators(): import("../../internals/validators.js").Validator<IgcDateTimeInputComponent>[];
     protected get _datePartDeltas(): DatePartDeltas;
-    protected _oldValue: Date | null;
     /**
      * The value of the input.
+     *
+     * Only ever holds a committed value. While the user is typing, the intermediate
+     * state lives in the masked text and is committed - together with an `igcChange`
+     * event - when the edit is committed on blur. Use the `igcInput` event to observe
+     * the value as it is being typed.
+     *
      * @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
@@ -69,19 +73,12 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
      * 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;
+    protected _parseMask(strict: boolean): Date | null;
+    protected _formatValue(value: Date | null): 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.
      */
@@ -99,17 +96,10 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
      * 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

package/components/date-time-input/date-time-input.js

@@ -5,21 +5,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { convertToDate, isValidDate } from '../calendar/helpers.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { formatDisplayDate } from '../common/i18n/i18n-controller.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
-import { createFormValueState } from '../common/mixins/forms/form-value.js';
-import { equal } from '../common/util.js';
+import { convertToDate, isValidDate } from '#internals/date/converters.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { formatDisplayDate } from '#internals/i18n/i18n-controller.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { FormValueDateTimeTransformers } from '#internals/mixins/forms/form-transformers.js';
+import { createFormValueState } from '#internals/mixins/forms/form-value.js';
+import { equal } from '#internals/utils/objects.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { styles } from '../input/themes/input.base.css.js';
 import { styles as shared } from '../input/themes/shared/input.common.css.js';
 import { all } from '../input/themes/themes.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
-import { DatePart, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.js';
+import { createDatePart, DatePart, DatePartType, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.js';
 import { IgcDateTimeInputBaseComponent } from './date-time-input.base.js';
-import { createDatePart, DateParts, DateTimeMaskParser, } from './datetime-mask-parser.js';
+import { DateTimeMaskParser } from './datetime-mask-parser.js';
 import { dateTimeInputValidators } from './validators.js';
 export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDateTimeInputBaseComponent) {
     constructor() {
@@ -30,7 +30,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
             initialValue: null,
             transformers: FormValueDateTimeTransformers,
         });
-        this._oldValue = null;
     }
     static { this.tagName = 'igc-date-time-input'; }
     static { this.styles = [styles, shared]; }
@@ -44,7 +43,12 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
         return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };
     }
     set value(value) {
-        this._formValue.setValueAndFormState(value);
+        const next = convertToDate(value);
+        if (equal(this._formValue.value, next)) {
+            return;
+        }
+        this._isEditing = false;
+        this._formValue.setValueAndFormState(next);
         this._updateMaskDisplay();
     }
     get value() {
@@ -58,71 +62,58 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
         this._oldValue = this.value;
         if (!this.value) {
             this._maskedValue = this._parser.emptyMask;
+            this._historyResync();
             await this.updateComplete;
             this.select();
+            return;
         }
-        else if (this.displayFormat !== this.inputFormat) {
-            this._updateMaskDisplay();
-        }
-    }
-    _handleBlur() {
-        this._focused = false;
-        if (!(this._isMaskComplete() || this._isEmptyMask)) {
-            const parsedDate = this._parser.parseDate(this._maskedValue);
-            if (parsedDate) {
-                this.value = parsedDate;
-            }
-            else {
-                this.clear();
-            }
-        }
-        else {
+        if (this.displayFormat !== this.inputFormat) {
             this._updateMaskDisplay();
         }
-        if (!this.readOnly && !equal(this._oldValue, this.value)) {
-            this.emitEvent('igcChange', { detail: this.value });
-        }
-        super._handleBlur();
+        this._historyResync();
     }
     _calculatePartNavigationPosition(inputValue, direction) {
         const cursorPos = this._maskSelection.start;
-        const dateParts = this._parser.dateParts;
+        const dateParts = this._parser.parts;
         if (direction === 0) {
-            const part = dateParts.findLast((part) => part.type === DateParts.Literal && part.end < cursorPos);
+            const part = dateParts.findLast((part) => part.type === DatePartType.Literal && part.end < cursorPos);
             return part?.end ?? 0;
         }
-        const part = dateParts.find((part) => part.type === DateParts.Literal && part.start > cursorPos);
+        const part = dateParts.find((part) => part.type === DatePartType.Literal && part.start > cursorPos);
         return part?.start ?? inputValue.length;
     }
     _getDatePartAtCursor() {
-        return this._parser.getDatePartForCursor(this._inputSelection.start)
-            ?.type;
+        return this._parser.getPartForCursor(this._inputSelection.start)?.type;
     }
     _getDefaultDatePart() {
-        return (this._parser.getPartByType(DateParts.Date)?.type ??
-            this._parser.getPartByType(DateParts.Hours)?.type ??
-            this._parser.getFirstDatePart()?.type);
+        return (this._parser.getPartByType(DatePartType.Date)?.type ??
+            this._parser.getPartByType(DatePartType.Hours)?.type ??
+            this._parser.getFirstPart()?.type);
     }
-    _buildMaskedValue() {
-        return isValidDate(this.value)
-            ? this._parser.formatDate(this.value)
-            : this._maskedValue || this._parser.emptyMask;
+    _parseMask(strict) {
+        if (strict && !this._isMaskComplete()) {
+            return null;
+        }
+        const parsed = this._parser.parseDate(this._maskedValue);
+        return isValidDate(parsed) ? parsed : null;
+    }
+    _formatValue(value) {
+        return this._parser.formatDate(value);
     }
     _buildDisplayValue() {
         return isValidDate(this.value)
             ? formatDisplayDate(this.value, this.locale, this.displayFormat)
             : '';
     }
-    _commitSpunValue(value) {
-        this.value = value;
-    }
     _setCurrentDateTime() {
-        this.value = new Date();
+        this._setDraftValue(new Date());
         this._emitInputEvent();
     }
     _emitInputEvent() {
         this._setTouchedState();
-        this.emitEvent('igcInput', { detail: this.value?.toISOString() });
+        this.emitEvent('igcInput', {
+            detail: this._uncommittedValue?.toISOString(),
+        });
     }
     _calculateSpunValue(datePart, delta, isDecrement) {
         const effectiveDelta = delta || this._datePartDeltas[datePart] || 1;
@@ -132,10 +123,11 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
         return this._spinDatePart(datePart, spinAmount);
     }
     _spinDatePart(datePart, delta) {
-        if (!isValidDate(this.value)) {
+        const current = this._uncommittedValue;
+        if (!isValidDate(current)) {
             return new Date();
         }
-        const newDate = new Date(this.value.getTime());
+        const newDate = new Date(current.getTime());
         const partType = datePart;
         let part = this._parser.getPartByType(partType);
         if (!part) {
@@ -143,7 +135,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
         }
         let amPmValue;
         if (datePart === DatePart.AmPm) {
-            const formatPart = this._parser.getPartByType(DateParts.AmPm);
+            const formatPart = this._parser.getPartByType(DatePartType.AmPm);
             if (formatPart) {
                 amPmValue = this._maskedValue.substring(formatPart.start, formatPart.end);
             }
@@ -152,28 +144,16 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcDate
             date: newDate,
             spinLoop: this.spinLoop,
             amPmValue,
-            originalDate: this.value,
+            originalDate: current,
         });
         return newDate;
     }
-    _syncValueFromMask() {
-        if (!this._isMaskComplete()) {
-            this.value = null;
-            return;
-        }
-        const parsedDate = this._parser.parseDate(this._maskedValue);
-        this.value = isValidDate(parsedDate) ? parsedDate : null;
-    }
     stepUp(datePart, delta) {
         super.stepUp(datePart, delta);
     }
     stepDown(datePart, delta) {
         super.stepDown(datePart, delta);
     }
-    clear() {
-        this._maskedValue = '';
-        this.value = null;
-    }
     hasDateParts() {
         return this._parser.hasDateParts();
     }

package/components/date-time-input/date-time-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-input.js","sourceRoot":"","sources":["../../../src/components/date-time-input/date-time-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { convertToDate, isValidDate } from '../calendar/helpers.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatDisplayDate } from '../common/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { equal } from '../common/util.js';\nimport { styles } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport { all } from '../input/themes/themes.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport {\n  DatePart,\n  type DatePartDeltas,\n  DEFAULT_DATE_PARTS_SPIN_DELTAS,\n} from './date-part.js';\nimport { IgcDateTimeInputBaseComponent } from './date-time-input.base.js';\nimport {\n  createDatePart,\n  DateParts,\n  DateTimeMaskParser,\n} from './datetime-mask-parser.js';\nimport { dateTimeInputValidators } from './validators.js';\n\nexport interface IgcDateTimeInputComponentEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  igcChange: CustomEvent<Date | null>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n/* blazorIndirectRender */\n/* blazorSupportsVisualChildren */\n/**\n * A date time input is an input field that lets you set and edit the date and time in a chosen input element\n * using customizable display and input formats.\n *\n * @element igc-date-time-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot range-overflow - Renders content when the max validation fails.\n * @slot range-underflow - Renders content when the min validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control input receives user input.\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart container - The main wrapper that holds all main input elements.\n * @csspart input - The native input element.\n * @csspart label - The native label element.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcDateTimeInputComponent extends EventEmitterMixin<\n  IgcDateTimeInputComponentEventMap,\n  AbstractConstructor<IgcDateTimeInputBaseComponent>\n>(IgcDateTimeInputBaseComponent) {\n  public static readonly tagName = 'igc-date-time-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcDateTimeInputComponent,\n      IgcValidationContainerComponent\n    );\n  }\n\n  //#region Private state and properties\n\n  protected override readonly _themes = addThemingController(this, all);\n  protected override readonly _parser = new DateTimeMaskParser();\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: null,\n    transformers: FormValueDateTimeTransformers,\n  });\n\n  protected override get __validators() {\n    return dateTimeInputValidators;\n  }\n\n  protected override get _datePartDeltas(): DatePartDeltas {\n    return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };\n  }\n\n  protected _oldValue: Date | null = null;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the input.\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    this._formValue.setValueAndFormState(value as Date | null);\n    this._updateMaskDisplay();\n  }\n\n  public get value(): Date | null {\n    return this._formValue.value;\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected async _handleFocus(): Promise<void> {\n    this._focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    this._oldValue = this.value;\n\n    if (!this.value) {\n      this._maskedValue = this._parser.emptyMask;\n      await this.updateComplete;\n      this.select();\n    } else if (this.displayFormat !== this.inputFormat) {\n      this._updateMaskDisplay();\n    }\n  }\n\n  protected override _handleBlur(): void {\n    this._focused = false;\n\n    // Handle incomplete mask input\n    if (!(this._isMaskComplete() || this._isEmptyMask)) {\n      const parsedDate = this._parser.parseDate(this._maskedValue);\n\n      if (parsedDate) {\n        this.value = parsedDate;\n      } else {\n        this.clear();\n      }\n    } else {\n      this._updateMaskDisplay();\n    }\n\n    // Emit change event if value changed\n    if (!this.readOnly && !equal(this._oldValue, this.value)) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n\n    super._handleBlur();\n  }\n\n  //#endregion\n\n  //#region Navigation\n\n  /**\n   * Calculates the new cursor position when navigating between date parts.\n   * direction = 0: navigate to start of previous part\n   * direction = 1: navigate to start of next part\n   */\n  protected override _calculatePartNavigationPosition(\n    inputValue: string,\n    direction: number\n  ): number {\n    const cursorPos = this._maskSelection.start;\n    const dateParts = this._parser.dateParts;\n\n    if (direction === 0) {\n      // Navigate backwards: find last literal before cursor\n      const part = dateParts.findLast(\n        (part) => part.type === DateParts.Literal && part.end < cursorPos\n      );\n      return part?.end ?? 0;\n    }\n\n    // Navigate forwards: find first literal after cursor\n    const part = dateParts.find(\n      (part) => part.type === DateParts.Literal && part.start > cursorPos\n    );\n    return part?.start ?? inputValue.length;\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  /**\n   * Gets the date part at the current cursor position.\n   * Uses inclusive end to handle cursor at the end of the last part.\n   * Returns undefined if cursor is not within a valid date part.\n   */\n  protected override _getDatePartAtCursor(): DatePart | undefined {\n    return this._parser.getDatePartForCursor(this._inputSelection.start)\n      ?.type as DatePart | undefined;\n  }\n\n  /**\n   * Gets the default date part to target when the input is not focused.\n   * Prioritizes: Date > Hours > First available part\n   */\n  protected override _getDefaultDatePart(): DatePart | undefined {\n    return (this._parser.getPartByType(DateParts.Date)?.type ??\n      this._parser.getPartByType(DateParts.Hours)?.type ??\n      this._parser.getFirstDatePart()?.type) as DatePart | undefined;\n  }\n\n  /**\n   * Builds the masked value string from the current date value.\n   * Returns empty mask if no value, or existing masked value if incomplete.\n   */\n  protected override _buildMaskedValue(): string {\n    return isValidDate(this.value)\n      ? this._parser.formatDate(this.value)\n      : this._maskedValue || this._parser.emptyMask;\n  }\n\n  /**\n   * Builds the formatted display value shown when the input is not focused.\n   */\n  protected override _buildDisplayValue(): string {\n    return isValidDate(this.value)\n      ? formatDisplayDate(this.value, this.locale, this.displayFormat)\n      : '';\n  }\n\n  /**\n   * Commits a value produced by spinning a date part.\n   */\n  protected override _commitSpunValue(value: unknown): void {\n    this.value = value as Date;\n  }\n\n  /**\n   * Sets the value to the current date/time.\n   */\n  protected override _setCurrentDateTime(): void {\n    this.value = new Date();\n    this._emitInputEvent();\n  }\n\n  /**\n   * Emits an `igcInput` event whose `detail` is the parsed value as an ISO\n   * string (preserving the legacy contract for this component).\n   */\n  protected override _emitInputEvent(): void {\n    this._setTouchedState();\n    this.emitEvent('igcInput', { detail: this.value?.toISOString() });\n  }\n\n  /**\n   * Calculates the new date value after spinning a date part.\n   */\n  protected override _calculateSpunValue(\n    datePart: DatePart,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): Date {\n    // Default to 1 if delta is 0 or undefined\n    const effectiveDelta =\n      delta || this._datePartDeltas[datePart as keyof DatePartDeltas] || 1;\n\n    const spinAmount = isDecrement\n      ? -Math.abs(effectiveDelta)\n      : Math.abs(effectiveDelta);\n\n    return this._spinDatePart(datePart, spinAmount);\n  }\n\n  /**\n   * Spins a specific date part by the given delta.\n   */\n  protected _spinDatePart(datePart: DatePart, delta: number): Date {\n    if (!isValidDate(this.value)) {\n      return new Date();\n    }\n\n    const newDate = new Date(this.value.getTime());\n    const partType = datePart as unknown as DateParts;\n\n    // Get the part instance from the parser, or create one for explicit spin operations\n    let part = this._parser.getPartByType(partType);\n    if (!part) {\n      // For explicit spin operations (e.g., stepDown(DatePart.Minutes)),\n      // create a temporary part even if not in the format\n      part = createDatePart(partType, { start: 0, end: 0, format: '' });\n    }\n\n    // For AM/PM, we need to extract the current AM/PM value from the mask\n    let amPmValue: string | undefined;\n    if (datePart === DatePart.AmPm) {\n      const formatPart = this._parser.getPartByType(DateParts.AmPm);\n      if (formatPart) {\n        amPmValue = this._maskedValue.substring(\n          formatPart.start,\n          formatPart.end\n        );\n      }\n    }\n\n    part.spin(delta, {\n      date: newDate,\n      spinLoop: this.spinLoop,\n      amPmValue,\n      originalDate: this.value,\n    });\n\n    return newDate;\n  }\n\n  /**\n   * Updates the internal value based on the current masked input.\n   * Only sets a value if the mask is complete and parses to a valid date.\n   */\n  protected override _syncValueFromMask(): void {\n    if (!this._isMaskComplete()) {\n      this.value = null;\n      return;\n    }\n\n    const parsedDate = this._parser.parseDate(this._maskedValue);\n    this.value = isValidDate(parsedDate) ? parsedDate : null;\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Increments a date/time portion. */\n  public override stepUp(datePart?: DatePart, delta?: number): void {\n    super.stepUp(datePart, delta);\n  }\n\n  /** Decrements a date/time portion. */\n  public override stepDown(datePart?: DatePart, delta?: number): void {\n    super.stepDown(datePart, delta);\n  }\n\n  /** Clears the input element of user input. */\n  public override clear(): void {\n    this._maskedValue = '';\n    this.value = null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * Checks whether the current format includes date parts (day, month, year).\n   * @internal\n   */\n  public override hasDateParts(): boolean {\n    return this._parser.hasDateParts();\n  }\n\n  /* blazorSuppress */\n  /**\n   * Checks whether the current format includes time parts (hours, minutes, seconds).\n   * @internal\n   */\n  public override hasTimeParts(): boolean {\n    return this._parser.hasTimeParts();\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-date-time-input': IgcDateTimeInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"date-time-input.js","sourceRoot":"","sources":["../../../src/components/date-time-input/date-time-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { convertToDate, isValidDate } from '#internals/date/converters.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { formatDisplayDate } from '#internals/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormValueDateTimeTransformers } from '#internals/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { equal } from '#internals/utils/objects.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport { styles } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport { all } from '../input/themes/themes.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport {\n  createDatePart,\n  DatePart,\n  type DatePartDeltas,\n  DatePartType,\n  DEFAULT_DATE_PARTS_SPIN_DELTAS,\n} from './date-part.js';\nimport { IgcDateTimeInputBaseComponent } from './date-time-input.base.js';\nimport { DateTimeMaskParser } from './datetime-mask-parser.js';\nimport { dateTimeInputValidators } from './validators.js';\n\nexport interface IgcDateTimeInputComponentEventMap {\n  /* alternateName: inputOcurred */\n  igcInput: CustomEvent<string>;\n  igcChange: CustomEvent<Date | null>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\n/* blazorIndirectRender */\n/* blazorSupportsVisualChildren */\n/**\n * A date time input is an input field that lets you set and edit the date and time in a chosen input element\n * using customizable display and input formats.\n *\n * @element igc-date-time-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot range-overflow - Renders content when the max validation fails.\n * @slot range-underflow - Renders content when the min validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcInput - Emitted when the control input receives user input.\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart container - The main wrapper that holds all main input elements.\n * @csspart input - The native input element.\n * @csspart label - The native label element.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcDateTimeInputComponent extends EventEmitterMixin<\n  IgcDateTimeInputComponentEventMap,\n  AbstractConstructor<IgcDateTimeInputBaseComponent<Date>>\n>(IgcDateTimeInputBaseComponent) {\n  public static readonly tagName = 'igc-date-time-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcDateTimeInputComponent,\n      IgcValidationContainerComponent\n    );\n  }\n\n  //#region Private state and properties\n\n  protected override readonly _themes = addThemingController(this, all);\n  protected override readonly _parser = new DateTimeMaskParser();\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: null,\n    transformers: FormValueDateTimeTransformers,\n  });\n\n  protected override get __validators() {\n    return dateTimeInputValidators;\n  }\n\n  protected override get _datePartDeltas(): DatePartDeltas {\n    return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the input.\n   *\n   * Only ever holds a committed value. While the user is typing, the intermediate\n   * state lives in the masked text and is committed - together with an `igcChange`\n   * event - when the edit is committed on blur. Use the `igcInput` event to observe\n   * the value as it is being typed.\n   *\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public override set value(value: Date | string | null | undefined) {\n    const next = convertToDate(value);\n\n    if (equal(this._formValue.value, next)) {\n      return;\n    }\n\n    this._isEditing = false;\n    this._formValue.setValueAndFormState(next);\n    this._updateMaskDisplay();\n  }\n\n  public override get value(): Date | null {\n    return this._formValue.value;\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  protected async _handleFocus(): Promise<void> {\n    this._focused = true;\n\n    if (this.readOnly) {\n      return;\n    }\n\n    this._oldValue = this.value;\n\n    if (!this.value) {\n      this._maskedValue = this._parser.emptyMask;\n      this._historyResync();\n      await this.updateComplete;\n      this.select();\n      return;\n    }\n\n    if (this.displayFormat !== this.inputFormat) {\n      this._updateMaskDisplay();\n    }\n\n    this._historyResync();\n  }\n\n  //#endregion\n\n  //#region Navigation\n\n  /**\n   * Calculates the new cursor position when navigating between date parts.\n   * direction = 0: navigate to start of previous part\n   * direction = 1: navigate to start of next part\n   */\n  protected override _calculatePartNavigationPosition(\n    inputValue: string,\n    direction: number\n  ): number {\n    const cursorPos = this._maskSelection.start;\n    const dateParts = this._parser.parts;\n\n    if (direction === 0) {\n      // Navigate backwards: find last literal before cursor\n      const part = dateParts.findLast(\n        (part) => part.type === DatePartType.Literal && part.end < cursorPos\n      );\n      return part?.end ?? 0;\n    }\n\n    // Navigate forwards: find first literal after cursor\n    const part = dateParts.find(\n      (part) => part.type === DatePartType.Literal && part.start > cursorPos\n    );\n    return part?.start ?? inputValue.length;\n  }\n\n  //#endregion\n\n  //#region Internal API\n\n  /**\n   * Gets the date part at the current cursor position.\n   * Uses inclusive end to handle cursor at the end of the last part.\n   * Returns undefined if cursor is not within a valid date part.\n   */\n  protected override _getDatePartAtCursor(): DatePart | undefined {\n    return this._parser.getPartForCursor(this._inputSelection.start)?.type as\n      | DatePart\n      | undefined;\n  }\n\n  /**\n   * Gets the default date part to target when the input is not focused.\n   * Prioritizes: Date > Hours > First available part\n   */\n  protected override _getDefaultDatePart(): DatePart | undefined {\n    return (this._parser.getPartByType(DatePartType.Date)?.type ??\n      this._parser.getPartByType(DatePartType.Hours)?.type ??\n      this._parser.getFirstPart()?.type) as DatePart | undefined;\n  }\n\n  protected override _parseMask(strict: boolean): Date | null {\n    if (strict && !this._isMaskComplete()) {\n      return null;\n    }\n\n    const parsed = this._parser.parseDate(this._maskedValue);\n    return isValidDate(parsed) ? parsed : null;\n  }\n\n  protected override _formatValue(value: Date | null): string {\n    return this._parser.formatDate(value);\n  }\n\n  /**\n   * Builds the formatted display value shown when the input is not focused.\n   */\n  protected override _buildDisplayValue(): string {\n    return isValidDate(this.value)\n      ? formatDisplayDate(this.value, this.locale, this.displayFormat)\n      : '';\n  }\n\n  /**\n   * Sets the value to the current date/time.\n   */\n  protected override _setCurrentDateTime(): void {\n    this._setDraftValue(new Date());\n    this._emitInputEvent();\n  }\n\n  /**\n   * Emits an `igcInput` event whose `detail` is the parsed value as an ISO\n   * string (preserving the legacy contract for this component).\n   */\n  protected override _emitInputEvent(): void {\n    this._setTouchedState();\n    this.emitEvent('igcInput', {\n      detail: this._uncommittedValue?.toISOString(),\n    });\n  }\n\n  /**\n   * Calculates the new date value after spinning a date part.\n   */\n  protected override _calculateSpunValue(\n    datePart: DatePart,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): Date {\n    // Default to 1 if delta is 0 or undefined\n    const effectiveDelta =\n      delta || this._datePartDeltas[datePart as keyof DatePartDeltas] || 1;\n\n    const spinAmount = isDecrement\n      ? -Math.abs(effectiveDelta)\n      : Math.abs(effectiveDelta);\n\n    return this._spinDatePart(datePart, spinAmount);\n  }\n\n  /**\n   * Spins a specific date part by the given delta.\n   */\n  protected _spinDatePart(datePart: DatePart, delta: number): Date {\n    const current = this._uncommittedValue;\n\n    if (!isValidDate(current)) {\n      return new Date();\n    }\n\n    const newDate = new Date(current.getTime());\n    const partType = datePart as unknown as DatePartType;\n\n    // Get the part instance from the parser, or create one for explicit spin operations\n    let part = this._parser.getPartByType(partType);\n    if (!part) {\n      // For explicit spin operations (e.g., stepDown(DatePart.Minutes)),\n      // create a temporary part even if not in the format\n      part = createDatePart(partType, { start: 0, end: 0, format: '' });\n    }\n\n    // For AM/PM, we need to extract the current AM/PM value from the mask\n    let amPmValue: string | undefined;\n    if (datePart === DatePart.AmPm) {\n      const formatPart = this._parser.getPartByType(DatePartType.AmPm);\n      if (formatPart) {\n        amPmValue = this._maskedValue.substring(\n          formatPart.start,\n          formatPart.end\n        );\n      }\n    }\n\n    part.spin(delta, {\n      date: newDate,\n      spinLoop: this.spinLoop,\n      amPmValue,\n      originalDate: current,\n    });\n\n    return newDate;\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Increments a date/time portion. */\n  public override stepUp(datePart?: DatePart, delta?: number): void {\n    super.stepUp(datePart, delta);\n  }\n\n  /** Decrements a date/time portion. */\n  public override stepDown(datePart?: DatePart, delta?: number): void {\n    super.stepDown(datePart, delta);\n  }\n\n  /* blazorSuppress */\n  /**\n   * Checks whether the current format includes date parts (day, month, year).\n   * @internal\n   */\n  public override hasDateParts(): boolean {\n    return this._parser.hasDateParts();\n  }\n\n  /* blazorSuppress */\n  /**\n   * Checks whether the current format includes time parts (hours, minutes, seconds).\n   * @internal\n   */\n  public override hasTimeParts(): boolean {\n    return this._parser.hasTimeParts();\n  }\n\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-date-time-input': IgcDateTimeInputComponent;\n  }\n}\n"]}

package/components/date-time-input/datetime-mask-parser.d.ts

@@ -1,72 +1,63 @@
-import { MaskParser } from '../mask-input/mask-parser.js';
-import { createDatePart, DatePartType, type IDatePart } from './date-part.js';
-/**
- * Types of date/time parts that can appear in a format string.
- * Re-exported from date-part.ts for backward compatibility.
- */
+import { type MaskOptions, MaskParser } from '../mask-input/mask-parser.js';
+import { DatePartType, type IDatePart } from './date-part.js';
+/** Default date/time format */
+export declare const DEFAULT_DATETIME_FORMAT = "MM/dd/yyyy";
 /**
- * Re-export createDatePart factory for creating standalone parts.
+ * Converts a date format string into a mask pattern. Date characters become `0`, or `L`
+ * for the alphabetic AM/PM marker; everything else is carried over as a literal.
+ *
+ * @example
+ * ```ts
+ * toMaskFormat('MM/dd/yyyy'); // '00/00/0000'
+ * ```
  */
-export { createDatePart, DatePartType as DateParts };
+export declare function toMaskFormat(dateFormat: string): string;
 /**
- * Information about a parsed date part within a format string.
- * This is a type alias for IDatePart for backward compatibility.
+ * Base for parsers whose public format is a date/time format string rather than a mask
+ * pattern. Owns the translation between the two and the list of positioned parts.
  */
-export type DatePartInfo = IDatePart;
-/** Options for the DateTimeMaskParser */
-export interface DateTimeMaskOptions {
-    /** The date/time format string (e.g., 'MM/dd/yyyy', 'HH:mm:ss') */
-    format?: string;
-    /** The prompt character for unfilled positions */
-    promptCharacter?: string;
+export declare abstract class DateFormatMaskParser<T extends IDatePart = IDatePart> extends MaskParser {
+    /**
+     * Built on first read, because {@link MaskParser} parses the mask from its constructor -
+     * before any subclass field exists. Declared without an initializer so that it survives
+     * the `_invalidate` call made from there.
+     */
+    private _parts?;
+    /** The positioned parts of the current format, literals included. */
+    get parts(): ReadonlyArray<T>;
+    protected abstract _buildParts(): T[];
+    protected _toMaskFormat(format: string): string;
+    protected _invalidate(): void;
+    /**
+     * The part at a cursor position. The end is inclusive, so a caret resting at the end of
+     * a part still resolves to it.
+     */
+    getPartForCursor(position: number): T | undefined;
+    /** The first part of the given type, if the format contains one. */
+    getPartByType(type: DatePartType): T | undefined;
+    /** The first non-literal part - the default target when nothing is focused. */
+    getFirstPart(): T | undefined;
+    /** Whether the format contains a day, month or year part. */
+    hasDateParts(): boolean;
+    /** Whether the format contains an hours, minutes or seconds part. */
+    hasTimeParts(): boolean;
 }
-/** Maps format characters to their corresponding DatePartType */
-export declare const FORMAT_CHAR_TO_DATE_PART: Map<string, DatePartType>;
-/** Set of valid date/time format characters */
-export declare const DATE_FORMAT_CHARS: Set<string>;
-/** Default date/time format */
-export declare const DEFAULT_DATETIME_FORMAT = "MM/dd/yyyy";
 /**
- * A specialized mask parser for date/time input fields.
- * Extends MaskParser to handle date-specific format patterns and validation.
+ * A mask parser for date/time input fields.
  *
  * @example
  * ```ts
  * const parser = new DateTimeMaskParser({ format: 'MM/dd/yyyy' });
- * parser.apply('12252023'); // Returns '12/25/2023'
- * parser.parseDate('12/25/2023'); // Returns Date object
+ * parser.apply('12252023');       // '12/25/2023'
+ * parser.parseDate('12/25/2023'); // Date
  * ```
  */
-export declare class DateTimeMaskParser extends MaskParser {
-    /** Parsed date parts from the format string */
-    private _dateParts;
-    /**
-     * Gets the parsed date parts from the format string.
-     * Each part contains type, position, and format information.
-     */
-    get dateParts(): ReadonlyArray<IDatePart>;
-    constructor(options?: DateTimeMaskOptions);
-    /**
-     * Sets a new date/time format and re-parses the date parts.
-     */
-    set mask(value: string);
-    get mask(): string;
-    /**
-     * Parses the format string into IDatePart objects.
-     * This identifies each date/time component and its position.
-     */
-    private _parseDateFormat;
-    /**
-     * Normalizes year format to 'yyyy' for editing (except for 'yy').
-     * Also updates the end position to account for the expanded format.
-     */
-    private _normalizeYearFormatBuilder;
+export declare class DateTimeMaskParser extends DateFormatMaskParser {
+    constructor(options?: MaskOptions);
+    protected _buildParts(): IDatePart[];
     /**
      * Parses a masked string into a Date object.
      * Returns null if the string cannot be parsed into a valid date.
-     *
-     * @param masked - The masked input string to parse
-     * @returns A Date object or null if parsing fails
      */
     parseDate(masked: string): Date | null;
     /**
@@ -76,7 +67,6 @@ export declare class DateTimeMaskParser extends MaskParser {
     /**
      * Validates that parsed date parts are within valid ranges.
      * Only validates parts that are present in the format.
-     * Uses the validate() method on each date part instance.
      */
     private _validateDateParts;
     /**
@@ -87,62 +77,8 @@ export declare class DateTimeMaskParser extends MaskParser {
      * Creates a Date object from parsed parts with defaults for missing values.
      */
     private _createDateFromParts;
-    /**
-     * Gets the number of days in a specific month/year.
-     */
-    private _daysInMonth;
     /**
      * Formats a Date object into a masked string according to the current format.
-     *
-     * @param date - The date to format
-     * @returns The formatted masked string
      */
     formatDate(date: Date | null): string;
-    /**
-     * Finds the date part at a given cursor position.
-     * Uses exclusive end (position < end) for precise character targeting.
-     *
-     * @param position - The cursor position to check
-     * @returns The DatePartInfo at that position, or undefined if not found
-     */
-    getDatePartAtPosition(position: number): DatePartInfo | undefined;
-    /**
-     * Finds the date part for a cursor position, using inclusive end.
-     * This handles the edge case where cursor is at the end of the mask
-     * (position equals the end of the last part).
-     *
-     * @param position - The cursor position to check
-     * @returns The DatePartInfo at that position, or undefined if not found
-     */
-    getDatePartForCursor(position: number): DatePartInfo | undefined;
-    /**
-     * Checks if the format includes any date parts (day, month, year).
-     */
-    hasDateParts(): boolean;
-    /**
-     * Checks if the format includes any time parts (hours, minutes, seconds).
-     */
-    hasTimeParts(): boolean;
-    /**
-     * Gets the first non-literal date part (useful for default selection).
-     */
-    getFirstDatePart(): DatePartInfo | undefined;
-    /**
-     * Gets a specific type of date part.
-     */
-    getPartByType(type: DatePartType): DatePartInfo | undefined;
-    /**
-     * Builds the internal mask pattern from the date format.
-     * Converts date format characters to mask pattern characters.
-     */
-    protected _parseMaskLiterals(): void;
-    /**
-     * Converts a date format string to a mask format string.
-     * Date format chars become '0' (numeric) or 'L' (alpha for AM/PM).
-     * This is a static utility that can be reused by other parsers.
-     *
-     * @param dateFormat - The date format string to convert (e.g., 'MM/dd/yyyy')
-     * @returns The mask format string (e.g., '00/00/0000')
-     */
-    static convertDateFormatToMaskFormat(dateFormat: string): string;
 }