carbon-components-angular 3.0.2 → 3.2.0

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 (64) hide show
  1. package/bundle/carbon-angular.umd.js +2 -2
  2. package/bundle/carbon-angular.umd.js.map +1 -1
  3. package/content-switcher/content-switcher-option.directive.js +1 -1
  4. package/content-switcher/content-switcher-option.directive.js.map +1 -1
  5. package/docs/documentation/classes/NumberChange.html +2 -0
  6. package/docs/documentation/classes/ToggleChange.html +7 -2
  7. package/docs/documentation/components/Number.html +30 -26
  8. package/docs/documentation/components/Pagination.html +32 -44
  9. package/docs/documentation/components/TabHeaders.html +74 -25
  10. package/docs/documentation/components/Tabs.html +28 -12
  11. package/docs/documentation/components/TagFilter.html +52 -3
  12. package/docs/documentation/components/Toggle.html +52 -19
  13. package/docs/documentation/coverage.html +9 -9
  14. package/docs/documentation/directives/ContentSwitcherOption.html +1 -1
  15. package/docs/documentation/js/search/search_index.js +2 -2
  16. package/docs/storybook/iframe.html +3 -3
  17. package/docs/storybook/{main.30b13c55e055554fdaac.bundle.js → main.cc3329d0f31a1601a8eb.bundle.js} +48 -17
  18. package/docs/storybook/main.cc3329d0f31a1601a8eb.bundle.js.map +1 -0
  19. package/docs/storybook/{runtime~main.30b13c55e055554fdaac.bundle.js → runtime~main.cc3329d0f31a1601a8eb.bundle.js} +1 -1
  20. package/docs/storybook/{runtime~main.30b13c55e055554fdaac.bundle.js.map → runtime~main.cc3329d0f31a1601a8eb.bundle.js.map} +1 -1
  21. package/docs/storybook/{vendors~main.30b13c55e055554fdaac.bundle.js → vendors~main.cc3329d0f31a1601a8eb.bundle.js} +1 -1
  22. package/docs/storybook/{vendors~main.30b13c55e055554fdaac.bundle.js.map → vendors~main.cc3329d0f31a1601a8eb.bundle.js.map} +1 -1
  23. package/number-input/number.component.js +1 -1
  24. package/number-input/number.component.js.map +1 -1
  25. package/number-input/number.component.metadata.json +1 -1
  26. package/number-input/number.component.ngfactory.js +2 -2
  27. package/number-input/number.component.ngfactory.js.map +1 -1
  28. package/package.json +1 -1
  29. package/pagination/pagination.component.js +1 -1
  30. package/pagination/pagination.component.js.map +1 -1
  31. package/pagination/pagination.component.metadata.json +1 -1
  32. package/pagination/pagination.component.ngfactory.js +5 -5
  33. package/pagination/pagination.component.ngfactory.js.map +1 -1
  34. package/tabs/tab-headers.component.d.ts +2 -0
  35. package/tabs/tab-headers.component.js +3 -1
  36. package/tabs/tab-headers.component.js.map +1 -1
  37. package/tabs/tab-headers.component.metadata.json +1 -1
  38. package/tabs/tab-headers.component.ngfactory.js +10 -8
  39. package/tabs/tab-headers.component.ngfactory.js.map +1 -1
  40. package/tabs/tab-headers.component.ngsummary.json +1 -1
  41. package/tabs/tabs.component.js +1 -1
  42. package/tabs/tabs.component.js.map +1 -1
  43. package/tabs/tabs.component.metadata.json +1 -1
  44. package/tabs/tabs.component.ngfactory.js +6 -4
  45. package/tabs/tabs.component.ngfactory.js.map +1 -1
  46. package/tabs/tabs.component.ngsummary.json +1 -1
  47. package/tabs/tabs.module.ngfactory.js.map +1 -1
  48. package/tag/tag-filter.component.d.ts +5 -0
  49. package/tag/tag-filter.component.js +9 -3
  50. package/tag/tag-filter.component.js.map +1 -1
  51. package/tag/tag-filter.component.metadata.json +1 -1
  52. package/tag/tag-filter.component.ngfactory.js +5 -2
  53. package/tag/tag-filter.component.ngfactory.js.map +1 -1
  54. package/tag/tag-filter.component.ngsummary.json +1 -1
  55. package/tag/tag.module.ngfactory.js.map +1 -1
  56. package/toggle/toggle.component.d.ts +5 -0
  57. package/toggle/toggle.component.js +2 -1
  58. package/toggle/toggle.component.js.map +1 -1
  59. package/toggle/toggle.component.metadata.json +1 -1
  60. package/toggle/toggle.component.ngfactory.js +5 -4
  61. package/toggle/toggle.component.ngfactory.js.map +1 -1
  62. package/toggle/toggle.component.ngsummary.json +1 -1
  63. package/toggle/toggle.module.ngfactory.js.map +1 -1
  64. package/docs/storybook/main.30b13c55e055554fdaac.bundle.js.map +0 -1
