@madgex/design-system 3.0.8 → 3.0.9

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 (57) hide show
  1. package/coverage/cobertura-coverage.xml +126 -96
  2. package/coverage/components/accordion/accordion.js.html +1 -1
  3. package/coverage/components/accordion/index.html +1 -1
  4. package/coverage/components/button/button.js.html +1 -1
  5. package/coverage/components/button/index.html +1 -1
  6. package/coverage/components/inputs/combobox/combobox.js.html +1 -1
  7. package/coverage/components/inputs/combobox/index.html +1 -1
  8. package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html +120 -36
  9. package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html +1 -1
  10. package/coverage/components/inputs/combobox/vue-components/index.html +19 -19
  11. package/coverage/components/inputs/file-upload/file-upload.js.html +1 -1
  12. package/coverage/components/inputs/file-upload/index.html +1 -1
  13. package/coverage/components/inputs/textarea/character-count.js.html +1 -1
  14. package/coverage/components/inputs/textarea/index.html +1 -1
  15. package/coverage/components/modal/index.html +1 -1
  16. package/coverage/components/modal/modal.js.html +1 -1
  17. package/coverage/components/notification/index.html +1 -1
  18. package/coverage/components/notification/notification.js.html +1 -1
  19. package/coverage/components/popover/index.html +1 -1
  20. package/coverage/components/popover/popover.js.html +1 -1
  21. package/coverage/components/switch-state/index.html +1 -1
  22. package/coverage/components/switch-state/switch-state.js.html +1 -1
  23. package/coverage/components/tabs/index.html +1 -1
  24. package/coverage/components/tabs/tabs.js.html +1 -1
  25. package/coverage/index.html +19 -19
  26. package/coverage/js/common.js.html +1 -1
  27. package/coverage/js/fractal-scripts/combobox.js.html +1 -1
  28. package/coverage/js/fractal-scripts/index.html +1 -1
  29. package/coverage/js/fractal-scripts/notification.js.html +1 -1
  30. package/coverage/js/fractal-scripts/switch-state.js.html +1 -1
  31. package/coverage/js/index-fractal.js.html +1 -1
  32. package/coverage/js/index-polyfills.js.html +1 -1
  33. package/coverage/js/index-vue.js.html +1 -1
  34. package/coverage/js/index.html +1 -1
  35. package/coverage/js/index.js.html +1 -1
  36. package/coverage/js/polyfills/arrayPrototypeFind.js.html +1 -1
  37. package/coverage/js/polyfills/closest.js.html +1 -1
  38. package/coverage/js/polyfills/index.html +1 -1
  39. package/coverage/js/polyfills/objectAssign.js.html +1 -1
  40. package/coverage/js/polyfills/remove.js.html +1 -1
  41. package/coverage/tokens/_config.js.html +1 -1
  42. package/coverage/tokens/index.html +1 -1
  43. package/dist/_tokens/css/_tokens.css +1 -1
  44. package/dist/_tokens/js/_tokens-module.js +1 -1
  45. package/dist/_tokens/scss/_tokens.scss +1 -1
  46. package/dist/js/index.js +1 -1
  47. package/package.json +1 -1
  48. package/src/components/inputs/_form-elements.scss +1 -1
  49. package/src/components/inputs/combobox/README.md +2 -2
  50. package/src/components/inputs/combobox/_template.njk +2 -10
  51. package/src/components/inputs/combobox/combobox.config.js +12 -2
  52. package/src/components/inputs/combobox/combobox.njk +0 -1
  53. package/src/components/inputs/combobox/vue-components/Combobox.vue +42 -14
  54. package/src/scss/core/_containers.scss +1 -1
  55. package/src/scss/functions/_px2rem.scss +1 -1
  56. package/src/scss/import.scss +1 -0
  57. package/src/scss/vendor/_sass-mq.scss +1 -1
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">65.63% </span>
26
+ <span class="strong">60.81% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/64</span>
28
+ <span class='fraction'>45/74</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">53.33% </span>
33
+ <span class="strong">50% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>16/30</span>
35
+ <span class='fraction'>17/34</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">70.97% </span>
40
+ <span class="strong">65.71% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>22/31</span>
42
+ <span class='fraction'>23/35</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">65.63% </span>
47
+ <span class="strong">60.81% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>42/64</span>
49
+ <span class='fraction'>45/74</span>
50
50
  </div>
