igniteui-webcomponents 7.1.3 → 7.2.0

package/components/date-range-picker/date-range-input.js

@@ -0,0 +1,251 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import { CalendarDay } from '../calendar/model.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { formatDisplayDate } from '../common/i18n/i18n-controller.js';
+import { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
+import { equal } from '../common/util.js';
+import { DatePartType, } from '../date-time-input/date-part.js';
+import { IgcDateTimeInputBaseComponent, } from '../date-time-input/date-time-input.base.js';
+import { DateParts } from '../date-time-input/datetime-mask-parser.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 { DateRangeMaskParser, DateRangePosition, } from './date-range-mask-parser.js';
+export default class IgcDateRangeInputComponent extends IgcDateTimeInputBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._formValue = createFormValueState(this, {
+            initialValue: { start: null, end: null },
+            transformers: FormValueDateRangeTransformers,
+        });
+        this._themes = addThemingController(this, all);
+        this._parser = new DateRangeMaskParser();
+        this._oldValue = null;
+    }
+    static { this.tagName = 'igc-date-range-input'; }
+    static { this.styles = [styles, shared]; }
+    static register() {
+        registerComponent(IgcDateRangeInputComponent);
+    }
+    get _datePartDeltas() {
+        return {
+            date: 1,
+            month: 1,
+            year: 1,
+        };
+    }
+    set value(value) {
+        this._formValue.setValueAndFormState(value);
+        this._updateMaskDisplay();
+    }
+    get value() {
+        return this._formValue.value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._initializeDefaultMask();
+        this._updateMaskDisplay();
+    }
+    async _handleFocus() {
+        this._focused = true;
+        if (this.readOnly) {
+            return;
+        }
+        this._oldValue = this.value;
+        if (!this.value || (!this.value.start && !this.value.end)) {
+            this._maskedValue = this._parser.emptyMask;
+            await this.updateComplete;
+            this.select();
+        }
+        else if (this.displayFormat !== this.inputFormat) {
+            this._updateMaskDisplay();
+        }
+    }
+    _handleBlur() {
+        const isSameValue = equal(this._oldValue, this.value);
+        this._focused = false;
+        if (!(this._isMaskComplete() || this._isEmptyMask)) {
+            const parsed = this._parser.parseDateRange(this._maskedValue);
+            if (parsed && (parsed.start || parsed.end)) {
+                this.value = parsed;
+            }
+            else {
+                this.value = null;
+                this._maskedValue = '';
+            }
+        }
+        else {
+            this._updateMaskDisplay();
+        }
+        if (!(this.readOnly || isSameValue)) {
+            this.emitEvent('igcChange', { detail: this.value });
+        }
+        super._handleBlur();
+    }
+    _setCurrentDateTime() {
+        const today = CalendarDay.today.native;
+        this.value = { start: today, end: today };
+        this._emitInputEvent();
+    }
+    _calculatePartNavigationPosition(inputValue, direction) {
+        const cursorPos = this._maskSelection.start;
+        const rangeParts = this._parser.rangeParts;
+        const currentPart = rangeParts.find((p) => p.type !== DateParts.Literal &&
+            cursorPos >= p.start &&
+            cursorPos <= p.end);
+        const isStartOrEndPart = currentPart &&
+            (currentPart.position === DateRangePosition.Start ||
+                currentPart.position === DateRangePosition.End);
+        if (direction === 0) {
+            if (isStartOrEndPart && cursorPos !== currentPart.start) {
+                return currentPart.start;
+            }
+            const prevPart = [...rangeParts]
+                .reverse()
+                .find((p) => p.type !== DateParts.Literal && p.end < cursorPos);
+            return prevPart?.start ?? 0;
+        }
+        if (isStartOrEndPart && cursorPos !== currentPart.end) {
+            return currentPart.end;
+        }
+        const nextPart = rangeParts.find((p) => p.type !== DateParts.Literal && p.start > cursorPos);
+        return nextPart?.end ?? inputValue.length;
+    }
+    _updateMaskDisplay() {
+        if (this._focused) {
+            if (this.value?.start || this.value?.end) {
+                this._maskedValue = this._buildMaskedValue();
+            }
+            else if (!this._maskedValue) {
+                this._maskedValue = this._parser.emptyMask;
+            }
+            return;
+        }
+        this._maskedValue = this._buildDisplayValue();
+    }
+    _performStep(datePart, delta, isDecrement) {
+        if (!this.value?.start && !this.value?.end) {
+            const today = CalendarDay.today.native;
+            this.value = { start: today, end: today };
+            const { start, end } = this._inputSelection;
+            this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
+            return;
+        }
+        super._performStep(datePart, delta, isDecrement);
+    }
+    _commitSpunValue(value) {
+        this.value = value;
+    }
+    _buildDisplayValue() {
+        if (!this.value?.start && !this.value?.end) {
+            return '';
+        }
+        const { start, end } = this.value;
+        const startStr = start
+            ? formatDisplayDate(start, this.locale, this.displayFormat)
+            : '';
+        const endStr = end
+            ? formatDisplayDate(end, this.locale, this.displayFormat)
+            : '';
+        return startStr && endStr
+            ? `${startStr}${this._parser.separator}${endStr}`
+            : startStr || endStr;
+    }
+    _calculateSpunValue(datePart, delta, isDecrement) {
+        const range = datePart;
+        const part = this._parser.getPartByTypeAndPosition(range.part, range.position);
+        const today = CalendarDay.today.native;
+        const defaultValue = { start: today, end: today };
+        if (!part) {
+            return this.value || defaultValue;
+        }
+        const effectiveDelta = delta ?? this._datePartDeltas[range.part] ?? 1;
+        const spinAmount = effectiveDelta * (isDecrement ? -1 : 1);
+        const amPmValue = part.type === DatePartType.AmPm
+            ? this._maskedValue.substring(part.start, part.end)
+            : undefined;
+        return this._parser.spinDateRangePart(part, spinAmount, this.value, this.spinLoop, amPmValue);
+    }
+    _getDatePartAtCursor() {
+        const cursorPos = this._inputSelection.start;
+        let part = this._parser.getDateRangePartForCursor(cursorPos);
+        if (part?.type === DatePartType.Literal) {
+            const nextPart = this._parser.rangeParts.find((p) => p.start >= cursorPos && p.type !== DatePartType.Literal);
+            if (nextPart) {
+                part = nextPart;
+            }
+            else {
+                part = this._parser.rangeParts.findLast((p) => p.end <= cursorPos && p.type !== DatePartType.Literal);
+            }
+        }
+        if (part && part.type !== DatePartType.Literal) {
+            return {
+                part: part.type,
+                position: part.position,
+            };
+        }
+        return undefined;
+    }
+    _getDefaultDatePart() {
+        const firstPart = this._parser.getFirstDatePartForPosition(DateRangePosition.Start);
+        if (firstPart) {
+            return {
+                part: firstPart.type,
+                position: DateRangePosition.Start,
+            };
+        }
+        return undefined;
+    }
+    _buildMaskedValue() {
+        return this._parser.formatDateRange(this.value);
+    }
+    _applyMask(string) {
+        const previous = this._parser.mask;
+        this._parser.mask = string;
+        this._defaultMask = string;
+        this._parser.prompt = this.prompt;
+        if (!this.placeholder || previous === this.placeholder) {
+            this.placeholder = this._parser.mask;
+        }
+    }
+    _syncValueFromMask() {
+        if (!this._isMaskComplete()) {
+            this.value = null;
+            return;
+        }
+        const parsed = this._parser.parseDateRange(this._maskedValue);
+        this.value = parsed?.start || parsed?.end ? parsed : 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.rangeParts.some((p) => p.type === DatePartType.Date ||
+            p.type === DatePartType.Month ||
+            p.type === DatePartType.Year);
+    }
+    hasTimeParts() {
+        return this._parser.rangeParts.some((p) => p.type === DatePartType.Hours ||
+            p.type === DatePartType.Minutes ||
+            p.type === DatePartType.Seconds);
+    }
+}
+__decorate([
+    property({ attribute: false })
+], IgcDateRangeInputComponent.prototype, "value", null);
+//# sourceMappingURL=date-range-input.js.map

