@madgex/design-system 3.0.8 → 3.0.10

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 +127 -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 +123 -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 +43 -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
package/coverage/components/inputs/combobox/vue-components/Combobox.vue.html CHANGED
@@ -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">62.67% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>42/64</span>
28
+ <span class='fraction'>47/75</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">68.57% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>22/31</span>
42
+ <span class='fraction'>24/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">62.67% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>42/64</span>
49
+ <span class='fraction'>47/75</span>
50
50
  </div>
51
51
 
52
52
 
@@ -292,7 +292,36 @@
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>
324
+ <a name='L265'></a><a href='#L265'>265</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
296
325
  <span class="cline-any cline-neutral">&nbsp;</span>
297
326
  <span class="cline-any cline-neutral">&nbsp;</span>
298
327
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -333,14 +362,15 @@
333
362
  <span class="cline-any cline-neutral">&nbsp;</span>
334
363
  <span class="cline-any cline-neutral">&nbsp;</span>
335
364
  <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
365
  <span class="cline-any cline-neutral">&nbsp;</span>
340
366
  <span class="cline-any cline-neutral">&nbsp;</span>
341
367
  <span class="cline-any cline-neutral">&nbsp;</span>
342
368
  <span class="cline-any cline-neutral">&nbsp;</span>
343
369
  <span class="cline-any cline-neutral">&nbsp;</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-yes">1x</span>
373
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
374
  <span class="cline-any cline-neutral">&nbsp;</span>
345
375
  <span class="cline-any cline-neutral">&nbsp;</span>
346
376
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -391,6 +421,9 @@
391
421
  <span class="cline-any cline-neutral">&nbsp;</span>
392
422
  <span class="cline-any cline-neutral">&nbsp;</span>
393
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>
426
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
427
  <span class="cline-any cline-yes">5x</span>
395
428
  <span class="cline-any cline-neutral">&nbsp;</span>
396
429
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -401,6 +434,7 @@
401
434
  <span class="cline-any cline-yes">9x</span>
402
435
  <span class="cline-any cline-yes">1x</span>
403
436
  <span class="cline-any cline-neutral">&nbsp;</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
438
  <span class="cline-any cline-yes">8x</span>
405
439
  <span class="cline-any cline-neutral">&nbsp;</span>
406
440
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -409,6 +443,9 @@
409
443
  <span class="cline-any cline-yes">3x</span>
410
444
  <span class="cline-any cline-yes">3x</span>
411
445
  <span class="cline-any cline-yes">3x</span>
446
+ <span class="cline-any cline-yes">3x</span>
447
+ <span class="cline-any cline-yes">2x</span>
448
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
449
  <span class="cline-any cline-neutral">&nbsp;</span>
413
450
  <span class="cline-any cline-neutral">&nbsp;</span>
414
451
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -429,9 +466,10 @@
429
466
  <span class="cline-any cline-yes">4x</span>
430
467
  <span class="cline-any cline-neutral">&nbsp;</span>
431
468
  <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>
469
+ <span class="cline-any cline-yes">9x</span>
470
+ <span class="cline-any cline-yes">9x</span>
471
+ <span class="cline-any cline-yes">24x</span>
472
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
473
  <span class="cline-any cline-neutral">&nbsp;</span>
436
474
  <span class="cline-any cline-yes">1x</span>
437
475
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -445,10 +483,15 @@
445
483
  <span class="cline-any cline-yes">5x</span>
446
484
  <span class="cline-any cline-neutral">&nbsp;</span>
447
485
  <span class="cline-any cline-neutral">&nbsp;</span>
486
+ <span class="cline-any cline-yes">5x</span>
487
+ <span class="cline-any cline-neutral">&nbsp;</span>
488
+ <span class="cline-any cline-neutral">&nbsp;</span>
448
489
  <span class="cline-any cline-yes">9x</span>
