@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.
- package/dist/cjs/checkbox-group-input_14.cjs.entry.js +53 -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 +25 -8
- package/dist/esm/checkbox-group-input_14.entry.js +53 -21
- package/dist/general-input/checkbox-group-input_14.entry.js +242 -242
- 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}",
|
|
@@ -180,6 +190,7 @@ const TRANSLATIONS = {
|
|
|
180
190
|
"dateFormatError": "A data selecionada tem um formato diferente do exigido.",
|
|
181
191
|
"numberLengthError": "O número deve estar entre {min} e {max}",
|
|
182
192
|
"lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
|
|
193
|
+
"fixedLengthError": "O comprimento deve ser de {length} caracteres",
|
|
183
194
|
"requiredError": "Este campo é obrigatório.",
|
|
184
195
|
"invalidOriginalPasswordError": "O campo da palavra-passe inicial não cumpre todos os critérios.",
|
|
185
196
|
"invalidPassword": "A palavra-passe não cumpre todos os critérios",
|
|
@@ -207,7 +218,9 @@ const TRANSLATIONS = {
|
|
|
207
218
|
"SAIdInvalidError": "ID da África do Sul inválido",
|
|
208
219
|
"PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
|
|
209
220
|
"PasswordMustContain": "A palavra-passe deve conter:",
|
|
210
|
-
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
|
|
221
|
+
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
|
|
222
|
+
"InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
|
|
223
|
+
"InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
|
|
211
224
|
},
|
|
212
225
|
"es-mx": {
|
|
213
226
|
"dateError": "La fecha seleccionada debe ser entre {min} y {max}",
|
|
@@ -240,7 +253,9 @@ const TRANSLATIONS = {
|
|
|
240
253
|
"SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
|
|
241
254
|
"SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
|
|
242
255
|
"PasswordMustContain": "La contraseña debe contener:",
|
|
243
|
-
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
|
|
256
|
+
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
|
|
257
|
+
"InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
|
|
258
|
+
"InvalidLastName": "Solo se permiten caracteres alfabéticos."
|
|
244
259
|
},
|
|
245
260
|
"fr": {
|
|
246
261
|
"dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
|
|
@@ -276,7 +291,9 @@ const TRANSLATIONS = {
|
|
|
276
291
|
"SAIdInvalidError": "Identifiant sud-africain invalide",
|
|
277
292
|
"PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
|
|
278
293
|
"PasswordMustContain": "Le mot de passe doit contenir :",
|
|
279
|
-
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
|
|
294
|
+
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
|
|
295
|
+
"InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
|
|
296
|
+
"InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
|
|
280
297
|
}
|
|
281
298
|
};
|
|
282
299
|
const CONSTANTS = {
|
|
@@ -13843,10 +13860,18 @@ const PostalCodeInput = class {
|
|
|
13843
13860
|
return '';
|
|
13844
13861
|
}
|
|
13845
13862
|
if (this.inputReference.validity.valueMissing) {
|
|
13846
|
-
return translate(
|
|
13863
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
13847
13864
|
}
|
|
13848
13865
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
13849
|
-
|
|
13866
|
+
const { minLength, maxLength } = this.validation;
|
|
13867
|
+
if (minLength === maxLength) {
|
|
13868
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
13869
|
+
values: { length: minLength }
|
|
13870
|
+
});
|
|
13871
|
+
}
|
|
13872
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
13873
|
+
values: { minLength, maxLength }
|
|
13874
|
+
});
|
|
13850
13875
|
}
|
|
13851
13876
|
if (this.inputReference.value.match(this.validationPattern) == null) {
|
|
13852
13877
|
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
@@ -13893,7 +13918,7 @@ const PostalCodeInput = class {
|
|
|
13893
13918
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
13894
13919
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
13895
13920
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
13896
|
-
return (index.h("div", { key: '
|
|
13921
|
+
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
13922
|
}
|
|
13898
13923
|
static get watchers() { return {
|
|
13899
13924
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14384,14 +14409,22 @@ const TelInput = class {
|
|
|
14384
14409
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
14385
14410
|
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
14386
14411
|
}
|
|
14412
|
+
const { minLength, maxLength } = this.validation;
|
|
14387
14413
|
if (this.inputReference.validity.tooShort
|
|
14388
14414
|
|| this.inputReference.validity.tooLong
|
|
14389
|
-
|| (
|
|
14390
|
-
|| (
|
|
14391
|
-
|
|
14415
|
+
|| (minLength && this.phoneValue && this.phoneValue.length < minLength)
|
|
14416
|
+
|| (maxLength && this.phoneValue && this.phoneValue.length > maxLength)) {
|
|
14417
|
+
if (minLength === maxLength) {
|
|
14418
|
+
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
14419
|
+
values: { length: minLength }
|
|
14420
|
+
});
|
|
14421
|
+
}
|
|
14422
|
+
return translate(ERROR_KEYS.LENGTH, this.language, {
|
|
14423
|
+
values: { minLength, maxLength }
|
|
14424
|
+
});
|
|
14392
14425
|
}
|
|
14393
14426
|
if (this.inputReference.validity.valueMissing) {
|
|
14394
|
-
return translate(
|
|
14427
|
+
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
14395
14428
|
}
|
|
14396
14429
|
}
|
|
14397
14430
|
renderTooltip() {
|
|
@@ -14406,8 +14439,8 @@ const TelInput = class {
|
|
|
14406
14439
|
if (this.touched) {
|
|
14407
14440
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14408
14441
|
}
|
|
14409
|
-
return index.h("div", { key: '
|
|
14410
|
-
index.h("img", { key: '
|
|
14442
|
+
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 &&
|
|
14443
|
+
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
14444
|
}
|
|
14412
14445
|
static get watchers() { return {
|
|
14413
14446
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14686,8 +14719,7 @@ const TextInput = class {
|
|
|
14686
14719
|
return translate(ERROR_KEYS.REQUIRED, this.language);
|
|
14687
14720
|
}
|
|
14688
14721
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
14689
|
-
const minLength = this.validation
|
|
14690
|
-
const maxLength = this.validation.maxLength;
|
|
14722
|
+
const { minLength, maxLength } = this.validation;
|
|
14691
14723
|
if (minLength === maxLength) {
|
|
14692
14724
|
return translate(ERROR_KEYS.FIXED_LENGTH, this.language, {
|
|
14693
14725
|
values: { length: minLength }
|
|
@@ -14720,8 +14752,8 @@ const TextInput = class {
|
|
|
14720
14752
|
if (this.touched) {
|
|
14721
14753
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14722
14754
|
}
|
|
14723
|
-
return index.h("div", { key: '
|
|
14724
|
-
index.h("img", { key: '
|
|
14755
|
+
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 &&
|
|
14756
|
+
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
14757
|
}
|
|
14726
14758
|
static get watchers() { return {
|
|
14727
14759
|
"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}",
|
|
@@ -174,6 +184,7 @@ export const TRANSLATIONS = {
|
|
|
174
184
|
"dateFormatError": "A data selecionada tem um formato diferente do exigido.",
|
|
175
185
|
"numberLengthError": "O número deve estar entre {min} e {max}",
|
|
176
186
|
"lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
|
|
187
|
+
"fixedLengthError": "O comprimento deve ser de {length} caracteres",
|
|
177
188
|
"requiredError": "Este campo é obrigatório.",
|
|
178
189
|
"invalidOriginalPasswordError": "O campo da palavra-passe inicial não cumpre todos os critérios.",
|
|
179
190
|
"invalidPassword": "A palavra-passe não cumpre todos os critérios",
|
|
@@ -201,7 +212,9 @@ export const TRANSLATIONS = {
|
|
|
201
212
|
"SAIdInvalidError": "ID da África do Sul inválido",
|
|
202
213
|
"PassportLengthError": "O número de passaporte deve ter 8 ou 9 dígitos.",
|
|
203
214
|
"PasswordMustContain": "A palavra-passe deve conter:",
|
|
204
|
-
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos"
|
|
215
|
+
"AlphanumericalOnly": "Apenas caracteres alfanuméricos são permitidos",
|
|
216
|
+
"InvalidFirstName": "Apenas caracteres alfabéticos são permitidos.",
|
|
217
|
+
"InvalidLastName": "Apenas caracteres alfabéticos são permitidos."
|
|
205
218
|
},
|
|
206
219
|
"es-mx": {
|
|
207
220
|
"dateError": "La fecha seleccionada debe ser entre {min} y {max}",
|
|
@@ -234,7 +247,9 @@ export const TRANSLATIONS = {
|
|
|
234
247
|
"SAIdLengthError": "El número de identificación de Sudáfrica debe tener 13 dígitos",
|
|
235
248
|
"SAIdInvalidError": "Número de identificación de Sudáfrica inválido",
|
|
236
249
|
"PasswordMustContain": "La contraseña debe contener:",
|
|
237
|
-
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos"
|
|
250
|
+
"AlphanumericalOnly": "Solo se permiten caracteres alfanuméricos",
|
|
251
|
+
"InvalidFirstName": "Solo se permiten caracteres alfabéticos.",
|
|
252
|
+
"InvalidLastName": "Solo se permiten caracteres alfabéticos."
|
|
238
253
|
},
|
|
239
254
|
"fr": {
|
|
240
255
|
"dateError": "La date sélectionnée doit être comprise entre {min} et {max}",
|
|
@@ -270,7 +285,9 @@ export const TRANSLATIONS = {
|
|
|
270
285
|
"SAIdInvalidError": "Identifiant sud-africain invalide",
|
|
271
286
|
"PassportLengthError": "Le numéro de passeport doit comporter 8 ou 9 chiffres.",
|
|
272
287
|
"PasswordMustContain": "Le mot de passe doit contenir :",
|
|
273
|
-
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés"
|
|
288
|
+
"AlphanumericalOnly": "Seuls les caractères alphanumériques sont autorisés",
|
|
289
|
+
"InvalidFirstName": "Seuls les caractères alphabétiques sont autorisés.",
|
|
290
|
+
"InvalidLastName": "Seuls les caractères alphabétiques sont autorisés."
|
|
274
291
|
}
|
|
275
292
|
};
|
|
276
293
|
export const CONSTANTS = {
|