@everymatrix/general-input 1.88.14 → 1.88.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_14.cjs.entry.js +52 -21
- package/dist/collection/components/postalcode-input/postalcode-input.js +12 -3
- package/dist/collection/components/tel-input/tel-input.js +15 -6
- package/dist/collection/components/text-input/text-input.js +3 -4
- package/dist/collection/utils/locale.utils.js +24 -8
- package/dist/esm/checkbox-group-input_14.entry.js +52 -21
- package/dist/general-input/checkbox-group-input_14.entry.js +241 -241
- package/package.json +1 -1
|
@@ -40,7 +40,9 @@ const TRANSLATIONS = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
|
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 = {
|
|
@@ -13843,10 +13859,18 @@ const PostalCodeInput = class {
|
|
|
13843
13859
|
return '';
|
|
13844
13860
|
}
|
|
13845
13861
|
if (this.inputReference.validity.valueMissing) {
|
|
13846
|
-
return translate(
|
|
13862
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
13847
13863
|
}
|
|
13848
13864
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
13849
|
-
|
|
13865
|
+
const { minLength, maxLength } = this.validation;
|
|
13866
|
+
if (minLength === maxLength) {
|
|
13867
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
13868
|
+
values: { length: minLength }
|
|
13869
|
+
});
|
|
13870
|
+
}
|
|
13871
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
13872
|
+
values: { minLength, maxLength }
|
|
13873
|
+
});
|
|
13850
13874
|
}
|
|
13851
13875
|
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
13852
13876
|
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
@@ -13893,7 +13917,7 @@ const PostalCodeInput = class {
|
|
|
13893
13917
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
13894
13918
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
13895
13919
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
13896
|
-
return (index.h("div", { key: '
|
|
13920
|
+
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)));
|
|
13897
13921
|
}
|
|
13898
13922
|
static get watchers() { return {
|
|
13899
13923
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14384,14 +14408,22 @@ const TelInput = class {
|
|
|
14384
14408
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
14385
14409
|
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
14386
14410
|
}
|
|
14411
|
+
const { minLength, maxLength } = this.validation;
|
|
14387
14412
|
if (this.inputReference.validity.tooShort
|
|
14388
14413
|
|| this.inputReference.validity.tooLong
|
|
14389
|
-
|| (
|
|
14390
|
-
|| (
|
|
14391
|
-
|
|
14414
|
+
|| (minLength && this.phoneValue && this.phoneValue.length < minLength)
|
|
14415
|
+
|| (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
|
|
14416
|
+
if (minLength === maxLength) {
|
|
14417
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
14418
|
+
values: { length: minLength }
|
|
14419
|
+
});
|
|
14420
|
+
}
|
|
14421
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
14422
|
+
values: { minLength, maxLength }
|
|
14423
|
+
});
|
|
14392
14424
|
}
|
|
14393
14425
|
if (this.inputReference.validity.valueMissing) {
|
|
14394
|
-
return translate(
|
|
14426
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
14395
14427
|
}
|
|
14396
14428
|
}
|
|
14397
14429
|
renderTooltip() {
|
|
@@ -14406,8 +14438,8 @@ const TelInput = class {
|
|
|
14406
14438
|
if (this.touched) {
|
|
14407
14439
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14408
14440
|
}
|
|
14409
|
-
return index.h("div", { key: '
|
|
14410
|
-
index.h("img", { key: '
|
|
14441
|
+
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 &&
|
|
14442
|
+
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));
|
|
14411
14443
|
}
|
|
14412
14444
|
static get watchers() { return {
|
|
14413
14445
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14686,8 +14718,7 @@ const TextInput = class {
|
|
|
14686
14718
|
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
14687
14719
|
}
|
|
14688
14720
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
14689
|
-
const minLength = this.validation
|
|
14690
|
-
const maxLength = this.validation.maxLength;
|
|
14721
|
+
const { minLength, maxLength } = this.validation;
|
|
14691
14722
|
if (minLength === maxLength) {
|
|
14692
14723
|
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
14693
14724
|
values: { length: minLength }
|
|
@@ -14720,8 +14751,8 @@ const TextInput = class {
|
|
|
14720
14751
|
if (this.touched) {
|
|
14721
14752
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14722
14753
|
}
|
|
14723
|
-
return index.h("div", { key: '
|
|
14724
|
-
index.h("img", { key: '
|
|
14754
|
+
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 &&
|
|
14755
|
+
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));
|
|
14725
14756
|
}
|
|
14726
14757
|
static get watchers() { return {
|
|
14727
14758
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
+
import { ERROR_KEYS } from "../../utils/locale.utils";
|
|
4
5
|
export class PostalCodeInput {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.value = '';
|
|
@@ -286,10 +287,18 @@ export class PostalCodeInput {
|
|
|
286
287
|
return '';
|
|
287
288
|
}
|
|
288
289
|
if (this.inputReference.validity.valueMissing) {
|
|
289
|
-
return translate(
|
|
290
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
290
291
|
}
|
|
291
292
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
292
|
-
|
|
293
|
+
const { minLength, maxLength } = this.validation;
|
|
294
|
+
if (minLength === maxLength) {
|
|
295
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
296
|
+
values: { length: minLength }
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
300
|
+
values: { minLength, maxLength }
|
|
301
|
+
});
|
|
293
302
|
}
|
|
294
303
|
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
295
304
|
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
@@ -336,7 +345,7 @@ export class PostalCodeInput {
|
|
|
336
345
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
337
346
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
338
347
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
339
|
-
return (h("div", { key: '
|
|
348
|
+
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: tooltipIcon, 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)));
|
|
340
349
|
}
|
|
341
350
|
static get is() { return "postalcode-input"; }
|
|
342
351
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
|
+
import { ERROR_KEYS } from "../../utils/locale.utils";
|
|
4
5
|
export class TelInput {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.validationPattern = '';
|
|
@@ -178,14 +179,22 @@ export class TelInput {
|
|
|
178
179
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
179
180
|
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
180
181
|
}
|
|
182
|
+
const { minLength, maxLength } = this.validation;
|
|
181
183
|
if (this.inputReference.validity.tooShort
|
|
182
184
|
|| this.inputReference.validity.tooLong
|
|
183
|
-
|| (
|
|
184
|
-
|| (
|
|
185
|
-
|
|
185
|
+
|| (minLength && this.phoneValue && this.phoneValue.length < minLength)
|
|
186
|
+
|| (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
|
|
187
|
+
if (minLength === maxLength) {
|
|
188
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
189
|
+
values: { length: minLength }
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
193
|
+
values: { minLength, maxLength }
|
|
194
|
+
});
|
|
186
195
|
}
|
|
187
196
|
if (this.inputReference.validity.valueMissing) {
|
|
188
|
-
return translate(
|
|
197
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
189
198
|
}
|
|
190
199
|
}
|
|
191
200
|
renderTooltip() {
|
|
@@ -200,8 +209,8 @@ export class TelInput {
|
|
|
200
209
|
if (this.touched) {
|
|
201
210
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
202
211
|
}
|
|
203
|
-
return h("div", { key: '
|
|
204
|
-
h("img", { key: '
|
|
212
|
+
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 &&
|
|
213
|
+
h("img", { key: '9ff0a8c19aa067c1e7799227617405e373b344e4', class: 'tel__tooltip-icon', src: tooltipIcon, 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));
|
|
205
214
|
}
|
|
206
215
|
static get is() { return "tel-input"; }
|
|
207
216
|
static get encapsulation() { return "shadow"; }
|
|
@@ -264,8 +264,7 @@ export class TextInput {
|
|
|
264
264
|
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
265
265
|
}
|
|
266
266
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
267
|
-
const minLength = this.validation
|
|
268
|
-
const maxLength = this.validation.maxLength;
|
|
267
|
+
const { minLength, maxLength } = this.validation;
|
|
269
268
|
if (minLength === maxLength) {
|
|
270
269
|
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
271
270
|
values: { length: minLength }
|
|
@@ -298,8 +297,8 @@ export class TextInput {
|
|
|
298
297
|
if (this.touched) {
|
|
299
298
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
300
299
|
}
|
|
301
|
-
return h("div", { key: '
|
|
302
|
-
h("img", { key: '
|
|
300
|
+
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 &&
|
|
301
|
+
h("img", { key: '23d4b70d93910f43ce0ea54c1bcffd81dfc54ebc', class: 'text__tooltip-icon', src: tooltipIcon, 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));
|
|
303
302
|
}
|
|
304
303
|
static get is() { return "text-input"; }
|
|
305
304
|
static get encapsulation() { return "shadow"; }
|
|
@@ -34,7 +34,9 @@ export const TRANSLATIONS = {
|
|
|
34
34
|
"SAIdInvalidError": "Invalid SA ID",
|
|
35
35
|
"PassportLengthError": "Passport number must be 8 or 9 digits.",
|
|
36
36
|
"PasswordMustContain": "Password must contain:",
|
|
37
|
-
"AlphanumericalOnly": "Only alphanumerical characters are allowed"
|
|
37
|
+
"AlphanumericalOnly": "Only alphanumerical characters are allowed",
|
|
38
|
+
"InvalidFirstName": "Only alphabetic characters are allowed.",
|
|
39
|
+
"InvalidLastName": "Only alphabetic characters are allowed."
|
|
38
40
|
},
|
|
39
41
|
"hu": {
|
|
40
42
|
"dateError": "A választott dátumnak {min} és {max} között kell lennie",
|
|
@@ -67,7 +69,9 @@ export const TRANSLATIONS = {
|
|
|
67
69
|
"SAIdLengthError": "A dél-afrikai személyi számnak 13 számjegyűnek kell lennie",
|
|
68
70
|
"SAIdInvalidError": "Érvénytelen dél-afrikai személyi szám",
|
|
69
71
|
"PasswordMustContain": "A jelszónak tartalmaznia kell:",
|
|
70
|
-
"AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek"
|
|
72
|
+
"AlphanumericalOnly": "Csak alfanumerikus karakterek engedélyezettek",
|
|
73
|
+
"InvalidFirstName": "Csak betűk engedélyezettek.",
|
|
74
|
+
"InvalidLastName": "Csak betűk engedélyezettek."
|
|
71
75
|
},
|
|
72
76
|
"hr": {
|
|
73
77
|
"dateError": "Odabrani datum treba biti između {min} i {max}",
|
|
@@ -100,7 +104,9 @@ export const TRANSLATIONS = {
|
|
|
100
104
|
"SAIdLengthError": "Južnoafrički osobni broj mora imati 13 znamenki",
|
|
101
105
|
"SAIdInvalidError": "Nevažeći južnoafrički osobni broj",
|
|
102
106
|
"PasswordMustContain": "Lozinka mora sadržavati:",
|
|
103
|
-
"AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi"
|
|
107
|
+
"AlphanumericalOnly": "Dopušteni su samo alfanumerički znakovi",
|
|
108
|
+
"InvalidFirstName": "Dozvoljena su samo slova.",
|
|
109
|
+
"InvalidLastName": "Dozvoljena su samo slova."
|
|
104
110
|
},
|
|
105
111
|
"tr": {
|
|
106
112
|
"dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
|
|
@@ -133,7 +139,9 @@ export const TRANSLATIONS = {
|
|
|
133
139
|
"SAIdLengthError": "Güney Afrika kimlik numarası 13 haneli olmalıdır",
|
|
134
140
|
"SAIdInvalidError": "Geçersiz Güney Afrika kimlik numarası",
|
|
135
141
|
"PasswordMustContain": "Şifre şunları içermelidir:",
|
|
136
|
-
"AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir"
|
|
142
|
+
"AlphanumericalOnly": "Yalnızca alfanümerik karakterlere izin verilir",
|
|
143
|
+
"InvalidFirstName": "Yalnızca alfabetik karakterlere izin verilir.",
|
|
144
|
+
"InvalidLastName": "Yalnızca alfabetik karakterlere izin verilir."
|
|
137
145
|
},
|
|
138
146
|
"pt-br": {
|
|
139
147
|
"dateError": "A data selecionada deve estar entre {min} e {max}",
|
|
@@ -166,7 +174,9 @@ export const TRANSLATIONS = {
|
|
|
166
174
|
"SAIdLengthError": "O número de identificação da África do Sul deve ter 13 dígitos",
|
|
167
175
|
"SAIdInvalidError": "Número de identificação da África do Sul inválido",
|
|
168
176
|
"PasswordMustContain": "A senha deve conter:",
|
|
169
|
-
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
|
|
177
|
+
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
|
|
178
|
+
"InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
|
|
179
|
+
"InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
|
|
170
180
|
},
|
|
171
181
|
"pt": {
|
|
172
182
|
"dateError": "A data selecionada deve estar entre {min} e {max}",
|
|
@@ -201,7 +211,9 @@ export const TRANSLATIONS = {
|
|
|
201
211
|
"SAIdInvalidError": "ID da África do Sul inválido",
|
|
202
212
|
"PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
|
|
203
213
|
"PasswordMustContain": "A palavra-passe deve conter:",
|
|
204
|
-
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
|
|
214
|
+
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
|
|
215
|
+
"InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
|
|
216
|
+
"InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
|
|
205
217
|
},
|
|
206
218
|
"es-mx": {
|
|
207
219
|
"dateError": "La fecha seleccionada debe ser entre {min} y {max}",
|
|
@@ -234,7 +246,9 @@ export const TRANSLATIONS = {
|
|
|
234
246
|
"SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
|
|
235
247
|
"SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
|
|
236
248
|
"PasswordMustContain": "La contraseña debe contener:",
|
|
237
|
-
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
|
|
249
|
+
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
|
|
250
|
+
"InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
|
|
251
|
+
"InvalidLastName": "Solo se permiten caracteres alfabéticos."
|
|
238
252
|
},
|
|
239
253
|
"fr": {
|
|
240
254
|
"dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
|
|
@@ -270,7 +284,9 @@ export const TRANSLATIONS = {
|
|
|
270
284
|
"SAIdInvalidError": "Identifiant sud-africain invalide",
|
|
271
285
|
"PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
|
|
272
286
|
"PasswordMustContain": "Le mot de passe doit contenir :",
|
|
273
|
-
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
|
|
287
|
+
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
|
|
288
|
+
"InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
|
|
289
|
+
"InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
|
|
274
290
|
}
|
|
275
291
|
};
|
|
276
292
|
export const CONSTANTS = {
|