igniteui-webcomponents 7.1.2 → 7.2.0

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

@@ -0,0 +1,155 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { ThemingController } from '../../theming/theming-controller.js';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type MaskSelection } from '../common/mixins/mask-behavior.js';
+import type { IgcInputComponentEventMap } from '../input/input-base.js';
+import type { DatePartDeltas } from './date-part.js';
+export type { MaskSelection };
+export interface IgcDateTimeInputComponentEventMap extends Omit<IgcInputComponentEventMap, 'igcChange'> {
+    igcChange: CustomEvent<unknown>;
+}
+declare const IgcDateTimeInputBaseComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/mask-behavior.js").MaskBehaviorElementInterface> & Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & Constructor<LitElement>;
+export declare abstract class IgcDateTimeInputBaseComponent extends IgcDateTimeInputBaseComponent_base {
+    protected abstract readonly _themes: ThemingController;
+    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "helper-text" | "suffix" | "value-missing" | "custom-error" | "range-overflow" | "range-underflow">;
+    protected readonly _inputId: string;
+    protected readonly _input?: HTMLInputElement;
+    protected get __validators(): import("../common/validators.js").Validator<import("./date-time-input.js").default>[];
+    private readonly _i18nController;
+    protected _min: Date | null;
+    protected _max: Date | null;
+    protected _defaultMask: string;
+    protected _defaultDisplayFormat: string;
+    protected _displayFormat?: string;
+    protected _inputFormat?: string;
+    protected get _targetDatePart(): unknown;
+    /**
+     * Whether the control will have outlined appearance.
+     *
+     * @attr
+     * @default false
+     */
+    outlined: boolean;
+    /**
+     * The placeholder attribute of the control.
+     * @attr
+     */
+    placeholder: string;
+    /**
+     * The label for the control.
+     * @attr
+     */
+    label: string;
+    /**
+     * The date format to apply on the input.
+     * @attr input-format
+     */
+    get inputFormat(): string;
+    set inputFormat(val: string);
+    /**
+     * The minimum value required for the input to remain valid.
+     * @attr
+     */
+    set min(value: Date | string | null | undefined);
+    get min(): Date | null;
+    /**
+     * The maximum value required for the input to remain valid.
+     * @attr
+     */
+    set max(value: Date | string | null | undefined);
+    get max(): Date | null;
+    /**
+     * Format to display the value in when not editing.
+     * Defaults to the locale format if not set.
+     * @attr display-format
+     */
+    set displayFormat(value: string);
+    get displayFormat(): string;
+    /**
+     * Delta values used to increment or decrement each date part on step actions.
+     * All values default to `1`.
+     */
+    spinDelta?: DatePartDeltas;
+    /**
+     * Sets whether to loop over the currently spun segment.
+     * @attr spin-loop
+     */
+    spinLoop: boolean;
+    /**
+     * Gets/Sets the locale used for formatting the display value.
+     * @attr locale
+     */
+    set locale(value: string);
+    get locale(): string;
+    constructor();
+    protected update(props: PropertyValues<this>): void;
+    private _handleResourceChange;
+    protected _handleDragLeave(): void;
+    protected _handleDragEnter(): void;
+    /**
+     * Handles wheel events for spinning date parts.
+     */
+    protected _handleWheel(event: WheelEvent): Promise<void>;
+    /**
+     * Navigates to the previous or next date part.
+     */
+    protected _navigateParts(direction: number): void;
+    /**
+     * Handles keyboard-triggered spinning (arrow up/down).
+     */
+    protected _keyboardSpin(direction: 'up' | 'down'): Promise<void>;
+    /**
+     * Common logic for stepping up or down a date part.
+     * @internal
+     */
+    protected _performStep(datePart: unknown, delta: number | undefined, isDecrement: boolean): void;
+    /**
+     * Updates the displayed mask value based on focus state.
+     * When focused, shows the editable mask. When unfocused, defers to the leaf's display formatter.
+     */
+    protected _updateMaskDisplay(): void;
+    /**
+     * Checks if all mask positions are filled (no prompt characters remain).
+     */
+    protected _isMaskComplete(): boolean;
+    /**
+     * 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;
+    protected _initializeDefaultMask(): void;
+    /**
+     * Resolves the part names for the container based on the current state.
+     */
+    protected _resolvePartNames(base: string): Record<string, boolean>;
+    /** Selects all the text inside the input. */
+    select(): void;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    /** Increments a date/time portion. */
+    stepUp(datePart?: unknown, delta?: number): void;
+    /** Decrements a date/time portion. */
+    stepDown(datePart?: unknown, delta?: number): void;
+    /** Clears the input element of user input. */
+    abstract 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 _buildMaskedValue(): string;
+    protected abstract _buildDisplayValue(): string;
+    protected abstract _syncValueFromMask(): void;
+    protected abstract _calculatePartNavigationPosition(value: string, direction: number): number;
+    protected abstract _calculateSpunValue(part: unknown, delta: number | undefined, isDecrement: boolean): unknown;
+    protected abstract _commitSpunValue(value: unknown): void;
+    protected abstract _setCurrentDateTime(): void;
+    protected abstract _handleFocus(): Promise<void>;
+    protected abstract _getDatePartAtCursor(): unknown;
+    protected abstract _getDefaultDatePart(): unknown;
+    abstract hasDateParts(): boolean;
+    abstract hasTimeParts(): boolean;
+}

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