490
+ <span class="cline-any cline-neutral">&nbsp;</span>
449
491
  <span class="cline-any cline-yes">9x</span>
450
492
  <span class="cline-any cline-yes">1x</span>
451
493
  <span class="cline-any cline-neutral">&nbsp;</span>
494
+ <span class="cline-any cline-neutral">&nbsp;</span>
452
495
  <span class="cline-any cline-yes">8x</span>
453
496
  <span class="cline-any cline-neutral">&nbsp;</span>
454
497
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -458,12 +501,6 @@
458
501
  <span class="cline-any cline-no">&nbsp;</span>
459
502
  <span class="cline-any cline-neutral">&nbsp;</span>
460
503
  <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
504
  <span class="cline-any cline-neutral">&nbsp;</span>
468
505
  <span class="cline-any cline-yes">6x</span>
469
506
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -485,6 +522,12 @@
485
522
  <span class="cline-any cline-yes">2x</span>
486
523
  <span class="cline-any cline-neutral">&nbsp;</span>
487
524
  <span class="cline-any cline-neutral">&nbsp;</span>
525
+ <span class="cline-any cline-neutral">&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-no">&nbsp;</span>
529
+ <span class="cline-any cline-neutral">&nbsp;</span>
530
+ <span class="cline-any cline-neutral">&nbsp;</span>
488
531
  <span class="cline-any cline-yes">1x</span>
489
532
  <span class="cline-any cline-yes">1x</span>
490
533
  <span class="cline-any cline-yes">1x</span>
@@ -492,6 +535,7 @@
492
535
  <span class="cline-any cline-neutral">&nbsp;</span>
493
536
  <span class="cline-any cline-no">&nbsp;</span>
494
537
  <span class="cline-any cline-no">&nbsp;</span>
538
+ <span class="cline-any cline-no">&nbsp;</span>
495
539
  <span class="cline-any cline-neutral">&nbsp;</span>
496
540
  <span class="cline-any cline-neutral">&nbsp;</span>
497
541
  <span class="cline-any cline-no">&nbsp;</span>
@@ -499,11 +543,13 @@
499
543
  <span class="cline-any cline-neutral">&nbsp;</span>
500
544
  <span class="cline-any cline-neutral">&nbsp;</span>
501
545
  <span class="cline-any cline-no">&nbsp;</span>
546
+ <span class="cline-any cline-no">&nbsp;</span>
502
547
  <span class="cline-any cline-neutral">&nbsp;</span>
503
548
  <span class="cline-any cline-neutral">&nbsp;</span>
504
549
  <span class="cline-any cline-no">&nbsp;</span>
505
550
  <span class="cline-any cline-no">&nbsp;</span>
506
551
  <span class="cline-any cline-no">&nbsp;</span>
552
+ <span class="cline-any cline-neutral">&nbsp;</span>
507
553
  <span class="cline-any cline-no">&nbsp;</span>
508
554
  <span class="cline-any cline-no">&nbsp;</span>
509
555
  <span class="cline-any cline-no">&nbsp;</span>
@@ -513,6 +559,7 @@
513
559
  <span class="cline-any cline-no">&nbsp;</span>
514
560
  <span class="cline-any cline-no">&nbsp;</span>
515
561
  <span class="cline-any cline-no">&nbsp;</span>
562
+ <span class="cline-any cline-neutral">&nbsp;</span>
516
563
  <span class="cline-any cline-no">&nbsp;</span>
517
564
  <span class="cline-any cline-neutral">&nbsp;</span>
518
565
  <span class="cline-any cline-no">&nbsp;</span>
@@ -524,6 +571,17 @@
524
571
  <span class="cline-any cline-neutral">&nbsp;</span>
525
572
  <span class="cline-any cline-no">&nbsp;</span>
526
573
  <span class="cline-any cline-neutral">&nbsp;</span>