package/components/date-range-picker/date-range-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-input.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { CalendarDay } from '../calendar/model.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatDisplayDate } from '../common/i18n/i18n-controller.js';\nimport { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { equal } from '../common/util.js';\nimport {\n  type DatePart,\n  type DatePartDeltas,\n  DatePartType,\n} from '../date-time-input/date-part.js';\nimport {\n  IgcDateTimeInputBaseComponent,\n  type IgcDateTimeInputComponentEventMap,\n} from '../date-time-input/date-time-input.base.js';\nimport { DateParts } from '../date-time-input/datetime-mask-parser.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 type { DateRangeValue } from '../types.js';\nimport {\n  DateRangeMaskParser,\n  type DateRangePart,\n  DateRangePosition,\n} from './date-range-mask-parser.js';\n\nexport interface IgcDateRangeInputEventMap extends Omit<\n  IgcDateTimeInputComponentEventMap,\n  'igcChange'\n> {\n  igcChange: CustomEvent<DateRangeValue | null>;\n}\n\nexport default class IgcDateRangeInputComponent extends IgcDateTimeInputBaseComponent {\n  public static readonly tagName = 'igc-date-range-input';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcDateRangeInputComponent);\n  }\n\n  //#region Private state and properties\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: { start: null, end: null },\n    transformers: FormValueDateRangeTransformers,\n  });\n\n  protected override readonly _themes = addThemingController(this, all);\n  protected override readonly _parser = new DateRangeMaskParser();\n\n  protected override get _datePartDeltas(): DatePartDeltas {\n    return {\n      date: 1,\n      month: 1,\n      year: 1,\n    };\n  }\n\n  protected _oldValue: DateRangeValue | null = null;\n\n  // #endregion\n\n  // #region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false, true) */\n  /**\n   * The value of the date range input.\n   * @attr\n   */\n  @property({ attribute: false })\n  public set value(value: DateRangeValue | null) {\n    this._formValue.setValueAndFormState(value);\n    this._updateMaskDisplay();\n  }\n\n  public get value(): DateRangeValue | null {\n    return this._formValue.value;\n  }\n\n  // #endregion\n\n  // #region Lifecycle Hooks\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this._initializeDefaultMask();\n    this._updateMaskDisplay();\n  }\n\n  // #endregion\n\n  // #region Event Handlers Overrides\n\n  protected override 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 || (!this.value.start && !this.value.end)) {\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    const isSameValue = equal(this._oldValue, this.value);\n\n    this._focused = false;\n\n    if (!(this._isMaskComplete() || this._isEmptyMask)) {\n      const parsed = this._parser.parseDateRange(this._maskedValue);\n\n      if (parsed && (parsed.start || parsed.end)) {\n        this.value = parsed;\n      } else {\n        this.value = null;\n        this._maskedValue = '';\n      }\n    } else {\n      this._updateMaskDisplay();\n    }\n\n    if (!(this.readOnly || isSameValue)) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n\n    super._handleBlur();\n  }\n\n  // #endregion\n\n  // #region Keybindings overrides\n\n  protected override _setCurrentDateTime(): void {\n    const today = CalendarDay.today.native;\n    this.value = { start: today, end: today };\n    this._emitInputEvent();\n  }\n\n  protected override _calculatePartNavigationPosition(\n    inputValue: string,\n    direction: number\n  ): number {\n    const cursorPos = this._maskSelection.start;\n    const rangeParts = this._parser.rangeParts;\n\n    const currentPart = rangeParts.find(\n      (p) =>\n        p.type !== DateParts.Literal &&\n        cursorPos >= p.start &&\n        cursorPos <= p.end\n    );\n\n    const isStartOrEndPart =\n      currentPart &&\n      (currentPart.position === DateRangePosition.Start ||\n        currentPart.position === DateRangePosition.End);\n\n    if (direction === 0) {\n      // Backward: if inside a start/end part, move to its start; else, move to previous part's start\n      if (isStartOrEndPart && cursorPos !== currentPart.start) {\n        return currentPart.start;\n      }\n      const prevPart = [...rangeParts]\n        .reverse()\n        .find((p) => p.type !== DateParts.Literal && p.end < cursorPos);\n      return prevPart?.start ?? 0;\n    }\n\n    // Forward: if inside a start/end part, move to its end; else, move to next part's end\n    if (isStartOrEndPart && cursorPos !== currentPart.end) {\n      return currentPart.end;\n    }\n    const nextPart = rangeParts.find(\n      (p) => p.type !== DateParts.Literal && p.start > cursorPos\n    );\n    return nextPart?.end ?? inputValue.length;\n  }\n\n  // #endregion\n\n  // #region Internal API Overrides\n\n  protected override _updateMaskDisplay(): void {\n    if (this._focused) {\n      // Only reset mask from value when value is non-null (i.e. after spinning or programmatic set).\n      // When value is null the user is mid-typing — leave _maskedValue unchanged.\n      if (this.value?.start || this.value?.end) {\n        this._maskedValue = this._buildMaskedValue();\n      } else if (!this._maskedValue) {\n        this._maskedValue = this._parser.emptyMask;\n      }\n      return;\n    }\n\n    this._maskedValue = this._buildDisplayValue();\n  }\n\n  protected override _performStep(\n    datePart: unknown,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): void {\n    // If no value exists, set to today's date first\n    if (!this.value?.start && !this.value?.end) {\n      const today = CalendarDay.today.native;\n      this.value = { start: today, end: today };\n      const { start, end } = this._inputSelection;\n      this.updateComplete.then(() =>\n        this._input?.setSelectionRange(start, end)\n      );\n      return;\n    }\n\n    super._performStep(datePart, delta, isDecrement);\n  }\n\n  protected override _commitSpunValue(value: unknown): void {\n    this.value = value as DateRangeValue;\n  }\n\n  protected override _buildDisplayValue(): string {\n    if (!this.value?.start && !this.value?.end) {\n      return '';\n    }\n\n    const { start, end } = this.value;\n    const startStr = start\n      ? formatDisplayDate(start, this.locale, this.displayFormat)\n      : '';\n    const endStr = end\n      ? formatDisplayDate(end, this.locale, this.displayFormat)\n      : '';\n    return startStr && endStr\n      ? `${startStr}${this._parser.separator}${endStr}`\n      : startStr || endStr;\n  }\n\n  protected override _calculateSpunValue(\n    datePart: unknown,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): DateRangeValue {\n    const range = datePart as DateRangePart;\n    const part = this._parser.getPartByTypeAndPosition(\n      range.part as DatePartType,\n      range.position\n    );\n\n    const today = CalendarDay.today.native;\n    const defaultValue = { start: today, end: today };\n\n    if (!part) {\n      return this.value || defaultValue;\n    }\n\n    const effectiveDelta =\n      delta ?? this._datePartDeltas[range.part as keyof DatePartDeltas] ?? 1;\n    const spinAmount = effectiveDelta * (isDecrement ? -1 : 1);\n\n    // For AM/PM spinning, extract the current AM/PM value from the mask\n    const amPmValue =\n      part.type === DatePartType.AmPm\n        ? this._maskedValue.substring(part.start, part.end)\n        : undefined;\n\n    return this._parser.spinDateRangePart(\n      part,\n      spinAmount,\n      this.value,\n      this.spinLoop,\n      amPmValue\n    );\n  }\n\n  /**\n   * Gets the date range part at the current cursor position.\n   * If the cursor is at a literal, finds the nearest non-literal part.\n   * Returns undefined if no valid part is found.\n   */\n  protected override _getDatePartAtCursor(): DateRangePart | undefined {\n    const cursorPos = this._inputSelection.start;\n    let part = this._parser.getDateRangePartForCursor(cursorPos);\n\n    // If cursor is at a literal, find the nearest non-literal part\n    if (part?.type === DatePartType.Literal) {\n      const nextPart = this._parser.rangeParts.find(\n        (p) => p.start >= cursorPos && p.type !== DatePartType.Literal\n      );\n      if (nextPart) {\n        part = nextPart;\n      } else {\n        part = this._parser.rangeParts.findLast(\n          (p) => p.end <= cursorPos && p.type !== DatePartType.Literal\n        );\n      }\n    }\n\n    if (part && part.type !== DatePartType.Literal) {\n      return {\n        part: part.type as DatePart,\n        position: part.position,\n      };\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Gets the default date range part to target when the input is not focused.\n   * Returns the first date part at the start position.\n   */\n  protected override _getDefaultDatePart(): DateRangePart | undefined {\n    const firstPart = this._parser.getFirstDatePartForPosition(\n      DateRangePosition.Start\n    );\n    if (firstPart) {\n      return {\n        part: firstPart.type as DatePart,\n        position: DateRangePosition.Start,\n      };\n    }\n\n    return undefined;\n  }\n\n  protected override _buildMaskedValue(): string {\n    return this._parser.formatDateRange(this.value);\n  }\n\n  protected override _applyMask(string: string): void {\n    const previous = this._parser.mask;\n\n    this._parser.mask = string;\n    this._defaultMask = string;\n    this._parser.prompt = this.prompt;\n\n    // Update placeholder if not set or if it matches the previous format\n    if (!this.placeholder || previous === this.placeholder) {\n      this.placeholder = this._parser.mask;\n    }\n  }\n\n  protected override _syncValueFromMask(): void {\n    if (!this._isMaskComplete()) {\n      this.value = null;\n      return;\n    }\n\n    const parsed = this._parser.parseDateRange(this._maskedValue);\n    this.value = parsed?.start || parsed?.end ? parsed : null;\n  }\n\n  // #region Public API Overrides\n\n  /** Increments a date/time portion. */\n  public override stepUp(datePart?: DateRangePart, delta?: number): void {\n    super.stepUp(datePart, delta);\n  }\n\n  /** Decrements a date/time portion. */\n  public override stepDown(datePart?: DateRangePart, 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  public override hasDateParts(): boolean {\n    return this._parser.rangeParts.some(\n      (p) =>\n        p.type === DatePartType.Date ||\n        p.type === DatePartType.Month ||\n        p.type === DatePartType.Year\n    );\n  }\n\n  public override hasTimeParts(): boolean {\n    return this._parser.rangeParts.some(\n      (p) =>\n        p.type === DatePartType.Hours ||\n        p.type === DatePartType.Minutes ||\n        p.type === DatePartType.Seconds\n    );\n  }\n\n  // #endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-date-range-input': IgcDateRangeInputComponent;\n  }\n}\n"]}

