igniteui-webcomponents 7.1.3 → 7.2.0

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

@@ -1,13 +1,6 @@
-import { type PropertyValues } from 'lit';
-import type { AbstractConstructor } from '../common/mixins/constructor.js';
-import type { IgcInputComponentEventMap } from '../input/input-base.js';
-import { IgcMaskInputBaseComponent, type MaskSelection } from '../mask-input/mask-input-base.js';
 import { DatePart, type DatePartDeltas } from './date-part.js';
+import { IgcDateTimeInputBaseComponent, type IgcDateTimeInputComponentEventMap } from './date-time-input.base.js';
 import { DateTimeMaskParser } from './datetime-mask-parser.js';
-export interface IgcDateTimeInputComponentEventMap extends Omit<IgcInputComponentEventMap, 'igcChange'> {
-    igcChange: CustomEvent<Date | null>;
-}
-declare const IgcDateTimeInputComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDateTimeInputComponentEventMap>> & AbstractConstructor<IgcMaskInputBaseComponent>;
 /**
  * A date time input is an input field that lets you set and edit the date and time in a chosen input element
  * using customizable display and input formats.
@@ -33,159 +26,79 @@ declare const IgcDateTimeInputComponent_base: import("../common/mixins/construct
  * @csspart suffix - The suffix wrapper.
  * @csspart helper-text - The helper text wrapper.
  */