574
+ <span class="cline-any cline-yes">2x</span>
575
+ <span class="cline-any cline-yes">2x</span>
576
+ <span class="cline-any cline-yes">2x</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-no">&nbsp;</span>
580
+ <span class="cline-any cline-neutral">&nbsp;</span>
581
+ <span class="cline-any cline-neutral">&nbsp;</span>
582
+ <span class="cline-any cline-neutral">&nbsp;</span>
583
+ <span class="cline-any cline-yes">2x</span>
584
+ <span class="cline-any cline-neutral">&nbsp;</span>
527
585
  <span class="cline-any cline-neutral">&nbsp;</span>
528
586
  <span class="cline-any cline-neutral">&nbsp;</span>
529
587
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -541,6 +599,7 @@
541
599
  &lt;ComboboxInput
542
600
  @change="handleChange"
543
601
  @blur="onInputBlur"
602
+ @focus="handleFocus"
544
603
  :id="comboboxid"
545
604
  :name="name"
546
605
  :placeholder="placeholder"
@@ -548,6 +607,7 @@
548
607
  :aria-expanded="ariaExpanded"
549
608
  :activeDescendent="selectedOptionId"
550
609
  :ariaInvalid="ariaInvalid"
610
+ :aria-describedby="describedBy"
551
611
  v-model="inputValue"
552
612
  /&gt;
553
613
  &lt;ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading" :comboboxid="comboboxid"&gt;
@@ -563,7 +623,10 @@
563
623
  /&gt;
564
624
  &lt;/template&gt;
565
625
  &lt;/ListBox&gt;
566
- &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;{{ resultCount }}&lt;/div&gt;
626
+ &lt;div aria-live="polite" role="status" class="mds-visually-hidden"&gt;{{ resultCountMessage }}&lt;/div&gt;
627
+ &lt;span :id="describedBy" style="display: none"&gt;
628
+ When autocomplete results are available use up and down arrows to review and enter to select.
629
+ &lt;/span&gt;
567
630
  &lt;/div&gt;
568
631
  &lt;/template&gt;
569
632
  &nbsp;
@@ -586,11 +649,7 @@ export default {
586
649
  },
587
650
  placeholder: {
588
651
  type: String,
589
- default: 'Please combobox',
590
- },
591
- resultmessage: {
592
- type: [String, Function],
593
- default: 'options available',
652
+ default: '',
594
653
  },
595
654
  name: {
596
655
  type: [String, Boolean],
@@ -623,6 +682,9 @@ export default {
623
682
  selected: null,
624
683
  chosen: null,
625
684
  searchValue: this.$props.value,
685
+ resultCountMessage: null,
686
+ resultMessage: 'result available',
687
+ resultMessage_plural: 'results available',
626
688
  };
627
689
  },
