@everymatrix/general-registration 1.10.20 → 1.10.22

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

@@ -14716,7 +14716,6 @@ const CheckboxGroupInput = class {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.selectedValues = [];
-    this.value = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -14724,12 +14723,16 @@ const CheckboxGroupInput = class {
     };
   }
   validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value, type: 'checkboxgroup' });
     }
   }
   setValue() {
-    this.value = this.selectedValues.join('|');
+    this.value = this.options.reduce((acc, option) => {
+      acc[option.name] = this.selectedValues.includes(option.name);
+      return acc;
+    }, {});
     this.emitValueHandler(true);
   }
   validityStateHandler(inputStateEvent) {
@@ -14763,9 +14766,10 @@ const CheckboxGroupInput = class {
     // For now this input has no validation. Send isValid as true immediately.
     //@TODO: add validation logic to it, if business reason arises.
     this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.defaultValue) {
       this.selectedValues = this.options.map((checkbox) => checkbox.name);
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
     }
   }
   setValidity() {
@@ -14789,7 +14793,7 @@ const CheckboxGroupInput = class {
       : [];
   }
   render() {
-    return index.h("div", { class: 'checkboxgroup__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
+    return index.h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.h("vaadin-checkbox", { label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
       index.h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), index.h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
         this.selectedValues = event.detail.value;
       } }, this.options.map((checkbox) => index.h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
@@ -14828,6 +14832,7 @@ const CheckboxInput = class {
     };
   }
   validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -14857,6 +14862,8 @@ const CheckboxInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -14866,7 +14873,6 @@ const CheckboxInput = class {
     this.value = this.inputReference.checked.toString();
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
   }
   setValidity() {
@@ -14887,7 +14893,7 @@ const CheckboxInput = class {
     return null;
   }
   render() {
-    return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
+    return index.h("div", { class: `checkbox__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
       index.h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
   }
   static get watchers() { return {
@@ -29225,6 +29231,7 @@ const DateInput = class {
     this.clientStyling = '';
     this.limitStylingAppends = false;
     this.showTooltip = false;
+    this.touched = false;
     this.formatDate = (dateParts) => {
       const { year, month, day } = dateParts;
       const date = new Date(year, month, day);
@@ -29234,6 +29241,11 @@ const DateInput = class {
       const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
       return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
     };
+    this.handleBlur = () => {
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+      this.touched = true;
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -29271,21 +29283,22 @@ const DateInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
-    if (this.defaultValue) {
-      this.value = this.defaultValue;
-      this.valueHandler({ name: this.name, value: this.value });
-    }
   }
   componentDidLoad() {
     this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
     this.inputReference = this.element.shadowRoot.querySelector('input');
     this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
+    this.isValid = this.setValidity();
+    if (this.defaultValue) {
+      this.value = this.defaultValue;
+      this.valueHandler({ name: this.name, value: this.value });
+    }
   }
   handleInput(event) {
     this.value = event.target.value;
+    this.touched = true;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
   }
   setValidity() {
@@ -29306,8 +29319,11 @@ const DateInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
-    return index.h("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `date__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
       index.h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   get element() { return index.getElement(this); }
@@ -29332,6 +29348,24 @@ const EmailInput = class {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.validationPattern = '';
+    this.touched = false;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.touched = true;
+      if (this.debounceTime) {
+        clearTimeout(this.debounceTime);
+      }
+      this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
+        this.emitValueHandler(true);
+      }, 500);
+    };
+    this.handleBlur = () => {
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+      this.touched = true;
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -29379,18 +29413,14 @@ const EmailInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.isValid = this.setValidity();
     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;
   }
@@ -29422,9 +29452,12 @@ const EmailInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
-    return index.h("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && 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("small", { class: 'email__error-message' }, this.errorMessage));
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `email__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -29529,7 +29562,7 @@ const translate = (key, customLang, values) => {
   return translation;
 };
 
-const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
+const generalRegistrationCss = "*,\n*::before,\n*::after {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.registration__form.hidden {\n  display: none;\n}\n\n.registration {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-family: sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  width: 100%;\n  height: 100%;\n  container-type: inline-size;\n}\n.registration__error-message {\n  color: #cc0000b3;\n}\n.registration__form {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 40px;\n  justify-items: stretch;\n  align-content: flex-start;\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\n.registration__buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: center;\n}\n.registration__button {\n  text-transform: uppercase;\n  width: 250px;\n  height: 40px;\n  border-radius: 3px;\n}\n.registration__button:hover {\n  opacity: 0.8;\n}\n.registration__button:active {\n  opacity: 1;\n}\n.registration__button--next {\n  color: #FFFFFF;\n  background-color: #B0B0B0;\n  border: none;\n}\n.registration__button--back {\n  color: #B0B0B0;\n  background-color: #FFFFFF;\n  border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n  opacity: 0.5;\n}\n.registration__button--disabled:hover {\n  opacity: 0.5;\n}\n.registration__button--first-step {\n  display: none;\n}\n\n@container (min-width: 450px) {\n  .registration__form {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .registration__buttons-wrapper {\n    flex-direction: row-reverse;\n    gap: 15px;\n  }\n}";
 
 const GeneralRegistration = class {
   constructor(hostRef) {
@@ -29552,12 +29585,14 @@ const GeneralRegistration = class {
      * Translations via URL
      */
     this.translationUrl = '';
-    this.listOfInputs = [];
     this.isLoading = true;
+    this.forms = [];
     this.listOfInputValues = [];
     this.listOfInputValidity = [];
     this.listOfActions = [];
+    this.listOfInputs = [];
     this.emitValue = false;
+    this.backButtonPressed = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -29584,7 +29619,9 @@ const GeneralRegistration = class {
   }
   setFormValidity() {
     this.errorMessage = '';
-    this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+    if (this.listOfInputValidity) {
+      this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
+    }
   }
   checkInputsValidityHandler(event) {
     // Set isValid state of the input in the list.
@@ -29649,7 +29686,6 @@ const GeneralRegistration = class {
   }
   backHandler(e) {
     e.preventDefault();
-    this.isLastStep = false;
     this.registrationStep = this.stepChange('decrement');
     this.stepsStateMachine({ event: 'get', type: 'inputs' });
     this.stepsStateMachine({ event: 'get', type: 'values' });
@@ -29732,16 +29768,17 @@ const GeneralRegistration = class {
         .filter(input => !input.isDuplicate)
         .reduce((acc, curr) => {
         // Because the API is very robust, some values need to be split as separate entities.  
-        if (curr.name == 'Mobile') {
-          acc['MobilePrefix'] = curr.value.split('|')[0];
-          acc[curr.name] = curr.value.split('|')[1];
+        if (curr.type === 'tel') {
+          //@ts-ignore
+          acc['MobilePrefix'] = curr.value.prefix;
+          //@ts-ignore
+          acc[curr.name] = curr.value.phone;
         }
         else if (curr.type === 'checkboxgroup') {
           // Skip adding the parent of the checkboxgroup as a key. 
-          if (curr.value !== null && curr.value !== '') {
-            const subCheckboxesValues = curr.value.split('|');
-            subCheckboxesValues.forEach((checkboxValue) => {
-              acc[checkboxValue] = 'true';
+          if (curr.value !== null) {
+            Object.entries(curr.value).forEach(([key, value]) => {
+              acc[key] = value ? 'true' : 'false';
             });
           }
         }
@@ -29872,9 +29909,13 @@ const GeneralRegistration = class {
     });
     // 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;
+    if (this.listOfActions.some(action => action == '/register')) {
+      this.lastStep = this.registrationStep;
+    }
+    // this.forms.push({ [this.registrationStep] : this.listOfInputs});
+    this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
     // Add the step to the registrationStepsData
     this.registrationStepsState.regId = this.registrationID;
     if (!this.registrationStepsState[this.registrationStep]) {
@@ -29910,22 +29951,24 @@ const GeneralRegistration = class {
   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.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })));
+  renderForm() {
+    return this.forms.map((form, index$1) => {
+      return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })), this.buttonInsideForm && this.renderButtons());
+    });
   }
   ;
   renderButtons() {
-    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: 'RegistrationForm', onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, 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))));
+    return (index.h("div", { class: 'registration__buttons-wrapper' }, index.h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: `RegistrationForm${this.registrationStep}`, onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, this.lastStep === this.registrationStep ? 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  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), index.h("p", { class: 'registration__error-message' }, this.errorMessage), this.renderButtons()));
+    return (index.h("div", { class: `registration  registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, this.renderForm(), index.h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
   }
   static get watchers() { return {
     "registrationStep": ["sendStep"],
-    "listOfInputs": ["setFormValidity"]
+    "forms": ["setFormValidity"]
   }; }
 };
 GeneralRegistration.style = generalRegistrationCss;
@@ -29944,6 +29987,24 @@ const NumberInput = class {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.validationPattern = '';
+    this.touched = false;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.touched = true;
+      if (this.debounceTime) {
+        clearTimeout(this.debounceTime);
+      }
+      this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
+        this.emitValueHandler(true);
+      }, 500);
+    };
+    this.handleBlur = () => {
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+      this.touched = true;
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -29984,18 +30045,14 @@ const NumberInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.isValid = this.setValidity();
     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;
   }
@@ -30024,9 +30081,12 @@ const NumberInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'number__wrapper--flex' }, index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("small", { class: 'number__error-message' }, this.errorMessage));
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `number__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'number__wrapper--flex' }, index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -30852,6 +30912,27 @@ const PasswordInput = class {
     this.value = '';
     this.validationPattern = '';
     this.duplicateInputValue = null;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.calculateComplexity(this.value);
+      this.showPopup = true;
+      this.touched = true;
+      if (this.debounceTime) {
+        clearTimeout(this.debounceTime);
+      }
+      this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
+        this.emitValueHandler(true);
+      }, 500);
+    };
+    this.handleBlur = (event) => {
+      this.value = event.target.value;
+      this.showPopup = false;
+      this.touched = true;
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -30866,7 +30947,7 @@ const PasswordInput = class {
   }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
-      this.valueHandler({ name: this.name, value: this.value });
+      this.valueHandler({ name: this.name, value: this.value, type: 'duplicate' });
     }
   }
   validityStateHandler(inputStateEvent) {
@@ -30876,12 +30957,16 @@ const PasswordInput = class {
     this.sendInputValue.emit(inputValueEvent);
   }
   valueChangedHandler(event) {
-    if (this.isDuplicateInput) {
-      if (this.name === event.detail.name + 'Duplicate') {
-        this.duplicateInputValue = event.detail.value;
+    if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
+      this.duplicateInputValue = event.detail.value;
+      if (this.touched) {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
       }
     }
-    if (this.name === event.detail.name + 'Duplicate' && this.name.replace('Duplicate', '') === event.detail.name && this.touched === true) {
+    if (this.name === event.detail.name + 'Duplicate'
+      && this.name.replace('Duplicate', '') === event.detail.name
+      && this.touched === true) {
       this.isValid = this.setValidity();
       this.errorMessage = this.setErrorMessage();
     }
@@ -30908,22 +30993,17 @@ const PasswordInput = class {
     this.inputReference = this.element.shadowRoot.querySelector('input');
     this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
     this.passwordButton.tabIndex = -1;
+    this.isValid = this.setValidity();
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.calculateComplexity(this.value);
       this.valueHandler({ name: this.name, value: this.value });
+      if (this.isDuplicateInput) {
+        this.duplicateInputValue = this.defaultValue;
+        this.touched = true;
+      }
     }
   }
-  handleInput(event) {
-    this.value = event.target.value;
-    this.calculateComplexity(this.value);
-    this.showPopup = true;
-    this.errorMessage = this.setErrorMessage();
-    this.isValid = this.setValidity();
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    this.emitValueHandler(true);
-    this.touched = true;
-  }
   calculateComplexity(password) {
     this.passwordComplexity = this.validation.custom
       .filter(rule => rule.rule === 'regex')
@@ -30934,11 +31014,15 @@ const PasswordInput = class {
     });
   }
   setValidity() {
+    var _a, _b;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
       return false;
     }
+    else if (!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed))) {
+      return false;
+    }
     else {
-      return this.inputReference.validity.valid;
+      return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
     }
   }
   setPattern() {
@@ -30980,9 +31064,12 @@ const PasswordInput = class {
     }))));
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return index.h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'password__wrapper--flex' }, index.h("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, onInput: (e) => this.handleInput(e), onBlur: () => this.showPopup = false, onFocus: () => this.showPopup = true }), index.h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `password__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'password__wrapper--flex' }, index.h("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: () => this.showPopup = true }), index.h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -31047,7 +31134,6 @@ const RadioInput = class {
     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() {
@@ -31065,7 +31151,7 @@ const RadioInput = class {
     return null;
   }
   render() {
-    return index.h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, 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), this.tooltip &&
+    return index.h("fieldset", { class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, 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), this.tooltip &&
       index.h("img", { class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   static get watchers() { return {
@@ -35421,6 +35507,14 @@ const SelectInput = class {
     this.clientStyling = '';
     this.limitStylingAppends = false;
     this.showTooltip = false;
+    this.touched = false;
+    this.handleChange = (event) => {
+      this.touched = true;
+      this.value = event.target.value;
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+      this.emitValueHandler(true);
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -35475,6 +35569,7 @@ const SelectInput = class {
   }
   componentDidLoad() {
     this.inputReference = this.element.shadowRoot.querySelector('input');
+    this.isValid = this.setValidity();
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
@@ -35494,13 +35589,6 @@ const SelectInput = class {
       });
     });
   }
-  handleChange(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;
   }
@@ -35516,9 +35604,12 @@ const SelectInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
-    return index.h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onChange: (e) => this.handleChange(e) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `select__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onChange: this.handleChange }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -35542,6 +35633,25 @@ const TelInput = class {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.validationPattern = '';
+    this.touched = false;
+    this.handleInput = (event) => {
+      this.phoneValue = event.target.value;
+      this.value = { prefix: this.prefixValue, phone: this.phoneValue };
+      this.touched = true;
+      if (this.debounceTime) {
+        clearTimeout(this.debounceTime);
+      }
+      this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
+        this.emitValueHandler(true);
+      }, 500);
+    };
+    this.handleBlur = () => {
+      this.isValid = this.setValidity();
+      this.touched = true;
+      this.errorMessage = this.setErrorMessage();
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -35551,7 +35661,7 @@ const TelInput = class {
   validityChanged() {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
-      this.valueHandler({ name: this.name, value: this.value });
+      this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
     }
   }
   validityStateHandler(inputStateEvent) {
@@ -35559,7 +35669,7 @@ const TelInput = class {
   }
   emitValueHandler(newValue) {
     if (newValue == true && this.isValid) {
-      this.valueHandler({ name: this.name, value: this.value });
+      this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
     }
   }
   valueHandler(inputValueEvent) {
@@ -35574,14 +35684,15 @@ const TelInput = class {
   connectedCallback() {
     this.validationPattern = this.setPattern();
     if (this.defaultValue) {
-      this.prefixValue = this.defaultValue.split('|')[0];
-      this.phoneValue = this.defaultValue.split('|')[1];
+      this.prefixValue = this.defaultValue.prefix ? this.defaultValue.prefix : this.defaultValue;
+      this.phoneValue = this.defaultValue.phone || null;
     }
   }
   componentWillLoad() {
     if (this.action) {
       if (this.action.split(" ")[0] == 'GET') {
-        return this.getPhoneCodes().then((options) => {
+        const endpoint = this.action.split(" ")[1];
+        return this.getPhoneCodes(endpoint).then((options) => {
           this.phoneCodesOptions = options.phoneCodes.map(code => {
             return { label: code.Prefix, value: code.Prefix };
           });
@@ -35597,14 +35708,16 @@ const TelInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.isValid = this.setValidity();
     if (this.defaultValue) {
-      this.value = `${this.prefixValue}|${this.phoneValue}`;
+      this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  getPhoneCodes() {
-    // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
-    const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/phonecodes");
+  getPhoneCodes(endpoint) {
+    const url = new URL(endpoint);
     return new Promise((resolve, reject) => {
       fetch(url.href)
         .then((res) => res.json())
@@ -35616,17 +35729,9 @@ const TelInput = class {
       });
     });
   }
-  handleInput(event) {
-    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 });
-    this.emitValueHandler(true);
-  }
   handlePrefixInput(event) {
     this.prefixValue = event.target.value;
-    this.value = `${this.prefixValue}|${this.phoneValue}`;
+    this.value = { prefix: this.prefixValue, phone: this.phoneValue };
     this.emitValueHandler(true);
   }
   setValidity() {
@@ -35657,9 +35762,12 @@ const TelInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
-    return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder} ${this.placeholder && 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("small", { class: 'tel__error-message' }, this.errorMessage));
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `tel__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -35690,6 +35798,26 @@ const TextInput = class {
     this.validationPattern = '';
     this.duplicateInputValue = null;
     this.touched = false;
+    this.handleInput = (event) => {
+      this.value = event.target.value;
+      this.touched = true;
+      if (this.debounceTime) {
+        clearTimeout(this.debounceTime);
+      }
+      this.debounceTime = setTimeout(() => {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
+        this.validityStateHandler({ valid: this.isValid, name: this.name });
+        this.emitValueHandler(true);
+      }, 500);
+    };
+    this.handleBlur = (event) => {
+      this.value = event.target.value;
+      this.touched = true;
+      this.isValid = this.setValidity();
+      this.errorMessage = this.setErrorMessage();
+      this.validityStateHandler({ valid: this.isValid, name: this.name });
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -35697,6 +35825,7 @@ const TextInput = class {
     };
   }
   validityChanged() {
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -35719,12 +35848,16 @@ const TextInput = class {
       this.showTooltip = false;
   }
   valueChangedHandler(event) {
-    if (this.isDuplicateInput) {
-      if (this.name === event.detail.name + 'Duplicate') {
-        this.duplicateInputValue = event.detail.value;
+    if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
+      this.duplicateInputValue = event.detail.value;
+      if (this.touched) {
+        this.isValid = this.setValidity();
+        this.errorMessage = this.setErrorMessage();
       }
     }
-    if (this.name === event.detail.name + 'Duplicate' && this.name.replace('Duplicate', '') === event.detail.name && this.touched === true) {
+    if (this.name === event.detail.name + 'Duplicate'
+      && this.name.replace('Duplicate', '') === event.detail.name
+      && this.touched === true) {
       this.isValid = this.setValidity();
       this.errorMessage = this.setErrorMessage();
     }
@@ -35740,25 +35873,24 @@ const TextInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.isValid = this.setValidity();
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
+      if (this.isDuplicateInput) {
+        this.touched = true;
+      }
     }
   }
-  handleInput(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);
-    this.touched = true;
-  }
   setValidity() {
+    var _a;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
       return false;
     }
     else {
-      return this.inputReference.validity.valid;
+      return (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity.valid;
     }
   }
   setPattern() {
@@ -35789,9 +35921,12 @@ const TextInput = class {
     return null;
   }
   render() {
-    const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    return index.h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
-      index.h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder} ${this.placeholder && 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));
+    let invalidClass;
+    if (this.touched) {
+      invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
+    }
+    return index.h("div", { class: `text__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
+      index.h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder} ${this.placeholder && 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, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],