51
51
 
52
52
 
@@ -292,7 +292,35 @@
292
292
  <a name='L233'></a><a href='#L233'>233</a>
293
293
  <a name='L234'></a><a href='#L234'>234</a>
294
294
  <a name='L235'></a><a href='#L235'>235</a>
295
- <a name='L236'></a><a href='#L236'>236</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
295
+ <a name='L236'></a><a href='#L236'>236</a>
296
+ <a name='L237'></a><a href='#L237'>237</a>
297
+ <a name='L238'></a><a href='#L238'>238</a>
298
+ <a name='L239'></a><a href='#L239'>239</a>
299
+ <a name='L240'></a><a href='#L240'>240</a>
300
+ <a name='L241'></a><a href='#L241'>241</a>
301
+ <a name='L242'></a><a href='#L242'>242</a>
302
+ <a name='L243'></a><a href='#L243'>243</a>
303
+ <a name='L244'></a><a href='#L244'>244</a>
304
+ <a name='L245'></a><a href='#L245'>245</a>
305
+ <a name='L246'></a><a href='#L246'>246</a>
306
+ <a name='L247'></a><a href='#L247'>247</a>
307
+ <a name='L248'></a><a href='#L248'>248</a>
308
+ <a name='L249'></a><a href='#L249'>249</a>
309
+ <a name='L250'></a><a href='#L250'>250</a>
310
+ <a name='L251'></a><a href='#L251'>251</a>
311
+ <a name='L252'></a><a href='#L252'>252</a>
312
+ <a name='L253'></a><a href='#L253'>253</a>
313
+ <a name='L254'></a><a href='#L254'>254</a>
314
+ <a name='L255'></a><a href='#L255'>255</a>
315
+ <a name='L256'></a><a href='#L256'>256</a>
316
+ <a name='L257'></a><a href='#L257'>257</a>
317
+ <a name='L258'></a><a href='#L258'>258</a>
318
+ <a name='L259'></a><a href='#L259'>259</a>
319
+ <a name='L260'></a><a href='#L260'>260</a>
320
+ <a name='L261'></a><a href='#L261'>261</a>
321
+ <a name='L262'></a><a href='#L262'>262</a>
322
+ <a name='L263'></a><a href='#L263'>263</a>
323
+ <a name='L264'></a><a href='#L264'>264</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
296
324
  <span class="cline-any cline-neutral">&nbsp;</span>
297
325
  <span class="cline-any cline-neutral">&nbsp;</span>
298
326
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -333,14 +361,15 @@
333
361
  <span class="cline-any cline-neutral">&nbsp;</span>
334
362
  <span class="cline-any cline-neutral">&nbsp;</span>
335
363
  <span class="cline-any cline-neutral">&nbsp;</span>
336
- <span class="cline-any cline-yes">1x</span>
337
- <span class="cline-any cline-yes">1x</span>
338
- <span class="cline-any cline-yes">1x</span>
339
364
  <span class="cline-any cline-neutral">&nbsp;</span>
340
365
  <span class="cline-any cline-neutral">&nbsp;</span>
341
366
  <span class="cline-any cline-neutral">&nbsp;</span>
342
367
  <span class="cline-any cline-neutral">&nbsp;</span>
343
368
  <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-yes">1x</span>
370
+ <span class="cline-any cline-yes">1x</span>
371
+ <span class="cline-any cline-yes">1x</span>
372
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
373
  <span class="cline-any cline-neutral">&nbsp;</span>
345
374
  <span class="cline-any cline-neutral">&nbsp;</span>
346
375
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -391,6 +420,9 @@
391
420
  <span class="cline-any cline-neutral">&nbsp;</span>
392
421
  <span class="cline-any cline-neutral">&nbsp;</span>
393
422
  <span class="cline-any cline-neutral">&nbsp;</span>
423
+ <span class="cline-any cline-neutral">&nbsp;</span>
424
+ <span class="cline-any cline-neutral">&nbsp;</span>
425
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
426
  <span class="cline-any cline-yes">5x</span>
395
427
  <span class="cline-any cline-neutral">&nbsp;</span>
396
428
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -401,6 +433,7 @@
401
433
  <span class="cline-any cline-yes">9x</span>
402
434
  <span class="cline-any cline-yes">1x</span>
