@everymatrix/general-registration 1.10.5 → 1.10.10

package/dist/cjs/checkbox-input_11.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ad0df8ea.js');
+const index = require('./index-68f93e1e.js');
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
@@ -33,7 +33,7 @@ const translate$2 = (key, customLang, values) => {
   return translation;
 };
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";
+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__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
 
 const CheckboxInput = class {
   constructor(hostRef) {
@@ -84,7 +84,7 @@ const CheckboxInput = class {
     }
   }
   render() {
-    return index.h("div", { class: 'checkbox__wrapper' }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), index.h("label", { htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'checkbox__wrapper' }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: !!this.defaultValue, readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -107,7 +107,7 @@ CheckboxInput.style = checkboxInputCss;
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.3.13';
+    return '23.3.14';
   }
 }
 
@@ -12980,7 +12980,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.3.13';
+      return '23.3.14';
     }
 
     /** @protected */
@@ -16278,7 +16278,7 @@ registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {
   moduleId: 'vaadin-date-picker-overlay-styles',
 });
 
-let memoizedTemplate$1;
+let memoizedTemplate$2;
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -16292,12 +16292,12 @@ class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(Overlay)) {
   }
 
   static get template() {
-    if (!memoizedTemplate$1) {
-      memoizedTemplate$1 = super.template.cloneNode(true);
-      memoizedTemplate$1.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    if (!memoizedTemplate$2) {
+      memoizedTemplate$2 = super.template.cloneNode(true);
+      memoizedTemplate$2.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
     }
 
-    return memoizedTemplate$1;
+    return memoizedTemplate$2;
   }
 }
 
@@ -23035,7 +23035,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
 customElements.define(DatePicker.is, DatePicker);
 
