@madgex/design-system 1.59.1 → 1.59.3

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.
Files changed (67) hide show
  1. package/__tests__/unit/src/components/combobox.spec.js +1 -1
  2. package/coverage/cobertura-coverage.xml +190 -151
  3. package/coverage/components/accordion/accordion.js.html +1 -1
  4. package/coverage/components/accordion/index.html +1 -1
  5. package/coverage/components/inputs/combobox/combobox.js.html +1 -1
  6. package/coverage/components/inputs/combobox/index.html +1 -1
  7. package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +68 -38
  8. package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html +5 -5
  9. package/coverage/components/inputs/combobox/vue-components/index.html +19 -19
  10. package/coverage/components/inputs/file-upload/file-upload.js.html +38 -89
  11. package/coverage/components/inputs/file-upload/index.html +7 -7
  12. package/coverage/components/inputs/multi-select/index.html +1 -1
  13. package/coverage/components/inputs/multi-select/multi-select.js.html +1 -1
  14. package/coverage/components/inputs/multi-select/vue-components/MultiSelect.vue.html +1 -1
  15. package/coverage/components/inputs/multi-select/vue-components/MultiSelectCheckbox.vue.html +1 -1
  16. package/coverage/components/inputs/multi-select/vue-components/MultiSelectCheckboxGroup.vue.html +1 -1
  17. package/coverage/components/inputs/multi-select/vue-components/index.html +1 -1
  18. package/coverage/components/inputs/textarea/character-count.js.html +1 -1
  19. package/coverage/components/inputs/textarea/index.html +1 -1
  20. package/coverage/components/modal/index.html +1 -1
  21. package/coverage/components/modal/modal.js.html +1 -1
  22. package/coverage/components/notification/index.html +1 -1
  23. package/coverage/components/notification/notification.js.html +1 -1
  24. package/coverage/components/popover/index.html +1 -1
  25. package/coverage/components/popover/popover.js.html +1 -1
  26. package/coverage/components/switch-state/index.html +1 -1
  27. package/coverage/components/switch-state/switch-state.js.html +1 -1
  28. package/coverage/components/tabs/index.html +1 -1
  29. package/coverage/components/tabs/tabs.js.html +1 -1
  30. package/coverage/index.html +25 -25
  31. package/coverage/js/common.js.html +1 -1
  32. package/coverage/js/fractal-scripts/combobox.js.html +1 -1
  33. package/coverage/js/fractal-scripts/index.html +1 -1
  34. package/coverage/js/fractal-scripts/notification.js.html +1 -1
  35. package/coverage/js/fractal-scripts/switch-state.js.html +1 -1
  36. package/coverage/js/index-fractal.js.html +1 -1
  37. package/coverage/js/index-polyfills.js.html +8 -2
  38. package/coverage/js/index-vue.js.html +1 -1
  39. package/coverage/js/index.html +1 -1
  40. package/coverage/js/index.js.html +2 -2
  41. package/coverage/js/polyfills/arrayPrototypeFind.js.html +217 -0
  42. package/coverage/js/polyfills/closest.js.html +1 -1
  43. package/coverage/js/polyfills/index.html +35 -5
  44. package/coverage/js/polyfills/objectAssign.js.html +169 -0
  45. package/coverage/js/polyfills/remove.js.html +1 -1
  46. package/coverage/tokens/_config.js.html +1 -1
  47. package/coverage/tokens/index.html +1 -1
  48. package/dist/_tokens/css/_tokens.css +1 -1
  49. package/dist/_tokens/js/_tokens-module.js +1 -1
  50. package/dist/_tokens/scss/_tokens.scss +1 -1
  51. package/dist/assets/icons.json +1 -1
  52. package/dist/css/index.css +1 -1
  53. package/dist/js/index.js +5 -5
  54. package/package.json +1 -1
  55. package/src/components/inputs/combobox/README.md +1 -0
  56. package/src/components/inputs/combobox/_template.njk +4 -4
  57. package/src/components/inputs/combobox/combobox.njk +2 -1
  58. package/src/components/inputs/combobox/combobox.scss +1 -0
  59. package/src/components/inputs/combobox/vue-components/Combobox.vue +16 -6
  60. package/src/components/inputs/file-upload/README.md +5 -3
  61. package/src/components/inputs/file-upload/_template.njk +1 -1
  62. package/src/components/inputs/file-upload/file-upload.js +32 -49
  63. package/src/components/inputs/file-upload/file-upload.scss +5 -5
  64. package/src/js/index-polyfills.js +2 -0
  65. package/src/js/index.js +1 -1
  66. package/src/js/polyfills/arrayPrototypeFind.js +46 -0
  67. package/src/js/polyfills/objectAssign.js +30 -0
package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html CHANGED
@@ -22,30 +22,30 @@
22
22
  <div class='clearfix'>
23
23
 
24
24
  <div class='fl pad1y space-right2'>
