@everymatrix/general-registration 1.10.23 → 1.10.25

package/dist/components/number-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.number__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
+const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.number__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
 
 const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -93,9 +93,11 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+      const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
       return translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
@@ -111,7 +113,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/password-input2.js

@@ -560,7 +560,8 @@ class PasswordField extends TextField {
     super();
     this._setType('password');
     this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
-    this.__boundRevealButtonTouchend = this._onRevealButtonTouchend.bind(this);
+    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
+    this.__lastChange = '';
   }
 
   /** @protected */
@@ -577,7 +578,7 @@ class PasswordField extends TextField {
         btn.disabled = host.disabled;
 
         btn.addEventListener('click', host.__boundRevealButtonClick);
-        btn.addEventListener('touchend', host.__boundRevealButtonTouchend);
+        btn.addEventListener('mousedown', host.__boundRevealButtonMouseDown);
       },
     );
     this.addController(this._revealButtonController);
@@ -592,6 +593,19 @@ class PasswordField extends TextField {
     }
   }
 
+  /**
+   * Override an event listener inherited from `InputControlMixin`
+   * to store the value at the moment of the native `change` event.
+   * @param {Event} event
+   * @protected
+   * @override
+   */
+  _onChange(event) {
+    super._onChange(event);
+
+    this.__lastChange = this.inputElement.value;
+  }
+
   /**
    * Override method inherited from `FocusMixin` to mark field as focused
    * when focus moves to the reveal button using Shift Tab.
@@ -628,6 +642,12 @@ class PasswordField extends TextField {
 
     if (!focused) {
       this._setPasswordVisible(false);
+
+      // Detect if `focusout` was prevented and if so, dispatch `change` event manually.
+      if (this.__lastChange !== this.inputElement.value) {
+        this.__lastChange = this.inputElement.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      }
     } else {
       const isButtonFocused = this.getRootNode().activeElement === this._revealNode;
       // Remove focus-ring from the field when the reveal button gets focused
@@ -663,10 +683,10 @@ class PasswordField extends TextField {
   }
 
   /** @private */
-  _onRevealButtonTouchend(e) {
-    // Cancel the following click event
+  _onRevealButtonMouseDown(e) {
+    // Cancel the following focusout event
     e.preventDefault();
-    this._togglePasswordVisibility();
+
     // Focus the input to avoid problem with password still visible
     // when user clicks the reveal button and then clicks outside.
     this.inputElement.focus();
@@ -719,7 +739,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{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 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:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;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__input>input:placeholder-shown{color:#979797}.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--hidden{display:none}.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() {
@@ -863,9 +883,11 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+      const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -874,7 +896,9 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return translate('requiredError', this.language);
     }
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+      const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
+      const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
   }
   renderTooltip() {
@@ -888,14 +912,13 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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)));
+    // if (this.showPopup === false) return;
+    return (h("div", { class: `password__complexity ${!this.showPopup ? 'password__complexity--hidden' : ''}` }, 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, translate(`${complexity.rule}`, this.language) ? translate(`${complexity.rule}`, this.language) : complexity.rule)));
     }))));
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/select-input2.js

@@ -3,7 +3,7 @@ import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 import './input-field-shared-styles.js';
 import './vaadin-combo-box.js';
 
-const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.select__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}";
+const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}";
 
 const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -69,8 +69,10 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   componentWillLoad() {
     if (this.action && !this.options.length) {
       if (this.action.split(" ")[0] == 'GET') {
-        return this.getOptions().then((options) => {
-          this.displayedOptions = options.countries.map(option => {
+        const endpoint = this.action.split(" ")[1];
+        return this.getOptions(endpoint).then((options) => {
+          const firstKey = Object.keys(options)[0];
+          this.displayedOptions = options[firstKey].map(option => {
             return { label: option.Name, value: option.Alpha2Code };
           });
         });
@@ -94,9 +96,8 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueHandler({ name: this.name, value: this.value });
     }
   }
-  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");
+  getOptions(endpoint) {
+    const url = new URL(endpoint);
     return new Promise((resolve, reject) => {
       fetch(url.href)
         .then((res) => res.json())
@@ -123,7 +124,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/tel-input2.js

@@ -3,7 +3,7 @@ import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 import './input-field-shared-styles.js';
 import './vaadin-combo-box.js';
 
-const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.tel__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:8px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
+const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
 
 const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -99,7 +99,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isValid = this.setValidity();
     if (this.defaultValue) {
       this.value = this.defaultValue;
-      this.valueHandler({ name: this.name, value: this.value });
+      this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
     }
   }
   getPhoneCodes(endpoint) {
@@ -130,9 +130,11 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+      const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -148,7 +150,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

package/dist/components/text-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 
-const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.text__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:8px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
+const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -127,9 +127,11 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   setErrorMessage() {
-    var _a;
+    var _a, _b, _c, _d;
     if (this.inputReference.validity.patternMismatch) {
-      return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
+      const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
+      const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
     if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
       return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
@@ -138,7 +140,9 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return translate('requiredError', this.language);
     }
     if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
-      return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
+      const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
+      const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
+      return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
     }
   }
   renderTooltip() {
@@ -148,7 +152,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return null;
   }
   render() {
-    let invalidClass;
+    let invalidClass = '';
     if (this.touched) {
       invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
     }

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

@@ -0,0 +1,6 @@
+import { T as ToggleCheckboxInput$1, a as defineCustomElement$1 } from './general-input2.js';
+
+const ToggleCheckboxInput = ToggleCheckboxInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ToggleCheckboxInput, defineCustomElement };

package/dist/components/tooltipIcon.js

@@ -8,12 +8,29 @@ const TRANSLATIONS = {
     "passwordStrength": "Password strength",
     "passwordStrengthWeak": "is not adequate",
     "passwordStrengthStrong": "is adequate",
+    "SpecialCharactersNotAllowed": 'Should not contain special characters',
+    "InvalidEmailFormat": "Invalid email format.",
+    "EmailNotMatching": "Emails not matching!",
+    "PasswordNotMatching": "Passwords not matching",
+    "MustIncludeNumber": "include a number",
+    "MustContainCapital": "contain capital letters",
+    "MustIncludePunctation": "punctuation",
   },
   "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ő.',
+    "passwordStrength": "Jelszó erőssége",
+    "passwordStrengthWeak": "nem megfelelő",
+    "passwordStrengthStrong": "megfelelő",
+    "SpecialCharactersNotAllowed": 'Nem tartalmazhat speciális karaktereket',
+    "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
+    "EmailNotMatching": "Az e-mailek nem egyeznek!",
+    "PasswordNotMatching": "A jelszavak nem egyeznek",
+    "MustIncludeNumber": "tartalmaznia kell egy számot",
+    "MustContainCapital": "nagybetűket kell tartalmaznia",
+    "MustIncludePunctation": "írásjelet"
   }
 };
 const translate = (key, customLang, values) => {