@everymatrix/general-input-hsl 0.25.42 → 0.25.44

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

@@ -5790,6 +5790,13 @@ const DateInput = class {
 };
 DateInput.style = DateInputStyle0;
 
+function getFailedRegexRule(value, custom) {
+    return (custom || []).find(rule => rule.rule === 'regex' && !new RegExp(rule.pattern).test(value));
+}
+function getRuleErrorMessage(rule, language) {
+    return translate(rule.errorKey, language) || rule.errorMessage;
+}
+
 const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emw--color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.email__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__input::placeholder{color:var(--emw--color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
 const EmailInputStyle0 = emailInputCss;
 
@@ -5798,7 +5805,6 @@ const EmailInput = class {
         registerInstance(this, hostRef);
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
-        this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
             this.value = event.target.value;
@@ -5807,14 +5813,12 @@ const EmailInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = () => {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
             this.touched = true;
         };
         this.setClientStyling = () => {
@@ -5872,9 +5876,6 @@ const EmailInput = class {
             }
         }
     }
-    connectedCallback() {
-        this.validationPattern = this.setPattern();
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -5885,39 +5886,39 @@ const EmailInput = class {
         // end custom styling area
     }
     componentDidLoad() {
-        this.isValid = this.setValidity();
+        this.isValid = this.validate().isValid;
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value });
         }
     }
-    setValidity() {
-        return this.inputReference.validity.valid;
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
     }
-    setPattern() {
+    validate() {
         var _a, _b;
-        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+        if (!this.inputReference) {
+            return { isValid: false, errorMessage: '' };
         }
-    }
-    setErrorMessage() {
-        var _a, _b, _c, _d;
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return { isValid: false, errorMessage: translate('requiredError', this.language) };
         }
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+            return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
         }