25
- <span class="strong">78.69% </span>
25
+ <span class="strong">79.69% </span>
26
26
  <span class="quiet">Statements</span>
27
- <span class='fraction'>48/61</span>
27
+ <span class='fraction'>51/64</span>
28
28
  </div>
29
29
 
30
30
 
31
31
  <div class='fl pad1y space-right2'>
32
- <span class="strong">57.69% </span>
32
+ <span class="strong">60.71% </span>
33
33
  <span class="quiet">Branches</span>
34
- <span class='fraction'>15/26</span>
34
+ <span class='fraction'>17/28</span>
35
35
  </div>
36
36
 
37
37
 
38
38
  <div class='fl pad1y space-right2'>
39
- <span class="strong">86.67% </span>
39
+ <span class="strong">87.1% </span>
40
40
  <span class="quiet">Functions</span>
41
- <span class='fraction'>26/30</span>
41
+ <span class='fraction'>27/31</span>
42
42
  </div>
43
43
 
44
44
 
45
45
  <div class='fl pad1y space-right2'>
46
- <span class="strong">78.69% </span>
46
+ <span class="strong">79.69% </span>
47
47
  <span class="quiet">Lines</span>
48
- <span class='fraction'>48/61</span>
48
+ <span class='fraction'>51/64</span>
49
49
  </div>
50
50
 
51
51
 
@@ -282,7 +282,20 @@
282
282
  <a name='L224'></a><a href='#L224'>224</a>
283
283
  <a name='L225'></a><a href='#L225'>225</a>
284
284
  <a name='L226'></a><a href='#L226'>226</a>
285
- <a name='L227'></a><a href='#L227'>227</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
285
+ <a name='L227'></a><a href='#L227'>227</a>
286
+ <a name='L228'></a><a href='#L228'>228</a>
287
+ <a name='L229'></a><a href='#L229'>229</a>
288
+ <a name='L230'></a><a href='#L230'>230</a>
289
+ <a name='L231'></a><a href='#L231'>231</a>
290
+ <a name='L232'></a><a href='#L232'>232</a>
291
+ <a name='L233'></a><a href='#L233'>233</a>
292
+ <a name='L234'></a><a href='#L234'>234</a>
293
+ <a name='L235'></a><a href='#L235'>235</a>
294
+ <a name='L236'></a><a href='#L236'>236</a>
295
+ <a name='L237'></a><a href='#L237'>237</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
296
+ <span class="cline-any cline-neutral">&nbsp;</span>
297
+ <span class="cline-any cline-neutral">&nbsp;</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
286
299
  <span class="cline-any cline-neutral">&nbsp;</span>
287
300
  <span class="cline-any cline-neutral">&nbsp;</span>
288
301
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -386,17 +399,17 @@
386
399
  <span class="cline-any cline-neutral">&nbsp;</span>
387
400
  <span class="cline-any cline-neutral">&nbsp;</span>
388
401
  <span class="cline-any cline-neutral">&nbsp;</span>
389
- <span class="cline-any cline-yes">16x</span>
402
+ <span class="cline-any cline-yes">17x</span>
390
403
  <span class="cline-any cline-yes">1x</span>
391
404
  <span class="cline-any cline-neutral">&nbsp;</span>
392
- <span class="cline-any cline-yes">15x</span>
405
+ <span class="cline-any cline-yes">16x</span>
393
406
  <span class="cline-any cline-neutral">&nbsp;</span>
394
407
  <span class="cline-any cline-neutral">&nbsp;</span>
395
408
  <span class="cline-any cline-neutral">&nbsp;</span>
396
- <span class="cline-any cline-yes">3x</span>
397
- <span class="cline-any cline-yes">3x</span>
398
- <span class="cline-any cline-yes">3x</span>
399
- <span class="cline-any cline-yes">3x</span>
409
+ <span class="cline-any cline-yes">4x</span>
410
+ <span class="cline-any cline-yes">4x</span>
411
+ <span class="cline-any cline-yes">4x</span>
412
+ <span class="cline-any cline-yes">4x</span>
400
413
  <span class="cline-any cline-neutral">&nbsp;</span>
401
414
  <span class="cline-any cline-neutral">&nbsp;</span>
402
415
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -404,7 +417,7 @@
404
417
  <span class="cline-any cline-yes">14x</span>
405
418
  <span class="cline-any cline-neutral">&nbsp;</span>
406
419
  <span class="cline-any cline-neutral">&nbsp;</span>
407
- <span class="cline-any cline-yes">7x</span>
420
+ <span class="cline-any cline-yes">8x</span>
408
421
  <span class="cline-any cline-neutral">&nbsp;</span>
409
422
  <span class="cline-any cline-neutral">&nbsp;</span>
410
423
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -412,14 +425,14 @@
412
425
  <span class="cline-any cline-yes">13x</span>
413
426
  <span class="cline-any cline-neutral">&nbsp;</span>
414
427
  <span class="cline-any cline-neutral">&nbsp;</span>