@@ -0,0 +1,275 @@
+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 { getDateFormatter } from 'igniteui-i18n-core';
+import { LitElement } from 'lit';
+import { eventOptions, property, query } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import { convertToDate } from '../calendar/helpers.js';
+import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, ctrlKey, } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
+import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { shadowOptions } from '../common/decorators/shadow-options.js';
+import { addI18nController, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import { MaskBehaviorMixin, } from '../common/mixins/mask-behavior.js';
+import { nextInputId, renderInputShell, } from '../common/templates/input-shell.js';
+import { renderMaskedNativeInput } from '../common/templates/masked-input.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(EventEmitterMixin(LitElement))) {
+    get __validators() {
+        return dateTimeInputValidators;
+    }
+    get _targetDatePart() {
+        return this._focused
+            ? this._getDatePartAtCursor()
+            : this._getDefaultDatePart();
+    }
+    get inputFormat() {
+        return this._inputFormat || this._parser.mask;
+    }
+    set inputFormat(val) {
+        if (val) {
+            this._applyMask(val);
+            this._inputFormat = val;
+            this._updateMaskDisplay();
+        }
+    }
+    set min(value) {
+        this._min = convertToDate(value);
+        this._validate();
+    }
+    get min() {
+        return this._min;
+    }
+    set max(value) {
+        this._max = convertToDate(value);
+        this._validate();
+    }
+    get max() {
+        return this._max;
+    }
+    set displayFormat(value) {
+        this._displayFormat = value;
+    }
+    get displayFormat() {
+        return (this._displayFormat ?? this._inputFormat ?? this._defaultDisplayFormat);
+    }
+    set locale(value) {
+        this._i18nController.locale = value;
+    }
+    get locale() {
+        return this._i18nController.locale;
+    }
+    constructor() {
+        super();
+        this._slots = addSlotController(this, { slots: Slots });
+        this._inputId = nextInputId();
+        this._i18nController = addI18nController(this, {
+            defaultEN: {},
+            onResourceChange: this._handleResourceChange,
+        });
+        this._min = null;
+        this._max = null;
+        this._defaultDisplayFormat = '';
+        this.outlined = false;
+        this.spinLoop = true;
+        addKeybindings(this, {
+            skip: () => this.readOnly,
+            bindingDefaults: { repeat: true },
+        })
+            .set([ctrlKey, ';'], this._setCurrentDateTime)
+            .set(arrowUp, this._keyboardSpin.bind(this, 'up'))
+            .set(arrowDown, this._keyboardSpin.bind(this, 'down'))
+            .set([ctrlKey, arrowLeft], this._navigateParts.bind(this, 0))
+            .set([ctrlKey, arrowRight], this._navigateParts.bind(this, 1));
+    }
+    update(props) {
+        if (props.has('displayFormat')) {
+            this._updateDefaultDisplayFormat();
+        }
+        if (props.has('locale')) {
+            this._initializeDefaultMask();
+        }
+        if (props.has('displayFormat') || props.has('locale')) {
+            this._updateMaskDisplay();
+        }
+        super.update(props);
+    }
+    _handleResourceChange() {
+        this._initializeDefaultMask();
+        this._updateMaskDisplay();
+    }
+    _handleDragLeave() {
+        if (!this._focused) {
+            this._updateMaskDisplay();
+        }
+    }
+    _handleDragEnter() {
+        if (!this._focused) {
+            this._maskedValue = this._buildMaskedValue();
+        }
+    }
+    async _handleWheel(event) {
+        if (!this._focused || this.readOnly)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const { start, end } = this._inputSelection;
+        event.deltaY > 0 ? this.stepDown() : this.stepUp();
+        this._emitInputEvent();
+        await this.updateComplete;
+        this.setSelectionRange(start, end);
+    }
+    _navigateParts(direction) {
+        const position = this._calculatePartNavigationPosition(this._input?.value ?? '', direction);
+        this.setSelectionRange(position, position);
+    }
+    async _keyboardSpin(direction) {
+        direction === 'up' ? this.stepUp() : this.stepDown();
+        this._emitInputEvent();
+        await this.updateComplete;
+        this.setSelectionRange(this._maskSelection.start, this._maskSelection.end);
+    }
+    _performStep(datePart, delta, isDecrement) {
+        const part = datePart || this._targetDatePart;
+        if (!part)
+            return;
+        const { start, end } = this._inputSelection;
+        const newValue = this._calculateSpunValue(part, delta, isDecrement);
+        this._commitSpunValue(newValue);
+        this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
+    }
+    _updateMaskDisplay() {
+        this._maskedValue = this._focused
+            ? this._buildMaskedValue()
+            : this._buildDisplayValue();
+    }
+    _isMaskComplete() {
+        return !this._maskedValue.includes(this.prompt);
+    }
+    _applyMask(formatString) {
+        const previous = this._parser.mask;
+        this._parser.mask = formatString;
+        if (!this.placeholder || previous === this.placeholder) {
+            this.placeholder = this._parser.mask;
+        }
+    }
+    _updateDefaultDisplayFormat() {
+        this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
+    }
+    _initializeDefaultMask() {
+        this._updateDefaultDisplayFormat();
+        if (!this._inputFormat) {
+            this._applyMask(getDefaultDateTimeFormat(this.locale));
+        }
+    }
+    _resolvePartNames(base) {
+        return {
+            [base]: true,
+            prefixed: this._slots.hasAssignedElements('prefix', {
+                selector: '[slot="prefix"]:not([hidden])',
+            }),
+            suffixed: this._slots.hasAssignedElements('suffix', {
+                selector: '[slot="suffix"]:not([hidden])',
+            }),
+            filled: !this._isEmptyMask,
+        };
+    }
+    select() {
+        this._input?.select();
+    }
+    focus(options) {
+        this._input?.focus(options);
+    }
+    blur() {
+        this._input?.blur();
+    }
+    stepUp(datePart, delta) {
+        this._performStep(datePart, delta, false);
+    }
+    stepDown(datePart, delta) {
+        this._performStep(datePart, delta, true);
+    }
+    _renderInput() {
+        const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+        const hasHelperText = this._slots.hasAssignedElements('helper-text');
+        return renderMaskedNativeInput({
+            id: this._inputId,
+            partNames: this._resolvePartNames('input'),
+            name: this.name,
+            value: this._maskedValue,
+            placeholder: this.placeholder || this._parser.emptyMask,
+            readOnly: this.readOnly,
+            disabled: this.disabled,
+            tabindex: hasNegativeTabIndex ? -1 : undefined,
+            ariaDescribedBy: hasHelperText ? 'helper-text' : undefined,
+            onInput: this._handleInput,
+            onFocus: this._handleFocus,
+            onBlur: this._handleBlur,
+            onClick: this._handleClick,
+            onSetMaskSelection: this._setMaskSelection,
+            onCompositionStart: this._handleCompositionStart,
+            onCompositionEnd: this._handleCompositionEnd,
+            onWheel: this._handleWheel,
+            onDragEnter: this._handleDragEnter,
+            onDragLeave: this._handleDragLeave,
+        });
+    }
+    render() {
+        return cache(renderInputShell(this, {
+            theme: this._themes.theme,
+            label: this.label,
+            labelId: this._inputId,
+            containerParts: this._resolvePartNames('container'),
+            renderInput: this._renderInput,
+        }));
+    }
+};
+__decorate([
+    query('input')
+], IgcDateTimeInputBaseComponent.prototype, "_input", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcDateTimeInputBaseComponent.prototype, "outlined", void 0);
+__decorate([
+    property()
+], IgcDateTimeInputBaseComponent.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], IgcDateTimeInputBaseComponent.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'input-format' })
+], IgcDateTimeInputBaseComponent.prototype, "inputFormat", null);
+__decorate([
+    property({ converter: convertToDate })
+], IgcDateTimeInputBaseComponent.prototype, "min", null);
+__decorate([
+    property({ converter: convertToDate })
+], IgcDateTimeInputBaseComponent.prototype, "max", null);
+__decorate([
+    property({ attribute: 'display-format' })
+], IgcDateTimeInputBaseComponent.prototype, "displayFormat", null);
+__decorate([
+    property({ attribute: false })
+], IgcDateTimeInputBaseComponent.prototype, "spinDelta", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'spin-loop' })
+], IgcDateTimeInputBaseComponent.prototype, "spinLoop", void 0);
+__decorate([
+    property()
+], IgcDateTimeInputBaseComponent.prototype, "locale", null);
+__decorate([
+    eventOptions({ passive: false })
+], IgcDateTimeInputBaseComponent.prototype, "_handleWheel", null);
+IgcDateTimeInputBaseComponent = __decorate([
+    blazorDeepImport,
+    shadowOptions({ delegatesFocus: true })
+], IgcDateTimeInputBaseComponent);
+export { IgcDateTimeInputBaseComponent };
+//# sourceMappingURL=date-time-input.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-input.base.js","sourceRoot":"","sources":["../../../src/components/date-time-input/date-time-input.base.ts"],"names":[],"mappings":"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","sourcesContent":["import { getDateFormatter } from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues, type TemplateResult } from 'lit';\nimport { eventOptions, property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport type { ThemingController } from '../../theming/theming-controller.js';\nimport { convertToDate } from '../calendar/helpers.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n  ctrlKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { shadowOptions } from '../common/decorators/shadow-options.js';\nimport {\n  addI18nController,\n  getDefaultDateTimeFormat,\n} from '../common/i18n/i18n-controller.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport {\n  MaskBehaviorMixin,\n  type MaskSelection,\n} from '../common/mixins/mask-behavior.js';\nimport {\n  nextInputId,\n  renderInputShell,\n} from '../common/templates/input-shell.js';\nimport { renderMaskedNativeInput } from '../common/templates/masked-input.js';\nimport type { IgcInputComponentEventMap } from '../input/input-base.js';\nimport type { DatePartDeltas } from './date-part.js';\nimport { dateTimeInputValidators } from './validators.js';\n\nexport type { MaskSelection };\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'value-missing',\n  'range-overflow',\n  'range-underflow',\n  'custom-error',\n  'invalid'\n);\n\nexport interface IgcDateTimeInputComponentEventMap extends Omit<\n  IgcInputComponentEventMap,\n  'igcChange'\n> {\n  igcChange: CustomEvent<unknown>;\n}\n\n@blazorDeepImport\n@shadowOptions({ delegatesFocus: true })\nexport abstract class IgcDateTimeInputBaseComponent extends MaskBehaviorMixin(\n  FormAssociatedRequiredMixin(\n    EventEmitterMixin<\n      IgcDateTimeInputComponentEventMap,\n      Constructor<LitElement>\n    >(LitElement)\n  )\n) {\n  // #region Internal state and properties\n\n  protected abstract readonly _themes: ThemingController;\n\n  protected readonly _slots = addSlotController(this, { slots: Slots });\n\n  protected readonly _inputId = nextInputId();\n\n  @query('input')\n  protected override readonly _input?: HTMLInputElement;\n\n  protected override get __validators() {\n    return dateTimeInputValidators;\n  }\n\n  private readonly _i18nController = addI18nController(this, {\n    defaultEN: {},\n    onResourceChange: this._handleResourceChange,\n  });\n\n  protected _min: Date | null = null;\n  protected _max: Date | null = null;\n\n  protected _defaultMask!: string;\n\n  protected _defaultDisplayFormat = '';\n  protected _displayFormat?: string;\n  protected _inputFormat?: string;\n\n  protected get _targetDatePart(): unknown {\n    return this._focused\n      ? this._getDatePartAtCursor()\n      : this._getDefaultDatePart();\n  }\n\n  // #endregion\n\n  // #region Public attributes and properties\n\n  /**\n   * Whether the control will have outlined appearance.\n   *\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public outlined = false;\n\n  /**\n   * The placeholder attribute of the control.\n   * @attr\n   */\n  @property()\n  public placeholder!: string;\n\n  /**\n   * The label for the control.\n   * @attr\n   */\n  @property()\n  public label!: string;\n\n  /**\n   * The date format to apply on the input.\n   * @attr input-format\n   */\n  @property({ attribute: 'input-format' })\n  public get inputFormat(): string {\n    return this._inputFormat || this._parser.mask;\n  }\n\n  public set inputFormat(val: string) {\n    if (val) {\n      this._applyMask(val);\n      this._inputFormat = val;\n      this._updateMaskDisplay();\n    }\n  }\n\n  /**\n   * The minimum value required for the input to remain valid.\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public set min(value: Date | string | null | undefined) {\n    this._min = convertToDate(value);\n    this._validate();\n  }\n\n  public get min(): Date | null {\n    return this._min;\n  }\n\n  /**\n   * The maximum value required for the input to remain valid.\n   * @attr\n   */\n  @property({ converter: convertToDate })\n  public set max(value: Date | string | null | undefined) {\n    this._max = convertToDate(value);\n    this._validate();\n  }\n\n  public get max(): Date | null {\n    return this._max;\n  }\n\n  /**\n   * Format to display the value in when not editing.\n   * Defaults to the locale format if not set.\n   * @attr display-format\n   */\n  @property({ attribute: 'display-format' })\n  public set displayFormat(value: string) {\n    this._displayFormat = value;\n  }\n\n  public get displayFormat(): string {\n    return (\n      this._displayFormat ?? this._inputFormat ?? this._defaultDisplayFormat\n    );\n  }\n\n  /**\n   * Delta values used to increment or decrement each date part on step actions.\n   * All values default to `1`.\n   */\n  @property({ attribute: false })\n  public spinDelta?: DatePartDeltas;\n\n  /**\n   * Sets whether to loop over the currently spun segment.\n   * @attr spin-loop\n   */\n  @property({ type: Boolean, attribute: 'spin-loop' })\n  public spinLoop = true;\n\n  /**\n   * Gets/Sets the locale used for formatting the display value.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale(): string {\n    return this._i18nController.locale;\n  }\n\n  // #endregion\n\n  //#region Lifecycle Hooks\n\n  constructor() {\n    super();\n\n    addKeybindings(this, {\n      skip: () => this.readOnly,\n      bindingDefaults: { repeat: true },\n    })\n      .set([ctrlKey, ';'], this._setCurrentDateTime)\n      .set(arrowUp, this._keyboardSpin.bind(this, 'up'))\n      .set(arrowDown, this._keyboardSpin.bind(this, 'down'))\n      .set([ctrlKey, arrowLeft], this._navigateParts.bind(this, 0))\n      .set([ctrlKey, arrowRight], this._navigateParts.bind(this, 1));\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('displayFormat')) {\n      this._updateDefaultDisplayFormat();\n    }\n\n    if (props.has('locale')) {\n      this._initializeDefaultMask();\n    }\n\n    if (props.has('displayFormat') || props.has('locale')) {\n      this._updateMaskDisplay();\n    }\n\n    super.update(props);\n  }\n\n  //#endregion\n\n  // #region Event handlers\n\n  private _handleResourceChange(): void {\n    this._initializeDefaultMask();\n    this._updateMaskDisplay();\n  }\n\n  protected _handleDragLeave(): void {\n    if (!this._focused) {\n      this._updateMaskDisplay();\n    }\n  }\n\n  protected _handleDragEnter(): void {\n    if (!this._focused) {\n      this._maskedValue = this._buildMaskedValue();\n    }\n  }\n\n  /**\n   * Handles wheel events for spinning date parts.\n   */\n  @eventOptions({ passive: false })\n  protected async _handleWheel(event: WheelEvent): Promise<void> {\n    if (!this._focused || this.readOnly) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { start, end } = this._inputSelection;\n    event.deltaY > 0 ? this.stepDown() : this.stepUp();\n    this._emitInputEvent();\n\n    await this.updateComplete;\n    this.setSelectionRange(start, end);\n  }\n\n  // #endregion\n\n  //#region Keybindings\n\n  /**\n   * Navigates to the previous or next date part.\n   */\n  protected _navigateParts(direction: number): void {\n    const position = this._calculatePartNavigationPosition(\n      this._input?.value ?? '',\n      direction\n    );\n    this.setSelectionRange(position, position);\n  }\n\n  /**\n   * Handles keyboard-triggered spinning (arrow up/down).\n   */\n  protected async _keyboardSpin(direction: 'up' | 'down'): Promise<void> {\n    direction === 'up' ? this.stepUp() : this.stepDown();\n    this._emitInputEvent();\n    await this.updateComplete;\n    this.setSelectionRange(this._maskSelection.start, this._maskSelection.end);\n  }\n\n  // #endregion\n\n  //#region Internal API\n\n  /**\n   * Common logic for stepping up or down a date part.\n   * @internal\n   */\n  protected _performStep(\n    datePart: unknown,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): void {\n    const part = datePart || this._targetDatePart;\n    if (!part) return;\n\n    const { start, end } = this._inputSelection;\n    const newValue = this._calculateSpunValue(part, delta, isDecrement);\n    this._commitSpunValue(newValue);\n    this.updateComplete.then(() => this._input?.setSelectionRange(start, end));\n  }\n\n  /**\n   * Updates the displayed mask value based on focus state.\n   * When focused, shows the editable mask. When unfocused, defers to the leaf's display formatter.\n   */\n  protected _updateMaskDisplay(): void {\n    this._maskedValue = this._focused\n      ? this._buildMaskedValue()\n      : this._buildDisplayValue();\n  }\n\n  /**\n   * Checks if all mask positions are filled (no prompt characters remain).\n   */\n  protected _isMaskComplete(): boolean {\n    return !this._maskedValue.includes(this.prompt);\n  }\n\n  /**\n   * Applies a mask pattern to the input, parsing the format string into date parts.\n   */\n  protected _applyMask(formatString: string): void {\n    const previous = this._parser.mask;\n    this._parser.mask = formatString;\n\n    // Update placeholder if not set or if it matches the old format\n    if (!this.placeholder || previous === this.placeholder) {\n      this.placeholder = this._parser.mask;\n    }\n  }\n\n  /**\n   * Updates the default display format based on current locale.\n   */\n  private _updateDefaultDisplayFormat(): void {\n    this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(\n      this.locale\n    );\n  }\n\n  protected _initializeDefaultMask(): void {\n    this._updateDefaultDisplayFormat();\n\n    if (!this._inputFormat) {\n      this._applyMask(getDefaultDateTimeFormat(this.locale));\n    }\n  }\n\n  /**\n   * Resolves the part names for the container based on the current state.\n   */\n  protected _resolvePartNames(base: string): Record<string, boolean> {\n    return {\n      [base]: true,\n      prefixed: this._slots.hasAssignedElements('prefix', {\n        selector: '[slot=\"prefix\"]:not([hidden])',\n      }),\n      suffixed: this._slots.hasAssignedElements('suffix', {\n        selector: '[slot=\"suffix\"]:not([hidden])',\n      }),\n      filled: !this._isEmptyMask,\n    };\n  }\n\n  // #endregion\n\n  // #region Public API\n\n  /** Selects all the text inside the input. */\n  public select(): void {\n    this._input?.select();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the control. */\n  public override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the control. */\n  public override blur(): void {\n    this._input?.blur();\n  }\n\n  /** Increments a date/time portion. */\n  public stepUp(datePart?: unknown, delta?: number): void {\n    this._performStep(datePart, delta, false);\n  }\n\n  /** Decrements a date/time portion. */\n  public stepDown(datePart?: unknown, delta?: number): void {\n    this._performStep(datePart, delta, true);\n  }\n\n  /** Clears the input element of user input. */\n  public abstract clear(): void;\n\n  //#endregion\n\n  //#region Render\n\n  protected _renderInput(): TemplateResult {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n    const hasHelperText = this._slots.hasAssignedElements('helper-text');\n\n    return renderMaskedNativeInput({\n      id: this._inputId,\n      partNames: this._resolvePartNames('input'),\n      name: this.name,\n      value: this._maskedValue,\n      placeholder: this.placeholder || this._parser.emptyMask,\n      readOnly: this.readOnly,\n      disabled: this.disabled,\n      tabindex: hasNegativeTabIndex ? -1 : undefined,\n      ariaDescribedBy: hasHelperText ? 'helper-text' : undefined,\n      onInput: this._handleInput,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      onClick: this._handleClick,\n      onSetMaskSelection: this._setMaskSelection,\n      onCompositionStart: this._handleCompositionStart,\n      onCompositionEnd: this._handleCompositionEnd,\n      onWheel: this._handleWheel,\n      onDragEnter: this._handleDragEnter,\n      onDragLeave: this._handleDragLeave,\n    });\n  }\n\n  protected override render() {\n    return cache(\n      renderInputShell(this, {\n        theme: this._themes.theme,\n        label: this.label,\n        labelId: this._inputId,\n        containerParts: this._resolvePartNames('container'),\n        renderInput: this._renderInput,\n      })\n    );\n  }\n\n  //#endregion\n\n  // #region Abstract methods and properties\n\n  protected abstract get _datePartDeltas(): DatePartDeltas;\n\n  protected abstract _buildMaskedValue(): string;\n  protected abstract _buildDisplayValue(): string;\n  protected abstract override _syncValueFromMask(): void;\n  protected abstract _calculatePartNavigationPosition(\n    value: string,\n    direction: number\n  ): number;\n  protected abstract _calculateSpunValue(\n    part: unknown,\n    delta: number | undefined,\n    isDecrement: boolean\n  ): unknown;\n  protected abstract _commitSpunValue(value: unknown): void;\n  protected abstract _setCurrentDateTime(): void;\n  protected abstract _handleFocus(): Promise<void>;\n  protected abstract _getDatePartAtCursor(): unknown;\n  protected abstract _getDefaultDatePart(): unknown;\n\n  public abstract hasDateParts(): boolean;\n  public abstract hasTimeParts(): boolean;\n\n  // #endregion\n}\n"]}