@everymatrix/general-registration 1.10.19 → 1.10.20

package/dist/components/number-input2.js

@@ -99,7 +99,7 @@ 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', ref: el => this.stylingContainer = el }, h("div", { class: 'number__wrapper--flex' }, h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
-      h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'number__error-message' }, this.errorMessage));
+      h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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) }), h("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -109,6 +109,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "number-input", {
     "name": [513],
     "displayName": [513, "display-name"],
+    "placeholder": [513],
     "validation": [16],
     "defaultValue": [513, "default-value"],
     "autofilled": [516],

package/dist/components/password-input2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
-import { r as registerStyles, a as inputFieldShared, j as InputControlMixin, h as html, k as InputController, L as LabelledInputController, n as TooltipController, o as inputFieldShared$1, T as ThemableMixin, p as ElementMixin, P as PolymerElement, i, S as SlotController } from './input-field-shared-styles.js';
+import { i as inputFieldShared, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
+import { r as registerStyles, h as html, e as InputController, f as LabelledInputController, g as TooltipController, T as ThemableMixin, E as ElementMixin, P as PolymerElement, i, S as SlotController } from './field-mixin.js';
 import { P as PatternMixin } from './pattern-mixin.js';
 import { b as button, B as Button } from './vaadin-button.js';
 
@@ -718,7 +719,7 @@ class PasswordField extends TextField {
 
 customElements.define(PasswordField.is, PasswordField);
 
-const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.password__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.password__input{width:inherit;border:none}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
+const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.password__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__error-message{color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
 
 const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -737,8 +738,11 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.clientStyling = '';
     this.limitStylingAppends = false;
     this.showTooltip = false;
+    this.showPopup = true;
+    this.touched = false;
     this.value = '';
     this.validationPattern = '';
+    this.duplicateInputValue = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -768,6 +772,10 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.duplicateInputValue = event.detail.value;
       }
     }
+    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();
+    }
   }
   handleClickOutside(event) {
     if (event.composedPath()[0] === this.tooltipIconReference)
@@ -776,7 +784,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.showTooltip = false;
   }
   connectedCallback() {
-    this.validationPattern = this.setPattern();
+    // this.validationPattern = this.setPattern();
   }
   componentDidRender() {
     // start custom styling area
@@ -786,23 +794,43 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
+    this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
+    this.passwordButton.tabIndex = -1;
     if (this.defaultValue) {
       this.value = this.defaultValue;
+      this.calculateComplexity(this.value);
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
-  }
   handleInput(event) {
     this.value = event.target.value;
+    this.calculateComplexity(this.value);
+    this.showPopup = true;
     this.errorMessage = this.setErrorMessage();
     this.isValid = this.setValidity();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
+    this.touched = true;
+  }
+  calculateComplexity(password) {
+    this.passwordComplexity = this.validation.custom
+      .filter(rule => rule.rule === 'regex')
+      .map(rule => {
+      const ruleRegex = new RegExp(rule.pattern);
+      const passed = ruleRegex.test(password);
+      return { rule: rule.displayName, passed };
+    });
   }
   setValidity() {
-    return this.inputReference.validity.valid;
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return false;
+    }
+    else {
+      return this.inputReference.validity.valid;
+    }
   }
   setPattern() {
     var _a, _b;
@@ -831,12 +859,21 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     return null;
   }