415
- <span class="cline-any cline-yes">4x</span>
416
- <span class="cline-any cline-yes">4x</span>
417
- <span class="cline-any cline-yes">4x</span>
428
+ <span class="cline-any cline-yes">5x</span>
429
+ <span class="cline-any cline-yes">5x</span>
430
+ <span class="cline-any cline-yes">5x</span>
418
431
  <span class="cline-any cline-neutral">&nbsp;</span>
419
432
  <span class="cline-any cline-neutral">&nbsp;</span>
420
- <span class="cline-any cline-yes">15x</span>
421
- <span class="cline-any cline-yes">15x</span>
422
- <span class="cline-any cline-yes">42x</span>
433
+ <span class="cline-any cline-yes">16x</span>
434
+ <span class="cline-any cline-yes">16x</span>
435
+ <span class="cline-any cline-yes">45x</span>
423
436
  <span class="cline-any cline-neutral">&nbsp;</span>
424
437
  <span class="cline-any cline-yes">1x</span>
425
438
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -436,35 +449,42 @@
436
449
  <span class="cline-any cline-yes">12x</span>
437
450
  <span class="cline-any cline-neutral">&nbsp;</span>
438
451
  <span class="cline-any cline-neutral">&nbsp;</span>
439
- <span class="cline-any cline-yes">17x</span>
440
- <span class="cline-any cline-yes">17x</span>
452
+ <span class="cline-any cline-yes">18x</span>
453
+ <span class="cline-any cline-yes">18x</span>
441
454
  <span class="cline-any cline-yes">2x</span>
442
455
  <span class="cline-any cline-neutral">&nbsp;</span>
443
- <span class="cline-any cline-yes">15x</span>
456
+ <span class="cline-any cline-yes">16x</span>
444
457
  <span class="cline-any cline-neutral">&nbsp;</span>
445
458
  <span class="cline-any cline-neutral">&nbsp;</span>
446
- <span class="cline-any cline-yes">17x</span>
459
+ <span class="cline-any cline-yes">14x</span>
447
460
  <span class="cline-any cline-neutral">&nbsp;</span>
448
461
  <span class="cline-any cline-neutral">&nbsp;</span>
449
462
  <span class="cline-any cline-yes">1x</span>
450
463
  <span class="cline-any cline-neutral">&nbsp;</span>
451
464
  <span class="cline-any cline-neutral">&nbsp;</span>
452
- <span class="cline-any cline-yes">15x</span>
465
+ <span class="cline-any cline-yes">16x</span>
453
466
  <span class="cline-any cline-no">&nbsp;</span>
454
467
  <span class="cline-any cline-neutral">&nbsp;</span>
455
- <span class="cline-any cline-yes">15x</span>
468
+ <span class="cline-any cline-yes">16x</span>
456
469
  <span class="cline-any cline-neutral">&nbsp;</span>
457
470
  <span class="cline-any cline-neutral">&nbsp;</span>
458
471
  <span class="cline-any cline-neutral">&nbsp;</span>
459
- <span class="cline-any cline-yes">17x</span>
472
+ <span class="cline-any cline-yes">14x</span>
460
473
  <span class="cline-any cline-neutral">&nbsp;</span>
461
474
  <span class="cline-any cline-neutral">&nbsp;</span>
462
475
  <span class="cline-any cline-neutral">&nbsp;</span>
463
476
  <span class="cline-any cline-neutral">&nbsp;</span>
464
- <span class="cline-any cline-yes">5x</span>
477
+ <span class="cline-any cline-yes">2x</span>
465
478
  <span class="cline-any cline-neutral">&nbsp;</span>
466
479
  <span class="cline-any cline-neutral">&nbsp;</span>
467
- <span class="cline-any cline-yes">1x</span>
480
+ <span class="cline-any cline-yes">3x</span>
481
+ <span class="cline-any cline-neutral">&nbsp;</span>
482
+ <span class="cline-any cline-neutral">&nbsp;</span>
483
+ <span class="cline-any cline-yes">4x</span>
484
+ <span class="cline-any cline-yes">2x</span>
485
+ <span class="cline-any cline-neutral">&nbsp;</span>
486
+ <span class="cline-any cline-yes">2x</span>
487
+ <span class="cline-any cline-neutral">&nbsp;</span>
468
488
  <span class="cline-any cline-neutral">&nbsp;</span>
469
489
  <span class="cline-any cline-yes">1x</span>
470
490
  <span class="cline-any cline-yes">1x</span>
@@ -520,7 +540,7 @@
520
540
  @keydown.enter.stop.prevent="chooseOption"
521
541
  &gt;
522
542
  &lt;ComboboxInput
523
- @focus="makeActive"
543
+ @change="handleChange"
524
544
  @blur="onInputBlur"
525
545
  :id="comboboxid"
526
546
  :name="name"
@@ -531,7 +551,12 @@
531
551
  :activeDescendent="selectedOptionId"
