@everymatrix/general-input 1.40.0 → 1.41.0

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 (39) hide show
  1. package/dist/cjs/checkbox-group-input_10.cjs.entry.js +36 -19
  2. package/dist/cjs/general-input.cjs.entry.js +1 -1
  3. package/dist/cjs/general-input.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{locale.utils-26314d91.js → locale.utils-2fa6f747.js} +15 -15
  6. package/dist/cjs/toggle-checkbox-input.cjs.entry.js +1 -1
  7. package/dist/collection/components/date-input/date-input.css +1 -1
  8. package/dist/collection/components/date-input/date-input.js +1 -4
  9. package/dist/collection/components/email-input/email-input.css +11 -7
  10. package/dist/collection/components/email-input/email-input.js +1 -1
  11. package/dist/collection/components/password-input/password-input.js +42 -7
  12. package/dist/collection/components/select-input/select-input.css +7 -7
  13. package/dist/collection/components/select-input/select-input.js +2 -2
  14. package/dist/collection/components/tel-input/tel-input.js +3 -3
  15. package/dist/collection/components/text-input/text-input.css +1 -0
  16. package/dist/collection/utils/locale.utils.js +15 -15
  17. package/dist/components/date-input2.js +2 -2
  18. package/dist/components/email-input2.js +2 -2
  19. package/dist/components/password-input2.js +25 -7
  20. package/dist/components/select-input2.js +3 -3
  21. package/dist/components/tel-input2.js +3 -3
  22. package/dist/components/text-input2.js +1 -1
  23. package/dist/components/tooltipIcon.js +15 -15
  24. package/dist/esm/checkbox-group-input_10.entry.js +36 -19
  25. package/dist/esm/general-input.entry.js +1 -1
  26. package/dist/esm/general-input.js +1 -1
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/{locale.utils-98ceaa28.js → locale.utils-30fb5289.js} +15 -15
  29. package/dist/esm/toggle-checkbox-input.entry.js +1 -1
  30. package/dist/general-input/general-input.esm.js +1 -1
  31. package/dist/general-input/p-04d4b145.js +1 -0
  32. package/dist/general-input/{p-e1732a21.entry.js → p-90e8d52e.entry.js} +1 -1
  33. package/dist/general-input/{p-5739365c.entry.js → p-b64caafa.entry.js} +47 -47
  34. package/dist/general-input/{p-14cd19d9.entry.js → p-f659e9ee.entry.js} +1 -1
  35. package/dist/types/components/password-input/password-input.d.ts +5 -0
  36. package/dist/types/components.d.ts +8 -0
  37. package/package.json +1 -1
  38. package/dist/general-input/p-7102bafb.js +0 -1
  39. /package/dist/types/Users/{sebastian.strulea/Documents/work → adrian.pripon/Documents/Work}/widgets-stencil/packages/general-input/.stencil/packages/general-input/stencil.config.d.ts +0 -0
package/dist/collection/components/tel-input/tel-input.js CHANGED
@@ -72,7 +72,7 @@ export class TelInput {
72
72
  const endpoint = this.action.split(" ")[1];
73
73
  return this.getPhoneCodes(endpoint).then((options) => {
74
74
  this.phoneCodesOptions = options.phoneCodes.map(code => {
75
- return { label: code.Prefix, value: code.Prefix };
75
+ return { label: code.Prefix || code, value: code.Prefix || code };
76
76
  });
77
77
  });
78
78
  }
@@ -144,7 +144,7 @@ export class TelInput {
144
144
  render() {
145
145
  let invalidClass = '';
146
146
  if (this.touched) {
147
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
147
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
148
148
  }
149
149
  return h("div", { class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el },
150
150
  h("div", { class: 'tel__wrapper--flex-label' },
@@ -155,7 +155,7 @@ export class TelInput {
155
155
  this.renderTooltip())),
156
156
  h("div", { class: `tel__wrapper--flex ${invalidClass}` },
157
157
  h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }),
158
- h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })),
158
+ h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder || ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })),
159
159
  h("small", { class: 'tel__error-message' }, this.errorMessage));