+  renderComplexityPopup() {
+    const totalRules = this.passwordComplexity.length;
+    const passedRules = this.passwordComplexity.filter(complexity => complexity.passed).length;
+    const meterValue = passedRules / totalRules;
+    const allRulesPassed = this.passwordComplexity.every(complexity => complexity.passed);
+    if (this.showPopup === false)
+      return;
+    return (h("div", { class: `password__complexity` }, h("div", { class: 'password__complexity--strength' }, h("p", { class: 'password__complexity--text' }, translate('passwordStrength', this.language), "\u00A0", h("span", { class: 'password__complexity--text-bold' }, translate(`${allRulesPassed ? 'passwordStrengthStrong' : 'passwordStrengthWeak'}`, this.language))), h("meter", { value: meterValue, min: "0", max: "1" })), h("div", null, this.passwordComplexity.map((complexity, index) => {
+      return (h("div", { key: index }, h("input", { class: 'password__complexity--checkbox', type: "checkbox", checked: complexity.passed, disabled: true }), h("span", null, complexity.rule)));
+    }))));
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
     return h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'password__wrapper--flex' }, h("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
-      h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
-      // ref={(el) => this.inputReference = el as HTMLInputElement}
-      required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, onBlur: (e) => this.handleInput(e) }), h("small", { class: 'password__error-message' }, this.errorMessage));
+      h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, onInput: (e) => this.handleInput(e), onBlur: () => this.showPopup = false, onFocus: () => this.showPopup = true }), h("small", { class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
   }
   get element() { return this; }
   static get watchers() { return {
@@ -847,6 +884,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [1, "password-input", {
     "name": [513],
     "displayName": [513, "display-name"],
+    "placeholder": [513],
     "defaultValue": [513, "default-value"],
     "autofilled": [516],
     "tooltip": [513],
@@ -858,7 +896,9 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "isValid": [32],
     "errorMessage": [32],
     "limitStylingAppends": [32],
-    "showTooltip": [32]
+    "showTooltip": [32],
+    "passwordComplexity": [32],
+    "showPopup": [32]
   }, [[16, "sendInputValue", "valueChangedHandler"], [4, "click", "handleClickOutside"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/pattern-mixin.js

@@ -1,4 +1,5 @@
-import { I as InputConstraintsMixin, D as Debouncer, e as timeOut } from './input-field-shared-styles.js';
+import { y as Debouncer, z as timeOut } from './field-mixin.js';
+import { I as InputConstraintsMixin } from './input-field-shared-styles.js';
 
 /**
  * @license

package/dist/components/select-input2.js

@@ -77,14 +77,14 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.limitStylingAppends = true;
     }
     // end custom styling area
+  }
+  componentDidLoad() {
+    this.inputReference = this.element.shadowRoot.querySelector('input');
     if (this.defaultValue) {
       this.value = this.defaultValue;
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  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");
@@ -123,7 +123,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
     return h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'select__wrapper--flex' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
-      h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), h("small", { class: 'select__error-message' }, this.errorMessage));
+      h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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) }), h("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -134,6 +134,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "select-input", {
     "name": [513],
     "displayName": [513, "display-name"],
+    "placeholder": [513],
     "action": [513],
     "defaultValue": [513, "default-value"],
     "autofilled": [516],

package/dist/components/tel-input2.js

@@ -101,6 +101,11 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
   }
+  handlePrefixInput(event) {
+    this.prefixValue = event.target.value;
+    this.value = `${this.prefixValue}|${this.phoneValue}`;
+    this.emitValueHandler(true);
+  }
   setValidity() {
     return this.inputReference.validity.valid;
   }
@@ -131,7 +136,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
     return h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'tel__wrapper--flex-label' }, h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
-      h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.prefixValue = e.target.value }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), h("small", { class: 'tel__error-message' }, this.errorMessage));
+      h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), 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) })), h("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -141,6 +146,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "tel-input", {
     "name": [513],
     "displayName": [513, "display-name"],
+    "placeholder": [513],
     "showLabels": [516, "show-labels"],
     "action": [513],
     "validation": [16],

package/dist/components/text-input2.js

@@ -22,8 +22,9 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.limitStylingAppends = false;
     this.showTooltip = false;
     this.value = '';
-    this.customRules = [];
     this.validationPattern = '';
+    this.duplicateInputValue = null;
+    this.touched = false;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -58,6 +59,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.duplicateInputValue = event.detail.value;
       }
     }
+    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();
+    }
   }
   connectedCallback() {
     this.validationPattern = this.setPattern();
@@ -81,9 +86,15 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.errorMessage = this.setErrorMessage();
     this.validityStateHandler({ valid: this.isValid, name: this.name });
     this.emitValueHandler(true);
+    this.touched = true;
   }
   setValidity() {
-    return this.inputReference.validity.valid;
+    if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
+      return false;
+    }
+    else {
+      return this.inputReference.validity.valid;
+    }
   }
   setPattern() {
     var _a, _b;
@@ -115,7 +126,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     return h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, h("div", { class: 'text__wrapper--flex' }, h("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
-      h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
+      h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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); } }), h("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -125,6 +136,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "text-input", {
     "name": [513],
     "displayName": [513, "display-name"],
+    "placeholder": [513],
     "validation": [16],
     "defaultValue": [513, "default-value"],
     "autofilled": [516],

package/dist/components/tooltipIcon.js

@@ -1,20 +1,24 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   "en": {
     "dateError": 'The selected date should be between {min} and {max}',
     "numberLengthError": 'The number should be between {min} and {max}',
     "lengthError": `The length should be between {minLength} and {maxLength}`,
     "requiredError": 'This input is required.',
+    "passwordStrength": "Password strength",
+    "passwordStrengthWeak": "is not adequate",
+    "passwordStrengthStrong": "is adequate",
   },
-  "ro": {
-    "lengthError": `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
-    "requiredError": 'Acest câmp este obligatoriu.'
+  "hu": {
+    "dateError": 'A választott dátumnak {min} és {max} között kell lennie',
+    "numberLengthError": 'A számnak {min} és {max} között kell lennie',
+    "lengthError": `A hossznak {minLength} és {maxLength} között kell lennie`,
+    "requiredError": 'Ez a beviteli mező kötelező.',
   }
 };
 const translate = (key, customLang, values) => {
   const lang = customLang;
-  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
   if (values !== undefined) {
     for (const [key, value] of Object.entries(values.values)) {
       const regex = new RegExp(`{${key}}`, 'g');