@yuuvis/client-framework 3.19.0 → 3.20.1

package/fesm2022/yuuvis-client-framework-datepicker.mjs

@@ -395,7 +395,11 @@ class DateInputElementComponent {
         this.disabled = isDisabled;
     }
     _isValidInput(v) {
-        const n = parseInt(v);
+        // digits only - parseInt alone would accept trailing garbage like '1x' and
+        // silently reduce it to 1
+        if (!/^\d+$/.test(`${v ?? ''}`))
+            return false;
+        const n = parseInt(`${v}`, 10);
         return this._isNumber(n) && (!this.maxValue || n <= this.maxValue) && (!this.minValue || n >= this.minValue);
     }
     validate(c) {
@@ -1067,6 +1071,7 @@ class DateInputComponent {
         this.date = null;
         this._disabled = false;
         this.invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this._dateInvalid = false;
         this._refreshPlaceholder = true;
         this._locale = this.datepickerService.DEFAULT_LANGUAGE;
         this._withTime = false;
@@ -1117,12 +1122,20 @@ class DateInputComponent {
             }
         });
         this._formStateSub = this.dateInputForm.statusChanges.subscribe({
-            next: (v) => {
-                this._setInvalidInputError(v === 'INVALID');
+            next: () => {
+                this._updateInvalidState();
             }
         });
     }
-    _setInvalidInputError(isInvalid) {
+    /**
+     * Reflects both sources of invalidity: a structurally incomplete/invalid form
+     * (missing or out of range parts) and input that does not describe a real
+     * calendar date (e.g. 31st of February). Both have to be taken into account
+     * here because the form group may well be VALID while the entered parts still
+     * do not add up to an existing date.
+     */
+    _updateInvalidState() {
+        const isInvalid = this.dateInputForm?.status === 'INVALID' || this._dateInvalid;
         this.invalid.set(isInvalid);
         if (isInvalid) {
             this.datepickerService.setErrors({
@@ -1134,39 +1147,78 @@ class DateInputComponent {
         }
     }
     _checkAndPropagateForm() {
-        if (this.dateInputForm?.status === 'VALID') {
-            this.date = this._formToDate(this.dateInputForm);
-            this.datepickerService.setValue(this.date);
+        if (this.dateInputForm?.status !== 'VALID') {
+            // incomplete or out of range input, the status subscription reports the error
+            return;
         }
-    }
-    _formToDate(g) {
-        // starting with a year of '0000' because there could be negative values
-        // that would break the date creation using string parameter
-        let dateString = `0000-${g.controls['month'].value}-${g.controls['day'].value}`;
-        if (this.withTime) {
-            const strHour = g.controls['hour'].value;
-            let hour = strHour?.length ? parseInt(strHour) : -1;
-            if (this.hour12) {
-                hour = this.currentDayPeriod === 'pm' && hour < 12 ? hour + 12 : hour;
-                hour = this.currentDayPeriod === 'am' && hour === 12 ? 0 : hour;
-                hour = hour === 24 ? 0 : hour;
-            }
-            dateString += `T${hour < 10 ? `0${hour}` : `${hour}`}:${g.controls['minute'].value}:00`;
+        const parsed = this._formToDate(this.dateInputForm);
+        if (!parsed.empty && !parsed.date) {
+            // input that does not describe an existing date (e.g. 31.02.). Keep what the user
+            // typed so it can be corrected, but do not propagate a silently shifted date
+            this._dateInvalid = true;
+            this._updateInvalidState();
+            return;
         }
-        const date = new Date(dateString);
-        let isValidDateObject = !!date && Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
-        if (isValidDateObject) {
-            // set the year independently
-            const parsedYear = parseInt(g.controls['year'].value);
-            if (!isNaN(parsedYear)) {
-                date.setFullYear(parsedYear);
-            }
-            else {
-                isValidDateObject = false;
-            }
+        this._dateInvalid = false;
+        this.date = parsed.date;
+        this.datepickerService.setValue(this.date);
+        this._updateInvalidState();
+    }
+    _formToDate(group) {
+        const keys = this.withTime ? ['day', 'month', 'year', 'hour', 'minute'] : ['day', 'month', 'year'];
+        if (keys.every((key) => !`${group.controls[key].value ?? ''}`.length))
+            return { date: null, empty: true };
+        const invalid = { date: null, empty: false };
+        const day = this._toInt(group.controls['day'].value);
+        const month = this._toInt(group.controls['month'].value);
+        // the year may be negative because of a locale year offset (e.g. locale 'th')
+        const year = this._toInt(group.controls['year'].value, true);
+        if (day === null || month === null || year === null)
+            return invalid;
+        if (month < 1 || month > 12 || day < 1 || day > this._daysInMonth(year, month))
+            return invalid;
+        const time = this._formToTime(group);
+        if (!time)
+            return invalid;
+        // setFullYear with all three arguments assigns them at once, so no intermediate
+        // rollover can happen, and it also covers years outside the parsable range
+        const date = new Date(0);
+        date.setFullYear(year, month - 1, day);
+        date.setHours(time.hour, time.minute, 0, 0);
+        // guard against any remaining shift (e.g. a local time skipped by a DST change)
+        return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day
+            ? { date, empty: false }
+            : invalid;
+    }
+    _formToTime(group) {
+        if (!this.withTime)
+            return { hour: 0, minute: 0 };
+        let hour = this._toInt(group.controls['hour'].value);
+        const minute = this._toInt(group.controls['minute'].value);
+        if (hour === null || minute === null)
+            return null;
+        if (this.hour12) {
+            hour = this.currentDayPeriod === 'pm' && hour < 12 ? hour + 12 : hour;
+            hour = this.currentDayPeriod === 'am' && hour === 12 ? 0 : hour;
+            hour = hour === 24 ? 0 : hour;
         }
-        this._setInvalidInputError(!isValidDateObject);
-        return isValidDateObject ? date : null;
+        return hour > 23 || minute > 59 ? null : { hour, minute };
+    }
+    /**
+     * Strict integer parse - unlike parseInt it rejects values with trailing
+     * garbage ('1x') so those cannot slip through as a valid date part.
+     */
+    _toInt(value, allowNegative = false) {
+        const str = `${value ?? ''}`;
+        if (!(allowNegative ? /^-?\d+$/ : /^\d+$/).test(str))
+            return null;
+        return parseInt(str, 10);
+    }
+    _daysInMonth(year, month) {
+        // day 0 of the following month is the last day of the given month
+        const last = new Date(0);
+        last.setFullYear(year, month, 0);
+        return last.getDate();
     }
     _focusInput(offset) {
         const inputs = this._getFocusableElements();
@@ -1291,6 +1343,10 @@ class DateInputComponent {
                 this.dateInputForm.patchValue(this._getPatch(vc.value), {
                     emitEvent: false
                 });
+                // the value comes from the outside (calendar, model), so any previously
+                // entered non existing date is gone now
+                this._dateInvalid = false;
+                this._updateInvalidState();
                 // this.dateInputForm?.updateValueAndValidity()
             }
         }));