igniteui-webcomponents 7.3.0-beta.0 → 7.3.0

package/components/date-range-picker/predefined-ranges-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"predefined-ranges-area.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/predefined-ranges-area.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  DateRangePickerResourceStringsEN,\n} from 'igniteui-i18n-core';\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { CalendarDay } from '#internals/date/model.js';\nimport { watch } from '#internals/decorators/watch.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { IgcDateRangePickerResourceStrings } from '#internals/i18n/EN/date-range-picker.resources.js';\nimport { addI18nController } from '#internals/i18n/i18n-controller.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport type {\n  CustomDateRange,\n  DateRangePickerResourceStringsType,\n  DateRangeValue,\n} from './date-range-picker.js';\nimport { styles } from './predefined-ranges-area.base.css.js';\nimport { all } from './themes/ranges-themes.js';\nimport { styles as shared } from './themes/shared/predefined-ranges-area.common.css.js';\n\n/* blazorSuppress */\n/**\n * The predefined ranges area component is used within the date range picker and it\n * displays a set of chips with predefined date ranges. The component allows users to quickly select\n * a predefined date range value. Users can also provide custom ranges to be displayed as chips.\n *\n * @element igc-predefined-ranges-area\n */\nexport default class IgcPredefinedRangesAreaComponent extends LitElement {\n  public static readonly tagName = 'igc-predefined-ranges-area';\n  public static override styles = [styles, shared];\n\n  private readonly _i18nController = addI18nController<\n    IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType\n  >(this, {\n    defaultEN: Object.assign(\n      {},\n      DateRangePickerResourceStringsEN,\n      CalendarResourceStringsEN\n    ),\n    resourceMapName: 'date-range-picker',\n  });\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPredefinedRangesAreaComponent, IgcChipComponent);\n  }\n\n  @state()\n  private _predefinedRanges: CustomDateRange[] = [];\n\n  /**\n   * Whether the control will show chips with predefined ranges.\n   * @attr use-predefined-ranges\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'use-predefined-ranges',\n  })\n  public usePredefinedRanges = false;\n\n  /**\n   * Renders chips with custom ranges based on the elements of the array.\n   */\n  @property({ attribute: false })\n  public customRanges: CustomDateRange[] = [];\n\n  /** The resource strings of the date range area component. */\n  @property({ attribute: false })\n  public set resourceStrings(\n    value:\n      | IgcDateRangePickerResourceStrings\n      | DateRangePickerResourceStringsType\n  ) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IgcDateRangePickerResourceStrings &\n    DateRangePickerResourceStringsType {\n    return this._i18nController.resourceStrings;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  @watch('resourceStrings')\n  protected _updatePredefinedRanges(): void {\n    this._predefinedRanges = getPredefinedRanges(this.resourceStrings);\n  }\n\n  private _handleRangeSelect(range: DateRangeValue): void {\n    this.dispatchEvent(new CustomEvent('igcRangeSelect', { detail: range }));\n  }\n\n  protected *_renderDateRanges() {\n    const ranges = this.usePredefinedRanges\n      ? [...this._predefinedRanges, ...this.customRanges]\n      : this.customRanges;\n\n    for (const { label, dateRange } of ranges) {\n      yield html`\n        <igc-chip @click=${() => this._handleRangeSelect(dateRange)}>\n          ${label}\n        </igc-chip>\n      `;\n    }\n  }\n\n  protected override render() {\n    return html`<div part=\"ranges\">${this._renderDateRanges()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-predefined-ranges-area': IgcPredefinedRangesAreaComponent;\n  }\n}\n\ntype PredefinedRangeKey =\n  | 'last7Days'\n  | 'currentMonth'\n  | 'last30Days'\n  | 'yearToDate';\n\nfunction getPredefinedRanges(\n  resourceStrings: DateRangePickerResourceStringsType\n): CustomDateRange[] {\n  const today = CalendarDay.today;\n\n  const ranges: {\n    key: PredefinedRangeKey;\n    resourceKey: keyof DateRangePickerResourceStringsType;\n    getDateRange: () => { start: Date; end: Date };\n  }[] = [\n    {\n      key: 'last7Days',\n      resourceKey: 'date_range_picker_last7Days',\n      getDateRange: () => ({\n        start: today.add('day', -7).native,\n        end: today.native,\n      }),\n    },\n    {\n      key: 'currentMonth',\n      resourceKey: 'date_range_picker_currentMonth',\n      getDateRange: () => ({\n        start: today.set({ date: 1 }).native,\n        end: today.set({ date: 1 }).add('month', 1).add('day', -1).native,\n      }),\n    },\n    {\n      key: 'last30Days',\n      resourceKey: 'date_range_picker_last30Days',\n      getDateRange: () => ({\n        start: today.add('day', -29).native,\n        end: today.native,\n      }),\n    },\n    {\n      key: 'yearToDate',\n      resourceKey: 'date_range_picker_yearToDate',\n      getDateRange: () => ({\n        start: today.set({ year: today.year, month: 0, date: 1 }).native,\n        end: today.native,\n      }),\n    },\n  ];\n\n  return ranges.map((range) => ({\n    label: resourceStrings[range.resourceKey]!,\n    dateRange: range.getDateRange(),\n  }));\n}\n"]}
+{"version":3,"file":"predefined-ranges-area.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/predefined-ranges-area.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  DateRangePickerResourceStringsEN,\n} from 'igniteui-i18n-core';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { CalendarDay } from '#internals/date/model.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { IgcDateRangePickerResourceStrings } from '#internals/i18n/EN/date-range-picker.resources.js';\nimport { addI18nController } from '#internals/i18n/i18n-controller.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport type {\n  CustomDateRange,\n  DateRangePickerResourceStringsType,\n  DateRangeValue,\n} from './date-range-picker.js';\nimport { styles } from './predefined-ranges-area.base.css.js';\nimport { all } from './themes/ranges-themes.js';\nimport { styles as shared } from './themes/shared/predefined-ranges-area.common.css.js';\n\n/* blazorSuppress */\n/**\n * The predefined ranges area component is used within the date range picker and it\n * displays a set of chips with predefined date ranges. The component allows users to quickly select\n * a predefined date range value. Users can also provide custom ranges to be displayed as chips.\n *\n * @element igc-predefined-ranges-area\n */\nexport default class IgcPredefinedRangesAreaComponent extends LitElement {\n  public static readonly tagName = 'igc-predefined-ranges-area';\n  public static override styles = [styles, shared];\n\n  private readonly _i18nController = addI18nController<\n    IgcDateRangePickerResourceStrings | DateRangePickerResourceStringsType\n  >(this, {\n    defaultEN: Object.assign(\n      {},\n      DateRangePickerResourceStringsEN,\n      CalendarResourceStringsEN\n    ),\n    resourceMapName: 'date-range-picker',\n  });\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcPredefinedRangesAreaComponent, IgcChipComponent);\n  }\n\n  @state()\n  private _predefinedRanges: CustomDateRange[] = [];\n\n  /**\n   * Whether the control will show chips with predefined ranges.\n   * @attr use-predefined-ranges\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'use-predefined-ranges',\n  })\n  public usePredefinedRanges = false;\n\n  /**\n   * Renders chips with custom ranges based on the elements of the array.\n   */\n  @property({ attribute: false })\n  public customRanges: CustomDateRange[] = [];\n\n  /** The resource strings of the date range area component. */\n  @property({ attribute: false })\n  public set resourceStrings(\n    value:\n      | IgcDateRangePickerResourceStrings\n      | DateRangePickerResourceStringsType\n  ) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IgcDateRangePickerResourceStrings &\n    DateRangePickerResourceStringsType {\n    return this._i18nController.resourceStrings;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('resourceStrings')) {\n      this._predefinedRanges = getPredefinedRanges(this.resourceStrings);\n    }\n  }\n\n  private _handleRangeSelect(range: DateRangeValue): void {\n    this.dispatchEvent(new CustomEvent('igcRangeSelect', { detail: range }));\n  }\n\n  protected *_renderDateRanges() {\n    const ranges = this.usePredefinedRanges\n      ? [...this._predefinedRanges, ...this.customRanges]\n      : this.customRanges;\n\n    for (const { label, dateRange } of ranges) {\n      yield html`\n        <igc-chip @click=${() => this._handleRangeSelect(dateRange)}>\n          ${label}\n        </igc-chip>\n      `;\n    }\n  }\n\n  protected override render() {\n    return html`<div part=\"ranges\">${this._renderDateRanges()}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-predefined-ranges-area': IgcPredefinedRangesAreaComponent;\n  }\n}\n\ntype PredefinedRangeKey =\n  | 'last7Days'\n  | 'currentMonth'\n  | 'last30Days'\n  | 'yearToDate';\n\nfunction getPredefinedRanges(\n  resourceStrings: DateRangePickerResourceStringsType\n): CustomDateRange[] {\n  const today = CalendarDay.today;\n\n  const ranges: {\n    key: PredefinedRangeKey;\n    resourceKey: keyof DateRangePickerResourceStringsType;\n    getDateRange: () => { start: Date; end: Date };\n  }[] = [\n    {\n      key: 'last7Days',\n      resourceKey: 'date_range_picker_last7Days',\n      getDateRange: () => ({\n        start: today.add('day', -7).native,\n        end: today.native,\n      }),\n    },\n    {\n      key: 'currentMonth',\n      resourceKey: 'date_range_picker_currentMonth',\n      getDateRange: () => ({\n        start: today.set({ date: 1 }).native,\n        end: today.set({ date: 1 }).add('month', 1).add('day', -1).native,\n      }),\n    },\n    {\n      key: 'last30Days',\n      resourceKey: 'date_range_picker_last30Days',\n      getDateRange: () => ({\n        start: today.add('day', -29).native,\n        end: today.native,\n      }),\n    },\n    {\n      key: 'yearToDate',\n      resourceKey: 'date_range_picker_yearToDate',\n      getDateRange: () => ({\n        start: today.set({ year: today.year, month: 0, date: 1 }).native,\n        end: today.native,\n      }),\n    },\n  ];\n\n  return ranges.map((range) => ({\n    label: resourceStrings[range.resourceKey]!,\n    dateRange: range.getDateRange(),\n  }));\n}\n"]}

