@everymatrix/general-registration-multistep 1.87.24 → 1.87.25

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

@@ -16410,17 +16410,15 @@ const TelInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
+                this.isValid = this.isValidValue();
                 this.errorMessage = this.setErrorMessage();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = () => {
-            if (!this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
-                this.touched = true;
-            }
+            this.touched = true;
+            this.isValid = this.isValidValue();
+            this.errorMessage = this.setErrorMessage();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -16516,7 +16514,7 @@ const TelInput = class {
         // end custom styling area
     }
     componentDidLoad() {
-        this.isValid = this.setValidity();
+        this.isValid = this.isValidValue();
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
@@ -16540,8 +16538,29 @@ const TelInput = class {
         this.value = { prefix: this.prefixValue, phone: this.phoneValue };
         this.emitValueHandler(true);
     }
-    setValidity() {
-        return this.inputReference.validity.valid;
+    isValidValue() {
+        if (!this.inputReference) {
+            return false;
+        }
+        if (this.validation.mandatory && (!this.phoneValue || this.phoneValue.trim() === '')) {
+            return false;
+        }
+        if (!this.phoneValue || this.phoneValue.trim() === '') {
+            return !this.validation.mandatory;
+        }
+        if (this.validation.minLength && this.phoneValue.length < this.validation.minLength) {
+            return false;
+        }
+        if (this.validation.maxLength && this.phoneValue.length > this.validation.maxLength) {
+            return false;
+        }
+        if (this.validationPattern) {
+            const patternRegex = new RegExp(this.validationPattern);
+            if (!patternRegex.test(this.phoneValue)) {
+                return false;
+            }
+        }
+        return true;
     }
     setPattern() {
         var _a, _b;
@@ -16556,7 +16575,10 @@ const TelInput = class {
             const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
             return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
         }
-        if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
+        if (this.inputReference.validity.tooShort
+            || this.inputReference.validity.tooLong
+            || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
+            || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
             return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
         }
         if (this.inputReference.validity.valueMissing) {
@@ -16575,8 +16597,8 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '7296f134bff80795ab52a1a27eb059ab2f3c0c87', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c9b1fdf501299398bcda1e59e65bb0a7d6b7de43', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'e7e6858fc61e2b6ea8974f8b4dc8d67a5fcb07b4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '6c9cc9a3c74e8cd06224e2663d4c363e5d8fb3c0', class: 'tel__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '17e85d6050d4796bf5b057c901631a87b25d3b40', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'cb2e8b93e5663c92a2fd114d1fe1c9d9e09ebc83', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: 'fb1c3ab06d19e9ed7bbdf7effe8f25a1f7d9fe15', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'd2701f0bdca4122c18fd43d311ea8c5e2536b1f5', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'a685ceea5c99f29d992fd5291f67934a22d6997c', class: 'tel__error-message' }, this.errorMessage));
+        return index.h("div", { key: 'f534de21d5597a3e90912eb87fff893511d09920', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '431fb8cbaea0d2244847823ea4d04d8c73a5341c', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '2eb210b2f0c2e0e632997f59fe7aa667578f72fd', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '2d912b828f7d9475a1bbb5bac13495779f31198e', class: 'tel__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'ce4433263d27dc9d3fb2caf45069d7a92e9ae3a7', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '480cd17eafb4f2ff1e396531429177cb3130eb95', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '5f2292c8509e5f68786d0f462c689102b1c75dc3', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '77232e119eed4960f5e1d809507b8585dd112256', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '0d925cee41881c8c822073790e26ca7dc4a81049', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],

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

@@ -16406,17 +16406,15 @@ const TelInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
+                this.isValid = this.isValidValue();
                 this.errorMessage = this.setErrorMessage();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = () => {
-            if (!this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
-                this.touched = true;
-            }
+            this.touched = true;
+            this.isValid = this.isValidValue();
+            this.errorMessage = this.setErrorMessage();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -16512,7 +16510,7 @@ const TelInput = class {
         // end custom styling area
     }
     componentDidLoad() {
-        this.isValid = this.setValidity();
+        this.isValid = this.isValidValue();
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
@@ -16536,8 +16534,29 @@ const TelInput = class {
         this.value = { prefix: this.prefixValue, phone: this.phoneValue };
         this.emitValueHandler(true);
     }
-    setValidity() {
-        return this.inputReference.validity.valid;
+    isValidValue() {
+        if (!this.inputReference) {
+            return false;
+        }
+        if (this.validation.mandatory && (!this.phoneValue || this.phoneValue.trim() === '')) {
+            return false;
+        }
+        if (!this.phoneValue || this.phoneValue.trim() === '') {
+            return !this.validation.mandatory;
+        }
+        if (this.validation.minLength && this.phoneValue.length < this.validation.minLength) {
+            return false;
+        }
+        if (this.validation.maxLength && this.phoneValue.length > this.validation.maxLength) {
+            return false;
+        }
+        if (this.validationPattern) {
+            const patternRegex = new RegExp(this.validationPattern);
+            if (!patternRegex.test(this.phoneValue)) {
+                return false;
+            }
+        }
+        return true;
     }
     setPattern() {
         var _a, _b;
@@ -16552,7 +16571,10 @@ const TelInput = class {
             const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
             return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
         }
-        if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
+        if (this.inputReference.validity.tooShort
+            || this.inputReference.validity.tooLong
+            || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
+            || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
             return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
         }
         if (this.inputReference.validity.valueMissing) {
@@ -16571,8 +16593,8 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h$1("div", { key: '7296f134bff80795ab52a1a27eb059ab2f3c0c87', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: 'c9b1fdf501299398bcda1e59e65bb0a7d6b7de43', class: 'tel__wrapper--flex-label' }, h$1("label", { key: 'e7e6858fc61e2b6ea8974f8b4dc8d67a5fcb07b4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '6c9cc9a3c74e8cd06224e2663d4c363e5d8fb3c0', class: 'tel__wrapper--relative' }, this.tooltip &&
-            h$1("img", { key: '17e85d6050d4796bf5b057c901631a87b25d3b40', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("div", { key: 'cb2e8b93e5663c92a2fd114d1fe1c9d9e09ebc83', class: `tel__wrapper--flex ${invalidClass}` }, h$1("vaadin-combo-box", { key: 'fb1c3ab06d19e9ed7bbdf7effe8f25a1f7d9fe15', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h$1("input", { key: 'd2701f0bdca4122c18fd43d311ea8c5e2536b1f5', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h$1("small", { key: 'a685ceea5c99f29d992fd5291f67934a22d6997c', class: 'tel__error-message' }, this.errorMessage));
+        return h$1("div", { key: 'f534de21d5597a3e90912eb87fff893511d09920', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '431fb8cbaea0d2244847823ea4d04d8c73a5341c', class: 'tel__wrapper--flex-label' }, h$1("label", { key: '2eb210b2f0c2e0e632997f59fe7aa667578f72fd', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '2d912b828f7d9475a1bbb5bac13495779f31198e', class: 'tel__wrapper--relative' }, this.tooltip &&
+            h$1("img", { key: 'ce4433263d27dc9d3fb2caf45069d7a92e9ae3a7', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("div", { key: '480cd17eafb4f2ff1e396531429177cb3130eb95', class: `tel__wrapper--flex ${invalidClass}` }, h$1("vaadin-combo-box", { key: '5f2292c8509e5f68786d0f462c689102b1c75dc3', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h$1("input", { key: '77232e119eed4960f5e1d809507b8585dd112256', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h$1("small", { key: '0d925cee41881c8c822073790e26ca7dc4a81049', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],