532
552
  v-model="inputValue"
533
553
  /&gt;
534
- &lt;ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden" :isLoading="isLoading"&gt;
554
+ &lt;ListBox
555
+ :id="listBoxId"
556
+ :aria-labelledby="labelId"
557
+ :hidden="listBoxHidden"
558
+ :isLoading="isLoading"
559
+ &gt;
535
560
  &lt;template&gt;
536
561
  &lt;ListBoxOption
537
562
  v-for="(option, index) in visibleOptions"
@@ -544,9 +569,7 @@
544
569
  /&gt;
545
570
  &lt;/template&gt;
546
571
  &lt;/ListBox&gt;
547
- &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;
548
- {{ resultCount }}
549
- &lt;/div&gt;
572
+ &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;{{ resultCount }}&lt;/div&gt;
550
573
  &lt;/div&gt;
551
574
  &lt;/template&gt;
552
575
  &nbsp;
@@ -621,7 +644,7 @@ export default {
621
644
  // Reset any chosen option if user is typing again
622
645
  this.chosenOption = null;
623
646
  <span class="branch-1 cbranch-no" title="branch not covered" > this.searchValue = event.target ? event.target.value : '';</span>
624
- this.makeActive();
647
+ this.handleChange();
625
648
  this.$emit('search', this.searchValue);
626
649
  },
627
650
  },