package/components/date-range-picker/date-range-mask-parser.d.ts

@@ -0,0 +1,106 @@
+import { type DatePart, DatePartType, type IDatePart } from '../date-time-input/date-part.js';
+import { type DateTimeMaskOptions } from '../date-time-input/datetime-mask-parser.js';
+import { MaskParser } from '../mask-input/mask-parser.js';
+import type { DateRangeValue } from '../types.js';
+export interface DateRangePart {
+    part: DatePart;
+    position: DateRangePosition;
+}
+/** Position of a date part within the date range */
+export declare enum DateRangePosition {
+    Start = "start",
+    End = "end",
+    Separator = "separator"
+}
+/** Extended date part with range position information */
+export interface IDateRangePart extends IDatePart {
+    position: DateRangePosition;
+}
+/** Options for the DateRangeMaskParser */
+export interface DateRangeMaskOptions extends DateTimeMaskOptions {
+    /** Separator (defaults to ' - ') */
+    separator?: string;
+}
+/**
+ * A specialized mask parser for date range input fields.
+ * Uses composition with two DateTimeMaskParser instances to handle start and end dates.
+ *
+ * Accepts a single date format (e.g., 'MM/dd/yyyy') which creates two parsers
+ * internally, one for the start date and one for the end date.
+ *
+ * @example
+ * ```ts
+ * const parser = new DateRangeMaskParser({ format: 'MM/dd/yyyy' });
+ * parser.parseDateRange('12/25/2023 - 12/31/2023'); // Returns DateRangeValue
+ * parser.formatDateRange({ start: date1, end: date2 }); // Returns formatted string
+ * ```
+ */
+export declare class DateRangeMaskParser extends MaskParser {
+    private _startParser;
+    private _endParser;
+    /** Cached date range parts with position information */
+    private _rangeParts;
+    /** The separator between start and end dates */
+    private _separator;
+    /** Start position of the separator in the mask */
+    private _separatorStart;
+    /** End position of the separator in the mask */
+    private _separatorEnd;
+    /**
+     * Gets the parsed date range parts with position information.
+     */
+    get rangeParts(): ReadonlyArray<IDateRangePart>;
+    /**
+     * Gets the separator string used between start and end dates.
+     */
+    get separator(): string;
+    constructor(options?: DateRangeMaskOptions);
+    /**
+     * Overrides base class to convert date format to mask format
+     * before parsing literals. This ensures date format characters
+     * (M, d, y, etc.) are properly converted to mask characters (0, L).
+     */
+    protected _parseMaskLiterals(): void;
+    /**
+     * Builds the range parts array by combining parts from start and end parsers
+     * and adding position information.
+     */
+    private _buildRangeParts;
+    /**
+     * Sets a new date format and updates both parsers.
+     */
+    set mask(value: string);
+    get mask(): string;
+    /**
+     * Parses a masked string into a DateRangeValue using the two internal parsers.
+     * Returns null if the string cannot be parsed.
+     */
+    parseDateRange(masked: string): DateRangeValue | null;
+    /**
+     * Formats a DateRangeValue into a masked string using the two internal parsers.
+     */
+    formatDateRange(range: DateRangeValue | null): string;
+    /**
+     * Gets the date range part at a cursor position.
+     * Uses exclusive end for precise character targeting.
+     */
+    getDateRangePartAtPosition(position: number): IDateRangePart | undefined;
+    /**
+     * Gets the date range part for cursor (inclusive end).
+     * Handles the edge case where cursor is at the end of the last part.
+     */
+    getDateRangePartForCursor(position: number): IDateRangePart | undefined;
+    /**
+     * Gets a specific part type for a position.
+     */
+    getPartByTypeAndPosition(type: DatePartType, position: DateRangePosition): IDateRangePart | undefined;
+    /**
+     * Gets the first non-literal date part for a position.
+     */
+    getFirstDatePartForPosition(position: DateRangePosition): IDateRangePart | undefined;
+    /**
+     * Spins a date part within the range (for stepUp/stepDown functionality).
+     * Delegates to the underlying date part's spin method.
+     */
+    spinDateRangePart(part: IDateRangePart, delta: number, currentValue: DateRangeValue | null, spinLoop: boolean, amPmValue?: string): DateRangeValue;
+}

