carbon-components-angular 5.10.1 → 5.10.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/docs/documentation/components/Tab.html +62 -26
  2. package/docs/documentation/components/TabHeaders.html +3 -3
  3. package/docs/documentation/coverage.html +3 -15
  4. package/docs/documentation/js/search/search_index.js +2 -2
  5. package/docs/documentation/miscellaneous/variables.html +0 -32
  6. package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
  7. package/docs/documentation/modules/CodeSnippetModule.html +4 -4
  8. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +38 -42
  9. package/docs/documentation/modules/DatePickerInputModule.html +38 -42
  10. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/FileUploaderModule.html +4 -4
  12. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  13. package/docs/documentation/modules/NumberModule.html +4 -4
  14. package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
  15. package/docs/documentation/modules/PanelModule.html +36 -36
  16. package/docs/documentation/modules/RadioModule/dependencies.svg +49 -49
  17. package/docs/documentation/modules/RadioModule.html +49 -49
  18. package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
  19. package/docs/documentation/modules/SelectModule.html +43 -43
  20. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/SliderModule.html +4 -4
  22. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  23. package/docs/documentation/modules/TableModule.html +216 -216
  24. package/docs/documentation/modules/TabsModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/TabsModule.html +4 -4
  26. package/docs/documentation/modules/TagModule/dependencies.svg +28 -28
  27. package/docs/documentation/modules/TagModule.html +28 -28
  28. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  29. package/docs/documentation/modules/ThemeModule.html +13 -13
  30. package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
  31. package/docs/documentation/modules/TilesModule.html +98 -98
  32. package/docs/documentation/modules/TimePickerModule/dependencies.svg +40 -36
  33. package/docs/documentation/modules/TimePickerModule.html +40 -36
  34. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +30 -30
  35. package/docs/documentation/modules/TimePickerSelectModule.html +30 -30
  36. package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
  37. package/docs/documentation/modules/ToggleModule.html +4 -4
  38. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  39. package/docs/documentation/modules/ToggletipModule.html +4 -4
  40. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  41. package/docs/documentation/modules/TooltipModule.html +4 -4
  42. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  43. package/docs/documentation/modules/UIShellModule.html +4 -4
  44. package/docs/documentation.json +22 -54
  45. package/docs/storybook/9115.e3ed2f59.iframe.bundle.js +1 -0
  46. package/docs/storybook/iframe.html +2 -2
  47. package/docs/storybook/{main.e1ee5785.iframe.bundle.js → main.fef29d4d.iframe.bundle.js} +1 -1
  48. package/docs/storybook/project.json +1 -1
  49. package/docs/storybook/{runtime~main.ceeada28.iframe.bundle.js → runtime~main.fc6e3901.iframe.bundle.js} +1 -1
  50. package/docs/storybook/tabs-tabs-stories.3cea9985.iframe.bundle.js +1 -0
  51. package/esm2020/i18n/en.mjs +8 -69
  52. package/esm2020/tabs/tab-headers.component.mjs +3 -3
  53. package/esm2020/tabs/tab.component.mjs +3 -4
  54. package/fesm2015/carbon-components-angular-i18n.mjs +7 -68
  55. package/fesm2015/carbon-components-angular-i18n.mjs.map +1 -1
  56. package/fesm2015/carbon-components-angular-tabs.mjs +4 -5
  57. package/fesm2015/carbon-components-angular-tabs.mjs.map +1 -1
  58. package/fesm2020/carbon-components-angular-i18n.mjs +7 -68
  59. package/fesm2020/carbon-components-angular-i18n.mjs.map +1 -1
  60. package/fesm2020/carbon-components-angular-tabs.mjs +4 -5
  61. package/fesm2020/carbon-components-angular-tabs.mjs.map +1 -1
  62. package/i18n/en.d.ts +0 -47
  63. package/i18n/i18n.service.d.ts +1 -54
  64. package/package.json +1 -1
  65. package/tabs/tab.component.d.ts +1 -0
  66. package/docs/storybook/9115.e6e0100b.iframe.bundle.js +0 -1
  67. package/docs/storybook/tabs-tabs-stories.675b2d72.iframe.bundle.js +0 -1
package/docs/documentation/components/Tab.html CHANGED
@@ -181,6 +181,11 @@ The <code>select</code> output will also be triggered for the active tab when th
181
181
  <span class="modifier"></span>
182
182
  <a href="#attrClass" >attrClass</a>
183
183
  </li>