-        if (this.inputReference.validity.patternMismatch) {
-            const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+        const inputValue = this.inputReference.value;
+        const failedRegexRule = inputValue ? getFailedRegexRule(inputValue, this.validation.custom) : undefined;
+        if (failedRegexRule) {
+            return { isValid: false, errorMessage: getRuleErrorMessage(failedRegexRule, this.language) };
         }
         if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-            const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
-            const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+            const errorCode = (_a = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _a === void 0 ? void 0 : _a.errorKey;
+            const errorMessage = (_b = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+            return { isValid: false, errorMessage: translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage };
         }
+        return { isValid: this.inputReference.validity.valid, errorMessage: '' };
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -5930,8 +5931,8 @@ const EmailInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '45255f597fcc76fa5e99601d7c2dd59afca32dbe', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '7e41609760d4cc0b5acb554749fce42e6bc88ef3', class: 'email__wrapper--flex' }, h("label", { key: '250a1656d714e8cbc943d153aa216a6322322534', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '80db5747730aaac2c1d0efa3129dfa5463fe779c', class: 'email__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'f10990c70bb3de310d137fa120575ad3582adbd3', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '9cf1a9fc4fdc3cb2604c6ad21573091cc1b173aa', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '1610834f1705f70bd1f2d4b0a6c37af3307cf77f', class: 'email__error-message' }, this.errorMessage));
+        return h("div", { key: 'ff5657194151b872247fd966bc8dc7ab53f715de', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '8dc84da8787a50232fda2c113cf838598525a550', class: 'email__wrapper--flex' }, h("label", { key: 'b42e56122de79d841d99e183c6ed818a74c22020', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7f09b2b675b28eebcd1e913b0cbdd43feb83b567', class: 'email__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '64c6c3565b60480d279a434f87efa36625da934b', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '754ba4160c2633444064d334f451d0700815e8fc', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '2d72cdde55c1a6b041bb37a1b5a2f3e1c17b558a', class: 'email__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -5949,7 +5950,6 @@ const NumberInput = class {
         registerInstance(this, hostRef);
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
-        this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
             this.value = event.target.value;
@@ -5958,14 +5958,12 @@ const NumberInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = () => {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
             this.touched = true;
         };
         this.setClientStyling = () => {
@@ -6015,9 +6013,6 @@ const NumberInput = class {
             this.showTooltip = false;
         }
     }
-    connectedCallback() {
-        this.validationPattern = this.setPattern();
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -6028,34 +6023,33 @@ const NumberInput = class {
         // end custom styling area
     }
     componentDidLoad() {
-        this.isValid = this.setValidity();
+        this.isValid = this.validate().isValid;
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value });
         }
     }
-    setValidity() {
-        return this.inputReference.validity.valid;
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
     }
-    setPattern() {
-        var _a, _b;
-        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+    validate() {
+        if (!this.inputReference) {
+            return { isValid: false, errorMessage: '' };
         }
-    }
-    setErrorMessage() {
-        var _a, _b;
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return { isValid: false, errorMessage: translate('requiredError', this.language) };
         }
         if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
-            return translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
+            return { isValid: false, errorMessage: translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } }) };
         }
-        if (this.inputReference.validity.patternMismatch) {
-            const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+        const value = this.inputReference.value;
+        const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
+        if (failedRule) {
+            return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
         }
+        return { isValid: this.inputReference.validity.valid, errorMessage: '' };
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -6068,8 +6062,8 @@ const NumberInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'f0e6e6edb5d8e3f509474ef5536cb7ef717a5ee9', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c991d1e6ed0f9910104b46105daad5332200ee21', class: 'number__wrapper--flex' }, h("label", { key: 'd6912229dac4712f4f8e77a90f7ba0ebb7dd5548', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '5733806c60cad364e61fc66e25f89a44159e8ad9', class: 'number__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '7ba9ca8048d04c41f800fccf03297e2db9a9115d', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '4c4726f1ac0f3b3495ba6309f5fe4110b1ea5353', ref: (el) => this.inputReference = el, type: "number", inputMode: "numeric", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '5217c1b0b4f4d9f741b5cdf6b7c3f01ef61fe180', class: 'number__error-message' }, this.errorMessage));
+        return h("div", { key: 'edc8799baa52418673dcfccb82b1ff9d86159787', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9d6313a06ff4fcd1174879745d48d37ac63c64a5', class: 'number__wrapper--flex' }, h("label", { key: '404af2d79da04a3156ebce45aae6d06ea21b5dc1', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '349120e9587af42941de2fd2405dc0b9b763372f', class: 'number__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '652d145a6a794f0e8370641d3f7fb28099603d62', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'e7908fe81f8afda735750cfe2bb7ac50d452c210', ref: (el) => this.inputReference = el, type: "number", inputMode: "numeric", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '87e3e5afb6c790f9c57d79bdf0e12a897b10d799', class: 'number__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -6090,7 +6084,6 @@ const PasswordInput = class {
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
         this.touched = false;
         this.originalValid = false;
-        this.validationPattern = '';
         this.duplicateInputValue = null;
         this.handleInput = (event) => {
             this.value = event.target.value;
@@ -6101,8 +6094,7 @@ const PasswordInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.emitValueHandler(true);
             }, 500);
         };
