igniteui-webcomponents 6.5.1 → 7.0.0

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

@@ -10,12 +10,11 @@ import { eventOptions, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { addThemingController } from '../../theming/theming-controller.js';
-import { convertToDate } from '../calendar/helpers.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 { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { addI18nController } from '../common/i18n/i18n-controller.js';
+import { addI18nController, formatDisplayDate, getDefaultDateTimeFormat, } from '../common/i18n/i18n-controller.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
@@ -25,7 +24,8 @@ 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, DateParts, DateTimeUtil, } from './date-util.js';
+import { DatePart, DEFAULT_DATE_PARTS_SPIN_DELTAS, } from './date-part.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) {
@@ -37,24 +37,30 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
     get __validators() {
         return dateTimeInputValidators;
     }
-    get inputFormat() {
-        return this._inputFormat || this._defaultMask;
+    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.setMask(val);
+            this._applyMask(val);
             this._inputFormat = val;
-            if (this.value) {
-                this.updateMask();
-            }
+            this._updateMaskDisplay();
         }
     }
-    get value() {
-        return this._formValue.value;
+    get inputFormat() {
+        return this._inputFormat || this._parser.mask;
     }
     set value(value) {
         this._formValue.setValueAndFormState(value);
-        this.updateMask();
+        this._updateMaskDisplay();
+    }
+    get value() {
+        return this._formValue.value;
     }
     set min(value) {
         this._min = convertToDate(value);
@@ -82,62 +88,17 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
     get locale() {
         return this._i18nController.locale;
     }
-    setDefaultMask() {
-        this.updateDefaultDisplayFormat();
-        if (!this._inputFormat) {
-            this.updateDefaultMask();
-            this.setMask(this._defaultMask);
-        }
-        if (this.value) {
-            this.updateMask();
-        }
-    }
-    setDisplayFormat() {
-        this.updateDefaultDisplayFormat();
-        if (this.value) {
-            this.updateMask();
-        }
-    }
-    get hasDateParts() {
-        const parts = this._inputDateParts ||
-            DateTimeUtil.parseDateTimeFormat(this.inputFormat, this.locale);
-        return parts.some((p) => p.type === DateParts.Date ||
-            p.type === DateParts.Month ||
-            p.type === DateParts.Year);
-    }
-    get hasTimeParts() {
-        const parts = this._inputDateParts ||
-            DateTimeUtil.parseDateTimeFormat(this.inputFormat, this.locale);
-        return parts.some((p) => p.type === DateParts.Hours ||
-            p.type === DateParts.Minutes ||
-            p.type === DateParts.Seconds);
-    }
-    get targetDatePart() {
-        let result;
-        if (this._focused) {
-            const partType = this._inputDateParts.find((p) => p.start <= this._inputSelection.start &&
-                this._inputSelection.start <= p.end &&
-                p.type !== DateParts.Literal)?.type;
-            if (partType) {
-                result = partType;
-            }
-        }
-        else if (this._inputDateParts.some((p) => p.type === DateParts.Date)) {
-            result = DatePart.Date;
-        }
-        else if (this._inputDateParts.some((p) => p.type === DateParts.Hours)) {
-            result = DatePart.Hours;
-        }
-        else {
-            result = this._inputDateParts[0].type;
-        }
-        return result;
-    }
-    get datePartDeltas() {
-        return Object.assign({}, this._datePartDeltas, this.spinDelta);
-    }
     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,
@@ -146,150 +107,56 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
             initialValue: null,
             transformers: FormValueDateTimeTransformers,
         });
-        this._i18nController = addI18nController(this, {
-            defaultEN: {},
-            onResourceChange: () => {
-                this.setDefaultMask();
-            },
-        });
-        this._oldValue = null;
-        this._min = null;
-        this._max = null;
-        this._datePartDeltas = {
-            date: 1,
-            month: 1,
-            year: 1,
-            hours: 1,
-            minutes: 1,
-            seconds: 1,
-        };
         this.spinLoop = true;
         addKeybindings(this, {
             skip: () => this.readOnly,
             bindingDefaults: { triggers: ['keydownRepeat'] },
         })
-            .set([ctrlKey, ';'], this.setToday)
-            .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));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateDefaultMask();
-        this.updateDefaultDisplayFormat();
-        this.setMask(this.inputFormat);
-        if (this.value) {
-            this.updateMask();
+            .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();
         }
