@shival99/z-ui 2.0.30 → 2.0.32

package/fesm2022/shival99-z-ui-components-z-calendar.mjs

@@ -1915,6 +1915,7 @@ class ZCalendarComponent {
             return;
         }
         const input = event.target;
+        this._formatInputValue(input);
         const { value } = input;
         this._preserveInputSelection(input);
         this._hasTypedDraft.set(true);
@@ -1953,6 +1954,272 @@ class ZCalendarComponent {
     _getExpectedFormatLength(format) {
         return format.replace(/\[.*?\]/g, ' ').length;
     }
+    _parseFormatSegments(format) {
+        const tokens = ['YYYY', 'MM', 'DD', 'HH', 'hh', 'mm', 'ss', 'A', 'a'];
+        const segments = [];
+        let currentIndex = 0;
+        while (currentIndex < format.length) {
+            let matchedToken = null;
+            for (const token of tokens) {
+                if (format.startsWith(token, currentIndex)) {
+                    matchedToken = token;
+                    break;
+                }
+            }
+            if (matchedToken) {
+                // Tách các token thành các loại tương ứng
+                if (matchedToken === 'A' || matchedToken === 'a') {
+                    segments.push({ type: 'period', value: matchedToken });
+                }
+                if (matchedToken !== 'A' && matchedToken !== 'a') {
+                    segments.push({ type: 'digit', value: matchedToken });
+                }
+                currentIndex += matchedToken.length;
+                continue;
+            }
+            const char = format[currentIndex];
+            const lastSeg = segments[segments.length - 1];
+            if (lastSeg && lastSeg.type === 'literal') {
+                lastSeg.value += char;
+                currentIndex += 1;
+                continue;
+            }
+            segments.push({ type: 'literal', value: char });
+            currentIndex += 1;
+        }
+        return segments;
+    }
+    _formatValueOnTyping(value, format) {
+        // Không tự động format cho các định dạng tên tháng (như Tháng 6, June)
+        if (format.includes('MMM') || format.includes('MMMM')) {
+            return value;
+        }
+        const digitsCount = value.replace(/\D/g, '').length;
+        // Nếu không có chữ số nào (ví dụ đang nhập chữ 'invalid-date'), trả về giá trị gốc để không xóa trắng textbox
+        if (digitsCount === 0) {
+            return value;
+        }
+        const segments = this._parseFormatSegments(format);
+        const userGroups = value.match(/(\d+|[a-zA-Z]+)/g) || [];
+        let result = '';
+        let groupIndex = 0;
+        for (let i = 0; i < segments.length; i++) {
+            const seg = segments[i];
+            if (seg.type === 'digit') {
+                let group = userGroups[groupIndex] || '';
+                groupIndex++;
+                // Bỏ qua các nhóm không phải là chữ số khi cần khớp với segment dạng số
+                while (group && !/^\d+$/.test(group)) {
+                    group = userGroups[groupIndex] || '';
+                    groupIndex++;
+                }
+                if (!group) {
+                    break;
+                }
+                // Giới hạn chiều dài của nhóm số theo định nghĩa segment
+                const len = seg.value.length;
+                const clampedGroup = group.slice(0, len);
+                result += clampedGroup;
+                // Nếu nhóm số đã nhập đủ độ dài segment, tự động chèn separator tiếp theo
+                if (clampedGroup.length === len) {
+                    const nextSeg = segments[i + 1];
+                    if (nextSeg && nextSeg.type === 'literal') {
+                        result += nextSeg.value;
+                        i++;
+                        // Nếu người dùng đã gõ separator này rồi thì bỏ qua không lặp lại
+                        const nextGroup = userGroups[groupIndex];
+                        if (nextGroup && !/^[a-zA-Z0-9]+$/.test(nextGroup)) {
+                            groupIndex++;
+                        }
+                    }
+                }
+                continue;
+            }
+            if (seg.type === 'period') {
+                let group = userGroups[groupIndex] || '';
+                groupIndex++;
+                while (group && !/^[a-zA-Z]+$/.test(group)) {
+                    group = userGroups[groupIndex] || '';
+                    groupIndex++;
+                }
+                if (!group) {
+                    break;
+                }
+                const isPM = /PM/i.test(group);
+                if (seg.value === 'A') {
+                    result += isPM ? 'PM' : 'AM';
+                }
+                if (seg.value !== 'A') {
+                    result += isPM ? 'pm' : 'am';
+                }
+                continue;
+            }
+            if (seg.type === 'literal') {
+                if (groupIndex < userGroups.length) {
+                    result += seg.value;
+                }
+                continue;
+            }
+        }
+        return result;
+    }
+    _lastInputLengths = new Map();
+    _formatInputValue(input) {
+        const format = this._getParseFormat();
+        if (format.includes('MMM')) {
+            return;
+        }
+        const val = input.value;
+        if (!this._lastInputLengths.has(input)) {
+            this._lastInputLengths.set(input, val.length - 1);
+        }
+        const lastLen = this._lastInputLengths.get(input) || 0;
+        this._lastInputLengths.set(input, val.length);
+        if (val.length < lastLen) {
+            return;
+        }
+        const formatted = this._formatValueOnTyping(val, format);
+        if (formatted !== val) {
+            const start = input.selectionStart;
+            const end = input.selectionEnd;
+            input.value = formatted;
+            this._lastInputLengths.set(input, formatted.length);
+            if (document.activeElement === input && start !== null && end !== null) {
+                const diff = formatted.length - val.length;
+                const newPos = start + diff;
+                input.setSelectionRange(newPos, newPos);
+            }
+        }
+    }
+    _clampInputDateString(value, format) {
+        // Không tự động clamp đối với các định dạng chữ chứa tên tháng
+        if (format.includes('MMM') || format.includes('MMMM')) {
+            return value;
+        }
+        const trimmed = value.trim();
+        const digitsCount = trimmed.replace(/\D/g, '').length;
+        // Nếu không có chữ số nào, trả về giá trị gốc để validation phát hiện lỗi và revert
+        if (digitsCount === 0) {
+            return value;
+        }
+        const segments = this._parseFormatSegments(format);
+        const userGroups = trimmed.match(/(\d+|[a-zA-Z]+)/g) || [];
+        let year = new Date().getFullYear();
+        let month = 1;
+        let day = 1;
+        let hour = 0;
+        let minute = 0;
+        let second = 0;
+        const parsedValues = new Map();
+        let groupIndex = 0;
+        for (const seg of segments) {
+            if (seg.type === 'digit') {
+                let group = userGroups[groupIndex] || '';
+                groupIndex++;
+                while (group && !/^\d+$/.test(group)) {
+                    group = userGroups[groupIndex] || '';
+                    groupIndex++;
+                }
+                if (group) {
+                    parsedValues.set(seg.value, parseInt(group, 10));
+                }
+            }
+        }
+        if (parsedValues.has('YYYY')) {
+            year = parsedValues.get('YYYY');
+        }
+        if (parsedValues.has('MM')) {
+            month = Math.max(1, Math.min(12, parsedValues.get('MM')));
+        }
+        if (parsedValues.has('HH')) {
+            const val = parsedValues.get('HH');
+            hour = val > 23 ? 0 : Math.max(0, val);
+        }
+        if (parsedValues.has('hh')) {
+            hour = Math.max(1, Math.min(12, parsedValues.get('hh')));
+        }
+        if (parsedValues.has('mm')) {
+            minute = Math.max(0, Math.min(59, parsedValues.get('mm')));
+        }
+        if (parsedValues.has('ss')) {
+            second = Math.max(0, Math.min(59, parsedValues.get('ss')));
+        }
+        const maxDays = new Date(year, month, 0).getDate();
+        if (parsedValues.has('DD')) {
+            day = Math.max(1, Math.min(maxDays, parsedValues.get('DD')));
+        }
+        let result = '';
+        groupIndex = 0;
+        for (let i = 0; i < segments.length; i++) {
+            const seg = segments[i];
+            if (seg.type === 'digit') {
+                let group = userGroups[groupIndex] || '';
+                groupIndex++;
+                while (group && !/^\d+$/.test(group)) {
+                    group = userGroups[groupIndex] || '';
+                    groupIndex++;
+                }
+                if (!group) {
+                    break;
+                }
+                const len = seg.value.length;
+                let clampedVal = 0;
+                if (seg.value === 'YYYY') {
+                    clampedVal = year;
+                }
+                if (seg.value === 'MM') {
+                    clampedVal = month;
+                }
+                if (seg.value === 'DD') {
+                    clampedVal = day;
+                }
+                if (seg.value === 'HH') {
+                    clampedVal = hour;
+                }
+                if (seg.value === 'hh') {
+                    clampedVal = hour;
+                }
+                if (seg.value === 'mm') {
+                    clampedVal = minute;
+                }
+                if (seg.value === 'ss') {
+                    clampedVal = second;
+                }
+                result += String(clampedVal).padStart(len, '0');
+                const nextSeg = segments[i + 1];
+                if (nextSeg && nextSeg.type === 'literal') {
+                    result += nextSeg.value;
+                    i++;
+                }
+                continue;
+            }
+            if (seg.type === 'period') {
+                let group = userGroups[groupIndex] || '';
+                groupIndex++;
+                while (group && !/^[a-zA-Z]+$/.test(group)) {
+                    group = userGroups[groupIndex] || '';
+                    groupIndex++;
+                }
+                const isPM = group ? /PM/i.test(group) : /PM/i.test(trimmed);
+                if (seg.value === 'A') {
+                    result += isPM ? 'PM' : 'AM';
+                }
+                if (seg.value !== 'A') {
+                    result += isPM ? 'pm' : 'am';
+                }
+                continue;
+            }
+            result += seg.value;
+        }
+        // Khôi phục AM/PM ở đuôi chuỗi nếu bị mất sau khi clamp
+        const isPM = /PM/i.test(trimmed);
+        const isAM = /AM/i.test(trimmed);
+        if ((isPM || isAM) && !/am|pm/i.test(result)) {
+            const hasSpace = /\s+(AM|PM)/i.test(trimmed);
+            result += (hasSpace ? ' ' : '') + (isPM ? 'PM' : 'AM');
+        }
+        return result;
+    }
     _preserveInputSelection(input) {
         const start = input.selectionStart;
         const end = input.selectionEnd;
@@ -1968,6 +2235,7 @@ class ZCalendarComponent {
             return;
         }
         const input = event.target;
+        this._formatInputValue(input);
         const { value } = input;
         this._preserveInputSelection(input);
         this._hasTypedDraft.set(true);
@@ -1998,6 +2266,7 @@ class ZCalendarComponent {
             return;
         }
         const input = event.target;
+        this._formatInputValue(input);
         const { value } = input;
         this._preserveInputSelection(input);
         this._hasTypedDraft.set(true);
@@ -2035,7 +2304,9 @@ class ZCalendarComponent {
         const input = event.target;
         const value = input.value.trim();
         const format = this._getParseFormat();
-        const date = parseDate(value, format, this.zLocale());
+        const clamped = this._clampInputDateString(value, format);
+        input.value = clamped;
+        const date = parseDate(clamped, format, this.zLocale());
         if (!date) {
             this._cancelAndRestore();
             input.blur();
@@ -2074,7 +2345,9 @@ class ZCalendarComponent {
         const input = event.target;
         const value = input.value.trim();
         const format = this._getParseFormat();
-        const date = parseDate(value, format, this.zLocale());
+        const clamped = this._clampInputDateString(value, format);
+        input.value = clamped;
+        const date = parseDate(clamped, format, this.zLocale());
         if (!date) {
             this._cancelAndRestore();
             input.blur();
@@ -2101,11 +2374,15 @@ class ZCalendarComponent {
             startEl.focus();
         }
     }
-    onInputFocus(_event) {
+    onInputFocus(event) {
         this.isInputFocused.set(true);
         if (!this.isOpen()) {
             this._backupIfNeeded();
         }
+        const input = event.target;
+        if (input) {
+            this._lastInputLengths.set(input, input.value.length);
+        }
     }
     onInputBlur(event) {
         this.isInputFocused.set(false);
@@ -2186,8 +2463,10 @@ class ZCalendarComponent {
         if (this.isRangeMode()) {
             const parts = value.split(' - ');
             if (parts.length === 2) {
-                const start = parseDate(parts[0].trim(), format, this.zLocale());
-                const end = parseDate(parts[1].trim(), format, this.zLocale());
+                const clampedStart = this._clampInputDateString(parts[0].trim(), format);
+                const clampedEnd = this._clampInputDateString(parts[1].trim(), format);
+                const start = parseDate(clampedStart, format, this.zLocale());
+                const end = parseDate(clampedEnd, format, this.zLocale());
                 if (start && end) {
                     this._skipBlurHandler.set(true);
                     const swapped = start > end;
@@ -2207,7 +2486,9 @@ class ZCalendarComponent {
             input.blur();
             return;
         }
-        const date = parseDate(value, format, this.zLocale());
+        const clamped = this._clampInputDateString(value, format);
+        input.value = clamped;
+        const date = parseDate(clamped, format, this.zLocale());
         if (date) {
             this._skipBlurHandler.set(true);
             this._selectedDate.set(date);
@@ -2481,7 +2762,13 @@ class ZCalendarComponent {
     onOkClick() {
         if (this._hasTypedDraft() && !this.isRangeMode()) {
             const input = this.inputRef()?.nativeElement;
-            const date = parseDate(input?.value.trim() ?? '', this._getParseFormat(), this.zLocale());
+            const rawVal = input?.value.trim() ?? '';
+            const format = this._getParseFormat();
+            const clamped = this._clampInputDateString(rawVal, format);
+            if (input) {
+                input.value = clamped;
+            }
+            const date = parseDate(clamped, format, this.zLocale());
             if (!date) {
                 this._cancelAndRestore();
                 if (input) {