@everymatrix/general-registration-multistep 1.88.13 → 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$1 = {
@@ -16262,10 +16278,18 @@ const PostalCodeInput = class {
16262
16278
  return '';
16263
16279
  }
16264
16280
  if (this.inputReference.validity.valueMissing) {
16265
- return translate$1('requiredError', this.language);
16281
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16266
16282
  }
16267
16283
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16268
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16284
+ const { minLength, maxLength } = this.validation;
16285
+ if (minLength === maxLength) {
16286
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16287
+ values: { length: minLength }
16288
+ });
16289
+ }
16290
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16291
+ values: { minLength, maxLength }
16292
+ });
16269
16293
  }
16270
16294
  if (this.inputReference.value.match(this.validationPattern) == null) {
16271
16295
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -16312,7 +16336,7 @@ const PostalCodeInput = class {
16312
16336
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
16313
16337
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
16314
16338
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
16315
- 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)));
16339
+ 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)));
16316
16340
  }
16317
16341
  static get watchers() { return {
16318
16342
  "clientStyling": ["handleStylingChange"],
@@ -16803,14 +16827,22 @@ const TelInput = class {
16803
16827
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
16804
16828
  return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
16805
16829
  }
16830
+ const { minLength, maxLength } = this.validation;
16806
16831
  if (this.inputReference.validity.tooShort
16807
16832
  || this.inputReference.validity.tooLong
16808
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
16809
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
16810
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16833
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
16834
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
16835
+ if (minLength === maxLength) {
16836
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16837
+ values: { length: minLength }
16838
+ });
16839
+ }
16840
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16841
+ values: { minLength, maxLength }
16842
+ });
16811
16843
  }
16812
16844
  if (this.inputReference.validity.valueMissing) {
16813
- return translate$1('requiredError', this.language);
16845
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16814
16846
  }
16815
16847
  }
16816
16848
  renderTooltip() {
@@ -16825,8 +16857,8 @@ const TelInput = class {
16825
16857
  if (this.touched) {
16826
16858
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16827
16859
  }
16828
- 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 &&
16829
- 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));
16860
+ 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 &&
16861
+ 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));
16830
16862
  }
16831
16863
  static get watchers() { return {
16832
16864
  "clientStyling": ["handleStylingChange"],
@@ -17105,8 +17137,7 @@ const TextInput = class {
17105
17137
  return translate$1(ERROR_KEYS.REQUIRED, this.language);
17106
17138
  }
17107
17139
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
17108
- const minLength = this.validation.minLength;
17109
- const maxLength = this.validation.maxLength;
17140
+ const { minLength, maxLength } = this.validation;
17110
17141
  if (minLength === maxLength) {
17111
17142
  return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
17112
17143
  values: { length: minLength }
@@ -17139,8 +17170,8 @@ const TextInput = class {
17139
17170
  if (this.touched) {
17140
17171
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
17141
17172
  }
17142
- 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 &&
17143
- 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));
17173
+ 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 &&
17174
+ 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));
17144
17175
  }
17145
17176
  static get watchers() { return {
17146
17177
  "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$1 = {
@@ -16258,10 +16274,18 @@ const PostalCodeInput = class {
16258
16274
  return '';
16259
16275
  }
16260
16276
  if (this.inputReference.validity.valueMissing) {
16261
- return translate$1('requiredError', this.language);
16277
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16262
16278
  }
16263
16279
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
16264
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16280
+ const { minLength, maxLength } = this.validation;
16281
+ if (minLength === maxLength) {
16282
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16283
+ values: { length: minLength }
16284
+ });
16285
+ }
16286
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16287
+ values: { minLength, maxLength }
16288
+ });
16265
16289
  }
16266
16290
  if (this.inputReference.value.match(this.validationPattern) == null) {
16267
16291
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -16308,7 +16332,7 @@ const PostalCodeInput = class {
16308
16332
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
16309
16333
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
16310
16334
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
16311
- 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)));
16335
+ 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)));
16312
16336
  }
16313
16337
  static get watchers() { return {
16314
16338
  "clientStyling": ["handleStylingChange"],
@@ -16799,14 +16823,22 @@ const TelInput = class {
16799
16823
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
16800
16824
  return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
16801
16825
  }
16826
+ const { minLength, maxLength } = this.validation;
16802
16827
  if (this.inputReference.validity.tooShort
16803
16828
  || this.inputReference.validity.tooLong
16804
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
16805
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
16806
- return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
16829
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
16830
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
16831
+ if (minLength === maxLength) {
16832
+ return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
16833
+ values: { length: minLength }
16834
+ });
16835
+ }
16836
+ return translate$1(ERROR_KEYS.LENGTH, this.language, {
16837
+ values: { minLength, maxLength }
16838
+ });
16807
16839
  }
16808
16840
  if (this.inputReference.validity.valueMissing) {
16809
- return translate$1('requiredError', this.language);
16841
+ return translate$1(ERROR_KEYS.REQUIRED, this.language);
16810
16842
  }
16811
16843
  }
16812
16844
  renderTooltip() {
@@ -16821,8 +16853,8 @@ const TelInput = class {
16821
16853
  if (this.touched) {
16822
16854
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
16823
16855
  }
16824
- 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 &&
16825
- 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));
16856
+ 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 &&
16857
+ 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));
16826
16858
  }
16827
16859
  static get watchers() { return {
16828
16860
  "clientStyling": ["handleStylingChange"],
@@ -17101,8 +17133,7 @@ const TextInput = class {
17101
17133
  return translate$1(ERROR_KEYS.REQUIRED, this.language);
17102
17134
  }
17103
17135
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
17104
- const minLength = this.validation.minLength;
17105
- const maxLength = this.validation.maxLength;
17136
+ const { minLength, maxLength } = this.validation;
17106
17137
  if (minLength === maxLength) {
17107
17138
  return translate$1(ERROR_KEYS.FIXED_LENGTH, this.language, {
17108
17139
  values: { length: minLength }
@@ -17135,8 +17166,8 @@ const TextInput = class {
17135
17166
  if (this.touched) {
17136
17167
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
17137
17168
  }
17138
- 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 &&
17139
- 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));
17169
+ 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 &&
17170
+ 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));
17140
17171
  }
17141
17172
  static get watchers() { return {
17142
17173
  "clientStyling": ["handleStylingChange"],