@@ -6114,8 +6106,7 @@ const PasswordInput = class {
             this.value = event.target.value;
             this.showPopup = false;
             this.touched = true;
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
         };
         this.handleFocus = () => {
             this.showPopup = true;
@@ -6160,7 +6151,7 @@ const PasswordInput = class {
         if (!this.isDuplicateInput) {
             // recalculate complexity immediately in order to send the correct validity to the duplicate
             this.calculateComplexity(this.value);
-            this.sendOriginalValidityState.emit({ name: this.name, valid: this.setValidity() });
+            this.sendOriginalValidityState.emit({ name: this.name, valid: this.validate().isValid });
         }
     }
     emitValueHandler(newValue) {
@@ -6178,13 +6169,13 @@ const PasswordInput = class {
         if (this.isDuplicateInput) {
             if (event.detail.valid) {
                 this.originalValid = true;
-                this.isValid = this.setValidity();
+                this.isValid = this.validate().isValid;
             }
             else {
                 this.originalValid = false;
                 this.isValid = false;
                 // only show error if the user has touched the input, in order to not show errors on empty inputs
-                this.value !== '' && (this.errorMessage = this.setErrorMessage());
+                this.value !== '' && (this.errorMessage = this.validate().errorMessage);
             }
         }
     }
@@ -6192,15 +6183,13 @@ const PasswordInput = class {
         if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
             this.duplicateInputValue = event.detail.value;
             if (this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
             }
         }
         if (this.name === event.detail.name + 'Duplicate'
             && this.name.replace('Duplicate', '') === event.detail.name
             && this.touched === true) {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
         }
     }
     handleClickOutside(event) {
@@ -6234,7 +6223,7 @@ const PasswordInput = class {
                 this.touched = true;
             }
         }
-        this.isValid = this.setValidity();
+        this.isValid = this.validate().isValid;
     }
     disconnectedCallback() {
         this.passwordButton.removeEventListener('click', this.handleRevealField);
@@ -6248,48 +6237,36 @@ const PasswordInput = class {
             return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
         });
     }
-    setValidity() {
-        var _a, _b;
-        if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-            return false;
-        }
-        else if (!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed))) {
-            return false;
-        }
-        else {
-            return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
-        }
-    }
-    setPattern() {
+    validate() {
         var _a, _b;
-        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+        if (!this.inputReference) {
+            return { isValid: false, errorMessage: '' };
         }
-    }
-    setErrorMessage() {
-        var _a, _b, _c, _d, _e;
-        if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+        const validity = this.inputReference.validity;
+        const duplicateMismatch = this.isDuplicateInput && this.duplicateInputValue !== this.value;
+        const complexityPassed = !!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed));
+        if (validity.tooShort || validity.tooLong) {
+            return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
         }
-        if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+        if (validity.valueMissing) {
+            return { isValid: false, errorMessage: translate('requiredError', this.language) };
         }
         if (this.isDuplicateInput && !this.originalValid) {
-            return translate('invalidOriginalPasswordError', this.language);
-        }
-        if (this.inputReference.validity.patternMismatch) {
-            const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+            return { isValid: false, errorMessage: translate('invalidOriginalPasswordError', this.language) };
         }
-        if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-            const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
-            const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+        if (duplicateMismatch) {
+            const duplicateRule = (_b = this.validation.custom) === null || _b === void 0 ? void 0 : _b.find(customRule => customRule.rule === 'duplicate-input');
+            return { isValid: false, errorMessage: duplicateRule ? getRuleErrorMessage(duplicateRule, this.language) : '' };
         }
