@everymatrix/general-registration 1.10.17 → 1.10.19

package/dist/esm/checkbox-input_11.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h as h$2, g as getElement } from './index-b3c0d3c9.js';
+import { r as registerInstance, c as createEvent, h as h$2, g as getElement } from './index-5b8d16cc.js';
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
@@ -26,7 +26,9 @@ const translate$2 = (key, customLang, values) => {
   return translation;
 };
 
-const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMiAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iMTYuMTUiIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjcuNjAwMDEiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTEuOTA5OSAxNi4xNSkiIGZpbGw9IiMyQjJEM0YiLz4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iNi42NTAwMiIgd2lkdGg9IjEuODIiIGhlaWdodD0iMS45MDAwMSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCAxMS45MDk5IDYuNjUwMDIpIiBmaWxsPSIjMkIyRDNGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC45ODk5OSAxMC40NUMwLjk4OTk5IDQuNjc3NjggNS40NzE5NyAwIDExIDBDMTYuNTI4IDAgMjEuMDEgNC42Nzc2OCAyMS4wMSAxMC40NUMyMS4wMSAxNi4yMjEgMTYuNTI4IDIwLjkgMTEgMjAuOUM1LjQ3MTk3IDIwLjkgMC45ODk5OSAxNi4yMjEgMC45ODk5OSAxMC40NVpNMi44MDk5OSAxMC40NTA2QzIuODA5OTkgMTUuMTcyMyA2LjQ3Njc3IDE5IDExIDE5QzE1LjUyMiAxOSAxOS4xOSAxNS4xNzIzIDE5LjE5IDEwLjQ1MDZDMTkuMTkgNS43Mjg5MSAxNS41MjIgMS45MDAwMSAxMSAxLjkwMDAxQzYuNDc2NzcgMS45MDAwMSAyLjgwOTk5IDUuNzI4OTEgMi44MDk5OSAxMC40NTA2WiIgZmlsbD0iIzJCMkQzRiIvPgo8L3N2Zz4K';
+
+const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}";
 
 const CheckboxInput = class {
   constructor(hostRef) {
@@ -42,6 +44,7 @@ const CheckboxInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.value = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -65,6 +68,12 @@ const CheckboxInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -94,10 +103,17 @@ const CheckboxInput = class {
     }
   }
   renderLabel() {
-    return (h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h$2("div", { innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+    return (h$2("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, h$2("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
+  }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
   }
   render() {
-    return h$2("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h$2("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue == "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h$2("small", { class: 'checkbox__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, h$2("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h$2("small", { class: 'checkbox__error-message' }, this.errorMessage), h$2("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23048,7 +23064,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
 customElements.define(DatePicker.is, DatePicker);
 
-const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__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}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__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}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;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}.date__tooltip.visible{opacity:1}";
 
 const DateInput = class {
   constructor(hostRef) {
@@ -23060,6 +23076,7 @@ const DateInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -23083,6 +23100,12 @@ const DateInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -23117,9 +23140,16 @@ const DateInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `date__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
-    return h$2("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, h$2("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$2("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h$2("small", { class: 'date__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, h$2("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$2("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), h$2("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
+      h$2("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -23129,7 +23159,7 @@ const DateInput = class {
 };
 DateInput.style = dateInputCss;
 
-const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%;padding-top:26px}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__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}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F}.email__label--required::after{content:\"*\";font-family:inherit;color:#1F1F1F;margin-left:2px}.email__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}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__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}.email__tooltip.visible{opacity:1}";
 
 const EmailInput = class {
   constructor(hostRef) {
@@ -23141,6 +23171,7 @@ const EmailInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.validationPattern = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -23165,6 +23196,12 @@ const EmailInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   valueChangedHandler(event) {
     if (this.isDuplicateInput) {
       if (this.name === event.detail.name + 'Duplicate') {
@@ -23219,9 +23256,16 @@ const EmailInput = class {
       return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `email__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
-    return h$2("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, h$2("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, 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$2("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'email__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'email__wrapper--flex' }, h$2("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'email__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, 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$2("small", { class: 'email__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -23248,23 +23292,23 @@ const GeneralInput = class {
     var _a;
     switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
       case 'text':
-        return h$2("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
+        return h$2("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'email':
-        return h$2("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
+        return h$2("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'number':
-        return h$2("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
+        return h$2("number-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'checkbox':
-        return h$2("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling });
+        return h$2("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'datetime':
-        return h$2("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
+        return h$2("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'password':
-        return h$2("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling });
+        return h$2("password-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'radio':
         return h$2("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
       case 'tel':
-        return h$2("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling });
+        return h$2("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip });
       case 'dropdown':
-        return h$2("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling });
+        return h$2("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
       default:
         return h$2("p", null, "The ", this.type, " input type is not valid");
     }
@@ -23514,6 +23558,9 @@ const GeneralRegistration = class {
       return res.json();
     })
       .then((data) => {
+      this.isLoading = false;
+      if (!data)
+        return;
       this.registrationID = data.registrationId;
       if (this.listOfActions.some(action => action == '/register')) {
         this.setRegister();
@@ -23541,9 +23588,7 @@ const GeneralRegistration = class {
     })
       .catch((err) => {
       console.error(err);
-    })
-      .finally(() => {
-      this.isLoading = false;
+      // this.isLoading = false;
     });
   }
   setRegister() {
@@ -23638,7 +23683,7 @@ const GeneralRegistration = class {
     return listOfInputs.filter(input => input.isValid == false).length > 0;
   }
   renderInputs() {
-    return (this.listOfInputs.map(input => h$2("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling })));
+    return (this.listOfInputs.map(input => h$2("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data ? input.data.values : [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip })));
   }
   ;
   renderButtons() {
@@ -23657,7 +23702,7 @@ const GeneralRegistration = class {
 };
 GeneralRegistration.style = generalRegistrationCss;
 
-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%;padding-top:26px}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
+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 NumberInput = class {
   constructor(hostRef) {
@@ -23669,6 +23714,7 @@ const NumberInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.validationPattern = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -23693,6 +23739,12 @@ const NumberInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
@@ -23737,9 +23789,16 @@ const NumberInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `number__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
-    return h$2("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, h$2("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$2("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'number__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'number__wrapper--flex' }, h$2("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'number__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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$2("small", { class: 'number__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -24543,7 +24602,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%;padding-top:26px}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
+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 PasswordInput = class {
   constructor(hostRef) {
@@ -24559,6 +24618,7 @@ const PasswordInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.value = '';
     this.validationPattern = '';
     this.setClientStyling = () => {
@@ -24591,6 +24651,12 @@ const PasswordInput = class {
       }
     }
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
   }
@@ -24641,11 +24707,18 @@ const PasswordInput = class {
       return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
-    return h$2("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, h$2("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
+    return h$2("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'password__wrapper--flex' }, h$2("label", { class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'password__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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$2("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'password__error-message' }, this.errorMessage));
+      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$2("small", { class: 'password__error-message' }, this.errorMessage));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -24655,7 +24728,7 @@ const PasswordInput = class {
 };
 PasswordInput.style = passwordInputCss;
 
-const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}";
+const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.radio__tooltip-icon{position:absolute;right:0;bottom:10px}.radio__tooltip{position:absolute;bottom:35px;right:10px;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}.radio__tooltip.visible{opacity:1}";
 
 const RadioInput = class {
   constructor(hostRef) {
@@ -24667,6 +24740,7 @@ const RadioInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -24690,6 +24764,12 @@ const RadioInput = class {
   validityStateHandler(inputStateEvent) {
     this.sendValidityState.emit(inputStateEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -24714,8 +24794,15 @@ const RadioInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `radio__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
-    return h$2("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, h$2("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h$2("div", { class: 'radio__wrapper' }, h$2("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$2("label", { htmlFor: `${option.label}__input` }, option.label))), h$2("small", { class: 'radio__error-message' }, this.errorMessage));
+    return h$2("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, h$2("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h$2("div", { class: 'radio__wrapper' }, h$2("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$2("label", { htmlFor: `${option.label}__input` }, option.label))), h$2("small", { class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
+      h$2("img", { class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -29065,7 +29152,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
 customElements.define(ComboBox.is, ComboBox);
 
-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%;padding-top:26px}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
+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 SelectInput = class {
   constructor(hostRef) {
@@ -29085,6 +29172,7 @@ const SelectInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -29108,6 +29196,12 @@ const SelectInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   connectedCallback() {
     this.displayedOptions = this.options;
   }
@@ -29167,9 +29261,16 @@ const SelectInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `select__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
-    return h$2("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, h$2("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$2("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$2("small", { class: 'select__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'select__wrapper--flex' }, h$2("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$2("div", { class: 'select__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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$2("small", { class: 'select__error-message' }, this.errorMessage));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -29179,7 +29280,7 @@ const SelectInput = class {
 };
 SelectInput.style = selectInputCss;
 
-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%;padding-top:26px}.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__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
+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 TelInput = class {
   constructor(hostRef) {
@@ -29191,6 +29292,7 @@ const TelInput = class {
      */
     this.clientStyling = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.validationPattern = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -29215,6 +29317,12 @@ const TelInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   connectedCallback() {
     this.validationPattern = this.setPattern();
     if (this.defaultValue) {
@@ -29289,9 +29397,16 @@ const TelInput = class {
       return translate$2('requiredError', this.language);
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `tel__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
-    return h$2("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: `tel__wrapper--flex ${invalidClass}` }, h$2("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.prefixValue = e.target.value }), h$2("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$2("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("small", { class: 'tel__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'tel__wrapper--flex-label' }, h$2("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("div", { class: `tel__wrapper--flex ${invalidClass}` }, h$2("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.prefixValue = e.target.value }), h$2("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$2("small", { class: 'tel__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],
@@ -29300,7 +29415,7 @@ const TelInput = class {
 };
 TelInput.style = telInputCss;
 
-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%;padding-top:26px}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#1F1F1F;position:absolute;top:0;left:0}.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}";
+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 TextInput = class {
   constructor(hostRef) {
@@ -29317,6 +29432,7 @@ const TextInput = class {
     this.clientStyling = '';
     this.errorMessage = '';
     this.limitStylingAppends = false;
+    this.showTooltip = false;
     this.value = '';
     this.customRules = [];
     this.validationPattern = '';
@@ -29342,6 +29458,12 @@ const TextInput = class {
   valueHandler(inputValueEvent) {
     this.sendInputValue.emit(inputValueEvent);
   }
+  handleClickOutside(event) {
+    if (event.composedPath()[0] === this.tooltipIconReference)
+      return;
+    if (event.composedPath()[0] !== this.tooltipReference)
+      this.showTooltip = false;
+  }
   valueChangedHandler(event) {
     if (this.isDuplicateInput) {
       if (this.name === event.detail.name + 'Duplicate') {
@@ -29396,9 +29518,16 @@ const TextInput = class {
       return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
     }
   }
+  renderTooltip() {
+    if (this.showTooltip) {
+      return (h$2("div", { class: `text__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
+    }
+    return null;
+  }
   render() {
     const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
-    return h$2("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, h$2("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("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$2("small", { class: 'text__error-message' }, this.errorMessage));
+    return h$2("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, h$2("div", { class: 'text__wrapper--flex' }, h$2("label", { class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'text__wrapper--relative' }, this.tooltip &&
+      h$2("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$2("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$2("small", { class: 'text__error-message' }, this.errorMessage));
   }
   static get watchers() { return {
     "isValid": ["validityChanged"],

package/dist/esm/general-registration.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-b3c0d3c9.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-5b8d16cc.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32]},[[16,"sendInputValue","valueChangedHandler"]]]]]], options);
+  return bootstrapLazy([["checkbox-input_11",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationsUrl":[513,"translations-url"],"errorMessage":[32],"isFormValid":[32],"listOfInputs":[32],"isLoading":[32],"registrationStep":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
 });

package/dist/esm/{index-b3c0d3c9.js → index-5b8d16cc.js}

@@ -53,6 +53,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
     }
 };
 const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
     if (flags & 16 /* TargetBody */)
         return doc.body;
     return elm;