628
690
  provide() {
@@ -636,6 +698,7 @@ export default {
636
698
  if (this.chosenOption) {
637
699
  return this.chosenOption.label;
638
700
  }
701
+ &nbsp;
639
702
  return this.searchValue;
640
703
  },
641
704
  set(event) {
@@ -644,6 +707,9 @@ export default {
644
707
  <span class="branch-1 cbranch-no" title="branch not covered" > this.searchValue = event.target ? event.target.value : '';</span>
645
708
  this.handleChange();
646
709
  this.$emit('search', this.searchValue);
710
+ if (this.visibleOptions.length &gt; 0) {
711
+ this.updateCount();
712
+ }
647
713
  },
648
714
  },
649
715
  selectedOption: {
@@ -668,6 +734,7 @@ export default {
668
734
  if (this.filterOptions) {
669
735
  return this.options.filter((opt) =&gt; opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
670
736
  }
737
+ &nbsp;
671
738
  return this.options;
672
739
  },
673
740
  listBoxId() {
@@ -676,14 +743,19 @@ export default {
676
743
  optionId() {
677
744
  return `${this.comboboxid}-option`;
678
745
  },
746
+ describedBy() {
747
+ return `${this.comboboxid}-assistiveHint`;
748
+ },
679
749
  isLoading() {
680
750
  <span class="branch-1 cbranch-no" title="branch not covered" > return this.options.length === 0 &amp;&amp; this.expanded;</span>
681
751
  },
682
752
  selectedOptionId() {
683
753
  const index = this.visibleOptions.indexOf(this.selectedOption);
754
+ &nbsp;
684
755
  if (index &gt; -1) {
685
756
  return `${this.optionId}-${index}`;
686
757
  }
758
+ &nbsp;
687
759
  return false;
688
760
  },
689
761
  listBoxHidden() {
@@ -692,12 +764,6 @@ export default {
692
764
  <span class="fstat-no" title="function not covered" > lastOptionIndex() {</span>
693
765
  <span class="cstat-no" title="statement not covered" > return this.visibleOptions.length - 1;</span>
694
766
  },
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
767
  ariaExpanded() {
702
768
  // These must be strings to apply as an aria attribute of the same name
703
769
  return this.expanded ? 'true' : 'false';
@@ -720,6 +786,12 @@ export default {
720
786
  this.makeInactive();
721
787
  }
722
788
  },
789
+ <span class="fstat-no" title="function not covered" > handleFocus() {</span>
790
+ <span class="cstat-no" title="statement not covered" > this.handleChange();</span>
791
+ <span class="cstat-no" title="statement not covered" > if (this.visibleOptions.length &gt; 1) {</span>
792
+ <span class="cstat-no" title="statement not covered" > this.updateCount();</span>
793
+ }
794
+ },
723
795
  clickOption(option = this.selectedOption) {
724
796
  this.chosenOption = option;
725
797
  this.makeInactive();
@@ -727,6 +799,7 @@ export default {
727
799
  <span class="fstat-no" title="function not covered" > chooseOption() {</span>
728
800
  <span class="cstat-no" title="statement not covered" > this.chosenOption = this.selectedOption;</span>
729
801
  <span class="cstat-no" title="statement not covered" > this.makeInactive();</span>
802
+ <span class="cstat-no" title="statement not covered" > this.clearCount();</span>
730
803
  },
731
804
  <span class="fstat-no" title="function not covered" > hiddenGuard(fn) {</span>
732
805
  <span class="cstat-no" title="statement not covered" > if (this.listBoxHidden) return;</span>
@@ -734,11 +807,13 @@ export default {
734
807
  },
735
808
  <span class="fstat-no" title="function not covered" > onInputBlur() {</span>
736
809
  <span class="cstat-no" title="statement not covered" > this.makeInactive();</span>
810
+ <span class="cstat-no" title="statement not covered" > this.clearCount();</span>
737
811
  },
738
812
  <span class="fstat-no" title="function not covered" > onKeyDown() {</span>
739
813
  <span class="cstat-no" title="statement not covered" > if (this.selectedOption) {</span>
740
814
  <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>
815
+ <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === this.lastOptionIndex ? currentIndex : currentIndex + 1;</span>
816
+ &nbsp;
742
817
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[nextIndex];</span>
743
818
  <span class="cstat-no" title="statement not covered" > } else {</span>
744
819
  <span class="cstat-no" title="statement not covered" > [this.selectedOption] = this.visibleOptions;</span>
@@ -747,7 +822,8 @@ export default {
747
822
  <span class="fstat-no" title="function not covered" > onKeyUp() {</span>
748
823
  <span class="cstat-no" title="statement not covered" > if (this.selectedOption) {</span>
749
824
  <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>
825
+ <span class="cstat-no" title="statement not covered" > const nextIndex = currentIndex === 0 ? currentIndex : currentIndex - 1;</span>
826
+ &nbsp;
751
827
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[nextIndex];</span>
752
828
  } else {
753
829
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[this.lastOptionIndex];</span>
@@ -759,6 +835,17 @@ export default {
759
835
  <span class="fstat-no" title="function not covered" > onKeyEnd() {</span>
760
836
  <span class="cstat-no" title="statement not covered" > this.selectedOption = this.visibleOptions[this.lastOptionIndex];</span>
761
837
  },
838
+ updateCount() {
839
+ this.clearCount();
840
+ <span class="fstat-no" title="function not covered" > setTimeout(() =&gt; {</span>
841
+ <span class="cstat-no" title="statement not covered" > const message = this.visibleOptions.length === 1 ? this.resultMessage : this.resultMessage_plural;</span>
842
+ &nbsp;
843
+ <span class="cstat-no" title="statement not covered" > this.resultCountMessage = `${this.visibleOptions.length} ${message}`;</span>
844
+ }, 1400);
845
+ },
846
+ clearCount() {
847
+ this.resultCountMessage = null;
848
+ },
762
849
  },
763
850
  };
764
851
  &lt;/script&gt;
@@ -769,7 +856,7 @@ export default {
769
856
  <div class='footer quiet pad2 space-top1 center small'>
770
857
  Code coverage generated by
771
858
  <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
772
- at Tue Jul 27 2021 09:56:33 GMT+0000 (Coordinated Universal Time)
859
+ at Thu Aug 05 2021 14:49:32 GMT+0000 (Coordinated Universal Time)
773
860
  </div>
774
861
  </div>
775
862
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/combobox/vue-components/ListBoxOption.vue.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
218
218
  </div>
219
219
  </div>
220
220
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/combobox/vue-components/index.html CHANGED
@@ -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">65.43% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>48/70</span>
28
+ <span class='fraction'>53/81</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">71.79% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>26/35</span>
42
+ <span class='fraction'>28/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">65.43% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>48/70</span>
49
+ <span class='fraction'>53/81</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="62.67" class="pic medium">
78
+ <div class="chart"><div class="cover-fill" style="width: 62%"></div><div class="cover-empty" style="width: 38%"></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="62.67" class="pct medium">62.67%</td>
81
+ <td data-value="75" class="abs medium">47/75</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="68.57" class="pct medium">68.57%</td>
85
+ <td data-value="35" class="abs medium">24/35</td>
86
+ <td data-value="62.67" class="pct medium">62.67%</td>
87
+ <td data-value="75" class="abs medium">47/75</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 14:49:32 GMT+0000 (Coordinated Universal Time)
114
114
  </div>
115
115
  </div>
116
116
  <script src="../../../../prettify.js"></script>
package/coverage/components/inputs/file-upload/file-upload.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
236
236
  </div>
237
237
  </div>
238
238
  <script src="../../../prettify.js"></script>
package/coverage/components/inputs/file-upload/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../../prettify.js"></script>
package/coverage/components/inputs/textarea/character-count.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
188
188
  </div>
189
189
  </div>
190
190
  <script src="../../../prettify.js"></script>
package/coverage/components/inputs/textarea/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../../prettify.js"></script>
package/coverage/components/modal/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
package/coverage/components/modal/modal.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
326
326
  </div>
327
327
  </div>
328
328
  <script src="../../prettify.js"></script>
package/coverage/components/notification/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
package/coverage/components/notification/notification.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
158
158
  </div>
159
159
  </div>
160
160
  <script src="../../prettify.js"></script>
package/coverage/components/popover/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
package/coverage/components/popover/popover.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
299
299
  </div>
300
300
  </div>
301
301
  <script src="../../prettify.js"></script>
package/coverage/components/switch-state/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>
package/coverage/components/switch-state/switch-state.js.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
104
104
  </div>
105
105
  </div>
106
106
  <script src="../../prettify.js"></script>
package/coverage/components/tabs/index.html CHANGED
@@ -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 14:49:32 GMT+0000 (Coordinated Universal Time)
99
99
  </div>
100
100
  </div>
101
101
  <script src="../../prettify.js"></script>