-export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent_base {
+export interface IgcDateTimeInputEventMap extends Omit<IgcDateTimeInputComponentEventMap, 'igcChange'> {
+    igcChange: CustomEvent<Date | null>;
+}
+export default class IgcDateTimeInputComponent extends IgcDateTimeInputBaseComponent {
     static readonly tagName = "igc-date-time-input";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    protected readonly _parser: DateTimeMaskParser;
-    private _defaultDisplayFormat;
-    private _displayFormat?;
-    private _inputFormat?;
-    private _oldValue;
-    private _min;
-    private _max;
-    private readonly _i18nController;
     protected readonly _themes: import("../../theming/theming-controller.js").ThemingController;
-    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "helper-text" | "suffix" | "value-missing" | "range-overflow" | "range-underflow" | "custom-error">;
+    protected readonly _parser: DateTimeMaskParser;
     protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<Date | null>;
     protected get __validators(): import("../common/validators.js").Validator<IgcDateTimeInputComponent>[];
-    /**
-     * Determines which date/time part is currently targeted based on cursor position.
-     * When focused, returns the part under the cursor.
-     * When unfocused, returns a default part based on available parts.
-     */
-    private get _targetDatePart();
-    private get _datePartDeltas();
-    /**
-     * The date format to apply on the input.
-     * @attr input-format
-     */
-    set inputFormat(val: string);
-    get inputFormat(): string;
+    protected get _datePartDeltas(): DatePartDeltas;
+    protected _oldValue: Date | null;
     /**
      * The value of the input.
      * @attr
      */
     set value(value: Date | string | null | undefined);
     get value(): Date | null;
-    /**
-     * The minimum value required for the input to remain valid.
-     * @attr
-     */
-    set min(value: Date | string | null | undefined);
-    get min(): Date | null;
-    /**
-     * The maximum value required for the input to remain valid.
-     * @attr
-     */
-    set max(value: Date | string | null | undefined);
-    get max(): Date | null;
-    /**
-     * Format to display the value in when not editing.
-     * Defaults to the locale format if not set.
-     * @attr display-format
-     */
-    set displayFormat(value: string);
-    get displayFormat(): string;
-    /**
-     * Delta values used to increment or decrement each date part on step actions.
-     * All values default to `1`.
-     */
-    spinDelta?: DatePartDeltas;
-    /**
-     * Sets whether to loop over the currently spun segment.
-     * @attr spin-loop
-     */
-    spinLoop: boolean;
-    /**
-     * Gets/Sets the locale used for formatting the display value.
-     * @attr locale
-     */
-    set locale(value: string);
-    get locale(): string;
-    constructor();
-    protected update(props: PropertyValues<this>): void;
-    protected _resolvePartNames(base: string): {
-        [x: string]: boolean;
-        prefixed: boolean;
-        suffixed: boolean;
-        filled: boolean;
-    };
-    protected _updateSetRangeTextValue(): void;
-    private _emitInputEvent;
-    private _handleResourceChange;
-    protected _handleDragLeave(): void;
-    protected _handleDragEnter(): void;
-    private _handleWheel;
     protected _handleFocus(): Promise<void>;
     protected _handleBlur(): void;
-    protected _setCurrentDateTime(): void;
-    /**
-     * Navigates to the previous or next date part.
-     */
-    protected _navigateParts(direction: number): void;
     /**
      * Calculates the new cursor position when navigating between date parts.
      * direction = 0: navigate to start of previous part
      * direction = 1: navigate to start of next part
      */
-    private _calculatePartNavigationPosition;
-    /**
-     * Handles keyboard-triggered spinning (arrow up/down).
-     */
-    protected _keyboardSpin(direction: 'up' | 'down'): Promise<void>;
+    protected _calculatePartNavigationPosition(inputValue: string, direction: number): number;
     /**
-     * Updates the displayed mask value based on focus state.
-     * When focused, shows the editable mask. When unfocused, shows formatted display value.
-     */
-    protected _updateMaskDisplay(): void;
-    protected _updateInput(text: string, { start, end }: MaskSelection): Promise<void>;
-    /**
-     * Common logic for stepping up or down a date part.
+     * Gets the date part at the current cursor position.
+     * Uses inclusive end to handle cursor at the end of the last part.
+     * Returns undefined if cursor is not within a valid date part.
      */
-    private _performStep;
+    protected _getDatePartAtCursor(): DatePart | undefined;
     /**
-     * Calculates the new date value after spinning a date part.
+     * Gets the default date part to target when the input is not focused.
+     * Prioritizes: Date > Hours > First available part
      */
-    private _calculateSpunValue;
+    protected _getDefaultDatePart(): DatePart | undefined;
     /**
-     * Spins a specific date part by the given delta.
+     * Builds the masked value string from the current date value.
+     * Returns empty mask if no value, or existing masked value if incomplete.
      */
-    private _spinDatePart;
+    protected _buildMaskedValue(): string;
     /**
-     * Updates the default display format based on current locale.
+     * Builds the formatted display value shown when the input is not focused.
      */
-    private _updateDefaultDisplayFormat;
+    protected _buildDisplayValue(): string;
     /**
-     * Applies a mask pattern to the input, parsing the format string into date parts.
+     * Commits a value produced by spinning a date part.
      */
-    private _applyMask;
+    protected _commitSpunValue(value: unknown): void;
     /**
-     * Builds the masked value string from the current date value.
-     * Returns empty mask if no value, or existing masked value if incomplete.
+     * Sets the value to the current date/time.
      */
-    private _buildMaskedValue;
-    protected _initializeDefaultMask(): void;
+    protected _setCurrentDateTime(): void;
     /**
-     * Gets the date part at the current cursor position.
-     * Uses inclusive end to handle cursor at the end of the last part.
-     * Returns undefined if cursor is not within a valid date part.
+     * Emits an `igcInput` event whose `detail` is the parsed value as an ISO
+     * string (preserving the legacy contract for this component).
      */
-    private _getDatePartAtCursor;
+    protected _emitInputEvent(): void;
     /**
-     * Gets the default date part to target when the input is not focused.
-     * Prioritizes: Date > Hours > First available part
+     * Calculates the new date value after spinning a date part.
      */
-    private _getDefaultDatePart;
+    protected _calculateSpunValue(datePart: DatePart, delta: number | undefined, isDecrement: boolean): Date;
     /**
-     * Checks if all mask positions are filled (no prompt characters remain).
+     * Spins a specific date part by the given delta.
      */
-    private _isMaskComplete;
+    protected _spinDatePart(datePart: DatePart, delta: number): Date;
     /**
      * Updates the internal value based on the current masked input.
      * Only sets a value if the mask is complete and parses to a valid date.
      */
-    private _updateValueFromMask;
+    protected _syncValueFromMask(): void;
     /** Increments a date/time portion. */
     stepUp(datePart?: DatePart, delta?: number): void;
     /** Decrements a date/time portion. */
@@ -202,11 +115,9 @@ export default class IgcDateTimeInputComponent extends IgcDateTimeInputComponent
      * @internal
      */
     hasTimeParts(): boolean;
-    protected _renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'igc-date-time-input': IgcDateTimeInputComponent;
     }
 }