184
+ <li>
185
+ <span class="modifier">Private</span>
186
+ <span class="modifier">Static</span>
187
+ <a href="#counter" >counter</a>
188
+ </li>
184
189
  <li>
185
190
  <span class="modifier">Public</span>
186
191
  <a href="#headingIsTemplate" >headingIsTemplate</a>
@@ -319,7 +324,7 @@ The <code>select</code> output will also be triggered for the active tab when th
319
324
  </tr>
320
325
  <tr>
321
326
  <td class="col-md-2" colspan="2">
322
- <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/tabs/tab.component.ts:98</a></div>
327
+ <div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/tabs/tab.component.ts:97</a></div>
323
328
  </td>
324
329
  </tr>
325
330
  <tr>
@@ -347,7 +352,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
347
352
  </tr>
348
353
  <tr>
349
354
  <td class="col-md-2" colspan="2">
350
- <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/tabs/tab.component.ts:113</a></div>
355
+ <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/tabs/tab.component.ts:111</a></div>
351
356
  </td>
352
357
  </tr>
353
358
  <tr>
@@ -374,7 +379,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
374
379
  </tr>
375
380
  <tr>
376
381
  <td class="col-md-2" colspan="2">
377
- <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/tabs/tab.component.ts:93</a></div>
382
+ <div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/tabs/tab.component.ts:92</a></div>
378
383
  </td>
379
384
  </tr>
380
385
  <tr>
@@ -406,7 +411,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
406
411
  </tr>
407
412
  <tr>
408
413
  <td class="col-md-2" colspan="2">
409
- <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/tabs/tab.component.ts:102</a></div>
414
+ <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/tabs/tab.component.ts:101</a></div>
410
415
  </td>
411
416
  </tr>
412
417
  <tr>
@@ -433,7 +438,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
433
438
  </tr>
434
439
  <tr>
435
440
  <td class="col-md-2" colspan="2">
436
- <div class="io-line">Defined in <a href="" data-line="82" class="link-to-prism">src/tabs/tab.component.ts:82</a></div>
441
+ <div class="io-line">Defined in <a href="" data-line="81" class="link-to-prism">src/tabs/tab.component.ts:81</a></div>
437
442
  </td>
438
443
  </tr>
439
444
  <tr>
@@ -460,12 +465,12 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
460
465
  </tr>
461
466
  <tr>
462
467
  <td class="col-md-4">
463
- <i>Default value : </i><code>&#x60;n-tab-${nextId++}&#x60;</code>
468
+ <i>Default value : </i><code>&#x60;n-tab-${Tab.counter++}&#x60;</code>
464
469
  </td>
465
470
  </tr>
466
471
  <tr>
467
472
  <td class="col-md-2" colspan="2">
468
- <div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/tabs/tab.component.ts:109</a></div>
473
+ <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/tabs/tab.component.ts:107</a></div>
469
474
  </td>
470
475
  </tr>
471
476
  <tr>
@@ -497,7 +502,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
497
502
  </tr>
498
503
  <tr>
499
504
  <td class="col-md-2" colspan="2">
500
- <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/tabs/tab.component.ts:104</a></div>
505
+ <div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/tabs/tab.component.ts:103</a></div>
501
506
  </td>
502
507
  </tr>
503
508
  </tbody>
@@ -518,7 +523,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
518
523
  </tr>
519
524
  <tr>
520
525
  <td class="col-md-2" colspan="2">
521
- <div class="io-line">Defined in <a href="" data-line="89" class="link-to-prism">src/tabs/tab.component.ts:89</a></div>
526
+ <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/tabs/tab.component.ts:88</a></div>
522
527
  </td>
523
528
  </tr>
524
529
  <tr>
@@ -550,7 +555,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
550
555
  </tr>
551
556
  <tr>
552
557
  <td class="col-md-2" colspan="2">
553
- <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/tabs/tab.component.ts:119</a></div>
558
+ <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/tabs/tab.component.ts:117</a></div>
554
559
  </td>
555
560
  </tr>
556
561
  <tr>
@@ -587,7 +592,7 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
587
592
  </tr>
588
593
  <tr>
589
594
  <td class="col-md-4">
590
- <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/tabs/tab.component.ts:124</a></div>
595
+ <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/tabs/tab.component.ts:122</a></div>
591
596
  </td>
592
597
  </tr>
593
598
 
@@ -628,8 +633,8 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
628
633
 
629
634
  <tr>