package/components/date-range-picker/date-range-mask-parser.js

@@ -0,0 +1,121 @@
+import { DatePartType, } from '../date-time-input/date-part.js';
+import { DateTimeMaskParser, DEFAULT_DATETIME_FORMAT, } from '../date-time-input/datetime-mask-parser.js';
+import { MaskParser } from '../mask-input/mask-parser.js';
+export var DateRangePosition;
+(function (DateRangePosition) {
+    DateRangePosition["Start"] = "start";
+    DateRangePosition["End"] = "end";
+    DateRangePosition["Separator"] = "separator";
+})(DateRangePosition || (DateRangePosition = {}));
+const DEFAULT_SEPARATOR = ' - ';
+export class DateRangeMaskParser extends MaskParser {
+    get rangeParts() {
+        return this._rangeParts;
+    }
+    get separator() {
+        return this._separator;
+    }
+    constructor(options) {
+        const format = options?.format || DEFAULT_DATETIME_FORMAT;
+        const separator = options?.separator || DEFAULT_SEPARATOR;
+        const promptCharacter = options?.promptCharacter;
+        const rangeFormat = `${format}${separator}${format}`;
+        super(options?.promptCharacter
+            ? { format: rangeFormat, promptCharacter: options.promptCharacter }
+            : { format: rangeFormat });
+        this._rangeParts = [];
+        this._startParser = new DateTimeMaskParser({ format, promptCharacter });
+        this._endParser = new DateTimeMaskParser({ format, promptCharacter });
+        this._separator = separator;
+        this._separatorStart = this._startParser.mask.length;
+        this._separatorEnd = this._separatorStart + separator.length;
+        this._buildRangeParts();
+    }
+    _parseMaskLiterals() {
+        const dateFormat = this._options.format;
+        const maskFormat = DateTimeMaskParser.convertDateFormatToMaskFormat(dateFormat);
+        const originalFormat = this._options.format;
+        this._options.format = maskFormat;
+        super._parseMaskLiterals();
+        this._options.format = originalFormat;
+    }
+    _buildRangeParts() {
+        const startParts = this._startParser.dateParts.map((part) => ({
+            ...part,
+            position: DateRangePosition.Start,
+            getValue: part.getValue.bind(part),
+            validate: part.validate.bind(part),
+            spin: part.spin.bind(part),
+        }));
+        const endParts = this._endParser.dateParts.map((part) => ({
+            ...part,
+            start: part.start + this._separatorEnd,
+            end: part.end + this._separatorEnd,
+            position: DateRangePosition.End,
+            getValue: part.getValue.bind(part),
+            validate: part.validate.bind(part),
+            spin: part.spin.bind(part),
+        }));
+        this._rangeParts = [...startParts, ...endParts];
+    }
+    set mask(value) {
+        this._startParser.mask = value;
+        this._endParser.mask = value;
+        this._separatorStart = this._startParser.mask.length;
+        this._separatorEnd = this._separatorStart + this._separator.length;
+        const rangeFormat = `${value}${this._separator}${value}`;
+        super.mask = rangeFormat;
+        this._buildRangeParts();
+    }
+    get mask() {
+        return super.mask;
+    }
+    parseDateRange(masked) {
+        if (!masked || masked === this.emptyMask) {
+            return null;
+        }
+        const startString = masked.substring(0, this._separatorStart);
+        const endString = masked.substring(this._separatorEnd);
+        const start = this._startParser.parseDate(startString);
+        const end = this._endParser.parseDate(endString);
+        return { start, end };
+    }
+    formatDateRange(range) {
+        const startString = range?.start
+            ? this._startParser.formatDate(range.start)
+            : this._startParser.emptyMask;
+        const endString = range?.end
+            ? this._endParser.formatDate(range.end)
+            : this._endParser.emptyMask;
+        return startString + this._separator + endString;
+    }
+    getDateRangePartAtPosition(position) {
+        return this._rangeParts.find((part) => position >= part.start && position < part.end);
+    }
+    getDateRangePartForCursor(position) {
+        return this._rangeParts.find((part) => position >= part.start && position <= part.end);
+    }
+    getPartByTypeAndPosition(type, position) {
+        return this._rangeParts.find((p) => p.type === type && p.position === position);
+    }
+    getFirstDatePartForPosition(position) {
+        return this._rangeParts.find((p) => p.position === position && p.type !== DatePartType.Literal);
+    }
+    spinDateRangePart(part, delta, currentValue, spinLoop, amPmValue) {
+        const value = currentValue || { start: null, end: null };
+        const targetDate = part.position === DateRangePosition.Start ? value.start : value.end;
+        const dateToSpin = targetDate || new Date();
+        const newDate = new Date(dateToSpin.getTime());
+        const spinOptions = {
+            date: newDate,
+            spinLoop,
+            originalDate: dateToSpin,
+            amPmValue,
+        };
+        part.spin(delta, spinOptions);
+        return part.position === DateRangePosition.Start
+            ? { ...value, start: newDate }
+            : { ...value, end: newDate };
+    }
+}
+//# sourceMappingURL=date-range-mask-parser.js.map

