@everymatrix/general-registration 1.10.1 → 1.10.3

package/dist/components/locale.utils.js

@@ -7,7 +7,8 @@ const TRANSLATIONS = {
     lengthError: `The length should be between {minLength} and {maxLength}`,
     requiredError: 'This input is required.',
     nextButton: 'Next',
-    backButton: 'Back'
+    backButton: 'Back',
+    doneButton: 'Done'
   },
   ro: {
     lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,

package/dist/components/number-input2.js

@@ -11,17 +11,8 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = 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 });
     }
@@ -39,13 +30,10 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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;
@@ -60,10 +48,9 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return h("div", { class: 'number__wrapper' }, 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) }), h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'number__error-message' }, this.errorMessage));
+    return h("div", { class: 'number__wrapper' }, h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, 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, onBlur: (e) => this.handleInput(e) }), h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -73,8 +60,8 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "displayName": [1, "display-name"],
     "validation": [16],
     "defaultValue": [2, "default-value"],
+    "autofilled": [4],
     "language": [1],
-    "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "errorMessage": [32],
     "isValid": [32]

package/dist/components/password-input2.js

@@ -10,6 +10,11 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__attachShadow();
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Default value for the input.
+     */
+    this.defaultValue = '';
+    this.value = '';
     this.validationPattern = '';
   }
   validityChanged() {
@@ -37,6 +42,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -60,7 +66,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return h("div", { class: 'password__wrapper' }, h("input", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, ref: (el) => this.inputReference = el, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'password__error-message' }, this.errorMessage));
+    return h("div", { class: 'password__wrapper' }, h("input", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, ref: (el) => this.inputReference = el, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'password__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -70,6 +76,8 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [1, "password-input", {
     "name": [1],
     "displayName": [1, "display-name"],
+    "defaultValue": [1, "default-value"],
+    "autofilled": [4],
     "validation": [16],
     "language": [1],
     "emitValue": [4, "emit-value"],

package/dist/components/radio-input2.js

@@ -11,17 +11,8 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
     this.sendValidityState = 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 });
     }
@@ -43,6 +34,8 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -56,7 +49,6 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return h("fieldset", { class: 'radio__fieldset' }, h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, 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) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { class: 'radio__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -67,7 +59,6 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "optionsGroup": [16],
     "validation": [16],
     "language": [1],
-    "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "errorMessage": [32],
     "isValid": [32]

package/dist/components/select-input2.js

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
+import './virtual-keyboard-controller.js';
+import './vaadin-combo-box.js';
 
 const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select__wrapper{position:relative;display:flex;padding-top:10px;width:100%}.select__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.select__label--hidden{opacity:0;visibility:hidden;transform:translateY(0)}.select__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit}.select__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
 
@@ -10,22 +12,17 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.sendValidityState = createEvent(this, "sendValidityState", 7);
     this.sendInputValue = createEvent(this, "sendInputValue", 7);
+    /**
+     * Default value for the input.
+     */
+    this.defaultValue = '';
     /**
      * Options of the input.
      */
     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 });
     }
