@everymatrix/general-input 1.10.0 → 1.10.2

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

@@ -64,6 +64,7 @@ const CheckboxInput = class {
     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;
@@ -91,17 +92,8 @@ const DateInput = class {
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -121,6 +113,8 @@ const DateInput = class {
     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;
@@ -137,7 +131,6 @@ const DateInput = class {
     return index.h("div", { class: 'date__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'date', class: `date__input`, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'date__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -153,17 +146,8 @@ const EmailInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.validationPattern = '';
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -184,13 +168,10 @@ const EmailInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    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;
@@ -216,7 +197,6 @@ const EmailInput = class {
     return index.h("div", { class: 'email__wrapper' }, index.h("input", { id: `${this.name}__input`, type: 'email', class: `email__input`, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -231,17 +211,8 @@ const NumberInput = class {
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -259,13 +230,10 @@ const NumberInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    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;
@@ -283,7 +251,6 @@ const NumberInput = class {
     return index.h("div", { class: 'number__wrapper' }, index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -324,6 +291,7 @@ const PasswordInput = class {
     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;
@@ -364,17 +332,8 @@ const RadioInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -396,6 +355,8 @@ 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() {
     return this.inputReference.validity.valid;
@@ -409,7 +370,6 @@ const RadioInput = class {
     return index.h("fieldset", { class: 'radio__fieldset' }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -428,17 +388,8 @@ const SelectInput = class {
      */
     this.options = [];
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -456,10 +407,8 @@ const SelectInput = class {
   }
   connectedCallback() {
     this.displayedOptions = this.options;
-    console.log(this.displayedOptions);
   }
   componentWillLoad() {
-    console.log(this.action, this.options);
     if (this.action && !this.options.length) {
       if (this.action.split(" ")[0] == 'GET') {
         return this.getOptions().then((options) => {
@@ -488,8 +437,9 @@ const SelectInput = class {
     this.value = event.target.value;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
     this.inputReference.previousElementSibling.classList.remove('select__label--hidden');
-    console.log(this.action, this.options);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -506,7 +456,6 @@ const SelectInput = class {
     })), index.h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -522,17 +471,8 @@ const TelInput = class {
     this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
     this.validationPattern = '';
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -553,13 +493,10 @@ const TelInput = class {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    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;
@@ -586,7 +523,6 @@ const TelInput = class {
     return index.h("div", { class: 'tel__wrapper' }, index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, value: this.defaultValue, class: `tel__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: (e) => this.handleInput(e) }), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -635,6 +571,7 @@ const TextInput = class {
     this.isValid = this.setValidity();
     this.errorMessage = this.setErrorMessage();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;

package/dist/cjs/general-input.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["checkbox-input_9.cjs",[[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"checkValidity":[4,"check-validity"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]],["general-input.cjs",[[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}]]]], options);
+  return index.bootstrapLazy([["checkbox-input_9.cjs",[[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]],["general-input.cjs",[[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["checkbox-input_9.cjs",[[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"checkValidity":[4,"check-validity"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]],["general-input.cjs",[[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}]]]], options);
+  return index.bootstrapLazy([["checkbox-input_9.cjs",[[1,"checkbox-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"date-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"email-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"number-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[2,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"password-input",{"name":[1],"displayName":[1,"display-name"],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"radio-input",{"name":[1],"displayName":[1,"display-name"],"optionsGroup":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"select-input",{"name":[1],"displayName":[1,"display-name"],"action":[1],"options":[16],"validation":[16],"language":[1],"emitValue":[4,"emit-value"],"errorMessage":[32],"isValid":[32]}],[1,"tel-input",{"name":[1],"displayName":[1,"display-name"],"showLabels":[4,"show-labels"],"action":[1],"validation":[16],"defaultValue":[8,"default-value"],"language":[1],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}],[1,"text-input",{"name":[1025],"displayName":[1,"display-name"],"validation":[16],"defaultValue":[1025,"default-value"],"rules":[1],"language":[1],"checkValidity":[4,"check-validity"],"emitValue":[4,"emit-value"],"isValid":[32],"errorMessage":[32]}]]],["general-input.cjs",[[1,"general-input",{"type":[1],"name":[1],"displayName":[1,"display-name"],"action":[1],"validation":[16],"options":[8],"language":[1],"defaultValue":[8,"default-value"],"emitValue":[4,"emit-value"]}]]]], options);
   });
 };
 

package/dist/collection/components/checkbox-input/checkbox-input.js

@@ -25,6 +25,7 @@ export class CheckboxInput {
     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;

package/dist/collection/components/date-input/date-input.js

@@ -1,17 +1,8 @@
 import { Component, h, State, Prop, Watch, Event } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 export class DateInput {
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -31,6 +22,8 @@ export class DateInput {
     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;
@@ -149,23 +142,6 @@ export class DateInput {
       "attribute": "language",
       "reflect": false
     },
-    "checkValidity": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "State passed down from the parent element. Will trigger the input to check for validity."
-      },
-      "attribute": "check-validity",
-      "reflect": false
-    },
     "emitValue": {
       "type": "boolean",
       "mutable": false,
@@ -230,9 +206,6 @@ export class DateInput {
       }
     }]; }
   static get watchers() { return [{
-      "propName": "checkValidity",
-      "methodName": "checkValidityHandler"
-    }, {
       "propName": "isValid",
       "methodName": "validityChanged"
     }, {

package/dist/collection/components/email-input/email-input.js

@@ -4,17 +4,8 @@ export class EmailInput {
   constructor() {
     this.validationPattern = '';
   }
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -35,13 +26,10 @@ export class EmailInput {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    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;
@@ -182,23 +170,6 @@ export class EmailInput {
       },
       "attribute": "emit-value",
       "reflect": false
-    },
-    "checkValidity": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "State passed down from the parent element. Will trigger the input to check for validity."
-      },
-      "attribute": "check-validity",
-      "reflect": false
     }
   }; }
   static get states() { return {
@@ -247,9 +218,6 @@ export class EmailInput {
       }
     }]; }
   static get watchers() { return [{
-      "propName": "checkValidity",
-      "methodName": "checkValidityHandler"
-    }, {
       "propName": "isValid",
       "methodName": "validityChanged"
     }, {

package/dist/collection/components/number-input/number-input.js

@@ -1,17 +1,8 @@
 import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 export class NumberInput {
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -29,13 +20,10 @@ export class NumberInput {
   }
   handleInput(event) {
     this.value = event.target.value;
-    if (this.debounceTime) {
-      clearTimeout(this.debounceTime);
-    }
-    this.debounceTime = setTimeout(() => {
-      this.errorMessage = this.setErrorMessage();
-      this.isValid = this.setValidity();
-    }, 500);
+    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;
@@ -152,23 +140,6 @@ export class NumberInput {
       "attribute": "language",
       "reflect": false
     },
-    "checkValidity": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "State passed down from the parent element. Will trigger the input to check for validity."
-      },
-      "attribute": "check-validity",
-      "reflect": false
-    },
     "emitValue": {
       "type": "boolean",
       "mutable": false,
@@ -233,9 +204,6 @@ export class NumberInput {
       }
     }]; }
   static get watchers() { return [{
-      "propName": "checkValidity",
-      "methodName": "checkValidityHandler"
-    }, {
       "propName": "isValid",
       "methodName": "validityChanged"
     }, {

package/dist/collection/components/password-input/password-input.js

@@ -29,6 +29,7 @@ export class PasswordInput {
     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;

package/dist/collection/components/radio-input/radio-input.js

@@ -1,17 +1,8 @@
 import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
 export class RadioInput {
-  checkValidityHandler(newValue) {
-    if (newValue == true) {
-      this.isValid = this.setValidity();
-      this.errorMessage = this.setErrorMessage();
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
-  }
   validityChanged() {
-    if (this.checkValidity == true) {
-      this.validityStateHandler({ valid: this.isValid, name: this.name });
-    }
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
     if (this.emitValue == true) {
       this.valueHandler({ name: this.name, value: this.value });
     }
@@ -33,6 +24,8 @@ export class RadioInput {
     this.value = event.target.value;
     this.isValid = this.setValidity();
     this.errorMessage = this.setErrorMessage();
+    this.validityStateHandler({ valid: this.isValid, name: this.name });
+    this.emitValueHandler(true);
   }
   setValidity() {
     return this.inputReference.validity.valid;
@@ -152,23 +145,6 @@ export class RadioInput {
       "attribute": "language",
       "reflect": false
     },
-    "checkValidity": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "State passed down from the parent element. Will trigger the input to check for validity."
-      },
-      "attribute": "check-validity",
-      "reflect": false
-    },
     "emitValue": {
       "type": "boolean",
       "mutable": false,
@@ -233,9 +209,6 @@ export class RadioInput {
       }
     }]; }
   static get watchers() { return [{
-      "propName": "checkValidity",
-      "methodName": "checkValidityHandler"
-    }, {
       "propName": "isValid",
       "methodName": "validityChanged"
     }, {