@awes-io/ui 2.47.1 → 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,17 @@
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
+
6
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)
7
18
 
8
19
 
@@ -17,7 +17,7 @@
17
17
  .flag {
18
18
  display: block !important;
19
19
  flex-shrink: 0;
20
- transform: scale(0.75);
20
+ transform: scale(0.5);
21
21
  }
22
22
  }
23
23
 
@@ -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; }
@@ -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,5 +1,5 @@
1
1
  <template>
2
- <div class="aw-tel f32" @focusout="_onBlur">
2
+ <div class="aw-tel" @focusout="_onBlur">
3
3
  <AwInput
4
4
  ref="input"
5
5
  v-bind="$attrs"
@@ -27,10 +27,7 @@
27
27
  @click="_openCountriesDropdown"
28
28
  >
29
29
  <span tabindex="-1" class="aw-tel__flag">
30
- <i
31
- class="flag"
32
- :class="(country || '').toLowerCase()"
33
- ></i>
30
+ <i class="flag" :class="country || 'NOWHERE'"></i>
34
31
  </span>
35
32
  </button>
36
33
  </template>
@@ -60,16 +57,16 @@
60
57
  >
61
58
  <template v-if="showCountries">
62
59
  <AwDropdownButton
63
- v-for="{ name, iso } in countries"
60
+ v-for="{ name, code, iso } in countries"
64
61
  :key="iso"
65
62
  :active="country === iso"
66
63
  :data-country="iso"
67
64
  tabindex="-1"
68
65
  >
69
66
  <span class="aw-tel__flag mr-3">
70
- <i class="flag" :class="iso.toLowerCase()"></i>
67
+ <i class="flag" :class="iso"></i>
71
68
  </span>
72
- {{ name }}
69
+ {{ name }} (+{{ code }})
73
70
  </AwDropdownButton>
74
71
  </template>
75
72
  </AwDropdown>
@@ -345,7 +342,7 @@ export default {
345
342
  },
346
343
 
347
344
  _onFocus($event) {
348
- this._setFocusToFirstDash($event.target)
345
+ setTimeout(this._setFocusToFirstDash, 5, $event.target)
349
346
  this.showCountries = false
350
347
  },
351
348
 
@@ -377,15 +374,21 @@ export default {
377
374
  },
378
375
 
379
376
  _onCountryClick($event) {
380
- this.country = getEventTargetAttribute(
377
+ const country = getEventTargetAttribute(
381
378
  $event,
382
379
  'data-country',
383
380
  this.$el
384
381
  )
385
- this.showCountries = false
386
382
 
387
- this.$refs.element.focus()
388
- this.$nextTick(() => this._setFocusToFirstDash(this.$refs.element))
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
+ }
389
392
  },
390
393
 
391
394
  _parsePhoneNumber(value = '', country) {
@@ -509,9 +512,13 @@ export default {
509
512
 
510
513
  _setFocusToFirstDash(inputEl) {
511
514
  const firstDashIndex = inputEl.value.indexOf('_')
512
- const pos = inputEl.selectionStart
515
+ const { selectionStart, selectionEnd } = inputEl
513
516
 
514
- if (firstDashIndex > -1 && pos > firstDashIndex) {
517
+ if (
518
+ firstDashIndex > -1 &&
519
+ (selectionStart > firstDashIndex ||
520
+ selectionEnd > firstDashIndex)
521
+ ) {
515
522
  inputEl.setSelectionRange(firstDashIndex, firstDashIndex)
516
523
  }
517
524
  }
@@ -520,5 +527,5 @@ export default {
520
527
  </script>
521
528
 
522
529
  <style lang="postcss">
523
- @import 'world-flags-sprite/stylesheets/flags32.css';
530
+ @import '../../assets/css/flags.css';
524
531
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.47.1",
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": "26e09a19ea345092e409c5f9fbb1e5e7fdcde157"
126
+ "gitHead": "c64bac66e4adcf6156f9d3616c17590bacdf9d61"
128
127
  }