package/components/date-range-picker/date-range-mask-parser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-mask-parser.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-mask-parser.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  type DatePart,\n  DatePartType,\n  type IDatePart,\n  type SpinOptions,\n} from '../date-time-input/date-part.js';\nimport {\n  type DateTimeMaskOptions,\n  DateTimeMaskParser,\n  DEFAULT_DATETIME_FORMAT,\n} from '../date-time-input/datetime-mask-parser.js';\nimport { MaskParser } from '../mask-input/mask-parser.js';\nimport type { DateRangeValue } from '../types.js';\n\n//#region Types and Enums\n\nexport interface DateRangePart {\n  part: DatePart;\n  position: DateRangePosition;\n}\n\n/** Position of a date part within the date range */\nexport enum DateRangePosition {\n  Start = 'start',\n  End = 'end',\n  Separator = 'separator',\n}\n\n/** Extended date part with range position information */\nexport interface IDateRangePart extends IDatePart {\n  position: DateRangePosition;\n}\n\n/** Options for the DateRangeMaskParser */\nexport interface DateRangeMaskOptions extends DateTimeMaskOptions {\n  /** Separator (defaults to ' - ') */\n  separator?: string;\n}\n\n//#endregion\n\n//#region Constants\n\n/** Default separator between start and end dates */\nconst DEFAULT_SEPARATOR = ' - ';\n\n//#endregion\n\n/**\n * A specialized mask parser for date range input fields.\n * Uses composition with two DateTimeMaskParser instances to handle start and end dates.\n *\n * Accepts a single date format (e.g., 'MM/dd/yyyy') which creates two parsers\n * internally, one for the start date and one for the end date.\n *\n * @example\n * ```ts\n * const parser = new DateRangeMaskParser({ format: 'MM/dd/yyyy' });\n * parser.parseDateRange('12/25/2023 - 12/31/2023'); // Returns DateRangeValue\n * parser.formatDateRange({ start: date1, end: date2 }); // Returns formatted string\n * ```\n */\nexport class DateRangeMaskParser extends MaskParser {\n  private _startParser: DateTimeMaskParser;\n  private _endParser: DateTimeMaskParser;\n\n  /** Cached date range parts with position information */\n  private _rangeParts: IDateRangePart[] = [];\n\n  /** The separator between start and end dates */\n  private _separator: string;\n\n  /** Start position of the separator in the mask */\n  private _separatorStart: number;\n\n  /** End position of the separator in the mask */\n  private _separatorEnd: number;\n\n  /**\n   * Gets the parsed date range parts with position information.\n   */\n  public get rangeParts(): ReadonlyArray<IDateRangePart> {\n    return this._rangeParts;\n  }\n\n  /**\n   * Gets the separator string used between start and end dates.\n   */\n  public get separator(): string {\n    return this._separator;\n  }\n\n  constructor(options?: DateRangeMaskOptions) {\n    const format = options?.format || DEFAULT_DATETIME_FORMAT;\n    const separator = options?.separator || DEFAULT_SEPARATOR;\n    const promptCharacter = options?.promptCharacter;\n\n    // Build the combined range format for the parent MaskParser\n    const rangeFormat = `${format}${separator}${format}`;\n\n    super(\n      options?.promptCharacter\n        ? { format: rangeFormat, promptCharacter: options.promptCharacter }\n        : { format: rangeFormat }\n    );\n\n    // Create two parsers for start and end dates\n    this._startParser = new DateTimeMaskParser({ format, promptCharacter });\n    this._endParser = new DateTimeMaskParser({ format, promptCharacter });\n    this._separator = separator;\n\n    this._separatorStart = this._startParser.mask.length;\n    this._separatorEnd = this._separatorStart + separator.length;\n\n    this._buildRangeParts();\n  }\n\n  //#region Mask Format Conversion\n\n  /**\n   * Overrides base class to convert date format to mask format\n   * before parsing literals. This ensures date format characters\n   * (M, d, y, etc.) are properly converted to mask characters (0, L).\n   */\n  protected override _parseMaskLiterals(): void {\n    // Convert the range format to mask format\n    // e.g., \"M/d/yyyy - M/d/yyyy\" → \"0/0/0000 - 0/0/0000\"\n    const dateFormat = this._options.format;\n    const maskFormat =\n      DateTimeMaskParser.convertDateFormatToMaskFormat(dateFormat);\n\n    // Temporarily set the converted format for base class parsing\n    const originalFormat = this._options.format;\n    this._options.format = maskFormat;\n\n    super._parseMaskLiterals();\n\n    // Restore the original date format\n    this._options.format = originalFormat;\n  }\n\n  //#endregion\n\n  /**\n   * Builds the range parts array by combining parts from start and end parsers\n   * and adding position information.\n   */\n  private _buildRangeParts(): void {\n    const startParts = this._startParser.dateParts.map(\n      (part): IDateRangePart => ({\n        ...part,\n        position: DateRangePosition.Start,\n        getValue: part.getValue.bind(part),\n        validate: part.validate.bind(part),\n        spin: part.spin.bind(part),\n      })\n    );\n\n    const endParts = this._endParser.dateParts.map(\n      (part): IDateRangePart => ({\n        ...part,\n        // Adjust positions for end date (offset by separator)\n        start: part.start + this._separatorEnd,\n        end: part.end + this._separatorEnd,\n        position: DateRangePosition.End,\n        getValue: part.getValue.bind(part),\n        validate: part.validate.bind(part),\n        spin: part.spin.bind(part),\n      })\n    );\n\n    this._rangeParts = [...startParts, ...endParts];\n  }\n\n  /**\n   * Sets a new date format and updates both parsers.\n   */\n  public override set mask(value: string) {\n    this._startParser.mask = value;\n    this._endParser.mask = value;\n\n    this._separatorStart = this._startParser.mask.length;\n    this._separatorEnd = this._separatorStart + this._separator.length;\n\n    const rangeFormat = `${value}${this._separator}${value}`;\n    super.mask = rangeFormat;\n\n    this._buildRangeParts();\n  }\n\n  public override get mask(): string {\n    return super.mask;\n  }\n\n  //#region Date Range Parsing\n\n  /**\n   * Parses a masked string into a DateRangeValue using the two internal parsers.\n   * Returns null if the string cannot be parsed.\n   */\n  public parseDateRange(masked: string): DateRangeValue | null {\n    if (!masked || masked === this.emptyMask) {\n      return null;\n    }\n\n    const startString = masked.substring(0, this._separatorStart);\n    const endString = masked.substring(this._separatorEnd);\n\n    const start = this._startParser.parseDate(startString);\n    const end = this._endParser.parseDate(endString);\n\n    return { start, end };\n  }\n\n  //#endregion\n\n  //#region Date Range Formatting\n\n  /**\n   * Formats a DateRangeValue into a masked string using the two internal parsers.\n   */\n  public formatDateRange(range: DateRangeValue | null): string {\n    const startString = range?.start\n      ? this._startParser.formatDate(range.start)\n      : this._startParser.emptyMask;\n\n    const endString = range?.end\n      ? this._endParser.formatDate(range.end)\n      : this._endParser.emptyMask;\n\n    return startString + this._separator + endString;\n  }\n\n  //#endregion\n\n  //#region Part Queries\n\n  /**\n   * Gets the date range part at a cursor position.\n   * Uses exclusive end for precise character targeting.\n   */\n  public getDateRangePartAtPosition(\n    position: number\n  ): IDateRangePart | undefined {\n    return this._rangeParts.find(\n      (part) => position >= part.start && position < part.end\n    );\n  }\n\n  /**\n   * Gets the date range part for cursor (inclusive end).\n   * Handles the edge case where cursor is at the end of the last part.\n   */\n  public getDateRangePartForCursor(\n    position: number\n  ): IDateRangePart | undefined {\n    return this._rangeParts.find(\n      (part) => position >= part.start && position <= part.end\n    );\n  }\n\n  /**\n   * Gets a specific part type for a position.\n   */\n  public getPartByTypeAndPosition(\n    type: DatePartType,\n    position: DateRangePosition\n  ): IDateRangePart | undefined {\n    return this._rangeParts.find(\n      (p) => p.type === type && p.position === position\n    );\n  }\n\n  /**\n   * Gets the first non-literal date part for a position.\n   */\n  public getFirstDatePartForPosition(\n    position: DateRangePosition\n  ): IDateRangePart | undefined {\n    return this._rangeParts.find(\n      (p) => p.position === position && p.type !== DatePartType.Literal\n    );\n  }\n\n  //#endregion\n\n  //#region Spinning Support\n\n  /**\n   * Spins a date part within the range (for stepUp/stepDown functionality).\n   * Delegates to the underlying date part's spin method.\n   */\n  public spinDateRangePart(\n    part: IDateRangePart,\n    delta: number,\n    currentValue: DateRangeValue | null,\n    spinLoop: boolean,\n    amPmValue?: string\n  ): DateRangeValue {\n    const value = currentValue || { start: null, end: null };\n\n    const targetDate =\n      part.position === DateRangePosition.Start ? value.start : value.end;\n\n    // If no date exists, create one with today's date\n    const dateToSpin = targetDate || new Date();\n\n    // Create a new date instance to spin\n    const newDate = new Date(dateToSpin.getTime());\n\n    // Spin using the part's built-in spin method\n    const spinOptions: SpinOptions = {\n      date: newDate,\n      spinLoop,\n      originalDate: dateToSpin,\n      amPmValue,\n    };\n\n    part.spin(delta, spinOptions);\n\n    return part.position === DateRangePosition.Start\n      ? { ...value, start: newDate }\n      : { ...value, end: newDate };\n  }\n\n  //#endregion\n}\n"]}