160
160
  }
161
161
  static get is() { return "tel-input"; }
package/dist/collection/components/text-input/text-input.css CHANGED
@@ -63,6 +63,7 @@
63
63
  }
64
64
  .text__input:focus {
65
65
  border: 1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
66
+ outline-color: var(--emfe-w-color-primary, #D0046C);
66
67
  }
67
68
  .text__input--invalid {
68
69
  border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
package/dist/collection/utils/locale.utils.js CHANGED
@@ -14,9 +14,9 @@ export const TRANSLATIONS = {
14
14
  "InvalidEmailFormat": "Invalid email format.",
15
15
  "EmailNotMatching": "Emails not matching!",
16
16
  "PasswordNotMatching": "Passwords not matching",
17
- "MustIncludeNumber": "include a number",
18
- "MustContainCapital": "contain capital letters",
19
- "MustIncludePunctation": "punctuation",
17
+ "MustIncludeNumber": "Password must include a number",
18
+ "MustContainCapital": "Password must include a capital letter",
19
+ "MustIncludePunctation": "Password must include punctuation",
20
20
  "OnlyNumbers": "Should contains only numbers."
21
21
  },
22
22
  "hu": {
@@ -32,9 +32,9 @@ export const TRANSLATIONS = {
32
32
  "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
33
33
  "EmailNotMatching": "Az e-mailek nem egyeznek!",
34
34
  "PasswordNotMatching": "A jelszavak nem egyeznek",
35
- "MustIncludeNumber": "tartalmaznia kell egy számot",
36
- "MustContainCapital": "nagybetűket kell tartalmaznia",
37
- "MustIncludePunctation": "írásjelet",
35
+ "MustIncludeNumber": "A jelszónak tartalmaznia kell egy számot",
36
+ "MustContainCapital": "A jelszónak tartalmaznia kell egy nagybetűt",
37
+ "MustIncludePunctuation": "A jelszónak tartalmaznia kell írásjelet",
38
38
  "OnlyNumbers": "Csak számokat kell tartalmaznia."
39
39
  },
40
40
  "hr": {
@@ -51,9 +51,9 @@ export const TRANSLATIONS = {
51
51
  "InvalidEmailFormat": "Nevažeći format e-maila",
52
52
  "EmailNotMatching": "E-mailovi se ne podudaraju!",
53
53
  "PasswordNotMatching": "Lozinke se ne podudaraju",
54
- "MustIncludeNumber": "uključiti broj",
55
- "MustContainCapital": "sadrže velika slova",
56
- "MustIncludePunctation": "interpunkcija",
54
+ "MustIncludeNumber": "Lozinka mora sadržavati broj",
55
+ "MustContainCapital": "Lozinka mora sadržavati veliko slovo",
56
+ "MustIncludePunctuation": "Lozinka mora sadržavati interpunkcijski znak",
57
57
  "OnlyNumbers": "Treba sadržavati samo brojeve."
58
58
  },
59
59
  "tr": {
@@ -89,9 +89,9 @@ export const TRANSLATIONS = {
89
89
  "InvalidEmailFormat": "Formato de email inválido",
90
90
  "EmailNotMatching": "E-mail não corresponde",
91
91
  "PasswordNotMatching": "Senha não corresponde",
92
- "MustIncludeNumber": "inclui um número",
93
- "MustContainCapital": "contém letras maiúsculas",
94
- "MustIncludePunctation": "pontuação",
92
+ "MustIncludeNumber": "A senha deve incluir um número",
93
+ "MustContainCapital": "A senha deve incluir uma letra maiúscula",
94
+ "MustIncludePunctuation": "A senha deve incluir um sinal de pontuação",
95
95
  "OnlyNumbers": "Deve conter apenas números"
96
96
  },
97
97
  "es-mx": {
@@ -108,9 +108,9 @@ export const TRANSLATIONS = {
108
108
  "InvalidEmailFormat": "Formato inválido de correo",
109
109
  "EmailNotMatching": "El correo electrónico no coincide",
110
110
  "PasswordNotMatching": "La contraseña no coincide",
111
- "MustIncludeNumber": "incluye un número",
112
- "MustContainCapital": "contiene mayúsculas",
113
- "MustIncludePunctation": "puntuación",
111
+ "MustIncludeNumber": "La contraseña debe incluir un número",
112
+ "MustContainCapital": "La contraseña debe incluir una letra mayúscula",
113
+ "MustIncludePunctuation": "La contraseña debe incluir un signo de puntuación",
114
114
  "OnlyNumbers": "Solo debe contener números"
115
115
  }
116
116
  };
package/dist/components/date-input2.js CHANGED
@@ -11392,7 +11392,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
11392
11392
  return date.getTime() < dateToCompare.getTime();
11393
11393
  }
11394
11394
 
11395
- 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%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.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:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
11395
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.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:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
11396
11396
 
11397
11397
  const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
11398
11398
  constructor() {
@@ -11513,7 +11513,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
11513
11513
  if (this.touched) {
11514
11514
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
11515
11515
  }
11516
- return h("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
11516
+ return h("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
11517
11517
  h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
11518
11518
  }
11519
11519
  get element() { return this; }
package/dist/components/email-input2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
3
3
 
4
- 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--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
4
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.email__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
5
5
 
6
6
  const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
@@ -127,7 +127,7 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
127
127
  render() {
128
128
  let invalidClass = '';
129
129
  if (this.touched) {
130
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
130
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
131
131
  }
132
132
  return h("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'email__wrapper--flex' }, h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
133
133
  h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'email__error-message' }, this.errorMessage));
package/dist/components/password-input2.js CHANGED
@@ -804,6 +804,10 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
804
804
  * Client custom styling via inline style
805
805
  */
806
806
  this.clientStyling = '';
807
+ /**
808
+ * Client Styling Url
809
+ */
810
+ this.clientStylingUrl = '';
807
811
  this.limitStylingAppends = false;
808
812
  this.showTooltip = false;
809
813
  this.value = '';
@@ -814,7 +818,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
814
818
  this.handleInput = (event) => {
815
819
  this.value = event.target.value;
816
820
  this.calculateComplexity(this.value);
817
- this.showPopup = true;
821
+ this.validation.custom.length === 0 || (this.showPopup = true);
818
822
  this.touched = true;
819
823
  if (this.debounceTime) {
820
824
  clearTimeout(this.debounceTime);
@@ -833,14 +837,27 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
833
837
  this.errorMessage = this.setErrorMessage();
834
838
  };
835
839
  this.handleFocus = () => {
836
- this.showPopup = true;
840
+ this.validation.custom.length === 0 || (this.showPopup = true);
837
841
  this.calculateComplexity(this.value);
838
842
  };
839
843
  this.setClientStyling = () => {
840
- let sheet = document.createElement('style');
844
+ const sheet = document.createElement('style');
841
845
  sheet.innerHTML = this.clientStyling;
842
846
  this.stylingContainer.prepend(sheet);
843
847
  };
848
+ this.setClientStylingURL = () => {
849
+ const url = new URL(this.clientStylingUrl);
850
+ const cssFile = document.createElement('style');
851
+ fetch(url.href)
852
+ .then((res) => res.text())
853
+ .then((data) => {
854
+ cssFile.innerHTML = data;
855
+ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
856
+ })
857
+ .catch((err) => {
858
+ console.error(err);
859
+ });
860
+ };
844
861
  }
845
862
  validityChanged() {
846
863
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -927,11 +944,11 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
927
944
  }
928
945
  calculateComplexity(password) {
929
946
  this.passwordComplexity = this.validation.custom
930
- .filter(rule => rule.rule === 'regex')
931
- .map(rule => {
932
- const ruleRegex = new RegExp(rule.pattern);
947
+ .filter(customValidation => customValidation.rule.toLowerCase() === 'regex')
948
+ .map(customValidation => {
949
+ const ruleRegex = new RegExp(customValidation.pattern);
933
950
  const passed = ruleRegex.test(password);
934
- return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
951
+ return { rule: customValidation.displayName, ruleKey: customValidation.errorKey, passed };
935
952
  });
936
953
  }
937
954
  setValidity() {
@@ -1016,6 +1033,7 @@ const PasswordInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
1016
1033
  "emitValue": [516, "emit-value"],
1017
1034
  "isDuplicateInput": [516, "is-duplicate-input"],
1018
1035
  "clientStyling": [513, "client-styling"],
1036
+ "clientStylingUrl": [513, "client-styling-url"],
1019
1037
  "isValid": [32],
1020
1038
  "errorMessage": [32],
1021
1039
  "limitStylingAppends": [32],
package/dist/components/select-input2.js CHANGED
@@ -3,7 +3,7 @@ import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
3
3
  import './input-field-shared-styles.js';
4
4
  import './vaadin-combo-box.js';
5
5
 
6
- const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
6
+ const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
7
7
 
8
8
  const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
@@ -137,9 +137,9 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
137
137
  render() {
138
138
  let invalidClass = '';
139
139
  if (this.touched) {
140
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
140
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
141
141
  }
142
- return h("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'select__wrapper--flex' }, h("label", { class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
142
+ return h("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'select__wrapper--flex' }, h("label", { class: `select__label ${this.validation.mandatory ? 'select__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'select__wrapper--relative' }, this.tooltip &&
143
143
  h("img", { class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), h("small", { class: 'select__error-message' }, this.errorMessage));
144
144
  }
145
145
  get element() { return this; }
package/dist/components/tel-input2.js CHANGED
@@ -80,7 +80,7 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
80
80
  const endpoint = this.action.split(" ")[1];
81
81
  return this.getPhoneCodes(endpoint).then((options) => {
82
82
  this.phoneCodesOptions = options.phoneCodes.map(code => {
83
- return { label: code.Prefix, value: code.Prefix };
83
+ return { label: code.Prefix || code, value: code.Prefix || code };
84
84
  });
85
85
  });
86
86
  }
@@ -152,10 +152,10 @@ const TelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
152
152
  render() {
153
153
  let invalidClass = '';
154
154
  if (this.touched) {
155
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
155
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
156
156
  }
157
157
  return h("div", { class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'tel__wrapper--flex-label' }, h("label", { class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'tel__wrapper--relative' }, this.tooltip &&
158
- h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { class: 'tel__error-message' }, this.errorMessage));
158
+ h("img", { class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder || ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { class: 'tel__error-message' }, this.errorMessage));
159
159
  }
160
160
  static get watchers() { return {
161
161
  "isValid": ["validityChanged"],
package/dist/components/text-input2.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
3
3
 
4
- 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%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
4
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
5
5
 
6
6
  const TextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/tooltipIcon.js CHANGED
@@ -14,9 +14,9 @@ const TRANSLATIONS = {
14
14
  "InvalidEmailFormat": "Invalid email format.",
15
15
  "EmailNotMatching": "Emails not matching!",
16
16
  "PasswordNotMatching": "Passwords not matching",
17
- "MustIncludeNumber": "include a number",
18
- "MustContainCapital": "contain capital letters",
19
- "MustIncludePunctation": "punctuation",
17
+ "MustIncludeNumber": "Password must include a number",
18
+ "MustContainCapital": "Password must include a capital letter",
19
+ "MustIncludePunctation": "Password must include punctuation",
20
20
  "OnlyNumbers": "Should contains only numbers."
21
21
  },
22
22
  "hu": {
@@ -32,9 +32,9 @@ const TRANSLATIONS = {
32
32
  "InvalidEmailFormat": "Érvénytelen e-mail formátum.",
33
33
  "EmailNotMatching": "Az e-mailek nem egyeznek!",
34
34
  "PasswordNotMatching": "A jelszavak nem egyeznek",
35
- "MustIncludeNumber": "tartalmaznia kell egy számot",
36
- "MustContainCapital": "nagybetűket kell tartalmaznia",
37
- "MustIncludePunctation": "írásjelet",
35
+ "MustIncludeNumber": "A jelszónak tartalmaznia kell egy számot",
36
+ "MustContainCapital": "A jelszónak tartalmaznia kell egy nagybetűt",
37
+ "MustIncludePunctuation": "A jelszónak tartalmaznia kell írásjelet",
38
38
  "OnlyNumbers": "Csak számokat kell tartalmaznia."
39
39
  },
40
40
  "hr": {
@@ -51,9 +51,9 @@ const TRANSLATIONS = {
51
51
  "InvalidEmailFormat": "Nevažeći format e-maila",
52
52
  "EmailNotMatching": "E-mailovi se ne podudaraju!",
53
53
  "PasswordNotMatching": "Lozinke se ne podudaraju",
54
- "MustIncludeNumber": "uključiti broj",
55
- "MustContainCapital": "sadrže velika slova",
56
- "MustIncludePunctation": "interpunkcija",
54
+ "MustIncludeNumber": "Lozinka mora sadržavati broj",
55
+ "MustContainCapital": "Lozinka mora sadržavati veliko slovo",
56
+ "MustIncludePunctuation": "Lozinka mora sadržavati interpunkcijski znak",
57
57
  "OnlyNumbers": "Treba sadržavati samo brojeve."
58
58
  },
59
59
  "tr": {
@@ -89,9 +89,9 @@ const TRANSLATIONS = {
89
89
  "InvalidEmailFormat": "Formato de email inválido",
90
90
  "EmailNotMatching": "E-mail não corresponde",
91
91
  "PasswordNotMatching": "Senha não corresponde",
92
- "MustIncludeNumber": "inclui um número",
93
- "MustContainCapital": "contém letras maiúsculas",
94
- "MustIncludePunctation": "pontuação",
92
+ "MustIncludeNumber": "A senha deve incluir um número",
93
+ "MustContainCapital": "A senha deve incluir uma letra maiúscula",
94
+ "MustIncludePunctuation": "A senha deve incluir um sinal de pontuação",
95
95
  "OnlyNumbers": "Deve conter apenas números"
96
96
  },
97
97
  "es-mx": {
@@ -108,9 +108,9 @@ const TRANSLATIONS = {
108
108
  "InvalidEmailFormat": "Formato inválido de correo",
109
109
  "EmailNotMatching": "El correo electrónico no coincide",
110
110
  "PasswordNotMatching": "La contraseña no coincide",
111
- "MustIncludeNumber": "incluye un número",
112
- "MustContainCapital": "contiene mayúsculas",
113
- "MustIncludePunctation": "puntuación",
111
+ "MustIncludeNumber": "La contraseña debe incluir un número",
112
+ "MustContainCapital": "La contraseña debe incluir una letra mayúscula",
113
+ "MustIncludePunctuation": "La contraseña debe incluir un signo de puntuación",
114
114
  "OnlyNumbers": "Solo debe contener números"
115
115
  }
116
116
  };
package/dist/esm/checkbox-group-input_10.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h as h$2, g as getElement } from './index-db76d5b5.js';
2
- import { t as translate$1 } from './locale.utils-98ceaa28.js';
2
+ import { t as translate$1 } from './locale.utils-30fb5289.js';
3
3
  import { t as tooltipIconSvg } from './tooltipIcon-99c1c7b7.js';
4
4
 
5
5
  /**
@@ -29616,7 +29616,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
29616
29616
  return date.getTime() < dateToCompare.getTime();
29617
29617
  }
29618
29618
 
29619
- 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%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.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:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
29619
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.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:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
29620
29620
 
29621
29621
  const DateInput = class {
29622
29622
  constructor(hostRef) {
@@ -29735,7 +29735,7 @@ const DateInput = class {
29735
29735
  if (this.touched) {
29736
29736
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
29737
29737
  }
29738
- return h$2("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, 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.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h$2("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
29738
+ return h$2("div", { class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$2("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h$2("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
29739
29739
  h$2("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
29740
29740
  }
29741
29741
  get element() { return getElement(this); }
@@ -29746,7 +29746,7 @@ const DateInput = class {
29746
29746
  };
29747
29747
  DateInput.style = dateInputCss;
29748
29748
 
29749
- 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--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29749
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.email__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29750
29750
 
29751
29751
  const EmailInput = class {
29752
29752
  constructor(hostRef) {
@@ -29870,7 +29870,7 @@ const EmailInput = class {
29870
29870
  render() {
29871
29871
  let invalidClass = '';
29872
29872
  if (this.touched) {
29873
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
29873
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'email__input--invalid';
29874
29874
  }
29875
29875
  return h$2("div", { class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, 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 &&
29876
29876
  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.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h$2("small", { class: 'email__error-message' }, this.errorMessage));
@@ -30804,6 +30804,10 @@ const PasswordInput = class {
30804
30804
  * Client custom styling via inline style
30805
30805
  */
30806
30806
  this.clientStyling = '';
30807
+ /**
30808
+ * Client Styling Url
30809
+ */
30810
+ this.clientStylingUrl = '';
30807
30811
  this.limitStylingAppends = false;
30808
30812
  this.showTooltip = false;
30809
30813
  this.value = '';
@@ -30814,7 +30818,7 @@ const PasswordInput = class {
30814
30818
  this.handleInput = (event) => {
30815
30819
  this.value = event.target.value;
30816
30820
  this.calculateComplexity(this.value);
30817
- this.showPopup = true;
30821
+ this.validation.custom.length === 0 || (this.showPopup = true);
30818
30822
  this.touched = true;
30819
30823
  if (this.debounceTime) {
30820
30824
  clearTimeout(this.debounceTime);
@@ -30833,14 +30837,27 @@ const PasswordInput = class {
30833
30837
  this.errorMessage = this.setErrorMessage();
30834
30838
  };
30835
30839
  this.handleFocus = () => {
30836
- this.showPopup = true;
30840
+ this.validation.custom.length === 0 || (this.showPopup = true);
30837
30841
  this.calculateComplexity(this.value);
30838
30842
  };
30839
30843
  this.setClientStyling = () => {
30840
- let sheet = document.createElement('style');
30844
+ const sheet = document.createElement('style');
30841
30845
  sheet.innerHTML = this.clientStyling;
30842
30846
  this.stylingContainer.prepend(sheet);
30843
30847
  };
30848
+ this.setClientStylingURL = () => {
30849
+ const url = new URL(this.clientStylingUrl);
30850
+ const cssFile = document.createElement('style');
30851
+ fetch(url.href)
30852
+ .then((res) => res.text())
30853
+ .then((data) => {
30854
+ cssFile.innerHTML = data;
30855
+ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
30856
+ })
30857
+ .catch((err) => {
30858
+ console.error(err);
30859
+ });
30860
+ };
30844
30861
  }
30845
30862
  validityChanged() {
30846
30863
  this.validityStateHandler({ valid: this.isValid, name: this.name });
@@ -30927,11 +30944,11 @@ const PasswordInput = class {
30927
30944
  }
30928
30945
  calculateComplexity(password) {
30929
30946
  this.passwordComplexity = this.validation.custom
30930
- .filter(rule => rule.rule === 'regex')
30931
- .map(rule => {
30932
- const ruleRegex = new RegExp(rule.pattern);
30947
+ .filter(customValidation => customValidation.rule.toLowerCase() === 'regex')
30948
+ .map(customValidation => {
30949
+ const ruleRegex = new RegExp(customValidation.pattern);
30933
30950
  const passed = ruleRegex.test(password);
30934
- return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
30951
+ return { rule: customValidation.displayName, ruleKey: customValidation.errorKey, passed };
30935
30952
  });
30936
30953
  }
30937
30954
  setValidity() {
@@ -35597,7 +35614,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
35597
35614
 
35598
35615
  defineCustomElement(ComboBox);
35599
35616
 
35600
- const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
35617
+ const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%}vaadin-combo-box>input{background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input::part(input-field){font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5}.select__input::part(toggle-button){position:relative;right:10px}.select__input>input{padding:5px 15px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
35601
35618
 
35602
35619
  const SelectInput = class {
35603
35620
  constructor(hostRef) {
@@ -35729,9 +35746,9 @@ const SelectInput = class {
35729
35746
  render() {
35730
35747
  let invalidClass = '';
35731
35748
  if (this.touched) {
35732
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
35749
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'select__input--invalid';
35733
35750
  }
35734
- return h$2("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, 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 &&
35751
+ return h$2("div", { class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$2("div", { class: 'select__wrapper--flex' }, h$2("label", { class: `select__label ${this.validation.mandatory ? 'select__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$2("div", { class: 'select__wrapper--relative' }, this.tooltip &&
35735
35752
  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} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", readOnly: this.autofilled, required: this.validation.mandatory, value: this.defaultValue, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleChange }), h$2("small", { class: 'select__error-message' }, this.errorMessage));
35736
35753
  }
35737
35754
  get element() { return getElement(this); }
@@ -35817,7 +35834,7 @@ const TelInput = class {
35817
35834
  const endpoint = this.action.split(" ")[1];
35818
35835
  return this.getPhoneCodes(endpoint).then((options) => {
35819
35836
  this.phoneCodesOptions = options.phoneCodes.map(code => {
35820
- return { label: code.Prefix, value: code.Prefix };
35837
+ return { label: code.Prefix || code, value: code.Prefix || code };
35821
35838
  });
35822
35839
  });
35823
35840
  }
@@ -35889,10 +35906,10 @@ const TelInput = class {
35889
35906
  render() {
35890
35907
  let invalidClass = '';
35891
35908
  if (this.touched) {
35892
- invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
35909
+ invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'tel__wrapper--flex--invalid';
35893
35910
  }
35894
35911
  return h$2("div", { class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, 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 &&
35895
- 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.handlePrefixInput(e) }), 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.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h$2("small", { class: 'tel__error-message' }, this.errorMessage));
35912
+ 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.handlePrefixInput(e) }), 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.placeholder || ''}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h$2("small", { class: 'tel__error-message' }, this.errorMessage));
35896
35913
  }
35897
35914
  static get watchers() { return {
35898
35915
  "isValid": ["validityChanged"],
@@ -35901,7 +35918,7 @@ const TelInput = class {
35901
35918
  };
35902
35919
  TelInput.style = telInputCss;
35903
35920
 
35904
- 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%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
35921
+ 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%;display:flex;flex-direction:column;gap:5px;height:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.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:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));outline-color:var(--emfe-w-color-primary, #D0046C)}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
35905
35922
 
35906
35923
  const TextInput = class {
35907
35924
  constructor(hostRef) {
package/dist/esm/general-input.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-db76d5b5.js';
2
- import { g as getTranslations } from './locale.utils-98ceaa28.js';
2
+ import { g as getTranslations } from './locale.utils-30fb5289.js';
3
3
 
4
4
  const generalInputCss = ":host{display:block;height:100%}";
5
5