@everymatrix/general-input 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.
@@ -36,7 +36,9 @@ const TRANSLATIONS = {
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 = {
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 = {
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 = {
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 = {
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}",
@@ -176,6 +186,7 @@ const TRANSLATIONS = {
176
186
  "dateFormatError": "A data selecionada tem um formato diferente do exigido.",
177
187
  "numberLengthError": "O número deve estar entre {min} e {max}",
178
188
  "lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
189
+ "fixedLengthError": "O comprimento deve ser de {length} caracteres",
179
190
  "requiredError": "Este campo é obrigatório.",
180
191
  "invalidOriginalPasswordError": "O campo da palavra-passe inicial não cumpre todos os critérios.",
181
192
  "invalidPassword": "A palavra-passe não cumpre todos os critérios",
@@ -203,7 +214,9 @@ const TRANSLATIONS = {
203
214
  "SAIdInvalidError": "ID da África do Sul inválido",
204
215
  "PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
205
216
  "PasswordMustContain": "A palavra-passe deve conter:",
206
- "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
217
+ "AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
218
+ "InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
219
+ "InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
207
220
  },
208
221
  "es-mx": {
209
222
  "dateError": "La fecha seleccionada debe ser entre {min} y {max}",
@@ -236,7 +249,9 @@ const TRANSLATIONS = {
236
249
  "SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
237
250
  "SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
238
251
  "PasswordMustContain": "La contraseña debe contener:",
239
- "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
252
+ "AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
253
+ "InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
254
+ "InvalidLastName": "Solo se permiten caracteres alfabéticos."
240
255
  },
241
256
  "fr": {
242
257
  "dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
@@ -272,7 +287,9 @@ const TRANSLATIONS = {
272
287
  "SAIdInvalidError": "Identifiant sud-africain invalide",
273
288
  "PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
274
289
  "PasswordMustContain": "Le mot de passe doit contenir :",
275
- "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
290
+ "AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
291
+ "InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
292
+ "InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
276
293
  }
277
294
  };
278
295
  const CONSTANTS = {
@@ -13839,10 +13856,18 @@ const PostalCodeInput = class {
13839
13856
  return '';
13840
13857
  }
13841
13858
  if (this.inputReference.validity.valueMissing) {
13842
- return translate('requiredError', this.language);
13859
+ return translate(ERROR_KEYS.REQUIRED, this.language);
13843
13860
  }
13844
13861
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
13845
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
13862
+ const { minLength, maxLength } = this.validation;
13863
+ if (minLength === maxLength) {
13864
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
13865
+ values: { length: minLength }
13866
+ });
13867
+ }
13868
+ return translate(ERROR_KEYS.LENGTH, this.language, {
13869
+ values: { minLength, maxLength }
13870
+ });
13846
13871
  }
13847
13872
  if (this.inputReference.value.match(this.validationPattern) == null) {
13848
13873
  const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
@@ -13889,7 +13914,7 @@ const PostalCodeInput = class {
13889
13914
  let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
13890
13915
  this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
13891
13916
  let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
13892
- 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)));
13917
+ 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)));
13893
13918
  }
13894
13919
  static get watchers() { return {
13895
13920
  "clientStyling": ["handleStylingChange"],
@@ -14380,14 +14405,22 @@ const TelInput = class {
14380
14405
  const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
14381
14406
  return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
14382
14407
  }
14408
+ const { minLength, maxLength } = this.validation;
14383
14409
  if (this.inputReference.validity.tooShort
14384
14410
  || this.inputReference.validity.tooLong
14385
- || (this.validation.minLength && this.phoneValue && this.phoneValue.length < this.validation.minLength)
14386
- || (this.validation.maxLength && this.phoneValue && this.phoneValue.length > this.validation.maxLength)) {
14387
- return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
14411
+ || (minLength && this.phoneValue && this.phoneValue.length < minLength)
14412
+ || (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
14413
+ if (minLength === maxLength) {
14414
+ return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14415
+ values: { length: minLength }
14416
+ });
14417
+ }
14418
+ return translate(ERROR_KEYS.LENGTH, this.language, {
14419
+ values: { minLength, maxLength }
14420
+ });
14388
14421
  }
14389
14422
  if (this.inputReference.validity.valueMissing) {
14390
- return translate('requiredError', this.language);
14423
+ return translate(ERROR_KEYS.REQUIRED, this.language);
14391
14424
  }
14392
14425
  }
14393
14426
  renderTooltip() {
@@ -14402,8 +14435,8 @@ const TelInput = class {
14402
14435
  if (this.touched) {
14403
14436
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14404
14437
  }
14405
- 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 &&
14406
- 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));
14438
+ 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 &&
14439
+ 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));
14407
14440
  }
14408
14441
  static get watchers() { return {
14409
14442
  "clientStyling": ["handleStylingChange"],
@@ -14682,8 +14715,7 @@ const TextInput = class {
14682
14715
  return translate(ERROR_KEYS.REQUIRED, this.language);
14683
14716
  }
14684
14717
  if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
14685
- const minLength = this.validation.minLength;
14686
- const maxLength = this.validation.maxLength;
14718
+ const { minLength, maxLength } = this.validation;
14687
14719
  if (minLength === maxLength) {
14688
14720
  return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
14689
14721
  values: { length: minLength }
@@ -14716,8 +14748,8 @@ const TextInput = class {
14716
14748
  if (this.touched) {
14717
14749
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14718
14750
  }
14719
- 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 &&
14720
- 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));
14751
+ 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 &&
14752
+ 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));
14721
14753
  }
14722
14754
  static get watchers() { return {
14723
14755
  "clientStyling": ["handleStylingChange"],