403
435
  <span class="cline-any cline-neutral">&nbsp;</span>
436
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
437
  <span class="cline-any cline-yes">8x</span>
405
438
  <span class="cline-any cline-neutral">&nbsp;</span>
406
439
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -409,6 +442,9 @@
409
442
  <span class="cline-any cline-yes">3x</span>
410
443
  <span class="cline-any cline-yes">3x</span>
411
444
  <span class="cline-any cline-yes">3x</span>
445
+ <span class="cline-any cline-yes">3x</span>
446
+ <span class="cline-any cline-yes">2x</span>
447
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
448
  <span class="cline-any cline-neutral">&nbsp;</span>
413
449
  <span class="cline-any cline-neutral">&nbsp;</span>
414
450
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -429,9 +465,10 @@
429
465
  <span class="cline-any cline-yes">4x</span>
430
466
  <span class="cline-any cline-neutral">&nbsp;</span>
431
467
  <span class="cline-any cline-neutral">&nbsp;</span>
432
- <span class="cline-any cline-yes">8x</span>
433
- <span class="cline-any cline-yes">8x</span>
434
- <span class="cline-any cline-yes">21x</span>
468
+ <span class="cline-any cline-yes">9x</span>
469
+ <span class="cline-any cline-yes">9x</span>
470
+ <span class="cline-any cline-yes">24x</span>
471
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
472
  <span class="cline-any cline-neutral">&nbsp;</span>
436
473
  <span class="cline-any cline-yes">1x</span>
437
474
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -445,10 +482,15 @@
445
482
  <span class="cline-any cline-yes">5x</span>
446
483
  <span class="cline-any cline-neutral">&nbsp;</span>
447
484
  <span class="cline-any cline-neutral">&nbsp;</span>
485
+ <span class="cline-any cline-yes">5x</span>
486
+ <span class="cline-any cline-neutral">&nbsp;</span>
487
+ <span class="cline-any cline-neutral">&nbsp;</span>
448
488
  <span class="cline-any cline-yes">9x</span>
489
+ <span class="cline-any cline-neutral">&nbsp;</span>
449
490
  <span class="cline-any cline-yes">9x</span>
450
491
  <span class="cline-any cline-yes">1x</span>
451
492
  <span class="cline-any cline-neutral">&nbsp;</span>
493
+ <span class="cline-any cline-neutral">&nbsp;</span>
452
494
  <span class="cline-any cline-yes">8x</span>
453
495
  <span class="cline-any cline-neutral">&nbsp;</span>
454
496
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -458,12 +500,6 @@
458
500
  <span class="cline-any cline-no">&nbsp;</span>
459
501
  <span class="cline-any cline-neutral">&nbsp;</span>
460
502
  <span class="cline-any cline-neutral">&nbsp;</span>
461
- <span class="cline-any cline-yes">8x</span>
462
- <span class="cline-any cline-no">&nbsp;</span>
463
- <span class="cline-any cline-neutral">&nbsp;</span>
464
- <span class="cline-any cline-yes">8x</span>
465
- <span class="cline-any cline-neutral">&nbsp;</span>
466
- <span class="cline-any cline-neutral">&nbsp;</span>
467
503
  <span class="cline-any cline-neutral">&nbsp;</span>
468
504
  <span class="cline-any cline-yes">6x</span>
469
505
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -485,6 +521,12 @@
485
521
  <span class="cline-any cline-yes">2x</span>
486
522
  <span class="cline-any cline-neutral">&nbsp;</span>
487
523
  <span class="cline-any cline-neutral">&nbsp;</span>
524
+ <span class="cline-any cline-neutral">&nbsp;</span>
525
+ <span class="cline-any cline-no">&nbsp;</span>
526
+ <span class="cline-any cline-no">&nbsp;</span>
527
+ <span class="cline-any cline-no">&nbsp;</span>
528
+ <span class="cline-any cline-neutral">&nbsp;</span>
529
+ <span class="cline-any cline-neutral">&nbsp;</span>
488
530
  <span class="cline-any cline-yes">1x</span>
489
531
  <span class="cline-any cline-yes">1x</span>
490
532
  <span class="cline-any cline-yes">1x</span>
@@ -492,6 +534,7 @@
492
534
  <span class="cline-any cline-neutral">&nbsp;</span>
