@everymatrix/general-registration 1.10.21 → 1.10.22

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

@@ -14723,6 +14723,7 @@ 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' });
     }
@@ -14765,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() {
@@ -14791,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 }))));
@@ -14830,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 });
     }
@@ -14859,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 });
@@ -14868,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() {
@@ -14889,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 {
@@ -29227,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);
@@ -29236,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;
@@ -29273,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() {
@@ -29308,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); }
@@ -29334,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;
@@ -29381,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;
   }
@@ -29424,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"],
@@ -29559,9 +29590,9 @@ const GeneralRegistration = class {
     this.listOfInputValues = [];
     this.listOfInputValidity = [];
     this.listOfActions = [];
-    this.listOfSteps = [];
     this.listOfInputs = [];
     this.emitValue = false;
+    this.backButtonPressed = false;
     this.registrationStepsState = {
       regId: null
     };
@@ -29588,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.
@@ -29653,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' });
@@ -29877,11 +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;
-    this.listOfSteps.push(this.registrationStep);
-    this.forms.push({ [this.registrationStep]: this.listOfInputs });
+    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]) {
@@ -29919,18 +29953,18 @@ const GeneralRegistration = class {
   }
   renderForm() {
     return this.forms.map((form, index$1) => {
-      return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })));
+      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${this.registrationStep}`, 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 }, this.renderForm(), 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"],
@@ -29953,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;
@@ -29993,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;
   }
@@ -30033,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"],
@@ -30861,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;
@@ -30875,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) {
@@ -30885,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();
     }
@@ -30917,27 +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;
-  }
-  handleBlur() {
-    this.errorMessage = this.setErrorMessage();
-    this.isValid = this.setValidity();
-    this.showPopup = false;
-  }
   calculateComplexity(password) {
     this.passwordComplexity = this.validation.custom
       .filter(rule => rule.rule === 'regex')
@@ -30948,14 +31014,15 @@ const PasswordInput = class {
     });
   }
   setValidity() {
+    var _a, _b;
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
       return false;
     }
-    else if (!this.passwordComplexity.every(complexity => complexity.passed)) {
+    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() {
@@ -30997,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.handleBlur(), 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 {
@@ -31064,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() {
@@ -31082,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 {
@@ -35438,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;
@@ -35492,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 });
@@ -35511,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;
   }
@@ -35533,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 {
@@ -35559,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;
@@ -35598,7 +35691,8 @@ const TelInput = class {
   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 };
           });
@@ -35614,14 +35708,16 @@ const TelInput = class {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.isValid = this.setValidity();
     if (this.defaultValue) {
-      this.value = { prefix: this.prefixValue, phone: this.phoneValue };
-      this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
+      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())
@@ -35633,14 +35729,6 @@ const TelInput = class {
       });
     });
   }
-  handleInput(event) {
-    this.phoneValue = event.target.value;
-    this.value = { prefix: this.prefixValue, phone: 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 = { prefix: this.prefixValue, phone: this.phoneValue };
@@ -35674,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"],
@@ -35707,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;
@@ -35714,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 });
     }
@@ -35736,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();
     }
@@ -35757,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() {
@@ -35806,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"],