@everymatrix/general-registration 1.10.16 → 1.10.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/cjs/checkbox-input_11.cjs.entry.js +221 -79
  2. package/dist/cjs/general-registration.cjs.js +2 -2
  3. package/dist/cjs/{index-a69a5278.js → index-5b4544e8.js} +2 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/collection/components/general-registration/general-registration.css +5 -2
  6. package/dist/collection/components/general-registration/general-registration.js +21 -8
  7. package/dist/collection/utils/locale.utils.js +25 -12
  8. package/dist/components/checkbox-input2.js +24 -7
  9. package/dist/components/date-input2.js +24 -8
  10. package/dist/components/email-input2.js +21 -7
  11. package/dist/components/general-input2.js +9 -8
  12. package/dist/components/general-registration.js +31 -21
  13. package/dist/components/number-input2.js +35 -7
  14. package/dist/components/password-input2.js +25 -9
  15. package/dist/components/radio-input2.js +21 -5
  16. package/dist/components/select-input2.js +24 -8
  17. package/dist/components/tel-input2.js +21 -7
  18. package/dist/components/text-input2.js +21 -8
  19. package/dist/components/tooltipIcon.js +29 -0
  20. package/dist/esm/checkbox-input_11.entry.js +221 -79
  21. package/dist/esm/general-registration.js +2 -2
  22. package/dist/esm/{index-b3c0d3c9.js → index-5b8d16cc.js} +2 -0
  23. package/dist/esm/loader.js +2 -2
  24. package/dist/general-registration/general-registration.esm.js +1 -1
  25. package/dist/general-registration/{p-4142a899.entry.js → p-7749aa7a.entry.js} +130 -130
  26. package/dist/general-registration/p-cba9c0b1.js +1 -0
  27. package/dist/types/components/general-registration/general-registration.d.ts +1 -0
  28. package/dist/types/utils/locale.utils.d.ts +1 -0
  29. package/package.json +1 -1
  30. package/dist/components/locale.utils.js +0 -30
  31. package/dist/general-registration/p-35d6abbe.js +0 -1
  32. package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/locale.utils.d.ts +0 -5
package/dist/cjs/checkbox-input_11.cjs.entry.js CHANGED
@@ -2,23 +2,20 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-a69a5278.js');
5
+ const index = require('./index-5b4544e8.js');
6
6
 
7
7
  const DEFAULT_LANGUAGE$1 = 'en';
8
8
  const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