package/docs/documentation/components/TabHeaders.html CHANGED
@@ -132,6 +132,9 @@ if content has overflow.</p>
132
132
  }&quot;
133
133
  class&#x3D;&quot;bx--tabs__nav&quot;
134
134
  role&#x3D;&quot;tablist&quot;&gt;
135
+ &lt;li role&#x3D;&quot;presentation&quot;&gt;
136
+ &lt;ng-container *ngIf&#x3D;&quot;contentBefore&quot; [ngTemplateOutlet]&#x3D;&quot;contentBefore&quot;&gt;&lt;/ng-container&gt;
137
+ &lt;/li&gt;
135
138
  &lt;li
136
139
  *ngFor&#x3D;&quot;let tab of tabs; let i &#x3D; index;&quot;
137
140
  [ngClass]&#x3D;&quot;{
@@ -161,11 +164,11 @@ if content has overflow.</p>
161
164
  &lt;/ng-template&gt;
162
165
  &lt;/a&gt;
163
166
  &lt;/li&gt;
167
+ &lt;li role&#x3D;&quot;presentation&quot;&gt;
168
+ &lt;ng-container *ngIf&#x3D;&quot;contentAfter&quot; [ngTemplateOutlet]&#x3D;&quot;contentAfter&quot;&gt;&lt;/ng-container&gt;
169
+ &lt;/li&gt;
164
170
  &lt;/ul&gt;
165
171
  &lt;/nav&gt;
166
- &lt;div&gt;
167
- &lt;ng-content select&#x3D;&quot;ibm-tab&quot;&gt;&lt;/ng-content&gt;
168
- &lt;/div&gt;
169
172
  </code></pre></td>
170
173
  </tr>
171
174
 
@@ -268,6 +271,12 @@ if content has overflow.</p>
268
271
  <li>
269
272
  <a href="#cacheActive">cacheActive</a>
270
273
  </li>
274
+ <li>
275
+ <a href="#contentAfter">contentAfter</a>
276
+ </li>
277
+ <li>
278
+ <a href="#contentBefore">contentBefore</a>
279
+ </li>
271
280
  <li>
272
281
  <a href="#followFocus">followFocus</a>
273
282
  </li>
@@ -323,7 +332,41 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
323
332
  </tr>
324
333
  <tr>
325
334
  <td class="col-md-2" colspan="2">
326
- <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/tabs/tab-headers.component.ts:101</a></div>
335
+ <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/tabs/tab-headers.component.ts:104</a></div>
336
+ </td>
337
+ </tr>
338
+ </tbody>
339
+ </table>
340
+ <table class="table table-sm table-bordered">
341
+ <tbody>
342
+ <tr>
343
+ <td class="col-md-2">
344
+ <a name="contentAfter"></a>
345
+ <code>contentAfter</code>
346
+ </td>
347
+ <td class="col-md-10">
348
+ </td>
349
+ </tr>
350
+ <tr>
351
+ <td class="col-md-2" colspan="2">
352
+ <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/tabs/tab-headers.component.ts:115</a></div>
353
+ </td>
354
+ </tr>
355
+ </tbody>
356
+ </table>
357
+ <table class="table table-sm table-bordered">
358
+ <tbody>
359
+ <tr>
360
+ <td class="col-md-2">
361
+ <a name="contentBefore"></a>
362
+ <code>contentBefore</code>
363
+ </td>
364
+ <td class="col-md-10">
365
+ </td>
366
+ </tr>
367
+ <tr>
368
+ <td class="col-md-2" colspan="2">
369
+ <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/tabs/tab-headers.component.ts:114</a></div>
327
370
  </td>
328
371
  </tr>
329
372
  </tbody>
@@ -346,7 +389,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
346
389
  </tr>
347
390
  <tr>
348
391
  <td class="col-md-2" colspan="2">
349
- <div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/tabs/tab-headers.component.ts:105</a></div>
392
+ <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/tabs/tab-headers.component.ts:108</a></div>
350
393
  </td>
351
394
  </tr>
352
395
  </tbody>
