@awes-io/ui 2.46.0 → 2.47.2
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,39 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.47.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.47.1...@awes-io/ui@2.47.2) (2022-04-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **aw-tel:** missing flags added ([c11de3c](https://github.com/awes-io/client/commit/c11de3c9f2eff94bbb8aa8348c479999623bcc5d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [2.47.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.47.0...@awes-io/ui@2.47.1) (2022-04-01)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **aw-tel:** disallow input before plus sign ([c8649af](https://github.com/awes-io/client/commit/c8649af7d5310ac3e2384054e4d7cd1d53333351))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
# [2.47.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.46.0...@awes-io/ui@2.47.0) (2022-03-31)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* **aw-tel:** placeholder replaced with mask ([e54e324](https://github.com/awes-io/client/commit/e54e324cb9ec576f583070a74a06349c23270685))
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
6
39
|
# [2.46.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.45.0...@awes-io/ui@2.46.0) (2022-03-17)
|
|
7
40
|
|
|
8
41
|
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
.flag {
|
|
18
18
|
display: block !important;
|
|
19
19
|
flex-shrink: 0;
|
|
20
|
-
transform: scale(0.
|
|
20
|
+
transform: scale(0.5);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -29,7 +29,10 @@
|
|
|
29
29
|
|
|
30
30
|
&__dropdown {
|
|
31
31
|
width: 100%;
|
|
32
|
-
|
|
32
|
+
|
|
33
|
+
&.aw-dropdown--desktop {
|
|
34
|
+
max-height: 50vh;
|
|
35
|
+
}
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
&__validity {
|
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
.flag {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
background-repeat: no-repeat;
|
|
4
|
+
display: inline-block;
|
|
5
|
+
width: 48px;
|
|
6
|
+
height: 48px;
|
|
7
|
+
background-image: url('../img/sprite-flags-48x48.png');
|
|
8
|
+
background-repeat: no-repeat;
|
|
9
|
+
background-position: -0px -48px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.flag.ABKHAZIA { background-position: -0px -0px; }
|
|
13
|
+
.flag.BASQUE-COUNTRY { background-position: -48px -0px; }
|
|
14
|
+
.flag.BRITISH-ANTARCTIC-TERRITORY { background-position: -96px -0px; }
|
|
15
|
+
.flag.COMMONWEALTH { background-position: -144px -0px; }
|
|
16
|
+
.flag.ENGLAND { background-position: -192px -0px; }
|
|
17
|
+
.flag.GOSQUARED { background-position: -240px -0px; }
|
|
18
|
+
.flag.KOSOVO, .flag.XK { background-position: -288px -0px; }
|
|
19
|
+
.flag.MARS { background-position: -336px -0px; }
|
|
20
|
+
.flag.NAGORNO-KARABAKH { background-position: -384px -0px; }
|
|
21
|
+
.flag.NATO { background-position: -432px -0px; }
|
|
22
|
+
.flag.NORTHERN-CYPRUS { background-position: -480px -0px; }
|
|
23
|
+
.flag.OLYMPICS { background-position: -528px -0px; }
|
|
24
|
+
.flag.RED-CROSS { background-position: -576px -0px; }
|
|
25
|
+
.flag.SCOTLAND { background-position: -624px -0px; }
|
|
26
|
+
.flag.SOMALILAND { background-position: -672px -0px; }
|
|
27
|
+
.flag.SOUTH-OSSETIA { background-position: -720px -0px; }
|
|
28
|
+
.flag.UNITED-NATIONS { background-position: -768px -0px; }
|
|
29
|
+
.flag.UNKNOWN { background-position: -0px -48px; }
|
|
30
|
+
.flag.WALES { background-position: -48px -48px; }
|
|
31
|
+
.flag.AC { background-position: -48px -336px; } /* IM */
|
|
32
|
+
.flag.AD { background-position: -96px -48px; }
|
|
33
|
+
.flag.AE { background-position: -144px -48px; }
|
|
34
|
+
.flag.AF { background-position: -192px -48px; }
|
|
35
|
+
.flag.AG { background-position: -240px -48px; }
|
|
36
|
+
.flag.AI { background-position: -288px -48px; }
|
|
37
|
+
.flag.AL { background-position: -336px -48px; }
|
|
38
|
+
.flag.AM { background-position: -384px -48px; }
|
|
39
|
+
.flag.AN { background-position: -432px -48px; }
|
|
40
|
+
.flag.AO { background-position: -480px -48px; }
|
|
41
|
+
.flag.AQ { background-position: -528px -48px; }
|
|
42
|
+
.flag.AR { background-position: -576px -48px; }
|
|
43
|
+
.flag.AS { background-position: -624px -48px; }
|
|
44
|
+
.flag.AT { background-position: -672px -48px; }
|
|
45
|
+
.flag.AU { background-position: -720px -48px; }
|
|
46
|
+
.flag.AW { background-position: -768px -48px; }
|
|
47
|
+
.flag.AX { background-position: -0px -96px; }
|
|
48
|
+
.flag.AZ { background-position: -48px -96px; }
|
|
49
|
+
.flag.BA { background-position: -96px -96px; }
|
|
50
|
+
.flag.BB { background-position: -144px -96px; }
|
|
51
|
+
.flag.BD { background-position: -192px -96px; }
|
|
52
|
+
.flag.BE { background-position: -240px -96px; }
|
|
53
|
+
.flag.BF { background-position: -288px -96px; }
|
|
54
|
+
.flag.BG { background-position: -336px -96px; }
|
|
55
|
+
.flag.BH { background-position: -384px -96px; }
|
|
56
|
+
.flag.BI { background-position: -432px -96px; }
|
|
57
|
+
.flag.BJ { background-position: -480px -96px; }
|
|
58
|
+
.flag.BL { background-position: -528px -96px; }
|
|
59
|
+
.flag.BM { background-position: -576px -96px; }
|
|
60
|
+
.flag.BN { background-position: -624px -96px; }
|
|
61
|
+
.flag.BO { background-position: -672px -96px; }
|
|
62
|
+
.flag.BQ { background-position: -528px -480px; }
|
|
63
|
+
.flag.BR { background-position: -720px -96px; }
|
|
64
|
+
.flag.BS { background-position: -768px -96px; }
|
|
65
|
+
.flag.BT { background-position: -0px -144px; }
|
|
66
|
+
.flag.BW { background-position: -48px -144px; }
|
|
67
|
+
.flag.BY { background-position: -96px -144px; }
|
|
68
|
+
.flag.BZ { background-position: -144px -144px; }
|
|
69
|
+
.flag.CA { background-position: -192px -144px; }
|
|
70
|
+
.flag.CC { background-position: -240px -144px; }
|
|
71
|
+
.flag.CD { background-position: -288px -144px; }
|
|
72
|
+
.flag.CF { background-position: -336px -144px; }
|
|
73
|
+
.flag.CG { background-position: -384px -144px; }
|
|
74
|
+
.flag.CH { background-position: -432px -144px; }
|
|
75
|
+
.flag.CI { background-position: -480px -144px; }
|
|
76
|
+
.flag.CK { background-position: -528px -144px; }
|
|
77
|
+
.flag.CL { background-position: -576px -144px; }
|
|
78
|
+
.flag.CM { background-position: -624px -144px; }
|
|
79
|
+
.flag.CN { background-position: -672px -144px; }
|
|
80
|
+
.flag.CO { background-position: -720px -144px; }
|
|
81
|
+
.flag.CR { background-position: -768px -144px; }
|
|
82
|
+
.flag.CU { background-position: -0px -192px; }
|
|
83
|
+
.flag.CV { background-position: -48px -192px; }
|
|
84
|
+
.flag.CW { background-position: -96px -192px; }
|
|
85
|
+
.flag.CX { background-position: -144px -192px; }
|
|
86
|
+
.flag.CY { background-position: -192px -192px; }
|
|
87
|
+
.flag.CZ { background-position: -240px -192px; }
|
|
88
|
+
.flag.DE { background-position: -288px -192px; }
|
|
89
|
+
.flag.DJ { background-position: -336px -192px; }
|
|
90
|
+
.flag.DK { background-position: -384px -192px; }
|
|
91
|
+
.flag.DM { background-position: -432px -192px; }
|
|
92
|
+
.flag.DO { background-position: -480px -192px; }
|
|
93
|
+
.flag.DZ { background-position: -528px -192px; }
|
|
94
|
+
.flag.EC { background-position: -576px -192px; }
|
|
95
|
+
.flag.EE { background-position: -624px -192px; }
|
|
96
|
+
.flag.EG { background-position: -672px -192px; }
|
|
97
|
+
.flag.EH { background-position: -720px -192px; }
|
|
98
|
+
.flag.ER { background-position: -768px -192px; }
|
|
99
|
+
.flag.ES { background-position: -0px -240px; }
|
|
100
|
+
.flag.ET { background-position: -48px -240px; }
|
|
101
|
+
.flag.EU { background-position: -96px -240px; }
|
|
102
|
+
.flag.FI { background-position: -144px -240px; }
|
|
103
|
+
.flag.FJ { background-position: -192px -240px; }
|
|
104
|
+
.flag.FK { background-position: -240px -240px; }
|
|
105
|
+
.flag.FM { background-position: -288px -240px; }
|
|
106
|
+
.flag.FO { background-position: -336px -240px; }
|
|
107
|
+
.flag.FR { background-position: -384px -240px; }
|
|
108
|
+
.flag.GA { background-position: -432px -240px; }
|
|
109
|
+
.flag.GB { background-position: -480px -240px; }
|
|
110
|
+
.flag.GD { background-position: -528px -240px; }
|
|
111
|
+
.flag.GE { background-position: -576px -240px; }
|
|
112
|
+
.flag.GF { background-position: -384px -240px; } /* TODO */
|
|
113
|
+
.flag.GG { background-position: -624px -240px; }
|
|
114
|
+
.flag.GH { background-position: -672px -240px; }
|
|
115
|
+
.flag.GI { background-position: -720px -240px; }
|
|
116
|
+
.flag.GL { background-position: -768px -240px; }
|
|
117
|
+
.flag.GM { background-position: -0px -288px; }
|
|
118
|
+
.flag.GN { background-position: -48px -288px; }
|
|
119
|
+
.flag.GP { background-position: -384px -240px; } /* TODO */
|
|
120
|
+
.flag.GQ { background-position: -96px -288px; }
|
|
121
|
+
.flag.GR { background-position: -144px -288px; }
|
|
122
|
+
.flag.GS { background-position: -192px -288px; }
|
|
123
|
+
.flag.GT { background-position: -240px -288px; }
|
|
124
|
+
.flag.GU { background-position: -288px -288px; }
|
|
125
|
+
.flag.GW { background-position: -336px -288px; }
|
|
126
|
+
.flag.GY { background-position: -384px -288px; }
|
|
127
|
+
.flag.HK { background-position: -432px -288px; }
|
|
128
|
+
.flag.HN { background-position: -480px -288px; }
|
|
129
|
+
.flag.HR { background-position: -528px -288px; }
|
|
130
|
+
.flag.HT { background-position: -576px -288px; }
|
|
131
|
+
.flag.HU { background-position: -624px -288px; }
|
|
132
|
+
.flag.IC { background-position: -672px -288px; }
|
|
133
|
+
.flag.ID { background-position: -720px -288px; }
|
|
134
|
+
.flag.IE { background-position: -768px -288px; }
|
|
135
|
+
.flag.IL { background-position: -0px -336px; }
|
|
136
|
+
.flag.IM { background-position: -48px -336px; }
|
|
137
|
+
.flag.IN { background-position: -96px -336px; }
|
|
138
|
+
.flag.IO { background-position: -480px -240px; } /* TODO */
|
|
139
|
+
.flag.IQ { background-position: -144px -336px; }
|
|
140
|
+
.flag.IR { background-position: -192px -336px; }
|
|
141
|
+
.flag.IS { background-position: -240px -336px; }
|
|
142
|
+
.flag.IT { background-position: -288px -336px; }
|
|
143
|
+
.flag.JE { background-position: -336px -336px; }
|
|
144
|
+
.flag.JM { background-position: -384px -336px; }
|
|
145
|
+
.flag.JO { background-position: -432px -336px; }
|
|
146
|
+
.flag.JP { background-position: -480px -336px; }
|
|
147
|
+
.flag.KE { background-position: -528px -336px; }
|
|
148
|
+
.flag.KG { background-position: -576px -336px; }
|
|
149
|
+
.flag.KH { background-position: -624px -336px; }
|
|
150
|
+
.flag.KI { background-position: -672px -336px; }
|
|
151
|
+
.flag.KM { background-position: -720px -336px; }
|
|
152
|
+
.flag.KN { background-position: -768px -336px; }
|
|
153
|
+
.flag.KP { background-position: -0px -384px; }
|
|
154
|
+
.flag.KR { background-position: -48px -384px; }
|
|
155
|
+
.flag.KW { background-position: -96px -384px; }
|
|
156
|
+
.flag.KY { background-position: -144px -384px; }
|
|
157
|
+
.flag.KZ { background-position: -192px -384px; }
|
|
158
|
+
.flag.LA { background-position: -240px -384px; }
|
|
159
|
+
.flag.LB { background-position: -288px -384px; }
|
|
160
|
+
.flag.LC { background-position: -336px -384px; }
|
|
161
|
+
.flag.LI { background-position: -384px -384px; }
|
|
162
|
+
.flag.LK { background-position: -432px -384px; }
|
|
163
|
+
.flag.LR { background-position: -480px -384px; }
|
|
164
|
+
.flag.LS { background-position: -528px -384px; }
|
|
165
|
+
.flag.LT { background-position: -576px -384px; }
|
|
166
|
+
.flag.LU { background-position: -624px -384px; }
|
|
167
|
+
.flag.LV { background-position: -672px -384px; }
|
|
168
|
+
.flag.LY { background-position: -720px -384px; }
|
|
169
|
+
.flag.MA { background-position: -768px -384px; }
|
|
170
|
+
.flag.MC { background-position: -0px -432px; }
|
|
171
|
+
.flag.MD { background-position: -48px -432px; }
|
|
172
|
+
.flag.ME { background-position: -96px -432px; }
|
|
173
|
+
.flag.MF { background-position: -144px -432px; }
|
|
174
|
+
.flag.MG { background-position: -192px -432px; }
|
|
175
|
+
.flag.MH { background-position: -240px -432px; }
|
|
176
|
+
.flag.MK { background-position: -288px -432px; }
|
|
177
|
+
.flag.ML { background-position: -336px -432px; }
|
|
178
|
+
.flag.MM { background-position: -384px -432px; }
|
|
179
|
+
.flag.MN { background-position: -432px -432px; }
|
|
180
|
+
.flag.MO { background-position: -480px -432px; }
|
|
181
|
+
.flag.MP { background-position: -528px -432px; }
|
|
182
|
+
.flag.MQ { background-position: -576px -432px; }
|
|
183
|
+
.flag.MR { background-position: -624px -432px; }
|
|
184
|
+
.flag.MS { background-position: -672px -432px; }
|
|
185
|
+
.flag.MT { background-position: -720px -432px; }
|
|
186
|
+
.flag.MU { background-position: -768px -432px; }
|
|
187
|
+
.flag.MV { background-position: -0px -480px; }
|
|
188
|
+
.flag.MW { background-position: -48px -480px; }
|
|
189
|
+
.flag.MX { background-position: -96px -480px; }
|
|
190
|
+
.flag.MY { background-position: -144px -480px; }
|
|
191
|
+
.flag.MZ { background-position: -192px -480px; }
|
|
192
|
+
.flag.NA { background-position: -240px -480px; }
|
|
193
|
+
.flag.NC { background-position: -288px -480px; }
|
|
194
|
+
.flag.NE { background-position: -336px -480px; }
|
|
195
|
+
.flag.NF { background-position: -384px -480px; }
|
|
196
|
+
.flag.NG { background-position: -432px -480px; }
|
|
197
|
+
.flag.NI { background-position: -480px -480px; }
|
|
198
|
+
.flag.NL { background-position: -528px -480px; }
|
|
199
|
+
.flag.NO { background-position: -576px -480px; }
|
|
200
|
+
.flag.NP { background-position: -624px -480px; }
|
|
201
|
+
.flag.NR { background-position: -672px -480px; }
|
|
202
|
+
.flag.NU { background-position: -720px -480px; }
|
|
203
|
+
.flag.NZ { background-position: -768px -480px; }
|
|
204
|
+
.flag.OM { background-position: -0px -528px; }
|
|
205
|
+
.flag.PA { background-position: -48px -528px; }
|
|
206
|
+
.flag.PE { background-position: -96px -528px; }
|
|
207
|
+
.flag.PF { background-position: -144px -528px; }
|
|
208
|
+
.flag.PG { background-position: -192px -528px; }
|
|
209
|
+
.flag.PH { background-position: -240px -528px; }
|
|
210
|
+
.flag.PIRATE-BLACK { background-position: -288px -528px; }
|
|
211
|
+
.flag.PIRATE-WHITE { background-position: -336px -528px; }
|
|
212
|
+
.flag.PK { background-position: -384px -528px; }
|
|
213
|
+
.flag.PL { background-position: -432px -528px; }
|
|
214
|
+
.flag.PM { background-position: -384px -240px; } /* TODO */
|
|
215
|
+
.flag.PN { background-position: -480px -528px; }
|
|
216
|
+
.flag.PR { background-position: -528px -528px; }
|
|
217
|
+
.flag.PS { background-position: -576px -528px; }
|
|
218
|
+
.flag.PT { background-position: -624px -528px; }
|
|
219
|
+
.flag.PW { background-position: -672px -528px; }
|
|
220
|
+
.flag.PY { background-position: -720px -528px; }
|
|
221
|
+
.flag.QA { background-position: -768px -528px; }
|
|
222
|
+
.flag.RO { background-position: -0px -576px; }
|
|
223
|
+
.flag.RS { background-position: -48px -576px; }
|
|
224
|
+
.flag.RE { background-position: -384px -240px; } /* TODO */
|
|
225
|
+
.flag.RU { background-position: -96px -576px; }
|
|
226
|
+
.flag.RW { background-position: -144px -576px; }
|
|
227
|
+
.flag.SA { background-position: -192px -576px; }
|
|
228
|
+
.flag.SB { background-position: -240px -576px; }
|
|
229
|
+
.flag.SC { background-position: -288px -576px; }
|
|
230
|
+
.flag.SD { background-position: -336px -576px; }
|
|
231
|
+
.flag.SE { background-position: -384px -576px; }
|
|
232
|
+
.flag.SG { background-position: -432px -576px; }
|
|
233
|
+
.flag.SH { background-position: -480px -576px; }
|
|
234
|
+
.flag.SI { background-position: -528px -576px; }
|
|
235
|
+
.flag.SJ { background-position: -576px -480px; }
|
|
236
|
+
.flag.SK { background-position: -576px -576px; }
|
|
237
|
+
.flag.SL { background-position: -624px -576px; }
|
|
238
|
+
.flag.SM { background-position: -672px -576px; }
|
|
239
|
+
.flag.SN { background-position: -720px -576px; }
|
|
240
|
+
.flag.SO { background-position: -768px -576px; }
|
|
241
|
+
.flag.SR { background-position: -0px -624px; }
|
|
242
|
+
.flag.SS { background-position: -48px -624px; }
|
|
243
|
+
.flag.ST { background-position: -96px -624px; }
|
|
244
|
+
.flag.SV { background-position: -144px -624px; }
|
|
245
|
+
.flag.SX { background-position: -528px -480px; } /* TODO */
|
|
246
|
+
.flag.SY { background-position: -192px -624px; }
|
|
247
|
+
.flag.SZ { background-position: -240px -624px; }
|
|
248
|
+
.flag.TA { background-position: -480px -240px; } /* TODO */
|
|
249
|
+
.flag.TC { background-position: -288px -624px; }
|
|
250
|
+
.flag.TD { background-position: -336px -624px; }
|
|
251
|
+
.flag.TF { background-position: -384px -624px; }
|
|
252
|
+
.flag.TG { background-position: -432px -624px; }
|
|
253
|
+
.flag.TH { background-position: -480px -624px; }
|
|
254
|
+
.flag.TJ { background-position: -528px -624px; }
|
|
255
|
+
.flag.TK { background-position: -576px -624px; }
|
|
256
|
+
.flag.TL { background-position: -624px -624px; }
|
|
257
|
+
.flag.TM { background-position: -672px -624px; }
|
|
258
|
+
.flag.TN { background-position: -720px -624px; }
|
|
259
|
+
.flag.TO { background-position: -768px -624px; }
|
|
260
|
+
.flag.TR { background-position: -0px -672px; }
|
|
261
|
+
.flag.TT { background-position: -48px -672px; }
|
|
262
|
+
.flag.TV { background-position: -96px -672px; }
|
|
263
|
+
.flag.TW { background-position: -144px -672px; }
|
|
264
|
+
.flag.TZ { background-position: -192px -672px; }
|
|
265
|
+
.flag.UA { background-position: -240px -672px; }
|
|
266
|
+
.flag.UG { background-position: -288px -672px; }
|
|
267
|
+
.flag.US { background-position: -336px -672px; }
|
|
268
|
+
.flag.UY { background-position: -384px -672px; }
|
|
269
|
+
.flag.UZ { background-position: -432px -672px; }
|
|
270
|
+
.flag.VA { background-position: -480px -672px; }
|
|
271
|
+
.flag.VC { background-position: -528px -672px; }
|
|
272
|
+
.flag.VE { background-position: -576px -672px; }
|
|
273
|
+
.flag.VG { background-position: -624px -672px; }
|
|
274
|
+
.flag.VI { background-position: -672px -672px; }
|
|
275
|
+
.flag.VN { background-position: -720px -672px; }
|
|
276
|
+
.flag.VU { background-position: -768px -672px; }
|
|
277
|
+
.flag.WF { background-position: -0px -720px; }
|
|
278
|
+
.flag.WS { background-position: -48px -720px; }
|
|
279
|
+
.flag.YE { background-position: -96px -720px; }
|
|
280
|
+
.flag.YT { background-position: -144px -720px; }
|
|
281
|
+
.flag.ZA { background-position: -192px -720px; }
|
|
282
|
+
.flag.ZM { background-position: -240px -720px; }
|
|
283
|
+
.flag.ZW { background-position: -288px -720px; }
|
|
Binary file
|
|
@@ -272,10 +272,7 @@ export default {
|
|
|
272
272
|
},
|
|
273
273
|
|
|
274
274
|
_onClickAction($event) {
|
|
275
|
-
if (
|
|
276
|
-
$event.target === this.$el ||
|
|
277
|
-
(this.closeOnAction && containsTargets(ACTION_TAGS, $event))
|
|
278
|
-
) {
|
|
275
|
+
if (this.closeOnAction && containsTargets(ACTION_TAGS, $event)) {
|
|
279
276
|
this.$el.style.display = 'none' // force close
|
|
280
277
|
this.visible = false
|
|
281
278
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="aw-tel
|
|
2
|
+
<div class="aw-tel" @focusout="_onBlur">
|
|
3
3
|
<AwInput
|
|
4
4
|
ref="input"
|
|
5
5
|
v-bind="$attrs"
|
|
6
|
-
:value="
|
|
7
|
-
:placeholder="placeholder"
|
|
6
|
+
:value="phoneValue"
|
|
8
7
|
v-on="mergedListeners"
|
|
9
8
|
>
|
|
10
9
|
<template
|
|
@@ -16,11 +15,7 @@
|
|
|
16
15
|
v-tooltip.show.prepend="errorTooltip"
|
|
17
16
|
:aria-describedby="errorText ? errorId : null"
|
|
18
17
|
:class="cssClass"
|
|
19
|
-
:value="
|
|
20
|
-
phoneNumber.isValid()
|
|
21
|
-
? phoneNumber.format('INTERNATIONAL')
|
|
22
|
-
: phoneNumber.number
|
|
23
|
-
"
|
|
18
|
+
:value="phoneValue"
|
|
24
19
|
type="tel"
|
|
25
20
|
v-on="mergedListeners"
|
|
26
21
|
/>
|
|
@@ -32,7 +27,7 @@
|
|
|
32
27
|
@click="_openCountriesDropdown"
|
|
33
28
|
>
|
|
34
29
|
<span tabindex="-1" class="aw-tel__flag">
|
|
35
|
-
<i class="flag" :class="country
|
|
30
|
+
<i class="flag" :class="country || 'NOWHERE'"></i>
|
|
36
31
|
</span>
|
|
37
32
|
</button>
|
|
38
33
|
</template>
|
|
@@ -41,15 +36,13 @@
|
|
|
41
36
|
v-show="!!value"
|
|
42
37
|
class="aw-tel__validity"
|
|
43
38
|
:class="
|
|
44
|
-
phoneNumber.
|
|
39
|
+
phoneNumber.valid
|
|
45
40
|
? 'aw-tel__validity--valid'
|
|
46
41
|
: 'aw-tel__validity--invalid'
|
|
47
42
|
"
|
|
48
43
|
>
|
|
49
44
|
<AwIconSystemMono
|
|
50
|
-
:name="
|
|
51
|
-
phoneNumber.isValid() ? 'check-light' : 'ban-light'
|
|
52
|
-
"
|
|
45
|
+
:name="phoneNumber.valid ? 'check-light' : 'ban-light'"
|
|
53
46
|
/>
|
|
54
47
|
</span>
|
|
55
48
|
</template>
|
|
@@ -58,21 +51,24 @@
|
|
|
58
51
|
ref="dropdown"
|
|
59
52
|
class="aw-tel__dropdown"
|
|
60
53
|
:show.sync="showCountries"
|
|
54
|
+
:close-on-action="false"
|
|
61
55
|
@click.native="_onCountryClick"
|
|
62
56
|
@keydown.native="_keyFocusItem($event)"
|
|
63
57
|
>
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
58
|
+
<template v-if="showCountries">
|
|
59
|
+
<AwDropdownButton
|
|
60
|
+
v-for="{ name, code, iso } in countries"
|
|
61
|
+
:key="iso"
|
|
62
|
+
:active="country === iso"
|
|
63
|
+
:data-country="iso"
|
|
64
|
+
tabindex="-1"
|
|
65
|
+
>
|
|
66
|
+
<span class="aw-tel__flag mr-3">
|
|
67
|
+
<i class="flag" :class="iso"></i>
|
|
68
|
+
</span>
|
|
69
|
+
{{ name }} (+{{ code }})
|
|
70
|
+
</AwDropdownButton>
|
|
71
|
+
</template>
|
|
76
72
|
</AwDropdown>
|
|
77
73
|
</div>
|
|
78
74
|
</template>
|
|
@@ -153,19 +149,20 @@ export default {
|
|
|
153
149
|
},
|
|
154
150
|
|
|
155
151
|
data() {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
const placeholder = this._getPlaceholder(country)
|
|
152
|
+
const phoneNumber = this._parsePhoneNumber(
|
|
153
|
+
this.value,
|
|
154
|
+
this.preselectCountry
|
|
155
|
+
)
|
|
156
|
+
const country = phoneNumber.country
|
|
157
|
+
const countries = this._getCountries(country)
|
|
158
|
+
const phoneValue = this._getPhoneValue(phoneNumber)
|
|
164
159
|
|
|
165
160
|
return {
|
|
161
|
+
showCountries: false,
|
|
166
162
|
country,
|
|
167
|
-
|
|
168
|
-
|
|
163
|
+
countries,
|
|
164
|
+
phoneNumber,
|
|
165
|
+
phoneValue
|
|
169
166
|
}
|
|
170
167
|
},
|
|
171
168
|
|
|
@@ -174,29 +171,17 @@ export default {
|
|
|
174
171
|
return {
|
|
175
172
|
...this.$listeners,
|
|
176
173
|
input: this._onInput,
|
|
177
|
-
change: this._onInput
|
|
174
|
+
change: this._onInput,
|
|
175
|
+
paste: this._onPaste,
|
|
176
|
+
focus: this._onFocus,
|
|
177
|
+
click: this._onFocus
|
|
178
178
|
}
|
|
179
179
|
},
|
|
180
180
|
|
|
181
|
-
countries() {
|
|
182
|
-
return Array.isArray(this.filterCountries) &&
|
|
183
|
-
this.filterCountries.length
|
|
184
|
-
? COUNTRIES.filter(
|
|
185
|
-
(country) =>
|
|
186
|
-
country.iso === this.country ||
|
|
187
|
-
this.filterCountries.includes(country.iso)
|
|
188
|
-
)
|
|
189
|
-
: COUNTRIES
|
|
190
|
-
},
|
|
191
|
-
|
|
192
181
|
callingCode() {
|
|
193
182
|
return this._getCallingCode(this.country)
|
|
194
183
|
},
|
|
195
184
|
|
|
196
|
-
phoneNumber() {
|
|
197
|
-
return this._parsePhoneNumber(this.value, this.country)
|
|
198
|
-
},
|
|
199
|
-
|
|
200
185
|
_arrowFocusSelector() {
|
|
201
186
|
return '[data-country]'
|
|
202
187
|
},
|
|
@@ -211,22 +196,53 @@ export default {
|
|
|
211
196
|
handler(iso, oldIso) {
|
|
212
197
|
if (iso === oldIso) return
|
|
213
198
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
if (oldIso) {
|
|
199
|
+
if (iso && oldIso) {
|
|
217
200
|
const value = this.value.replace(
|
|
218
201
|
'+' + this._getCallingCode(oldIso),
|
|
219
202
|
'+' + this.callingCode
|
|
220
203
|
)
|
|
221
204
|
const phoneNumber = this._parsePhoneNumber(value, iso)
|
|
222
205
|
|
|
206
|
+
if (!this.phoneNumber.isEqual(phoneNumber)) {
|
|
207
|
+
this.phoneNumber = phoneNumber
|
|
208
|
+
this.phoneValue = this._getPhoneValue(phoneNumber)
|
|
209
|
+
|
|
210
|
+
this._emitInput(phoneNumber)
|
|
211
|
+
}
|
|
212
|
+
} else {
|
|
213
|
+
const phoneNumber = this._parsePhoneNumber(this.value, iso)
|
|
214
|
+
|
|
215
|
+
this.phoneNumber = phoneNumber
|
|
216
|
+
this.phoneValue = this._getPhoneValue(phoneNumber)
|
|
217
|
+
|
|
223
218
|
this._emitInput(phoneNumber)
|
|
224
219
|
}
|
|
225
220
|
|
|
226
|
-
|
|
221
|
+
this.countries = this._getCountries(iso)
|
|
222
|
+
|
|
223
|
+
if (
|
|
224
|
+
this.$refs.element &&
|
|
225
|
+
this.$el.contains(document.activeElement)
|
|
226
|
+
) {
|
|
227
227
|
this.$refs.element.focus()
|
|
228
|
+
this.$nextTick(() => {
|
|
229
|
+
this._setFocusToFirstDash(this.$refs.element)
|
|
230
|
+
})
|
|
228
231
|
}
|
|
229
232
|
}
|
|
233
|
+
},
|
|
234
|
+
|
|
235
|
+
value(value) {
|
|
236
|
+
const phoneNumber = this._parsePhoneNumber(value, this.country)
|
|
237
|
+
|
|
238
|
+
if (!this.phoneNumber.isEqual(phoneNumber)) {
|
|
239
|
+
this.phoneNumber = phoneNumber
|
|
240
|
+
this.phoneValue = this._getPhoneValue(phoneNumber)
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
if (phoneNumber.country && phoneNumber.country !== this.country) {
|
|
244
|
+
this.country = phoneNumber.country
|
|
245
|
+
}
|
|
230
246
|
}
|
|
231
247
|
},
|
|
232
248
|
|
|
@@ -234,20 +250,100 @@ export default {
|
|
|
234
250
|
_onInput($event) {
|
|
235
251
|
const value = $event.target.value
|
|
236
252
|
const phoneNumber = this._parsePhoneNumber(value, this.country)
|
|
237
|
-
|
|
238
|
-
|
|
253
|
+
const phoneValue = this._getPhoneValue(phoneNumber)
|
|
254
|
+
|
|
255
|
+
// open dropdown on backspace
|
|
256
|
+
if (
|
|
257
|
+
phoneNumber.number === '' &&
|
|
258
|
+
phoneValue === this.phoneValue &&
|
|
259
|
+
$event.data === null
|
|
260
|
+
) {
|
|
261
|
+
this.$nextTick(this._openCountriesDropdown)
|
|
239
262
|
return
|
|
240
263
|
}
|
|
241
264
|
|
|
265
|
+
// save caret position
|
|
266
|
+
let pos = $event.target.selectionStart
|
|
267
|
+
let digit = pos > 0 ? value[pos - 1] : '_'
|
|
268
|
+
let adjustPosition = false
|
|
269
|
+
|
|
270
|
+
if (phoneValue !== this.phoneValue) {
|
|
271
|
+
adjustPosition = true
|
|
272
|
+
|
|
273
|
+
this.phoneNumber = phoneNumber
|
|
274
|
+
this.phoneValue = phoneValue
|
|
275
|
+
|
|
276
|
+
this._emitInput(phoneNumber)
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
if ($event.target.value !== this.phoneValue) {
|
|
280
|
+
adjustPosition = true
|
|
281
|
+
|
|
282
|
+
$event.target.value = this.phoneValue
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
if (phoneNumber.country && phoneNumber.country !== this.country) {
|
|
286
|
+
this.country = phoneNumber.country
|
|
287
|
+
}
|
|
288
|
+
|
|
242
289
|
if (this.$refs.input.hasError) {
|
|
243
290
|
this.$refs.input.setError('')
|
|
244
291
|
}
|
|
245
292
|
|
|
246
|
-
if (
|
|
293
|
+
if ($event.data !== null && this.showCountries) {
|
|
294
|
+
this.showCountries = false
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
if (adjustPosition) {
|
|
298
|
+
this.$nextTick(() => {
|
|
299
|
+
const newValue = $event.target.value
|
|
300
|
+
const firstDashIndex = newValue.indexOf('_')
|
|
301
|
+
const max =
|
|
302
|
+
firstDashIndex > -1 ? firstDashIndex : newValue.length
|
|
303
|
+
|
|
304
|
+
pos = Math.min(pos, max)
|
|
305
|
+
|
|
306
|
+
while (
|
|
307
|
+
newValue[pos - 1] !== digit &&
|
|
308
|
+
pos < firstDashIndex
|
|
309
|
+
) {
|
|
310
|
+
pos++
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
$event.target.setSelectionRange(pos, pos)
|
|
314
|
+
})
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
|
|
318
|
+
_onPaste($event) {
|
|
319
|
+
$event.preventDefault()
|
|
320
|
+
|
|
321
|
+
// replace all Data
|
|
322
|
+
const phone = $event.clipboardData.getData('text')
|
|
323
|
+
|
|
324
|
+
const phoneNumber = this._parsePhoneNumber(phone, this.country)
|
|
325
|
+
|
|
326
|
+
if (!this.phoneNumber.isEqual(phoneNumber)) {
|
|
327
|
+
this.phoneNumber = phoneNumber
|
|
328
|
+
this.phoneValue = this._getPhoneValue(phoneNumber)
|
|
329
|
+
|
|
330
|
+
this._emitInput(phoneNumber)
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
if (phoneNumber.country && phoneNumber.country !== this.country) {
|
|
247
334
|
this.country = phoneNumber.country
|
|
248
335
|
}
|
|
249
336
|
|
|
250
|
-
|
|
337
|
+
$event.target.focus()
|
|
338
|
+
|
|
339
|
+
this.$nextTick(() => {
|
|
340
|
+
this._onFocus({ target: $event.target })
|
|
341
|
+
})
|
|
342
|
+
},
|
|
343
|
+
|
|
344
|
+
_onFocus($event) {
|
|
345
|
+
setTimeout(this._setFocusToFirstDash, 5, $event.target)
|
|
346
|
+
this.showCountries = false
|
|
251
347
|
},
|
|
252
348
|
|
|
253
349
|
_onBlur($event) {
|
|
@@ -256,43 +352,79 @@ export default {
|
|
|
256
352
|
}
|
|
257
353
|
},
|
|
258
354
|
|
|
259
|
-
_getPlaceholder(iso) {
|
|
355
|
+
_getPlaceholder(iso, withCode = false) {
|
|
260
356
|
const phoneNumber = getExampleNumber(iso, examples)
|
|
261
357
|
|
|
262
358
|
if (phoneNumber) {
|
|
263
359
|
const number = phoneNumber.format('INTERNATIONAL')
|
|
264
|
-
const code = '+' + phoneNumber.countryCallingCode
|
|
265
360
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
361
|
+
if (withCode) {
|
|
362
|
+
const code = '+' + phoneNumber.countryCallingCode
|
|
363
|
+
|
|
364
|
+
return number
|
|
365
|
+
.replace(code, '{code}')
|
|
366
|
+
.replace(/\d/g, '_')
|
|
367
|
+
.replace('{code}', code)
|
|
368
|
+
} else {
|
|
369
|
+
return number.replace(/\d/g, '_')
|
|
370
|
+
}
|
|
270
371
|
} else {
|
|
271
372
|
return ''
|
|
272
373
|
}
|
|
273
374
|
},
|
|
274
375
|
|
|
275
376
|
_onCountryClick($event) {
|
|
276
|
-
|
|
377
|
+
const country = getEventTargetAttribute(
|
|
277
378
|
$event,
|
|
278
379
|
'data-country',
|
|
279
380
|
this.$el
|
|
280
381
|
)
|
|
281
|
-
|
|
382
|
+
|
|
383
|
+
if (country) {
|
|
384
|
+
this.country = country
|
|
385
|
+
this.showCountries = false
|
|
386
|
+
|
|
387
|
+
this.$refs.element.focus()
|
|
388
|
+
this.$nextTick(() =>
|
|
389
|
+
this._setFocusToFirstDash(this.$refs.element)
|
|
390
|
+
)
|
|
391
|
+
}
|
|
282
392
|
},
|
|
283
393
|
|
|
284
|
-
_parsePhoneNumber(value, country) {
|
|
285
|
-
|
|
286
|
-
|
|
394
|
+
_parsePhoneNumber(value = '', country) {
|
|
395
|
+
let number = typeof value === 'string' ? value : ''
|
|
396
|
+
|
|
397
|
+
number = number.replace(/(.*)\+/, '+').replace(/\D/g, '')
|
|
398
|
+
|
|
399
|
+
number = number === this.callingCode ? '' : number
|
|
400
|
+
|
|
401
|
+
number = number && value.includes('+') ? '+' + number : number
|
|
402
|
+
|
|
403
|
+
let phoneNumber = parsePhoneNumberFromString(number, country)
|
|
287
404
|
|
|
288
405
|
if (phoneNumber) {
|
|
289
|
-
return
|
|
406
|
+
return {
|
|
407
|
+
number: phoneNumber.number,
|
|
408
|
+
country: phoneNumber.country,
|
|
409
|
+
countryCallingCode: phoneNumber.countryCallingCode,
|
|
410
|
+
valid: phoneNumber.isValid(),
|
|
411
|
+
format() {
|
|
412
|
+
return phoneNumber.format.apply(phoneNumber, arguments)
|
|
413
|
+
},
|
|
414
|
+
isValid() {
|
|
415
|
+
return phoneNumber.isValid.apply(phoneNumber, arguments)
|
|
416
|
+
},
|
|
417
|
+
isEqual() {
|
|
418
|
+
return phoneNumber.isEqual.apply(phoneNumber, arguments)
|
|
419
|
+
}
|
|
420
|
+
}
|
|
290
421
|
} else {
|
|
291
422
|
// mock PhoneNumber class
|
|
292
423
|
return {
|
|
293
424
|
number,
|
|
294
425
|
country,
|
|
295
426
|
countryCallingCode: this.callingCode,
|
|
427
|
+
valid: false,
|
|
296
428
|
format() {
|
|
297
429
|
return number
|
|
298
430
|
},
|
|
@@ -306,6 +438,30 @@ export default {
|
|
|
306
438
|
}
|
|
307
439
|
},
|
|
308
440
|
|
|
441
|
+
_getPhoneValue(phoneNumber) {
|
|
442
|
+
if (phoneNumber.number === '') {
|
|
443
|
+
return this._getPlaceholder(phoneNumber.country, true)
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
const placeholder = this._getPlaceholder(phoneNumber.country)
|
|
447
|
+
|
|
448
|
+
if (placeholder) {
|
|
449
|
+
const digits = phoneNumber.number.replace(/\D/g, '').split('')
|
|
450
|
+
const replaced = placeholder.replace(
|
|
451
|
+
/_/g,
|
|
452
|
+
() => digits.shift() || '_'
|
|
453
|
+
)
|
|
454
|
+
|
|
455
|
+
return digits.length
|
|
456
|
+
? replaced + digits.join('')
|
|
457
|
+
: phoneNumber.valid
|
|
458
|
+
? replaced.replace(/_/g, '')
|
|
459
|
+
: replaced
|
|
460
|
+
} else {
|
|
461
|
+
return phoneNumber.number
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
|
|
309
465
|
_getCallingCode(iso) {
|
|
310
466
|
return pathOr(
|
|
311
467
|
'',
|
|
@@ -314,11 +470,22 @@ export default {
|
|
|
314
470
|
)
|
|
315
471
|
},
|
|
316
472
|
|
|
473
|
+
_getCountries(includeIso) {
|
|
474
|
+
return Array.isArray(this.filterCountries) &&
|
|
475
|
+
this.filterCountries.length
|
|
476
|
+
? COUNTRIES.filter(
|
|
477
|
+
(country) =>
|
|
478
|
+
country.iso === includeIso ||
|
|
479
|
+
this.filterCountries.includes(country.iso)
|
|
480
|
+
)
|
|
481
|
+
: COUNTRIES
|
|
482
|
+
},
|
|
483
|
+
|
|
317
484
|
_emitInput(phoneNumber) {
|
|
318
485
|
if (phoneNumber.number === this.value) return
|
|
319
486
|
|
|
320
487
|
this.$emit('input', phoneNumber.number, {
|
|
321
|
-
isValid: phoneNumber.
|
|
488
|
+
isValid: phoneNumber.valid,
|
|
322
489
|
country: phoneNumber.country,
|
|
323
490
|
number: {
|
|
324
491
|
national: phoneNumber.format('NATIONAL'),
|
|
@@ -341,11 +508,24 @@ export default {
|
|
|
341
508
|
el.focus()
|
|
342
509
|
}
|
|
343
510
|
})
|
|
511
|
+
},
|
|
512
|
+
|
|
513
|
+
_setFocusToFirstDash(inputEl) {
|
|
514
|
+
const firstDashIndex = inputEl.value.indexOf('_')
|
|
515
|
+
const { selectionStart, selectionEnd } = inputEl
|
|
516
|
+
|
|
517
|
+
if (
|
|
518
|
+
firstDashIndex > -1 &&
|
|
519
|
+
(selectionStart > firstDashIndex ||
|
|
520
|
+
selectionEnd > firstDashIndex)
|
|
521
|
+
) {
|
|
522
|
+
inputEl.setSelectionRange(firstDashIndex, firstDashIndex)
|
|
523
|
+
}
|
|
344
524
|
}
|
|
345
525
|
}
|
|
346
526
|
}
|
|
347
527
|
</script>
|
|
348
528
|
|
|
349
529
|
<style lang="postcss">
|
|
350
|
-
@import '
|
|
530
|
+
@import '../../assets/css/flags.css';
|
|
351
531
|
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.47.2",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -76,8 +76,7 @@
|
|
|
76
76
|
"rambdax": "^7.2.0",
|
|
77
77
|
"tailwindcss": "^1.9.6",
|
|
78
78
|
"vue-currency-input": "^1.22.3",
|
|
79
|
-
"vue-i18n": "^8.14.0"
|
|
80
|
-
"world-flags-sprite": "^0.0.2"
|
|
79
|
+
"vue-i18n": "^8.14.0"
|
|
81
80
|
},
|
|
82
81
|
"devDependencies": {
|
|
83
82
|
"@babel/core": "^7.5.5",
|
|
@@ -124,5 +123,5 @@
|
|
|
124
123
|
"vue-template-compiler": "^2.6.10",
|
|
125
124
|
"webfonts-generator": "^0.4.0"
|
|
126
125
|
},
|
|
127
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "c64bac66e4adcf6156f9d3616c17590bacdf9d61"
|
|
128
127
|
}
|