630
635
  <td class="col-md-4">
631
- <div class="io-line">Defined in <a href="" data-line="145"
632
- class="link-to-prism">src/tabs/tab.component.ts:145</a></div>
636
+ <div class="io-line">Defined in <a href="" data-line="143"
637
+ class="link-to-prism">src/tabs/tab.component.ts:143</a></div>
633
638
  </td>
634
639
  </tr>
635
640
 
@@ -667,8 +672,8 @@ Determines whether it&#39;s <code>TabPanel</code> is rendered.</p>
667
672
 
668
673
  <tr>
669
674
  <td class="col-md-4">
670
- <div class="io-line">Defined in <a href="" data-line="136"
671
- class="link-to-prism">src/tabs/tab.component.ts:136</a></div>
675
+ <div class="io-line">Defined in <a href="" data-line="134"
676
+ class="link-to-prism">src/tabs/tab.component.ts:134</a></div>
672
677
  </td>
673
678
  </tr>
674
679
 
@@ -707,8 +712,8 @@ of the boolean &#39;headingIsTemplate&#39;.</p>
707
712
 
708
713
  <tr>
709
714
  <td class="col-md-4">
710
- <div class="io-line">Defined in <a href="" data-line="152"
711
- class="link-to-prism">src/tabs/tab.component.ts:152</a></div>
715
+ <div class="io-line">Defined in <a href="" data-line="150"
716
+ class="link-to-prism">src/tabs/tab.component.ts:150</a></div>
712
717
  </td>
713
718
  </tr>
714
719
 
@@ -751,7 +756,7 @@ of the boolean &#39;headingIsTemplate&#39;.</p>
751
756
  </tr>
752
757
  <tr>
753
758
  <td class="col-md-4">
754
- <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/tabs/tab.component.ts:130</a></div>
759
+ <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/tabs/tab.component.ts:128</a></div>
755
760
  </td>
756
761
  </tr>
757
762
 
@@ -786,7 +791,7 @@ of the boolean &#39;headingIsTemplate&#39;.</p>
786
791
  </tr>
787
792
  <tr>
788
793
  <td class="col-md-4">
789
- <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/tabs/tab.component.ts:124</a></div>
794
+ <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/tabs/tab.component.ts:122</a></div>
790
795
  </td>
791
796
  </tr>
792
797
 
@@ -799,6 +804,39 @@ of the boolean &#39;headingIsTemplate&#39;.</p>
799
804
 
800
805
  </tbody>
801
806
  </table>
807
+ <table class="table table-sm table-bordered">
808
+ <tbody>
809
+ <tr>
810
+ <td class="col-md-4">
811
+ <a name="counter"></a>
812
+ <span class="name">
813
+ <span class="modifier">Private</span>
814
+ <span class="modifier">Static</span>
815
+ <span ><b>counter</b></span>
816
+ <a href="#counter"><span class="icon ion-ios-link"></span></a>
817
+ </span>
818
+ </td>
819
+ </tr>
820
+ <tr>
821
+ <td class="col-md-4">
822
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
823
+
824
+ </td>
825
+ </tr>
826
+ <tr>
827
+ <td class="col-md-4">
828
+ <i>Default value : </i><code>0</code>
829
+ </td>
830
+ </tr>
831
+ <tr>
832
+ <td class="col-md-4">
833
+ <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/tabs/tab.component.ts:71</a></div>
834
+ </td>
835
+ </tr>
836
+
837
+
838
+ </tbody>
839
+ </table>
802
840
  <table class="table table-sm table-bordered">
803
841
  <tbody>
804
842
  <tr>
@@ -818,7 +856,7 @@ of the boolean &#39;headingIsTemplate&#39;.</p>
818
856
  </tr>
819
857
  <tr>
820
858
  <td class="col-md-4">
821
- <div class="io-line">Defined in <a href="" data-line="77" class="link-to-prism">src/tabs/tab.component.ts:77</a></div>
859
+ <div class="io-line">Defined in <a href="" data-line="76" class="link-to-prism">src/tabs/tab.component.ts:76</a></div>
822
860
  </td>
823
861
  </tr>
824
862
 
@@ -854,7 +892,7 @@ Default value is false.</p>
854
892
  </tr>
855
893
  <tr>
856
894
  <td class="col-md-4">
857
- <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/tabs/tab.component.ts:126</a></div>
895
+ <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/tabs/tab.component.ts:124</a></div>
858
896
  </td>
