@everymatrix/general-input 1.60.1 → 1.61.0

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

@@ -6517,6 +6517,17 @@ const TextInput = class {
             this.errorMessage = this.setErrorMessage();
         }
     }
+    handleValidationChange(event) {
+        if (event.detail.field !== this.name) {
+            return;
+        }
+        this.validation = event.detail.validation;
+        this.validationPattern = this.setPattern();
+        if (this.touched) {
+            this.isValid = this.setValidity();
+            this.errorMessage = this.setErrorMessage();
+        }
+    }
     connectedCallback() {
         this.validationPattern = this.setPattern();
     }
@@ -6545,7 +6556,7 @@ const TextInput = class {
             return false;
         }
         else {
-            return (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity.valid;
+            return ((_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity.valid) && this.inputReference.value.match(this.validationPattern) != null;
         }
     }
     setPattern() {
@@ -6556,10 +6567,10 @@ const TextInput = class {
     }
     setErrorMessage() {
         var _a, _b, _c, _d;
-        if (this.inputReference.validity.patternMismatch) {
+        if (this.inputReference.value.match(this.validationPattern) == null) {
             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 locale_utils.translate(`${errorCode}`, this.language) ? locale_utils.translate(`${errorCode}`, this.language) : errorMessage;
+            return locale_utils.translate(`${errorCode}`, this.language) || errorMessage;
         }
         if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
             return locale_utils.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -6584,8 +6595,8 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'e297f841a57c6acf854535a786916aa641831556', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7fd284a58e58d5c61a03caf4cc317b8dd9dbd82f', class: 'text__wrapper--flex' }, index.h("label", { key: 'f80a2003386ec867e5310190a7568105c2912569', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e8f5197bd370100406d600be5a336f85f4c6934d', class: 'text__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'ff8c38fe3495a41a41ac4a1569169ce26a1ec9ce', class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '581106e515810ab43f7d6b6eda504ccf23906b0e', 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, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '20620710026982d5fb670a3173bab57a7fa9e7ce', class: 'text__error-message' }, this.errorMessage));
+        return index.h("div", { key: '3050f7be1581f0cd5b5e1ce708a789b5e7a54b03', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9dcc93fb8c091c599269454ab21c03c2380ffef7', class: 'text__wrapper--flex' }, index.h("label", { key: '0054347b1a4de17ea60b898783de0ef6b42233ee', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'b4655608e397f8d2a8179c01521756bf87746ace', class: 'text__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'c71c1ca1175d11ec352eca5cff216bb244aa7895', class: 'text__tooltip-icon', src: tooltipIcon.tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '2df3c181c5ca725e121c0878a10ca257da7cdd34', 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 }), index.h("small", { key: '5785eb51774c9159e474fbdbd5be0c1ab2a57899', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],