@everymatrix/general-registration 1.88.14 → 1.88.15

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.
@@ -40,7 +40,9 @@ const TRANSLATIONS$1 = {
40
40
  "SAIdInvalidError": "Invalid SA ID",
41
41
  "PassportLengthError": "Passport number must be 8 or 9 digits.",
42
42
  "PasswordMustContain": "Password must contain:",
43
- "AlphanumericalOnly": "Only alphanumerical characters are allowed"
43
+ "AlphanumericalOnly": "Only alphanumerical characters are allowed",
44
+ "InvalidFirstName": "Only alphabetic characters are allowed.",
45
+ "InvalidLastName": "Only alphabetic characters are allowed."
44
46
  },
45
47
  "hu": {
46
48
  "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -73,7 +75,9 @@ const TRANSLATIONS$1 = {
73
75
  "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
74
76
  "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
75
77
  "PasswordMustContain": "A jelszónak tartalmaznia kell:",
76
- "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek"
78
+ "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek",
79
+ "InvalidFirstName": "Csak betűk engedélyezettek.",
80
+ "InvalidLastName": "Csak betűk engedélyezettek."
77
81
  },
78
82
  "hr": {
79
83
  "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -106,7 +110,9 @@ const TRANSLATIONS$1 = {
106
110
  "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
107
111
  "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
108
112
  "PasswordMustContain": "Lozinka mora sadržavati:",
109
- "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi"
113
+ "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi",
114
+ "InvalidFirstName": "Dozvoljena su samo slova.",
115
+ "InvalidLastName": "Dozvoljena su samo slova."
110
116
  },
111
117
  "tr": {
112
118
  "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -139,7 +145,9 @@ const TRANSLATIONS$1 = {
139
145
  "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
140
146
  "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
141
147
  "PasswordMustContain": "Şifre şunları içermelidir:",
142
- "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir"
148
+ "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir",
149
+ "InvalidFirstName": "Yalnızca alfabetik karakterlere izin verilir.",
150
+ "InvalidLastName": "Yalnızca alfabetik karakterlere izin verilir."
143
151
  },
144
152
  "pt-br": {
145
153
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -172,7 +180,9 @@ const TRANSLATIONS$1 = {
172
180
  "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
173
181
  "SAIdInvalidError": "Número de identificação da África do Sul inválido",
174
182
  "PasswordMustContain": "A senha deve conter:",
175
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
183
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
184
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
185
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
176
186
  },
177
187
  "pt": {
178
188
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -207,7 +217,9 @@ const TRANSLATIONS$1 = {
207
217
  "SAIdInvalidError": "ID da África do Sul inválido",
208
218
  "PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
209
219
  "PasswordMustContain": "A palavra-passe deve conter:",
210
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
220
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
221
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
222
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
211
223
  },
212
224
  "es-mx": {
213
225
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -240,7 +252,9 @@ const TRANSLATIONS$1 = {
240
252
  "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
241
253
  "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
242
254
  "PasswordMustContain": "La contraseña debe contener:",
243
- "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
255
+ "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
256
+ "InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
257
+ "InvalidLastName": "Solo se permiten caracteres alfabéticos."
244
258
  },
245
259
  "fr": {
246
260
  "dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
@@ -276,7 +290,9 @@ const TRANSLATIONS$1 = {
276
290
  "SAIdInvalidError": "Identifiant sud-africain invalide",
277
291
  "PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
278
292
  "PasswordMustContain": "Le mot de passe doit contenir :",
279
- "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
293
+ "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
294
+ "InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
295
+ "InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
280
296
  }
281
297
  };
282
298
  const CONSTANTS = {
@@ -16011,10 +16027,18 @@ const PostalCodeInput = class {
16011
16027
  return '';
16012
16028
  }
16013
16029
  if (this.inputReference.validity.valueMissing) {
16014
- return translate$1('requiredError', this.language);
16030
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16015
16031
  }
16016
16032
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16017
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16033
+ const { minLength, maxLength } = this.validation;
16034
+ if (minLength === maxLength) {
16035
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16036
+ values: { length: minLength }
16037
+ });
16038
+ }
16039
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16040
+ values: { minLength, maxLength }
16041
+ });
16018
16042
  }