493
535
  <span class="cline-any cline-no">&nbsp;</span>
494
536
  <span class="cline-any cline-no">&nbsp;</span>
537
+ <span class="cline-any cline-no">&nbsp;</span>
495
538
  <span class="cline-any cline-neutral">&nbsp;</span>
496
539
  <span class="cline-any cline-neutral">&nbsp;</span>
497
540
  <span class="cline-any cline-no">&nbsp;</span>
@@ -499,11 +542,13 @@
499
542
  <span class="cline-any cline-neutral">&nbsp;</span>
500
543
  <span class="cline-any cline-neutral">&nbsp;</span>
501
544
  <span class="cline-any cline-no">&nbsp;</span>
545
+ <span class="cline-any cline-no">&nbsp;</span>
502
546
  <span class="cline-any cline-neutral">&nbsp;</span>
503
547
  <span class="cline-any cline-neutral">&nbsp;</span>
504
548
  <span class="cline-any cline-no">&nbsp;</span>
505
549
  <span class="cline-any cline-no">&nbsp;</span>
506
550
  <span class="cline-any cline-no">&nbsp;</span>
551
+ <span class="cline-any cline-neutral">&nbsp;</span>
507
552
  <span class="cline-any cline-no">&nbsp;</span>
508
553
  <span class="cline-any cline-no">&nbsp;</span>
509
554
  <span class="cline-any cline-no">&nbsp;</span>
@@ -513,6 +558,7 @@
513
558
  <span class="cline-any cline-no">&nbsp;</span>
514
559
  <span class="cline-any cline-no">&nbsp;</span>
515
560
  <span class="cline-any cline-no">&nbsp;</span>
561
+ <span class="cline-any cline-neutral">&nbsp;</span>
516
562
  <span class="cline-any cline-no">&nbsp;</span>
517
563
  <span class="cline-any cline-neutral">&nbsp;</span>
518
564
  <span class="cline-any cline-no">&nbsp;</span>
@@ -524,6 +570,16 @@
524
570
  <span class="cline-any cline-neutral">&nbsp;</span>
525
571
  <span class="cline-any cline-no">&nbsp;</span>
526
572
  <span class="cline-any cline-neutral">&nbsp;</span>
573
+ <span class="cline-any cline-yes">2x</span>
574
+ <span class="cline-any cline-yes">2x</span>
575
+ <span class="cline-any cline-no">&nbsp;</span>
576
+ <span class="cline-any cline-neutral">&nbsp;</span>
577
+ <span class="cline-any cline-no">&nbsp;</span>
578
+ <span class="cline-any cline-neutral">&nbsp;</span>
579
+ <span class="cline-any cline-neutral">&nbsp;</span>
580
+ <span class="cline-any cline-neutral">&nbsp;</span>
581
+ <span class="cline-any cline-no">&nbsp;</span>
582
+ <span class="cline-any cline-neutral">&nbsp;</span>
527
583
  <span class="cline-any cline-neutral">&nbsp;</span>
528
584
  <span class="cline-any cline-neutral">&nbsp;</span>
529
585
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -541,6 +597,7 @@
541
597
  &lt;ComboboxInput
542
598
  @change="handleChange"
543
599
  @blur="onInputBlur"
600
+ @focus="handleFocus"
544
601
  :id="comboboxid"
545
602
  :name="name"
546
603
  :placeholder="placeholder"
@@ -548,6 +605,7 @@
548
605
  :aria-expanded="ariaExpanded"
549
606
  :activeDescendent="selectedOptionId"
550
607
  :ariaInvalid="ariaInvalid"
608
+ :aria-describedby="describedBy"
551
609
  v-model="inputValue"
552
610
  /&gt;
553
611
  &lt;ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading" :comboboxid="comboboxid"&gt;
@@ -563,7 +621,10 @@
563
621
  /&gt;
564
622
  &lt;/template&gt;
565
623
  &lt;/ListBox&gt;
566
- &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;{{ resultCount }}&lt;/div&gt;
624
+ &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;{{ resultCountMessage }}&lt;/div&gt;
625
+ &lt;span :id="describedBy" style="display: none"&gt;
626
+ When autocomplete results are available use up and down arrows to review and enter to select.
627
+ &lt;/span&gt;
567
628
  &lt;/div&gt;
568
629
  &lt;/template&gt;
