@everymatrix/general-registration 1.10.24 → 1.10.25

package/dist/components/checkbox-group-input2.js

@@ -991,10 +991,6 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      * Default value for the input.
      */
     this.defaultValue = '';
-    /**
-     * Options of the input.
-     */
-    this.options = [];
     /**
      * Client custom styling via inline style
      */
@@ -1097,7 +1093,7 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "defaultValue": [513, "default-value"],
     "autofilled": [516],
     "tooltip": [513],
-    "options": [520],
+    "options": [16],
     "validation": [16],
     "language": [513],
     "emitValue": [516, "emit-value"],

package/dist/components/date-input2.js

@@ -10202,7 +10202,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/email-input2.js

@@ -100,9 +100,11 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      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;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -111,7 +113,9 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return translate('requiredError', this.language);
     }
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+      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;
     }
   }
   renderTooltip() {
@@ -121,7 +125,7 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/field-mixin.js

@@ -12,7 +12,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.3.18';
+    return '23.3.19';
   }
 }
 
@@ -9383,7 +9383,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.3.18';
+      return '23.3.19';
     }
 
     /** @protected */

package/dist/components/general-input2.js

@@ -24,10 +24,6 @@ const ToggleCheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
      * Default value for the input.
      */
     this.defaultValue = '';
-    /**
-     * Options of the input.
-     */
-    this.options = [];
     /**
      * Client custom styling via inline style
      */
@@ -95,7 +91,7 @@ const ToggleCheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   render() {
     return h("div", { class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'togglecheckbox__wrapper--flex' }, h("input", { class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), h("small", { class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
       h("img", { class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
-      return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: subfield.isDuplicateInput, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
+      return h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
     })));
   }
   static get watchers() { return {
@@ -107,7 +103,7 @@ const ToggleCheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "name": [513],
     "displayName": [513, "display-name"],
     "defaultValue": [513, "default-value"],
-    "options": [520],
+    "options": [16],
     "autofilled": [516],
     "tooltip": [513],
     "validation": [16],

package/dist/components/general-registration.js

@@ -145,29 +145,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   componentWillLoad() {
     return this.getRegisterConfig()
       .then((config) => {
-      if (this.translationUrl) {
-        getTranslations(this.translationUrl).then(() => {
-          config.content.fields.forEach(field => {
-            if (TRANSLATIONS[this.language][field.name]) {
-              Object.keys(TRANSLATIONS[this.language][field.name]).forEach((key) => {
-                field[key] = TRANSLATIONS[this.language][field.name][key];
-              });
-            }
-            return field;
-          });
-        })
-          .catch((error) => {
-          console.error('Failed to fetch translations:', error);
-        }).finally(() => {
-          this.formatConfig(config);
-          this.stepsStateMachine({ event: 'set', type: 'inputs' });
-        });
-      }
-      else {
-        this.formatConfig(config);
-        this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
-        this.stepsStateMachine({ event: 'set', type: 'inputs' });
-      }
+      this.formatConfig(config);
+      this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+      this.stepsStateMachine({ event: 'set', type: 'inputs' });
     });
   }
   componentDidLoad() {
@@ -367,10 +347,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     })
       .then((data) => {
       this.isLoading = false;
-      if (data.userId) {
-        alert(`User registered - the user ID is ${data.userId}`);
-      }
-      window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
+      window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
     })
       .catch((err) => {
       this.isLoading = false;
@@ -446,7 +423,32 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.listOfActions.some(action => action == '/register')) {
       this.lastStep = this.registrationStep;
     }
-    this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
+    // The translations for fields happens here. 
+    if (this.translationUrl) {
+      getTranslations(this.translationUrl).then(() => {
+        this.listOfInputs.forEach(field => {
+          var _a, _b;
+          this.addTranslation(field);
+          // Logic for fields types that have subfields
+          if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'togglecheckbox') {
+            field.data.subFields.forEach(subField => this.addTranslation(subField));
+          }
+          if (((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'checkboxgroup') {
+            this.addTranslation(field);
+            field.data.subFields.forEach(subField => this.addTranslation(subField));
+          }
+          return field;
+        });
+      })
+        .catch((error) => {
+        console.error('Failed to fetch translations:', error);
+      }).finally(() => {
+        this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
+      });
+    }
+    else {
+      this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
+    }
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
@@ -458,6 +460,13 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       };
     }
   }
+  addTranslation(field) {
+    if (TRANSLATIONS[this.language][field.name]) {
+      Object.keys(TRANSLATIONS[this.language][field.name]).forEach((key) => {
+        field[key] = TRANSLATIONS[this.language][field.name][key];
+      });
+    }
+  }
   setInitialValidStatus(field) {
     var _a, _b;
     // Input type checkbox, with no validation are valid

package/dist/components/number-input2.js

@@ -93,9 +93,11 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      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;
     }
     if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
       return translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
@@ -111,7 +113,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/password-input2.js

@@ -560,7 +560,8 @@ class PasswordField extends TextField {
     super();
     this._setType('password');
     this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
-    this.__boundRevealButtonTouchend = this._onRevealButtonTouchend.bind(this);
+    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
+    this.__lastChange = '';
   }
 
   /** @protected */
@@ -577,7 +578,7 @@ class PasswordField extends TextField {
         btn.disabled = host.disabled;
 
         btn.addEventListener('click', host.__boundRevealButtonClick);
-        btn.addEventListener('touchend', host.__boundRevealButtonTouchend);
+        btn.addEventListener('mousedown', host.__boundRevealButtonMouseDown);
       },
     );
     this.addController(this._revealButtonController);
@@ -592,6 +593,19 @@ class PasswordField extends TextField {
     }
   }
 