-        if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed)) && !this.showPopup) {
-            return translate('invalidPassword', this.language);
+        if (!complexityPassed) {
+            return { isValid: false, errorMessage: this.showPopup ? '' : translate('invalidPassword', this.language) };
         }
+        return { isValid: validity.valid, errorMessage: '' };
+    }
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -6311,8 +6288,8 @@ const PasswordInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'e6a288d18a095de747c7eec28bcf117e5069cbc1', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'e2885669879d0b61473be48014975859d87b2478', class: 'password__wrapper--flex' }, h("label", { key: 'c12f0a0bfe91a9da9688ab0acd39f6a44eec5d0a', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'f501cb74b838d2c4a1a1fd38086203e4b1c98dfe', class: 'password__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '68d71061fb6be2245298e521b511e57b4cb12cbb', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: 'c8e3ce65dc46599cffe9763621b271fc18243829', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: 'ca4aeae4893276dc96bd7187aef5ac2ed86d35c8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
+        return h("div", { key: '9fd27b840b317bbb224f062c855c4b4a8b94a3a4', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3d16837c2e10a490fd07ef1c294db1f5732da4ad', class: 'password__wrapper--flex' }, h("label", { key: '09d61fc66912e7a79b83842e4d6d89b851a92afa', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '23f4d60bc9f777d00fd16d2dc78cc7c105307e32', class: 'password__wrapper--relative' }, this.tooltip &&
+            h("img", { key: 'db104e01e0f5d5d322b3394f8740cedaaa8b2199', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '072309fd70e0af72bde2beb579e6d93abea8928a', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h("small", { key: '41336c3bd58eba953266b31980ce0677b27405f0', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -6633,7 +6610,6 @@ const TelInput = class {
         registerInstance(this, hostRef);
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
-        this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
             const inputElement = event.target;
@@ -6647,15 +6623,13 @@ const TelInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.emitValueHandler(true);
             }, 500);
         };
         this.handleBlur = () => {
             if (!this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.touched = true;
             }
         };
@@ -6710,7 +6684,6 @@ const TelInput = class {
         }
     }
     connectedCallback() {
-        this.validationPattern = this.setPattern();
         if (this.defaultValue) {
             this.prefixValue = this.defaultValue.prefix ? this.defaultValue.prefix : this.defaultValue;
             this.phoneValue = this.defaultValue.phone || null;
@@ -6740,7 +6713,7 @@ const TelInput = class {
         // end custom styling area
     }
     componentDidLoad() {
-        this.isValid = this.setValidity();
+        this.isValid = this.validate().isValid;
         if (this.defaultValue) {
             this.value = this.defaultValue;
             this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
@@ -6764,28 +6737,27 @@ const TelInput = class {
         this.value = { prefix: this.prefixValue, phone: this.phoneValue };
         this.emitValueHandler(true);
     }
-    setValidity() {
-        return this.inputReference.validity.valid;
-    }
-    setPattern() {
-        var _a, _b;
-        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+    validate() {
+        if (!this.inputReference) {
+            return { isValid: false, errorMessage: '' };
         }
-    }
-    setErrorMessage() {
-        var _a, _b;
-        if (this.inputReference.validity.patternMismatch) {
-            const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+        const value = this.inputReference.value;
+        const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
+        if (failedRule) {
+            return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
         }
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+            return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
         }
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return { isValid: false, errorMessage: translate('requiredError', this.language) };
         }
+        return { isValid: this.inputReference.validity.valid, errorMessage: '' };
+    }
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -6798,8 +6770,8 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '8a75a1a66dae4a9f453487be42c8563fc94c9338', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '01589400f59390352949240162a96874be011f03', class: 'tel__wrapper--flex-label' }, h("label", { key: '73beb8ce7ea80ea4fca24db633e021dbab04f9ba', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '56eaf52390a9dd93342324a1bf87a1b7a9f04b97', class: 'tel__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '198fc851fb3ea4763607cfe2b0e08414e07adfe5', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '4cbf87d5e3be55ce0d23ec1ab223e168e4991a9f', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '3898ad1468b4f03d4ebaf24d0898e70988663f6d', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '24794f3651771ffbb011ef2048b28b4bc7cba0c7', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, 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("small", { key: 'a33de6b2bec2b9dd79fa9960a7bbacc9845d8c51', class: 'tel__error-message' }, this.errorMessage));
+        return h("div", { key: '78ddea111a011a7c75df7a6f7101aafccbaff4a1', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9dcd9723ed26de04630a8a174e902a629bc9347c', class: 'tel__wrapper--flex-label' }, h("label", { key: '597e8a28990f12e1183fdeb315e176af970d4104', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '86c147c124468d06bffdf8359c7f404cbe897c15', class: 'tel__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '0d2b528570401361087bf0438493a96a3450e40c', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd82808bbc28c720ae4cff45fd1d0df88ca320029', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '73805b42a6b40d901e6367e45e4d6d1ff2288082', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '483f7fd3f8e71d3ab9161b66d6584bd141e56144', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '296651863f2d6fcf31eb21f2d83b7df505d59833', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -6818,7 +6790,6 @@ const TextInput = class {
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
         this.value = '';
-        this.validationPattern = [];
         this.duplicateInputValue = null;
         this.handleInput = (event) => {
             const inputElement = event.target;
@@ -6832,8 +6803,7 @@ const TextInput = class {
                 clearTimeout(this.debounceTime);
             }
             this.debounceTime = setTimeout(() => {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
                 this.validityStateHandler({ valid: this.isValid, name: this.name });
                 this.emitValueHandler(true);
             }, 500);
@@ -6841,8 +6811,7 @@ const TextInput = class {
         this.handleBlur = (event) => {
             this.value = event.target.value;
             this.touched = true;
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
             this.validityStateHandler({ valid: this.isValid, name: this.name });
         };
         this.setClientStyling = () => {
@@ -6873,10 +6842,11 @@ const TextInput = class {
         if (newValue) {
             this.value = newValue;
             requestAnimationFrame(() => {
-                this.isValid = this.setValidity();
-                if (!this.isValid && !this.touched) {
+                const { isValid, errorMessage } = this.validate();
+                this.isValid = isValid;
+                if (!isValid && !this.touched) {
                     this.touched = true;
-                    this.errorMessage = this.setErrorMessage();
+                    this.errorMessage = errorMessage;
                 }
             });
         }
@@ -6912,15 +6882,13 @@ const TextInput = class {
         if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
             this.duplicateInputValue = event.detail.value;
             if (this.touched) {
-                this.isValid = this.setValidity();
-                this.errorMessage = this.setErrorMessage();
+                this.updateValidity();
             }
         }
         if (this.name === event.detail.name + 'Duplicate'
             && this.name.replace('Duplicate', '') === event.detail.name
             && this.touched === true) {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
         }
     }
     handleValidationChange(event) {
@@ -6928,15 +6896,10 @@ const TextInput = class {
             return;
         }
         this.validation = event.detail.validation;
-        this.validationPattern = this.setPattern();
         if (this.touched) {
-            this.isValid = this.setValidity();
-            this.errorMessage = this.setErrorMessage();
+            this.updateValidity();
         }
     }
-    connectedCallback() {
-        this.validationPattern = this.setPattern();
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -6953,7 +6916,7 @@ const TextInput = class {
             this.validation.minLength &&
             this.inputReference.value.length < this.validation.minLength) {
             this.touched = true;
-            this.errorMessage = this.setErrorMessage();
+            this.errorMessage = this.validate().errorMessage;
         }
     }
     componentDidLoad() {
@@ -6964,54 +6927,40 @@ const TextInput = class {
                 this.touched = true;
             }
         }
-        this.isValid = this.setValidity();
+        this.isValid = this.validate().isValid;
     }
-    setValidity() {
-        if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-            return false;
-        }
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
+    }
+    validate() {
+        var _a;
         if (!this.inputReference) {
-            return false;
+            return { isValid: false, errorMessage: '' };
         }
         const inputValue = this.inputReference.value;
-        const inputIsValid = this.inputReference.validity.valid;
-        const inputMatchValidation = !inputValue
-            || (this.validationPattern.length > 0 ? this.validationPattern.some((pattern) => inputValue.match(pattern) !== null) : true);
-        // Fallback: if HTML5 says valid but minlength constraint not met, it's invalid
-        const isTooShort = this.validation.minLength && inputValue.length > 0 && inputValue.length < this.validation.minLength;
-        return !isTooShort && inputIsValid && inputMatchValidation;
-    }
-    setPattern() {
-        const custom = this.validation.custom;
-        if (!(custom === null || custom === void 0 ? void 0 : custom.length))
-            return [];
-        return custom
-            .filter(v => v.rule === 'regex')
-            .map(v => v.pattern);
-    }
-    setErrorMessage() {
-        var _a, _b;
-        const inputValue = this.inputReference.value;
         if (this.inputReference.validity.valueMissing) {
-            return translate('requiredError', this.language);
+            return { isValid: false, errorMessage: translate('requiredError', this.language) };
         }
         // Check length manually (fallback for HTML5 validation API issues)
         const isTooShort = this.validation.minLength && inputValue.length > 0 && inputValue.length < this.validation.minLength;
         const isTooLong = this.validation.maxLength && inputValue.length > this.validation.maxLength;
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong || isTooShort || isTooLong) {
-            return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
+            return {
+                isValid: false,
+                errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } })
+            };
         }
-        const isCustomError = !(inputValue === '' && !this.validation.mandatory)
-            && (this.validationPattern.length > 0 ? this.validationPattern.some((pattern) => inputValue.match(pattern) == null) : false);
-        if (isCustomError) {
-            const { errorKey: errorCode, errorMessage } = this.validation.custom.find(customValidation => customValidation.rule === 'regex');
-            return translate(`${errorCode}`, this.language) || errorMessage;
+        const failedRegexRule = inputValue ? getFailedRegexRule(inputValue, this.validation.custom) : undefined;
+        if (failedRegexRule) {
+            return { isValid: false, errorMessage: getRuleErrorMessage(failedRegexRule, this.language) };
         }
         if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-            const errorCode = (_a = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            const errorMessage = (_b = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _b === void 0 ? void 0 : _b.errorMessage;
-            return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
+            const duplicateRule = (_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.find(customRule => customRule.rule === 'duplicate-input');
+            return { isValid: false, errorMessage: duplicateRule ? getRuleErrorMessage(duplicateRule, this.language) : '' };
         }
+        return { isValid: this.inputReference.validity.valid, errorMessage: '' };
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -7024,8 +6973,8 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '045e3183bdb1c7279abbd045043d789387956de5', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '3534d1261f9ccb9c0942f01d0758d9fd65743e40', class: 'text__wrapper--flex' }, h("label", { key: '171155d911e2c1048b003be8541671f0cdeb1ce5', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '8a0b0abe15eaf77b5efc5fa6374a8faeea24cf94', class: 'text__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'aa0b0b33cdb370289db8444c3dba915ef8eb77be', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'cc47bb443384396eefd7bf61f767f8646f7e2639', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'ce7b97e0a7db8eb87c608690bad3cf99a565ba9f', class: 'text__error-message' }, this.errorMessage));
+        return h("div", { key: '206f2e3c3cf18b4405c07be422bb6173ac3a2ac2', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'b6aa572d3f984a386a850b3f968a674eb94f7816', class: 'text__wrapper--flex' }, h("label", { key: '7fba5554aac3af6444225cb6da166276470dba50', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '9677b43f2f5e185e4d7fcfe007dd73a16d50876b', class: 'text__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '69360ef5dd851cf64110f82189c2a27f99c843f8', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '46b8d857acfb2d4fdd874984f555fc4457b7d53f', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '5db72a6b2c969e3af37eaf03ce3a77524a5f25d2', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"],
@@ -7154,7 +7103,6 @@ const TwofaInput = class {
         this.sendValidityState = createEvent(this, "sendValidityState", 7);
         this.sendInputValue = createEvent(this, "sendInputValue", 7);
         this.resendCode = createEvent(this, "resendCode", 7);
-        this.validationPattern = '';
         this.stylingContainer = null;
         this.tooltipReference = null;
         this.tooltipIconReference = null;
@@ -7213,8 +7161,7 @@ const TwofaInput = class {
             if (nextInput) {
                 nextInput.focus();
             }
-            this.setValidity();
-            this.setErrorMessage();
+            this.updateValidity();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -7267,7 +7214,6 @@ const TwofaInput = class {
         }
     }
     connectedCallback() {
-        this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
     }
     componentDidRender() {
@@ -7279,7 +7225,7 @@ const TwofaInput = class {
         }
     }
     componentDidLoad() {
-        this.setValidity();
+        this.isValid = this.validate().isValid;
     }
     handleKeyDown(e, idx) {
         if (e.key === 'Backspace') {
@@ -7292,8 +7238,7 @@ const TwofaInput = class {
                 prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
             }
         }
-        this.setValidity();
-        this.setErrorMessage();
+        this.updateValidity();
     }
     handlePaste(e) {
         var _a;
@@ -7312,33 +7257,20 @@ const TwofaInput = class {
         if (lastInput) {
             lastInput.focus();
         }
-        this.setValidity();
-        this.setErrorMessage();
+        this.updateValidity();
     }
-    setValidity() {
+    validate() {
         const code = this.code.join('');
-        const inputMatchLength = code.length === this.validation.maxLength;
-        const inputMatchValidation = code.match(this.validationPattern) !== null;
-        this.isValid = inputMatchLength && inputMatchValidation;
-    }
-    setPattern() {
-        var _a, _b;
-        if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
-        }
+        const failedRule = getFailedRegexRule(code, this.validation.custom);
+        return {
+            isValid: code.length === this.validation.maxLength && !failedRule,
+            errorMessage: failedRule ? getRuleErrorMessage(failedRule, this.language) : ''
+        };
     }
-    setErrorMessage() {
-        var _a;
-        const inputMatchValidation = this.code.join('').match(this.validationPattern) !== null;
-        if (!inputMatchValidation) {
-            const errorKey = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
-            if (errorKey) {
-                this.errorMessage = translate(errorKey, this.language);
-            }
-        }
-        else {
-            this.errorMessage = '';
-        }
+    updateValidity() {
+        const { isValid, errorMessage } = this.validate();
+        this.isValid = isValid;
+        this.errorMessage = errorMessage;
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -7347,9 +7279,9 @@ const TwofaInput = class {
         return null;
     }
     render() {
-        return (h("div", { key: '5764336a8995a1ec0e7ff432ce85c8a317e3f01c', class: "twofa" }, h("div", { key: '8ea47ba6bb5f552afcde936f1de8c544f89e12a7', class: 'twofa__error-message' }, h("p", { key: '6930908b1f5df7030d96a442779203747aa938b2' }, this.errorMessage)), h("div", { key: '56f116fa0ac4883d1b225b7165b2d5271a661d9d', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'b2ecadecbc8802c5b4dd09d81dc77e66f2108990', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
+        return (h("div", { key: '31164396a440bde033871a5cbf651546895d8c3d', class: "twofa" }, h("div", { key: 'cc50746fb709c3853cd11fd13c68be93efd811b4', class: 'twofa__error-message' }, h("p", { key: '4a34b178dd4b018daf81ee654f91f79813f801db' }, this.errorMessage)), h("div", { key: '0ac2a794fcb27deb3f40b87fe4758e19e35b53b2', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '69fdbfc5be1af6fab8b386179eaa25ea181aec3a', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
             return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
-        })), h("div", { key: '76635a96eb73d77a3259f26d7d74f738e705acf1', class: "twofa__button-wrapper" }, h("p", { key: '66b15896c126c4c7e8d3ba6d22829992df4cfde9', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '7e81ec829cfeb48e911d7b88aa9ec7d6f1cbf4e2', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
+        })), h("div", { key: '9a9f50ed47da2204cd31a27939d18b42011a1114', class: "twofa__button-wrapper" }, h("p", { key: 'ad90ba428278f90a05f706c67452551f3c75a199', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: 'cead0e523e873c20dd21982e318b1e37998480b8', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
             ? translate('twofaResendButton', this.language)
             : this.formatTime()))));
     }