@@ -368,7 +411,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
368
411
  </tr>
369
412
  <tr>
370
413
  <td class="col-md-2" colspan="2">
371
- <div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/tabs/tab-headers.component.ts:109</a></div>
414
+ <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/tabs/tab-headers.component.ts:112</a></div>
372
415
  </td>
373
416
  </tr>
374
417
  </tbody>
@@ -391,7 +434,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
391
434
  </tr>
392
435
  <tr>
393
436
  <td class="col-md-2" colspan="2">
394
- <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/tabs/tab-headers.component.ts:96</a></div>
437
+ <div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/tabs/tab-headers.component.ts:99</a></div>
395
438
  </td>
396
439
  </tr>
397
440
  </tbody>
@@ -427,7 +470,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
427
470
 
428
471
  <tr>
429
472
  <td class="col-md-4">
430
- <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/tabs/tab-headers.component.ts:142</a></div>
473
+ <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/tabs/tab-headers.component.ts:148</a></div>
431
474
  </td>
432
475
  </tr>
433
476
 
@@ -472,7 +515,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
472
515
 
473
516
  <tr>
474
517
  <td class="col-md-4">
475
- <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/tabs/tab-headers.component.ts:224</a></div>
518
+ <div class="io-line">Defined in <a href="" data-line="230" class="link-to-prism">src/tabs/tab-headers.component.ts:230</a></div>
476
519
  </td>
477
520
  </tr>
478
521
 
@@ -510,7 +553,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
510
553
 
511
554
  <tr>
512
555
  <td class="col-md-4">
513
- <div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/tabs/tab-headers.component.ts:201</a></div>
556
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/tabs/tab-headers.component.ts:207</a></div>
514
557
  </td>
515
558
  </tr>
516
559
 
@@ -550,7 +593,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
550
593
 
551
594
  <tr>
552
595
  <td class="col-md-4">
553
- <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/tabs/tab-headers.component.ts:218</a></div>
596
+ <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/tabs/tab-headers.component.ts:224</a></div>
554
597
  </td>
555
598
  </tr>
556
599
 
@@ -635,7 +678,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
635
678
 
636
679
  <tr>
637
680
  <td class="col-md-4">
638
- <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/tabs/tab-headers.component.ts:239</a></div>
681
+ <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/tabs/tab-headers.component.ts:245</a></div>
639
682
  </td>
640
683
  </tr>
641
684
 
@@ -732,7 +775,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
732
775
 
733
776
  <tr>
734
777
  <td class="col-md-4">
735
- <div class="io-line">Defined in <a href="" data-line="255" class="link-to-prism">src/tabs/tab-headers.component.ts:255</a></div>
778
+ <div class="io-line">Defined in <a href="" data-line="261" class="link-to-prism">src/tabs/tab-headers.component.ts:261</a></div>
736
779
  </td>
737
780
  </tr>
738
781
 
@@ -774,7 +817,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
774
817
 
775
818
  <tr>
776
819
  <td class="col-md-4">
777
- <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/tabs/tab-headers.component.ts:232</a></div>
820
+ <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/tabs/tab-headers.component.ts:238</a></div>
778
821
  </td>
779
822
  </tr>
780
823
 
@@ -833,7 +876,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
833
876
  </tr>
834
877
  <tr>
835
878
  <td class="col-md-4">
836
- <div class="io-line">Defined in <a href="" data-line="130" class="link-to-prism">src/tabs/tab-headers.component.ts:130</a></div>
879
+ <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/tabs/tab-headers.component.ts:136</a></div>
837
880
  </td>
838
881
  </tr>
839
882
 
@@ -874,7 +917,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
874
917
  </tr>
875
918
  <tr>
876
919
  <td class="col-md-4">
877
- <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/tabs/tab-headers.component.ts:134</a></div>
920
+ <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/tabs/tab-headers.component.ts:140</a></div>
878
921
  </td>
879
922
  </tr>
880
923
 
@@ -920,7 +963,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
920
963
  </tr>
921
964
  <tr>
922
965
  <td class="col-md-4">
923
- <div class="io-line">Defined in <a href="" data-line="126" class="link-to-prism">src/tabs/tab-headers.component.ts:126</a></div>
966
+ <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/tabs/tab-headers.component.ts:132</a></div>
924
967
  </td>
925
968
  </tr>
926
969
 
@@ -963,7 +1006,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
963
1006
  </tr>
964
1007
  <tr>
965
1008
  <td class="col-md-4">