+  /**
+   * Override an event listener inherited from `InputControlMixin`
+   * to store the value at the moment of the native `change` event.
+   * @param {Event} event
+   * @protected
+   * @override
+   */
+  _onChange(event) {
+    super._onChange(event);
+
+    this.__lastChange = this.inputElement.value;
+  }
+
   /**
    * Override method inherited from `FocusMixin` to mark field as focused
    * when focus moves to the reveal button using Shift Tab.
@@ -628,6 +642,12 @@ class PasswordField extends TextField {
 
     if (!focused) {
       this._setPasswordVisible(false);
+
+      // Detect if `focusout` was prevented and if so, dispatch `change` event manually.
+      if (this.__lastChange !== this.inputElement.value) {
+        this.__lastChange = this.inputElement.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      }
     } else {
       const isButtonFocused = this.getRootNode().activeElement === this._revealNode;
       // Remove focus-ring from the field when the reveal button gets focused
@@ -663,10 +683,10 @@ class PasswordField extends TextField {
   }
 
   /** @private */
-  _onRevealButtonTouchend(e) {
-    // Cancel the following click event
+  _onRevealButtonMouseDown(e) {
+    // Cancel the following focusout event
     e.preventDefault();
-    this._togglePasswordVisibility();
+
     // Focus the input to avoid problem with password still visible
     // when user clicks the reveal button and then clicks outside.
     this.inputElement.focus();
@@ -719,7 +739,7 @@ class PasswordField extends TextField {
 
 customElements.define(PasswordField.is, PasswordField);
 
-const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__input>input:placeholder-shown{color:#979797}.password__error-message{color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
+const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__input>input:placeholder-shown{color:#979797}.password__error-message{color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--hidden{display:none}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
 
 const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -863,9 +883,11 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      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;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -874,7 +896,9 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return translate('requiredError', this.language);
     }
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+      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;
     }
   }
   renderTooltip() {
@@ -888,14 +912,13 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const passedRules = this.passwordComplexity.filter(complexity => complexity.passed).length;
     const meterValue = passedRules / totalRules;
     const allRulesPassed = this.passwordComplexity.every(complexity => complexity.passed);
-    if (this.showPopup === false)
-      return;
-    return (h("div", { class: `password__complexity` }, h("div", { class: 'password__complexity--strength' }, h("p", { class: 'password__complexity--text' }, translate('passwordStrength', this.language), "\u00A0", h("span", { class: 'password__complexity--text-bold' }, translate(`${allRulesPassed ? 'passwordStrengthStrong' : 'passwordStrengthWeak'}`, this.language))), h("meter", { value: meterValue, min: "0", max: "1" })), h("div", null, this.passwordComplexity.map((complexity, index) => {
-      return (h("div", { key: index }, h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), h("span", null, complexity.rule)));
+    // if (this.showPopup === false) return;
+    return (h("div", { class: `password__complexity ${!this.showPopup ? 'password__complexity--hidden' : ''}` }, h("div", { class: 'password__complexity--strength' }, h("p", { class: 'password__complexity--text' }, translate('passwordStrength', this.language), "\u00A0", h("span", { class: 'password__complexity--text-bold' }, translate(`${allRulesPassed ? 'passwordStrengthStrong' : 'passwordStrengthWeak'}`, this.language))), h("meter", { value: meterValue, min: "0", max: "1" })), h("div", null, this.passwordComplexity.map((complexity, index) => {
+      return (h("div", { key: index }, h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), h("span", null, translate(`${complexity.rule}`, this.language) ? translate(`${complexity.rule}`, this.language) : complexity.rule)));
     }))));
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/select-input2.js

@@ -69,8 +69,10 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   componentWillLoad() {
     if (this.action && !this.options.length) {
       if (this.action.split(" ")[0] == 'GET') {
-        return this.getOptions().then((options) => {
-          this.displayedOptions = options.countries.map(option => {
+        const endpoint = this.action.split(" ")[1];
+        return this.getOptions(endpoint).then((options) => {
+          const firstKey = Object.keys(options)[0];
+          this.displayedOptions = options[firstKey].map(option => {
             return { label: option.Name, value: option.Alpha2Code };
           });
         });
@@ -94,9 +96,8 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  getOptions() {
-    // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
-    const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/countries");
+  getOptions(endpoint) {
+    const url = new URL(endpoint);
     return new Promise((resolve, reject) => {
       fetch(url.href)
         .then((res) => res.json())
@@ -123,7 +124,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/tel-input2.js

@@ -130,9 +130,11 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      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;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -148,7 +150,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/text-input2.js

@@ -127,9 +127,11 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      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;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -138,7 +140,9 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return translate('requiredError', this.language);
     }
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+      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;
     }
   }
   renderTooltip() {
@@ -148,7 +152,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/tooltipIcon.js

@@ -8,12 +8,29 @@ const TRANSLATIONS = {
     "passwordStrength": "Password strength",
     "passwordStrengthWeak": "is not adequate",
     "passwordStrengthStrong": "is adequate",
+    "SpecialCharactersNotAllowed": 'Should not contain special characters',
+    "InvalidEmailFormat": "Invalid email format.",
+    "EmailNotMatching": "Emails not matching!",
+    "PasswordNotMatching": "Passwords not matching",
+    "MustIncludeNumber": "include a number",
+    "MustContainCapital": "contain capital letters",
+    "MustIncludePunctation": "punctuation",
   },
   "hu": {
     "dateError": 'A választott dátumnak {min} és {max} között kell lennie',
     "numberLengthError": 'A számnak {min} és {max} között kell lennie',
     "lengthError": `A hossznak {minLength} és {maxLength} között kell lennie`,
     "requiredError": 'Ez a beviteli mező kötelező.',
+    "passwordStrength": "Jelszó erőssége",
+    "passwordStrengthWeak": "nem megfelelő",
+    "passwordStrengthStrong": "megfelelő",
+    "SpecialCharactersNotAllowed": 'Nem tartalmazhat speciális karaktereket',
+    "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
+    "EmailNotMatching": "Az e-mailek nem egyeznek!",
+    "PasswordNotMatching": "A jelszavak nem egyeznek",
+    "MustIncludeNumber": "tartalmaznia kell egy számot",
+    "MustContainCapital": "nagybetűket kell tartalmaznia",
+    "MustIncludePunctation": "írásjelet"
   }
 };
 const translate = (key, customLang, values) => {