569
630
  &nbsp;
@@ -586,11 +647,7 @@ export default {
586
647
  },
587
648
  placeholder: {
588
649
  type: String,
589
- default: 'Please combobox',
590
- },
591
- resultmessage: {
592
- type: [String, Function],
593
- default: 'options available',
650
+ default: '',
594
651
  },
595
652
  name: {
596
653
  type: [String, Boolean],
@@ -623,6 +680,9 @@ export default {
623
680
  selected: null,
624
681
  chosen: null,
625
682
  searchValue: this.$props.value,
683
+ resultCountMessage: null,
684
+ resultMessage: 'result available',
685
+ resultMessage_plural: 'results available',
626
686
  };
627
687
  },
628
688
  provide() {
@@ -636,6 +696,7 @@ export default {
636
696
  if (this.chosenOption) {
637
697
  return this.chosenOption.label;
638
698
  }
699
+ &nbsp;
639
700
  return this.searchValue;
640
701
  },
641
702
  set(event) {
@@ -644,6 +705,9 @@ export default {
644
705
  <span class="branch-1 cbranch-no" title="branch not covered" > this.searchValue = event.target ? event.target.value : '';</span>
645
706
  this.handleChange();
646
707
  this.$emit('search', this.searchValue);
708
+ if (this.visibleOptions.length &gt; 0) {
709
+ this.updateCount();
710
+ }
647
711
  },
648
712
  },
649
713
  selectedOption: {
@@ -668,6 +732,7 @@ export default {
668
732
  if (this.filterOptions) {
669
733
  return this.options.filter((opt) =&gt; opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
670
734
  }
735
+ &nbsp;
671
736
  return this.options;
672
737
  },
673
738
  listBoxId() {
@@ -676,14 +741,19 @@ export default {
676
741
  optionId() {
677
742
  return `${this.comboboxid}-option`;
678
743
  },
744
+ describedBy() {
745
+ return `${this.comboboxid}-assistiveHint`;
746
+ },
679
747
  isLoading() {
680
748
  <span class="branch-1 cbranch-no" title="branch not covered" > return this.options.length === 0 &amp;&amp; this.expanded;</span>
681
749
  },
682
750
  selectedOptionId() {
683
751
  const index = this.visibleOptions.indexOf(this.selectedOption);
752
+ &nbsp;
684
753
  if (index &gt; -1) {
685
754
  return `${this.optionId}-${index}`;
686
755
  }
756
+ &nbsp;
687
757
  return false;
688
758
  },
689
759
  listBoxHidden() {
@@ -692,12 +762,6 @@ export default {
692
762
  <span class="fstat-no" title="function not covered" > lastOptionIndex() {</span>
693
763
  <span class="cstat-no" title="statement not covered" > return this.visibleOptions.length - 1;</span>
694
764
  },
695
- resultCount() {
696
- <span class="missing-if-branch" title="if path not taken" >I</span> if (typeof this.resultmessage === 'function') {
697
- <span class="cstat-no" title="statement not covered" > return this.resultmessage(this.visibleOptions.length);</span>
698
- }
699
- return `${this.visibleOptions.length} ${this.resultmessage}`;
700
- },
701
765
  ariaExpanded() {
702
766
  // These must be strings to apply as an aria attribute of the same name
703
767
  return this.expanded ? 'true' : 'false';
@@ -720,6 +784,12 @@ export default {
720
784
  this.makeInactive();
721
785
  }
722
786
  },
787
+ <span class="fstat-no" title="function not covered" > handleFocus() {</span>
788
+ <span class="cstat-no" title="statement not covered" > this.handleChange();</span>
789
+ <span class="cstat-no" title="statement not covered" > if (this.visibleOptions.length &gt; 1) {</span>
790
+ <span class="cstat-no" title="statement not covered" > this.updateCount();</span>
791
+ }
792
+ },
723
793
  clickOption(option = this.selectedOption) {
724
794
  this.chosenOption = option;
725
795
  this.makeInactive();
@@ -727,6 +797,7 @@ export default {
727
797
  <span class="fstat-no" title="function not covered" > chooseOption() {</span>
728
798
  <span class="cstat-no" title="statement not covered" > this.chosenOption = this.selectedOption;</span>
729
799
  <span class="cstat-no" title="statement not covered" > this.makeInactive();</span>
800
+ <span class="cstat-no" title="statement not covered" > this.clearCount();</span>
730
801
  },
731
802
  <span class="fstat-no" title="function not covered" > hiddenGuard(fn) {</span>
732
803
  <span class="cstat-no" title="statement not covered" > if (this.listBoxHidden) return;</span>
@@ -734,11 +805,13 @@ export default {
734
805
  },
735
806
  <span class="fstat-no" title="function not covered" > onInputBlur() {</span>
736
807
  <span class="cstat-no" title="statement not covered" > this.makeInactive();</span>
808
+ <span class="cstat-no" title="statement not covered" > this.clearCount();</span>
737
809
  },
738
810
  <span class="fstat-no" title="function not covered" > onKeyDown() {</span>
739
811
  <span class="cstat-no" title="statement not covered" > if (this.selectedOption) {</span>
740
812
  <span class="cstat-no" title="statement not covered" > const currentIndex = this.visibleOptions.indexOf(this.selectedOption);</span>
741
- <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === this.lastOptionIndex ? 0 : currentIndex + 1;</span>
813
+ <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === this.lastOptionIndex ? currentIndex : currentIndex + 1;</span>
814
+ &nbsp;
742
815
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[nextIndex];</span>
743
816
  <span class="cstat-no" title="statement not covered" > } else {</span>
744
817
  <span class="cstat-no" title="statement not covered" > [this.selectedOption] = this.visibleOptions;</span>
@@ -747,7 +820,8 @@ export default {
747
820
  <span class="fstat-no" title="function not covered" > onKeyUp() {</span>
748
821
  <span class="cstat-no" title="statement not covered" > if (this.selectedOption) {</span>
749
822
  <span class="cstat-no" title="statement not covered" > const currentIndex = this.visibleOptions.indexOf(this.selectedOption);</span>
750
- <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === 0 ? this.lastOptionIndex : currentIndex - 1;</span>
823
+ <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === 0 ? currentIndex : currentIndex - 1;</span>
824
+ &nbsp;
751
825
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[nextIndex];</span>
752
826
  } else {
753
827
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[this.lastOptionIndex];</span>
@@ -759,6 +833,16 @@ export default {
759
833
  <span class="fstat-no" title="function not covered" > onKeyEnd() {</span>
760
834
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[this.lastOptionIndex];</span>
761
835
  },
836
+ updateCount() {
837
+ <span class="fstat-no" title="function not covered" > setTimeout(() =&gt; {</span>
838
+ <span class="cstat-no" title="statement not covered" > const message = this.visibleOptions.length === 1 ? this.resultMessage_plural : this.resultMessage;</span>
839
+ &nbsp;
840
+ <span class="cstat-no" title="statement not covered" > this.resultCountMessage = `${this.visibleOptions.length} ${message}`;</span>
841
+ }, 1400);
842
+ },
843
+ <span class="fstat-no" title="function not covered" > clearCount() {</span>
844
+ <span class="cstat-no" title="statement not covered" > this.resultCountMessage = null;</span>
845
+ },
762
846
  },
763
847
  };
764
848
  &lt;/script&gt;
@@ -769,7 +853,7 @@ export default {
769
853
  <div class='footer quiet pad2 space-top1 center small'>
770
854
  Code coverage generated by
771
855
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
772
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
856
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
773
857
  </div>
774
858
  </div>
775
859
  <script src="../../../../prettify.js"></script>
@@ -214,7 +214,7 @@ export default {
214
214
  <div class='footer quiet pad2 space-top1 center small'>
215
215
  Code coverage generated by
216
216
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
217
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
217
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
218
218
  </div>
219
219
  </div>
220
220
  <script src="../../../../prettify.js"></script>
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">68.57% </span>
26
+ <span class="strong">63.75% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>48/70</span>
28
+ <span class='fraction'>51/80</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">53.13% </span>
33
+ <span class="strong">50% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>17/32</span>
35
+ <span class='fraction'>18/36</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">74.29% </span>
40
+ <span class="strong">69.23% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>26/35</span>
42
+ <span class='fraction'>27/39</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">68.57% </span>
47
+ <span class="strong">63.75% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>48/70</span>
49
+ <span class='fraction'>51/80</span>
50
50
  </div>
51
51
 
52
52
 
@@ -74,17 +74,17 @@
74
74
  </thead>
75
75
  <tbody><tr>
76
76
  <td class="file medium" data-value="Combobox.vue"><a href="Combobox.vue.html">Combobox.vue</a></td>
77
- <td data-value="65.63" class="pic medium">
78
- <div class="chart"><div class="cover-fill" style="width: 65%"></div><div class="cover-empty" style="width: 35%"></div></div>
77
+ <td data-value="60.81" class="pic medium">
78
+ <div class="chart"><div class="cover-fill" style="width: 60%"></div><div class="cover-empty" style="width: 40%"></div></div>
79
79
  </td>
80
- <td data-value="65.63" class="pct medium">65.63%</td>
81
- <td data-value="64" class="abs medium">42/64</td>
82
- <td data-value="53.33" class="pct medium">53.33%</td>
83
- <td data-value="30" class="abs medium">16/30</td>
84
- <td data-value="70.97" class="pct medium">70.97%</td>
85
- <td data-value="31" class="abs medium">22/31</td>
86
- <td data-value="65.63" class="pct medium">65.63%</td>
87
- <td data-value="64" class="abs medium">42/64</td>
80
+ <td data-value="60.81" class="pct medium">60.81%</td>
81
+ <td data-value="74" class="abs medium">45/74</td>
82
+ <td data-value="50" class="pct medium">50%</td>
83
+ <td data-value="34" class="abs medium">17/34</td>
84
+ <td data-value="65.71" class="pct medium">65.71%</td>
85
+ <td data-value="35" class="abs medium">23/35</td>
86
+ <td data-value="60.81" class="pct medium">60.81%</td>
87
+ <td data-value="74" class="abs medium">45/74</td>
88
88
  </tr>
89
89
 
90
90
  <tr>
@@ -110,7 +110,7 @@
110
110
  <div class='footer quiet pad2 space-top1 center small'>
111
111
  Code coverage generated by
112
112
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
113
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
113
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
114
114
  </div>
115
115
  </div>
116
116
  <script src="../../../../prettify.js"></script>
@@ -232,7 +232,7 @@ export default fileUpload;
232
232
  <div class='footer quiet pad2 space-top1 center small'>
233
233
  Code coverage generated by
234
234
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
235
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
235
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
236
236
  </div>
237
237
  </div>
238
238
  <script src="../../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../../prettify.js"></script>
@@ -184,7 +184,7 @@ export default characterCount;
184
184
  <div class='footer quiet pad2 space-top1 center small'>
185
185
  Code coverage generated by
186
186
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
187
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
187
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
188
188
  </div>
189
189
  </div>
190
190
  <script src="../../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
@@ -322,7 +322,7 @@ export default modals;
322
322
  <div class='footer quiet pad2 space-top1 center small'>
323
323
  Code coverage generated by
324
324
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
325
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
325
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
326
326
  </div>
327
327
  </div>
328
328
  <script src="../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
@@ -154,7 +154,7 @@ export default notification;
154
154
  <div class='footer quiet pad2 space-top1 center small'>
155
155
  Code coverage generated by
156
156
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
157
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
157
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
158
158
  </div>
159
159
  </div>
160
160
  <script src="../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
@@ -295,7 +295,7 @@ export default popovers;
295
295
  <div class='footer quiet pad2 space-top1 center small'>
296
296
  Code coverage generated by
297
297
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
298
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
298
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
299
299
  </div>
300
300
  </div>
301
301
  <script src="../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
@@ -100,7 +100,7 @@ export default switchState;
100
100
  <div class='footer quiet pad2 space-top1 center small'>
101
101
  Code coverage generated by
102
102
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
103
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
103
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
104
104
  </div>
105
105
  </div>
106
106
  <script src="../../prettify.js"></script>
@@ -95,7 +95,7 @@
95
95
  <div class='footer quiet pad2 space-top1 center small'>
96
96
  Code coverage generated by
97
97
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
98
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
98
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
@@ -544,7 +544,7 @@ export default tabs;
544
544
  <div class='footer quiet pad2 space-top1 center small'>
545
545
  Code coverage generated by
546
546
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
547
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
547
+ at Thu Aug 05 2021 11:34:37 GMT+0000 (Coordinated Universal Time)
548
548
  </div>
549
549
  </div>
550
550
  <script src="../../prettify.js"></script>