@everymatrix/pam-forgot-password 1.88.14 → 1.88.16

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.
@@ -41,7 +41,9 @@ const TRANSLATIONS = {
41
41
  "SAIdInvalidError": "Invalid SA ID",
42
42
  "PassportLengthError": "Passport number must be 8 or 9 digits.",
43
43
  "PasswordMustContain": "Password must contain:",
44
- "AlphanumericalOnly": "Only alphanumerical characters are allowed"
44
+ "AlphanumericalOnly": "Only alphanumerical characters are allowed",
45
+ "InvalidFirstName": "Only alphabetic characters are allowed.",
46
+ "InvalidLastName": "Only alphabetic characters are allowed."
45
47
  },
46
48
  "hu": {
47
49
  "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -74,7 +76,9 @@ const TRANSLATIONS = {
74
76
  "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
75
77
  "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
76
78
  "PasswordMustContain": "A jelszónak tartalmaznia kell:",
77
- "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek"
79
+ "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek",
80
+ "InvalidFirstName": "Csak betűk engedélyezettek.",
81
+ "InvalidLastName": "Csak betűk engedélyezettek."
78
82
  },
79
83
  "hr": {
80
84
  "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -107,7 +111,9 @@ const TRANSLATIONS = {
107
111
  "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
108
112
  "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
109
113
  "PasswordMustContain": "Lozinka mora sadržavati:",
110
- "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi"
114
+ "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi",
115
+ "InvalidFirstName": "Dozvoljena su samo slova.",
116
+ "InvalidLastName": "Dozvoljena su samo slova."
111
117
  },
112
118
  "tr": {
113
119
  "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -140,7 +146,9 @@ const TRANSLATIONS = {
140
146
  "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
141
147
  "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
142
148
  "PasswordMustContain": "Şifre şunları içermelidir:",
143
- "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir"
149
+ "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir",
150
+ "InvalidFirstName": "Yalnızca alfabetik karakterlere izin verilir.",
151
+ "InvalidLastName": "Yalnızca alfabetik karakterlere izin verilir."
144
152
  },
145
153
  "pt-br": {
146
154
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -173,7 +181,9 @@ const TRANSLATIONS = {
173
181
  "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
174
182
  "SAIdInvalidError": "Número de identificação da África do Sul inválido",
175
183
  "PasswordMustContain": "A senha deve conter:",
176
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
184
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
185
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
186
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
177
187
  },
178
188
  "pt": {
179
189
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -181,6 +191,7 @@ const TRANSLATIONS = {
181
191
  "dateFormatError": "A data selecionada tem um formato diferente do exigido.",
182
192
  "numberLengthError": "O número deve estar entre {min} e {max}",
183
193
  "lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
194
+ "fixedLengthError": "O comprimento deve ser de {length} caracteres",
184
195
  "requiredError": "Este campo é obrigatório.",
185
196
  "invalidOriginalPasswordError": "O campo da palavra-passe inicial não cumpre todos os critérios.",
186
197
  "invalidPassword": "A palavra-passe não cumpre todos os critérios",
@@ -208,7 +219,9 @@ const TRANSLATIONS = {
208
219
  "SAIdInvalidError": "ID da África do Sul inválido",
209
220
  "PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
210
221
  "PasswordMustContain": "A palavra-passe deve conter:",
211
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
222
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
223
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
224
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
212
225
  },
213
226
  "es-mx": {
214
227
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -241,7 +254,9 @@ const TRANSLATIONS = {
241
254
  "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
242
255
  "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
243
256
  "PasswordMustContain": "La contraseña debe contener:",
244
- "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
257
+ "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
258
+ "InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
259
+ "InvalidLastName": "Solo se permiten caracteres alfabéticos."
245
260
  },
246
261
  "fr": {
247
262
  "dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
@@ -277,7 +292,9 @@ const TRANSLATIONS = {
277
292
  "SAIdInvalidError": "Identifiant sud-africain invalide",
278
293
  "PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
279
294
  "PasswordMustContain": "Le mot de passe doit contenir :",
280
- "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
295
+ "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
296
+ "InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
297
+ "InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
281
298
  }
282
299
  };
283
300
  const CONSTANTS = {
@@ -13844,10 +13861,18 @@ const PostalCodeInput = class {
13844
13861
  return '';
13845
13862
  }
13846
13863
  if (this.inputReference.validity.valueMissing) {
13847
- return translate('requiredError', this.language);
13864
+ return translate(ERROR_KEYS.REQUIRED, this.language);
13848
13865
  }
13849
13866
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
13850
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
13867
+ const { minLength, maxLength } = this.validation;
13868
+ if (minLength === maxLength) {
13869
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
13870
+ values: { length: minLength }
13871
+ });
13872
+ }
13873
+ return translate(ERROR_KEYS.LENGTH, this.language, {
13874
+ values: { minLength, maxLength }
13875
+ });
13851
13876
  }
13852
13877
  if (this.inputReference.value.match(this.validationPattern) == null) {
13853
13878
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -13894,7 +13919,7 @@ const PostalCodeInput = class {
13894
13919
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
13895
13920
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
13896
13921
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
13897
- 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('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('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
13922
+ 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('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('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
13898
13923
  }
13899
13924
  static get watchers() { return {
13900
13925
  "clientStyling": ["handleStylingChange"],
@@ -14385,14 +14410,22 @@ const TelInput = class {
14385
14410
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
14386
14411
  return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
14387
14412
  }
14413
+ const { minLength, maxLength } = this.validation;
14388
14414
  if (this.inputReference.validity.tooShort
14389
14415
  || this.inputReference.validity.tooLong
14390
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
14391
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
14392
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
14416
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
14417
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
14418
+ if (minLength === maxLength) {
14419
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14420
+ values: { length: minLength }
14421
+ });
14422
+ }
14423
+ return translate(ERROR_KEYS.LENGTH, this.language, {
14424
+ values: { minLength, maxLength }
14425
+ });
14393
14426
  }
14394
14427
  if (this.inputReference.validity.valueMissing) {
14395
- return translate('requiredError', this.language);
14428
+ return translate(ERROR_KEYS.REQUIRED, this.language);
14396
14429
  }
14397
14430
  }
14398
14431
  renderTooltip() {
@@ -14407,8 +14440,8 @@ const TelInput = class {
14407
14440
  if (this.touched) {
14408
14441
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14409
14442
  }
14410
- 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 &&
14411
- 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));
14443
+ 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 &&
14444
+ 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));
14412
14445
  }
14413
14446
  static get watchers() { return {
14414
14447
  "clientStyling": ["handleStylingChange"],
@@ -14687,8 +14720,7 @@ const TextInput = class {
14687
14720
  return translate(ERROR_KEYS.REQUIRED, this.language);
14688
14721
  }
14689
14722
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
14690
- const minLength = this.validation.minLength;
14691
- const maxLength = this.validation.maxLength;
14723
+ const { minLength, maxLength } = this.validation;
14692
14724
  if (minLength === maxLength) {
14693
14725
  return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14694
14726
  values: { length: minLength }
@@ -14721,8 +14753,8 @@ const TextInput = class {
14721
14753
  if (this.touched) {
14722
14754
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14723
14755
  }
14724
- 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 &&
14725
- 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));
14756
+ 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 &&
14757
+ 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));
14726
14758
  }