16019
16043
  if (this.inputReference.value.match(this.validationPattern) == null) {
16020
16044
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -16061,7 +16085,7 @@ const PostalCodeInput = class {
16061
16085
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
16062
16086
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
16063
16087
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
16064
- return (index.h("div", { key: 'f274a95e0a64ec67f01be8a5cf053d475c16e9ca', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '23aa865fd99048cb5c638f0b66b4ff3e8e451d97', class: 'text__wrapper--flex' }, index.h("label", { key: 'c5d12c1548ec8bfde130a95cc20783f20295a253', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'db2f499ff6ca8f4e3b1a8ac83e7f8856fc1ca888', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: 'a1d7ef42855a21f336dbbb337cc8cb644de0c655', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '18a6812958691749d0c7c3396ce69a3f46f7f1e4', class: 'input__text-wrapper' }, index.h("input", { key: '41aa9e6b8817eee602347d7a3a909f0d81985d3d', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '7083c22e5ebb306ad9ca3c4dc29dcd66bc8b17d5', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate$1('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: '95ad996e43da19386f4576eb35850c7ba09e1620', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: '3997d92f28ec2ecee49b2480a5edb0a8431aa1c8', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: 'cf5f9c9f5f96aa2ef316eb44e97768e3552c4a2e', class: "postalcode__loading-spinner" }, index.h("div", { key: 'd9b0dda1be9fa871dee4b7d415f84a28b81c3362', class: "loading-spinner" }), index.h("span", { key: 'b5a6c58d910f5be519617288310a8a456e7e8c1c' }, translate$1('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate$1('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
16088
+ return (index.h("div", { key: 'e358dddfc4b20b0847d03e3f12ff637922470105', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b806cac9ad62480a1be6bf802528c60c79804e94', class: 'text__wrapper--flex' }, index.h("label", { key: '4fb327989e8b828559c01601eea47bdd58da4bd3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '6c293495a8935db477cbcac2eb9102bffeb85ddb', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: '848bb5b44d834c4f0e4a78cfebef0ecf1b88fd2e', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '7f6195e5cfc5bfabc9854ec6acc19c1e52e70f1b', class: 'input__text-wrapper' }, index.h("input", { key: '4369b4a99016a7aebbb396bdda35c31d92e4d557', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '0e3c0fcb974d2f3dae76f9afdbf173fcc25d258f', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate$1('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: '1c644f87f2617180e6356c724d72b6d3fc8e472e', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: 'f2a7b8133908441a3cf67eb48928a2d61d17e32f', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: 'c0cb29f7d174ca8981c8b9dfd2ee9b972b0fd1ea', class: "postalcode__loading-spinner" }, index.h("div", { key: '76f17cb0a440f7ed9cc8de3620b55136549586e6', class: "loading-spinner" }), index.h("span", { key: 'e10c4177fb0f21f142fd3120177e450413687cf3' }, translate$1('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate$1('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
16065
16089
  }
16066
16090
  static get watchers() { return {
16067
16091
  "clientStyling": ["handleStylingChange"],
@@ -16552,14 +16576,22 @@ const TelInput = class {
16552
16576
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
16553
16577
  return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
16554
16578
  }
16579
+ const { minLength, maxLength } = this.validation;
16555
16580
  if (this.inputReference.validity.tooShort
16556
16581
  || this.inputReference.validity.tooLong
16557
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
16558
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
16559
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16582
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
16583
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
16584
+ if (minLength === maxLength) {
16585
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16586
+ values: { length: minLength }
16587
+ });
16588
+ }
16589
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16590
+ values: { minLength, maxLength }
16591
+ });
16560
16592
  }
16561
16593
  if (this.inputReference.validity.valueMissing) {
16562
- return translate$1('requiredError', this.language);
16594
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16563
16595
  }
16564
16596
  }
16565
16597
  renderTooltip() {
@@ -16574,8 +16606,8 @@ const TelInput = class {
16574
16606
  if (this.touched) {
16575
16607
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16576
16608
  }
16577
- return index.h("div", { key: 'f534de21d5597a3e90912eb87fff893511d09920', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '431fb8cbaea0d2244847823ea4d04d8c73a5341c', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '2eb210b2f0c2e0e632997f59fe7aa667578f72fd', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '2d912b828f7d9475a1bbb5bac13495779f31198e', class: 'tel__wrapper--relative' }, this.tooltip &&
16578
- index.h("img", { key: 'ce4433263d27dc9d3fb2caf45069d7a92e9ae3a7', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '480cd17eafb4f2ff1e396531429177cb3130eb95', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '5f2292c8509e5f68786d0f462c689102b1c75dc3', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '77232e119eed4960f5e1d809507b8585dd112256', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '0d925cee41881c8c822073790e26ca7dc4a81049', class: 'tel__error-message' }, this.errorMessage));
16609
+ return index.h("div", { key: 'bf824bf310bec50746fb6b82cd8f7decbcfc284b', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '0b6c42e7aca5686f310ffdcecb96cf909e83521f', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'ddf2fa885ac53e7f337525357a7dce52f911213d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e21a84509b32f379bb3ce92137255caf99a86dc5', class: 'tel__wrapper--relative' }, this.tooltip &&
16610
+ index.h("img", { key: '9ff0a8c19aa067c1e7799227617405e373b344e4', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '5db13af7e421480b89253970a5f2470f999c922d', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '164fe2bd2940bd5a251fda48b28f1af1bc3e78be', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '90ae038a383645d6579fb68bc5adbe8a2b1d676c', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'a68f95384965384a67d042b89264dbda03f25b7a', class: 'tel__error-message' }, this.errorMessage));
16579
16611
  }
16580
16612
  static get watchers() { return {
16581
16613
  "clientStyling": ["handleStylingChange"],
@@ -16854,8 +16886,7 @@ const TextInput = class {
16854
16886
  return translate$1(ERROR_KEYS.REQUIRED, this.language);
16855
16887
  }
16856
16888
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16857
- const minLength = this.validation.minLength;
16858
- const maxLength = this.validation.maxLength;
16889
+ const { minLength, maxLength } = this.validation;
16859
16890
  if (minLength === maxLength) {
16860
16891
  return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16861
16892
  values: { length: minLength }
@@ -16888,8 +16919,8 @@ const TextInput = class {
16888
16919
  if (this.touched) {
16889
16920
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16890
16921
  }
16891
- return index.h("div", { key: '4a3851c57b50e346914a5a3c9cf1ba286e3f7aec', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8badf61de6285389c56aceda2b57dc777eccad62', class: 'text__wrapper--flex' }, index.h("label", { key: 'ecf44727e4e536345649b0aa88f57faf63eafcb1', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '45ad8e3feed46925034aa2b3c3964ee59d6bab69', class: 'text__wrapper--relative' }, this.tooltip &&
16892
- index.h("img", { key: '28386df278867594c5e71ab7a4b376b62031b2de', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'f6c63d967c6db438fa3aeaa52e14195c16dfab87', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'bfed249b930afb155f933eae8a62ada508a05de5', class: 'text__error-message' }, this.errorMessage));
16922
+ return index.h("div", { key: 'aacb35e1808720cfdb24708254c01cb5be0fe6b6', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '14a292cc7661d663698384d989d57d21786210b9', class: 'text__wrapper--flex' }, index.h("label", { key: 'c04b29364c4b54e9aad3036264044177e4a2dc51', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'eb8aee30e47241b533c7ca8fcb354c782b4e2be1', class: 'text__wrapper--relative' }, this.tooltip &&
16923
+ index.h("img", { key: '23d4b70d93910f43ce0ea54c1bcffd81dfc54ebc', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '3f901d85111256370811f4abe51bcd5b2971b60c', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '1661215687f1eecd622b2610c3e056f45944fee3', class: 'text__error-message' }, this.errorMessage));
16893
16924
  }
16894
16925
  static get watchers() { return {
16895
16926
  "clientStyling": ["handleStylingChange"],
@@ -36,7 +36,9 @@ const TRANSLATIONS$1 = {
36
36
  "SAIdInvalidError": "Invalid SA ID",
37
37
  "PassportLengthError": "Passport number must be 8 or 9 digits.",
38
38
  "PasswordMustContain": "Password must contain:",
39
- "AlphanumericalOnly": "Only alphanumerical characters are allowed"
39
+ "AlphanumericalOnly": "Only alphanumerical characters are allowed",
40
+ "InvalidFirstName": "Only alphabetic characters are allowed.",
41
+ "InvalidLastName": "Only alphabetic characters are allowed."
40
42
  },
41
43
  "hu": {
42
44
  "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -69,7 +71,9 @@ const TRANSLATIONS$1 = {
69
71
  "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
70
72
  "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
71
73
  "PasswordMustContain": "A jelszónak tartalmaznia kell:",
72
- "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek"
74
+ "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek",
75
+ "InvalidFirstName": "Csak betűk engedélyezettek.",
76
+ "InvalidLastName": "Csak betűk engedélyezettek."
73
77
  },
74
78
  "hr": {
75
79
  "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -102,7 +106,9 @@ const TRANSLATIONS$1 = {
102
106
  "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
103
107
  "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
104
108
  "PasswordMustContain": "Lozinka mora sadržavati:",
105
- "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi"
109
+ "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi",
110
+ "InvalidFirstName": "Dozvoljena su samo slova.",
111
+ "InvalidLastName": "Dozvoljena su samo slova."
106
112
  },
107
113
  "tr": {
108
114
  "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -135,7 +141,9 @@ const TRANSLATIONS$1 = {
135
141
  "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
136
142
  "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
137
143
  "PasswordMustContain": "Şifre şunları içermelidir:",
138
- "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir"
144
+ "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir",
145
+ "InvalidFirstName": "Yalnızca alfabetik karakterlere izin verilir.",
146
+ "InvalidLastName": "Yalnızca alfabetik karakterlere izin verilir."
139
147
  },
140
148
  "pt-br": {
141
149
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -168,7 +176,9 @@ const TRANSLATIONS$1 = {
168
176
  "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
169
177
  "SAIdInvalidError": "Número de identificação da África do Sul inválido",
170
178
  "PasswordMustContain": "A senha deve conter:",
171
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
179
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
180
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
181
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
172
182
  },
173
183
  "pt": {
174
184
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -203,7 +213,9 @@ const TRANSLATIONS$1 = {
203
213
  "SAIdInvalidError": "ID da África do Sul inválido",
204
214
  "PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
205
215
  "PasswordMustContain": "A palavra-passe deve conter:",
206
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
216
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
217
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
218
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
207
219
  },
208
220
  "es-mx": {
209
221
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -236,7 +248,9 @@ const TRANSLATIONS$1 = {
236
248
  "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
237
249
  "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
238
250
  "PasswordMustContain": "La contraseña debe contener:",
239
- "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
251
+ "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
252
+ "InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
253
+ "InvalidLastName": "Solo se permiten caracteres alfabéticos."
240
254
  },
241
255
  "fr": {
242
256
  "dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
@@ -272,7 +286,9 @@ const TRANSLATIONS$1 = {
272
286
  "SAIdInvalidError": "Identifiant sud-africain invalide",
273
287
  "PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
274
288
  "PasswordMustContain": "Le mot de passe doit contenir :",
275
- "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
289
+ "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
290
+ "InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
291
+ "InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
276
292
  }
277
293
  };
278
294
  const CONSTANTS = {
@@ -16007,10 +16023,18 @@ const PostalCodeInput = class {
16007
16023
  return '';
16008
16024
  }
16009
16025
  if (this.inputReference.validity.valueMissing) {
16010
- return translate$1('requiredError', this.language);
16026
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16011
16027
  }
16012
16028
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16013
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16029
+ const { minLength, maxLength } = this.validation;
16030
+ if (minLength === maxLength) {
16031
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16032
+ values: { length: minLength }
16033
+ });
16034
+ }
16035
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16036
+ values: { minLength, maxLength }
16037
+ });
16014
16038
  }
16015
16039
  if (this.inputReference.value.match(this.validationPattern) == null) {
16016
16040
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -16057,7 +16081,7 @@ const PostalCodeInput = class {
16057
16081
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
16058
16082
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
16059
16083
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
16060
- return (h("div", { key: 'f274a95e0a64ec67f01be8a5cf053d475c16e9ca', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '23aa865fd99048cb5c638f0b66b4ff3e8e451d97', class: 'text__wrapper--flex' }, h("label", { key: 'c5d12c1548ec8bfde130a95cc20783f20295a253', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'db2f499ff6ca8f4e3b1a8ac83e7f8856fc1ca888', class: 'text__wrapper--relative' }, this.tooltip && (h("img", { key: 'a1d7ef42855a21f336dbbb337cc8cb644de0c655', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), h("div", { key: '18a6812958691749d0c7c3396ce69a3f46f7f1e4', class: 'input__text-wrapper' }, h("input", { key: '41aa9e6b8817eee602347d7a3a909f0d81985d3d', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (h("p", { key: '7083c22e5ebb306ad9ca3c4dc29dcd66bc8b17d5', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate$1('enterIEAddressManually', this.language))), showAddressesDropdown && (h("div", { key: '95ad996e43da19386f4576eb35850c7ba09e1620', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, h("div", { key: '3997d92f28ec2ecee49b2480a5edb0a8431aa1c8', class: "options" }, this.addresses.map((addr, index) => (h("div", { key: index, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (h("div", { key: 'cf5f9c9f5f96aa2ef316eb44e97768e3552c4a2e', class: "postalcode__loading-spinner" }, h("div", { key: 'd9b0dda1be9fa871dee4b7d415f84a28b81c3362', class: "loading-spinner" }), h("span", { key: 'b5a6c58d910f5be519617288310a8a456e7e8c1c' }, translate$1('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate$1('postalLookUpNoAddressFound', this.language)))), h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
16084
+ return (h("div", { key: 'e358dddfc4b20b0847d03e3f12ff637922470105', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'b806cac9ad62480a1be6bf802528c60c79804e94', class: 'text__wrapper--flex' }, h("label", { key: '4fb327989e8b828559c01601eea47bdd58da4bd3', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '6c293495a8935db477cbcac2eb9102bffeb85ddb', class: 'text__wrapper--relative' }, this.tooltip && (h("img", { key: '848bb5b44d834c4f0e4a78cfebef0ecf1b88fd2e', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), h("div", { key: '7f6195e5cfc5bfabc9854ec6acc19c1e52e70f1b', class: 'input__text-wrapper' }, h("input", { key: '4369b4a99016a7aebbb396bdda35c31d92e4d557', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (h("p", { key: '0e3c0fcb974d2f3dae76f9afdbf173fcc25d258f', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate$1('enterIEAddressManually', this.language))), showAddressesDropdown && (h("div", { key: '1c644f87f2617180e6356c724d72b6d3fc8e472e', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, h("div", { key: 'f2a7b8133908441a3cf67eb48928a2d61d17e32f', class: "options" }, this.addresses.map((addr, index) => (h("div", { key: index, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (h("div", { key: 'c0cb29f7d174ca8981c8b9dfd2ee9b972b0fd1ea', class: "postalcode__loading-spinner" }, h("div", { key: '76f17cb0a440f7ed9cc8de3620b55136549586e6', class: "loading-spinner" }), h("span", { key: 'e10c4177fb0f21f142fd3120177e450413687cf3' }, translate$1('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate$1('postalLookUpNoAddressFound', this.language)))), h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
16061
16085
  }
16062
16086
  static get watchers() { return {
16063
16087
  "clientStyling": ["handleStylingChange"],
@@ -16548,14 +16572,22 @@ const TelInput = class {
16548
16572
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
16549
16573
  return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
16550
16574
  }
16575
+ const { minLength, maxLength } = this.validation;
16551
16576
  if (this.inputReference.validity.tooShort
16552
16577
  || this.inputReference.validity.tooLong
16553
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
16554
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
16555
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16578
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
16579
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
16580
+ if (minLength === maxLength) {
16581
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16582
+ values: { length: minLength }
16583
+ });
16584
+ }
16585
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16586
+ values: { minLength, maxLength }
16587
+ });
16556
16588
  }
16557
16589
  if (this.inputReference.validity.valueMissing) {
16558
- return translate$1('requiredError', this.language);
16590
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16559
16591
  }
16560
16592
  }
16561
16593
  renderTooltip() {
@@ -16570,8 +16602,8 @@ const TelInput = class {
16570
16602
  if (this.touched) {
16571
16603
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16572
16604
  }
16573
- return h("div", { key: 'f534de21d5597a3e90912eb87fff893511d09920', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '431fb8cbaea0d2244847823ea4d04d8c73a5341c', class: 'tel__wrapper--flex-label' }, h("label", { key: '2eb210b2f0c2e0e632997f59fe7aa667578f72fd', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '2d912b828f7d9475a1bbb5bac13495779f31198e', class: 'tel__wrapper--relative' }, this.tooltip &&
16574
- h("img", { key: 'ce4433263d27dc9d3fb2caf45069d7a92e9ae3a7', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '480cd17eafb4f2ff1e396531429177cb3130eb95', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '5f2292c8509e5f68786d0f462c689102b1c75dc3', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '77232e119eed4960f5e1d809507b8585dd112256', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', 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", { key: '0d925cee41881c8c822073790e26ca7dc4a81049', class: 'tel__error-message' }, this.errorMessage));
16605
+ return h("div", { key: 'bf824bf310bec50746fb6b82cd8f7decbcfc284b', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '0b6c42e7aca5686f310ffdcecb96cf909e83521f', class: 'tel__wrapper--flex-label' }, h("label", { key: 'ddf2fa885ac53e7f337525357a7dce52f911213d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'e21a84509b32f379bb3ce92137255caf99a86dc5', class: 'tel__wrapper--relative' }, this.tooltip &&
16606
+ h("img", { key: '9ff0a8c19aa067c1e7799227617405e373b344e4', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '5db13af7e421480b89253970a5f2470f999c922d', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '164fe2bd2940bd5a251fda48b28f1af1bc3e78be', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '90ae038a383645d6579fb68bc5adbe8a2b1d676c', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', 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", { key: 'a68f95384965384a67d042b89264dbda03f25b7a', class: 'tel__error-message' }, this.errorMessage));
16575
16607
  }
16576
16608
  static get watchers() { return {
16577
16609
  "clientStyling": ["handleStylingChange"],
@@ -16850,8 +16882,7 @@ const TextInput = class {
16850
16882
  return translate$1(ERROR_KEYS.REQUIRED, this.language);
16851
16883
  }
16852
16884
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16853
- const minLength = this.validation.minLength;
16854
- const maxLength = this.validation.maxLength;
16885
+ const { minLength, maxLength } = this.validation;
16855
16886
  if (minLength === maxLength) {
16856
16887
  return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16857
16888
  values: { length: minLength }
@@ -16884,8 +16915,8 @@ const TextInput = class {
16884
16915
  if (this.touched) {
16885
16916
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16886
16917
  }
16887
- return h("div", { key: '4a3851c57b50e346914a5a3c9cf1ba286e3f7aec', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '8badf61de6285389c56aceda2b57dc777eccad62', class: 'text__wrapper--flex' }, h("label", { key: 'ecf44727e4e536345649b0aa88f57faf63eafcb1', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '45ad8e3feed46925034aa2b3c3964ee59d6bab69', class: 'text__wrapper--relative' }, this.tooltip &&
16888
- h("img", { key: '28386df278867594c5e71ab7a4b376b62031b2de', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'f6c63d967c6db438fa3aeaa52e14195c16dfab87', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: 'bfed249b930afb155f933eae8a62ada508a05de5', class: 'text__error-message' }, this.errorMessage));
16918
+ return h("div", { key: 'aacb35e1808720cfdb24708254c01cb5be0fe6b6', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '14a292cc7661d663698384d989d57d21786210b9', class: 'text__wrapper--flex' }, h("label", { key: 'c04b29364c4b54e9aad3036264044177e4a2dc51', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'eb8aee30e47241b533c7ca8fcb354c782b4e2be1', class: 'text__wrapper--relative' }, this.tooltip &&
16919
+ h("img", { key: '23d4b70d93910f43ce0ea54c1bcffd81dfc54ebc', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '3f901d85111256370811f4abe51bcd5b2971b60c', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '1661215687f1eecd622b2610c3e056f45944fee3', class: 'text__error-message' }, this.errorMessage));
16889
16920
  }
16890
16921
  static get watchers() { return {
16891
16922
  "clientStyling": ["handleStylingChange"],