@@ -692,6 +715,13 @@ export default {
692
715
  makeInactive() {
693
716
  this.expanded = false;
694
717
  },
718
+ handleChange() {
719
+ if (this.searchValue.length &gt; 1) {
720
+ this.makeActive();
721
+ } else {
722
+ this.makeInactive();
723
+ }
724
+ },
695
725
  clickOption(option = this.selectedOption) {
696
726
  this.chosenOption = option;
697
727
  this.makeInactive();
@@ -741,7 +771,7 @@ export default {
741
771
  <div class='footer quiet pad2 space-top1 center small'>
742
772
  Code coverage generated by
743
773
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
744
- at Fri Sep 18 2020 10:56:25 GMT+0100 (British Summer Time)
774
+ at Mon Sep 21 2020 16:46:08 GMT+0100 (British Summer Time)
745
775
  </div>
746
776
  </div>
747
777
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html CHANGED
@@ -130,16 +130,16 @@
130
130
  <span class="cline-any cline-neutral">&nbsp;</span>
131
131
  <span class="cline-any cline-neutral">&nbsp;</span>
132
132
  <span class="cline-any cline-neutral">&nbsp;</span>
133
- <span class="cline-any cline-yes">3x</span>
133
+ <span class="cline-any cline-yes">4x</span>
134
134
  <span class="cline-any cline-neutral">&nbsp;</span>
135
135
  <span class="cline-any cline-neutral">&nbsp;</span>
136
136
  <span class="cline-any cline-neutral">&nbsp;</span>
137
137
  <span class="cline-any cline-neutral">&nbsp;</span>
138
- <span class="cline-any cline-yes">29x</span>
138
+ <span class="cline-any cline-yes">30x</span>
139
139
  <span class="cline-any cline-neutral">&nbsp;</span>
140
- <span class="cline-any cline-yes">106x</span>
140
+ <span class="cline-any cline-yes">104x</span>
141
141
  <span class="cline-any cline-neutral">&nbsp;</span>
142
- <span class="cline-any cline-yes">29x</span>
142
+ <span class="cline-any cline-yes">30x</span>
143
143
  <span class="cline-any cline-neutral">&nbsp;</span>
144
144
  <span class="cline-any cline-neutral">&nbsp;</span>
145
145
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -195,7 +195,7 @@ export default {
195
195
  <div class='footer quiet pad2 space-top1 center small'>
196
196
  Code coverage generated by
197
197
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
198
- at Fri Sep 18 2020 10:56:25 GMT+0100 (British Summer Time)
198
+ at Mon Sep 21 2020 16:46:08 GMT+0100 (British Summer Time)
199
199
  </div>
200
200
  </div>
201
201
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/combobox/vue-components/index.html CHANGED
@@ -22,30 +22,30 @@
22
22
  <div class='clearfix'>
23
23
 
24
24
  <div class='fl pad1y space-right2'>
25
- <span class="strong">80% </span>
25
+ <span class="strong">80.88% </span>
26
26
  <span class="quiet">Statements</span>
27
- <span class='fraction'>52/65</span>
27
+ <span class='fraction'>55/68</span>
28
28
  </div>
29
29
 
30
30
 
31
31
  <div class='fl pad1y space-right2'>
32
- <span class="strong">57.69% </span>
32
+ <span class="strong">60.71% </span>
33
33
  <span class="quiet">Branches</span>
34
- <span class='fraction'>15/26</span>
34
+ <span class='fraction'>17/28</span>
35
35
  </div>
36
36
 
37
37
 
38
38
  <div class='fl pad1y space-right2'>
39
- <span class="strong">87.88% </span>
39
+ <span class="strong">88.24% </span>
40
40
  <span class="quiet">Functions</span>
41
- <span class='fraction'>29/33</span>
41
+ <span class='fraction'>30/34</span>
42
42
  </div>
43
43
 
44
44
 
45
45
  <div class='fl pad1y space-right2'>
46
- <span class="strong">80% </span>
46
+ <span class="strong">80.88% </span>
47
47
  <span class="quiet">Lines</span>
48
- <span class='fraction'>52/65</span>
48
+ <span class='fraction'>55/68</span>
49
49
  </div>
50
50
 
51
51
 
@@ -73,17 +73,17 @@
73
73
  </thead>
74
74
  <tbody><tr>
75
75
  <td class="file medium" data-value="Combobox.vue"><a href="Combobox.vue.html">Combobox.vue</a></td>
76
- <td data-value="78.69" class="pic medium">
77
- <div class="chart"><div class="cover-fill" style="width: 78%"></div><div class="cover-empty" style="width: 22%"></div></div>
76
+ <td data-value="79.69" class="pic medium">
77
+ <div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
78
78
  </td>
79
- <td data-value="78.69" class="pct medium">78.69%</td>
80
- <td data-value="61" class="abs medium">48/61</td>
81
- <td data-value="57.69" class="pct medium">57.69%</td>
82
- <td data-value="26" class="abs medium">15/26</td>
83
- <td data-value="86.67" class="pct high">86.67%</td>
84
- <td data-value="30" class="abs high">26/30</td>
85
- <td data-value="78.69" class="pct medium">78.69%</td>
86
- <td data-value="61" class="abs medium">48/61</td>
79
+ <td data-value="79.69" class="pct medium">79.69%</td>
80
+ <td data-value="64" class="abs medium">51/64</td>
81
+ <td data-value="60.71" class="pct medium">60.71%</td>
82
+ <td data-value="28" class="abs medium">17/28</td>
83
+ <td data-value="87.1" class="pct high">87.1%</td>
84
+ <td data-value="31" class="abs high">27/31</td>
85
+ <td data-value="79.69" class="pct medium">79.69%</td>
86
+ <td data-value="64" class="abs medium">51/64</td>
87
87
  </tr>
88
88
 
89
89
  <tr>
@@ -109,7 +109,7 @@
109
109
  <div class='footer quiet pad2 space-top1 center small'>
110
110
  Code coverage generated by
111
111
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
112
- at Fri Sep 18 2020 10:56:25 GMT+0100 (British Summer Time)
112
+ at Mon Sep 21 2020 16:46:08 GMT+0100 (British Summer Time)
113
113
  </div>
114
114
  </div>
115
115
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/file-upload/file-upload.js.html CHANGED
@@ -24,7 +24,7 @@
24
24
  <div class='fl pad1y space-right2'>
25
25
  <span class="strong">0% </span>
26
26
  <span class="quiet">Statements</span>
27
- <span class='fraction'>0/40</span>
27
+ <span class='fraction'>0/31</span>
28
28
  </div>
29
29
 
30
30
 
@@ -38,14 +38,14 @@
38
38
  <div class='fl pad1y space-right2'>
39
39
  <span class="strong">0% </span>
40
40
  <span class="quiet">Functions</span>
41
- <span class='fraction'>0/10</span>
41
+ <span class='fraction'>0/8</span>
42
42
  </div>
43
43
 
44
44
 
45
45
  <div class='fl pad1y space-right2'>
46
46
  <span class="strong">0% </span>
47
47
  <span class="quiet">Lines</span>
48
- <span class='fraction'>0/40</span>
48
+ <span class='fraction'>0/31</span>
49
49
  </div>
50
50
 
51
51
 
@@ -108,85 +108,51 @@
108
108
  <a name='L50'></a><a href='#L50'>50</a>
109
109
  <a name='L51'></a><a href='#L51'>51</a>
110
110
  <a name='L52'></a><a href='#L52'>52</a>
111
- <a name='L53'></a><a href='#L53'>53</a>
112
- <a name='L54'></a><a href='#L54'>54</a>
113
- <a name='L55'></a><a href='#L55'>55</a>
114
- <a name='L56'></a><a href='#L56'>56</a>
115
- <a name='L57'></a><a href='#L57'>57</a>
116
- <a name='L58'></a><a href='#L58'>58</a>
117
- <a name='L59'></a><a href='#L59'>59</a>
118
- <a name='L60'></a><a href='#L60'>60</a>
119
- <a name='L61'></a><a href='#L61'>61</a>
120
- <a name='L62'></a><a href='#L62'>62</a>
121
- <a name='L63'></a><a href='#L63'>63</a>
122
- <a name='L64'></a><a href='#L64'>64</a>
123
- <a name='L65'></a><a href='#L65'>65</a>
124
- <a name='L66'></a><a href='#L66'>66</a>
125
- <a name='L67'></a><a href='#L67'>67</a>
126
- <a name='L68'></a><a href='#L68'>68</a>
127
- <a name='L69'></a><a href='#L69'>69</a>
128
- <a name='L70'></a><a href='#L70'>70</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
111
+ <a name='L53'></a><a href='#L53'>53</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
129
112
  <span class="cline-any cline-no">&nbsp;</span>
130
113
  <span class="cline-any cline-no">&nbsp;</span>
131
114
  <span class="cline-any cline-no">&nbsp;</span>
132
115
  <span class="cline-any cline-no">&nbsp;</span>
133
- <span class="cline-any cline-neutral">&nbsp;</span>
134
116
  <span class="cline-any cline-no">&nbsp;</span>
135
117
  <span class="cline-any cline-neutral">&nbsp;</span>
136
118
  <span class="cline-any cline-no">&nbsp;</span>
137
- <span class="cline-any cline-no">&nbsp;</span>
138
- <span class="cline-any cline-no">&nbsp;</span>
139
- <span class="cline-any cline-no">&nbsp;</span>
119
+ <span class="cline-any cline-neutral">&nbsp;</span>
140
120
  <span class="cline-any cline-no">&nbsp;</span>
141
121
  <span class="cline-any cline-no">&nbsp;</span>
142
122
  <span class="cline-any cline-neutral">&nbsp;</span>
143
- <span class="cline-any cline-neutral">&nbsp;</span>
144
123
  <span class="cline-any cline-no">&nbsp;</span>
145
124
  <span class="cline-any cline-no">&nbsp;</span>
146
125
  <span class="cline-any cline-neutral">&nbsp;</span>
147
- <span class="cline-any cline-neutral">&nbsp;</span>
148
126
  <span class="cline-any cline-no">&nbsp;</span>
149
127
  <span class="cline-any cline-no">&nbsp;</span>
150
128
  <span class="cline-any cline-no">&nbsp;</span>
151
129
  <span class="cline-any cline-neutral">&nbsp;</span>
152
- <span class="cline-any cline-neutral">&nbsp;</span>
153
- <span class="cline-any cline-neutral">&nbsp;</span>
154
- <span class="cline-any cline-no">&nbsp;</span>
155
130
  <span class="cline-any cline-no">&nbsp;</span>
156
131
  <span class="cline-any cline-no">&nbsp;</span>
157
132
  <span class="cline-any cline-no">&nbsp;</span>
158
133
  <span class="cline-any cline-no">&nbsp;</span>
159
134
  <span class="cline-any cline-neutral">&nbsp;</span>
160
135
  <span class="cline-any cline-neutral">&nbsp;</span>
136
+ <span class="cline-any cline-neutral">&nbsp;</span>
161
137
  <span class="cline-any cline-no">&nbsp;</span>
162
138
  <span class="cline-any cline-no">&nbsp;</span>
163
139
  <span class="cline-any cline-no">&nbsp;</span>
164
140
  <span class="cline-any cline-no">&nbsp;</span>
165
- <span class="cline-any cline-neutral">&nbsp;</span>
166
141
  <span class="cline-any cline-no">&nbsp;</span>
167
142
  <span class="cline-any cline-neutral">&nbsp;</span>
168
143
  <span class="cline-any cline-neutral">&nbsp;</span>
169
- <span class="cline-any cline-neutral">&nbsp;</span>
170
144
  <span class="cline-any cline-no">&nbsp;</span>
171
145
  <span class="cline-any cline-no">&nbsp;</span>
172
146
  <span class="cline-any cline-no">&nbsp;</span>
173
147
  <span class="cline-any cline-no">&nbsp;</span>
174
148
  <span class="cline-any cline-neutral">&nbsp;</span>
175
- <span class="cline-any cline-no">&nbsp;</span>
176
- <span class="cline-any cline-neutral">&nbsp;</span>
177
149
  <span class="cline-any cline-neutral">&nbsp;</span>
178
150
  <span class="cline-any cline-neutral">&nbsp;</span>
179
151
  <span class="cline-any cline-no">&nbsp;</span>
180
152
  <span class="cline-any cline-no">&nbsp;</span>
181
153
  <span class="cline-any cline-no">&nbsp;</span>
182
- <span class="cline-any cline-neutral">&nbsp;</span>
183
- <span class="cline-any cline-no">&nbsp;</span>
184
- <span class="cline-any cline-neutral">&nbsp;</span>
185
154
  <span class="cline-any cline-no">&nbsp;</span>
186
155
  <span class="cline-any cline-neutral">&nbsp;</span>
187
- <span class="cline-any cline-no">&nbsp;</span>
188
- <span class="cline-any cline-no">&nbsp;</span>
189
- <span class="cline-any cline-no">&nbsp;</span>
190
156
  <span class="cline-any cline-neutral">&nbsp;</span>
191
157
  <span class="cline-any cline-neutral">&nbsp;</span>
192
158
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -199,65 +165,48 @@ const selectedFileClass = <span class="cstat-no" title="statement not covered" >
199
165
  const dragOverClass = <span class="cstat-no" title="statement not covered" >'mds-form-element--dragover';</span>
200
166
  const fileNameContainerClass = <span class="cstat-no" title="statement not covered" >'.mds-file-upload__file-name';</span>
201
167
  const removeButtonClass = <span class="cstat-no" title="statement not covered" >'.mds-file-upload__remove-button';</span>
168
+ const supportedClass = <span class="cstat-no" title="statement not covered" >'mds-form-element--file-supported';</span>
202
169
  &nbsp;
203
170
  const fileUpload = <span class="cstat-no" title="statement not covered" >{</span>
204
171
  init: <span class="fstat-no" title="function not covered" >()</span> =&gt; {
205
172
  const fileUploads = <span class="cstat-no" title="statement not covered" >Array.from(document.querySelectorAll(fileUploadClass));</span>
206
173
  <span class="cstat-no" title="statement not covered" > fileUploads.forEach(<span class="fstat-no" title="function not covered" >(u</span>ploader) =&gt; {</span>
207
- const fileNameContainer = <span class="cstat-no" title="statement not covered" >uploader.querySelector(fileNameContainerClass);</span>
208
- const input = <span class="cstat-no" title="statement not covered" >uploader.querySelector('input[type=file]');</span>
209
- const removeButton = <span class="cstat-no" title="statement not covered" >uploader.querySelector(removeButtonClass);</span>
210
- let droppedFiles = <span class="cstat-no" title="statement not covered" >null;</span>
211
- &nbsp;
212
- function <span class="fstat-no" title="function not covered" >showFiles(</span>file) {
213
- <span class="cstat-no" title="statement not covered" > fileNameContainer.textContent = file[0].name;</span>
214
- <span class="cstat-no" title="statement not covered" > uploader.classList.add(selectedFileClass);</span>
215
- }
216
- &nbsp;
217
- <span class="cstat-no" title="statement not covered" > input.addEventListener('change', <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
218
- <span class="cstat-no" title="statement not covered" > if (input.files &amp;&amp; input.files.length) {</span>
219
- <span class="cstat-no" title="statement not covered" > showFiles(input.files);</span>
220
- }
221
- });
222
- &nbsp;
223
- <span class="cstat-no" title="statement not covered" > removeButton.addEventListener('click', <span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; {</span>
224
- <span class="cstat-no" title="statement not covered" > elem.preventDefault();</span>
225
- <span class="cstat-no" title="statement not covered" > input.value = '';</span>
226
- <span class="cstat-no" title="statement not covered" > fileNameContainer.textContent = '';</span>
227
- <span class="cstat-no" title="statement not covered" > uploader.classList.remove(selectedFileClass);</span>
228
- });
174
+ // fallback for IE
175
+ <span class="cstat-no" title="statement not covered" > if (window.document.documentMode) {</span>
176
+ <span class="cstat-no" title="statement not covered" > uploader.classList.remove(supportedClass);</span>
177
+ } else {
178
+ const fileNameContainer = <span class="cstat-no" title="statement not covered" >uploader.querySelector(fileNameContainerClass);</span>
179
+ const input = <span class="cstat-no" title="statement not covered" >uploader.querySelector('input[type=file]');</span>
180
+ const removeButton = <span class="cstat-no" title="statement not covered" >uploader.querySelector(removeButtonClass);</span>
229
181
  &nbsp;
230
- <span class="cstat-no" title="statement not covered" > ['dragover', 'dragenter'].forEach(<span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
231
- <span class="cstat-no" title="statement not covered" > input.addEventListener(event, <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
232
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
233
- <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
234
- &nbsp;
235
- <span class="cstat-no" title="statement not covered" > uploader.classList.add(dragOverClass);</span>
182
+ <span class="cstat-no" title="statement not covered" > input.addEventListener('change', <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
183
+ <span class="cstat-no" title="statement not covered" > if (input.files &amp;&amp; input.files.length) {</span>
184
+ <span class="cstat-no" title="statement not covered" > fileNameContainer.textContent = input.files[0].name;</span>
185
+ <span class="cstat-no" title="statement not covered" > uploader.classList.add(selectedFileClass);</span>
186
+ }
236
187
  });
237
- });
238
- &nbsp;
239
- <span class="cstat-no" title="statement not covered" > ['dragleave', 'dragend'].forEach(<span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
240
- <span class="cstat-no" title="statement not covered" > input.addEventListener(event, <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
241
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
242
- <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
243
188
  &nbsp;
244
- <span class="cstat-no" title="statement not covered" > uploader.classList.remove(dragOverClass);</span>
189
+ <span class="cstat-no" title="statement not covered" > removeButton.addEventListener('click', <span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; {</span>
190
+ <span class="cstat-no" title="statement not covered" > elem.preventDefault();</span>
191
+ <span class="cstat-no" title="statement not covered" > input.value = '';</span>
192
+ <span class="cstat-no" title="statement not covered" > fileNameContainer.textContent = '';</span>
193
+ <span class="cstat-no" title="statement not covered" > uploader.classList.remove(selectedFileClass);</span>
245
194
  });
246
- });
247
- &nbsp;
248
- <span class="cstat-no" title="statement not covered" > input.addEventListener('drop', <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
249
- <span class="cstat-no" title="statement not covered" > e.preventDefault();</span>
250
- <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
251
- &nbsp;
252
- <span class="cstat-no" title="statement not covered" > uploader.classList.remove(dragOverClass);</span>
253
195
  &nbsp;
254
- <span class="cstat-no" title="statement not covered" > droppedFiles = e.dataTransfer.files;</span>
196
+ <span class="cstat-no" title="statement not covered" > ['dragover', 'dragenter'].forEach(<span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
197
+ <span class="cstat-no" title="statement not covered" > input.addEventListener(event, <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
198
+ <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
199
+ <span class="cstat-no" title="statement not covered" > uploader.classList.add(dragOverClass);</span>
200
+ });
201
+ });
255
202
  &nbsp;
256
- <span class="cstat-no" title="statement not covered" > if (droppedFiles) {</span>
257
- <span class="cstat-no" title="statement not covered" > input.files = droppedFiles;</span>
258
- <span class="cstat-no" title="statement not covered" > showFiles(droppedFiles);</span>
259
- }
260
- });
203
+ <span class="cstat-no" title="statement not covered" > ['dragleave', 'dragend', 'drop'].forEach(<span class="fstat-no" title="function not covered" >(e</span>vent) =&gt; {</span>
204
+ <span class="cstat-no" title="statement not covered" > input.addEventListener(event, <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
205
+ <span class="cstat-no" title="statement not covered" > e.stopPropagation();</span>
206
+ <span class="cstat-no" title="statement not covered" > uploader.classList.remove(dragOverClass);</span>
207
+ });
208
+ });
209
+ }
261
210
  });