14727
14759
  static get watchers() { return {
14728
14760
  "clientStyling": ["handleStylingChange"],
@@ -37,7 +37,9 @@ const TRANSLATIONS = {
37
37
  "SAIdInvalidError": "Invalid SA ID",
38
38
  "PassportLengthError": "Passport number must be 8 or 9 digits.",
39
39
  "PasswordMustContain": "Password must contain:",
40
- "AlphanumericalOnly": "Only alphanumerical characters are allowed"
40
+ "AlphanumericalOnly": "Only alphanumerical characters are allowed",
41
+ "InvalidFirstName": "Only alphabetic characters are allowed.",
42
+ "InvalidLastName": "Only alphabetic characters are allowed."
41
43
  },
42
44
  "hu": {
43
45
  "dateError": "A választott dátumnak {min} és {max} között kell lennie",
@@ -70,7 +72,9 @@ const TRANSLATIONS = {
70
72
  "SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
71
73
  "SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
72
74
  "PasswordMustContain": "A jelszónak tartalmaznia kell:",
73
- "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek"
75
+ "AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek",
76
+ "InvalidFirstName": "Csak betűk engedélyezettek.",
77
+ "InvalidLastName": "Csak betűk engedélyezettek."
74
78
  },
75
79
  "hr": {
76
80
  "dateError": "Odabrani datum treba biti između {min} i {max}",
@@ -103,7 +107,9 @@ const TRANSLATIONS = {
103
107
  "SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
104
108
  "SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
105
109
  "PasswordMustContain": "Lozinka mora sadržavati:",
106
- "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi"
110
+ "AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi",
111
+ "InvalidFirstName": "Dozvoljena su samo slova.",
112
+ "InvalidLastName": "Dozvoljena su samo slova."
107
113
  },
108
114
  "tr": {
109
115
  "dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
@@ -136,7 +142,9 @@ const TRANSLATIONS = {
136
142
  "SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
137
143
  "SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
138
144
  "PasswordMustContain": "Şifre şunları içermelidir:",
139
- "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir"
145
+ "AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir",
146
+ "InvalidFirstName": "Yalnızca alfabetik karakterlere izin verilir.",
147
+ "InvalidLastName": "Yalnızca alfabetik karakterlere izin verilir."
140
148
  },
141
149
  "pt-br": {
142
150
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -169,7 +177,9 @@ const TRANSLATIONS = {
169
177
  "SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
170
178
  "SAIdInvalidError": "Número de identificação da África do Sul inválido",
171
179
  "PasswordMustContain": "A senha deve conter:",
172
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
180
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
181
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
182
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
173
183
  },
174
184
  "pt": {
175
185
  "dateError": "A data selecionada deve estar entre {min} e {max}",
@@ -177,6 +187,7 @@ const TRANSLATIONS = {
177
187
  "dateFormatError": "A data selecionada tem um formato diferente do exigido.",
178
188
  "numberLengthError": "O número deve estar entre {min} e {max}",
179
189
  "lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
190
+ "fixedLengthError": "O comprimento deve ser de {length} caracteres",
180
191
  "requiredError": "Este campo é obrigatório.",
181
192
  "invalidOriginalPasswordError": "O campo da palavra-passe inicial não cumpre todos os critérios.",
182
193
  "invalidPassword": "A palavra-passe não cumpre todos os critérios",
@@ -204,7 +215,9 @@ const TRANSLATIONS = {
204
215
  "SAIdInvalidError": "ID da África do Sul inválido",
205
216
  "PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
206
217
  "PasswordMustContain": "A palavra-passe deve conter:",
207
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
218
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
219
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
220
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
208
221
  },
209
222
  "es-mx": {
210
223
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -237,7 +250,9 @@ const TRANSLATIONS = {
237
250
  "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
238
251
  "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
239
252
  "PasswordMustContain": "La contraseña debe contener:",
240
- "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
253
+ "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
254
+ "InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
255
+ "InvalidLastName": "Solo se permiten caracteres alfabéticos."
241
256
  },
242
257
  "fr": {
243
258
  "dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
@@ -273,7 +288,9 @@ const TRANSLATIONS = {
273
288
  "SAIdInvalidError": "Identifiant sud-africain invalide",
274
289
  "PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
275
290
  "PasswordMustContain": "Le mot de passe doit contenir :",
276
- "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
291
+ "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
292
+ "InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
293
+ "InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
277
294
  }
278
295
  };
279
296
  const CONSTANTS = {
@@ -13840,10 +13857,18 @@ const PostalCodeInput = class {
13840
13857
  return '';
13841
13858
  }
13842
13859
  if (this.inputReference.validity.valueMissing) {
13843
- return translate('requiredError', this.language);
13860
+ return translate(ERROR_KEYS.REQUIRED, this.language);
13844
13861
  }
13845
13862
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
13846
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
13863
+ const { minLength, maxLength } = this.validation;
13864
+ if (minLength === maxLength) {
13865
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
13866
+ values: { length: minLength }
13867
+ });
13868
+ }
13869
+ return translate(ERROR_KEYS.LENGTH, this.language, {
13870
+ values: { minLength, maxLength }
13871
+ });
13847
13872
  }
13848
13873
  if (this.inputReference.value.match(this.validationPattern) == null) {
13849
13874
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -13890,7 +13915,7 @@ const PostalCodeInput = class {
13890
13915
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
13891
13916
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
13892
13917
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
13893
- 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('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('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
13918
+ 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('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('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: 'f729f6206cc900a2c94e3df0e8b08cc3dc5b751f', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), h("small", { key: 'c8a79e601f22444b34dc7d037c94f92875f51aad', class: 'text__error-message' }, this.errorMessage)));
13894
13919
  }
13895
13920
  static get watchers() { return {
13896
13921
  "clientStyling": ["handleStylingChange"],
@@ -14381,14 +14406,22 @@ const TelInput = class {
14381
14406
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
14382
14407
  return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
14383
14408
  }
14409
+ const { minLength, maxLength } = this.validation;
14384
14410
  if (this.inputReference.validity.tooShort
14385
14411
  || this.inputReference.validity.tooLong
14386
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
14387
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
14388
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
14412
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
14413
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
14414
+ if (minLength === maxLength) {
14415
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14416
+ values: { length: minLength }
14417
+ });
14418
+ }
14419
+ return translate(ERROR_KEYS.LENGTH, this.language, {
14420
+ values: { minLength, maxLength }
14421
+ });
14389
14422
  }
14390
14423
  if (this.inputReference.validity.valueMissing) {
14391
- return translate('requiredError', this.language);
14424
+ return translate(ERROR_KEYS.REQUIRED, this.language);
14392
14425
  }
14393
14426
  }
14394
14427
  renderTooltip() {
@@ -14403,8 +14436,8 @@ const TelInput = class {
14403
14436
  if (this.touched) {
14404
14437
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14405
14438
  }
14406
- 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 &&
14407
- 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));
14439
+ 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 &&
14440
+ 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));
14408
14441
  }
14409
14442
  static get watchers() { return {
14410
14443
  "clientStyling": ["handleStylingChange"],
@@ -14683,8 +14716,7 @@ const TextInput = class {
14683
14716
  return translate(ERROR_KEYS.REQUIRED, this.language);
14684
14717
  }
14685
14718
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
14686
- const minLength = this.validation.minLength;
14687
- const maxLength = this.validation.maxLength;
14719
+ const { minLength, maxLength } = this.validation;
14688
14720
  if (minLength === maxLength) {
14689
14721
  return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14690
14722
  values: { length: minLength }
@@ -14717,8 +14749,8 @@ const TextInput = class {
14717
14749
  if (this.touched) {
14718
14750
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14719
14751
  }
14720
- 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 &&
14721
- 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));
14752
+ 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 &&
14753
+ 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));
14722
14754
  }
14723
14755
  static get watchers() { return {
14724
14756
  "clientStyling": ["handleStylingChange"],