859
897
  </tr>
860
898
 
@@ -865,7 +903,7 @@ Default value is false.</p>
865
903
  </tr>
866
904
  <tr>
867
905
  <td class="col-md-4">
868
- <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/tabs/tab.component.ts:113</a></div>
906
+ <div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/tabs/tab.component.ts:111</a></div>
869
907
  </td>
870
908
  </tr>
871
909
  <tr>
@@ -924,8 +962,6 @@ Default value is false.</p>
924
962
  HostBinding
925
963
  } from &quot;@angular/core&quot;;
926
964
 
927
- let nextId &#x3D; 0;
928
-
929
965
  /**
930
966
  * The &#x60;Tab&#x60; component is a child of the &#x60;Tabs&#x60; component.
931
967
  * It represents one &#x60;Tab&#x60; item and its content within a panel of other &#x60;Tab&#x60; items.
@@ -986,6 +1022,7 @@ let nextId &#x3D; 0;
986
1022
  &#x60;
987
1023
  })
988
1024
  export class Tab implements OnInit {
1025
+ private static counter &#x3D; 0;
989
1026
  /**
990
1027
  * Boolean value reflects if the &#x60;Tab&#x60; is using a custom template for the heading.
991
1028
  * Default value is false.
@@ -1018,11 +1055,10 @@ export class Tab implements OnInit {
1018
1055
  @Input() disabled &#x3D; false;
1019
1056
 
1020
1057
  @Input() tabIndex &#x3D; 0;
1021
- // do we need id&#x27;s?
1022
1058
  /**
1023
1059
  * Sets the id of the &#x60;Tab&#x60;. Will be uniquely generated if not provided.
1024
1060
  */
1025
- @Input() id &#x3D; &#x60;n-tab-${nextId++}&#x60;;
1061
+ @Input() id &#x3D; &#x60;n-tab-${Tab.counter++}&#x60;;
1026
1062
  /**
1027
1063
  * Set to true to have Tab items cached and not reloaded on tab switching.
1028
1064
  */
package/docs/documentation/components/TabHeaders.html CHANGED
@@ -130,7 +130,7 @@ if content has overflow.</p>
130
130
  [ngClass]&#x3D;&quot;{
131
131
  &#x27;cds--tab--overflow-nav-button--hidden&#x27;: leftOverflowNavButtonHidden
132
132
  }&quot;
133
- [title]&#x3D;&quot;translations.BUTTON_ARIA_RIGHT&quot;&gt;
133
+ [title]&#x3D;&quot;translations.BUTTON_ARIA_LEFT&quot;&gt;
134
134
  &lt;svg
135
135
  focusable&#x3D;&quot;false&quot;
136
136
  preserveAspectRatio&#x3D;&quot;xMidYMid meet&quot;
@@ -2317,7 +2317,7 @@ import { Tab } from &quot;./tab.component&quot;;
2317
2317
  [ngClass]&#x3D;&quot;{
2318
2318
  &#x27;cds--tab--overflow-nav-button--hidden&#x27;: leftOverflowNavButtonHidden
2319
2319
  }&quot;
2320
- [title]&#x3D;&quot;translations.BUTTON_ARIA_RIGHT&quot;&gt;
2320
+ [title]&#x3D;&quot;translations.BUTTON_ARIA_LEFT&quot;&gt;
2321
2321
  &lt;svg
2322
2322
  focusable&#x3D;&quot;false&quot;
2323
2323
  preserveAspectRatio&#x3D;&quot;xMidYMid meet&quot;
@@ -2606,7 +2606,7 @@ export class TabHeaders extends BaseTabHeader implements AfterContentInit, OnCha
2606
2606
  <script src="../js/libs/htmlparser.js"></script>
2607
2607
  <script src="../js/libs/deep-iterator.js"></script>
2608
2608
  <script>