9
9
  const TRANSLATIONS$1 = {
10
- en: {
11
- dateError: 'The selected date should be between {min} and {max}',
12
- numberLengthError: 'The number should be between {min} and {max}',
13
- lengthError: `The length should be between {minLength} and {maxLength}`,
14
- requiredError: 'This input is required.',
15
- nextButton: 'Next',
16
- backButton: 'Back',
17
- doneButton: 'Done'
10
+ "en": {
11
+ "dateError": 'The selected date should be between {min} and {max}',
12
+ "numberLengthError": 'The number should be between {min} and {max}',
13
+ "lengthError": `The length should be between {minLength} and {maxLength}`,
14
+ "requiredError": 'This input is required.',
18
15
  },
19
- ro: {
20
- lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
21
- requiredError: 'Acest câmp este obligatoriu.'
16
+ "ro": {
17
+ "lengthError": `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
18
+ "requiredError": 'Acest câmp este obligatoriu.'
22
19
  }
23
20
  };
24
21
  const translate$2 = (key, customLang, values) => {
@@ -33,7 +30,9 @@ const translate$2 = (key, customLang, values) => {
33
30
  return translation;
34
31
  };
35
32
 
36
- 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}";
33
+ const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMiAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iMTYuMTUiIHdpZHRoPSIxLjgyIiBoZWlnaHQ9IjcuNjAwMDEiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTEuOTA5OSAxNi4xNSkiIGZpbGw9IiMyQjJEM0YiLz4KPHJlY3QgeD0iMTEuOTA5OSIgeT0iNi42NTAwMiIgd2lkdGg9IjEuODIiIGhlaWdodD0iMS45MDAwMSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCAxMS45MDk5IDYuNjUwMDIpIiBmaWxsPSIjMkIyRDNGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC45ODk5OSAxMC40NUMwLjk4OTk5IDQuNjc3NjggNS40NzE5NyAwIDExIDBDMTYuNTI4IDAgMjEuMDEgNC42Nzc2OCAyMS4wMSAxMC40NUMyMS4wMSAxNi4yMjEgMTYuNTI4IDIwLjkgMTEgMjAuOUM1LjQ3MTk3IDIwLjkgMC45ODk5OSAxNi4yMjEgMC45ODk5OSAxMC40NVpNMi44MDk5OSAxMC40NTA2QzIuODA5OTkgMTUuMTcyMyA2LjQ3Njc3IDE5IDExIDE5QzE1LjUyMiAxOSAxOS4xOSAxNS4xNzIzIDE5LjE5IDEwLjQ1MDZDMTkuMTkgNS43Mjg5MSAxNS41MjIgMS45MDAwMSAxMSAxLjkwMDAxQzYuNDc2NzcgMS45MDAwMSAyLjgwOTk5IDUuNzI4OTEgMi44MDk5OSAxMC40NTA2WiIgZmlsbD0iIzJCMkQzRiIvPgo8L3N2Zz4K';
34
+
35
+ 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}";
37
36
 
38
37
  const CheckboxInput = class {
39
38
  constructor(hostRef) {
@@ -49,6 +48,7 @@ const CheckboxInput = class {
49
48
  */
50
49
  this.clientStyling = '';
51
50
  this.limitStylingAppends = false;
51
+ this.showTooltip = false;
52
52
  this.value = '';
53
53
  this.setClientStyling = () => {
54
54
  let sheet = document.createElement('style');
@@ -72,6 +72,12 @@ const CheckboxInput = class {
72
72
  valueHandler(inputValueEvent) {
73
73
  this.sendInputValue.emit(inputValueEvent);
74
74
  }
75
+ handleClickOutside(event) {
76
+ if (event.composedPath()[0] === this.tooltipIconReference)
77
+ return;
78
+ if (event.composedPath()[0] !== this.tooltipReference)
79
+ this.showTooltip = false;
80
+ }
75
81
  componentDidRender() {
76
82
  // start custom styling area
77
83
  if (!this.limitStylingAppends && this.stylingContainer) {
@@ -80,8 +86,6 @@ const CheckboxInput = class {
80
86
  this.limitStylingAppends = true;
81
87
  }
82
88
  // end custom styling area
83
- }
84
- componentDidLoad() {
85
89
  if (this.defaultValue) {
86
90
  this.value = this.defaultValue;
87
91
  this.valueHandler({ name: this.name, value: this.value });
@@ -102,8 +106,18 @@ const CheckboxInput = class {
102
106
  return translate$2('requiredError', this.language);
103
107
  }
104
108
  }
109
+ renderLabel() {
110
+ return (index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
111
+ }
112
+ renderTooltip() {
113
+ if (this.showTooltip) {
114
+ return (index.h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
115
+ }
116
+ return null;
117
+ }
105
118
  render() {
106
- return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("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() }), index.h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage));
119
+ return index.h("div", { class: 'checkbox__wrapper', ref: el => this.stylingContainer = el }, index.h("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(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
120
+ index.h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
107
121
  }
108
122
  static get watchers() { return {
109
123
  "isValid": ["validityChanged"],
@@ -23054,7 +23068,7 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
23054
23068
 
23055
23069
  customElements.define(DatePicker.is, DatePicker);
23056
23070
 
23057
- 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}";
23071
+ 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}";
23058
23072
 
23059
23073
  const DateInput = class {
23060
23074
  constructor(hostRef) {
@@ -23066,6 +23080,7 @@ const DateInput = class {
23066
23080
  */
23067
23081
  this.clientStyling = '';
23068
23082
  this.limitStylingAppends = false;
23083
+ this.showTooltip = false;
23069
23084
  this.setClientStyling = () => {
23070
23085
  let sheet = document.createElement('style');
23071
23086
  sheet.innerHTML = this.clientStyling;
@@ -23089,6 +23104,12 @@ const DateInput = class {
23089
23104
  valueHandler(inputValueEvent) {
23090
23105
  this.sendInputValue.emit(inputValueEvent);
23091
23106
  }
23107
+ handleClickOutside(event) {
23108
+ if (event.composedPath()[0] === this.tooltipIconReference)
23109
+ return;
23110
+ if (event.composedPath()[0] !== this.tooltipReference)
23111
+ this.showTooltip = false;
23112
+ }
23092
23113
  componentDidRender() {
23093
23114
  // start custom styling area
23094
23115
  if (!this.limitStylingAppends && this.stylingContainer) {
@@ -23097,14 +23118,14 @@ const DateInput = class {
23097
23118
  this.limitStylingAppends = true;
23098
23119
  }
23099
23120
  // end custom styling area
23100
- }
23101
- componentDidLoad() {
23102
- this.inputReference = this.element.shadowRoot.querySelector('input');
23103
23121
  if (this.defaultValue) {
23104
23122
  this.value = this.defaultValue;
23105
23123
  this.valueHandler({ name: this.name, value: this.value });
23106
23124
  }
23107
23125
  }
23126
+ componentDidLoad() {
23127
+ this.inputReference = this.element.shadowRoot.querySelector('input');
23128
+ }
23108
23129
  handleInput(event) {
23109
23130
  this.value = event.target.value;
23110
23131
  this.errorMessage = this.setErrorMessage();
@@ -23123,9 +23144,16 @@ const DateInput = class {
23123
23144
  return translate$2('requiredError', this.language);
23124
23145
  }
23125
23146
  }
23147
+ renderTooltip() {
23148
+ if (this.showTooltip) {
23149
+ return (index.h("div", { class: `date__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
23150
+ }
23151
+ return null;
23152
+ }
23126
23153
  render() {
23127
23154
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'date__input--invalid';
23128
- return index.h("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("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) }), index.h("small", { class: 'date__error-message' }, this.errorMessage));
23155
+ return index.h("div", { class: 'date__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("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) }), index.h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
23156
+ index.h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
23129
23157
  }
23130
23158
  get element() { return index.getElement(this); }
23131
23159
  static get watchers() { return {
@@ -23135,7 +23163,7 @@ const DateInput = class {
23135
23163
  };
23136
23164
  DateInput.style = dateInputCss;
23137
23165
 
23138
- 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}";
23166
+ 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}";
23139
23167
 
23140
23168
  const EmailInput = class {
23141
23169
  constructor(hostRef) {
@@ -23147,6 +23175,7 @@ const EmailInput = class {
23147
23175
  */
23148
23176
  this.clientStyling = '';
23149
23177
  this.limitStylingAppends = false;
23178
+ this.showTooltip = false;
23150
23179
  this.validationPattern = '';
23151
23180
  this.setClientStyling = () => {
23152
23181
  let sheet = document.createElement('style');
@@ -23171,6 +23200,12 @@ const EmailInput = class {
23171
23200
  valueHandler(inputValueEvent) {
23172
23201
  this.sendInputValue.emit(inputValueEvent);
23173
23202
  }
23203
+ handleClickOutside(event) {
23204
+ if (event.composedPath()[0] === this.tooltipIconReference)
23205
+ return;
23206
+ if (event.composedPath()[0] !== this.tooltipReference)
23207
+ this.showTooltip = false;
23208
+ }
23174
23209
  valueChangedHandler(event) {
23175
23210
  if (this.isDuplicateInput) {
23176
23211
  if (this.name === event.detail.name + 'Duplicate') {
@@ -23189,8 +23224,6 @@ const EmailInput = class {
23189
23224
  this.limitStylingAppends = true;
23190
23225
  }
23191
23226
  // end custom styling area
23192
- }
23193
- componentDidLoad() {
23194
23227
  if (this.defaultValue) {
23195
23228
  this.value = this.defaultValue;
23196
23229
  this.valueHandler({ name: this.name, value: this.value });
@@ -23227,9 +23260,16 @@ const EmailInput = class {
23227
23260
  return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
23228
23261
  }
23229
23262
  }
23263
+ renderTooltip() {
23264
+ if (this.showTooltip) {
23265
+ return (index.h("div", { class: `email__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
23266
+ }
23267
+ return null;
23268
+ }
23230
23269
  render() {
23231
23270
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
23232
- return index.h("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, index.h("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) }), index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'email__error-message' }, this.errorMessage));
23271
+ return index.h("div", { class: 'email__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'email__wrapper--flex' }, index.h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
23272
+ index.h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("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) }), index.h("small", { class: 'email__error-message' }, this.errorMessage));
23233
23273
  }
23234
23274
  static get watchers() { return {
23235
23275
  "isValid": ["validityChanged"],
@@ -23256,23 +23296,23 @@ const GeneralInput = class {
23256
23296
  var _a;
23257
23297
  switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
23258
23298
  case 'text':
23259
- return index.h("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 });
23299
+ return index.h("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 });
23260
23300
  case 'email':
23261
- return index.h("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 });
23301
+ return index.h("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 });
23262
23302
  case 'number':
23263
- return index.h("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 });
23303
+ return index.h("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 });
23264
23304
  case 'checkbox':
23265
- return index.h("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 });
23305
+ return index.h("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 });
23266
23306
  case 'datetime':
23267
- return index.h("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 });
23307
+ return index.h("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 });
23268
23308
  case 'password':
23269
- return index.h("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 });
23309
+ return index.h("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 });
23270
23310
  case 'radio':
23271
23311
  return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
23272
23312
  case 'tel':
23273
- return index.h("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 });
23313
+ return index.h("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 });
23274
23314
  case 'dropdown':
23275
- return index.h("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 });
23315
+ return index.h("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 });
23276
23316
  default:
23277
23317
  return index.h("p", null, "The ", this.type, " input type is not valid");
23278
23318
  }
@@ -23283,18 +23323,16 @@ GeneralInput.style = generalInputCss;
23283
23323
  const DEFAULT_LANGUAGE = 'en';
23284
23324
  const SUPPORTED_LANGUAGES = ['ro', 'en'];
23285
23325
  const TRANSLATIONS = {
23286
- en: {
23287
- dateError: 'The selected date should be between {min} and {max}',
23288
- numberLengthError: 'The number should be between {min} and {max}',
23289
- lengthError: `The length should be between {minLength} and {maxLength}`,
23290
- requiredError: 'This input is required.',
23291
- nextButton: 'Next',
23292
- backButton: 'Back',
23293
- doneButton: 'Done'
23294
- },
23295
- ro: {
23296
- lengthError: `Cuvântul introdus este prea scurt. {minLength} and {maxLength}`,
23297
- requiredError: 'Acest câmp este obligatoriu.'
23326
+ "en": {
23327
+ "nextButton": 'Next',
23328
+ "backButton": 'Back',
23329
+ "doneButton": 'Done',
23330
+ "GmErr_BadRequest_Duplicate_User": 'A user with this information already exists.',
23331
+ "GmErr_BadRequest_ModelValidationFailed": 'Something went wrong... Please try again.',
23332
+ "GmErr_BadInternalConfigs": 'Something went wrong... Please try again.',
23333
+ "GmErr_Unauthorized": 'Something went wrong... Please try again.',
23334
+ "GmErr_NotFound": 'Something went wrong... Please try again.',
23335
+ "GmErr_UnexpectedException": 'Something went wrong... Please try again.',
23298
23336
  }
23299
23337
  };
23300
23338
  const translate = (key, customLang, values) => {
@@ -23309,7 +23347,7 @@ const translate = (key, customLang, values) => {
23309
23347
  return translation;
23310
23348
  };
23311
23349
 
23312
- const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n text-transform: uppercase;\n width: 250px;\n height: 40px;\n border-radius: 3px;\n}\n.registration__button:hover {\n opacity: 0.8;\n}\n.registration__button:active {\n opacity: 1;\n}\n.registration__button--next {\n color: #FFFFFF;\n background-color: #B0B0B0;\n border: none;\n}\n.registration__button--back {\n color: #B0B0B0;\n background-color: #FFFFFF;\n border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n opacity: 0.5;\n}\n.registration__button--disabled:hover {\n opacity: 0.5;\n}\n.registration__button--first-step {\n display: none;\n}\n\n@container (min-width: 450px) {\n .registration__form {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .registration__buttons-wrapper {\n flex-direction: column;\n gap: 15px;\n }\n}";
23350
+ const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__error-message {\n color: #cc0000b3;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n text-transform: uppercase;\n width: 250px;\n height: 40px;\n border-radius: 3px;\n}\n.registration__button:hover {\n opacity: 0.8;\n}\n.registration__button:active {\n opacity: 1;\n}\n.registration__button--next {\n color: #FFFFFF;\n background-color: #B0B0B0;\n border: none;\n}\n.registration__button--back {\n color: #B0B0B0;\n background-color: #FFFFFF;\n border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n opacity: 0.5;\n}\n.registration__button--disabled:hover {\n opacity: 0.5;\n}\n.registration__button--first-step {\n display: none;\n}\n\n@container (min-width: 450px) {\n .registration__form {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}";
23313
23351
 
23314
23352
  const GeneralRegistration = class {
23315
23353
  constructor(hostRef) {
@@ -23363,6 +23401,7 @@ const GeneralRegistration = class {
23363
23401
  window.postMessage({ type: 'registrationStepUpdated', step: this.registrationStep }, window.location.href);
23364
23402
  }
23365
23403
  setFormValidity() {
23404
+ this.errorMessage = '';
23366
23405
  this.isFormValid = !this.getInvalidStatus(this.listOfInputs);
23367
23406
  }
23368
23407
  checkInputsValidityHandler(event) {
@@ -23435,7 +23474,6 @@ const GeneralRegistration = class {
23435
23474
  }
23436
23475
  if (state.type == 'values') {
23437
23476
  const savedValues = savedUserData[this.registrationStep].registerUserData;
23438
- console.log(savedValues);
23439
23477
  this.listOfInputValues = Object.keys(savedValues).map(name => {
23440
23478
  return { name, value: savedValues[name].value, isDuplicate: savedValues[name].isDuplicate };
23441
23479
  });
@@ -23506,8 +23544,20 @@ const GeneralRegistration = class {
23506
23544
  };
23507
23545
  fetch(url.href, options)
23508
23546
  .then((res) => {
23509
- if (res.status >= 300) {
23510
- throw new Error('err');
23547
+ if (!res.ok) {
23548
+ return res.json().then(error => {
23549
+ this.errorCode = error.thirdPartyResponse.errorCode;
23550
+ // Show the idomsoft error if it is the case
23551
+ if (this.errorCode == 'GmErr_BadRequest_IdomsoftVerification_ShouldRetry') {
23552
+ this.errorMessage = error.thirdPartyResponse.message;
23553
+ }
23554
+ else if (this.errorCode == 'GmErr_BadRequest') {
23555
+ this.errorMessage = error.thirdPartyResponse.message;
23556
+ }
23557
+ else {
23558
+ this.errorMessage = translate(`${this.errorCode}`, this.language) || this.errorCode;
23559
+ }
23560
+ });
23511
23561
  }
23512
23562
  return res.json();
23513
23563
  })
@@ -23533,13 +23583,13 @@ const GeneralRegistration = class {
23533
23583
  this.stepsStateMachine({ event: 'set', type: 'inputs' });
23534
23584
  });
23535
23585
  }
23586
+ // Set it in local storage.
23587
+ this.stepsStateMachine({ event: 'set', type: 'inputs' });
23536
23588
  }
23537
23589
  })
23538
23590
  .catch((err) => {
23539
23591
  console.error(err);
23540
- })
23541
- .finally(() => {
23542
- this.isLoading = false;
23592
+ // this.isLoading = false;
23543
23593
  });
23544
23594
  }
23545
23595
  setRegister() {
@@ -23634,7 +23684,7 @@ const GeneralRegistration = class {
23634
23684
  return listOfInputs.filter(input => input.isValid == false).length > 0;
23635
23685
  }
23636
23686
  renderInputs() {
23637
- return (this.listOfInputs.map(input => index.h("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 })));
23687
+ return (this.listOfInputs.map(input => index.h("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 })));
23638
23688
  }
23639
23689
  ;
23640
23690
  renderButtons() {
@@ -23644,7 +23694,7 @@ const GeneralRegistration = class {
23644
23694
  if (this.isLoading) {
23645
23695
  return index.h("p", null, "Please wait, loading ...");
23646
23696
  }
23647
- return (index.h("div", { class: `registration registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), this.renderButtons()));
23697
+ return (index.h("div", { class: `registration registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, index.h("form", { action: '.', id: 'RegistrationForm', class: 'registration__form' }, this.renderInputs()), index.h("p", { class: 'registration__error-message' }, this.errorMessage), this.renderButtons()));
23648
23698
  }
23649
23699
  static get watchers() { return {
23650
23700
  "registrationStep": ["sendStep"],
@@ -23653,7 +23703,7 @@ const GeneralRegistration = class {
23653
23703
  };
23654
23704
  GeneralRegistration.style = generalRegistrationCss;
23655
23705
 
23656
- 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}";
23706
+ 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}";
23657
23707
 
23658
23708
  const NumberInput = class {
23659
23709
  constructor(hostRef) {
@@ -23665,6 +23715,8 @@ const NumberInput = class {
23665
23715
  */
23666
23716
  this.clientStyling = '';
23667
23717
  this.limitStylingAppends = false;
23718
+ this.showTooltip = false;
23719
+ this.validationPattern = '';
23668
23720
  this.setClientStyling = () => {
23669
23721
  let sheet = document.createElement('style');
23670
23722
  sheet.innerHTML = this.clientStyling;
@@ -23688,6 +23740,15 @@ const NumberInput = class {
23688
23740
  valueHandler(inputValueEvent) {
23689
23741
  this.sendInputValue.emit(inputValueEvent);
23690
23742
  }
23743
+ handleClickOutside(event) {
23744
+ if (event.composedPath()[0] === this.tooltipIconReference)
23745
+ return;
23746
+ if (event.composedPath()[0] !== this.tooltipReference)
23747
+ this.showTooltip = false;
23748
+ }
23749
+ connectedCallback() {
23750
+ this.validationPattern = this.setPattern();
23751
+ }
23691
23752
  componentDidRender() {
23692
23753
  // start custom styling area
23693
23754
  if (!this.limitStylingAppends && this.stylingContainer) {
@@ -23696,8 +23757,6 @@ const NumberInput = class {
23696
23757
  this.limitStylingAppends = true;
23697
23758
  }
23698
23759
  // end custom styling area
23699
- }
23700
- componentDidLoad() {
23701
23760
  if (this.defaultValue) {
23702
23761
  this.value = this.defaultValue;
23703
23762
  this.valueHandler({ name: this.name, value: this.value });
@@ -23713,7 +23772,17 @@ const NumberInput = class {
23713
23772
  setValidity() {
23714
23773
  return this.inputReference.validity.valid;
23715
23774
  }
23775
+ setPattern() {
23776
+ var _a, _b;
23777
+ if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
23778
+ return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
23779
+ }
23780
+ }
23716
23781
  setErrorMessage() {
23782
+ var _a;
23783
+ if (this.inputReference.validity.patternMismatch) {
23784
+ return (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorMessage;
23785
+ }
23717
23786
  if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
23718
23787
  return translate$2('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
23719
23788
  }
@@ -23721,9 +23790,16 @@ const NumberInput = class {
23721
23790
  return translate$2('requiredError', this.language);
23722
23791
  }
23723
23792
  }
23793
+ renderTooltip() {
23794
+ if (this.showTooltip) {
23795
+ return (index.h("div", { class: `number__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
23796
+ }
23797
+ return null;
23798
+ }
23724
23799
  render() {
23725
23800
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'number__input--invalid';
23726
- return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'number__error-message' }, this.errorMessage));
23801
+ return index.h("div", { class: 'number__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'number__wrapper--flex' }, index.h("label", { class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'number__wrapper--relative' }, this.tooltip &&
23802
+ index.h("img", { class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onBlur: (e) => this.handleInput(e) }), index.h("small", { class: 'number__error-message' }, this.errorMessage));
23727
23803
  }
23728
23804
  static get watchers() { return {
23729
23805
  "isValid": ["validityChanged"],
@@ -24527,7 +24603,7 @@ class PasswordField extends TextField {
24527
24603
 
24528
24604
  customElements.define(PasswordField.is, PasswordField);
24529
24605
 
24530
- 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}";
24606
+ 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}";
24531
24607
 
24532
24608
  const PasswordInput = class {
24533
24609
  constructor(hostRef) {
@@ -24543,6 +24619,7 @@ const PasswordInput = class {
24543
24619
  */
24544
24620
  this.clientStyling = '';
24545
24621
  this.limitStylingAppends = false;
24622
+ this.showTooltip = false;
24546
24623
  this.value = '';
24547
24624
  this.validationPattern = '';
24548
24625
  this.setClientStyling = () => {
@@ -24575,6 +24652,12 @@ const PasswordInput = class {
24575
24652
  }
24576
24653
  }
24577
24654
  }
24655
+ handleClickOutside(event) {
24656
+ if (event.composedPath()[0] === this.tooltipIconReference)
24657
+ return;
24658
+ if (event.composedPath()[0] !== this.tooltipReference)
24659
+ this.showTooltip = false;
24660
+ }
24578
24661
  connectedCallback() {
24579
24662
  this.validationPattern = this.setPattern();
24580
24663
  }
@@ -24586,14 +24669,14 @@ const PasswordInput = class {
24586
24669
  this.limitStylingAppends = true;
24587
24670
  }
24588
24671
  // end custom styling area
24589
- }
24590
- componentDidLoad() {
24591
- this.inputReference = this.element.shadowRoot.querySelector('input');
24592
24672
  if (this.defaultValue) {
24593
24673
  this.value = this.defaultValue;
24594
24674
  this.valueHandler({ name: this.name, value: this.value });
24595
24675
  }
24596
24676
  }
24677
+ componentDidLoad() {
24678
+ this.inputReference = this.element.shadowRoot.querySelector('input');
24679
+ }
24597
24680
  handleInput(event) {
24598
24681
  this.value = event.target.value;
24599
24682
  this.errorMessage = this.setErrorMessage();
@@ -24625,11 +24708,18 @@ const PasswordInput = class {
24625
24708
  return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
24626
24709
  }
24627
24710
  }
24711
+ renderTooltip() {
24712
+ if (this.showTooltip) {
24713
+ return (index.h("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
24714
+ }
24715
+ return null;
24716
+ }
24628
24717
  render() {
24629
24718
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'password__input--invalid';
24630
- return index.h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
24719
+ return index.h("div", { class: 'password__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'password__wrapper--flex' }, index.h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'password__wrapper--relative' }, this.tooltip &&
24720
+ index.h("img", { class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue,
24631
24721
  // ref={(el) => this.inputReference = el as HTMLInputElement}
24632
- 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) }), index.h("label", { class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'password__error-message' }, this.errorMessage));
24722
+ 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) }), index.h("small", { class: 'password__error-message' }, this.errorMessage));
24633
24723
  }
24634
24724
  get element() { return index.getElement(this); }
24635
24725
  static get watchers() { return {
@@ -24639,7 +24729,7 @@ const PasswordInput = class {
24639
24729
  };
24640
24730
  PasswordInput.style = passwordInputCss;
24641
24731
 
24642
- 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}";
24732
+ 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}";
24643
24733
 
24644
24734
  const RadioInput = class {
24645
24735
  constructor(hostRef) {
@@ -24651,6 +24741,7 @@ const RadioInput = class {
24651
24741
  */
24652
24742
  this.clientStyling = '';
24653
24743
  this.limitStylingAppends = false;
24744
+ this.showTooltip = false;
24654
24745
  this.setClientStyling = () => {
24655
24746
  let sheet = document.createElement('style');
24656
24747
  sheet.innerHTML = this.clientStyling;
@@ -24674,6 +24765,12 @@ const RadioInput = class {
24674
24765
  validityStateHandler(inputStateEvent) {
24675
24766
  this.sendValidityState.emit(inputStateEvent);
24676
24767
  }
24768
+ handleClickOutside(event) {
24769
+ if (event.composedPath()[0] === this.tooltipIconReference)
24770
+ return;
24771
+ if (event.composedPath()[0] !== this.tooltipReference)
24772
+ this.showTooltip = false;
24773
+ }
24677
24774
  componentDidRender() {
24678
24775
  // start custom styling area
24679
24776
  if (!this.limitStylingAppends && this.stylingContainer) {
@@ -24698,8 +24795,15 @@ const RadioInput = class {
24698
24795
  return translate$2('requiredError', this.language);
24699
24796
  }
24700
24797
  }
24798
+ renderTooltip() {
24799
+ if (this.showTooltip) {
24800
+ return (index.h("div", { class: `radio__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
24801
+ }
24802
+ return null;
24803
+ }
24701
24804
  render() {
24702
- return index.h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage));
24805
+ return index.h("fieldset", { class: 'radio__fieldset', ref: el => this.stylingContainer = el }, index.h("legend", { class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
24806
+ index.h("img", { class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
24703
24807
  }
24704
24808
  static get watchers() { return {
24705
24809
  "isValid": ["validityChanged"],
@@ -29049,7 +29153,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
29049
29153
 
29050
29154
  customElements.define(ComboBox.is, ComboBox);
29051
29155
 
29052
- 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}";
29156
+ 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}";
29053
29157
 
29054
29158
  const SelectInput = class {
29055
29159
  constructor(hostRef) {
@@ -29069,6 +29173,7 @@ const SelectInput = class {
29069
29173
  */
29070
29174
  this.clientStyling = '';
29071
29175
  this.limitStylingAppends = false;
29176
+ this.showTooltip = false;
29072
29177
  this.setClientStyling = () => {
29073
29178
  let sheet = document.createElement('style');
29074
29179
  sheet.innerHTML = this.clientStyling;
@@ -29092,6 +29197,12 @@ const SelectInput = class {
29092
29197
  valueHandler(inputValueEvent) {
29093
29198
  this.sendInputValue.emit(inputValueEvent);
29094
29199
  }
29200
+ handleClickOutside(event) {
29201
+ if (event.composedPath()[0] === this.tooltipIconReference)
29202
+ return;
29203
+ if (event.composedPath()[0] !== this.tooltipReference)
29204
+ this.showTooltip = false;
29205
+ }
29095
29206
  connectedCallback() {
29096
29207
  this.displayedOptions = this.options;
29097
29208
  }
@@ -29114,14 +29225,14 @@ const SelectInput = class {
29114
29225
  this.limitStylingAppends = true;
29115
29226
  }
29116
29227
  // end custom styling area
29117
- }
29118
- componentDidLoad() {
29119
- this.inputReference = this.element.shadowRoot.querySelector('input');
29120
29228
  if (this.defaultValue) {
29121
29229
  this.value = this.defaultValue;
29122
29230
  this.valueHandler({ name: this.name, value: this.value });
29123
29231
  }
29124
29232
  }
29233
+ componentDidLoad() {
29234
+ this.inputReference = this.element.shadowRoot.querySelector('input');
29235
+ }
29125
29236
  getOptions() {
29126
29237
  // TEMPORARY FOR DEMO PURPOSES UNTIL NORWAY CONFIGURES AN ACTUAL ENDPOINT...
29127
29238
  const url = new URL("https://demo-api.stage.norway.everymatrix.com/v1/player/countries");
@@ -29151,9 +29262,16 @@ const SelectInput = class {
29151
29262
  return translate$2('requiredError', this.language);
29152
29263
  }
29153
29264
  }
29265
+ renderTooltip() {
29266
+ if (this.showTooltip) {
29267
+ return (index.h("div", { class: `select__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
29268
+ }
29269
+ return null;
29270
+ }
29154
29271
  render() {
29155
29272
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
29156
- return index.h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
29273
+ return index.h("div", { class: 'select__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'select__wrapper--flex' }, index.h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
29274
+ index.h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, items: this.displayedOptions, onBlur: (e) => this.handleChange(e) }), index.h("small", { class: 'select__error-message' }, this.errorMessage));
29157
29275
  }
29158
29276
  get element() { return index.getElement(this); }
29159
29277
  static get watchers() { return {
@@ -29163,7 +29281,7 @@ const SelectInput = class {
29163
29281
  };
29164
29282
  SelectInput.style = selectInputCss;
29165
29283
 
29166
- 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}";
29284
+ 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}";
29167
29285
 
29168
29286
  const TelInput = class {
29169
29287
  constructor(hostRef) {
@@ -29175,6 +29293,7 @@ const TelInput = class {
29175
29293
  */
29176
29294
  this.clientStyling = '';
29177
29295
  this.limitStylingAppends = false;
29296
+ this.showTooltip = false;
29178
29297
  this.validationPattern = '';
29179
29298
  this.setClientStyling = () => {
29180
29299
  let sheet = document.createElement('style');
@@ -29199,6 +29318,12 @@ const TelInput = class {
29199
29318
  valueHandler(inputValueEvent) {
29200
29319
  this.sendInputValue.emit(inputValueEvent);
29201
29320
  }
29321
+ handleClickOutside(event) {
29322
+ if (event.composedPath()[0] === this.tooltipIconReference)
29323
+ return;
29324
+ if (event.composedPath()[0] !== this.tooltipReference)
29325
+ this.showTooltip = false;
29326
+ }
29202
29327
  connectedCallback() {
29203
29328
  this.validationPattern = this.setPattern();
29204
29329
  if (this.defaultValue) {
@@ -29225,8 +29350,6 @@ const TelInput = class {
29225
29350
  this.limitStylingAppends = true;
29226
29351
  }
29227
29352
  // end custom styling area
29228
- }
29229
- componentDidLoad() {
29230
29353
  if (this.defaultValue) {
29231
29354
  this.value = `${this.prefixValue}|${this.phoneValue}`;
29232
29355
  this.valueHandler({ name: this.name, value: this.value });
@@ -29275,9 +29398,16 @@ const TelInput = class {
29275
29398
  return translate$2('requiredError', this.language);
29276
29399
  }
29277
29400
  }
29401
+ renderTooltip() {
29402
+ if (this.showTooltip) {
29403
+ return (index.h("div", { class: `tel__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
29404
+ }
29405
+ return null;
29406
+ }
29278
29407
  render() {
29279
29408
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
29280
- return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onBlur: (e) => this.prefixValue = e.target.value }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
29409
+ return index.h("div", { class: 'tel__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'tel__wrapper--flex-label' }, index.h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
29410
+ index.h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.prefixValue = e.target.value }), index.h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onBlur: (e) => this.handleInput(e) })), index.h("small", { class: 'tel__error-message' }, this.errorMessage));
29281
29411
  }
29282
29412
  static get watchers() { return {
29283
29413
  "isValid": ["validityChanged"],
@@ -29286,7 +29416,7 @@ const TelInput = class {
29286
29416
  };
29287
29417
  TelInput.style = telInputCss;
29288
29418
 
29289
- 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}";
29419
+ 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}";
29290
29420
 
29291
29421
  const TextInput = class {
29292
29422
  constructor(hostRef) {
@@ -29303,6 +29433,7 @@ const TextInput = class {
29303
29433
  this.clientStyling = '';
29304
29434
  this.errorMessage = '';
29305
29435
  this.limitStylingAppends = false;
29436
+ this.showTooltip = false;
29306
29437
  this.value = '';
29307
29438
  this.customRules = [];
29308
29439
  this.validationPattern = '';
@@ -29328,6 +29459,12 @@ const TextInput = class {
29328
29459
  valueHandler(inputValueEvent) {
29329
29460
  this.sendInputValue.emit(inputValueEvent);
29330
29461
  }
29462
+ handleClickOutside(event) {
29463
+ if (event.composedPath()[0] === this.tooltipIconReference)
29464
+ return;
29465
+ if (event.composedPath()[0] !== this.tooltipReference)
29466
+ this.showTooltip = false;
29467
+ }
29331
29468
  valueChangedHandler(event) {
29332
29469
  if (this.isDuplicateInput) {
29333
29470
  if (this.name === event.detail.name + 'Duplicate') {
@@ -29346,8 +29483,6 @@ const TextInput = class {
29346
29483
  this.limitStylingAppends = true;
29347
29484
  }
29348
29485
  // end custom styling area
29349
- }
29350
- componentDidLoad() {
29351
29486
  if (this.defaultValue) {
29352
29487
  this.value = this.defaultValue;
29353
29488
  this.valueHandler({ name: this.name, value: this.value });
@@ -29384,9 +29519,16 @@ const TextInput = class {
29384
29519
  return this.validation.custom.find(customRule => customRule.rule === 'duplicate-input').errorMessage;
29385
29520
  }
29386
29521
  }
29522
+ renderTooltip() {
29523
+ if (this.showTooltip) {
29524
+ return (index.h("div", { class: `text__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
29525
+ }
29526
+ return null;
29527
+ }
29387
29528
  render() {
29388
29529
  const invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
29389
- return index.h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, index.h("label", { class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
29530
+ return index.h("div", { class: 'text__wrapper', ref: el => this.stylingContainer = el }, index.h("div", { class: 'text__wrapper--flex' }, index.h("label", { class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { class: 'text__wrapper--relative' }, this.tooltip &&
29531
+ index.h("img", { class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onBlur: (e) => { this.handleInput(e); } }), index.h("small", { class: 'text__error-message' }, this.errorMessage));
29390
29532
  }
29391
29533
  static get watchers() { return {
29392
29534
  "isValid": ["validityChanged"],