262
211
  },
263
212
  };
@@ -270,7 +219,7 @@ export default fileUpload;
270
219
  <div class='footer quiet pad2 space-top1 center small'>
271
220
  Code coverage generated by
272
221
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
273
- at Fri Sep 18 2020 10:56:25 GMT+0100 (British Summer Time)
222
+ at Mon Sep 21 2020 16:46:08 GMT+0100 (British Summer Time)
274
223
  </div>
275
224
  </div>
276
225
  <script src="../../../prettify.js"></script>
package/coverage/components/inputs/file-upload/index.html CHANGED
@@ -24,7 +24,7 @@
24
24
  <div class='fl pad1y space-right2'>
25
25
  <span class="strong">0% </span>
26
26
  <span class="quiet">Statements</span>
27
- <span class='fraction'>0/40</span>
27
+ <span class='fraction'>0/31</span>
28
28
  </div>
29
29
 
30
30
 
@@ -38,14 +38,14 @@
38
38
  <div class='fl pad1y space-right2'>
39
39
  <span class="strong">0% </span>
40
40
  <span class="quiet">Functions</span>
41
- <span class='fraction'>0/10</span>
41
+ <span class='fraction'>0/8</span>
42
42
  </div>
43
43
 
44
44
 
45
45
  <div class='fl pad1y space-right2'>
