@everymatrix/general-registration 1.10.24 → 1.10.25

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

@@ -14,12 +14,29 @@ const TRANSLATIONS$1 = {
     "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$2 = (key, customLang, values) => {
@@ -50,7 +67,7 @@ const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.3.18';
+    return '23.3.19';
   }
 }
 
@@ -10542,7 +10559,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 */
@@ -14705,10 +14722,6 @@ const CheckboxGroupInput = class {
      * Default value for the input.
      */
     this.defaultValue = '';
-    /**
-     * Options of the input.
-     */
-    this.options = [];
     /**
      * Client custom styling via inline style
      */
@@ -29319,7 +29332,7 @@ const DateInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -29431,9 +29444,11 @@ const EmailInput = class {
     }
   }
   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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -29442,7 +29457,9 @@ const EmailInput = class {
       return translate$2('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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
   }
   renderTooltip() {
@@ -29452,7 +29469,7 @@ const EmailInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -29644,29 +29661,9 @@ const GeneralRegistration = class {
   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() {
@@ -29866,10 +29863,7 @@ const GeneralRegistration = class {
     })
       .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;
@@ -29945,7 +29939,32 @@ const GeneralRegistration = class {
     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]) {
@@ -29957,6 +29976,13 @@ const GeneralRegistration = class {
       };
     }
   }
+  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
@@ -30098,9 +30124,11 @@ const NumberInput = class {
     }
   }
   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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
       return translate$2('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
@@ -30116,7 +30144,7 @@ const NumberInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -30766,7 +30794,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 */
@@ -30783,7 +30812,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);
@@ -30798,6 +30827,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.
@@ -30834,6 +30876,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
@@ -30869,10 +30917,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();
@@ -30925,7 +30973,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 = class {
   constructor(hostRef) {
@@ -31067,9 +31115,11 @@ const PasswordInput = class {
     }
   }
   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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -31078,7 +31128,9 @@ const PasswordInput = class {
       return translate$2('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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
   }
   renderTooltip() {
@@ -31092,14 +31144,13 @@ const PasswordInput = class {
     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 (index.h("div", { class: `password__complexity` }, index.h("div", { class: 'password__complexity--strength' }, index.h("p", { class: 'password__complexity--text' }, translate$2('passwordStrength', this.language), "\u00A0", index.h("span", { class: 'password__complexity--text-bold' }, translate$2(`${allRulesPassed ? 'passwordStrengthStrong' : 'passwordStrengthWeak'}`, this.language))), index.h("meter", { value: meterValue, min: "0", max: "1" })), index.h("div", null, this.passwordComplexity.map((complexity, index$1) => {
-      return (index.h("div", { key: index$1 }, index.h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), index.h("span", null, complexity.rule)));
+    // if (this.showPopup === false) return;
+    return (index.h("div", { class: `password__complexity ${!this.showPopup ? 'password__complexity--hidden' : ''}` }, index.h("div", { class: 'password__complexity--strength' }, index.h("p", { class: 'password__complexity--text' }, translate$2('passwordStrength', this.language), "\u00A0", index.h("span", { class: 'password__complexity--text-bold' }, translate$2(`${allRulesPassed ? 'passwordStrengthStrong' : 'passwordStrengthWeak'}`, this.language))), index.h("meter", { value: meterValue, min: "0", max: "1" })), index.h("div", null, this.passwordComplexity.map((complexity, index$1) => {
+      return (index.h("div", { key: index$1 }, index.h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), index.h("span", null, translate$2(`${complexity.rule}`, this.language) ? translate$2(`${complexity.rule}`, this.language) : complexity.rule)));
     }))));
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -35585,8 +35636,10 @@ const SelectInput = class {
   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 };
           });
         });
@@ -35610,9 +35663,8 @@ const SelectInput = class {
       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())
@@ -35639,7 +35691,7 @@ const SelectInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -35779,9 +35831,11 @@ const TelInput = class {
     }
   }
   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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -35797,7 +35851,7 @@ const TelInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -35935,9 +35989,11 @@ const TextInput = class {
     }
   }
   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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate$2('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -35946,7 +36002,9 @@ const TextInput = class {
       return translate$2('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$2(`${errorCode}`, this.language) ? translate$2(`${errorCode}`, this.language) : errorMessage;
     }
   }
   renderTooltip() {
@@ -35956,7 +36014,7 @@ const TextInput = class {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
@@ -35981,10 +36039,6 @@ const ToggleCheckboxInput = class {
      * Default value for the input.
      */
     this.defaultValue = '';
-    /**
-     * Options of the input.
-     */
-    this.options = [];
     /**
      * Client custom styling via inline style
      */
@@ -36052,7 +36106,7 @@ const ToggleCheckboxInput = class {
   render() {
     return index.h("div", { class: `togglecheckbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'togglecheckbox__wrapper--flex' }, index.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()), index.h("small", { class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
-      return index.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 index.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 {

package/dist/cjs/general-registration.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[520],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[520],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[520],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[520],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
   });
 };
 

package/dist/collection/components/general-registration/general-registration.js

@@ -76,29 +76,9 @@ export class GeneralRegistration {
   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() {
@@ -298,10 +278,7 @@ export class GeneralRegistration {
     })
       .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;
@@ -378,7 +355,32 @@ export class GeneralRegistration {
       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]) {
@@ -390,6 +392,13 @@ export class GeneralRegistration {
       };
     }
   }
+  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