@everymatrix/general-registration 1.10.23 → 1.10.25

package/dist/cjs/{checkbox-group-input_12.cjs.entry.js → 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
      */
@@ -14793,10 +14806,10 @@ const CheckboxGroupInput = class {
       : [];
   }
   render() {
-    return index.h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
+    return index.h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { class: 'checkbox__input', label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
       index.h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), index.h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
         this.selectedValues = event.detail.value;
-      } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
+      } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -14807,7 +14820,7 @@ const CheckboxGroupInput = class {
 };
 CheckboxGroupInput.style = checkboxGroupInputCss;
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}";
+const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}";
 
 const CheckboxInput = class {
   constructor(hostRef) {
@@ -14893,7 +14906,7 @@ const CheckboxInput = class {
     return null;
   }
   render() {
-    return index.h("div", { class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = 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: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("input", { class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = 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: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
   }
   static get watchers() { return {
@@ -29218,7 +29231,7 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
-const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;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}.date__tooltip.visible{opacity:1}";
+const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;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}.date__tooltip.visible{opacity:1}";
 
 const DateInput = class {
   constructor(hostRef) {
@@ -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';
     }
@@ -29334,7 +29347,7 @@ const DateInput = class {
 };
 DateInput.style = dateInputCss;
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__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}.email__tooltip.visible{opacity:1}";
+const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.email__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__input::placeholder{color:#979797}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__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}.email__tooltip.visible{opacity:1}";
 
 const EmailInput = class {
   constructor(hostRef) {
@@ -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';
     }
@@ -29493,6 +29510,8 @@ const GeneralInput = class {
         return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'checkboxgroup':
         return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
+      case 'togglecheckbox':
+        return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
       case 'datetime':
         return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat });
       case 'password':
@@ -29562,7 +29581,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration__form.hidden {\n  display: none;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration__form.hidden {\n  display: none;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  border: none;\n  border-radius: 20px;\n  box-shadow: 0px 2px 1px rgba(11, 16, 19, 0.6);\n  color: #0B1013;\n  font-size: 18px;\n  font-weight: bold;\n  text-transform: uppercase;\n  width: 150px;\n  height: 45px;\n}\n.registration__button--disabled {\n  color: #647480;\n  background-color: #CFCFCF;\n  box-shadow: none;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration = class {
   constructor(hostRef) {
@@ -29587,6 +29606,7 @@ const GeneralRegistration = class {
     this.translationUrl = '';
     this.isLoading = true;
     this.forms = [];
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfInputValidity = [];
     this.listOfActions = [];
@@ -29599,7 +29619,7 @@ const GeneralRegistration = class {
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
+      this.host.shadowRoot.prepend(sheet);
     };
     this.setClientStylingURL = () => {
       let url = new URL(this.clientStylingUrl);
@@ -29609,7 +29629,7 @@ const GeneralRegistration = class {
         .then((data) => {
         cssFile.innerHTML = data;
         this.clientStyling = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+        setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
       });
     };
   }
@@ -29641,43 +29661,22 @@ 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' });
     });
   }
-  componentDidRender() {
-    if (this.stylingContainer) {
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+    if (!this.limitStylingAppends && this.host) {
       if (this.clientStyling)
         this.setClientStyling();
       if (this.clientStylingUrl)
         this.setClientStylingURL();
+      this.limitStylingAppends = true;
     }
   }
-  componentDidLoad() {
-    this.registrationWidgetLoaded.emit();
-    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
-  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -29864,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;
@@ -29891,22 +29887,51 @@ const GeneralRegistration = class {
         return [inputElement];
       }
     });
-    // Set validity status of each input
-    this.listOfInputValidity = this.listOfInputs.map(field => {
-      return {
-        name: field.name,
-        isValid: this.setInitialValidStatus(field)
-      };
-    });
-    // Populate the list of inputs values and set as null in the beginning (or false for checkbox type inputs)
-    this.listOfInputValues = this.listOfInputs.map(field => {
-      var _a, _b;
-      return { name: field.name,
-        value: ((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
-        isDuplicate: field.isDuplicateInput || false,
-        type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
-      };
-    });
+    this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
+      var _a;
+      // If the field is a togglecheckbox, add its subfields
+      if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
+        field.data.subFields.forEach(subfield => {
+          acc.push({
+            name: subfield.name,
+            isValid: this.setInitialValidStatus(subfield)
+          });
+        });
+      }
+      else {
+        acc.push({
+          name: field.name,
+          isValid: this.setInitialValidStatus(field)
+        });
+      }
+      return acc;
+    }, []);
+    this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
+      var _a, _b, _c;
+      // If the field type is a 'togglecheckbox', add its subfields
+      if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
+        field.data.subFields.forEach(subfield => {
+          var _a, _b;
+          acc.push({
+            name: subfield.name,
+            value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
+            isDuplicate: subfield.isDuplicateInput || false,
+            type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'togglecheckbox'
+              ? 'togglecheckbox'
+              : null
+          });
+        });
+      }
+      else {
+        acc.push({
+          name: field.name,
+          value: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkbox' ? 'false' : null,
+          isDuplicate: field.isDuplicateInput || false,
+          type: ((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
+        });
+      }
+      return acc;
+    }, []);
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.registrationID = config.content.registrationID;
@@ -29914,8 +29939,32 @@ const GeneralRegistration = class {
     if (this.listOfActions.some(action => action == '/register')) {
       this.lastStep = this.registrationStep;
     }
-    // this.forms.push({ [this.registrationStep] : this.listOfInputs});
-    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]) {
@@ -29927,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
@@ -29953,7 +30009,11 @@ const GeneralRegistration = class {
   }
   renderForm() {
     return this.forms.map((form, index$1) => {
-      return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })), this.buttonInsideForm && this.renderButtons());
+      return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
+          ? (input.inputType.toLowerCase() == 'checkboxgroup' || input.inputType.toLowerCase() == 'togglecheckbox')
+            ? input.data.subFields
+            : input.data.values
+          : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })), this.buttonInsideForm && this.renderButtons());
     });
   }
   ;