966
- <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/tabs/tab-headers.component.ts:114</a></div>
1009
+ <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/tabs/tab-headers.component.ts:120</a></div>
967
1010
  </td>
968
1011
  </tr>
969
1012
 
@@ -1003,7 +1046,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
1003
1046
  </tr>
1004
1047
  <tr>
1005
1048
  <td class="col-md-4">
1006
- <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/tabs/tab-headers.component.ts:135</a></div>
1049
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/tabs/tab-headers.component.ts:141</a></div>
1007
1050
  </td>
1008
1051
  </tr>
1009
1052
 
@@ -1046,7 +1089,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
1046
1089
  </tr>
1047
1090
  <tr>
1048
1091
  <td class="col-md-4">
1049
- <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/tabs/tab-headers.component.ts:118</a></div>
1092
+ <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/tabs/tab-headers.component.ts:124</a></div>
1050
1093
  </td>
1051
1094
  </tr>
1052
1095
 
@@ -1087,7 +1130,7 @@ Duplicate from <code>n-tabs</code> to support standalone headers</p>
1087
1130
  </tr>
1088
1131
  <tr>
1089
1132
  <td class="col-md-4">
1090
- <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/tabs/tab-headers.component.ts:122</a></div>
1133
+ <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/tabs/tab-headers.component.ts:128</a></div>
1091
1134
  </td>
1092
1135
  </tr>
1093
1136
 
@@ -1158,6 +1201,9 @@ import { Tab } from &quot;./tab.component&quot;;
1158
1201
  }&quot;
1159
1202
  class&#x3D;&quot;bx--tabs__nav&quot;
1160
1203
  role&#x3D;&quot;tablist&quot;&gt;
1204
+ &lt;li role&#x3D;&quot;presentation&quot;&gt;
1205
+ &lt;ng-container *ngIf&#x3D;&quot;contentBefore&quot; [ngTemplateOutlet]&#x3D;&quot;contentBefore&quot;&gt;&lt;/ng-container&gt;
1206
+ &lt;/li&gt;
1161
1207
  &lt;li
1162
1208
  *ngFor&#x3D;&quot;let tab of tabs; let i &#x3D; index;&quot;
1163
1209
  [ngClass]&#x3D;&quot;{
@@ -1187,11 +1233,11 @@ import { Tab } from &quot;./tab.component&quot;;
1187
1233
  &lt;/ng-template&gt;
1188
1234
  &lt;/a&gt;
1189
1235
  &lt;/li&gt;
1236
+ &lt;li role&#x3D;&quot;presentation&quot;&gt;
1237
+ &lt;ng-container *ngIf&#x3D;&quot;contentAfter&quot; [ngTemplateOutlet]&#x3D;&quot;contentAfter&quot;&gt;&lt;/ng-container&gt;
1238
+ &lt;/li&gt;
1190
1239
  &lt;/ul&gt;
1191
1240
  &lt;/nav&gt;
1192
- &lt;div&gt;
1193
- &lt;ng-content select&#x3D;&quot;ibm-tab&quot;&gt;&lt;/ng-content&gt;
1194
- &lt;/div&gt;
1195
1241
  &#x60;
1196
1242
  })
1197
1243
 
