@everymatrix/general-registration-multistep 1.89.3 → 1.90.1

package/dist/cjs/checkbox-group-input_15.cjs.entry.js

@@ -6017,6 +6017,63 @@ const DateInput = class {
             this.errorMessage = this.setErrorMessage();
             this.valueHandler({ name: this.name, value: this.value });
         };
+        this.handleMaskedTyping = (e) => {
+            var _a;
+            const input = e.target;
+            if (!input)
+                return;
+            const prevPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : input.value.length;
+            const prevValue = input.value;
+            const [a, b, c] = this.getFormatStructure(this.dateFormat);
+            const { seps } = this.parseFormat(this.dateFormat);
+            const [sep1, sep2] = seps;
+            const maxDigits = a + b + c;
+            const digitsOnly = prevValue.replace(/\D/g, '').slice(0, maxDigits);
+            const block1 = digitsOnly.slice(0, a);
+            const block2 = digitsOnly.slice(a, a + b);
+            const block3 = digitsOnly.slice(a + b, a + b + c);
+            let formatted = block1;
+            if (digitsOnly.length > a) {
+                formatted += sep1 + block2;
+            }
+            if (digitsOnly.length > a + b) {
+                formatted += sep2 + block3;
+            }
+            input.value = formatted;
+            const oldSepLen = this.totalSeparatorLength(prevValue, [sep1, sep2]);
+            const newSepLen = this.totalSeparatorLength(formatted, [sep1, sep2]);
+            let newPos = prevPos + Math.max(0, newSepLen - oldSepLen);
+            newPos = Math.max(0, Math.min(newPos, formatted.length));
+            try {
+                input.setSelectionRange(newPos, newPos);
+            }
+            catch (_b) { }
+            if (digitsOnly.length < maxDigits) {
+                this.errorMessage = '';
+                this.resetIncompleteState();
+                return;
+            }
+            try {
+                const parsed = parse(formatted, this.dateFormat, new Date());
+                if (parsed && !isNaN(parsed.getTime())) {
+                    const iso = format(parsed, 'yyyy-MM-dd');
+                    this.value = iso;
+                    this.valueAsDate = parsed;
+                    this.isValid = true;
+                    this.errorMessage = '';
+                    if (this.datePicker) {
+                        this.datePicker.value = iso;
+                    }
+                    this.valueHandler({ name: this.name, value: this.value });
+                }
+                else {
+                    this.resetIncompleteState();
+                }
+            }
+            catch (_c) {
+                this.resetIncompleteState();
+            }
+        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -6092,6 +6149,7 @@ const DateInput = class {
         // end custom styling area
     }
     componentDidLoad() {
+        var _a;
         this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
         this.inputReference = this.element.shadowRoot.querySelector('input');
         if (this.datePicker) {
@@ -6110,6 +6168,12 @@ const DateInput = class {
                     this.touched = true;
                 }
             });
+            if (this.enableManualDateInput) {
+                const inputEl = (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.inputElement;
+                if (inputEl) {
+                    inputEl.addEventListener('input', this.handleMaskedTyping);
+                }
+            }
         }
         if (this.enableSouthAfricanMode) {
             window.addEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
@@ -6122,9 +6186,16 @@ const DateInput = class {
         this.isValid = this.setValidity();
     }
     disconnectedCallback() {
+        var _a;
         if (this.enableSouthAfricanMode) {
             window.removeEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
         }
+        if (this.enableManualDateInput) {
+            const inputEl = (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.inputElement;
+            if (inputEl) {
+                inputEl.removeEventListener('input', this.handleMaskedTyping);
+            }
+        }
     }
     handleCalendarIconClick() {
         if (this.datePicker.opened && this.emitOnClick) {
@@ -6177,13 +6248,64 @@ const DateInput = class {
         }
         return null;
     }
+    parseFormat(format) {
+        var _a;
+        const f = format !== null && format !== void 0 ? format : 'dd-MM-yyyy';
+        const tokenRegex = /([dMy]+)|([^dMy]+)/g;
+        const tokens = [];
+        const seps = [];
+        let match;
+        while ((match = tokenRegex.exec(f))) {
+            if (match[1]) {
+                tokens.push(match[1]);
+            }
+            else if (match[2]) {
+                seps.push(match[2]);
+            }
+        }
+        if (seps.length < 2) {
+            const fallback = (_a = seps[0]) !== null && _a !== void 0 ? _a : '-';
+            while (seps.length < 2)
+                seps.push(fallback);
+        }
+        return { tokens, seps: [seps[0], seps[1]] };
+    }
+    getFormatStructure(format) {
+        const { tokens } = this.parseFormat(format);
+        if (tokens.length < 3)
+            return [2, 2, 4];
+        const lens = tokens.map(t => t.length);
+        return [lens[0], lens[1], lens[2]];
+    }
+    totalSeparatorLength(s, seps) {
+        if (!s)
+            return 0;
+        let total = 0;
+        for (const sep of seps) {
+            if (!sep)
+                continue;
+            const re = new RegExp(this.escapeRegExp(sep), 'g');
+            const matches = s.match(re);
+            if (matches)
+                total += matches.length * sep.length;
+        }
+        return total;
+    }
+    escapeRegExp(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    resetIncompleteState() {
+        this.value = '';
+        this.valueAsDate = undefined;
+        this.isValid = false;
+    }
     render() {
         let invalidClass = '';
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'b8f91a203d028d6effe0cb976465756841453300', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e5d9bda31742bec5c4e24e390941688fd4eeb239', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '8055cfcb8ed54eea9f7b4f7c3719267aa258fc78', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: 'a2bd1e51e96308d02ee0462ff681a818d008399f', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: '6f7e5bead37a71932d678be3dc9ff36170871289', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            index.h("img", { key: 'c67702d9aa5ee40666c772bc9612007fdd69af80', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return index.h("div", { key: 'f8011520dee6f11203da18cc27a6f278283daace', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e1e21a234b5f20f05a5c2d6eb38095bb50748ad6', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '8dbd7ecb2e8fc686afc02a15a247f5f78484ec22', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: '40b5106d0b80799cd81b154889461fa5378264b8', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), index.h("small", { key: 'cd96dd3bb68896ea44d5071d783a7a2e2d75738f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            index.h("img", { key: '971aeba271d68264bb9ff23b86bed878699d81b1', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/esm/checkbox-group-input_15.entry.js

@@ -6013,6 +6013,63 @@ const DateInput = class {
             this.errorMessage = this.setErrorMessage();
             this.valueHandler({ name: this.name, value: this.value });
         };
+        this.handleMaskedTyping = (e) => {
+            var _a;
+            const input = e.target;
+            if (!input)
+                return;
+            const prevPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : input.value.length;
+            const prevValue = input.value;
+            const [a, b, c] = this.getFormatStructure(this.dateFormat);
+            const { seps } = this.parseFormat(this.dateFormat);
+            const [sep1, sep2] = seps;
+            const maxDigits = a + b + c;
+            const digitsOnly = prevValue.replace(/\D/g, '').slice(0, maxDigits);
+            const block1 = digitsOnly.slice(0, a);
+            const block2 = digitsOnly.slice(a, a + b);
+            const block3 = digitsOnly.slice(a + b, a + b + c);
+            let formatted = block1;
+            if (digitsOnly.length > a) {
+                formatted += sep1 + block2;
+            }
+            if (digitsOnly.length > a + b) {
+                formatted += sep2 + block3;
+            }
+            input.value = formatted;
+            const oldSepLen = this.totalSeparatorLength(prevValue, [sep1, sep2]);
+            const newSepLen = this.totalSeparatorLength(formatted, [sep1, sep2]);
+            let newPos = prevPos + Math.max(0, newSepLen - oldSepLen);
+            newPos = Math.max(0, Math.min(newPos, formatted.length));
+            try {
+                input.setSelectionRange(newPos, newPos);
+            }
+            catch (_b) { }
+            if (digitsOnly.length < maxDigits) {
+                this.errorMessage = '';
+                this.resetIncompleteState();
+                return;
+            }
+            try {
+                const parsed = parse(formatted, this.dateFormat, new Date());
+                if (parsed && !isNaN(parsed.getTime())) {
+                    const iso = format(parsed, 'yyyy-MM-dd');
+                    this.value = iso;
+                    this.valueAsDate = parsed;
+                    this.isValid = true;
+                    this.errorMessage = '';
+                    if (this.datePicker) {
+                        this.datePicker.value = iso;
+                    }
+                    this.valueHandler({ name: this.name, value: this.value });
+                }
+                else {
+                    this.resetIncompleteState();
+                }
+            }
+            catch (_c) {
+                this.resetIncompleteState();
+            }
+        };
         this.name = undefined;
         this.displayName = undefined;
         this.placeholder = undefined;
@@ -6088,6 +6145,7 @@ const DateInput = class {
         // end custom styling area
     }
     componentDidLoad() {
+        var _a;
         this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
         this.inputReference = this.element.shadowRoot.querySelector('input');
         if (this.datePicker) {
@@ -6106,6 +6164,12 @@ const DateInput = class {
                     this.touched = true;
                 }
             });
+            if (this.enableManualDateInput) {
+                const inputEl = (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.inputElement;
+                if (inputEl) {
+                    inputEl.addEventListener('input', this.handleMaskedTyping);
+                }
+            }
         }
         if (this.enableSouthAfricanMode) {
             window.addEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
@@ -6118,9 +6182,16 @@ const DateInput = class {
         this.isValid = this.setValidity();
     }
     disconnectedCallback() {
+        var _a;
         if (this.enableSouthAfricanMode) {
             window.removeEventListener('documentIdUpdated', this.handleDocumentIdUpdate);
         }
+        if (this.enableManualDateInput) {
+            const inputEl = (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.inputElement;
+            if (inputEl) {
+                inputEl.removeEventListener('input', this.handleMaskedTyping);
+            }
+        }
     }
     handleCalendarIconClick() {
         if (this.datePicker.opened && this.emitOnClick) {
@@ -6173,13 +6244,64 @@ const DateInput = class {
         }
         return null;
     }
+    parseFormat(format) {
+        var _a;
+        const f = format !== null && format !== void 0 ? format : 'dd-MM-yyyy';
+        const tokenRegex = /([dMy]+)|([^dMy]+)/g;
+        const tokens = [];
+        const seps = [];
+        let match;
+        while ((match = tokenRegex.exec(f))) {
+            if (match[1]) {
+                tokens.push(match[1]);
+            }
+            else if (match[2]) {
+                seps.push(match[2]);
+            }
+        }
+        if (seps.length < 2) {
+            const fallback = (_a = seps[0]) !== null && _a !== void 0 ? _a : '-';
+            while (seps.length < 2)
+                seps.push(fallback);
+        }
+        return { tokens, seps: [seps[0], seps[1]] };
+    }
+    getFormatStructure(format) {
+        const { tokens } = this.parseFormat(format);
+        if (tokens.length < 3)
+            return [2, 2, 4];
+        const lens = tokens.map(t => t.length);
+        return [lens[0], lens[1], lens[2]];
+    }
+    totalSeparatorLength(s, seps) {
+        if (!s)
+            return 0;
+        let total = 0;
+        for (const sep of seps) {
+            if (!sep)
+                continue;
+            const re = new RegExp(this.escapeRegExp(sep), 'g');
+            const matches = s.match(re);
+            if (matches)
+                total += matches.length * sep.length;
+        }
+        return total;
+    }
+    escapeRegExp(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    resetIncompleteState() {
+        this.value = '';
+        this.valueAsDate = undefined;
+        this.isValid = false;
+    }
     render() {
         let invalidClass = '';
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'b8f91a203d028d6effe0cb976465756841453300', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'e5d9bda31742bec5c4e24e390941688fd4eeb239', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, h("span", { key: '8055cfcb8ed54eea9f7b4f7c3719267aa258fc78', class: this.validation.mandatory ? 'date__label--required' : '' })), h("vaadin-date-picker", { key: 'a2bd1e51e96308d02ee0462ff681a818d008399f', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), h("small", { key: '6f7e5bead37a71932d678be3dc9ff36170871289', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
-            h("img", { key: 'c67702d9aa5ee40666c772bc9612007fdd69af80', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
+        return h("div", { key: 'f8011520dee6f11203da18cc27a6f278283daace', class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'e1e21a234b5f20f05a5c2d6eb38095bb50748ad6', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, h("span", { key: '8dbd7ecb2e8fc686afc02a15a247f5f78484ec22', class: this.validation.mandatory ? 'date__label--required' : '' })), h("vaadin-date-picker", { key: '40b5106d0b80799cd81b154889461fa5378264b8', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass} ${this.enableManualDateInput && 'date__manual-mode'}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onValidated: () => this.handleValidated(), autoOpenDisabled: this.enableManualDateInput }), h("small", { key: 'cd96dd3bb68896ea44d5071d783a7a2e2d75738f', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+            h("img", { key: '971aeba271d68264bb9ff23b86bed878699d81b1', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
     }
     get element() { return getElement(this); }
     static get watchers() { return {