@@ -29964,8 +30024,9 @@ const GeneralRegistration = class {
     if (this.isLoading) {
       return index.h("p", null, "Please wait, loading ...");
     }
-    return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, this.renderForm(), index.h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
+    return (index.h("div", { class: `registration  registration__${this.registrationStep}` }, this.renderForm(), index.h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
   }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "registrationStep": ["sendStep"],
     "forms": ["setFormValidity"]
@@ -29973,7 +30034,7 @@ const GeneralRegistration = class {
 };
 GeneralRegistration.style = generalRegistrationCss;
 
-const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.number__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
+const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.number__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
 
 const NumberInput = class {
   constructor(hostRef) {
@@ -30063,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 } });
@@ -30081,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';
     }
@@ -30731,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 */
@@ -30748,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);
@@ -30763,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.
@@ -30799,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
@@ -30834,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();
@@ -30890,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:#1F1F1F}.password__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;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__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) {
@@ -31032,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 } });
@@ -31043,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() {
@@ -31057,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';
     }
@@ -35486,7 +35572,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
 customElements.define(ComboBox.is, ComboBox);
 
-const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.select__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}";
+const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}";
 
 const SelectInput = class {
   constructor(hostRef) {
@@ -35550,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 };
           });
         });
@@ -35575,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())
@@ -35604,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';
     }
@@ -35619,7 +35706,7 @@ const SelectInput = class {
 };
 SelectInput.style = selectInputCss;
 
-const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.tel__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:8px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
+const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
 
 const TelInput = class {
   constructor(hostRef) {
@@ -35713,7 +35800,7 @@ const TelInput = class {
     this.isValid = this.setValidity();
     if (this.defaultValue) {
       this.value = this.defaultValue;
-      this.valueHandler({ name: this.name, value: this.value });
+      this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
     }
   }
   getPhoneCodes(endpoint) {
@@ -35744,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 } });
@@ -35762,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';
     }
@@ -35776,7 +35865,7 @@ const TelInput = class {
 };
 TelInput.style = telInputCss;
 
-const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.text__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
+const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
 
 const TextInput = class {
   constructor(hostRef) {
@@ -35900,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 } });
@@ -35911,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() {
@@ -35921,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';
     }
@@ -35935,6 +36028,94 @@ const TextInput = class {
 };
 TextInput.style = textInputCss;
 
+const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;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}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
+
+const ToggleCheckboxInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
+    this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
+    /**
+     * Default value for the input.
+     */
+    this.defaultValue = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    this.limitStylingAppends = false;
+    this.showTooltip = false;
+    this.value = '';
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  validityChanged() {
+  }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
+  emitValueHandler(newValue) {
+  }
+  valueHandler(inputValueEvent) {
+    this.sendInputValue.emit(inputValueEvent);
+  }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
+  connectedCallback() {
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentDidLoad() {
+  }
+  handleClick() {
+    this.showFields = this.checkboxReference.checked;
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+  }
+  setValidity() {
+    return this.checkboxReference.validity.valid;
+  }
+  setErrorMessage() {
+    if (this.checkboxReference.validity.valueMissing) {
+      return translate$2('requiredError', this.language);
+    }
+  }
+  renderLabel() {
+    return (index.h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (index.h("div", { class: `togglecheckbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
+  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, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
+    })));
+  }
+  static get watchers() { return {
+    "isValid": ["validityChanged"],
+    "emitValue": ["emitValueHandler"]
+  }; }
+};
+ToggleCheckboxInput.style = toggleCheckboxInputCss;
+
 exports.checkbox_group_input = CheckboxGroupInput;
 exports.checkbox_input = CheckboxInput;
 exports.date_input = DateInput;
@@ -35947,3 +36128,4 @@ exports.radio_input = RadioInput;
 exports.select_input = SelectInput;
 exports.tel_input = TelInput;
 exports.text_input = TextInput;
+exports.toggle_checkbox_input = ToggleCheckboxInput;