@everymatrix/general-input-hsl 0.25.42 → 0.25.44

package/dist/collection/components/text-input/text-input.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
+import { getFailedRegexRule, getRuleErrorMessage } from "../../utils/utils";
 import tooltipIcon from "../../utils/tooltipIcon.svg";
 export class TextInput {
     constructor() {
         this.value = '';
-        this.validationPattern = [];
         this.duplicateInputValue = null;
         this.handleInput = (event) => {
             const inputElement = event.target;
@@ -18,8 +18,7 @@ export class TextInput {
                 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);
@@ -27,8 +26,7 @@ export class TextInput {
         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 = () => {
@@ -59,10 +57,11 @@ export class TextInput {
         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;
                 }
             });
         }
@@ -98,15 +97,13 @@ export class TextInput {
         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) {
@@ -114,15 +111,10 @@ export class TextInput {
             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) {
@@ -139,7 +131,7 @@ export class TextInput {
             this.validation.minLength &&
             this.inputReference.value.length < this.validation.minLength) {
             this.touched = true;
-            this.errorMessage = this.setErrorMessage();
+            this.errorMessage = this.validate().errorMessage;
         }
     }
     componentDidLoad() {
@@ -150,54 +142,40 @@ export class TextInput {
                 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) {
@@ -210,8 +188,8 @@ export class TextInput {
         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: tooltipIcon, 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: tooltipIcon, 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 is() { return "text-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/twofa-input/twofa-input.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
+import { getFailedRegexRule, getRuleErrorMessage } from "../../utils/utils";
 export class TwofaInput {
     constructor() {
-        this.validationPattern = '';
         this.stylingContainer = null;
         this.tooltipReference = null;
         this.tooltipIconReference = null;
@@ -61,8 +61,7 @@ export class TwofaInput {
             if (nextInput) {
                 nextInput.focus();
             }
-            this.setValidity();
-            this.setErrorMessage();
+            this.updateValidity();
         };
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
@@ -115,7 +114,6 @@ export class TwofaInput {
         }
     }
     connectedCallback() {
-        this.validationPattern = this.setPattern();
         this.code = new Array(this.validation.maxLength).fill('');
     }
     componentDidRender() {
@@ -127,7 +125,7 @@ export class TwofaInput {
         }
     }
     componentDidLoad() {
-        this.setValidity();
+        this.isValid = this.validate().isValid;
     }
     handleKeyDown(e, idx) {
         if (e.key === 'Backspace') {
@@ -140,8 +138,7 @@ export class TwofaInput {
                 prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
             }
         }
-        this.setValidity();
-        this.setErrorMessage();
+        this.updateValidity();
     }
     handlePaste(e) {
         var _a;
@@ -160,33 +157,20 @@ export class TwofaInput {
         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) {
@@ -195,9 +179,9 @@ export class TwofaInput {
         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()))));
     }

package/dist/collection/utils/utils.js

@@ -1,3 +1,10 @@
+import { translate } from "./locale.utils";
 export function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
+export function getFailedRegexRule(value, custom) {
+    return (custom || []).find(rule => rule.rule === 'regex' && !new RegExp(rule.pattern).test(value));
+}
+export function getRuleErrorMessage(rule, language) {
+    return translate(rule.errorKey, language) || rule.errorMessage;
+}