package/components/date-range-picker/validators.d.ts

@@ -1,4 +1,4 @@
-import type { Validator } from '#internals/validators.js';
+import { type Validator } from '#internals/validators.js';
 import type { DateRangeValue } from '../types.js';
 import type IgcDateRangePickerComponent from './date-range-picker.js';
 export declare const minDateRangeValidator: Validator<IgcDateRangePickerComponent>;

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

@@ -1,27 +1,14 @@
 import { ValidationResourceStringsEN } from 'igniteui-i18n-core';
-import { isDateExceedingMax, isDateLessThanMin, } from '#internals/date/compare.js';
 import { calendarRange } from '#internals/date/model.js';
 import { isEmpty } from '#internals/utils/arrays.js';
 import { formatString } from '#internals/utils/strings.js';
+import { createMaxDateTimeValidator, createMinDateTimeValidator, } from '#internals/validators.js';
 import { isDateInRanges } from '../calendar/helpers.js';
-function isRangeWithinBounds(host, predicate) {
-    const { start, end } = host.value ?? {};
-    return !((start && !predicate(start)) || (end && !predicate(end)));
+function rangeEnds({ value }) {
+    return [value?.start, value?.end];
 }
-export const minDateRangeValidator = {
-    key: 'rangeUnderflow',
-    message: (host) => formatString(ValidationResourceStringsEN.min_validation_error, host.min),
-    isValid: (host) => host.min
-        ? isRangeWithinBounds(host, (date) => !isDateLessThanMin(date, host.min, host.hasTimeParts(), host.hasDateParts()))
-        : true,
-};
-export const maxDateRangeValidator = {
-    key: 'rangeOverflow',
-    message: (host) => formatString(ValidationResourceStringsEN.max_validation_error, host.max),
-    isValid: (host) => host.max
-        ? isRangeWithinBounds(host, (date) => !isDateExceedingMax(date, host.max, host.hasTimeParts(), host.hasDateParts()))
-        : true,
-};
+export const minDateRangeValidator = createMinDateTimeValidator(rangeEnds);
+export const maxDateRangeValidator = createMaxDateTimeValidator(rangeEnds);
 export const requiredDateRangeValidator = {
     key: 'valueMissing',
     message: ValidationResourceStringsEN.required_validation_error,

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

@@ -1 +1 @@
-{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/validators.ts"],"names":[],"mappings":"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","sourcesContent":["import { ValidationResourceStringsEN } from 'igniteui-i18n-core';\nimport {\n  isDateExceedingMax,\n  isDateLessThanMin,\n} from '#internals/date/compare.js';\nimport { calendarRange } from '#internals/date/model.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport type { Validator } from '#internals/validators.js';\nimport { isDateInRanges } from '../calendar/helpers.js';\nimport type { DateRangeValue } from '../types.js';\nimport type IgcDateRangePickerComponent from './date-range-picker.js';\n\n/** Whether both ends of the current range pass `predicate`. */\nfunction isRangeWithinBounds(\n  host: IgcDateRangePickerComponent,\n  predicate: (date: Date) => boolean\n): boolean {\n  const { start, end } = host.value ?? {};\n  return !((start && !predicate(start)) || (end && !predicate(end)));\n}\n\nexport const minDateRangeValidator: Validator<IgcDateRangePickerComponent> = {\n  key: 'rangeUnderflow',\n  message: (host) =>\n    formatString(ValidationResourceStringsEN.min_validation_error!, host.min),\n  isValid: (host) =>\n    host.min\n      ? isRangeWithinBounds(\n          host,\n          (date) =>\n            !isDateLessThanMin(\n              date,\n              host.min!,\n              host.hasTimeParts(),\n              host.hasDateParts()\n            )\n        )\n      : true,\n};\n\nexport const maxDateRangeValidator: Validator<IgcDateRangePickerComponent> = {\n  key: 'rangeOverflow',\n  message: (host) =>\n    formatString(ValidationResourceStringsEN.max_validation_error!, host.max),\n  isValid: (host) =>\n    host.max\n      ? isRangeWithinBounds(\n          host,\n          (date) =>\n            !isDateExceedingMax(\n              date,\n              host.max!,\n              host.hasTimeParts(),\n              host.hasDateParts()\n            )\n        )\n      : true,\n};\n\nexport const requiredDateRangeValidator: Validator<IgcDateRangePickerComponent> =\n  {\n    key: 'valueMissing',\n    message: ValidationResourceStringsEN.required_validation_error!,\n    isValid: (host) => {\n      return host.required ? isCompleteDateRange(host.value) : true;\n    },\n  };\n\nexport const badInputDateRangeValidator: Validator<IgcDateRangePickerComponent> =\n  {\n    key: 'badInput',\n    message: (host) =>\n      formatString(\n        ValidationResourceStringsEN.disabled_date_validation_error!,\n        host.value\n      ),\n    isValid: (host) => {\n      const { value, disabledDates } = host;\n\n      if (\n        !isCompleteDateRange(value) ||\n        !disabledDates ||\n        isEmpty(disabledDates)\n      ) {\n        return true;\n      }\n\n      return Array.from(\n        calendarRange({ start: value.start, end: value.end, inclusive: true })\n      ).every((date) => !isDateInRanges(date, disabledDates));\n    },\n  };\n\nexport const dateRangeValidators: Validator<IgcDateRangePickerComponent>[] = [\n  requiredDateRangeValidator,\n  minDateRangeValidator,\n  maxDateRangeValidator,\n  badInputDateRangeValidator,\n];\n\nexport function isCompleteDateRange(\n  value: DateRangeValue | null\n): value is { start: Date; end: Date } {\n  return value != null && value.start != null && value.end != null;\n}\n"]}
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../../src/components/date-range-picker/validators.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAE3B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAKxD,SAAS,SAAS,CAAC,EAAE,KAAK,EAA+B;IACvD,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAChC,0BAA0B,CAA8B,SAAS,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,qBAAqB,GAChC,0BAA0B,CAA8B,SAAS,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,GAAG,EAAE,cAAc;IACnB,OAAO,EAAE,2BAA2B,CAAC,yBAA0B;IAC/D,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAChE,CAAC;CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,GAAG,EAAE,UAAU;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAChB,YAAY,CACV,2BAA2B,CAAC,8BAA+B,EAC3D,IAAI,CAAC,KAAK,CACX;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAEtC,IACE,CAAC,mBAAmB,CAAC,KAAK,CAAC;YAC3B,CAAC,aAAa;YACd,OAAO,CAAC,aAAa,CAAC,EACtB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CACf,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CACvE,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAA6C;IAC3E,0BAA0B;IAC1B,qBAAqB;IACrB,qBAAqB;IACrB,0BAA0B;CAC3B,CAAC;AAEF,MAAM,UAAU,mBAAmB,CACjC,KAA4B;IAE5B,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC;AACnE,CAAC","sourcesContent":["import { ValidationResourceStringsEN } from 'igniteui-i18n-core';\nimport { calendarRange } from '#internals/date/model.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport { formatString } from '#internals/utils/strings.js';\nimport {\n  createMaxDateTimeValidator,\n  createMinDateTimeValidator,\n  type Validator,\n} from '#internals/validators.js';\nimport { isDateInRanges } from '../calendar/helpers.js';\nimport type { DateRangeValue } from '../types.js';\nimport type IgcDateRangePickerComponent from './date-range-picker.js';\n\n/** The ends of the current range, each validated against the bound on its own. */\nfunction rangeEnds({ value }: IgcDateRangePickerComponent) {\n  return [value?.start, value?.end];\n}\n\nexport const minDateRangeValidator =\n  createMinDateTimeValidator<IgcDateRangePickerComponent>(rangeEnds);\n\nexport const maxDateRangeValidator =\n  createMaxDateTimeValidator<IgcDateRangePickerComponent>(rangeEnds);\n\nexport const requiredDateRangeValidator: Validator<IgcDateRangePickerComponent> =\n  {\n    key: 'valueMissing',\n    message: ValidationResourceStringsEN.required_validation_error!,\n    isValid: (host) => {\n      return host.required ? isCompleteDateRange(host.value) : true;\n    },\n  };\n\nexport const badInputDateRangeValidator: Validator<IgcDateRangePickerComponent> =\n  {\n    key: 'badInput',\n    message: (host) =>\n      formatString(\n        ValidationResourceStringsEN.disabled_date_validation_error!,\n        host.value\n      ),\n    isValid: (host) => {\n      const { value, disabledDates } = host;\n\n      if (\n        !isCompleteDateRange(value) ||\n        !disabledDates ||\n        isEmpty(disabledDates)\n      ) {\n        return true;\n      }\n\n      return Array.from(\n        calendarRange({ start: value.start, end: value.end, inclusive: true })\n      ).every((date) => !isDateInRanges(date, disabledDates));\n    },\n  };\n\nexport const dateRangeValidators: Validator<IgcDateRangePickerComponent>[] = [\n  requiredDateRangeValidator,\n  minDateRangeValidator,\n  maxDateRangeValidator,\n  badInputDateRangeValidator,\n];\n\nexport function isCompleteDateRange(\n  value: DateRangeValue | null\n): value is { start: Date; end: Date } {\n  return value != null && value.start != null && value.end != null;\n}\n"]}

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

@@ -2,7 +2,8 @@
  * Date Part Classes Module
  *
  * This module provides structured classes for date/time parts used in date-time input.
- * Each part type has its own class with specific validation and spin behavior.
+ * Each date part type has its own class with specific validation and spin behavior;
+ * the time part types share one class driven by a bounds/accessor lookup.
  *
  * Classes are private to this module - only types and factory function are exported.
  */

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

@@ -1,3 +1,4 @@
+import { clamp, modulo } from '#internals/utils/math.js';
 export var DatePart;
 (function (DatePart) {
     DatePart["Month"] = "month";
@@ -36,10 +37,26 @@ export const DEFAULT_DATE_PARTS_SPIN_DELTAS = Object.freeze({
     minutes: 1,
     seconds: 1,
 });
-const TIME_BOUNDS = {
-    hours: { min: 0, max: 23 },
-    minutes: { min: 0, max: 59 },
-    seconds: { min: 0, max: 59 },
+const TIME_PART_CONFIG = {
+    hours: {
+        min: 0,
+        max: 23,
+        get: (date) => date.getHours(),
+        set: (date, value) => date.setHours(value),
+        display: (value, format) => format.includes('h') ? toTwelveHourFormat(value) : value,
+    },
+    minutes: {
+        min: 0,
+        max: 59,
+        get: (date) => date.getMinutes(),
+        set: (date, value) => date.setMinutes(value),
+    },
+    seconds: {
+        min: 0,
+        max: 59,
+        get: (date) => date.getSeconds(),
+        set: (date, value) => date.setSeconds(value),
+    },
 };
 const DATE_BOUNDS = {
     month: { min: 0, max: 11 },
@@ -55,15 +72,10 @@ function toTwelveHourFormat(hours) {
     const h = hours % 12;
     return h === 0 ? 12 : h;
 }
-function spinTimePart(date, delta, max, min, setter, getter, spinLoop) {
-    let value = getter.call(date) + delta;
-    if (value > max) {
-        value = spinLoop ? value % (max + 1) : max;
-    }
-    else if (value < min) {
-        value = spinLoop ? max + 1 + (value % (max + 1)) : min;
-    }
-    setter.call(date, value);
+function wrapOrClamp(value, min, max, spinLoop) {
+    return spinLoop
+        ? min + modulo(value - min, max - min + 1)
+        : clamp(value, min, max);
 }
 class DatePartBase {
     constructor(type, options) {
@@ -110,14 +122,7 @@ class MonthPart extends DatePartBase {
         if (date.getDate() > maxDate) {
             date.setDate(maxDate);
         }
-        let month = date.getMonth() + delta;
-        if (month > max) {
-            month = spinLoop ? (month % max) - 1 : max;
-        }
-        else if (month < min) {
-            month = spinLoop ? max + (month % max) + 1 : min;
-        }
-        date.setMonth(month);
+        date.setMonth(wrapOrClamp(date.getMonth() + delta, min, max, spinLoop));
     }
     getValue(date) {
         return padValue(date.getMonth() + 1, this.format.length);
@@ -141,69 +146,29 @@ class DateOfMonthPart extends DatePartBase {
         const { date, spinLoop } = options;
         const maxDate = daysInMonth(date.getFullYear(), date.getMonth());
         const { min } = DATE_BOUNDS.date;
-        let dayOfMonth = date.getDate() + delta;
-        if (dayOfMonth > maxDate) {
-            dayOfMonth = spinLoop ? dayOfMonth % maxDate : maxDate;
-        }
-        else if (dayOfMonth < min) {
-            dayOfMonth = spinLoop ? maxDate + (dayOfMonth % maxDate) : min;
-        }
-        date.setDate(dayOfMonth);
+        date.setDate(wrapOrClamp(date.getDate() + delta, min, maxDate, spinLoop));
     }
     getValue(date) {
         return padValue(date.getDate(), this.format.length);
     }
 }
-class HoursPart extends DatePartBase {
-    constructor(options) {
-        super(DatePartType.Hours, options);
-    }
-    validate(value) {
-        return value >= TIME_BOUNDS.hours.min && value <= TIME_BOUNDS.hours.max;
-    }
-    spin(delta, options) {
-        const { date, spinLoop } = options;
-        const { min, max } = TIME_BOUNDS.hours;
-        spinTimePart(date, delta, max, min, date.setHours, date.getHours, spinLoop);
-    }
-    getValue(date) {
-        const isTwelveHour = this.format.includes('h');
-        const hours = isTwelveHour
-            ? toTwelveHourFormat(date.getHours())
-            : date.getHours();
-        return padValue(hours, this.format.length);
-    }
-}
-class MinutesPart extends DatePartBase {
-    constructor(options) {
-        super(DatePartType.Minutes, options);
-    }
-    validate(value) {
-        return value >= TIME_BOUNDS.minutes.min && value <= TIME_BOUNDS.minutes.max;
-    }
-    spin(delta, options) {
-        const { date, spinLoop } = options;
-        const { min, max } = TIME_BOUNDS.minutes;
-        spinTimePart(date, delta, max, min, date.setMinutes, date.getMinutes, spinLoop);
-    }
-    getValue(date) {
-        return padValue(date.getMinutes(), this.format.length);
-    }
-}
-class SecondsPart extends DatePartBase {
-    constructor(options) {
-        super(DatePartType.Seconds, options);
+class TimePart extends DatePartBase {
+    constructor(type, options) {
+        super(type, options);
+        this._config = TIME_PART_CONFIG[type];
     }
     validate(value) {
-        return value >= TIME_BOUNDS.seconds.min && value <= TIME_BOUNDS.seconds.max;
+        return value >= this._config.min && value <= this._config.max;
     }
     spin(delta, options) {
         const { date, spinLoop } = options;
-        const { min, max } = TIME_BOUNDS.seconds;
-        spinTimePart(date, delta, max, min, date.setSeconds, date.getSeconds, spinLoop);
+        const { min, max, get, set } = this._config;
+        set(date, wrapOrClamp(get(date) + delta, min, max, spinLoop));
     }
     getValue(date) {
-        return padValue(date.getSeconds(), this.format.length);
+        const { get, display } = this._config;
+        const value = get(date);
+        return padValue(display ? display(value, this.format) : value, this.format.length);
     }
 }
 class AmPmPart extends DatePartBase {
@@ -250,11 +215,9 @@ export function createDatePart(type, options) {
         case DatePartType.Date:
             return new DateOfMonthPart(options);
         case DatePartType.Hours:
-            return new HoursPart(options);
         case DatePartType.Minutes:
-            return new MinutesPart(options);
         case DatePartType.Seconds:
-            return new SecondsPart(options);
+            return new TimePart(type, options);
         case DatePartType.AmPm:
             return new AmPmPart(options);
         case DatePartType.Literal:

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

@@ -1 +1 @@
-{"version":3,"file":"date-part.js","sourceRoot":"","sources":["../../../src/components/date-time-input/date-part.ts"],"names":[],"mappings":"AAWA,MAAM,CAAN,IAAY,QAQX;AARD,WAAY,QAAQ;IAClB,2BAAe,CAAA;IACf,yBAAa,CAAA;IACb,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,+BAAmB,CAAA;IACnB,yBAAa,CAAA;AACf,CAAC,EARW,QAAQ,KAAR,QAAQ,QAQnB;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAKX,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,GAAG,CAAe;IACnD,YAAY,CAAC,IAAI;IACjB,YAAY,CAAC,KAAK;IAClB,YAAY,CAAC,IAAI;CAClB,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,GAAG,CAAe;IACnD,YAAY,CAAC,KAAK;IAClB,YAAY,CAAC,OAAO;IACpB,YAAY,CAAC,OAAO;CACrB,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAiB;IAC1E,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;CACX,CAAC,CAAC;AA4FH,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;CACpB,CAAC;AAGX,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;CACjB,CAAC;AASX,SAAS,WAAW,CAAC,IAAY,EAAE,KAAa;IAC9C,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;AAChD,CAAC;AAKD,SAAS,QAAQ,CAAC,KAAsB,EAAE,MAAc;IACtD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AAKD,SAAS,kBAAkB,CAAC,KAAa;IACvC,MAAM,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;IACrB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC;AAKD,SAAS,YAAY,CACnB,IAAU,EACV,KAAa,EACb,GAAW,EACX,GAAW,EACX,MAAiC,EACjC,MAAoB,EACpB,QAAiB;IAEjB,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;IAEtC,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;QAChB,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC7C,CAAC;SAAM,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;QACvB,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACzD,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3B,CAAC;AAUD,MAAe,YAAY;IAMzB,YAAY,IAAkB,EAAE,OAAwB;QACtD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CAKF;AASD,MAAM,QAAS,SAAQ,YAAY;IACjC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,MAAc;QAErB,OAAO,MAAM,IAAI,CAAC,CAAC;IACrB,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAGzE,IAAI,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAClC,MAAM,IAAI,GACR,MAAM,KAAK,CAAC;YACV,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACzC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACzB,OAAO,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;CACF;AAKD,MAAM,SAAU,SAAQ,YAAY;IAClC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,QAAQ,CAAC,KAAa;QAEpB,OAAO,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC;IAC1E,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACnC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC;QAEvC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,CAAC;QACzE,IAAI,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC;QAEpC,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YAChB,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC7C,CAAC;aAAM,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;YACvB,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC;CACF;AAKD,MAAM,eAAgB,SAAQ,YAAY;IACxC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,KAAa,EAAE,OAA+B;QACrD,IAAI,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YACjC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,OAAO,EAAE,IAAI,KAAK,SAAS,IAAI,OAAO,EAAE,KAAK,KAAK,SAAS,EAAE,CAAC;YAChE,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YACzD,OAAO,KAAK,IAAI,OAAO,CAAC;QAC1B,CAAC;QAED,OAAO,KAAK,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;IACvC,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACnC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC;QAEjC,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC;QAExC,IAAI,UAAU,GAAG,OAAO,EAAE,CAAC;YACzB,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QACzD,CAAC;aAAM,IAAI,UAAU,GAAG,GAAG,EAAE,CAAC;YAC5B,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACjE,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;CACF;AAKD,MAAM,SAAU,SAAQ,YAAY;IAClC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,OAAO,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC;IAC1E,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACnC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC;QACvC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9E,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,YAAY;YACxB,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpB,OAAO,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7C,CAAC;CACF;AAKD,MAAM,WAAY,SAAQ,YAAY;IACpC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,OAAO,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;IAC9E,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACnC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QACzC,YAAY,CACV,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,UAAU,EACf,QAAQ,CACT,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;CACF;AAKD,MAAM,WAAY,SAAQ,YAAY;IACpC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,OAAO,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;IAC9E,CAAC;IAED,IAAI,CAAC,KAAa,EAAE,OAAoB;QACtC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACnC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QACzC,YAAY,CACV,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,UAAU,EACf,QAAQ,CACT,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;CACF;AAKD,MAAM,QAAS,SAAQ,YAAY;IACjC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACpC,CAAC;IAED,QAAQ,CAAC,MAAc;QAErB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,MAAc,EAAE,OAAoB;QACvC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;QAElD,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAGxB,IAAI,YAAY,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9D,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,IAAU;QACjB,OAAO,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7C,CAAC;CACF;AAKD,MAAM,WAAY,SAAQ,YAAY;IACpC,YAAY,OAAwB;QAClC,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,QAAQ,CAAC,MAAc;QAErB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC,MAAc,EAAE,QAAqB;IAE1C,CAAC;IAED,QAAQ,CAAC,KAAW;QAClB,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;CACF;AAcD,MAAM,UAAU,cAAc,CAC5B,IAAkB,EAClB,OAAwB;IAExB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,YAAY,CAAC,IAAI;YACpB,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC/B,KAAK,YAAY,CAAC,KAAK;YACrB,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;QAChC,KAAK,YAAY,CAAC,IAAI;YACpB,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC;QACtC,KAAK,YAAY,CAAC,KAAK;YACrB,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;QAChC,KAAK,YAAY,CAAC,OAAO;YACvB,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;QAClC,KAAK,YAAY,CAAC,OAAO;YACvB,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;QAClC,KAAK,YAAY,CAAC,IAAI;YACpB,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC/B,KAAK,YAAY,CAAC,OAAO;YACvB,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;QAClC;YACE,MAAM,IAAI,KAAK,CAAC,2BAA2B,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;AACH,CAAC","sourcesContent":["/**\n * Date Part Classes Module\n *\n * This module provides structured classes for date/time parts used in date-time input.\n * Each part type has its own class with specific validation and spin behavior.\n *\n * Classes are private to this module - only types and factory function are exported.\n */\n\n//#region Types and Enums\n\nexport enum DatePart {\n  Month = 'month',\n  Year = 'year',\n  Date = 'date',\n  Hours = 'hours',\n  Minutes = 'minutes',\n  Seconds = 'seconds',\n  AmPm = 'amPm',\n}\n\n/** Types of date/time parts that can appear in a format string */\nexport const DatePartType = {\n  Month: 'month',\n  Year: 'year',\n  Date: 'date',\n  Hours: 'hours',\n  Minutes: 'minutes',\n  Seconds: 'seconds',\n  AmPm: 'amPm',\n  Literal: 'literal',\n} as const;\n\nexport type DatePartType = (typeof DatePartType)[keyof typeof DatePartType];\n\n/** The part types that make up a calendar date. */\nexport const DATE_PART_TYPES = new Set<DatePartType>([\n  DatePartType.Date,\n  DatePartType.Month,\n  DatePartType.Year,\n]);\n\n/** The part types that make up a time of day. */\nexport const TIME_PART_TYPES = new Set<DatePartType>([\n  DatePartType.Hours,\n  DatePartType.Minutes,\n  DatePartType.Seconds,\n]);\n\n// Spin delta defaults\nexport const DEFAULT_DATE_PARTS_SPIN_DELTAS = Object.freeze<DatePartDeltas>({\n  date: 1,\n  month: 1,\n  year: 1,\n  hours: 1,\n  minutes: 1,\n  seconds: 1,\n});\n\n/**\n * The amounts by which each date or time part is incremented or decremented on\n * a step action in date-time input; every part defaults to `1`.\n */\nexport interface DatePartDeltas {\n  /** The number of days the date part is spun by. */\n  date?: number;\n  /** The number of months the month part is spun by. */\n  month?: number;\n  /** The number of years the year part is spun by. */\n  year?: number;\n  /** The number of hours the hours part is spun by. */\n  hours?: number;\n  /** The number of minutes the minutes part is spun by. */\n  minutes?: number;\n  /** The number of seconds the seconds part is spun by. */\n  seconds?: number;\n}\n\n/** Options for creating a date part */\nexport interface DatePartOptions {\n  /** Start position in the masked string */\n  start: number;\n  /** End position in the masked string */\n  end: number;\n  /** The format string for this part (e.g., 'MM', 'yyyy') */\n  format: string;\n}\n/* blazorSuppress */\n/** Options for spin operations */\nexport interface SpinOptions {\n  /** The current date value */\n  date: Date;\n  /** Whether to loop values at boundaries */\n  spinLoop: boolean;\n  /** For AM/PM: the current masked value to determine AM or PM */\n  amPmValue?: string;\n  /** For AM/PM: the original date (for rollover prevention) */\n  originalDate?: Date;\n}\n\n/**\n * Read-only interface for date part information\n * @hidden\n */\nexport interface IDatePart {\n  /** The type of date part */\n  readonly type: DatePartType;\n  /** Start position in the masked string */\n  readonly start: number;\n  /** End position in the masked string */\n  readonly end: number;\n  /** The format string for this part */\n  readonly format: string;\n\n  /**\n   * Validates a numeric value for this part.\n   * @param value - The value to validate\n   * @param context - Optional context (year, month) for date-dependent validation\n   * @returns true if the value is valid for this part\n   */\n  validate(value: number, context?: DateValidationContext): boolean;\n\n  /**\n   * Spins (increments/decrements) this part's value on the given date.\n   * @param delta - The amount to spin (positive = up, negative = down)\n   * @param options - Spin options including the date and loop behavior\n   */\n  spin(delta: number, options: SpinOptions): void;\n\n  /**\n   * Extracts the value of this part from a Date object.\n   * @param date - The date to extract from\n   * @returns The formatted string value\n   */\n  getValue(date: Date): string;\n}\n\n/* blazorSuppress */\n/** Context for date validation (needed for day-of-month validation) */\nexport interface DateValidationContext {\n  year?: number;\n  month?: number;\n}\n\n//#endregion\n\n//#region Constants\n\n/** Time bounds for validation */\nconst TIME_BOUNDS = {\n  hours: { min: 0, max: 23 },\n  minutes: { min: 0, max: 59 },\n  seconds: { min: 0, max: 59 },\n} as const;\n\n/** Date bounds for validation */\nconst DATE_BOUNDS = {\n  month: { min: 0, max: 11 },\n  date: { min: 1, max: 31 },\n} as const;\n\n//#endregion\n\n//#region Helper Functions\n\n/**\n * Gets the number of days in a specific month/year.\n */\nfunction daysInMonth(year: number, month: number): number {\n  return new Date(year, month + 1, 0).getDate();\n}\n\n/**\n * Pads a value with zeros to the specified length.\n */\nfunction padValue(value: string | number, length: number): string {\n  return String(value).padStart(length, '0');\n}\n\n/**\n * Converts 24-hour format to 12-hour format.\n */\nfunction toTwelveHourFormat(hours: number): number {\n  const h = hours % 12;\n  return h === 0 ? 12 : h;\n}\n\n/**\n * Generic spin helper for time parts.\n */\nfunction spinTimePart(\n  date: Date,\n  delta: number,\n  max: number,\n  min: number,\n  setter: (value: number) => number,\n  getter: () => number,\n  spinLoop: boolean\n): void {\n  let value = getter.call(date) + delta;\n\n  if (value > max) {\n    value = spinLoop ? value % (max + 1) : max;\n  } else if (value < min) {\n    value = spinLoop ? max + 1 + (value % (max + 1)) : min;\n  }\n\n  setter.call(date, value);\n}\n\n//#endregion\n\n//#region Abstract Base Class\n\n/**\n * Abstract base class for all date parts.\n * Provides common functionality and defines the contract for concrete implementations.\n */\nabstract class DatePartBase implements IDatePart {\n  readonly type: DatePartType;\n  readonly start: number;\n  readonly end: number;\n  readonly format: string;\n\n  constructor(type: DatePartType, options: DatePartOptions) {\n    this.type = type;\n    this.start = options.start;\n    this.end = options.end;\n    this.format = options.format;\n  }\n\n  abstract validate(value: number, context?: DateValidationContext): boolean;\n  abstract spin(delta: number, options: SpinOptions): void;\n  abstract getValue(date: Date): string;\n}\n\n//#endregion\n\n//#region Concrete Implementations\n\n/**\n * Year part (yyyy, yy)\n */\nclass YearPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Year, options);\n  }\n\n  validate(_value: number): boolean {\n    // Years are always valid (no upper bound)\n    return _value >= 0;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date } = options;\n    const maxDate = daysInMonth(date.getFullYear() + delta, date.getMonth());\n\n    // Clip to max day to avoid leap year change shifting the entire value\n    if (date.getDate() > maxDate) {\n      date.setDate(maxDate);\n    }\n\n    date.setFullYear(date.getFullYear() + delta);\n  }\n\n  getValue(date: Date): string {\n    const length = this.format.length;\n    const year =\n      length === 2\n        ? date.getFullYear().toString().slice(-2)\n        : date.getFullYear();\n    return padValue(year, length);\n  }\n}\n\n/**\n * Month part (MM, M)\n */\nclass MonthPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Month, options);\n  }\n\n  validate(value: number): boolean {\n    // Month is 0-based internally, but 1-12 in display\n    return value >= DATE_BOUNDS.month.min && value <= DATE_BOUNDS.month.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max } = DATE_BOUNDS.month;\n\n    const maxDate = daysInMonth(date.getFullYear(), date.getMonth() + delta);\n    if (date.getDate() > maxDate) {\n      date.setDate(maxDate);\n    }\n\n    let month = date.getMonth() + delta;\n\n    if (month > max) {\n      month = spinLoop ? (month % max) - 1 : max;\n    } else if (month < min) {\n      month = spinLoop ? max + (month % max) + 1 : min;\n    }\n\n    date.setMonth(month);\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getMonth() + 1, this.format.length);\n  }\n}\n\n/**\n * Date (day of month) part (dd, d)\n */\nclass DateOfMonthPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Date, options);\n  }\n\n  validate(value: number, context?: DateValidationContext): boolean {\n    if (value < DATE_BOUNDS.date.min) {\n      return false;\n    }\n\n    if (context?.year !== undefined && context?.month !== undefined) {\n      const maxDays = daysInMonth(context.year, context.month);\n      return value <= maxDays;\n    }\n\n    return value <= DATE_BOUNDS.date.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const maxDate = daysInMonth(date.getFullYear(), date.getMonth());\n    const { min } = DATE_BOUNDS.date;\n\n    let dayOfMonth = date.getDate() + delta;\n\n    if (dayOfMonth > maxDate) {\n      dayOfMonth = spinLoop ? dayOfMonth % maxDate : maxDate;\n    } else if (dayOfMonth < min) {\n      dayOfMonth = spinLoop ? maxDate + (dayOfMonth % maxDate) : min;\n    }\n\n    date.setDate(dayOfMonth);\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getDate(), this.format.length);\n  }\n}\n\n/**\n * Hours part (HH, H, hh, h)\n */\nclass HoursPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Hours, options);\n  }\n\n  validate(value: number): boolean {\n    return value >= TIME_BOUNDS.hours.min && value <= TIME_BOUNDS.hours.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max } = TIME_BOUNDS.hours;\n    spinTimePart(date, delta, max, min, date.setHours, date.getHours, spinLoop);\n  }\n\n  getValue(date: Date): string {\n    const isTwelveHour = this.format.includes('h');\n    const hours = isTwelveHour\n      ? toTwelveHourFormat(date.getHours())\n      : date.getHours();\n    return padValue(hours, this.format.length);\n  }\n}\n\n/**\n * Minutes part (mm, m)\n */\nclass MinutesPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Minutes, options);\n  }\n\n  validate(value: number): boolean {\n    return value >= TIME_BOUNDS.minutes.min && value <= TIME_BOUNDS.minutes.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max } = TIME_BOUNDS.minutes;\n    spinTimePart(\n      date,\n      delta,\n      max,\n      min,\n      date.setMinutes,\n      date.getMinutes,\n      spinLoop\n    );\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getMinutes(), this.format.length);\n  }\n}\n\n/**\n * Seconds part (ss, s)\n */\nclass SecondsPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Seconds, options);\n  }\n\n  validate(value: number): boolean {\n    return value >= TIME_BOUNDS.seconds.min && value <= TIME_BOUNDS.seconds.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max } = TIME_BOUNDS.seconds;\n    spinTimePart(\n      date,\n      delta,\n      max,\n      min,\n      date.setSeconds,\n      date.getSeconds,\n      spinLoop\n    );\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getSeconds(), this.format.length);\n  }\n}\n\n/**\n * AM/PM part (tt, t)\n */\nclass AmPmPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.AmPm, options);\n  }\n\n  validate(_value: number): boolean {\n    // AM/PM doesn't have numeric validation\n    return true;\n  }\n\n  spin(_delta: number, options: SpinOptions): void {\n    const { date, amPmValue, originalDate } = options;\n\n    if (!amPmValue) return;\n\n    const isAM = amPmValue.toLowerCase() === 'am';\n    const newHours = date.getHours() + (isAM ? 12 : -12);\n    date.setHours(newHours);\n\n    // Prevent date rollover\n    if (originalDate && date.getDate() !== originalDate.getDate()) {\n      date.setTime(originalDate.getTime());\n    }\n  }\n\n  getValue(date: Date): string {\n    return date.getHours() >= 12 ? 'PM' : 'AM';\n  }\n}\n\n/**\n * Literal part (separators like /, -, :, space, etc.)\n */\nclass LiteralPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Literal, options);\n  }\n\n  validate(_value: number): boolean {\n    // Literals don't have validation\n    return true;\n  }\n\n  spin(_delta: number, _options: SpinOptions): void {\n    // Literals can't be spun\n  }\n\n  getValue(_date: Date): string {\n    return this.format;\n  }\n}\n\n//#endregion\n\n//#region Factory Function\n\n/**\n * Creates a date part instance based on the type.\n * This is the only way to create date part instances outside this module.\n *\n * @param type - The type of date part to create\n * @param options - The options for the date part\n * @returns A date part instance implementing IDatePart\n */\nexport function createDatePart(\n  type: DatePartType,\n  options: DatePartOptions\n): IDatePart {\n  switch (type) {\n    case DatePartType.Year:\n      return new YearPart(options);\n    case DatePartType.Month:\n      return new MonthPart(options);\n    case DatePartType.Date:\n      return new DateOfMonthPart(options);\n    case DatePartType.Hours:\n      return new HoursPart(options);\n    case DatePartType.Minutes:\n      return new MinutesPart(options);\n    case DatePartType.Seconds:\n      return new SecondsPart(options);\n    case DatePartType.AmPm:\n      return new AmPmPart(options);\n    case DatePartType.Literal:\n      return new LiteralPart(options);\n    default:\n      throw new Error(`Unknown date part type: ${type}`);\n  }\n}\n\n//#endregion\n"]}
+{"version":3,"file":"date-part.js","sourceRoot":"","sources":["../../../src/components/date-time-input/date-part.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Date Part Classes Module\n *\n * This module provides structured classes for date/time parts used in date-time input.\n * Each date part type has its own class with specific validation and spin behavior;\n * the time part types share one class driven by a bounds/accessor lookup.\n *\n * Classes are private to this module - only types and factory function are exported.\n */\n\nimport { clamp, modulo } from '#internals/utils/math.js';\n\n//#region Types and Enums\n\nexport enum DatePart {\n  Month = 'month',\n  Year = 'year',\n  Date = 'date',\n  Hours = 'hours',\n  Minutes = 'minutes',\n  Seconds = 'seconds',\n  AmPm = 'amPm',\n}\n\n/** Types of date/time parts that can appear in a format string */\nexport const DatePartType = {\n  Month: 'month',\n  Year: 'year',\n  Date: 'date',\n  Hours: 'hours',\n  Minutes: 'minutes',\n  Seconds: 'seconds',\n  AmPm: 'amPm',\n  Literal: 'literal',\n} as const;\n\nexport type DatePartType = (typeof DatePartType)[keyof typeof DatePartType];\n\n/** The part types that make up a calendar date. */\nexport const DATE_PART_TYPES = new Set<DatePartType>([\n  DatePartType.Date,\n  DatePartType.Month,\n  DatePartType.Year,\n]);\n\n/** The part types that make up a time of day. */\nexport const TIME_PART_TYPES = new Set<DatePartType>([\n  DatePartType.Hours,\n  DatePartType.Minutes,\n  DatePartType.Seconds,\n]);\n\n// Spin delta defaults\nexport const DEFAULT_DATE_PARTS_SPIN_DELTAS = Object.freeze<DatePartDeltas>({\n  date: 1,\n  month: 1,\n  year: 1,\n  hours: 1,\n  minutes: 1,\n  seconds: 1,\n});\n\n/**\n * The amounts by which each date or time part is incremented or decremented on\n * a step action in date-time input; every part defaults to `1`.\n */\nexport interface DatePartDeltas {\n  /** The number of days the date part is spun by. */\n  date?: number;\n  /** The number of months the month part is spun by. */\n  month?: number;\n  /** The number of years the year part is spun by. */\n  year?: number;\n  /** The number of hours the hours part is spun by. */\n  hours?: number;\n  /** The number of minutes the minutes part is spun by. */\n  minutes?: number;\n  /** The number of seconds the seconds part is spun by. */\n  seconds?: number;\n}\n\n/** Options for creating a date part */\nexport interface DatePartOptions {\n  /** Start position in the masked string */\n  start: number;\n  /** End position in the masked string */\n  end: number;\n  /** The format string for this part (e.g., 'MM', 'yyyy') */\n  format: string;\n}\n/* blazorSuppress */\n/** Options for spin operations */\nexport interface SpinOptions {\n  /** The current date value */\n  date: Date;\n  /** Whether to loop values at boundaries */\n  spinLoop: boolean;\n  /** For AM/PM: the current masked value to determine AM or PM */\n  amPmValue?: string;\n  /** For AM/PM: the original date (for rollover prevention) */\n  originalDate?: Date;\n}\n\n/**\n * Read-only interface for date part information\n * @hidden\n */\nexport interface IDatePart {\n  /** The type of date part */\n  readonly type: DatePartType;\n  /** Start position in the masked string */\n  readonly start: number;\n  /** End position in the masked string */\n  readonly end: number;\n  /** The format string for this part */\n  readonly format: string;\n\n  /**\n   * Validates a numeric value for this part.\n   * @param value - The value to validate\n   * @param context - Optional context (year, month) for date-dependent validation\n   * @returns true if the value is valid for this part\n   */\n  validate(value: number, context?: DateValidationContext): boolean;\n\n  /**\n   * Spins (increments/decrements) this part's value on the given date.\n   * @param delta - The amount to spin (positive = up, negative = down)\n   * @param options - Spin options including the date and loop behavior\n   */\n  spin(delta: number, options: SpinOptions): void;\n\n  /**\n   * Extracts the value of this part from a Date object.\n   * @param date - The date to extract from\n   * @returns The formatted string value\n   */\n  getValue(date: Date): string;\n}\n\n/* blazorSuppress */\n/** Context for date validation (needed for day-of-month validation) */\nexport interface DateValidationContext {\n  year?: number;\n  month?: number;\n}\n\n//#endregion\n\n//#region Constants\n\ntype TimePartType =\n  | typeof DatePartType.Hours\n  | typeof DatePartType.Minutes\n  | typeof DatePartType.Seconds;\n\n/** Per-part bounds and `Date` accessors driving the shared {@link TimePart}. */\ninterface TimePartConfig {\n  /** Inclusive lower bound for validation and spinning. */\n  min: number;\n  /** Inclusive upper bound for validation and spinning. */\n  max: number;\n  get(date: Date): number;\n  set(date: Date, value: number): void;\n  /** Maps the raw value to its rendered form - 12-hour hours, say. */\n  display?(value: number, format: string): number;\n}\n\nconst TIME_PART_CONFIG: Record<TimePartType, TimePartConfig> = {\n  hours: {\n    min: 0,\n    max: 23,\n    get: (date) => date.getHours(),\n    set: (date, value) => date.setHours(value),\n    display: (value, format) =>\n      format.includes('h') ? toTwelveHourFormat(value) : value,\n  },\n  minutes: {\n    min: 0,\n    max: 59,\n    get: (date) => date.getMinutes(),\n    set: (date, value) => date.setMinutes(value),\n  },\n  seconds: {\n    min: 0,\n    max: 59,\n    get: (date) => date.getSeconds(),\n    set: (date, value) => date.setSeconds(value),\n  },\n};\n\n/** Date bounds for validation */\nconst DATE_BOUNDS = {\n  month: { min: 0, max: 11 },\n  date: { min: 1, max: 31 },\n} as const;\n\n//#endregion\n\n//#region Helper Functions\n\n/**\n * Gets the number of days in a specific month/year.\n */\nfunction daysInMonth(year: number, month: number): number {\n  return new Date(year, month + 1, 0).getDate();\n}\n\n/**\n * Pads a value with zeros to the specified length.\n */\nfunction padValue(value: string | number, length: number): string {\n  return String(value).padStart(length, '0');\n}\n\n/**\n * Converts 24-hour format to 12-hour format.\n */\nfunction toTwelveHourFormat(hours: number): number {\n  const h = hours % 12;\n  return h === 0 ? 12 : h;\n}\n\n/**\n * Wraps a spun value around the inclusive `[min, max]` range, or clamps it to\n * the nearest bound when looping is off.\n */\nfunction wrapOrClamp(\n  value: number,\n  min: number,\n  max: number,\n  spinLoop: boolean\n): number {\n  return spinLoop\n    ? min + modulo(value - min, max - min + 1)\n    : clamp(value, min, max);\n}\n\n//#endregion\n\n//#region Abstract Base Class\n\n/**\n * Abstract base class for all date parts.\n * Provides common functionality and defines the contract for concrete implementations.\n */\nabstract class DatePartBase implements IDatePart {\n  readonly type: DatePartType;\n  readonly start: number;\n  readonly end: number;\n  readonly format: string;\n\n  constructor(type: DatePartType, options: DatePartOptions) {\n    this.type = type;\n    this.start = options.start;\n    this.end = options.end;\n    this.format = options.format;\n  }\n\n  abstract validate(value: number, context?: DateValidationContext): boolean;\n  abstract spin(delta: number, options: SpinOptions): void;\n  abstract getValue(date: Date): string;\n}\n\n//#endregion\n\n//#region Concrete Implementations\n\n/**\n * Year part (yyyy, yy)\n */\nclass YearPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Year, options);\n  }\n\n  validate(_value: number): boolean {\n    // Years are always valid (no upper bound)\n    return _value >= 0;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date } = options;\n    const maxDate = daysInMonth(date.getFullYear() + delta, date.getMonth());\n\n    // Clip to max day to avoid leap year change shifting the entire value\n    if (date.getDate() > maxDate) {\n      date.setDate(maxDate);\n    }\n\n    date.setFullYear(date.getFullYear() + delta);\n  }\n\n  getValue(date: Date): string {\n    const length = this.format.length;\n    const year =\n      length === 2\n        ? date.getFullYear().toString().slice(-2)\n        : date.getFullYear();\n    return padValue(year, length);\n  }\n}\n\n/**\n * Month part (MM, M)\n */\nclass MonthPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Month, options);\n  }\n\n  validate(value: number): boolean {\n    // Month is 0-based internally, but 1-12 in display\n    return value >= DATE_BOUNDS.month.min && value <= DATE_BOUNDS.month.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max } = DATE_BOUNDS.month;\n\n    const maxDate = daysInMonth(date.getFullYear(), date.getMonth() + delta);\n    if (date.getDate() > maxDate) {\n      date.setDate(maxDate);\n    }\n\n    date.setMonth(wrapOrClamp(date.getMonth() + delta, min, max, spinLoop));\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getMonth() + 1, this.format.length);\n  }\n}\n\n/**\n * Date (day of month) part (dd, d)\n */\nclass DateOfMonthPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Date, options);\n  }\n\n  validate(value: number, context?: DateValidationContext): boolean {\n    if (value < DATE_BOUNDS.date.min) {\n      return false;\n    }\n\n    if (context?.year !== undefined && context?.month !== undefined) {\n      const maxDays = daysInMonth(context.year, context.month);\n      return value <= maxDays;\n    }\n\n    return value <= DATE_BOUNDS.date.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const maxDate = daysInMonth(date.getFullYear(), date.getMonth());\n    const { min } = DATE_BOUNDS.date;\n\n    date.setDate(wrapOrClamp(date.getDate() + delta, min, maxDate, spinLoop));\n  }\n\n  getValue(date: Date): string {\n    return padValue(date.getDate(), this.format.length);\n  }\n}\n\n/**\n * Time part (HH/hh hours, mm minutes, ss seconds) - a single implementation\n * over the per-part bounds and accessors in {@link TIME_PART_CONFIG}.\n */\nclass TimePart extends DatePartBase {\n  private readonly _config: TimePartConfig;\n\n  constructor(type: TimePartType, options: DatePartOptions) {\n    super(type, options);\n    this._config = TIME_PART_CONFIG[type];\n  }\n\n  validate(value: number): boolean {\n    return value >= this._config.min && value <= this._config.max;\n  }\n\n  spin(delta: number, options: SpinOptions): void {\n    const { date, spinLoop } = options;\n    const { min, max, get, set } = this._config;\n\n    set(date, wrapOrClamp(get(date) + delta, min, max, spinLoop));\n  }\n\n  getValue(date: Date): string {\n    const { get, display } = this._config;\n    const value = get(date);\n\n    return padValue(\n      display ? display(value, this.format) : value,\n      this.format.length\n    );\n  }\n}\n\n/**\n * AM/PM part (tt, t)\n */\nclass AmPmPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.AmPm, options);\n  }\n\n  validate(_value: number): boolean {\n    // AM/PM doesn't have numeric validation\n    return true;\n  }\n\n  spin(_delta: number, options: SpinOptions): void {\n    const { date, amPmValue, originalDate } = options;\n\n    if (!amPmValue) return;\n\n    const isAM = amPmValue.toLowerCase() === 'am';\n    const newHours = date.getHours() + (isAM ? 12 : -12);\n    date.setHours(newHours);\n\n    // Prevent date rollover\n    if (originalDate && date.getDate() !== originalDate.getDate()) {\n      date.setTime(originalDate.getTime());\n    }\n  }\n\n  getValue(date: Date): string {\n    return date.getHours() >= 12 ? 'PM' : 'AM';\n  }\n}\n\n/**\n * Literal part (separators like /, -, :, space, etc.)\n */\nclass LiteralPart extends DatePartBase {\n  constructor(options: DatePartOptions) {\n    super(DatePartType.Literal, options);\n  }\n\n  validate(_value: number): boolean {\n    // Literals don't have validation\n    return true;\n  }\n\n  spin(_delta: number, _options: SpinOptions): void {\n    // Literals can't be spun\n  }\n\n  getValue(_date: Date): string {\n    return this.format;\n  }\n}\n\n//#endregion\n\n//#region Factory Function\n\n/**\n * Creates a date part instance based on the type.\n * This is the only way to create date part instances outside this module.\n *\n * @param type - The type of date part to create\n * @param options - The options for the date part\n * @returns A date part instance implementing IDatePart\n */\nexport function createDatePart(\n  type: DatePartType,\n  options: DatePartOptions\n): IDatePart {\n  switch (type) {\n    case DatePartType.Year:\n      return new YearPart(options);\n    case DatePartType.Month:\n      return new MonthPart(options);\n    case DatePartType.Date:\n      return new DateOfMonthPart(options);\n    case DatePartType.Hours:\n    case DatePartType.Minutes:\n    case DatePartType.Seconds:\n      return new TimePart(type, options);\n    case DatePartType.AmPm:\n      return new AmPmPart(options);\n    case DatePartType.Literal:\n      return new LiteralPart(options);\n    default:\n      throw new Error(`Unknown date part type: ${type}`);\n  }\n}\n\n//#endregion\n"]}

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

@@ -1,13 +1,14 @@
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { FormValue } from '#internals/mixins/forms/form-value.js';
 import { type MaskSelection } from '#internals/mixins/mask-behavior.js';
 import type { ThemingController } from '#theming/theming-controller.js';
 import type { RangeTextSelectMode } from '../types.js';
-import type { DatePartDeltas } from './date-part.js';
+import { type DatePartDeltas, type IDatePart } from './date-part.js';
 export type { MaskSelection };
 declare const IgcDateTimeInputBaseComponent_base: import("../../internals/mixins/constructor.js").AbstractConstructor<import("#internals/mixins/mask-behavior.js").MaskBehaviorElementInterface> & import("../../internals/mixins/constructor.js").Constructor<import("../../internals/mixins/forms/types.js").FormRequiredInterface & import("../../internals/mixins/forms/types.js").FormAssociatedElementInterface> & typeof LitElement;
 export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTimeInputBaseComponent_base {
     protected abstract readonly _themes: ThemingController;
-    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "suffix" | "helper-text" | "value-missing" | "custom-error" | "range-overflow" | "range-underflow">;
+    protected readonly _slots: import("#internals/controllers/slot.js").SlotController<"invalid" | "prefix" | "helper-text" | "[default]" | "suffix" | "value-missing" | "custom-error" | "range-overflow" | "range-underflow">;
     protected readonly _inputId: string;
     protected readonly _input?: HTMLInputElement;
     /**
@@ -20,10 +21,10 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
     private readonly _i18nController;
     protected _min: Date | null;
     protected _max: Date | null;
-    protected _defaultMask: string;
-    protected _defaultDisplayFormat: string;
     protected _displayFormat?: string;
     protected _inputFormat?: string;
+    /** The locale-default display format, resolved by the i18n controller. */
+    protected get _defaultDisplayFormat(): string;
     /**
      * Whether the user has an uncommitted edit in progress.
      *
@@ -43,6 +44,8 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
      * @hidden @internal
      */
     get _uncommittedValue(): T | null;
+    /** The spin amount for each date part - the defaults overlaid with `spinDelta`. */
+    protected get _datePartDeltas(): DatePartDeltas;
     protected get _targetDatePart(): unknown;
     /**
      * Whether the control will have outlined appearance.
@@ -97,7 +100,8 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
      */
     spinLoop: boolean;
     /**
-     * Gets/Sets the locale used for formatting the display value.
+     * The locale used to format the display value and to resolve the
+     * component's resource strings. Falls back to the global locale when not set.
      * @attr locale
      */
     set locale(value: string);
@@ -107,6 +111,7 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
     private _handleResourceChange;
     protected _handleDragLeave(): void;
     protected _handleDragEnter(): void;
+    protected _handleFocus(): Promise<void>;
     protected _handleBlur(): void;
     /**
      * Handles wheel events for spinning date parts.
@@ -138,6 +143,22 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
      * programmatic `stepUp()` - there is no blur coming to commit it.
      */
     protected _setDraftValue(value: T): void;
+    /**
+     * Whether the committed value is empty, i.e. gaining focus should start the
+     * edit from the empty mask rather than the formatted value.
+     */
+    protected _isValueEmpty(): boolean;
+    /**
+     * Applies a programmatic value assignment: bails when the value is unchanged,
+     * cancels any edit in progress, and re-renders the mask from the new value.
+     */
+    protected _applyValue(value: T | null): void;
+    /**
+     * Reads the AM/PM designator as currently typed in the mask for the given
+     * format part, so spinning it toggles from what the user sees rather than
+     * from the underlying date.
+     */
+    protected _readAmPmFromMask(part?: IDatePart): string | undefined;
     /** Applies the masked text to the public value without emitting anything. */
     protected _applyDraft(): void;
     /**
@@ -160,10 +181,7 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
      * Applies a mask pattern to the input, parsing the format string into date parts.
      */
     protected _applyMask(formatString: string): void;
-    /**
-     * Updates the default display format based on current locale.
-     */
-    private _updateDefaultDisplayFormat;
+    /** Applies the locale-default mask, unless an explicit input format is set. */
     protected _initializeDefaultMask(): void;
     /**
      * Resolves the part names for the container based on the current state.
@@ -185,7 +203,7 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
     clear(): void;
     protected _renderInput(): TemplateResult;
     protected render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/cache.js").CacheDirective>;
-    protected abstract get _datePartDeltas(): DatePartDeltas;
+    protected abstract readonly _formValue: FormValue<T | null>;
     /** Provided by `EventEmitterMixin` in the concrete components. */
     abstract emitEvent(name: string, init?: CustomEventInit): boolean;
     /** The committed value of the input. */
@@ -195,7 +213,9 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
      * Parses the current masked text into the leaf's value type.
      *
      * A `strict` parse mirrors the committed value semantics - an incomplete mask has
-     * no value yet and resolves to `null` rather than to a defaults-filled one.
+     * no value yet and resolves to `null` rather than to a defaults-filled one. A lenient
+     * parse completes the missing parts from their defaults, an empty mask excepted - that
+     * one holds no value to complete and resolves to `null` as well.
      */
     protected abstract _parseMask(strict: boolean): T | null;
     /** Formats a value into the editable mask. */
@@ -204,7 +224,6 @@ export declare abstract class IgcDateTimeInputBaseComponent<T> extends IgcDateTi
     protected abstract _calculatePartNavigationPosition(value: string, direction: number): number;
     protected abstract _calculateSpunValue(part: unknown, delta: number | undefined, isDecrement: boolean): T;
     protected abstract _setCurrentDateTime(): void;
-    protected abstract _handleFocus(): Promise<void>;
     protected abstract _getDatePartAtCursor(): unknown;
     protected abstract _getDefaultDatePart(): unknown;
     abstract hasDateParts(): boolean;

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

@@ -4,7 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { getDateFormatter } from 'igniteui-i18n-core';
 import { LitElement } from 'lit';
 import { eventOptions, property, query } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
@@ -14,21 +13,28 @@ import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { convertToDate } from '#internals/date/converters.js';
 import { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';
 import { shadowOptions } from '#internals/decorators/shadow-options.js';
-import { addI18nController, getDefaultDateTimeFormat, } from '#internals/i18n/i18n-controller.js';
+import { addI18nController } from '#internals/i18n/i18n-controller.js';
 import { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';
 import { MaskBehaviorMixin, } from '#internals/mixins/mask-behavior.js';
 import { nextInputId, renderInputShell, resolveInputPartNames, } from '#internals/templates/input-shell.js';
 import { renderMaskedNativeInput } from '#internals/templates/masked-input.js';
 import { equal } from '#internals/utils/objects.js';
+import { DatePartType, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.js';
 import { dateTimeInputValidators } from './validators.js';
 const Slots = setSlots('prefix', 'suffix', 'helper-text', 'value-missing', 'range-overflow', 'range-underflow', 'custom-error', 'invalid');
 let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends MaskBehaviorMixin(FormAssociatedRequiredMixin(LitElement)) {
     get __validators() {
         return dateTimeInputValidators;
     }
+    get _defaultDisplayFormat() {
+        return this._i18nController.localeDisplayFormat;
+    }
     get _uncommittedValue() {
         return this._isEditing ? this._parseMask(true) : this.value;
     }
+    get _datePartDeltas() {
+        return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };
+    }
     get _targetDatePart() {
         return this._focused
             ? this._getDatePartAtCursor()
@@ -86,7 +92,6 @@ let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends
         });
         this._min = null;
         this._max = null;
-        this._defaultDisplayFormat = '';
         this._isEditing = false;
         this._oldValue = null;
         this.outlined = false;
@@ -102,9 +107,6 @@ let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends
             .set([ctrlKey, arrowRight], this._navigateParts.bind(this, 1));
     }
     update(props) {
-        if (props.has('displayFormat')) {
-            this._updateDefaultDisplayFormat();
-        }
         if (props.has('locale')) {
             this._initializeDefaultMask();
         }
@@ -127,6 +129,24 @@ let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends
             this._maskedValue = this._buildMaskedValue();
         }
     }
+    async _handleFocus() {
+        this._focused = true;
+        if (this.readOnly) {
+            return;
+        }
+        this._oldValue = this.value;
+        if (this._isValueEmpty()) {
+            this._maskedValue = this._parser.emptyMask;
+            this._historyResync();
+            await this.updateComplete;
+            this.select();
+            return;
+        }
+        if (this.displayFormat !== this.inputFormat) {
+            this._updateMaskDisplay();
+        }
+        this._historyResync();
+    }
     _handleBlur() {
         this._focused = false;
         this._commitEdit();
@@ -186,6 +206,22 @@ let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends
         this._maskedValue = next;
         this.requestUpdate();
     }
+    _isValueEmpty() {
+        return !this.value;
+    }
+    _applyValue(value) {
+        if (equal(this._formValue.value, value)) {
+            return;
+        }
+        this._isEditing = false;
+        this._formValue.setValueAndFormState(value);
+        this._updateMaskDisplay();
+    }
+    _readAmPmFromMask(part) {
+        return part?.type === DatePartType.AmPm
+            ? this._maskedValue.substring(part.start, part.end)
+            : undefined;
+    }
     _applyDraft() {
         this._isEditing = false;
         this.value = this._parseMask(true);
@@ -230,13 +266,9 @@ let IgcDateTimeInputBaseComponent = class IgcDateTimeInputBaseComponent extends
             this.placeholder = this._parser.mask;
         }
     }
-    _updateDefaultDisplayFormat() {
-        this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
-    }
     _initializeDefaultMask() {
-        this._updateDefaultDisplayFormat();
         if (!this._inputFormat) {
-            this._applyMask(getDefaultDateTimeFormat(this.locale));
+            this._applyMask(this._i18nController.localeInputFormat);
         }
     }
     _resolvePartNames(base) {