@everymatrix/general-registration 1.11.2 → 1.11.4

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

@@ -56,7 +56,7 @@ const translate$2 = (key, customLang, values) => {
   return translation;
 };
 
-const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMiAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iMTYuMTUiIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjcuNjAwMDEiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTEuOTA5OSAxNi4xNSkiIGZpbGw9IiMyQjJEM0YiLz4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iNi42NTAwMiIgd2lkdGg9IjEuODIiIGhlaWdodD0iMS45MDAwMSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCAxMS45MDk5IDYuNjUwMDIpIiBmaWxsPSIjMkIyRDNGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC45ODk5OSAxMC40NUMwLjk4OTk5IDQuNjc3NjggNS40NzE5NyAwIDExIDBDMTYuNTI4IDAgMjEuMDEgNC42Nzc2OCAyMS4wMSAxMC40NUMyMS4wMSAxNi4yMjEgMTYuNTI4IDIwLjkgMTEgMjAuOUM1LjQ3MTk3IDIwLjkgMC45ODk5OSAxNi4yMjEgMC45ODk5OSAxMC40NVpNMi44MDk5OSAxMC40NTA2QzIuODA5OTkgMTUuMTcyMyA2LjQ3Njc3IDE5IDExIDE5QzE1LjUyMiAxOSAxOS4xOSAxNS4xNzIzIDE5LjE5IDEwLjQ1MDZDMTkuMTkgNS43Mjg5MSAxNS41MjIgMS45MDAwMSAxMSAxLjkwMDAxQzYuNDc2NzcgMS45MDAwMSAyLjgwOTk5IDUuNzI4OTEgMi44MDk5OSAxMC40NTA2WiIgZmlsbD0iIzJCMkQzRiIvPgo8L3N2Zz4K';
+const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
 
 /**
  * @license
@@ -14734,6 +14734,7 @@ const CheckboxGroupInput = class {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.selectedValues = [];
+    this.value = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -29286,7 +29287,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   return date.getTime() < dateToCompare.getTime();
 }
 
-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 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__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:#979797}.date__wrapper--autofilled .date__input::part(input-field){color:#979797}.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) {
@@ -29405,7 +29406,7 @@ const DateInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `date__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+    return index.h("div", { class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
       index.h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   get element() { return index.getElement(this); }
@@ -29416,7 +29417,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:#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 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--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:#979797}.email__wrapper--autofilled .email__input{color:#979797}.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) {
@@ -29542,7 +29543,7 @@ const EmailInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `email__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
@@ -29653,7 +29654,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  position: relative;\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}\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -25px 0 0 -25px;\n  width: 50px;\n  height: 50px;\n}\n.spinner .path {\n  stroke: #E37912;\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\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__wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.registration__error-message {\n  color: #cc0000b3;\n  font-size: 13px;\n  font-family: \"ubuntu\";\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  position: relative;\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}\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -25px 0 0 -25px;\n  width: 50px;\n  height: 50px;\n}\n.spinner .path {\n  stroke: #E37912;\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}";
 
 const GeneralRegistration = class {
   constructor(hostRef) {
@@ -29685,6 +29686,7 @@ const GeneralRegistration = class {
     this.listOfInputs = [];
     this.emitValue = false;
     this.backButtonPressed = false;
+    this.registerErrors = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -29840,7 +29842,10 @@ const GeneralRegistration = class {
         .filter(input => !input.isDuplicate)
         .reduce((acc, curr) => {
         // Because the API is very robust, some values need to be split as separate entities.  
-        if (curr.type === 'tel') {
+        if (curr.name === 'TypeOfPublicArea') {
+          acc[curr.name] = curr.value.toLowerCase();
+        }
+        else if (curr.type === 'tel') {
           //@ts-ignore
           acc['MobilePrefix'] = curr.value.prefix;
           //@ts-ignore
@@ -29922,6 +29927,7 @@ const GeneralRegistration = class {
   }
   setRegister() {
     this.isLoading = true;
+    this.registerErrors = false;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
@@ -29934,7 +29940,7 @@ const GeneralRegistration = class {
     fetch(url.href, options)
       .then((res) => {
       if (!res.ok) {
-        window.postMessage({ type: 'registrationFailed' }, window.location.href);
+        this.registerErrors = true;
         return res.json().then(error => {
           this.errorCode = error.thirdPartyResponse.errorCode;
           // Show the idomsoft error if it is the case
@@ -29947,17 +29953,19 @@ const GeneralRegistration = class {
           else {
             this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
           }
+          window.postMessage({ type: 'registrationFailed', errorMessage: error === null || error === void 0 ? void 0 : error.thirdPartyResponse.message }, window.location.href);
         });
       }
       return res.json();
     })
       .then((data) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      if (!this.registerErrors) {
+        window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      }
     })
       .catch((err) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationFailed' }, window.location.href);
       console.error(err);
     })
       .finally(() => {
@@ -30117,7 +30125,7 @@ const GeneralRegistration = class {
     if (this.isLoading) {
       return index.h("p", null, "Please wait, loading ...");
     }
-    return (index.h("div", { class: `registration  registration__${this.registrationStep}` }, 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("div", { class: 'registration__wrapper--flex' }, index.h("p", { class: 'registration__error-message' }, this.errorMessage)), !this.buttonInsideForm && this.renderButtons()));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -30127,7 +30135,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:#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 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--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:#979797}.number__wrapper--autofilled .number__input{color:#979797}.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) {
@@ -30241,7 +30249,7 @@ const NumberInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `number__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'number__wrapper--flex' }, index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'number__wrapper--flex' }, index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
@@ -31066,7 +31074,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{position:relative;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{position:absolute;top:calc(100% + 5px);left:0;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 passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%}.password__wrapper--autofilled{pointer-events:none}.password__wrapper--autofilled .password__label{color:#979797}.password__wrapper--autofilled .password__input::part(input-field){color:#979797}.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{position:absolute;top:calc(100% + 5px);left:0;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) {
@@ -31084,7 +31092,6 @@ const PasswordInput = class {
     this.clientStyling = '';
     this.limitStylingAppends = false;
     this.showTooltip = false;
-    this.showPopup = true;
     this.value = '';
     this.touched = false;
     this.originalValid = false;
@@ -31111,6 +31118,10 @@ const PasswordInput = class {
       this.isValid = this.setValidity();
       this.errorMessage = this.setErrorMessage();
     };
+    this.handleFocus = () => {
+      this.showPopup = true;
+      this.calculateComplexity(this.value);
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -31206,7 +31217,7 @@ const PasswordInput = class {
       .map(rule => {
       const ruleRegex = new RegExp(rule.pattern);
       const passed = ruleRegex.test(password);
-      return { rule: rule.displayName, passed };
+      return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
     });
   }
   setValidity() {
@@ -31261,7 +31272,7 @@ const PasswordInput = class {
     const meterValue = passedRules / totalRules;
     const allRulesPassed = this.passwordComplexity.every(complexity => complexity.passed);
     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)));
+      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.ruleKey}`, this.language) ? translate$2(`${complexity.ruleKey}`, this.language) : complexity.rule)));
     }))));
   }
   render() {
@@ -31269,8 +31280,8 @@ const PasswordInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `password__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'password__wrapper--flex' }, index.h("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.showPopup = true }), index.h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
+    return index.h("div", { class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'password__wrapper--flex' }, index.h("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), index.h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.isDuplicateInput && this.renderComplexityPopup());
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -35688,7 +35699,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:#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 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--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:#979797}.select__wrapper--autofilled .select__input::part(input-field){color:#979797}.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) {
@@ -35747,7 +35758,10 @@ const SelectInput = class {
       this.showTooltip = false;
   }
   connectedCallback() {
-    this.displayedOptions = this.options;
+    this.displayedOptions = this.options.map(option => ({
+      label: option.label,
+      value: option.value.toUpperCase()
+    }));
   }
   componentWillLoad() {
     if (this.action && !this.options.length) {
@@ -35775,7 +35789,7 @@ const SelectInput = class {
     this.inputReference = this.element.shadowRoot.querySelector('input');
     this.isValid = this.setValidity();
     if (this.defaultValue) {
-      this.value = this.defaultValue;
+      this.value = this.defaultValue.toUpperCase();
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
@@ -35811,8 +35825,8 @@ const SelectInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `select__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
+    return index.h("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -35822,7 +35836,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:#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 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--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:#979797}.tel__wrapper--autofilled .tel__input::part(input-field){color:#979797}.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) {
@@ -35971,7 +35985,7 @@ const TelInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `tel__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
@@ -35981,7 +35995,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:#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 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--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:#979797}.text__wrapper--autofilled .text__input::part(input-field){color:#979797}.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) {
@@ -36134,7 +36148,7 @@ const TextInput = class {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return index.h("div", { class: `text__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {

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

@@ -21,8 +21,15 @@
   height: 100%;
   container-type: inline-size;
 }
+.registration__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .registration__error-message {
   color: #cc0000b3;
+  font-size: 13px;
+  font-family: "ubuntu";
 }
 .registration__form {
   display: grid;

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

@@ -28,6 +28,7 @@ export class GeneralRegistration {
     this.listOfInputs = [];
     this.emitValue = false;
     this.backButtonPressed = false;
+    this.registerErrors = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -183,7 +184,10 @@ export class GeneralRegistration {
         .filter(input => !input.isDuplicate)
         .reduce((acc, curr) => {
         // Because the API is very robust, some values need to be split as separate entities.  
-        if (curr.type === 'tel') {
+        if (curr.name === 'TypeOfPublicArea') {
+          acc[curr.name] = curr.value.toLowerCase();
+        }
+        else if (curr.type === 'tel') {
           //@ts-ignore
           acc['MobilePrefix'] = curr.value.prefix;
           //@ts-ignore
@@ -265,6 +269,7 @@ export class GeneralRegistration {
   }
   setRegister() {
     this.isLoading = true;
+    this.registerErrors = false;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
@@ -277,7 +282,7 @@ export class GeneralRegistration {
     fetch(url.href, options)
       .then((res) => {
       if (!res.ok) {
-        window.postMessage({ type: 'registrationFailed' }, window.location.href);
+        this.registerErrors = true;
         return res.json().then(error => {
           this.errorCode = error.thirdPartyResponse.errorCode;
           // Show the idomsoft error if it is the case
@@ -290,17 +295,19 @@ export class GeneralRegistration {
           else {
             this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
           }
+          window.postMessage({ type: 'registrationFailed', errorMessage: error === null || error === void 0 ? void 0 : error.thirdPartyResponse.message }, window.location.href);
         });
       }
       return res.json();
     })
       .then((data) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      if (!this.registerErrors) {
+        window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      }
     })
       .catch((err) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationFailed' }, window.location.href);
       console.error(err);
     })
       .finally(() => {
@@ -469,7 +476,8 @@ export class GeneralRegistration {
     }
     return (h("div", { class: `registration  registration__${this.registrationStep}` },
       this.renderForm(),
-      h("p", { class: 'registration__error-message' }, this.errorMessage),
+      h("div", { class: 'registration__wrapper--flex' },
+        h("p", { class: 'registration__error-message' }, this.errorMessage)),
       !this.buttonInsideForm && this.renderButtons()));
   }
   static get is() { return "general-registration"; }

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

@@ -998,6 +998,7 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.selectedValues = [];
+    this.value = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;

package/dist/components/date-input2.js

@@ -10149,7 +10149,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   return date.getTime() < dateToCompare.getTime();
 }
 
-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 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__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:#979797}.date__wrapper--autofilled .date__input::part(input-field){color:#979797}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10270,7 +10270,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return h("div", { class: `date__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+    return h("div", { class: `date__wrapper  ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
       h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   get element() { return this; }

package/dist/components/email-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-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 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--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:#979797}.email__wrapper--autofilled .email__input{color:#979797}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -129,7 +129,7 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return h("div", { class: `email__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'email__wrapper--flex' }, h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
+    return h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'email__wrapper--flex' }, h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
       h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {

package/dist/components/general-registration.js

@@ -63,7 +63,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  position: relative;\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}\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -25px 0 0 -25px;\n  width: 50px;\n  height: 50px;\n}\n.spinner .path {\n  stroke: #E37912;\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\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__wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.registration__error-message {\n  color: #cc0000b3;\n  font-size: 13px;\n  font-family: \"ubuntu\";\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  position: relative;\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}\n.spinner {\n  animation: rotate 2s linear infinite;\n  z-index: 2;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -25px 0 0 -25px;\n  width: 50px;\n  height: 50px;\n}\n.spinner .path {\n  stroke: #E37912;\n  stroke-linecap: round;\n  animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}";
 
 const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -97,6 +97,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.listOfInputs = [];
     this.emitValue = false;
     this.backButtonPressed = false;
+    this.registerErrors = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -252,7 +253,10 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         .filter(input => !input.isDuplicate)
         .reduce((acc, curr) => {
         // Because the API is very robust, some values need to be split as separate entities.  
-        if (curr.type === 'tel') {
+        if (curr.name === 'TypeOfPublicArea') {
+          acc[curr.name] = curr.value.toLowerCase();
+        }
+        else if (curr.type === 'tel') {
           //@ts-ignore
           acc['MobilePrefix'] = curr.value.prefix;
           //@ts-ignore
@@ -334,6 +338,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   setRegister() {
     this.isLoading = true;
+    this.registerErrors = false;
     const url = new URL(`${this.endpoint}/v1/player/legislation/register`);
     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
@@ -346,7 +351,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     fetch(url.href, options)
       .then((res) => {
       if (!res.ok) {
-        window.postMessage({ type: 'registrationFailed' }, window.location.href);
+        this.registerErrors = true;
         return res.json().then(error => {
           this.errorCode = error.thirdPartyResponse.errorCode;
           // Show the idomsoft error if it is the case
@@ -359,17 +364,19 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
           else {
             this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
           }
+          window.postMessage({ type: 'registrationFailed', errorMessage: error === null || error === void 0 ? void 0 : error.thirdPartyResponse.message }, window.location.href);
         });
       }
       return res.json();
     })
       .then((data) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      if (!this.registerErrors) {
+        window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
+      }
     })
       .catch((err) => {
       this.isLoading = false;
-      window.postMessage({ type: 'registrationFailed' }, window.location.href);
       console.error(err);
     })
       .finally(() => {
@@ -529,7 +536,7 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.isLoading) {
       return h("p", null, "Please wait, loading ...");
     }
-    return (h("div", { class: `registration  registration__${this.registrationStep}` }, this.renderForm(), h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
+    return (h("div", { class: `registration  registration__${this.registrationStep}` }, this.renderForm(), h("div", { class: 'registration__wrapper--flex' }, h("p", { class: 'registration__error-message' }, this.errorMessage)), !this.buttonInsideForm && this.renderButtons()));
   }
   get host() { return this; }
   static get watchers() { return {

package/dist/components/number-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-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 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--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:#979797}.number__wrapper--autofilled .number__input{color:#979797}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -117,7 +117,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }
-    return h("div", { class: `number__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'number__wrapper--flex' }, h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
+    return h("div", { class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'number__wrapper--flex' }, h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
       h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {