@everymatrix/pam-forgot-password 1.68.3 → 1.69.0
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 → checkbox-group-input_15.cjs.entry.js} +567 -15
- package/dist/cjs/index-92e25484.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pam-forgot-password.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/esm/{checkbox-group-input_14.entry.js → checkbox-group-input_15.entry.js} +567 -16
- package/dist/esm/index-6f00d158.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pam-forgot-password.js +1 -1
- package/dist/pam-forgot-password/{checkbox-group-input_14.entry.js → checkbox-group-input_15.entry.js} +221 -221
- package/dist/pam-forgot-password/pam-forgot-password.esm.js +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ const TRANSLATIONS = {
|
|
|
6
6
|
"en": {
|
|
7
7
|
"dateError": "The selected date should be between {min} and {max}",
|
|
8
8
|
"dateError2": "The selected date is not within the accepted range",
|
|
9
|
+
"dateFormatError": "The selected date has a different format then the one required.",
|
|
9
10
|
"numberLengthError": "The number should be between {min} and {max}",
|
|
10
11
|
"lengthError": "The length should be between {minLength} and {maxLength}",
|
|
11
12
|
"requiredError": "This input is required.",
|
|
@@ -21,12 +22,17 @@ const TRANSLATIONS = {
|
|
|
21
22
|
"MustIncludeNumber": "Password must include a number",
|
|
22
23
|
"MustContainCapital": "Password must include a capital letter",
|
|
23
24
|
"MustIncludePunctation": "Password must include punctuation",
|
|
24
|
-
"OnlyNumbers": "
|
|
25
|
+
"OnlyNumbers": "The input should contain only digits.",
|
|
25
26
|
"InvalidFieldSize": "The length must be exactly 11 digits.",
|
|
26
|
-
"InvalidDocumentNumber": "Only numerical characters are allowed."
|
|
27
|
+
"InvalidDocumentNumber": "Only numerical characters are allowed.",
|
|
28
|
+
"twofaDescription": "<p> We have sent the verification code to <p> {destination}. </p> </p> <p> Please insert the PIN below. </p>",
|
|
29
|
+
"twofaResendMessage": "Didn't receive the verification code?",
|
|
30
|
+
"twofaResendButton": "Resend",
|
|
27
31
|
},
|
|
28
32
|
"hu": {
|
|
29
33
|
"dateError": "A választott dátumnak {min} és {max} között kell lennie",
|
|
34
|
+
"dateError2": "A kiválasztott dátum nincs az elfogadott tartományon belül",
|
|
35
|
+
"dateFormatError": "A kiválasztott dátum formátuma eltér a szükségestől.",
|
|
30
36
|
"numberLengthError": "A számnak {min} és {max} között kell lennie",
|
|
31
37
|
"lengthError": "A hossznak {minLength} és {maxLength} között kell lennie",
|
|
32
38
|
"requiredError": "Ez a beviteli mező kötelező.",
|
|
@@ -42,13 +48,17 @@ const TRANSLATIONS = {
|
|
|
42
48
|
"MustIncludeNumber": "A jelszónak tartalmaznia kell egy számot",
|
|
43
49
|
"MustContainCapital": "A jelszónak tartalmaznia kell egy nagybetűt",
|
|
44
50
|
"MustIncludePunctation": "A jelszónak tartalmaznia kell írásjelet",
|
|
45
|
-
"OnlyNumbers": "Csak
|
|
51
|
+
"OnlyNumbers": "Csak számjegyeket tartalmazhat.",
|
|
46
52
|
"InvalidFieldSize": "A hosszúságnak pontosan 11 számjegynek kell lennie.",
|
|
47
53
|
"InvalidDocumentNumber": "Csak számjegyek engedélyezettek.",
|
|
54
|
+
"twofaDescription": "<p> A megerősítő kódot elküldtük a következő címre: <p> {destination}. </p> </p> <p> Kérjük, írja be az alábbi PIN-kódot. </p>",
|
|
55
|
+
"twofaResendMessage": "Nem kapta meg a megerősítő kódot?",
|
|
56
|
+
"twofaResendButton": "Újraküldés"
|
|
48
57
|
},
|
|
49
58
|
"hr": {
|
|
50
59
|
"dateError": "Odabrani datum treba biti između {min} i {max}",
|
|
51
60
|
"dateError2": "Odabrani datum nije unutar prihvaćenog raspona",
|
|
61
|
+
"dateFormatError": "Odabrani datum je u drugačijem formatu od potrebnog.",
|
|
52
62
|
"numberLengthError": "Broj bi trebao biti između {min} i {max}",
|
|
53
63
|
"lengthError": "Duljina bi trebala biti između {minLength} i {maxLength}",
|
|
54
64
|
"requiredError": "Ovaj unos je obavezan.",
|
|
@@ -64,13 +74,17 @@ const TRANSLATIONS = {
|
|
|
64
74
|
"MustIncludeNumber": "Lozinka mora sadržavati broj",
|
|
65
75
|
"MustContainCapital": "Lozinka mora sadržavati veliko slovo",
|
|
66
76
|
"MustIncludePunctation": "Lozinka mora sadržavati barem jedan znak",
|
|
67
|
-
"OnlyNumbers": "
|
|
77
|
+
"OnlyNumbers": "Smije sadržavati samo znamenke.",
|
|
68
78
|
"InvalidFieldSize": "Dužina mora biti točno 11 znamenki.",
|
|
69
|
-
"InvalidDocumentNumber": "Dopušteni su samo numerički znakovi."
|
|
79
|
+
"InvalidDocumentNumber": "Dopušteni su samo numerički znakovi.",
|
|
80
|
+
"twofaDescription": "<p> Poslali smo verifikacijski kod na: <p> {destination}. </p> </p> <p> Molimo unesite PIN ispod. </p>",
|
|
81
|
+
"twofaResendMessage": "Niste primili verifikacijski kod?",
|
|
82
|
+
"twofaResendButton": "Ponovno pošalji"
|
|
70
83
|
},
|
|
71
84
|
"tr": {
|
|
72
85
|
"dateError": "Seçilen tarih {min} ve {max} arasında olmalıdır",
|
|
73
86
|
"dateError2": "Seçilen tarih kabul edilen aralıkta değil",
|
|
87
|
+
"dateFormatError": "Seçilen tarihin formatı, gereken formattan farklı.",
|
|
74
88
|
"numberLengthError": "Sayı {min} ve {max} arasında olmalıdır",
|
|
75
89
|
"lengthError": "Uzunluk {minLength} ve {maxLength} arasında olmalıdır",
|
|
76
90
|
"requiredError": "Bu alan zorunludur.",
|
|
@@ -86,13 +100,17 @@ const TRANSLATIONS = {
|
|
|
86
100
|
"MustIncludeNumber": "bir sayı içermelidir",
|
|
87
101
|
"MustContainCapital": "büyük harf içermelidir",
|
|
88
102
|
"MustIncludePunctation": "noktalama işareti içermelidir",
|
|
89
|
-
"OnlyNumbers": "
|
|
103
|
+
"OnlyNumbers": "Yalnızca rakamlar içermelidir.",
|
|
90
104
|
"InvalidFieldSize": "Uzunluk tam olarak 11 rakam olmalıdır.",
|
|
91
|
-
"InvalidDocumentNumber": "Sadece sayısal karakterlere izin verilir."
|
|
105
|
+
"InvalidDocumentNumber": "Sadece sayısal karakterlere izin verilir.",
|
|
106
|
+
"twofaDescription": "<p> Doğrulama kodunu şu adrese gönderdik: <p> {destination}. </p> </p> <p> Lütfen aşağıya PIN kodunu girin. </p>",
|
|
107
|
+
"twofaResendMessage": "Doğrulama kodunu almadınız mı?",
|
|
108
|
+
"twofaResendButton": "Yeniden gönder"
|
|
92
109
|
},
|
|
93
110
|
"pt-br": {
|
|
94
111
|
"dateError": "A data selecionada deve estar entre {min} e {max}",
|
|
95
112
|
"dateError2": "A data selecionada não está dentro de um intervalo válido",
|
|
113
|
+
"dateFormatError": "A data selecionada está em um formato diferente do exigido.",
|
|
96
114
|
"numberLengthError": "O número deve estar entre {min} e {max}",
|
|
97
115
|
"lengthError": "O comprimento deve estar entre {minLength} e {maxLength}",
|
|
98
116
|
"requiredError": "Este campo é obrigatório",
|
|
@@ -108,13 +126,17 @@ const TRANSLATIONS = {
|
|
|
108
126
|
"MustIncludeNumber": "A senha deve incluir um número",
|
|
109
127
|
"MustContainCapital": "A senha deve incluir uma letra maiúscula",
|
|
110
128
|
"MustIncludePunctation": "A senha deve incluir um sinal de pontuação",
|
|
111
|
-
"OnlyNumbers": "Deve conter apenas
|
|
129
|
+
"OnlyNumbers": "Deve conter apenas dígitos.",
|
|
112
130
|
"InvalidFieldSize": "O comprimento deve ser exatamente 11 dígitos.",
|
|
113
|
-
"InvalidDocumentNumber": "Apenas caracteres numéricos são permitidos."
|
|
131
|
+
"InvalidDocumentNumber": "Apenas caracteres numéricos são permitidos.",
|
|
132
|
+
"twofaDescription": "<p> Enviamos o código de verificação para: <p> {destination}. </p> </p> <p> Por favor, insira o PIN abaixo. </p>",
|
|
133
|
+
"twofaResendMessage": "Não recebeu o código de verificação?",
|
|
134
|
+
"twofaResendButton": "Reenviar"
|
|
114
135
|
},
|
|
115
136
|
"es-mx": {
|
|
116
137
|
"dateError": "La fecha seleccionada debe ser entre {min} y {max}",
|
|
117
138
|
"dateError2": "La fecha seleccionada no está dentro de un rango válido",
|
|
139
|
+
"dateFormatError": "La fecha seleccionada tiene un formato diferente al requerido.",
|
|
118
140
|
"numberLengthError": "El número debe ser entre {min} y {max}",
|
|
119
141
|
"lengthError": "La longitud deber ser entre {minLength} y {maxLength}",
|
|
120
142
|
"requiredError": "Este campo es requerido",
|
|
@@ -130,9 +152,12 @@ const TRANSLATIONS = {
|
|
|
130
152
|
"MustIncludeNumber": "La contraseña debe incluir un número",
|
|
131
153
|
"MustContainCapital": "La contraseña debe incluir una letra mayúscula",
|
|
132
154
|
"MustIncludePunctation": "La contraseña debe incluir un signo de puntuación",
|
|
133
|
-
"OnlyNumbers": "
|
|
155
|
+
"OnlyNumbers": "Debe contener solo dígitos.",
|
|
134
156
|
"InvalidFieldSize": "La longitud debe ser exactamente de 11 dígitos.",
|
|
135
|
-
"InvalidDocumentNumber": "Solo se permiten caracteres numéricos."
|
|
157
|
+
"InvalidDocumentNumber": "Solo se permiten caracteres numéricos.",
|
|
158
|
+
"twofaDescription": "<p> Hemos enviado el código de verificación a: <p> {destination}. </p> </p> <p> Por favor, ingrese el PIN a continuación. </p>",
|
|
159
|
+
"twofaResendMessage": "¿No recibiste el código de verificación?",
|
|
160
|
+
"twofaResendButton": "Reenviar"
|
|
136
161
|
}
|
|
137
162
|
};
|
|
138
163
|
const translate = (key, customLang, values) => {
|
|
@@ -5464,6 +5489,303 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
5464
5489
|
return date.getTime() < dateToCompare.getTime();
|
|
5465
5490
|
}
|
|
5466
5491
|
|
|
5492
|
+
/**
|
|
5493
|
+
* @name isMatch
|
|
5494
|
+
* @category Common Helpers
|
|
5495
|
+
* @summary validates the date string against given formats
|
|
5496
|
+
*
|
|
5497
|
+
* @description
|
|
5498
|
+
* Return the true if given date is string correct against the given format else
|
|
5499
|
+
* will return false.
|
|
5500
|
+
*
|
|
5501
|
+
* > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
|
|
5502
|
+
* > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5503
|
+
*
|
|
5504
|
+
* The characters in the format string wrapped between two single quotes characters (') are escaped.
|
|
5505
|
+
* Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
|
|
5506
|
+
*
|
|
5507
|
+
* Format of the format string is based on Unicode Technical Standard #35:
|
|
5508
|
+
* https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
|
|
5509
|
+
* with a few additions (see note 5 below the table).
|
|
5510
|
+
*
|
|
5511
|
+
* Not all tokens are compatible. Combinations that don't make sense or could lead to bugs are prohibited
|
|
5512
|
+
* and will throw `RangeError`. For example usage of 24-hour format token with AM/PM token will throw an exception:
|
|
5513
|
+
*
|
|
5514
|
+
* ```javascript
|
|
5515
|
+
* isMatch('23 AM', 'HH a')
|
|
5516
|
+
* //=> RangeError: The format string mustn't contain `HH` and `a` at the same time
|
|
5517
|
+
* ```
|
|
5518
|
+
*
|
|
5519
|
+
* See the compatibility table: https://docs.google.com/spreadsheets/d/e/2PACX-1vQOPU3xUhplll6dyoMmVUXHKl_8CRDs6_ueLmex3SoqwhuolkuN3O05l4rqx5h1dKX8eb46Ul-CCSrq/pubhtml?gid=0&single=true
|
|
5520
|
+
*
|
|
5521
|
+
* Accepted format string patterns:
|
|
5522
|
+
* | Unit |Prior| Pattern | Result examples | Notes |
|
|
5523
|
+
* |---------------------------------|-----|---------|-----------------------------------|-------|
|
|
5524
|
+
* | Era | 140 | G..GGG | AD, BC | |
|
|
5525
|
+
* | | | GGGG | Anno Domini, Before Christ | 2 |
|
|
5526
|
+
* | | | GGGGG | A, B | |
|
|
5527
|
+
* | Calendar year | 130 | y | 44, 1, 1900, 2017, 9999 | 4 |
|
|
5528
|
+
* | | | yo | 44th, 1st, 1900th, 9999999th | 4,5 |
|
|
5529
|
+
* | | | yy | 44, 01, 00, 17 | 4 |
|
|
5530
|
+
* | | | yyy | 044, 001, 123, 999 | 4 |
|
|
5531
|
+
* | | | yyyy | 0044, 0001, 1900, 2017 | 4 |
|
|
5532
|
+
* | | | yyyyy | ... | 2,4 |
|
|
5533
|
+
* | Local week-numbering year | 130 | Y | 44, 1, 1900, 2017, 9000 | 4 |
|
|
5534
|
+
* | | | Yo | 44th, 1st, 1900th, 9999999th | 4,5 |
|
|
5535
|
+
* | | | YY | 44, 01, 00, 17 | 4,6 |
|
|
5536
|
+
* | | | YYY | 044, 001, 123, 999 | 4 |
|
|
5537
|
+
* | | | YYYY | 0044, 0001, 1900, 2017 | 4,6 |
|
|
5538
|
+
* | | | YYYYY | ... | 2,4 |
|
|
5539
|
+
* | ISO week-numbering year | 130 | R | -43, 1, 1900, 2017, 9999, -9999 | 4,5 |
|
|
5540
|
+
* | | | RR | -43, 01, 00, 17 | 4,5 |
|
|
5541
|
+
* | | | RRR | -043, 001, 123, 999, -999 | 4,5 |
|
|
5542
|
+
* | | | RRRR | -0043, 0001, 2017, 9999, -9999 | 4,5 |
|
|
5543
|
+
* | | | RRRRR | ... | 2,4,5 |
|
|
5544
|
+
* | Extended year | 130 | u | -43, 1, 1900, 2017, 9999, -999 | 4 |
|
|
5545
|
+
* | | | uu | -43, 01, 99, -99 | 4 |
|
|
5546
|
+
* | | | uuu | -043, 001, 123, 999, -999 | 4 |
|
|
5547
|
+
* | | | uuuu | -0043, 0001, 2017, 9999, -9999 | 4 |
|
|
5548
|
+
* | | | uuuuu | ... | 2,4 |
|
|
5549
|
+
* | Quarter (formatting) | 120 | Q | 1, 2, 3, 4 | |
|
|
5550
|
+
* | | | Qo | 1st, 2nd, 3rd, 4th | 5 |
|
|
5551
|
+
* | | | QQ | 01, 02, 03, 04 | |
|
|
5552
|
+
* | | | QQQ | Q1, Q2, Q3, Q4 | |
|
|
5553
|
+
* | | | QQQQ | 1st quarter, 2nd quarter, ... | 2 |
|
|
5554
|
+
* | | | QQQQQ | 1, 2, 3, 4 | 4 |
|
|
5555
|
+
* | Quarter (stand-alone) | 120 | q | 1, 2, 3, 4 | |
|
|
5556
|
+
* | | | qo | 1st, 2nd, 3rd, 4th | 5 |
|
|
5557
|
+
* | | | qq | 01, 02, 03, 04 | |
|
|
5558
|
+
* | | | qqq | Q1, Q2, Q3, Q4 | |
|
|
5559
|
+
* | | | qqqq | 1st quarter, 2nd quarter, ... | 2 |
|
|
5560
|
+
* | | | qqqqq | 1, 2, 3, 4 | 3 |
|
|
5561
|
+
* | Month (formatting) | 110 | M | 1, 2, ..., 12 | |
|
|
5562
|
+
* | | | Mo | 1st, 2nd, ..., 12th | 5 |
|
|
5563
|
+
* | | | MM | 01, 02, ..., 12 | |
|
|
5564
|
+
* | | | MMM | Jan, Feb, ..., Dec | |
|
|
5565
|
+
* | | | MMMM | January, February, ..., December | 2 |
|
|
5566
|
+
* | | | MMMMM | J, F, ..., D | |
|
|
5567
|
+
* | Month (stand-alone) | 110 | L | 1, 2, ..., 12 | |
|
|
5568
|
+
* | | | Lo | 1st, 2nd, ..., 12th | 5 |
|
|
5569
|
+
* | | | LL | 01, 02, ..., 12 | |
|
|
5570
|
+
* | | | LLL | Jan, Feb, ..., Dec | |
|
|
5571
|
+
* | | | LLLL | January, February, ..., December | 2 |
|
|
5572
|
+
* | | | LLLLL | J, F, ..., D | |
|
|
5573
|
+
* | Local week of year | 100 | w | 1, 2, ..., 53 | |
|
|
5574
|
+
* | | | wo | 1st, 2nd, ..., 53th | 5 |
|
|
5575
|
+
* | | | ww | 01, 02, ..., 53 | |
|
|
5576
|
+
* | ISO week of year | 100 | I | 1, 2, ..., 53 | 5 |
|
|
5577
|
+
* | | | Io | 1st, 2nd, ..., 53th | 5 |
|
|
5578
|
+
* | | | II | 01, 02, ..., 53 | 5 |
|
|
5579
|
+
* | Day of month | 90 | d | 1, 2, ..., 31 | |
|
|
5580
|
+
* | | | do | 1st, 2nd, ..., 31st | 5 |
|
|
5581
|
+
* | | | dd | 01, 02, ..., 31 | |
|
|
5582
|
+
* | Day of year | 90 | D | 1, 2, ..., 365, 366 | 7 |
|
|
5583
|
+
* | | | Do | 1st, 2nd, ..., 365th, 366th | 5 |
|
|
5584
|
+
* | | | DD | 01, 02, ..., 365, 366 | 7 |
|
|
5585
|
+
* | | | DDD | 001, 002, ..., 365, 366 | |
|
|
5586
|
+
* | | | DDDD | ... | 2 |
|
|
5587
|
+
* | Day of week (formatting) | 90 | E..EEE | Mon, Tue, Wed, ..., Su | |
|
|
5588
|
+
* | | | EEEE | Monday, Tuesday, ..., Sunday | 2 |
|
|
5589
|
+
* | | | EEEEE | M, T, W, T, F, S, S | |
|
|
5590
|
+
* | | | EEEEEE | Mo, Tu, We, Th, Fr, Sa, Su | |
|
|
5591
|
+
* | ISO day of week (formatting) | 90 | i | 1, 2, 3, ..., 7 | 5 |
|
|
5592
|
+
* | | | io | 1st, 2nd, ..., 7th | 5 |
|
|
5593
|
+
* | | | ii | 01, 02, ..., 07 | 5 |
|
|
5594
|
+
* | | | iii | Mon, Tue, Wed, ..., Su | 5 |
|
|
5595
|
+
* | | | iiii | Monday, Tuesday, ..., Sunday | 2,5 |
|
|
5596
|
+
* | | | iiiii | M, T, W, T, F, S, S | 5 |
|
|
5597
|
+
* | | | iiiiii | Mo, Tu, We, Th, Fr, Sa, Su | 5 |
|
|
5598
|
+
* | Local day of week (formatting) | 90 | e | 2, 3, 4, ..., 1 | |
|
|
5599
|
+
* | | | eo | 2nd, 3rd, ..., 1st | 5 |
|
|
5600
|
+
* | | | ee | 02, 03, ..., 01 | |
|
|
5601
|
+
* | | | eee | Mon, Tue, Wed, ..., Su | |
|
|
5602
|
+
* | | | eeee | Monday, Tuesday, ..., Sunday | 2 |
|
|
5603
|
+
* | | | eeeee | M, T, W, T, F, S, S | |
|
|
5604
|
+
* | | | eeeeee | Mo, Tu, We, Th, Fr, Sa, Su | |
|
|
5605
|
+
* | Local day of week (stand-alone) | 90 | c | 2, 3, 4, ..., 1 | |
|
|
5606
|
+
* | | | co | 2nd, 3rd, ..., 1st | 5 |
|
|
5607
|
+
* | | | cc | 02, 03, ..., 01 | |
|
|
5608
|
+
* | | | ccc | Mon, Tue, Wed, ..., Su | |
|
|
5609
|
+
* | | | cccc | Monday, Tuesday, ..., Sunday | 2 |
|
|
5610
|
+
* | | | ccccc | M, T, W, T, F, S, S | |
|
|
5611
|
+
* | | | cccccc | Mo, Tu, We, Th, Fr, Sa, Su | |
|
|
5612
|
+
* | AM, PM | 80 | a..aaa | AM, PM | |
|
|
5613
|
+
* | | | aaaa | a.m., p.m. | 2 |
|
|
5614
|
+
* | | | aaaaa | a, p | |
|
|
5615
|
+
* | AM, PM, noon, midnight | 80 | b..bbb | AM, PM, noon, midnight | |
|
|
5616
|
+
* | | | bbbb | a.m., p.m., noon, midnight | 2 |
|
|
5617
|
+
* | | | bbbbb | a, p, n, mi | |
|
|
5618
|
+
* | Flexible day period | 80 | B..BBB | at night, in the morning, ... | |
|
|
5619
|
+
* | | | BBBB | at night, in the morning, ... | 2 |
|
|
5620
|
+
* | | | BBBBB | at night, in the morning, ... | |
|
|
5621
|
+
* | Hour [1-12] | 70 | h | 1, 2, ..., 11, 12 | |
|
|
5622
|
+
* | | | ho | 1st, 2nd, ..., 11th, 12th | 5 |
|
|
5623
|
+
* | | | hh | 01, 02, ..., 11, 12 | |
|
|
5624
|
+
* | Hour [0-23] | 70 | H | 0, 1, 2, ..., 23 | |
|
|
5625
|
+
* | | | Ho | 0th, 1st, 2nd, ..., 23rd | 5 |
|
|
5626
|
+
* | | | HH | 00, 01, 02, ..., 23 | |
|
|
5627
|
+
* | Hour [0-11] | 70 | K | 1, 2, ..., 11, 0 | |
|
|
5628
|
+
* | | | Ko | 1st, 2nd, ..., 11th, 0th | 5 |
|
|
5629
|
+
* | | | KK | 01, 02, ..., 11, 00 | |
|
|
5630
|
+
* | Hour [1-24] | 70 | k | 24, 1, 2, ..., 23 | |
|
|
5631
|
+
* | | | ko | 24th, 1st, 2nd, ..., 23rd | 5 |
|
|
5632
|
+
* | | | kk | 24, 01, 02, ..., 23 | |
|
|
5633
|
+
* | Minute | 60 | m | 0, 1, ..., 59 | |
|
|
5634
|
+
* | | | mo | 0th, 1st, ..., 59th | 5 |
|
|
5635
|
+
* | | | mm | 00, 01, ..., 59 | |
|
|
5636
|
+
* | Second | 50 | s | 0, 1, ..., 59 | |
|
|
5637
|
+
* | | | so | 0th, 1st, ..., 59th | 5 |
|
|
5638
|
+
* | | | ss | 00, 01, ..., 59 | |
|
|
5639
|
+
* | Seconds timestamp | 40 | t | 512969520 | |
|
|
5640
|
+
* | | | tt | ... | 2 |
|
|
5641
|
+
* | Fraction of second | 30 | S | 0, 1, ..., 9 | |
|
|
5642
|
+
* | | | SS | 00, 01, ..., 99 | |
|
|
5643
|
+
* | | | SSS | 000, 001, ..., 999 | |
|
|
5644
|
+
* | | | SSSS | ... | 2 |
|
|
5645
|
+
* | Milliseconds timestamp | 20 | T | 512969520900 | |
|
|
5646
|
+
* | | | TT | ... | 2 |
|
|
5647
|
+
* | Timezone (ISO-8601 w/ Z) | 10 | X | -08, +0530, Z | |
|
|
5648
|
+
* | | | XX | -0800, +0530, Z | |
|
|
5649
|
+
* | | | XXX | -08:00, +05:30, Z | |
|
|
5650
|
+
* | | | XXXX | -0800, +0530, Z, +123456 | 2 |
|
|
5651
|
+
* | | | XXXXX | -08:00, +05:30, Z, +12:34:56 | |
|
|
5652
|
+
* | Timezone (ISO-8601 w/o Z) | 10 | x | -08, +0530, +00 | |
|
|
5653
|
+
* | | | xx | -0800, +0530, +0000 | |
|
|
5654
|
+
* | | | xxx | -08:00, +05:30, +00:00 | 2 |
|
|
5655
|
+
* | | | xxxx | -0800, +0530, +0000, +123456 | |
|
|
5656
|
+
* | | | xxxxx | -08:00, +05:30, +00:00, +12:34:56 | |
|
|
5657
|
+
* | Long localized date | NA | P | 05/29/1453 | 5,8 |
|
|
5658
|
+
* | | | PP | May 29, 1453 | |
|
|
5659
|
+
* | | | PPP | May 29th, 1453 | |
|
|
5660
|
+
* | | | PPPP | Sunday, May 29th, 1453 | 2,5,8 |
|
|
5661
|
+
* | Long localized time | NA | p | 12:00 AM | 5,8 |
|
|
5662
|
+
* | | | pp | 12:00:00 AM | |
|
|
5663
|
+
* | Combination of date and time | NA | Pp | 05/29/1453, 12:00 AM | |
|
|
5664
|
+
* | | | PPpp | May 29, 1453, 12:00:00 AM | |
|
|
5665
|
+
* | | | PPPpp | May 29th, 1453 at ... | |
|
|
5666
|
+
* | | | PPPPpp | Sunday, May 29th, 1453 at ... | 2,5,8 |
|
|
5667
|
+
* Notes:
|
|
5668
|
+
* 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
|
|
5669
|
+
* are the same as "stand-alone" units, but are different in some languages.
|
|
5670
|
+
* "Formatting" units are declined according to the rules of the language
|
|
5671
|
+
* in the context of a date. "Stand-alone" units are always nominative singular.
|
|
5672
|
+
* In `format` function, they will produce different result:
|
|
5673
|
+
*
|
|
5674
|
+
* `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
|
|
5675
|
+
*
|
|
5676
|
+
* `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
|
|
5677
|
+
*
|
|
5678
|
+
* `isMatch` will try to match both formatting and stand-alone units interchangably.
|
|
5679
|
+
*
|
|
5680
|
+
* 2. Any sequence of the identical letters is a pattern, unless it is escaped by
|
|
5681
|
+
* the single quote characters (see below).
|
|
5682
|
+
* If the sequence is longer than listed in table:
|
|
5683
|
+
* - for numerical units (`yyyyyyyy`) `isMatch` will try to match a number
|
|
5684
|
+
* as wide as the sequence
|
|
5685
|
+
* - for text units (`MMMMMMMM`) `isMatch` will try to match the widest variation of the unit.
|
|
5686
|
+
* These variations are marked with "2" in the last column of the table.
|
|
5687
|
+
*
|
|
5688
|
+
* 3. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
|
|
5689
|
+
* These tokens represent the shortest form of the quarter.
|
|
5690
|
+
*
|
|
5691
|
+
* 4. The main difference between `y` and `u` patterns are B.C. years:
|
|
5692
|
+
*
|
|
5693
|
+
* | Year | `y` | `u` |
|
|
5694
|
+
* |------|-----|-----|
|
|
5695
|
+
* | AC 1 | 1 | 1 |
|
|
5696
|
+
* | BC 1 | 1 | 0 |
|
|
5697
|
+
* | BC 2 | 2 | -1 |
|
|
5698
|
+
*
|
|
5699
|
+
* Also `yy` will try to guess the century of two digit year by proximity with `referenceDate`:
|
|
5700
|
+
*
|
|
5701
|
+
* `isMatch('50', 'yy') //=> true`
|
|
5702
|
+
*
|
|
5703
|
+
* `isMatch('75', 'yy') //=> true`
|
|
5704
|
+
*
|
|
5705
|
+
* while `uu` will use the year as is:
|
|
5706
|
+
*
|
|
5707
|
+
* `isMatch('50', 'uu') //=> true`
|
|
5708
|
+
*
|
|
5709
|
+
* `isMatch('75', 'uu') //=> true`
|
|
5710
|
+
*
|
|
5711
|
+
* The same difference is true for local and ISO week-numbering years (`Y` and `R`),
|
|
5712
|
+
* except local week-numbering years are dependent on `options.weekStartsOn`
|
|
5713
|
+
* and `options.firstWeekContainsDate` (compare [setISOWeekYear]{@link https://date-fns.org/docs/setISOWeekYear}
|
|
5714
|
+
* and [setWeekYear]{@link https://date-fns.org/docs/setWeekYear}).
|
|
5715
|
+
*
|
|
5716
|
+
* 5. These patterns are not in the Unicode Technical Standard #35:
|
|
5717
|
+
* - `i`: ISO day of week
|
|
5718
|
+
* - `I`: ISO week of year
|
|
5719
|
+
* - `R`: ISO week-numbering year
|
|
5720
|
+
* - `o`: ordinal number modifier
|
|
5721
|
+
* - `P`: long localized date
|
|
5722
|
+
* - `p`: long localized time
|
|
5723
|
+
*
|
|
5724
|
+
* 6. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
|
|
5725
|
+
* You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5726
|
+
*
|
|
5727
|
+
* 7. `D` and `DD` tokens represent days of the year but they are ofthen confused with days of the month.
|
|
5728
|
+
* You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5729
|
+
*
|
|
5730
|
+
* 8. `P+` tokens do not have a defined priority since they are merely aliases to other tokens based
|
|
5731
|
+
* on the given locale.
|
|
5732
|
+
*
|
|
5733
|
+
* using `en-US` locale: `P` => `MM/dd/yyyy`
|
|
5734
|
+
* using `en-US` locale: `p` => `hh:mm a`
|
|
5735
|
+
* using `pt-BR` locale: `P` => `dd/MM/yyyy`
|
|
5736
|
+
* using `pt-BR` locale: `p` => `HH:mm`
|
|
5737
|
+
*
|
|
5738
|
+
* Values will be checked in the descending order of its unit's priority.
|
|
5739
|
+
* Units of an equal priority overwrite each other in the order of appearance.
|
|
5740
|
+
*
|
|
5741
|
+
* If no values of higher priority are matched (e.g. when matching string 'January 1st' without a year),
|
|
5742
|
+
* the values will be taken from today's using `new Date()` date which works as a context of parsing.
|
|
5743
|
+
*
|
|
5744
|
+
* The result may vary by locale.
|
|
5745
|
+
*
|
|
5746
|
+
* If `formatString` matches with `dateString` but does not provides tokens, `referenceDate` will be returned.
|
|
5747
|
+
*
|
|
5748
|
+
*
|
|
5749
|
+
*
|
|
5750
|
+
* @param {String} dateString - the date string to verify
|
|
5751
|
+
* @param {String} formatString - the string of tokens
|
|
5752
|
+
* @param {Object} [options] - an object with options.
|
|
5753
|
+
* @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
|
|
5754
|
+
* @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
|
|
5755
|
+
* @param {1|2|3|4|5|6|7} [options.firstWeekContainsDate=1] - the day of January, which is always in the first week of the year
|
|
5756
|
+
* @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
|
|
5757
|
+
* see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5758
|
+
* @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
|
|
5759
|
+
* see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5760
|
+
* @returns {Boolean}
|
|
5761
|
+
* @throws {TypeError} 2 arguments required
|
|
5762
|
+
* @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
|
|
5763
|
+
* @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7
|
|
5764
|
+
* @throws {RangeError} `options.locale` must contain `match` property
|
|
5765
|
+
* @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5766
|
+
* @throws {RangeError} use `yy` instead of `YY` for formatting years; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5767
|
+
* @throws {RangeError} use `d` instead of `D` for formatting days of the month; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5768
|
+
* @throws {RangeError} use `dd` instead of `DD` for formatting days of the month; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md
|
|
5769
|
+
* @throws {RangeError} format string contains an unescaped latin alphabet character
|
|
5770
|
+
*
|
|
5771
|
+
* @example
|
|
5772
|
+
* // Match 11 February 2014 from middle-endian format:
|
|
5773
|
+
* const result = isMatch('02/11/2014', 'MM/dd/yyyy')
|
|
5774
|
+
* //=> true
|
|
5775
|
+
*
|
|
5776
|
+
* @example
|
|
5777
|
+
* // Match 28th of February in Esperanto locale in the context of 2010 year:
|
|
5778
|
+
* import eo from 'date-fns/locale/eo'
|
|
5779
|
+
* const result = isMatch('28-a de februaro', "do 'de' MMMM", {
|
|
5780
|
+
* locale: eo
|
|
5781
|
+
* })
|
|
5782
|
+
* //=> true
|
|
5783
|
+
*/
|
|
5784
|
+
function isMatch(dateString, formatString, options) {
|
|
5785
|
+
requiredArgs(2, arguments);
|
|
5786
|
+
return isValid(parse(dateString, formatString, new Date(), options));
|
|
5787
|
+
}
|
|
5788
|
+
|
|
5467
5789
|
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px;height:100%}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.date__input[invalid]::part(input-field){border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:0;height:44px}.date__input>input{padding:5px 15px}.date__input::part(toggle-button){position:relative;right:10px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
|
|
5468
5790
|
const DateInputStyle0 = dateInputCss;
|
|
5469
5791
|
|
|
@@ -5504,6 +5826,12 @@ const DateInput = class {
|
|
|
5504
5826
|
this.limitStylingAppends = false;
|
|
5505
5827
|
this.showTooltip = false;
|
|
5506
5828
|
}
|
|
5829
|
+
get formattedValue() {
|
|
5830
|
+
if (!this.value)
|
|
5831
|
+
return '';
|
|
5832
|
+
const parsedDate = parse(this.value, 'yyyy-MM-dd', new Date());
|
|
5833
|
+
return format(parsedDate, this.dateFormat || 'yyyy-MM-dd');
|
|
5834
|
+
}
|
|
5507
5835
|
handleStylingChange(newValue, oldValue) {
|
|
5508
5836
|
if (newValue !== oldValue)
|
|
5509
5837
|
this.setClientStyling();
|
|
@@ -5586,7 +5914,7 @@ const DateInput = class {
|
|
|
5586
5914
|
this.emitValueHandler(true);
|
|
5587
5915
|
}
|
|
5588
5916
|
setValidity() {
|
|
5589
|
-
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
5917
|
+
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate) || !isMatch(this.formattedValue, this.dateFormat)) {
|
|
5590
5918
|
return false;
|
|
5591
5919
|
}
|
|
5592
5920
|
else {
|
|
@@ -5603,6 +5931,9 @@ const DateInput = class {
|
|
|
5603
5931
|
if (isBefore(this.valueAsDate, this.minDate) || isAfter(this.valueAsDate, this.maxDate)) {
|
|
5604
5932
|
return translate('dateError2', this.language);
|
|
5605
5933
|
}
|
|
5934
|
+
if (!isMatch(this.formattedValue, this.dateFormat)) {
|
|
5935
|
+
return translate('dateFormatError', this.language);
|
|
5936
|
+
}
|
|
5606
5937
|
}
|
|
5607
5938
|
renderTooltip() {
|
|
5608
5939
|
if (this.showTooltip) {
|
|
@@ -5615,8 +5946,8 @@ const DateInput = class {
|
|
|
5615
5946
|
if (this.touched) {
|
|
5616
5947
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5617
5948
|
}
|
|
5618
|
-
return h("div", { key: '
|
|
5619
|
-
h("img", { key: '
|
|
5949
|
+
return h("div", { key: '18b85f7647c376d5a99468df4978d178cd19d77b', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'e351963c25eecb2e5758dec54c9c2fb883b85912', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { key: '471bb1c440213f764fe334309b262d44ac2ead7d', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), h("small", { key: '14e5c4d34a3236907cd701d72a91c06d28b37c7e', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5950
|
+
h("img", { key: 'c3424b6076ec5a399054bf37eca774e4bd3e3644', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5620
5951
|
}
|
|
5621
5952
|
get element() { return getElement(this); }
|
|
5622
5953
|
static get watchers() { return {
|
|
@@ -11445,6 +11776,8 @@ const GeneralInput = class {
|
|
|
11445
11776
|
this.dateFormat = undefined;
|
|
11446
11777
|
this.translationUrl = '';
|
|
11447
11778
|
this.emitOnClick = false;
|
|
11779
|
+
this.twofaDestination = undefined;
|
|
11780
|
+
this.twofaResendIntervalSeconds = 60;
|
|
11448
11781
|
}
|
|
11449
11782
|
connectedCallback() {
|
|
11450
11783
|
if (this.translationUrl) {
|
|
@@ -11476,12 +11809,14 @@ const GeneralInput = class {
|
|
|
11476
11809
|
return h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
|
|
11477
11810
|
case 'dropdown':
|
|
11478
11811
|
return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
|
|
11812
|
+
case 'twofa':
|
|
11813
|
+
return h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds });
|
|
11479
11814
|
default:
|
|
11480
11815
|
return h("p", null, "The ", this.type, " input type is not valid");
|
|
11481
11816
|
}
|
|
11482
11817
|
}
|
|
11483
11818
|
render() {
|
|
11484
|
-
return (h(Host, { key: '
|
|
11819
|
+
return (h(Host, { key: '575526a74f8739d530e0094238357e2a744cc463', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
|
|
11485
11820
|
}
|
|
11486
11821
|
};
|
|
11487
11822
|
GeneralInput.style = GeneralInputStyle0;
|
|
@@ -12640,6 +12975,222 @@ const ToggleCheckboxInput = class {
|
|
|
12640
12975
|
};
|
|
12641
12976
|
ToggleCheckboxInput.style = ToggleCheckboxInputStyle0;
|
|
12642
12977
|
|
|
12978
|
+
const twofaInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.twofa{display:flex;flex-direction:column;gap:10px}.twofa__description{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}.twofa__error-message{text-align:center;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.twofa__input-wrapper{display:flex;justify-content:center}.twofa__input-wrapper input{width:35px;height:35px;padding:10px;text-align:center;border-radius:var(--emw--border-radius-small, 5px);margin-left:5px;margin-right:5px;border:2px solid var(--emw--otp-border-color, #55525c);font-weight:var(--emw-font-weight-bold, 800);outline:none;transition:all 0.1s}.twofa__input-wrapper input:focus{border:2px solid var(--emw--color-primary, #22B04E);box-shadow:0 0 2px 2px var(--emw--color-primary, #22B04E)}.twofa__button-wrapper{justify-content:center;text-align:center}.twofa__button-wrapper button{border:none;background:none;font-weight:var(--emw-font-weight-bold, 800);color:var(--emw--color-primary, #22B04E);cursor:pointer}";
|
|
12979
|
+
const TwofaInputStyle0 = twofaInputCss;
|
|
12980
|
+
|
|
12981
|
+
const TwofaInput = class {
|
|
12982
|
+
constructor(hostRef) {
|
|
12983
|
+
registerInstance(this, hostRef);
|
|
12984
|
+
this.sendValidityState = createEvent(this, "sendValidityState", 7);
|
|
12985
|
+
this.sendInputValue = createEvent(this, "sendInputValue", 7);
|
|
12986
|
+
this.resendCode = createEvent(this, "resendCode", 7);
|
|
12987
|
+
this.validationPattern = '';
|
|
12988
|
+
this.stylingContainer = null;
|
|
12989
|
+
this.tooltipReference = null;
|
|
12990
|
+
this.tooltipIconReference = null;
|
|
12991
|
+
this.inputRefs = [];
|
|
12992
|
+
this.containerRef = null;
|
|
12993
|
+
this.resendInterval = null;
|
|
12994
|
+
this.resendCodeHandler = () => {
|
|
12995
|
+
this.triggerResendInterval();
|
|
12996
|
+
this.resendCode.emit();
|
|
12997
|
+
};
|
|
12998
|
+
this.setInputRef = (el, idx) => {
|
|
12999
|
+
if (el) {
|
|
13000
|
+
this.inputRefs[idx] = el;
|
|
13001
|
+
}
|
|
13002
|
+
};
|
|
13003
|
+
this.setContainerRef = (el) => {
|
|
13004
|
+
if (el) {
|
|
13005
|
+
this.containerRef = el;
|
|
13006
|
+
}
|
|
13007
|
+
};
|
|
13008
|
+
this.triggerResendInterval = () => {
|
|
13009
|
+
this.isResendButtonAvailable = false;
|
|
13010
|
+
if (this.resendInterval) {
|
|
13011
|
+
clearInterval(this.resendInterval);
|
|
13012
|
+
}
|
|
13013
|
+
this.resendInterval = setInterval(() => {
|
|
13014
|
+
if (--this.resendIntervalSecondsLeft <= 0) {
|
|
13015
|
+
clearInterval(this.resendInterval);
|
|
13016
|
+
this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
|
|
13017
|
+
this.isResendButtonAvailable = true;
|
|
13018
|
+
}
|
|
13019
|
+
}, 1000);
|
|
13020
|
+
};
|
|
13021
|
+
this.formatTime = () => {
|
|
13022
|
+
const minutes = String(Math.floor(this.resendIntervalSecondsLeft / 60));
|
|
13023
|
+
let seconds = String(this.resendIntervalSecondsLeft % 60);
|
|
13024
|
+
if (seconds.length === 1) {
|
|
13025
|
+
seconds = '0' + seconds;
|
|
13026
|
+
}
|
|
13027
|
+
return `${minutes}:${seconds}`;
|
|
13028
|
+
};
|
|
13029
|
+
this.handleInput = (e, idx) => {
|
|
13030
|
+
const input = e.target;
|
|
13031
|
+
const value = input.value;
|
|
13032
|
+
if (value.length > 1) {
|
|
13033
|
+
input.value = value.charAt(1);
|
|
13034
|
+
}
|
|
13035
|
+
else {
|
|
13036
|
+
input.value = value.charAt(0);
|
|
13037
|
+
}
|
|
13038
|
+
if (!value) {
|
|
13039
|
+
return;
|
|
13040
|
+
}
|
|
13041
|
+
this.code[idx] = input.value;
|
|
13042
|
+
const nextInput = this.inputRefs[idx + 1];
|
|
13043
|
+
if (nextInput) {
|
|
13044
|
+
nextInput.focus();
|
|
13045
|
+
}
|
|
13046
|
+
this.setValidity();
|
|
13047
|
+
this.setErrorMessage();
|
|
13048
|
+
};
|
|
13049
|
+
this.setClientStyling = () => {
|
|
13050
|
+
let sheet = document.createElement('style');
|
|
13051
|
+
sheet.innerHTML = this.clientStyling;
|
|
13052
|
+
this.stylingContainer.prepend(sheet);
|
|
13053
|
+
};
|
|
13054
|
+
this.name = '';
|
|
13055
|
+
this.displayName = '';
|
|
13056
|
+
this.placeholder = '';
|
|
13057
|
+
this.validation = undefined;
|
|
13058
|
+
this.tooltip = '';
|
|
13059
|
+
this.language = 'en';
|
|
13060
|
+
this.emitValue = true;
|
|
13061
|
+
this.destination = '';
|
|
13062
|
+
this.resendIntervalSeconds = 60;
|
|
13063
|
+
this.clientStyling = '';
|
|
13064
|
+
this.limitStylingAppends = false;
|
|
13065
|
+
this.isValid = false;
|
|
13066
|
+
this.isResendButtonAvailable = true;
|
|
13067
|
+
this.showTooltip = false;
|
|
13068
|
+
this.errorMessage = '';
|
|
13069
|
+
this.code = [];
|
|
13070
|
+
this.resendIntervalSecondsLeft = this.resendIntervalSeconds;
|
|
13071
|
+
}
|
|
13072
|
+
handleStylingChange(newValue, oldValue) {
|
|
13073
|
+
if (newValue !== oldValue)
|
|
13074
|
+
this.setClientStyling();
|
|
13075
|
+
}
|
|
13076
|
+
validityChanged() {
|
|
13077
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13078
|
+
if (this.emitValue == true) {
|
|
13079
|
+
this.valueHandler({ name: this.name, value: this.code.join('') });
|
|
13080
|
+
}
|
|
13081
|
+
}
|
|
13082
|
+
emitValueHandler(newValue) {
|
|
13083
|
+
if (newValue == true && this.isValid) {
|
|
13084
|
+
this.valueHandler({ name: this.name, value: this.code.join('') });
|
|
13085
|
+
}
|
|
13086
|
+
}
|
|
13087
|
+
validityStateHandler(inputStateEvent) {
|
|
13088
|
+
this.sendValidityState.emit(inputStateEvent);
|
|
13089
|
+
}
|
|
13090
|
+
valueHandler(inputValueEvent) {
|
|
13091
|
+
this.sendInputValue.emit(inputValueEvent);
|
|
13092
|
+
}
|
|
13093
|
+
handleClickOutside(event) {
|
|
13094
|
+
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
13095
|
+
return;
|
|
13096
|
+
if (event.composedPath()[0] !== this.tooltipReference)
|
|
13097
|
+
this.showTooltip = false;
|
|
13098
|
+
}
|
|
13099
|
+
connectedCallback() {
|
|
13100
|
+
this.validationPattern = this.setPattern();
|
|
13101
|
+
this.code = new Array(this.validation.maxLength).fill('');
|
|
13102
|
+
}
|
|
13103
|
+
componentDidRender() {
|
|
13104
|
+
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
13105
|
+
if (this.clientStyling) {
|
|
13106
|
+
this.setClientStyling();
|
|
13107
|
+
}
|
|
13108
|
+
this.limitStylingAppends = true;
|
|
13109
|
+
}
|
|
13110
|
+
}
|
|
13111
|
+
componentDidLoad() {
|
|
13112
|
+
this.setValidity();
|
|
13113
|
+
}
|
|
13114
|
+
handleKeyDown(e, idx) {
|
|
13115
|
+
if (e.key === 'Backspace') {
|
|
13116
|
+
this.code[idx] = '';
|
|
13117
|
+
if (this.inputRefs[idx]) {
|
|
13118
|
+
this.inputRefs[idx].value = '';
|
|
13119
|
+
} // Clear input field
|
|
13120
|
+
const prevInput = this.inputRefs[idx - 1];
|
|
13121
|
+
if (prevInput) {
|
|
13122
|
+
prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
|
|
13123
|
+
}
|
|
13124
|
+
}
|
|
13125
|
+
this.setValidity();
|
|
13126
|
+
this.setErrorMessage();
|
|
13127
|
+
}
|
|
13128
|
+
handlePaste(e) {
|
|
13129
|
+
var _a;
|
|
13130
|
+
e.preventDefault();
|
|
13131
|
+
const data = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').trim();
|
|
13132
|
+
if (!data) {
|
|
13133
|
+
return;
|
|
13134
|
+
}
|
|
13135
|
+
const value = data.slice(0, this.validation.maxLength).split(''); // Limit to OTP length
|
|
13136
|
+
this.code = [...value, ...new Array(this.validation.maxLength - value.length).fill('')];
|
|
13137
|
+
value.forEach((char, index) => {
|
|
13138
|
+
this.inputRefs[index].value = char;
|
|
13139
|
+
});
|
|
13140
|
+
// Move focus to the last input or trigger submit
|
|
13141
|
+
const lastInput = this.inputRefs[Math.min(value.length, this.inputRefs.length - 1)];
|
|
13142
|
+
if (lastInput) {
|
|
13143
|
+
lastInput.focus();
|
|
13144
|
+
}
|
|
13145
|
+
this.setValidity();
|
|
13146
|
+
this.setErrorMessage();
|
|
13147
|
+
}
|
|
13148
|
+
setValidity() {
|
|
13149
|
+
const code = this.code.join('');
|
|
13150
|
+
const inputMatchLength = code.length === this.validation.maxLength;
|
|
13151
|
+
const inputMatchValidation = code.match(this.validationPattern) !== null;
|
|
13152
|
+
this.isValid = inputMatchLength && inputMatchValidation;
|
|
13153
|
+
}
|
|
13154
|
+
setPattern() {
|
|
13155
|
+
var _a, _b;
|
|
13156
|
+
if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
13157
|
+
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
13158
|
+
}
|
|
13159
|
+
}
|
|
13160
|
+
setErrorMessage() {
|
|
13161
|
+
var _a;
|
|
13162
|
+
const inputMatchValidation = this.code.join('').match(this.validationPattern) !== null;
|
|
13163
|
+
if (!inputMatchValidation) {
|
|
13164
|
+
const errorKey = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
13165
|
+
if (errorKey) {
|
|
13166
|
+
this.errorMessage = translate(errorKey, this.language);
|
|
13167
|
+
}
|
|
13168
|
+
}
|
|
13169
|
+
else {
|
|
13170
|
+
this.errorMessage = '';
|
|
13171
|
+
}
|
|
13172
|
+
}
|
|
13173
|
+
renderTooltip() {
|
|
13174
|
+
if (this.showTooltip) {
|
|
13175
|
+
return h("div", { class: `text__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip });
|
|
13176
|
+
}
|
|
13177
|
+
return null;
|
|
13178
|
+
}
|
|
13179
|
+
render() {
|
|
13180
|
+
return (h("div", { key: 'cc140f18806c0cc8e4ff614a1a3448dbca667fa7', class: "twofa" }, h("div", { key: 'fc3b603e1d1a7187417301dfebe80dabfd8cda67', class: 'twofa__error-message' }, h("p", { key: '60e2cff194ec862de20aa443864861d784b8dc01' }, this.errorMessage)), h("div", { key: '244505408204938069dca1f60dbe051716f66f85', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'acb6b8e1676a884d1c7ceced800f6ba3a2e80bc7', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
13181
|
+
return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
13182
|
+
})), h("div", { key: '446eba5a8fe3fb0ede66869642d395bac9c6b8d6', class: "twofa__button-wrapper" }, h("p", { key: '9f205fd87920d866d49eb98b2a8ab6f3764fd274', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: 'efd2294b1d85a78c0d65262cc2004b5e63a898ab', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
13183
|
+
? translate('twofaResendButton', this.language)
|
|
13184
|
+
: this.formatTime()))));
|
|
13185
|
+
}
|
|
13186
|
+
static get watchers() { return {
|
|
13187
|
+
"clientStyling": ["handleStylingChange"],
|
|
13188
|
+
"isValid": ["validityChanged"],
|
|
13189
|
+
"emitValue": ["emitValueHandler"]
|
|
13190
|
+
}; }
|
|
13191
|
+
};
|
|
13192
|
+
TwofaInput.style = TwofaInputStyle0;
|
|
13193
|
+
|
|
12643
13194
|
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
12644
13195
|
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
12645
13196
|
|
|
@@ -12814,4 +13365,4 @@ const UiSkeleton = class {
|
|
|
12814
13365
|
};
|
|
12815
13366
|
UiSkeleton.style = UiSkeletonStyle0;
|
|
12816
13367
|
|
|
12817
|
-
export { CheckboxGroupInput as checkbox_group_input, CheckboxInput as checkbox_input, DateInput as date_input, EmailInput as email_input, GeneralInput as general_input, NumberInput as number_input, PasswordInput as password_input, RadioInput as radio_input, SelectInput as select_input, TelInput as tel_input, TextInput as text_input, ToggleCheckboxInput as toggle_checkbox_input, UiSkeleton as ui_skeleton };
|
|
13368
|
+
export { CheckboxGroupInput as checkbox_group_input, CheckboxInput as checkbox_input, DateInput as date_input, EmailInput as email_input, GeneralInput as general_input, NumberInput as number_input, PasswordInput as password_input, RadioInput as radio_input, SelectInput as select_input, TelInput as tel_input, TextInput as text_input, ToggleCheckboxInput as toggle_checkbox_input, TwofaInput as twofa_input, UiSkeleton as ui_skeleton };
|