-export {};

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

@@ -4,31 +4,33 @@ 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 { html } from 'lit';
-import { eventOptions, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
+import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { convertToDate, isValidDate } 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 { registerComponent } from '../common/definitions/register.js';
-import { addI18nController, formatDisplayDate, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { formatDisplayDate } from '../common/i18n/i18n-controller.js';
 import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
-import { partMap } from '../common/part-map.js';
+import { equal } from '../common/util.js';
 import { styles } from '../input/themes/input.base.css.js';
 import { styles as shared } from '../input/themes/shared/input.common.css.js';
 import { all } from '../input/themes/themes.js';
-import { IgcMaskInputBaseComponent, } from '../mask-input/mask-input-base.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { DatePart, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.js';
+import { IgcDateTimeInputBaseComponent, } from './date-time-input.base.js';
 import { createDatePart, DateParts, DateTimeMaskParser, } from './datetime-mask-parser.js';
 import { dateTimeInputValidators } from './validators.js';
-const Slots = setSlots('prefix', 'suffix', 'helper-text', 'value-missing', 'range-overflow', 'range-underflow', 'custom-error', 'invalid');
-export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMaskInputBaseComponent) {
+export default class IgcDateTimeInputComponent extends IgcDateTimeInputBaseComponent {
+    constructor() {
+        super(...arguments);
+        this._themes = addThemingController(this, all);
+        this._parser = new DateTimeMaskParser();
+        this._formValue = createFormValueState(this, {
+            initialValue: null,
+            transformers: FormValueDateTimeTransformers,
+        });
+        this._oldValue = null;
+    }
     static { this.tagName = 'igc-date-time-input'; }
     static { this.styles = [styles, shared]; }
     static register() {
@@ -37,24 +39,9 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
     get __validators() {
         return dateTimeInputValidators;
     }
-    get _targetDatePart() {
-        return this._focused
-            ? this._getDatePartAtCursor()
-            : this._getDefaultDatePart();
-    }
     get _datePartDeltas() {
         return { ...DEFAULT_DATE_PARTS_SPIN_DELTAS, ...this.spinDelta };
     }
-    set inputFormat(val) {
-        if (val) {
-            this._applyMask(val);
-            this._inputFormat = val;
-            this._updateMaskDisplay();
-        }
-    }
-    get inputFormat() {
-        return this._inputFormat || this._parser.mask;
-    }
     set value(value) {
         this._formValue.setValueAndFormState(value);
         this._updateMaskDisplay();
@@ -62,112 +49,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
     get value() {
         return this._formValue.value;
     }
-    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._parser = new DateTimeMaskParser();
-        this._defaultDisplayFormat = '';
-        this._oldValue = null;
-        this._min = null;
-        this._max = null;
-        this._i18nController = addI18nController(this, {
-            defaultEN: {},
-            onResourceChange: this._handleResourceChange,
-        });
-        this._themes = addThemingController(this, all);
-        this._slots = addSlotController(this, {
-            slots: Slots,
-        });
-        this._formValue = createFormValueState(this, {
-            initialValue: null,
-            transformers: FormValueDateTimeTransformers,
-        });
-        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);
-    }
-    _resolvePartNames(base) {
-        const result = super._resolvePartNames(base);
-        result.filled = result.filled || !this._isEmptyMask;
-        return result;
-    }
-    _updateSetRangeTextValue() {
-        this._updateValueFromMask();
-    }
-    _emitInputEvent() {
-        this._setTouchedState();
-        this.emitEvent('igcInput', { detail: this.value?.toString() });
-    }
-    _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);
-    }
     async _handleFocus() {
         this._focused = true;
         if (this.readOnly) {
@@ -197,19 +78,11 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         else {
             this._updateMaskDisplay();
         }
-        if (!this.readOnly && this._oldValue !== this.value) {
+        if (!this.readOnly && !equal(this._oldValue, this.value)) {
             this.emitEvent('igcChange', { detail: this.value });
         }
         super._handleBlur();
     }
-    _setCurrentDateTime() {
-        this.value = new Date();
-        this._emitInputEvent();
-    }
-    _navigateParts(direction) {
-        const position = this._calculatePartNavigationPosition(this._input?.value ?? '', direction);
-        this.setSelectionRange(position, position);
-    }
     _calculatePartNavigationPosition(inputValue, direction) {
         const cursorPos = this._maskSelection.start;
         const dateParts = this._parser.dateParts;
@@ -220,39 +93,35 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         const part = dateParts.find((part) => part.type === DateParts.Literal && part.start > cursorPos);
         return part?.start ?? inputValue.length;
     }
-    async _keyboardSpin(direction) {
-        direction === 'up' ? this.stepUp() : this.stepDown();
-        this._emitInputEvent();
-        await this.updateComplete;
-        this.setSelectionRange(this._maskSelection.start, this._maskSelection.end);
+    _getDatePartAtCursor() {
+        return this._parser.getDatePartForCursor(this._inputSelection.start)
+            ?.type;
     }
-    _updateMaskDisplay() {
-        if (this._focused) {
-            this._maskedValue = this._buildMaskedValue();
-            return;
-        }
-        if (!isValidDate(this.value)) {
-            this._maskedValue = '';
-            return;
-        }
-        this._maskedValue = formatDisplayDate(this.value, this.locale, this.displayFormat);
+    _getDefaultDatePart() {
+        return (this._parser.getPartByType(DateParts.Date)?.type ??
+            this._parser.getPartByType(DateParts.Hours)?.type ??
+            this._parser.getFirstDatePart()?.type);
     }
-    async _updateInput(text, { start, end }) {
-        const result = this._parser.replace(this._maskedValue, text, start, end);
-        this._maskedValue = result.value;
-        this._updateValueFromMask();
-        this.requestUpdate();
-        if (start !== this.inputFormat.length) {
-            this._emitInputEvent();
-        }
-        await this.updateComplete;
-        this._input?.setSelectionRange(result.end, result.end);
+    _buildMaskedValue() {
+        return isValidDate(this.value)
+            ? this._parser.formatDate(this.value)
+            : this._maskedValue || this._parser.emptyMask;
+    }
+    _buildDisplayValue() {
+        return isValidDate(this.value)
+            ? formatDisplayDate(this.value, this.locale, this.displayFormat)
+            : '';
+    }
+    _commitSpunValue(value) {
+        this.value = value;
+    }
+    _setCurrentDateTime() {
+        this.value = new Date();
+        this._emitInputEvent();
     }
-    _performStep(datePart, delta, isDecrement) {
-        const part = datePart || this._targetDatePart;
-        const { start, end } = this._inputSelection;
-        this.value = this._calculateSpunValue(part, delta, isDecrement);
-        this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
+    _emitInputEvent() {
+        this._setTouchedState();
+        this.emitEvent('igcInput', { detail: this.value?.toISOString() });
     }
     _calculateSpunValue(datePart, delta, isDecrement) {
         const effectiveDelta = delta || this._datePartDeltas[datePart] || 1;
@@ -286,40 +155,7 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         });
         return newDate;
     }
-    _updateDefaultDisplayFormat() {
-        this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
-    }
-    _applyMask(formatString) {
-        const previous = this._parser.mask;
-        this._parser.mask = formatString;
-        if (!this.placeholder || previous === this.placeholder) {
-            this.placeholder = this._parser.mask;
-        }
-    }
-    _buildMaskedValue() {
-        return isValidDate(this.value)
-            ? this._parser.formatDate(this.value)
-            : this._maskedValue || this._parser.emptyMask;
-    }
-    _initializeDefaultMask() {
-        this._updateDefaultDisplayFormat();
-        if (!this._inputFormat) {
-            this._applyMask(getDefaultDateTimeFormat(this.locale));
-        }
-    }
-    _getDatePartAtCursor() {
-        return this._parser.getDatePartForCursor(this._inputSelection.start)
-            ?.type;
-    }
-    _getDefaultDatePart() {
-        return (this._parser.getPartByType(DateParts.Date)?.type ??
-            this._parser.getPartByType(DateParts.Hours)?.type ??
-            this._parser.getFirstDatePart()?.type);
-    }
-    _isMaskComplete() {
-        return !this._maskedValue.includes(this.prompt);
-    }
-    _updateValueFromMask() {
+    _syncValueFromMask() {
         if (!this._isMaskComplete()) {
             this.value = null;
             return;
@@ -328,10 +164,10 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         this.value = isValidDate(parsedDate) ? parsedDate : null;
     }
     stepUp(datePart, delta) {
-        this._performStep(datePart, delta, false);
+        super.stepUp(datePart, delta);
     }
     stepDown(datePart, delta) {
-        this._performStep(datePart, delta, true);
+        super.stepDown(datePart, delta);
     }
     clear() {
         this._maskedValue = '';
@@ -343,57 +179,8 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
     hasTimeParts() {
         return this._parser.hasTimeParts();
     }
-    _renderInput() {
-        return html `
-      <input
-        type="text"
-        part=${partMap(this._resolvePartNames('input'))}
-        name=${ifDefined(this.name)}
-        .value=${live(this._maskedValue)}
-        .placeholder=${this.placeholder || this._parser.emptyMask}
-        ?readonly=${this.readOnly}
-        ?disabled=${this.disabled}
-        @blur=${this._handleBlur}
-        @focus=${this._handleFocus}
-        @input=${this._handleInput}
-        @wheel=${this._handleWheel}
-        @keydown=${this._setMaskSelection}
-        @click=${this._handleClick}
-        @cut=${this._setMaskSelection}
-        @compositionstart=${this._handleCompositionStart}
-        @compositionend=${this._handleCompositionEnd}
-        @dragenter=${this._handleDragEnter}
-        @dragleave=${this._handleDragLeave}
-        @dragstart=${this._setMaskSelection}
-      />
-    `;
-    }
 }
-__decorate([
-    property({ attribute: 'input-format' })
-], IgcDateTimeInputComponent.prototype, "inputFormat", null);
 __decorate([
     property({ converter: convertToDate })
 ], IgcDateTimeInputComponent.prototype, "value", null);
-__decorate([
-    property({ converter: convertToDate })
-], IgcDateTimeInputComponent.prototype, "min", null);
-__decorate([
-    property({ converter: convertToDate })
-], IgcDateTimeInputComponent.prototype, "max", null);
-__decorate([
-    property({ attribute: 'display-format' })
-], IgcDateTimeInputComponent.prototype, "displayFormat", null);
-__decorate([
-    property({ attribute: false })
-], IgcDateTimeInputComponent.prototype, "spinDelta", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'spin-loop' })
-], IgcDateTimeInputComponent.prototype, "spinLoop", void 0);
-__decorate([
-    property()
-], IgcDateTimeInputComponent.prototype, "locale", null);
-__decorate([
-    eventOptions({ passive: false })
-], IgcDateTimeInputComponent.prototype, "_handleWheel", null);
 //# sourceMappingURL=date-time-input.js.map