@@ -1216,6 +1262,9 @@ export class TabHeaders implements AfterContentInit {
1216
1262
  */
1217
1263
  @Input() skeleton &#x3D; false;
1218
1264
 
1265
+ @Input() contentBefore;
1266
+ @Input() contentAfter;
1267
+
1219
1268
  /**
1220
1269
  * Gets the Unordered List element that holds the &#x60;Tab&#x60; headings from the view DOM.
1221
1270
  */
@@ -1403,7 +1452,7 @@ export class TabHeaders implements AfterContentInit {
1403
1452
  <script src="../js/libs/htmlparser.js"></script>
1404
1453
  <script src="../js/libs/deep-iterator.js"></script>
1405
1454
  <script>
1406
- var COMPONENT_TEMPLATE = '<div><nav class="bx--tabs" [ngClass]="{ \'bx--skeleton\': skeleton }" role="navigation"> <div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()"> <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"> <ng-container *ngIf="!getSelectedTab().headingIsTemplate"> {{ getSelectedTab().heading }} </ng-container> <ng-template *ngIf="getSelectedTab().headingIsTemplate" [ngTemplateOutlet]="getSelectedTab().heading"> </ng-template> </a> <svg width="10" height="5" viewBox="0 0 10 5"> <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path> </svg> </div> <ul #tabList [ngClass]="{ \'bx--tabs__nav--hidden\': !tabListVisible }" class="bx--tabs__nav" role="tablist"> <li *ngFor="let tab of tabs; let i = index;" [ngClass]="{ \'bx--tabs__nav-item--selected\': tab.active }" class="bx--tabs__nav-item" role="presentation" (click)="selectTab(tabref, tab, i)"> <a #tabItem [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" (focus)="onTabFocus(tabref, i)" draggable="false" id="{{tab.id}}-header" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </a> </li> </ul></nav><div> <ng-content select="ibm-tab"></ng-content></div></div>'
1455
+ var COMPONENT_TEMPLATE = '<div><nav class="bx--tabs" [ngClass]="{ \'bx--skeleton\': skeleton }" role="navigation"> <div class="bx--tabs-trigger" tabindex="0" (click)="showTabList()"> <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"> <ng-container *ngIf="!getSelectedTab().headingIsTemplate"> {{ getSelectedTab().heading }} </ng-container> <ng-template *ngIf="getSelectedTab().headingIsTemplate" [ngTemplateOutlet]="getSelectedTab().heading"> </ng-template> </a> <svg width="10" height="5" viewBox="0 0 10 5"> <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path> </svg> </div> <ul #tabList [ngClass]="{ \'bx--tabs__nav--hidden\': !tabListVisible }" class="bx--tabs__nav" role="tablist"> <li role="presentation"> <ng-container *ngIf="contentBefore" [ngTemplateOutlet]="contentBefore"></ng-container> </li> <li *ngFor="let tab of tabs; let i = index;" [ngClass]="{ \'bx--tabs__nav-item--selected\': tab.active }" class="bx--tabs__nav-item" role="presentation" (click)="selectTab(tabref, tab, i)"> <a #tabItem [attr.aria-selected]="tab.active" [attr.tabindex]="(tab.active?0:-1)" [attr.aria-controls]="tab.id" (focus)="onTabFocus(tabref, i)" draggable="false" id="{{tab.id}}-header" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"> <ng-container *ngIf="!tab.headingIsTemplate"> {{ tab.heading }} </ng-container> <ng-template *ngIf="tab.headingIsTemplate" [ngTemplateOutlet]="tab.heading" [ngTemplateOutletContext]="{$implicit: tab.context}"> </ng-template> </a> </li> <li role="presentation"> <ng-container *ngIf="contentAfter" [ngTemplateOutlet]="contentAfter"></ng-container> </li> </ul></nav></div>'
1407
1456
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
1408
1457
  var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
1409
1458
  var ACTUAL_COMPONENT = {'name': 'TabHeaders'};
package/docs/documentation/components/Tabs.html CHANGED
@@ -123,9 +123,17 @@ This is the parent of the <code>Tab</code> and <code>TabHeader</code> components
123
123
  [skeleton]&#x3D;&quot;skeleton&quot;
124
124
  [tabs]&#x3D;&quot;tabs&quot;
125
125
  [followFocus]&#x3D;&quot;followFocus&quot;
126
- [cacheActive]&#x3D;&quot;cacheActive&quot;&gt;
126
+ [cacheActive]&#x3D;&quot;cacheActive&quot;
127
+ [contentBefore]&#x3D;&quot;before&quot;
128
+ [contentAfter]&#x3D;&quot;after&quot;&gt;
127
129
  &lt;/ibm-tab-headers&gt;
128
130
  &lt;ng-content&gt;&lt;/ng-content&gt;
131
+ &lt;ng-template #before&gt;
132
+ &lt;ng-content select&#x3D;&quot;[before]&quot;&gt;&lt;/ng-content&gt;
133
+ &lt;/ng-template&gt;
134
+ &lt;ng-template #after&gt;
135
+ &lt;ng-content select&#x3D;&quot;[after]&quot;&gt;&lt;/ng-content&gt;
136
+ &lt;/ng-template&gt;
129
137
  &lt;ibm-tab-headers
130
138
  *ngIf&#x3D;&quot;hasTabHeaders() &amp;&amp; position &#x3D;&#x3D;&#x3D; &#x27;bottom&#x27;&quot;
131
139
  [skeleton]&#x3D;&quot;skeleton&quot;
@@ -241,7 +249,7 @@ This is the parent of the <code>Tab</code> and <code>TabHeader</code> components
241
249
  </tr>
242
250
  <tr>
243
251
  <td class="col-md-2" colspan="2">
244
- <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/tabs/tabs.component.ts:67</a></div>
252
+ <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/tabs/tabs.component.ts:75</a></div>
245
253
  </td>
246
254
  </tr>
247
255
  </tbody>
@@ -263,7 +271,7 @@ This is the parent of the <code>Tab</code> and <code>TabHeader</code> components
263
271
  </tr>
264
272
  <tr>
265
273
  <td class="col-md-2" colspan="2">
266
- <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/tabs/tabs.component.ts:71</a></div>
274
+ <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/tabs/tabs.component.ts:79</a></div>
267
275
  </td>
268
276
  </tr>
269
277
  </tbody>
@@ -285,7 +293,7 @@ This is the parent of the <code>Tab</code> and <code>TabHeader</code> components
285
293
  </tr>
286
294
  <tr>
287
295
  <td class="col-md-2" colspan="2">
288
- <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/tabs/tabs.component.ts:79</a></div>
296
+ <div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/tabs/tabs.component.ts:87</a></div>
289
297
  </td>
290
298
  </tr>
291
299
  </tbody>
@@ -312,7 +320,7 @@ relative to the <code>TabPanel</code>s.</p>
312
320
  </tr>
313
321
  <tr>
314
322
  <td class="col-md-2" colspan="2">
315
- <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/tabs/tabs.component.ts:63</a></div>
323
+ <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/tabs/tabs.component.ts:71</a></div>
316
324
  </td>
317
325
  </tr>
318
326
  </tbody>
@@ -334,7 +342,7 @@ relative to the <code>TabPanel</code>s.</p>
334
342
  </tr>
335
343
  <tr>
336
344
  <td class="col-md-2" colspan="2">
337
- <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/tabs/tabs.component.ts:75</a></div>
345
+ <div class="io-line">Defined in <a href="" data-line="83" class="link-to-prism">src/tabs/tabs.component.ts:83</a></div>
338
346
  </td>
339
347
  </tr>
340
348
  </tbody>
@@ -370,7 +378,7 @@ relative to the <code>TabPanel</code>s.</p>
370
378
 
371
379
  <tr>
372
380
  <td class="col-md-4">
373
- <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/tabs/tabs.component.ts:107</a></div>
381
+ <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/tabs/tabs.component.ts:115</a></div>
374
382
  </td>
375
383
  </tr>
376
384
 
@@ -410,7 +418,7 @@ relative to the <code>TabPanel</code>s.</p>
410
418
 
411
419
  <tr>
412
420
  <td class="col-md-4">
413
- <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/tabs/tabs.component.ts:94</a></div>
421
+ <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/tabs/tabs.component.ts:102</a></div>
414
422
  </td>
415
423
  </tr>
416
424
 
@@ -466,7 +474,7 @@ selected Tab item.</p>
466
474
  </tr>
467
475
  <tr>
468
476
  <td class="col-md-4">
469
- <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/tabs/tabs.component.ts:88</a></div>
477
+ <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/tabs/tabs.component.ts:96</a></div>
470
478
  </td>
471
479
  </tr>
472
480
 
@@ -515,7 +523,7 @@ selected Tab item.</p>
515
523
  </tr>
516
524
  <tr>
517
525
  <td class="col-md-4">
518
- <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/tabs/tabs.component.ts:84</a></div>
526
+ <div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/tabs/tabs.component.ts:92</a></div>
519
527
  </td>
520
528
  </tr>
521
529
 
@@ -580,9 +588,17 @@ import { TabHeaders } from &quot;./tab-headers.component&quot;;
580
588
  [skeleton]&#x3D;&quot;skeleton&quot;
581
589
  [tabs]&#x3D;&quot;tabs&quot;
582
590
  [followFocus]&#x3D;&quot;followFocus&quot;
583
- [cacheActive]&#x3D;&quot;cacheActive&quot;&gt;
591
+ [cacheActive]&#x3D;&quot;cacheActive&quot;
592
+ [contentBefore]&#x3D;&quot;before&quot;
593
+ [contentAfter]&#x3D;&quot;after&quot;&gt;
584
594
  &lt;/ibm-tab-headers&gt;
585
595
  &lt;ng-content&gt;&lt;/ng-content&gt;
596
+ &lt;ng-template #before&gt;
597
+ &lt;ng-content select&#x3D;&quot;[before]&quot;&gt;&lt;/ng-content&gt;
598
+ &lt;/ng-template&gt;
599
+ &lt;ng-template #after&gt;
600
+ &lt;ng-content select&#x3D;&quot;[after]&quot;&gt;&lt;/ng-content&gt;
601
+ &lt;/ng-template&gt;
586
602
  &lt;ibm-tab-headers
587
603
  *ngIf&#x3D;&quot;hasTabHeaders() &amp;&amp; position &#x3D;&#x3D;&#x3D; &#x27;bottom&#x27;&quot;
588
604
  [skeleton]&#x3D;&quot;skeleton&quot;
@@ -674,7 +690,7 @@ export class Tabs implements AfterContentInit {
674
690
  <script src="../js/libs/htmlparser.js"></script>
675
691
  <script src="../js/libs/deep-iterator.js"></script>
676
692
  <script>
677
- var COMPONENT_TEMPLATE = '<div><ibm-tab-headers *ngIf="hasTabHeaders() && position === \'top\'" [skeleton]="skeleton" [tabs]="tabs" [followFocus]="followFocus" [cacheActive]="cacheActive"></ibm-tab-headers><ng-content></ng-content><ibm-tab-headers *ngIf="hasTabHeaders() && position === \'bottom\'" [skeleton]="skeleton" [tabs]="tabs" [cacheActive]="cacheActive"></ibm-tab-headers> </div>'
693
+ var COMPONENT_TEMPLATE = '<div><ibm-tab-headers *ngIf="hasTabHeaders() && position === \'top\'" [skeleton]="skeleton" [tabs]="tabs" [followFocus]="followFocus" [cacheActive]="cacheActive" [contentBefore]="before" [contentAfter]="after"></ibm-tab-headers><ng-content></ng-content><ng-template #before> <ng-content select="[before]"></ng-content></ng-template><ng-template #after> <ng-content select="[after]"></ng-content></ng-template><ibm-tab-headers *ngIf="hasTabHeaders() && position === \'bottom\'" [skeleton]="skeleton" [tabs]="tabs" [cacheActive]="cacheActive"></ibm-tab-headers> </div>'
678
694
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
679
695
  var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
680
696
  var ACTUAL_COMPONENT = {'name': 'Tabs'};
package/docs/documentation/components/TagFilter.html CHANGED
@@ -94,6 +94,7 @@
94
94
  <td class="col-md-3">template</td>
95
95
  <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;ng-content&gt;&lt;/ng-content&gt;
96
96
  &lt;svg
97
+ (click)&#x3D;&quot;close.emit()&quot;
97
98
  focusable&#x3D;&quot;false&quot;
98
99
  preserveAspectRatio&#x3D;&quot;xMidYMid meet&quot;
99
100
  style&#x3D;&quot;will-change: transform;&quot;
@@ -144,6 +145,20 @@
144
145
  </td>
145
146
  </tr>
146
147
 
148
+ <tr>
149
+ <td class="col-md-4">
150
+ <h6><b>Outputs</b></h6>
151
+ </td>
152
+ </tr>
153
+ <tr>
154
+ <td class="col-md-4">
155
+ <ul class="index-list">
156
+ <li>
157
+ <a href="#close">close</a>
158
+ </li>
159
+ </ul>
160
+ </td>
161
+ </tr>
147
162
 
148
163
  <tr>
149
164
  <td class="col-md-4">
@@ -231,7 +246,30 @@
231
246
  </tbody>
232
247
  </table>
233
248
  </section>
249
+ <section>
250
+ <h3 id="outputs">Outputs</h3>
251
+ <table class="table table-sm table-bordered">
252
+ <tbody>
253
+ <tr>
254
+ <td class="col-md-2">
255
+ <a name="close"></a>
256
+ <code>close</code>
257
+ </td>
258
+ <td class="col-md-10">
259
+ <div><p>Function for close/delete the tag</p>
260
+ </div>
261
+ <em><code>$event</code> Type:</em> <code><a href="https://angular.io/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
234
262
 
263
+ </td>
264
+ </tr>
265
+ <tr>
266
+ <td class="col-md-2" colspan="2">
267
+ <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/tag/tag-filter.component.ts:32</a></div>
268
+ </td>
269
+ </tr>
270
+ </tbody>
271
+ </table>
272
+ </section>
235
273
  <section>
236
274
  <h3>HostBindings</h3> <table class="table table-sm table-bordered">
237
275
  <tbody>
@@ -254,7 +292,7 @@
254
292
  </tr>
255
293
  <tr>
256
294
  <td class="col-md-4">
257
- <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/tag/tag-filter.component.ts:23</a></div>
295
+ <div class="io-line">Defined in <a href="" data-line="34" class="link-to-prism">src/tag/tag-filter.component.ts:34</a></div>
258
296
  </td>
259
297
  </tr>
260
298
 
@@ -304,7 +342,12 @@
304
342
 
305
343
 
306
344
  <div class="tab-pane fade tab-source-code" id="c-source">
307
- <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, HostBinding } from &quot;@angular/core&quot;;
345
+ <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
346
+ Component,
347
+ Output,
348
+ EventEmitter,
349
+ HostBinding
350
+ } from &quot;@angular/core&quot;;
308
351
  import { Tag } from &quot;./tag.component&quot;;
309
352
 
310
353
  @Component({
@@ -312,6 +355,7 @@ import { Tag } from &quot;./tag.component&quot;;
312
355
  template: &#x60;
313
356
  &lt;ng-content&gt;&lt;/ng-content&gt;
314
357
  &lt;svg
358
+ (click)&#x3D;&quot;close.emit()&quot;
315
359
  focusable&#x3D;&quot;false&quot;
316
360
  preserveAspectRatio&#x3D;&quot;xMidYMid meet&quot;
317
361
  style&#x3D;&quot;will-change: transform;&quot;
@@ -326,6 +370,11 @@ import { Tag } from &quot;./tag.component&quot;;
326
370
  &#x60;
327
371
  })
328
372
  export class TagFilter extends Tag {
373
+ /**
374
+ * Function for close/delete the tag
375
+ */
376
+ @Output() close &#x3D; new EventEmitter&lt;any&gt;();
377
+
329
378
  @HostBinding(&quot;attr.class&quot;) get attrClass() {
330
379
  return &#x60;bx--tag bx--tag--filter bx--tag--${this.type} ${this.class}&#x60;;
331
380
  }
@@ -360,7 +409,7 @@ export class TagFilter extends Tag {
360
409
  <script src="../js/libs/htmlparser.js"></script>
361
410
  <script src="../js/libs/deep-iterator.js"></script>
362
411
  <script>
363
- var COMPONENT_TEMPLATE = '<div><ng-content></ng-content><svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Clear filter" width="16" height="16" viewBox="0 0 16 16" role="img"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg> </div>'
412
+ var COMPONENT_TEMPLATE = '<div><ng-content></ng-content><svg (click)="close.emit()" focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Clear filter" width="16" height="16" viewBox="0 0 16 16" role="img"> <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg> </div>'
364
413
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'Breadcrumb', 'selector': 'ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'ibm-breadcrumb-item'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'DatePicker', 'selector': 'ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'ibm-expandable-tile'},{'name': 'File', 'selector': 'ibm-file'},{'name': 'FileUploader', 'selector': 'ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'ibm-hamburger'},{'name': 'Header', 'selector': 'ibm-header'},{'name': 'HeaderAction', 'selector': 'ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'ibm-header-global'},{'name': 'HeaderItem', 'selector': 'ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'ibm-header-navigation'},{'name': 'InlineLoading', 'selector': 'ibm-inline-loading'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListColumn', 'selector': 'ibm-list-column'},{'name': 'ListHeader', 'selector': 'ibm-list-header'},{'name': 'ListRow', 'selector': 'ibm-list-row'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'Number', 'selector': 'ibm-number'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Search', 'selector': 'ibm-search'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'SelectionTile', 'selector': 'ibm-selection-tile'},{'name': 'SideNav', 'selector': 'ibm-sidenav'},{'name': 'SideNavHeader', 'selector': 'ibm-sidenav-header'},{'name': 'SideNavItem', 'selector': 'ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'ibm-sidenav-menu'},{'name': 'Slider', 'selector': 'ibm-slider'},{'name': 'StructuredList', 'selector': 'ibm-structured-list'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableToolbar', 'selector': 'ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tag', 'selector': 'ibm-tag'},{'name': 'TagFilter', 'selector': 'ibm-tag-filter'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'TileGroup', 'selector': 'ibm-tile-group'},{'name': 'TimePicker', 'selector': 'ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'ibm-timepicker-select'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'ibm-tooltip-definition'},{'name': 'TooltipIcon', 'selector': 'ibm-tooltip-icon'}];
365
414
  var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ColumnDirective', 'selector': '[ibmCol]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DataGridFocus', 'selector': '[ibmDataGridFocus]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'ExpandedRowHover', 'selector': '[ibmExpandedRowHover]'},{'name': 'GridDirective', 'selector': '[ibmGrid]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'List', 'selector': '[ibmList]'},{'name': 'ListItemDirective', 'selector': '[ibmListItem]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'RowDirective', 'selector': '[ibmRow]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
366
415
  var ACTUAL_COMPONENT = {'name': 'TagFilter'};