46
46
  <span class="strong">0% </span>
47
47
  <span class="quiet">Lines</span>
48
- <span class='fraction'>0/40</span>
48
+ <span class='fraction'>0/31</span>
49
49
  </div>
50
50
 
51
51
 
@@ -77,13 +77,13 @@
77
77
  <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
78
78
  </td>
79
79
  <td data-value="0" class="pct low">0%</td>
80
- <td data-value="40" class="abs low">0/40</td>
80
+ <td data-value="31" class="abs low">0/31</td>
81
81
  <td data-value="0" class="pct low">0%</td>
82
82
  <td data-value="6" class="abs low">0/6</td>
83
83
  <td data-value="0" class="pct low">0%</td>
84
- <td data-value="10" class="abs low">0/10</td>
84
+ <td data-value="8" class="abs low">0/8</td>
85
85
  <td data-value="0" class="pct low">0%</td>
86
- <td data-value="40" class="abs low">0/40</td>
86
+ <td data-value="31" class="abs low">0/31</td>
87
87
  </tr>
88
88
 
89
89
  </tbody>
@@ -94,7 +94,7 @@
94
94
  <div class='footer quiet pad2 space-top1 center small'>
95
95
  Code coverage generated by
96
96
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
97
- at Fri Sep 18 2020 10:56:25 GMT+0100 (British Summer Time)
97
+ at Mon Sep 21 2020 16:46:08 GMT+0100 (British Summer Time)
98
98
  </div>
99
99
  </div>
100
100
  <script src="../../../prettify.js"></script>