@@ -43,10 +40,8 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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) => {
@@ -57,6 +52,9 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+  }
   getOptions() {
     // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
     const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/countries");
@@ -75,8 +73,9 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -87,13 +86,10 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    console.log('RENDER');
-    return h("div", { class: 'select__wrapper' }, h("label", { class: 'select__label select__label--hidden', htmlFor: `${this.name}__input` }, this.displayName, ":"), h("select", { ref: (el) => this.inputReference = el, name: this.name, id: `${this.name}__input`, required: this.validation.mandatory, class: 'select__input', onChange: (e) => this.handleChange(e) }, h("option", { value: "", selected: true, disabled: true }, " ", this.displayName, " "), this.displayedOptions.map(option => {
-      return h("option", { value: option.value }, " ", option.label, " ");
-    })), h("small", { class: 'select__error-message' }, this.errorMessage));
+    return h("div", { class: 'select__wrapper' }, h("label", { class: 'select__label select__label--hidden', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: 'select__input', "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
   }
+  get element() { return this; }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -102,10 +98,11 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "name": [1],
     "displayName": [1, "display-name"],
     "action": [1],
+    "defaultValue": [1, "default-value"],
+    "autofilled": [4],
     "options": [16],
     "validation": [16],
     "language": [1],
-    "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "errorMessage": [32],
     "isValid": [32]

package/dist/components/tel-input2.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate } from './locale.utils.js';
+import './virtual-keyboard-controller.js';
+import './vaadin-combo-box.js';
 
-const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px}.tel__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.tel__label--required::after{content:\"*\";margin-left:5px;color:#666666}.tel__input{width:inherit;padding:15px 6px;position:relative;border:none;border-bottom:3px solid #666666;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;-moz-appearance:textfield;}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.tel__input::placeholder{color:#666666}.tel__input--invalid{border-bottom:3px solid #cc0000}.tel__input:placeholder-shown+.tel__label{opacity:0;visibility:hidden;transform:translateY(0)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
+const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel__wrapper{position:relative;display:flex;flex-direction:column-reverse;padding-top:10px;border-bottom:3px solid #666666}.tel__wrapper--flex{display:flex}.tel__label{color:#474747;font-size:16px;position:absolute;bottom:15px;left:5px;transform:translateY(-25px);transition:all 0.3s cubic-bezier(0.5, 0, 0.5, 1)}.tel__label--required::after{content:\"*\";margin-left:5px;color:#666666}.tel vaadin-combo-box{flex-grow:1}.tel__input{width:inherit;padding:15px 6px;position:relative;border:none;background-color:transparent;color:#666666;font-size:16px;font-family:inherit;flex-grow:3;-moz-appearance:textfield;}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__input:focus{outline:none;box-shadow:0 5px 5px rgba(16, 15, 15, 0.1)}.tel__input::placeholder{color:#666666}.tel__input--invalid .tel__wrapper{border-bottom:3px solid #cc0000}.tel__input:placeholder-shown+.tel__label{opacity:0;visibility:hidden;transform:translateY(0)}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000}";
 
 const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,17 +14,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sendInputValue = 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 });
     }
@@ -41,15 +34,37 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
+  componentWillLoad() {
+    if (this.action) {
+      if (this.action.split(" ")[0] == 'GET') {
+        return this.getPhoneCodes().then((options) => {
+          this.phoneCodesOptions = options.phoneCodes.map(code => {
+            return { label: code.Prefix, value: code.CountryID };
+          });
+        });
+      }
+    }
+  }
+  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");
+    return new Promise((resolve, reject) => {
+      fetch(url.href)
+        .then((res) => res.json())
+        .then((options) => {
+        resolve(options);
+      }).catch((err) => {
+        console.error(err);
+        reject(err);
+      });
+    });
+  }
   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;
@@ -73,10 +88,9 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__input--invalid';
-    return h("div", { class: 'tel__wrapper' }, 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) }), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
+    return h("div", { class: 'tel__wrapper' }, h("div", { class: 'tel__wrapper--flex' }, h("vaadin-combo-box", { items: this.phoneCodesOptions, value: this.defaultValue, readOnly: this.autofilled }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
-    "checkValidity": ["checkValidityHandler"],
     "isValid": ["validityChanged"],
     "emitValue": ["emitValueHandler"]
   }; }
@@ -88,8 +102,8 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "action": [1],
     "validation": [16],
     "defaultValue": [8, "default-value"],
+    "autofilled": [4],
     "language": [1],
-    "checkValidity": [4, "check-validity"],
     "emitValue": [4, "emit-value"],
     "isValid": [32],
     "errorMessage": [32]

package/dist/components/text-input2.js

@@ -45,6 +45,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -75,8 +76,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    console.log('this', this.name, this.defaultValue, this.displayName);
-    return h("div", { class: 'text__wrapper' }, h("input", { id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'text__error-message' }, this.errorMessage));
+    return h("div", { class: 'text__wrapper' }, h("input", { id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -84,10 +84,11 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return textInputCss; }
 }, [1, "text-input", {
-    "name": [1025],
+    "name": [1],
     "displayName": [1, "display-name"],
     "validation": [16],
-    "defaultValue": [1025, "default-value"],
+    "defaultValue": [1, "default-value"],
+    "autofilled": [4],
     "rules": [1],
     "language": [1],
     "checkValidity": [4, "check-validity"],