2609
- var COMPONENT_TEMPLATE = '<div><button type="button" (click)="handleOverflowNavClick(-1, tabs.length)" (pointerdown)="handleOverflowNavMouseDown(-1)" (pointerup)="handleOverflowNavMouseUp()" (pointerleave)="handleOverflowNavMouseUp()" (pointerout)="handleOverflowNavMouseUp()" class="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--previous" [ngClass]="{ \'cds--tab--overflow-nav-button--hidden\': leftOverflowNavButtonHidden }" [title]="translations.BUTTON_ARIA_RIGHT"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path> </svg></button><div #tabList class="cds--tab--list" role="tablist" [attr.aria-label]="ariaLabel || translations.HEADER_ARIA_LABEL" (scroll)="handleScroll()"> <ng-container [ngTemplateOutlet]="contentBefore"></ng-container> <button *ngFor="let tab of tabs; let i = index;" #tabItem role="tab" [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" [attr.aria-disabled]="tab.disabled" [ngClass]="{ \'cds--tabs__nav-item--selected\': tab.active, \'cds--tabs__nav-item--disabled\': tab.disabled }" class="cds--tabs__nav-item cds--tabs__nav-link" type="button" draggable="false" id="{{tab.id}}-header" (focus)="onTabFocus(tabItem, i)" (click)="selectTab(tabItem, tab, i)"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </button> <ng-container [ngTemplateOutlet]="contentAfter"></ng-container></div><button type="button" (click)="handleOverflowNavClick(1, tabs.length)" (pointerdown)="handleOverflowNavMouseDown(1)" (pointerup)="handleOverflowNavMouseUp()" (pointerleave)="handleOverflowNavMouseUp()" (pointerout)="handleOverflowNavMouseUp()" class="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--next" [ngClass]="{ \'cds--tab--overflow-nav-button--hidden\': rightOverflowNavButtonHidden }" [title]="translations.BUTTON_ARIA_RIGHT"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path> </svg></button> </div>'
2609
+ var COMPONENT_TEMPLATE = '<div><button type="button" (click)="handleOverflowNavClick(-1, tabs.length)" (pointerdown)="handleOverflowNavMouseDown(-1)" (pointerup)="handleOverflowNavMouseUp()" (pointerleave)="handleOverflowNavMouseUp()" (pointerout)="handleOverflowNavMouseUp()" class="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--previous" [ngClass]="{ \'cds--tab--overflow-nav-button--hidden\': leftOverflowNavButtonHidden }" [title]="translations.BUTTON_ARIA_LEFT"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path> </svg></button><div #tabList class="cds--tab--list" role="tablist" [attr.aria-label]="ariaLabel || translations.HEADER_ARIA_LABEL" (scroll)="handleScroll()"> <ng-container [ngTemplateOutlet]="contentBefore"></ng-container> <button *ngFor="let tab of tabs; let i = index;" #tabItem role="tab" [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" [attr.aria-disabled]="tab.disabled" [ngClass]="{ \'cds--tabs__nav-item--selected\': tab.active, \'cds--tabs__nav-item--disabled\': tab.disabled }" class="cds--tabs__nav-item cds--tabs__nav-link" type="button" draggable="false" id="{{tab.id}}-header" (focus)="onTabFocus(tabItem, i)" (click)="selectTab(tabItem, tab, i)"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </button> <ng-container [ngTemplateOutlet]="contentAfter"></ng-container></div><button type="button" (click)="handleOverflowNavClick(1, tabs.length)" (pointerdown)="handleOverflowNavMouseDown(1)" (pointerup)="handleOverflowNavMouseUp()" (pointerleave)="handleOverflowNavMouseUp()" (pointerout)="handleOverflowNavMouseUp()" class="cds--tab--overflow-nav-button cds--tab--overflow-nav-button--next" [ngClass]="{ \'cds--tab--overflow-nav-button--hidden\': rightOverflowNavButtonHidden }" [title]="translations.BUTTON_ARIA_RIGHT"> <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path> </svg></button> </div>'
2610
2610
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'}];
2611
2611
  var DIRECTIVES = [{'name': 'AbstractDropdownView', 'selector': '[cdsAbstractDropdownView], [ibmAbstractDropdownView]'},{'name': 'ActionableButton', 'selector': '[cdsActionableButton], [ibmActionableButton]'},{'name': 'ActionableSubtitle', 'selector': '[cdsActionableSubtitle], [ibmActionableSubtitle]'},{'name': 'ActionableTitle', 'selector': '[cdsActionableTitle], [ibmActionableTitle]'},{'name': 'BaseModal', 'selector': '[cdsBaseModal], [ibmBaseModal]'},{'name': 'Button', 'selector': '[cdsButton], [ibmButton]'},{'name': 'ColumnDirective', 'selector': '[cdsCol], [ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[cdsContentOption], [ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[cdsDialog], [ibmDialog]'},{'name': 'ExpandableTileAboveFoldDirective', 'selector': '[cdsAboveFold], [ibmAboveFold]'},{'name': 'ExpandableTileBelowFoldDirective', 'selector': '[cdsBelowFold], [ibmBelowFold]'},{'name': 'ExpandedRowHover', 'selector': '[cdsExpandedRowHover], [ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[cdsGrid], [ibmGrid]'},{'name': 'IconDirective', 'selector': '[cdsIcon], [ibmIcon]'},{'name': 'LayerDirective', 'selector': '[cdsLayer], [ibmLayer]'},{'name': 'Link', 'selector': '[cdsLink], [ibmLink]'},{'name': 'List', 'selector': '[cdsList], [ibmList]'},{'name': 'ListItemDirective', 'selector': '[cdsListItem], [ibmListItem]'},{'name': 'ModalContent', 'selector': '[cdsModalContent], [ibmModalContent]'},{'name': 'ModalContentText', 'selector': '[cdsModalContentText], [ibmModalContentText]'},{'name': 'ModalHeaderHeading', 'selector': '[cdsModalHeaderHeading], [ibmModalHeaderHeading]'},{'name': 'ModalHeaderLabel', 'selector': '[cdsModalHeaderLabel], [ibmModalHeaderLabel]'},{'name': 'NotificationSubtitle', 'selector': '[cdsNotificationSubtitle], [ibmNotificationSubtitle]'},{'name': 'NotificationTitle', 'selector': '[cdsNotificationTitle], [ibmNotificationTitle]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[cdsOverflowMenu], [ibmOverflowMenu]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RowDirective', 'selector': '[cdsRow], [ibmRow]'},{'name': 'ScrollableList', 'selector': '[cdsScrollableList], [ibmScrollableList]'},{'name': 'StackDirective', 'selector': '[cdsStack], [ibmStack]'},{'name': 'TabHeader', 'selector': '[cdsTabHeader], [ibmTabHeader]'},{'name': 'TableDirective', 'selector': '[cdsTable], [ibmTable]'},{'name': 'TableHeadCellLabel', 'selector': '[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]'},{'name': 'TableHeaderDescription', 'selector': '[cdsTableHeaderDescription], [ibmTableHeaderDescription]'},{'name': 'TableHeaderTitle', 'selector': '[cdsTableHeaderTitle], [ibmTableHeaderTitle]'},{'name': 'TextArea', 'selector': '[cdsTextArea], [ibmTextArea]'},{'name': 'TextInput', 'selector': '[cdsText], [ibmText]'},{'name': 'ThemeDirective', 'selector': '[cdsTheme], [ibmTheme]'},{'name': 'ToastCaption', 'selector': '[cdsToastCaption], [ibmToastCaption]'},{'name': 'ToastSubtitle', 'selector': '[cdsToastSubtitle], [ibmToastSubtitle]'},{'name': 'ToastTitle', 'selector': '[cdsToastTitle], [ibmToastTitle]'},{'name': 'ToggletipAction', 'selector': '[cdsToggletipAction], [ibmToggletipAction]'},{'name': 'ToggletipButton', 'selector': '[cdsToggletipButton], [ibmToggletipButton]'},{'name': 'ToggletipContent', 'selector': '[cdsToggletipContent], [ibmToggletipContent]'},{'name': 'ToggletipLabel', 'selector': '[cdsToggletipLabel], [ibmToggletipLabel]'}];
2612
2612
  var ACTUAL_COMPONENT = {'name': 'TabHeaders'};
package/docs/documentation/coverage.html CHANGED
@@ -2546,21 +2546,9 @@
2546
2546
  </td>
2547
2547
  <td>component</td>
2548
2548
  <td>Tab</td>
2549
- <td align="right" data-sort="88">
2550
- <span class="coverage-percent">88 %</span>
2551
- <span class="coverage-count">(15/17)</span>
2552
- </td>
2553
- </tr>
2554
- <tr class="low">
2555
- <td>
2556
- <!-- miscellaneous -->
2557
- <a href="./miscellaneous/variables.html#nextId">src/tabs/tab.component.ts</a>
2558
- </td>
2559
- <td>variable</td>
2560
- <td>nextId</td>
2561
- <td align="right" data-sort="0">
2562
- <span class="coverage-percent">0 %</span>
2563
- <span class="coverage-count">(0/1)</span>
2549
+ <td align="right" data-sort="83">
2550
+ <span class="coverage-percent">83 %</span>
2551
+ <span class="coverage-count">(15/18)</span>
2564
2552
  </td>
2565
2553
  </tr>
2566
2554
  <tr class="very-good">