-    }
-    stepUp(datePart, delta) {
-        const targetPart = datePart || this.targetDatePart;
-        if (!targetPart) {
-            return;
+        if (props.has('locale')) {
+            this._initializeDefaultMask();
         }
-        const { start, end } = this._inputSelection;
-        const newValue = this.trySpinValue(targetPart, delta);
-        this.value = newValue;
-        this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
-    }
-    stepDown(datePart, delta) {
-        const targetPart = datePart || this.targetDatePart;
-        if (!targetPart) {
-            return;
+        if (props.has('displayFormat') || props.has('locale')) {
+            this._updateMaskDisplay();
         }
-        const { start, end } = this._inputSelection;
-        const newValue = this.trySpinValue(targetPart, delta, true);
-        this.value = newValue;
-        this.updateComplete.then(() => this._input?.setSelectionRange(start, end));
-    }
-    clear() {
-        this._maskedValue = '';
-        this.value = null;
+        super.update(props);
     }
-    setToday() {
-        this.value = new Date();
-        this._fireInputEvent();
+    _resolvePartNames(base) {
+        const result = super._resolvePartNames(base);
+        result.filled = result.filled || !this._isEmptyMask;
+        return result;
     }
-    updateMask() {
-        if (this._focused) {
-            this._maskedValue = this.getMaskedValue();
-        }
-        else {
-            if (!DateTimeUtil.isValidDate(this.value)) {
-                this._maskedValue = '';
-                return;
-            }
-            this._maskedValue = DateTimeUtil.formatDisplayDate(this.value, this.locale, this.displayFormat);
-        }
+    _updateSetRangeTextValue() {
+        this._updateValueFromMask();
     }
-    _fireInputEvent() {
+    _emitInputEvent() {
         this._setTouchedState();
         this.emitEvent('igcInput', { detail: this.value?.toString() });
     }
-    handleDragLeave() {
-        if (!this._focused) {
-            this.updateMask();
-        }
+    _handleResourceChange() {
+        this._initializeDefaultMask();
+        this._updateMaskDisplay();
     }
-    handleDragEnter() {
+    _handleDragLeave() {
         if (!this._focused) {
-            this._maskedValue = this.getMaskedValue();
+            this._updateMaskDisplay();
         }
     }
-    async _updateInput(text, { start, end }) {
-        const result = this._parser.replace(this._maskedValue, text, start, end);
-        this._maskedValue = result.value;
-        this.updateValue();
-        this.requestUpdate();
-        if (start !== this.inputFormat.length) {
-            this._fireInputEvent();
-        }
-        await this.updateComplete;
-        this._input?.setSelectionRange(result.end, result.end);
-    }
-    trySpinValue(datePart, delta, negative = false) {
-        const _delta = delta || this.datePartDeltas[datePart] || 1;
-        const spinValue = negative ? -Math.abs(_delta) : Math.abs(_delta);
-        return this.spinValue(datePart, spinValue);
-    }
-    spinValue(datePart, delta) {
-        if (!(this.value && DateTimeUtil.isValidDate(this.value))) {
-            return new Date();
-        }
-        const newDate = new Date(this.value.getTime());
-        let formatPart;
-        let amPmFromMask;
-        switch (datePart) {
-            case DatePart.Date:
-                DateTimeUtil.spinDate(delta, newDate, this.spinLoop);
-                break;
-            case DatePart.Month:
-                DateTimeUtil.spinMonth(delta, newDate, this.spinLoop);
-                break;
-            case DatePart.Year:
-                DateTimeUtil.spinYear(delta, newDate);
-                break;
-            case DatePart.Hours:
-                DateTimeUtil.spinHours(delta, newDate, this.spinLoop);
-                break;
-            case DatePart.Minutes:
-                DateTimeUtil.spinMinutes(delta, newDate, this.spinLoop);
-                break;
-            case DatePart.Seconds:
-                DateTimeUtil.spinSeconds(delta, newDate, this.spinLoop);
-                break;
-            case DatePart.AmPm:
-                formatPart = this._inputDateParts.find((dp) => dp.type === DateParts.AmPm);
-                if (formatPart !== undefined) {
-                    amPmFromMask = this._maskedValue.substring(formatPart.start, formatPart.end);
-                    return DateTimeUtil.spinAmPm(newDate, this.value, amPmFromMask);
-                }
-                break;
+    _handleDragEnter() {
+        if (!this._focused) {
+            this._maskedValue = this._buildMaskedValue();
         }
-        return newDate;
     }
-    async onWheel(event) {
+    async _handleWheel(event) {
         if (!this._focused || this.readOnly) {
             return;
         }
@@ -297,121 +164,185 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         event.stopPropagation();
         const { start, end } = this._inputSelection;
         event.deltaY > 0 ? this.stepDown() : this.stepUp();
-        this._fireInputEvent();
+        this._emitInputEvent();
         await this.updateComplete;
         this.setSelectionRange(start, end);
     }
-    updateDefaultMask() {
-        this._defaultMask = DateTimeUtil.getDefaultInputMask(this.locale);
-    }
-    updateDefaultDisplayFormat() {
-        this._defaultDisplayFormat = getDateFormatter().getLocaleDateTimeFormat(this.locale);
-    }
-    setMask(string) {
-        const oldFormat = this._inputDateParts?.map((p) => p.format).join('');
-        this._inputDateParts = DateTimeUtil.parseDateTimeFormat(string, this.locale, true);
-        const value = this._inputDateParts.map((p) => p.format).join('');
-        this._defaultMask = value;
-        const newMask = (value || DateTimeUtil.DEFAULT_INPUT_FORMAT).replace(new RegExp(/(?=[^t])[\w]/, 'g'), '0');
-        this.mask = newMask.includes('tt') ? newMask.replace(/tt/g, 'LL') : newMask;
-        if (!this.placeholder || oldFormat === this.placeholder) {
-            this.placeholder = value;
-        }
-    }
-    parseDate(val) {
-        return val
-            ? DateTimeUtil.parseValueFromMask(val, this._inputDateParts, this.prompt)
-            : null;
-    }
-    getMaskedValue() {
-        let mask = this._parser.emptyMask;
-        if (DateTimeUtil.isValidDate(this.value)) {
-            for (const part of this._inputDateParts) {
-                if (part.type === DateParts.Literal) {
-                    continue;
-                }
-                const targetValue = DateTimeUtil.getPartValue(part, part.format.length, this.value);
-                mask = this._parser.replace(mask, targetValue, part.start, part.end).value;
-            }
-            return mask;
-        }
-        if (this.readOnly) {
-            return '';
-        }
-        return this._maskedValue === '' ? mask : this._maskedValue;
-    }
-    isComplete() {
-        return !this._maskedValue.includes(this.prompt);
-    }
-    updateValue() {
-        if (this.isComplete()) {
-            const parsedDate = this.parseDate(this._maskedValue);
-            this.value = DateTimeUtil.isValidDate(parsedDate) ? parsedDate : null;
-        }
-        else {
-            this.value = null;
-        }
-    }
-    _updateSetRangeTextValue() {
-        this.updateValue();
-    }
-    getNewPosition(value, direction = 0) {
-        const cursorPos = this._maskSelection.start;
-        if (!direction) {
-            const part = this._inputDateParts.findLast((part) => part.type === DateParts.Literal && part.end < cursorPos);
-            return part?.end ?? 0;
-        }
-        const part = this._inputDateParts.find((part) => part.type === DateParts.Literal && part.start > cursorPos);
-        return part?.start ?? value.length;
-    }
-    async handleFocus() {
+    async _handleFocus() {
         this._focused = true;
         if (this.readOnly) {
             return;
         }
         this._oldValue = this.value;
-        const areFormatsDifferent = this.displayFormat !== this.inputFormat;
         if (!this.value) {
             this._maskedValue = this._parser.emptyMask;
             await this.updateComplete;
             this.select();
         }
-        else if (areFormatsDifferent) {
-            this.updateMask();
+        else if (this.displayFormat !== this.inputFormat) {
+            this._updateMaskDisplay();
         }
     }
-    handleBlur() {
-        const isEmptyMask = this._maskedValue === this._parser.emptyMask;
+    _handleBlur() {
         this._focused = false;
-        if (!(this.isComplete() || isEmptyMask)) {
-            const parse = this.parseDate(this._maskedValue);
-            if (parse) {
-                this.value = parse;
+        if (!(this._isMaskComplete() || this._isEmptyMask)) {
+            const parsedDate = this._parser.parseDate(this._maskedValue);
+            if (parsedDate) {
+                this.value = parsedDate;
             }
             else {
-                this.value = null;
-                this._maskedValue = '';
+                this.clear();
             }
         }
         else {
-            this.updateMask();
+            this._updateMaskDisplay();
         }
-        const isSameValue = this._oldValue === this.value;
-        if (!(this.readOnly || isSameValue)) {
+        if (!this.readOnly && this._oldValue !== this.value) {
             this.emitEvent('igcChange', { detail: this.value });
         }
         super._handleBlur();
     }
-    navigateParts(delta) {
-        const position = this.getNewPosition(this._input?.value ?? '', delta);
+    _setCurrentDateTime() {
+        this.value = new Date();
+        this._emitInputEvent();
+    }
+    _navigateParts(direction) {
+        const position = this._calculatePartNavigationPosition(this._input?.value ?? '', direction);
         this.setSelectionRange(position, position);
     }
-    async keyboardSpin(direction) {
+    _calculatePartNavigationPosition(inputValue, direction) {
+        const cursorPos = this._maskSelection.start;
+        const dateParts = this._parser.dateParts;
+        if (direction === 0) {
+            const part = dateParts.findLast((part) => part.type === DateParts.Literal && part.end < cursorPos);
+            return part?.end ?? 0;
+        }
+        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._fireInputEvent();
+        this._emitInputEvent();
         await this.updateComplete;
         this.setSelectionRange(this._maskSelection.start, this._maskSelection.end);
     }
+    _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);
+    }
+    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);
+    }
+    _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));
+    }
+    _calculateSpunValue(datePart, delta, isDecrement) {
+        const effectiveDelta = delta || this._datePartDeltas[datePart] || 1;
+        const spinAmount = isDecrement
+            ? -Math.abs(effectiveDelta)
+            : Math.abs(effectiveDelta);
+        return this._spinDatePart(datePart, spinAmount);
+    }
+    _spinDatePart(datePart, delta) {
+        if (!isValidDate(this.value)) {
+            return new Date();
+        }
+        const newDate = new Date(this.value.getTime());
+        const partType = datePart;
+        let part = this._parser.getPartByType(partType);
+        if (!part) {
+            part = createDatePart(partType, { start: 0, end: 0, format: '' });
+        }
+        let amPmValue;
+        if (datePart === DatePart.AmPm) {
+            const formatPart = this._parser.getPartByType(DateParts.AmPm);
+            if (formatPart) {
+                amPmValue = this._maskedValue.substring(formatPart.start, formatPart.end);
+            }
+        }
+        part.spin(delta, {
+            date: newDate,
+            spinLoop: this.spinLoop,
+            amPmValue,
+            originalDate: this.value,
+        });
+        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() {
+        if (!this._isMaskComplete()) {
+            this.value = null;
+            return;
+        }
+        const parsedDate = this._parser.parseDate(this._maskedValue);
+        this.value = isValidDate(parsedDate) ? parsedDate : null;
+    }
+    stepUp(datePart, delta) {
+        this._performStep(datePart, delta, false);
+    }
+    stepDown(datePart, delta) {
+        this._performStep(datePart, delta, true);
+    }
+    clear() {
+        this._maskedValue = '';
+        this.value = null;
+    }
+    hasDateParts() {
+        return this._parser.hasDateParts();
+    }
+    hasTimeParts() {
+        return this._parser.hasTimeParts();
+    }
     _renderInput() {
         return html `
       <input
@@ -422,17 +353,17 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin(IgcMask
         .placeholder=${this.placeholder || this._parser.emptyMask}
         ?readonly=${this.readOnly}
         ?disabled=${this.disabled}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
+        @blur=${this._handleBlur}
+        @focus=${this._handleFocus}
         @input=${this._handleInput}
-        @wheel=${this.onWheel}
+        @wheel=${this._handleWheel}
         @keydown=${this._setMaskSelection}
         @click=${this._handleClick}
         @cut=${this._setMaskSelection}
         @compositionstart=${this._handleCompositionStart}
         @compositionend=${this._handleCompositionEnd}
-        @dragenter=${this.handleDragEnter}
-        @dragleave=${this.handleDragLeave}
+        @dragenter=${this._handleDragEnter}
+        @dragleave=${this._handleDragLeave}
         @dragstart=${this._setMaskSelection}
       />
     `;
@@ -462,13 +393,7 @@ __decorate([
 __decorate([
     property()
 ], IgcDateTimeInputComponent.prototype, "locale", null);
-__decorate([
-    watch('locale', { waitUntilFirstUpdate: true })
-], IgcDateTimeInputComponent.prototype, "setDefaultMask", null);
-__decorate([
-    watch('displayFormat', { waitUntilFirstUpdate: true })
-], IgcDateTimeInputComponent.prototype, "setDisplayFormat", null);
 __decorate([
     eventOptions({ passive: false })
-], IgcDateTimeInputComponent.prototype, "onWheel", null);
+], IgcDateTimeInputComponent.prototype, "_handleWheel", null);
 //# sourceMappingURL=date-time-input.js.map