-const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.date__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.date__label--required::after{content:\"*\";margin-left:5px;color:#666666}.date__input{width:inherit;position:relative;border:none;border-bottom:3px solid #666666;color:#666666;font-size:16px;font-family:inherit}.date__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.date__input::placeholder{color:#666666}.date__input--invalid{border-bottom:3px solid #cc0000}.date__input:placeholder-shown+.date__label{opacity:0;visibility:hidden;transform:translateY(0)}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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}";
 
 const DateInput = class {
   constructor(hostRef) {
@@ -23086,7 +23086,8 @@ const DateInput = class {
     }
   }
   render() {
-    return index.h("div", { class: 'date__wrapper' }, index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'date__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
+    return index.h("div", { class: 'date__wrapper' }, 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.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -23096,7 +23097,7 @@ const DateInput = class {
 };
 DateInput.style = dateInputCss;
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.email__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.email__label--required::after{content:\"*\";margin-left:5px;color:#666666}.email__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.email__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.email__input::placeholder{color:#666666}.email__input--invalid{border-bottom:3px solid #cc0000}.email__input:placeholder-shown+.email__label{opacity:0;visibility:hidden;transform:translateY(0)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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%;padding-top:26px}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
 
 const EmailInput = class {
   constructor(hostRef) {
@@ -23111,17 +23112,24 @@ const EmailInput = class {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  valueChangedHandler(event) {
+    if (this.isDuplicateInput) {
+      if (this.name === event.detail.name + 'Duplicate') {
+        this.duplicateInputValue = event.detail.value;
+      }
+    }
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
@@ -23158,9 +23166,13 @@ const EmailInput = class {
     if (this.inputReference.validity.valueMissing) {
       return translate$2('requiredError', this.language);
     }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+    }
   }
   render() {
-    return index.h("div", { class: 'email__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
+    return index.h("div", { class: 'email__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23182,9 +23194,9 @@ const GeneralInput = class {
   render() {
     switch (this.type.toLowerCase()) {
       case 'text':
-        return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'email':
-        return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'number':
         return index.h("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
       case 'checkbox':
@@ -23192,7 +23204,7 @@ const GeneralInput = class {
       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 });
       case 'password':
-        return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language });
+        return index.h("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput });
       case 'radio':
         return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language });
       case 'tel':
@@ -23200,7 +23212,6 @@ const GeneralInput = class {
       case 'dropdown':
         return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language });
       default:
-        // Nothing here
         return index.h("p", null, "The ", this.type, " input type is not valid");
     }
   }
@@ -23236,238 +23247,54 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.registration{display:flex;flex-direction:column;gap:20px;width:100%;height:100%}.registration__form{display:grid;grid-template-columns:repeat(2, minmax(min-content, 1fr));column-gap:65px;row-gap:30px;justify-items:stretch;align-content:flex-start;overflow:scroll;width:100%;height:100%}.registration__buttons-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between}.registration__button{background-color:#e69200;border-radius:30px;text-transform:uppercase;padding:10px 50px;border:none;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.5)}.registration__button--disabled{background-color:grey}.registration__button--done{background-color:#176317}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\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__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: row-reverse;\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--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: column;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.data = {
-      "type": "default",
-      "content": {
-        "step": "step1",
-        "fields": [
-          {
-            "name": "firstName",
-            "displayName": "Username",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-            "autofill": false
-          },
-          {
-            "name": "lastName",
-            "displayName": "Last name",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20
-            },
-          },
-          {
-            "name": "telephone",
-            "displayName": "Telephone",
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true
-            },
-            "autofill": false,
-            "inputType": "tel"
-          },
-          {
-            "name": "dateOfBirth",
-            "displayName": "Date of Birth",
-            "defaultValue": null,
-            "validate": {
-              "min": "2022-05-01",
-              "max": "2022-05-29",
-              "mandatory": true,
-            },
-            "inputType": "datetime"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": 'a@a.com',
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                }
-              ]
-            },
-            "inputType": "email"
-          },
-          {
-            "name": "password",
-            "displayName": "Password",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "minLength": 3,
-              "maxLength": 20,
-              "type": "password",
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?=.*\\d+)(?=.*[A-Za-z]+).{8,20}",
-                  "errorMessage": "Password must contain at least 1 letter and 1 digit, and its minimal length is 8."
-                }
-              ]
-            },
-            "inputType": "password"
-          },
-          {
-            "name": "email",
-            "displayName": "Email",
-            "defaultValue": null,
-            "validate": {
-              "mandatory": true,
-              "type": "email",
-              "custom": [
-                {
-                  "rule": "unique-email",
-                  "errorMessage": "Please check your email"
-                },
-                {
-                  "rule": "regex",
-                  "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z-9.-]+\\.[a-zA-Z]{2,3}$",
-                  "errorMessage": "Please enter a valid email address"
-                },
-                {
-                  "rule": "duplicate-input",
-                  "displayName": "pt al doilea input gen: Confirm Email",
-                  "errorMessage": "Different Email! Pls."
-                }
-              ]
-            }
-          },
-          {
-            "name": "termsAndConditions",
-            "displayName": "Terms and Conditions",
-            "validate": {
-              "mandatory": true,
-              "type": "boolean"
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "pepCheck",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "checkbox"
-          },
-          {
-            "name": "gender",
-            "data": {
-              "values": [
-                {
-                  "label": "🍆",
-                  "value": "m"
-                },
-                {
-                  "label": "🍑",
-                  "value": "f"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "radio"
-          },
-          {
-            "name": "dateOfBirth",
-            "validate": {
-              "mandatory": true,
-              "custom": [
-                {
-                  "rule": "regex",
-                  "pattern": "(?:19\\d{2}|20[01][0-9]|2020)[-/.](?:0[1-9]|1[012])[-/.](?:0[1-9]|[12][0-9]|3[01])",
-                  "errorMessage": "Invalid date format"
-                },
-                {
-                  "rule": "min-18-years",
-                  "errorMessage": "Not old enough to ride the roller coaster"
-                }
-              ]
-            }
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "action": null,
-            "data": {
-              "values": [
-                {
-                  "label": "Budapest",
-                  "value": "Budapest"
-                },
-                {
-                  "label": "Debrecen",
-                  "value": "Debrecen"
-                },
-                {
-                  "label": "Miskolc",
-                  "value": "Miskolc"
-                },
-                {
-                  "label": "Szeged",
-                  "value": "Szeged"
-                },
-                {
-                  "label": "Zuglo",
-                  "value": "Zuglo"
-                }
-              ]
-            },
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          },
-          {
-            "name": "city",
-            "displayName": "Cities",
-            "data": null,
-            "action": "GET https://demo-api.stage.norway.everymatrix.com/v1/player/countries",
-            "validate": {
-              "mandatory": true
-            },
-            "inputType": "dropdown"
-          }
-        ],
-        "actions": [
-          "get-next-step",
-          "some-async-action-before-submitting",
-          "submit-step-data"
-        ]
-      }
-    };
+    this.registrationWidgetLoaded = index.createEvent(this, "registrationWidgetLoaded", 7);
+    this.registrationStepUpdated = index.createEvent(this, "registrationStepUpdated", 7);
     /**
     * Currently selected language
     */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrl = '';
     this.emitValue = false;
     this.listOfInputs = [];
     this.isLoading = true;
+    this.limitStylingAppends = false;
     this.listOfInputValues = [];
     this.listOfActions = [];
-    this.steps = [];
+    this.indexStep = 0;
     this.registrationStepsState = {
       regId: null
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      });
+    };
   }
-  logger() {
-    console.log(this.registrationStep);
+  sendStep() {
+    this.registrationStepUpdated.emit(this.registrationStep);
+    window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
   }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
@@ -23484,18 +23311,22 @@ const GeneralRegistration = class {
     this.stepsStateMachine({ event: 'set', type: 'values' });
   }
   componentWillLoad() {
-    // const mockCall = Promise.resolve(this.data);
-    // return mockCall.then((data) => {
-    //   this.listOfInputs = data.content.fields.map((field) => {
-    //     this.isLoading = false;
-    //     return { ...field, isValid: false };
-    //   });
-    // });
     return this.getRegisterConfig().then((config) => {
       this.formatConfig(config);
       this.stepsStateMachine({ event: 'set', type: 'inputs' });
     });
   }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      this.setClientStyling();
+      this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  componentDidLoad() {
+    this.registrationWidgetLoaded.emit();
+    window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
+  }
   nextHandler(e) {
     e.preventDefault();
     // Trigger events in subwidgets.
@@ -23504,8 +23335,8 @@ const GeneralRegistration = class {
   }
   backHandler(e) {
     e.preventDefault();
-    this.steps.pop();
-    this.registrationStep = this.steps.at(-1);
+    this.isLastStep = false;
+    this.registrationStep = this.stepChange('decrement');
     this.stepsStateMachine({ event: 'get', type: 'inputs' });
     this.stepsStateMachine({ event: 'get', type: 'values' });
   }
@@ -23514,10 +23345,11 @@ const GeneralRegistration = class {
       case 'set':
         if (state.type == 'inputs') {
           this.registrationStepsState[this.registrationStep].fields = this.listOfInputs;
+          this.registrationStepsState[this.registrationStep].actions = this.listOfActions;
         }
         if (state.type == 'values') {
           this.registrationStepsState[this.registrationStep].registerUserData = this.listOfInputValues.reduce((acc, curr) => {
-            acc[curr.name] = curr.value;
+            acc[curr.name] = { value: curr.value, isDuplicate: curr.isDuplicate };
             return acc;
           }, {});
         }
@@ -23529,17 +23361,19 @@ const GeneralRegistration = class {
           return;
         if (state.type == 'inputs') {
           this.listOfInputs = this.registrationStepsState[this.registrationStep].fields;
+          this.listOfActions = this.registrationStepsState[this.registrationStep].actions;
         }
         if (state.type == 'values') {
           const savedValues = savedUserData[this.registrationStep].registerUserData;
           this.listOfInputValues = Object.keys(savedValues).map(name => {
-            return { name, value: savedValues[name] };
+            return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
           });
           // Give to each field the user input as the default value.
           this.listOfInputValues.forEach(inputValue => {
             const input = this.listOfInputs.find(input => input.name === inputValue.name);
             if (input) {
               input.defaultValue = inputValue.value;
+              console.log(input);
             }
           });
         }
@@ -23577,7 +23411,9 @@ const GeneralRegistration = class {
     const url = new URL(`${this.endpoint}/v1/player/legislation/registration/step`);
     const registerStep = {
       registrationId: this.registrationID,
-      registerUserDto: this.listOfInputValues.reduce((acc, curr) => {
+      registerUserDto: this.listOfInputValues
+        .filter(input => !input.isDuplicate)
+        .reduce((acc, curr) => {
         // Special case for "Mobile" as it needs to be split in two values -- API expects it this way.
         if (curr.name == "Mobile") {
           acc['MobilePrefix'] = curr.value.split('|')[0];
@@ -23611,12 +23447,22 @@ const GeneralRegistration = class {
         this.setRegister();
       }
       else {
-        this.getRegisterConfig(this.registrationID).then((config) => {
-          // Format the new step config.
-          this.formatConfig(config);
-          // Set it in local storage
-          this.stepsStateMachine({ event: 'set', type: 'inputs' });
-        });
+        // After sending the current step, increment and check if the next one is in state.
+        this.registrationStep = this.stepChange('increment');
+        // If step is present in state do NOT fetch the next config.
+        if (Object.keys(this.registrationStepsState).find(key => key == this.registrationStep)) {
+          // Use the one from state
+          this.stepsStateMachine({ event: 'get', type: 'inputs' });
+          this.stepsStateMachine({ event: 'get', type: 'values' });
+        }
+        else {
+          this.getRegisterConfig(this.registrationID).then((config) => {
+            // Format the new step config.
+            this.formatConfig(config);
+            // Set it in local storage.
+            this.stepsStateMachine({ event: 'set', type: 'inputs' });
+          });
+        }
       }
     })
       .catch((err) => {
@@ -23658,52 +23504,69 @@ const GeneralRegistration = class {
   }
   formatConfig(config) {
     // Populate the list of inputs and set as invalid in the beginning
-    let newListOfInputs = config.content.fields.map((field) => {
-      return Object.assign(Object.assign({}, field), { isValid: false });
+    this.listOfInputs = config.content.fields.flatMap((field) => {
+      // Special case for inputs that need to be duplicated.
+      const duplicateInputRule = field.validate.custom.find(customRule => customRule.rule === 'duplicate-input');
+      const inputElement = Object.assign(Object.assign({}, field), { isValid: false });
+      if (duplicateInputRule) {
+        const duplicateInput = Object.assign(Object.assign({}, field), { name: `${field.name}Duplicate`, displayName: duplicateInputRule.displayName, isValid: false, isDuplicateInput: true });
+        return [inputElement, duplicateInput];
+      }
+      else {
+        return [inputElement];
+      }
     });
-    this.listOfInputs = JSON.parse(JSON.stringify(newListOfInputs));
     // Populate the list of inputs values and set as null in the beginning
-    this.listOfInputValues = config.content.fields.map(field => {
-      return { name: field.name, value: null };
+    this.listOfInputValues = this.listOfInputs.map(field => {
+      return { name: field.name, value: null, isDuplicate: field.isDuplicateInput || false };
     });
     // Set the list of actions
     this.listOfActions = config.content.actions.map(action => action);
     this.isLastStep = this.listOfActions.some(action => action == '/register');
     this.registrationID = config.content.registrationID;
     this.registrationStep = config.content.step;
-    this.steps.push(this.registrationStep);
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
       this.registrationStepsState[this.registrationStep] = {
         fields: [],
-        registerUserData: {}
+        registerUserData: {},
+        actions: []
       };
     }
   }
+  stepChange(action) {
+    const stepNum = parseInt(this.registrationStep.replace('Step', ''));
+    if (action === 'increment') {
+      return 'Step' + (stepNum + 1);
+    }
+    if (action === 'decrement') {
+      return 'Step' + (stepNum - 1);
+    }
+  }
   getInvalidStatus(listOfInputs) {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.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.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language })));
+    return (this.listOfInputs.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.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput })));
   }
   ;
   renderButtons() {
-    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: `registration__button ${this.isLastStep ? 'registration__button--done' : ''}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), this.registrationStep !== 'Step1' && index.h("button", { class: 'registration__button', onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
+    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: `registration__button registration__button--next`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e) }, this.isLastStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), index.h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
   }
   render() {
     if (this.isLoading) {
       return index.h("p", null, "Please wait, loading ...");
     }
-    return (index.h("div", { class: 'registration' }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
+    return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
   }
   static get watchers() { return {
-    "registrationStep": ["logger"]
+    "registrationStep": ["sendStep"]
   }; }
 };
 GeneralRegistration.style = generalRegistrationCss;
 
-const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.number__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.number__label--required::after{content:\"*\";margin-left:5px;color:#666666}.number__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;-moz-appearance:textfield;}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.number__input::placeholder{color:#666666}.number__input--invalid{border-bottom:3px solid #cc0000}.number__input:placeholder-shown+.number__label{opacity:0;visibility:hidden;transform:translateY(0)}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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%;padding-top:26px}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
 
 const NumberInput = class {
   constructor(hostRef) {
@@ -23763,176 +23626,985 @@ const NumberInput = class {
 };
 NumberInput.style = numberInputCss;
 
-const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.password__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.password__label--required::after{content:\"*\";margin-left:5px;color:#666666}.password__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.password__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.password__input::placeholder{color:#666666}.password__input--invalid{border-bottom:3px solid #cc0000}.password__input:placeholder-shown+.password__label{opacity:0;visibility:hidden;transform:translateY(0)}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
-
-const PasswordInput = 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 = '';
-    this.value = '';
-    this.validationPattern = '';
-  }
-  validityChanged() {
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    if (this.emitValue == true) {
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
-  emitValueHandler(newValue) {
-    if (newValue == true && this.isValid) {
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  valueHandler(inputValueEvent) {
-    this.sendInputValue.emit(inputValueEvent);
-  }
-  connectedCallback() {
-    this.validationPattern = this.setPattern();
-  }
-  componentDidLoad() {
-    if (this.defaultValue) {
-      this.value = this.defaultValue;
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  handleInput(event) {
-    this.value = event.target.value;
-    this.errorMessage = this.setErrorMessage();
-    this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    this.emitValueHandler(true);
-  }
-  setValidity() {
-    return this.inputReference.validity.valid;
-  }
-  setPattern() {
-    var _a, _b;
-    if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
-    }
-  }
-  setErrorMessage() {
-    var _a;
-    if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.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 } });
-    }
-    if (this.inputReference.validity.valueMissing) {
-      return translate$2('requiredError', this.language);
-    }
-  }
-  render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return index.h("div", { class: 'password__wrapper' }, index.h("input", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, ref: (el) => this.inputReference = el, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'password__error-message' }, this.errorMessage));
-  }
-  static get watchers() { return {
-    "isValid": ["validityChanged"],
-    "emitValue": ["emitValueHandler"]
-  }; }
-};
-PasswordInput.style = passwordInputCss;
-
-const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:red}";
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-const RadioInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
-    this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
-  }
-  validityChanged() {
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    if (this.emitValue == true) {
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  emitValueHandler(newValue) {
-    if (newValue == true && this.isValid) {
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  valueHandler(inputValueEvent) {
-    this.sendInputValue.emit(inputValueEvent);
-  }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
-  connectedCallback() {
-  }
-  handleClick(event) {
-    this.value = event.target.value;
-    this.isValid = this.setValidity();
-    this.errorMessage = this.setErrorMessage();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    this.emitValueHandler(true);
-  }
-  setValidity() {
-    return this.inputReference.validity.valid;
-  }
-  setErrorMessage() {
-    if (this.inputReference.validity.valueMissing) {
-      return translate$2('requiredError', this.language);
-    }
-  }
-  render() {
-    return index.h("fieldset", { class: 'radio__fieldset' }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
-  }
-  static get watchers() { return {
-    "isValid": ["validityChanged"],
-    "emitValue": ["emitValueHandler"]
-  }; }
-};
-RadioInput.style = radioInputCss;
+registerStyles('vaadin-text-field', inputFieldShared$1, {
+  moduleId: 'lumo-text-field-styles',
+});
 
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const loader = i$1`
-  [part~='loader'] {
-    box-sizing: border-box;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
-    border: 2px solid transparent;
-    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
-      var(--lumo-primary-color);
-    border-radius: calc(0.5 * var(--lumo-icon-size-s));
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host(:not([loading])) [part~='loader'] {
-    display: none;
-  }
+/**
+ * A mixin to provide logic for vaadin-text-field and related components.
+ *
+ * @polymerMixin
+ * @mixes InputControlMixin
+ */
+const InputFieldMixin = (superclass) =>
+  class InputFieldMixinClass extends InputControlMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * Whether the value of the control can be automatically completed by the browser.
+         * List of available options at:
+         * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete
+         */
+        autocomplete: {
+          type: String,
+        },
 
-  :host([loading]) [part~='loader'] {
-    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
-  }
+        /**
+         * This is a property supported by Safari that is used to control whether
+         * autocorrection should be enabled when the user is entering/editing the text.
+         * Possible values are:
+         * on: Enable autocorrection.
+         * off: Disable autocorrection.
+         */
+        autocorrect: {
+          type: String,
+        },
 
-  @keyframes lumo-loader-fade-in {
-    0% {
-      opacity: 0;
+        /**
+         * This is a property supported by Safari and Chrome that is used to control whether
+         * autocapitalization should be enabled when the user is entering/editing the text.
+         * Possible values are:
+         * characters: Characters capitalization.
+         * words: Words capitalization.
+         * sentences: Sentences capitalization.
+         * none: No capitalization.
+         */
+        autocapitalize: {
+          type: String,
+          reflectToAttribute: true,
+        },
+      };
     }
 
-    100% {
-      opacity: 1;
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
-  }
 
-  @keyframes lumo-loader-rotate {
-    0% {
+    /**
+     * @param {HTMLElement} input
+     * @protected
+     * @override
+     */
+    _inputElementChanged(input) {
+      super._inputElementChanged(input);
+
+      if (input) {
+        // Discard value set on the custom slotted input.
+        if (input.value && input.value !== this.value) {
+          console.warn(`Please define value on the <${this.localName}> component!`);
+          input.value = '';
+        }
+
+        if (this.value) {
+          input.value = this.value;
+        }
+      }
+    }
+
+    // Workaround for https://github.com/Polymer/polymer/issues/5259
+    get __data() {
+      return this.__dataValue || {};
+    }
+
+    set __data(value) {
+      this.__dataValue = value;
+    }
+
+    /**
+     * Override an event listener from `FocusMixin`.
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      if (!focused) {
+        this.validate();
+      }
+    }
+
+    /**
+     * Override an event listener from `InputMixin`
+     * to mark as valid after user started typing.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      super._onInput(event);
+
+      if (this.invalid) {
+        this.validate();
+      }
+    }
+
+    /**
+     * Override an observer from `InputMixin` to validate the field
+     * when a new value is set programmatically.
+     *
+     * @param {string | undefined} newValue
+     * @param {string | undefined} oldValue
+     * @protected
+     * @override
+     */
+    _valueChanged(newValue, oldValue) {
+      super._valueChanged(newValue, oldValue);
+
+      if (oldValue === undefined) {
+        return;
+      }
+
+      if (this.invalid) {
+        this.validate();
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ *
+ * @polymerMixin
+ * @mixes InputConstraintsMixin
+ */
+const PatternMixin = (superclass) =>
+  class PatternMixinClass extends InputConstraintsMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+
+        /**
+         * When set to true, user is prevented from typing a value that
+         * conflicts with the given `pattern`.
+         * @attr {boolean} prevent-invalid-input
+         * @deprecated Please use `allowedCharPattern` instead.
+         */
+        preventInvalidInput: {
+          type: Boolean,
+          observer: '_preventInvalidInputChanged',
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'pattern'];
+    }
+
+    /** @private */
+    _checkInputValue() {
+      if (this.preventInvalidInput) {
+        const input = this.inputElement;
+        if (input && input.value.length > 0 && !this.checkValidity()) {
+          input.value = this.value || '';
+          // Add input-prevented attribute for 200ms
+          this.setAttribute('input-prevented', '');
+          this._inputDebouncer = Debouncer$1.debounce(this._inputDebouncer, timeOut.after(200), () => {
+            this.removeAttribute('input-prevented');
+          });
+        }
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      this._checkInputValue();
+
+      super._onInput(event);
+    }
+
+    /** @private */
+    _preventInvalidInputChanged(preventInvalidInput) {
+      if (preventInvalidInput) {
+        console.warn(
+          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
+        );
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+registerStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-field-styles' });
+
+/**
+ * `<vaadin-text-field>` is a web component that allows the user to input and edit text.
+ *
+ * ```html
+ * <vaadin-text-field label="First Name"></vaadin-text-field>
+ * ```
+ *
+ * ### Prefixes and suffixes
+ *
+ * These are child elements of a `<vaadin-text-field>` that are displayed
+ * inline with the input, before or after.
+ * In order for an element to be considered as a prefix, it must have the slot
+ * attribute set to `prefix` (and similarly for `suffix`).
+ *
+ * ```html
+ * <vaadin-text-field label="Email address">
+ *   <div slot="prefix">Sent to:</div>
+ *   <div slot="suffix">@vaadin.com</div>
+ * </vaadin-text-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                | Description                | Default
+ * -------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and suffix
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute           | Description | Part name
+ * --------------------|-------------|------------
+ * `disabled`          | Set to a disabled text field | :host
+ * `has-value`         | Set when the element has a value | :host
+ * `has-label`         | Set when the element has a label | :host
+ * `has-helper`        | Set when the element has helper text or slot | :host
+ * `has-error-message` | Set when the element has an error message | :host
+ * `invalid`           | Set when the element is invalid | :host
+ * `input-prevented`   | Temporarily set when invalid input is prevented | :host
+ * `focused`           | Set when the element is focused | :host
+ * `focus-ring`        | Set when the element is keyboard focused | :host
+ * `readonly`          | Set to a readonly text field | :host
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
+ *
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ * @mixes PatternMixin
+ * @mixes InputFieldMixin
+ */
+class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-text-field';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        [part='input-field'] {
+          flex-grow: 0;
+        }
+      </style>
+
+      <div class="vaadin-field-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          readonly="[[readonly]]"
+          disabled="[[disabled]]"
+          invalid="[[invalid]]"
+          theme$="[[_theme]]"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <slot name="suffix" slot="suffix"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Maximum number of characters (in Unicode code points) that the user can enter.
+       */
+      maxlength: {
+        type: Number,
+      },
+
+      /**
+       * Minimum number of characters (in Unicode code points) that the user can enter.
+       */
+      minlength: {
+        type: Number,
+      },
+    };
+  }
+
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'maxlength', 'minlength'];
+  }
+
+  static get constraints() {
+    return [...super.constraints, 'maxlength', 'minlength'];
+  }
+
+  constructor() {
+    super();
+    this._setType('text');
+  }
+
+  /** @protected */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+    this._tooltipController = new TooltipController(this);
+    this._tooltipController.setPosition('top');
+    this.addController(this._tooltipController);
+  }
+}
+
+customElements.define(TextField.is, TextField);
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const passwordFieldButton = i$1`
+  :host {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    min-width: auto;
+    background: transparent;
+    outline: none;
+  }
+`;
+
+registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
+  moduleId: 'lumo-password-field-button',
+});
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const passwordField = i$1`
+  [part='reveal-button']::before {
+    content: var(--lumo-icons-eye);
+  }
+
+  :host([password-visible]) [part='reveal-button']::before {
+    content: var(--lumo-icons-eye-disabled);
+  }
+
+  /* Make it easy to hide the button across the whole app */
+  [part='reveal-button'] {
+    position: relative;
+    display: var(--lumo-password-field-reveal-button-display, block);
+  }
+
+  [part='reveal-button'][hidden] {
+    display: none !important;
+  }
+`;
+
+registerStyles('vaadin-password-field', [inputFieldShared$1, passwordField], { moduleId: 'lumo-password-field' });
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
+ *
+ * @extends Button
+ * @private
+ */
+class PasswordFieldButton extends Button {
+  static get is() {
+    return 'vaadin-password-field-button';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <slot name="tooltip"></slot>
+    `;
+  }
+}
+
+customElements.define(PasswordFieldButton.is, PasswordFieldButton);
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const ownTemplate = html`
+  <div part="reveal-button" slot="suffix">
+    <slot name="reveal"></slot>
+  </div>
+`;
+
+let memoizedTemplate$1;
+
+/**
+ * `<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.
+ *
+ * ```html
+ * <vaadin-password-field label="Password"></vaadin-password-field>
+ * ```
+ *
+ * ### Styling
+ *
+ * `<vaadin-password-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ *
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ *
+ * Part name       | Description
+ * ----------------|----------------------------------------------------
+ * `reveal-button` | The eye icon which toggles the password visibility
+ *
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
+ *
+ * Attribute          | Description
+ * -------------------|---------------------------------
+ * `password-visible` | Set when the password is visible
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
+ *
+ * @extends TextField
+ */
+class PasswordField extends TextField {
+  static get is() {
+    return 'vaadin-password-field';
+  }
+
+  static get template() {
+    if (!memoizedTemplate$1) {
+      // Clone the superclass template
+      memoizedTemplate$1 = super.template.cloneNode(true);
+
+      // Retrieve this element's dom-module template
+      const revealButton = ownTemplate.content.querySelector('[part="reveal-button"]');
+
+      // Append reveal-button and styles to the text-field template
+      const inputField = memoizedTemplate$1.content.querySelector('[part="input-field"]');
+      inputField.appendChild(revealButton);
+    }
+
+    return memoizedTemplate$1;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Set to true to hide the eye icon which toggles the password visibility.
+       * @attr {boolean} reveal-button-hidden
+       */
+      revealButtonHidden: {
+        type: Boolean,
+        observer: '_revealButtonHiddenChanged',
+        value: false,
+      },
+
+      /**
+       * True if the password is visible ([type=text]).
+       * @attr {boolean} password-visible
+       */
+      passwordVisible: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_passwordVisibleChanged',
+        readOnly: true,
+      },
+
+      /**
+       * An object with translated strings used for localization.
+       * It has the following structure and default values:
+       *
+       * ```
+       * {
+       *   // Translation of the reveal icon button accessible label
+       *   reveal: 'Show password'
+       * }
+       * ```
+       */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            reveal: 'Show password',
+          };
+        },
+      },
+    };
+  }
+
+  static get observers() {
+    return ['__i18nChanged(i18n.*)'];
+  }
+
+  /** @protected */
+  get slotStyles() {
+    const tag = this.localName;
+    return [
+      ...super.slotStyles,
+      `
+        ${tag} [slot="input"]::-ms-reveal {
+          display: none;
+        }
+      `,
+    ];
+  }
+
+  /** @protected */
+  get _revealNode() {
+    return this._revealButtonController && this._revealButtonController.node;
+  }
+
+  constructor() {
+    super();
+    this._setType('password');
+    this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
+    this.__boundRevealButtonTouchend = this._onRevealButtonTouchend.bind(this);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
+
+    this._revealButtonController = new SlotController(
+      this,
+      'reveal',
+      () => document.createElement('vaadin-password-field-button'),
+      (host, btn) => {
+        btn.disabled = host.disabled;
+
+        btn.addEventListener('click', host.__boundRevealButtonClick);
+        btn.addEventListener('touchend', host.__boundRevealButtonTouchend);
+      },
+    );
+    this.addController(this._revealButtonController);
+
+    this.__updateAriaLabel(this.i18n);
+
+    this._updateToggleState(false);
+    this._toggleRevealHidden(this.revealButtonHidden);
+
+    if (this.inputElement) {
+      this.inputElement.autocapitalize = 'off';
+    }
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to mark field as focused
+   * when focus moves to the reveal button using Shift Tab.
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetFocus(event) {
+    return event.target === this.inputElement || event.target === this._revealNode;
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to not hide password
+   * when focus moves to the reveal button or back to the input.
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   */
+  _shouldRemoveFocus(event) {
+    return !(
+      event.relatedTarget === this._revealNode ||
+      (event.relatedTarget === this.inputElement && event.target === this._revealNode)
+    );
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to toggle password visibility.
+   * @param {boolean} focused
+   * @protected
+   * @override
+   */
+  _setFocused(focused) {
+    super._setFocused(focused);
+
+    if (!focused) {
+      this._setPasswordVisible(false);
+    } else {
+      const isButtonFocused = this.getRootNode().activeElement === this._revealNode;
+      // Remove focus-ring from the field when the reveal button gets focused
+      this.toggleAttribute('focus-ring', this._keyboardActive && !isButtonFocused);
+    }
+  }
+
+  /** @private */
+  __updateAriaLabel(i18n) {
+    if (i18n.reveal && this._revealNode) {
+      this._revealNode.setAttribute('aria-label', i18n.reveal);
+    }
+  }
+
+  /** @private */
+  __i18nChanged(i18n) {
+    this.__updateAriaLabel(i18n.base);
+  }
+
+  /** @private */
+  _revealButtonHiddenChanged(hidden) {
+    this._toggleRevealHidden(hidden);
+  }
+
+  /** @private */
+  _togglePasswordVisibility() {
+    this._setPasswordVisible(!this.passwordVisible);
+  }
+
+  /** @private */
+  _onRevealButtonClick() {
+    this._togglePasswordVisibility();
+  }
+
+  /** @private */
+  _onRevealButtonTouchend(e) {
+    // Cancel the following click 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();
+  }
+
+  /** @private */
+  _toggleRevealHidden(hidden) {
+    if (this._revealNode) {
+      if (hidden) {
+        this._revealPart.setAttribute('hidden', '');
+        this._revealNode.setAttribute('tabindex', '-1');
+        this._revealNode.setAttribute('aria-hidden', 'true');
+      } else {
+        this._revealPart.removeAttribute('hidden');
+        this._revealNode.setAttribute('tabindex', '0');
+        this._revealNode.removeAttribute('aria-hidden');
+      }
+    }
+  }
+
+  /** @private */
+  _updateToggleState(passwordVisible) {
+    if (this._revealNode) {
+      this._revealNode.setAttribute('aria-pressed', passwordVisible ? 'true' : 'false');
+    }
+  }
+
+  /** @private */
+  _passwordVisibleChanged(passwordVisible) {
+    this._setType(passwordVisible ? 'text' : 'password');
+
+    this._updateToggleState(passwordVisible);
+  }
+
+  /**
+   * Override method inherited from `DisabledMixin` to synchronize the reveal button
+   * disabled state with the password field disabled state.
+   * @param {boolean} disabled
+   * @param {boolean} oldDisabled
+   * @protected
+   */
+  _disabledChanged(disabled, oldDisabled) {
+    super._disabledChanged(disabled, oldDisabled);
+
+    if (this._revealNode) {
+      this._revealNode.disabled = disabled;
+    }
+  }
+}
+
+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%;padding-top:26px}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.password__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.password__input{width:inherit;border:none}.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{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+
+const PasswordInput = 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 = '';
+    this.value = '';
+    this.validationPattern = '';
+  }
+  validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    if (this.emitValue == true) {
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
+  emitValueHandler(newValue) {
+    if (newValue == true && this.isValid) {
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
+  valueHandler(inputValueEvent) {
+    this.sendInputValue.emit(inputValueEvent);
+  }
+  valueChangedHandler(event) {
+    if (this.isDuplicateInput) {
+      if (this.name === event.detail.name + 'Duplicate') {
+        this.duplicateInputValue = event.detail.value;
+      }
+    }
+  }
+  connectedCallback() {
+    this.validationPattern = this.setPattern();
+  }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
+  handleInput(event) {
+    this.value = event.target.value;
+    this.errorMessage = this.setErrorMessage();
+    this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
+  }
+  setValidity() {
+    return this.inputReference.validity.valid;
+  }
+  setPattern() {
+    var _a, _b;
+    if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
+    }
+  }
+  setErrorMessage() {
+    var _a;
+    if (this.inputReference.validity.patternMismatch) {
+      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.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 } });
+    }
+    if (this.inputReference.validity.valueMissing) {
+      return translate$2('requiredError', this.language);
+    }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+    }
+  }
+  render() {
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
+    return index.h("div", { class: 'password__wrapper' }, index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
+      // ref={(el) => this.inputReference = el as HTMLInputElement}
+      required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'password__error-message' }, this.errorMessage));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "isValid": ["validityChanged"],
+    "emitValue": ["emitValueHandler"]
+  }; }
+};
+PasswordInput.style = passwordInputCss;
+
+const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+
+const RadioInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
+    this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
+  }
+  validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    if (this.emitValue == true) {
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
+  emitValueHandler(newValue) {
+    if (newValue == true && this.isValid) {
+      this.valueHandler({ name: this.name, value: this.value });
+    }
+  }
+  valueHandler(inputValueEvent) {
+    this.sendInputValue.emit(inputValueEvent);
+  }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
+  connectedCallback() {
+  }
+  handleClick(event) {
+    this.value = event.target.value;
+    this.isValid = this.setValidity();
+    this.errorMessage = this.setErrorMessage();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
+  }
+  setValidity() {
+    return this.inputReference.validity.valid;
+  }
+  setErrorMessage() {
+    if (this.inputReference.validity.valueMissing) {
+      return translate$2('requiredError', this.language);
+    }
+  }
+  render() {
+    return index.h("fieldset", { class: 'radio__fieldset' }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
+  }
+  static get watchers() { return {
+    "isValid": ["validityChanged"],
+    "emitValue": ["emitValueHandler"]
+  }; }
+};
+RadioInput.style = radioInputCss;
+
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const loader = i$1`
+  [part~='loader'] {
+    box-sizing: border-box;
+    width: var(--lumo-icon-size-s);
+    height: var(--lumo-icon-size-s);
+    border: 2px solid transparent;
+    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
+      var(--lumo-primary-color);
+    border-radius: calc(0.5 * var(--lumo-icon-size-s));
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host(:not([loading])) [part~='loader'] {
+    display: none;
+  }
+
+  :host([loading]) [part~='loader'] {
+    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
+  }
+
+  @keyframes lumo-loader-fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes lumo-loader-rotate {
+    0% {
       transform: rotate(0deg);
     }
 
@@ -26250,87 +26922,6 @@ class ComboBoxScroller extends PolymerElement {
 
 customElements.define(ComboBoxScroller.is, ComboBoxScroller);
 
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to provide `pattern` and `preventInvalidInput` properties.
- *
- * @polymerMixin
- * @mixes InputConstraintsMixin
- */
-const PatternMixin = (superclass) =>
-  class PatternMixinClass extends InputConstraintsMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * A regular expression that the value is checked against.
-         * The pattern must match the entire value, not just some subset.
-         */
-        pattern: {
-          type: String,
-        },
-
-        /**
-         * When set to true, user is prevented from typing a value that
-         * conflicts with the given `pattern`.
-         * @attr {boolean} prevent-invalid-input
-         * @deprecated Please use `allowedCharPattern` instead.
-         */
-        preventInvalidInput: {
-          type: Boolean,
-          observer: '_preventInvalidInputChanged',
-        },
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'pattern'];
-    }
-
-    static get constraints() {
-      return [...super.constraints, 'pattern'];
-    }
-
-    /** @private */
-    _checkInputValue() {
-      if (this.preventInvalidInput) {
-        const input = this.inputElement;
-        if (input && input.value.length > 0 && !this.checkValidity()) {
-          input.value = this.value || '';
-          // Add input-prevented attribute for 200ms
-          this.setAttribute('input-prevented', '');
-          this._inputDebouncer = Debouncer$1.debounce(this._inputDebouncer, timeOut.after(200), () => {
-            this.removeAttribute('input-prevented');
-          });
-        }
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     * @override
-     */
-    _onInput(event) {
-      this._checkInputValue();
-
-      super._onInput(event);
-    }
-
-    /** @private */
-    _preventInvalidInputChanged(preventInvalidInput) {
-      if (preventInvalidInput) {
-        console.warn(
-          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
-        );
-      }
-    }
-  };
-
 /**
  * @license
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
@@ -28316,7 +28907,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
 customElements.define(ComboBox.is, ComboBox);
 
-const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select__wrapper{position:relative;display:flex;padding-top:10px;width:100%}.select__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.select__label--hidden{opacity:0;visibility:hidden;transform:translateY(0)}.select__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.select__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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%;padding-top:26px}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
 
 const SelectInput = class {
   constructor(hostRef) {
@@ -28390,7 +28981,6 @@ const SelectInput = class {
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
-    this.inputReference.previousElementSibling.classList.remove('select__label--hidden');
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -28401,7 +28991,8 @@ const SelectInput = class {
     }
   }
   render() {
-    return index.h("div", { class: 'select__wrapper' }, index.h("label", { class: 'select__label select__label--hidden', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: 'select__input', "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
+    return index.h("div", { class: 'select__wrapper' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), 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.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -28411,7 +29002,7 @@ const SelectInput = class {
 };
 SelectInput.style = selectInputCss;
 
-const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px;border-bottom:3px solid #666666}.tel__wrapper--flex{display:flex}.tel__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.tel__label--required::after{content:\"*\";margin-left:5px;color:#666666}.tel vaadin-combo-box{flex-grow:1}.tel__input{width:inherit;padding:15px 6px;position:relative;border:none;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;flex-grow:3;-moz-appearance:textfield;}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.tel__input::placeholder{color:#666666}.tel__input--invalid .tel__wrapper{border-bottom:3px solid #cc0000}.tel__input:placeholder-shown+.tel__label{opacity:0;visibility:hidden;transform:translateY(0)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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%;padding-top:26px}.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__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
 
 const TelInput = class {
   constructor(hostRef) {
@@ -28439,6 +29030,10 @@ const TelInput = class {
   }
   connectedCallback() {
     this.validationPattern = this.setPattern();
+    if (this.defaultValue) {
+      this.prefixValue = this.defaultValue.split('|')[0];
+      this.phoneValue = this.defaultValue.split('|')[1];
+    }
   }
   componentWillLoad() {
     if (this.action) {
@@ -28453,8 +29048,8 @@ const TelInput = class {
   }
   componentDidLoad() {
     if (this.defaultValue) {
-      this.prefixValue = this.defaultValue;
-      this.valueHandler({ name: this.name, value: `${this.prefixValue}|` });
+      this.value = `${this.prefixValue}|${this.phoneValue}`;
+      this.valueHandler({ name: this.name, value: this.value });
     }
   }
   getPhoneCodes() {
@@ -28472,8 +29067,8 @@ const TelInput = class {
     });
   }
   handleInput(event) {
-    // Kinda hack? Open to suggestions.
-    this.value = `${this.prefixValue}|${event.target.value}`;
+    this.phoneValue = event.target.value;
+    this.value = `${this.prefixValue}|${this.phoneValue}`;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -28501,8 +29096,8 @@ const TelInput = class {
     }
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__input--invalid';
-    return index.h("div", { class: 'tel__wrapper' }, index.h("div", { class: 'tel__wrapper--flex' }, index.h("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
+    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
+    return index.h("div", { class: 'tel__wrapper' }, 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, onBlur: (e) => this.prefixValue = e.target.value }), 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.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -28511,7 +29106,7 @@ const TelInput = class {
 };
 TelInput.style = telInputCss;
 
-const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.text__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.text__label--required::after{content:\"*\";margin-left:5px;color:#666666}.text__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.text__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.text__input::placeholder{color:#666666}.text__input--invalid{border-bottom:3px solid #cc0000}.text__input:placeholder-shown+.text__label{opacity:0;visibility:hidden;transform:translateY(0)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+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%;padding-top:26px}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
 
 const TextInput = class {
   constructor(hostRef) {
@@ -28532,17 +29127,24 @@ const TextInput = class {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
+  validityStateHandler(inputStateEvent) {
+    this.sendValidityState.emit(inputStateEvent);
+  }
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  valueChangedHandler(event) {
+    if (this.isDuplicateInput) {
+      if (this.name === event.detail.name + 'Duplicate') {
+        this.duplicateInputValue = event.detail.value;
+      }
+    }
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
@@ -28562,13 +29164,6 @@ const TextInput = class {
   setValidity() {
     return this.inputReference.validity.valid;
   }
-  // @TODO type here
-  setCustomRules() {
-    var _a;
-    if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      return this.validation.custom.filter(customValidation => customValidation.rule !== 'regex');
-    }
-  }
   setPattern() {
     var _a, _b;
     if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -28586,10 +29181,13 @@ const TextInput = class {
     if (this.inputReference.validity.valueMissing) {
       return translate$2('requiredError', this.language);
     }
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+    }
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    return index.h("div", { class: 'text__wrapper' }, index.h("input", { id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'text__error-message' }, this.errorMessage));
+    return index.h("div", { class: 'text__wrapper' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],