carbon-components-angular 5.20.0 → 5.20.1

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 (66) hide show
  1. package/README.md +9 -0
  2. package/docs/documentation/components/CodeSnippet.html +81 -71
  3. package/docs/documentation/dependencies.html +2 -2
  4. package/docs/documentation/index.html +7 -0
  5. package/docs/documentation/js/search/search_index.js +2 -2
  6. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  7. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  8. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  10. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
  11. package/docs/documentation/modules/DatePickerInputModule.html +7 -7
  12. package/docs/documentation/modules/DatePickerModule/dependencies.svg +53 -57
  13. package/docs/documentation/modules/DatePickerModule.html +53 -57
  14. package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
  15. package/docs/documentation/modules/DialogModule.html +34 -34
  16. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  17. package/docs/documentation/modules/GridModule.html +60 -60
  18. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/LoadingModule.html +4 -4
  20. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  21. package/docs/documentation/modules/NFormsModule.html +4 -4
  22. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/NumberModule.html +4 -4
  24. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  26. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  27. package/docs/documentation/modules/RadioModule.html +4 -4
  28. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  29. package/docs/documentation/modules/SearchModule.html +4 -4
  30. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  31. package/docs/documentation/modules/SelectModule.html +58 -58
  32. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  33. package/docs/documentation/modules/SliderModule.html +4 -4
  34. package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
  35. package/docs/documentation/modules/StructuredListModule.html +66 -66
  36. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  37. package/docs/documentation/modules/TabsModule.html +69 -69
  38. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  39. package/docs/documentation/modules/TagModule.html +4 -4
  40. package/docs/documentation/modules/TilesModule/dependencies.svg +100 -100
  41. package/docs/documentation/modules/TilesModule.html +100 -100
  42. package/docs/documentation/modules/TimePickerModule/dependencies.svg +20 -20
  43. package/docs/documentation/modules/TimePickerModule.html +20 -20
  44. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +46 -42
  45. package/docs/documentation/modules/TimePickerSelectModule.html +46 -42
  46. package/docs/documentation/modules/ToggleModule/dependencies.svg +45 -41
  47. package/docs/documentation/modules/ToggleModule.html +45 -41
  48. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  49. package/docs/documentation/modules/ToggletipModule.html +4 -4
  50. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  51. package/docs/documentation/modules/TooltipModule.html +4 -4
  52. package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
  53. package/docs/documentation/modules/TreeviewModule.html +34 -34
  54. package/docs/documentation.json +49 -49
  55. package/docs/storybook/{code-snippet-code-snippet-stories.5c727944.iframe.bundle.js → code-snippet-code-snippet-stories.d9a3162d.iframe.bundle.js} +1 -1
  56. package/docs/storybook/iframe.html +2 -2
  57. package/docs/storybook/main.b12cb86b.iframe.bundle.js +1 -0
  58. package/docs/storybook/project.json +1 -1
  59. package/docs/storybook/{runtime~main.3b1ae09e.iframe.bundle.js → runtime~main.2d269ad5.iframe.bundle.js} +1 -1
  60. package/esm2020/code-snippet/code-snippet.component.mjs +27 -18
  61. package/fesm2015/carbon-components-angular-code-snippet.mjs +26 -17
  62. package/fesm2015/carbon-components-angular-code-snippet.mjs.map +1 -1
  63. package/fesm2020/carbon-components-angular-code-snippet.mjs +26 -17
  64. package/fesm2020/carbon-components-angular-code-snippet.mjs.map +1 -1
  65. package/package.json +1 -1
  66. package/docs/storybook/main.aec7fc6c.iframe.bundle.js +0 -1
package/docs/documentation/components/CodeSnippet.html CHANGED
@@ -127,7 +127,9 @@
127
127
  [ngClass]="{
128
128
  'cds--snippet--light': theme === 'light'
129
129
  }">
130
- <ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
130
+ <code #code>
131
+ <ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
132
+ </code>
131
133
  </span>
132
134
  </ng-template>
133
135
  </ng-container>
@@ -152,7 +154,7 @@
152
154
  <pre
153
155
  #codeContent
154
156
  *ngIf="!skeleton"
155
- (scroll)="(display === 'multi' ? handleScroll() : null)"><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre>
157
+ (scroll)="(display === 'multi' ? handleScroll() : null)"><code #code><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></code></pre>
156
158
  </div>
157
159
  <div *ngIf="hasLeft" class="cds--snippet__overflow-indicator--left"></div>
158
160
  <div *ngIf="hasRight" class="cds--snippet__overflow-indicator--right"></div>
@@ -198,7 +200,9 @@
198
200
  'tabindex': '0'
199
201
  }">
200
202
  <ng-container *ngIf="display === 'inline'">
201
- <ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
203
+ <code #code>
204
+ <ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
205
+ </code>
202
206
  </ng-container>
203
207
  <ng-container *ngIf="display !== 'inline'">
204
208
  <svg cdsIcon="copy" size="16" class="cds--snippet__icon"></svg>
@@ -207,7 +211,7 @@
207
211
  </ng-template>
208
212
 
209
213
  <ng-template #codeTemplate>
210
- <code #code><ng-content></ng-content></code>
214
+ <ng-content></ng-content>
211
215
  </ng-template>
212
216
  </code></pre></td>
213
217
  </tr>
@@ -462,7 +466,7 @@
462
466
  </tr>
463
467
  <tr>
464
468
  <td class="col-md-4">
465
- <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/code-snippet/code-snippet.component.ts:220</a></div>
469
+ <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/code-snippet/code-snippet.component.ts:224</a></div>
466
470
  </td>
467
471
  </tr>
468
472
 
@@ -532,7 +536,7 @@
532
536
  </tr>
533
537
  <tr>
534
538
  <td class="col-md-2" colspan="2">
535
- <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/code-snippet/code-snippet.component.ts:157</a></div>
539
+ <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/code-snippet/code-snippet.component.ts:161</a></div>
536
540
  </td>
537
541
  </tr>
538
542
  <tr>
@@ -564,7 +568,7 @@
564
568
  </tr>
565
569
  <tr>
566
570
  <td class="col-md-2" colspan="2">
567
- <div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/code-snippet/code-snippet.component.ts:165</a></div>
571
+ <div class="io-line">Defined in <a href="" data-line="169" class="link-to-prism">src/code-snippet/code-snippet.component.ts:169</a></div>
568
572
  </td>
569
573
  </tr>
570
574
  <tr>
@@ -596,7 +600,7 @@
596
600
  </tr>
597
601
  <tr>
598
602
  <td class="col-md-2" colspan="2">
599
- <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/code-snippet/code-snippet.component.ts:152</a></div>
603
+ <div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/code-snippet/code-snippet.component.ts:156</a></div>
600
604
  </td>
601
605
  </tr>
602
606
  <tr>
@@ -628,7 +632,7 @@
628
632
  </tr>
629
633
  <tr>
630
634
  <td class="col-md-2" colspan="2">
631
- <div class="io-line">Defined in <a href="" data-line="205" class="link-to-prism">src/code-snippet/code-snippet.component.ts:205</a></div>
635
+ <div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/code-snippet/code-snippet.component.ts:209</a></div>
632
636
  </td>
633
637
  </tr>
634
638
  </tbody>
@@ -654,7 +658,7 @@
654
658
  </tr>
655
659
  <tr>
656
660
  <td class="col-md-2" colspan="2">
657
- <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/code-snippet/code-snippet.component.ts:198</a></div>
661
+ <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/code-snippet/code-snippet.component.ts:202</a></div>
658
662
  </td>
659
663
  </tr>
660
664
  <tr>
@@ -686,7 +690,7 @@
686
690
  </tr>
687
691
  <tr>
688
692
  <td class="col-md-2" colspan="2">
689
- <div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/code-snippet/code-snippet.component.ts:203</a></div>
693
+ <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/code-snippet/code-snippet.component.ts:207</a></div>
690
694
  </td>
691
695
  </tr>
692
696
  <tr>
@@ -719,7 +723,7 @@ Defaults to 2 seconds</p>
719
723
  </tr>
720
724
  <tr>
721
725
  <td class="col-md-2" colspan="2">
722
- <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/code-snippet/code-snippet.component.ts:161</a></div>
726
+ <div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/code-snippet/code-snippet.component.ts:165</a></div>
723
727
  </td>
724
728
  </tr>
725
729
  <tr>
@@ -751,7 +755,7 @@ Defaults to 2 seconds</p>
751
755
  </tr>
752
756
  <tr>
753
757
  <td class="col-md-2" colspan="2">
754
- <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/code-snippet/code-snippet.component.ts:170</a></div>
758
+ <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/code-snippet/code-snippet.component.ts:174</a></div>
755
759
  </td>
756
760
  </tr>
757
761
  <tr>
@@ -784,7 +788,7 @@ Default is <code>15</code></p>
784
788
  </tr>
785
789
  <tr>
786
790
  <td class="col-md-2" colspan="2">
787
- <div class="io-line">Defined in <a href="" data-line="180" class="link-to-prism">src/code-snippet/code-snippet.component.ts:180</a></div>
791
+ <div class="io-line">Defined in <a href="" data-line="184" class="link-to-prism">src/code-snippet/code-snippet.component.ts:184</a></div>
788
792
  </td>
789
793
  </tr>
790
794
  <tr>
@@ -817,7 +821,7 @@ Default is <code>0</code>, hence all content will be visible when expanded</p>
817
821
  </tr>
818
822
  <tr>
819
823
  <td class="col-md-2" colspan="2">
820
- <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/code-snippet/code-snippet.component.ts:175</a></div>
824
+ <div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/code-snippet/code-snippet.component.ts:179</a></div>
821
825
  </td>
822
826
  </tr>
823
827
  <tr>
@@ -850,7 +854,7 @@ Default is <code>3</code></p>
850
854
  </tr>
851
855
  <tr>
852
856
  <td class="col-md-2" colspan="2">
853
- <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/code-snippet/code-snippet.component.ts:185</a></div>
857
+ <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/code-snippet/code-snippet.component.ts:189</a></div>
854
858
  </td>
855
859
  </tr>
856
860
  <tr>
@@ -883,7 +887,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
883
887
  </tr>
884
888
  <tr>
885
889
  <td class="col-md-2" colspan="2">
886
- <div class="io-line">Defined in <a href="" data-line="206" class="link-to-prism">src/code-snippet/code-snippet.component.ts:206</a></div>
890
+ <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/code-snippet/code-snippet.component.ts:210</a></div>
887
891
  </td>
888
892
  </tr>
889
893
  </tbody>
@@ -909,7 +913,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
909
913
  </tr>
910
914
  <tr>
911
915
  <td class="col-md-2" colspan="2">
912
- <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/code-snippet/code-snippet.component.ts:194</a></div>
916
+ <div class="io-line">Defined in <a href="" data-line="198" class="link-to-prism">src/code-snippet/code-snippet.component.ts:198</a></div>
913
917
  </td>
914
918
  </tr>
915
919
  </tbody>
@@ -935,7 +939,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
935
939
  </tr>
936
940
  <tr>
937
941
  <td class="col-md-2" colspan="2">
938
- <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/code-snippet/code-snippet.component.ts:153</a></div>
942
+ <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/code-snippet/code-snippet.component.ts:157</a></div>
939
943
  </td>
940
944
  </tr>
941
945
  </tbody>
@@ -961,7 +965,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
961
965
  </tr>
962
966
  <tr>
963
967
  <td class="col-md-2" colspan="2">
964
- <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/code-snippet/code-snippet.component.ts:189</a></div>
968
+ <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/code-snippet/code-snippet.component.ts:193</a></div>
965
969
  </td>
966
970
  </tr>
967
971
  <tr>
@@ -1267,7 +1271,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1267
1271
  </tr>
1268
1272
  <tr>
1269
1273
  <td class="col-md-4">
1270
- <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/code-snippet/code-snippet.component.ts:131</a></div>
1274
+ <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/code-snippet/code-snippet.component.ts:135</a></div>
1271
1275
  </td>
1272
1276
  </tr>
1273
1277
 
@@ -1293,7 +1297,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1293
1297
  </tr>
1294
1298
  <tr>
1295
1299
  <td class="col-md-4">
1296
- <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/code-snippet/code-snippet.component.ts:140</a></div>
1300
+ <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/code-snippet/code-snippet.component.ts:144</a></div>
1297
1301
  </td>
1298
1302
  </tr>
1299
1303
 
@@ -1319,7 +1323,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1319
1323
  </tr>
1320
1324
  <tr>
1321
1325
  <td class="col-md-4">
1322
- <div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/code-snippet/code-snippet.component.ts:143</a></div>
1326
+ <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/code-snippet/code-snippet.component.ts:147</a></div>
1323
1327
  </td>
1324
1328
  </tr>
1325
1329
 
@@ -1345,7 +1349,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1345
1349
  </tr>
1346
1350
  <tr>
1347
1351
  <td class="col-md-4">
1348
- <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/code-snippet/code-snippet.component.ts:137</a></div>
1352
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/code-snippet/code-snippet.component.ts:141</a></div>
1349
1353
  </td>
1350
1354
  </tr>
1351
1355
 
@@ -1371,7 +1375,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1371
1375
  </tr>
1372
1376
  <tr>
1373
1377
  <td class="col-md-4">
1374
- <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/code-snippet/code-snippet.component.ts:134</a></div>
1378
+ <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/code-snippet/code-snippet.component.ts:138</a></div>
1375
1379
  </td>
1376
1380
  </tr>
1377
1381
 
@@ -1406,8 +1410,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1406
1410
 
1407
1411
  <tr>
1408
1412
  <td class="col-md-4">
1409
- <div class="io-line">Defined in <a href="" data-line="290"
1410
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:290</a></div>
1413
+ <div class="io-line">Defined in <a href="" data-line="296"
1414
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:296</a></div>
1411
1415
  </td>
1412
1416
  </tr>
1413
1417
 
@@ -1445,8 +1449,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1445
1449
 
1446
1450
  <tr>
1447
1451
  <td class="col-md-4">
1448
- <div class="io-line">Defined in <a href="" data-line="311"
1449
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:311</a></div>
1452
+ <div class="io-line">Defined in <a href="" data-line="317"
1453
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:317</a></div>
1450
1454
  </td>
1451
1455
  </tr>
1452
1456
 
@@ -1482,8 +1486,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1482
1486
 
1483
1487
  <tr>
1484
1488
  <td class="col-md-4">
1485
- <div class="io-line">Defined in <a href="" data-line="230"
1486
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:230</a></div>
1489
+ <div class="io-line">Defined in <a href="" data-line="234"
1490
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:234</a></div>
1487
1491
  </td>
1488
1492
  </tr>
1489
1493
 
@@ -1519,8 +1523,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1519
1523
 
1520
1524
  <tr>
1521
1525
  <td class="col-md-4">
1522
- <div class="io-line">Defined in <a href="" data-line="283"
1523
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:283</a></div>
1526
+ <div class="io-line">Defined in <a href="" data-line="285"
1527
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:285</a></div>
1524
1528
  </td>
1525
1529
  </tr>
1526
1530
 
@@ -1556,8 +1560,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1556
1560
 
1557
1561
  <tr>
1558
1562
  <td class="col-md-4">
1559
- <div class="io-line">Defined in <a href="" data-line="273"
1560
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:273</a></div>
1563
+ <div class="io-line">Defined in <a href="" data-line="281"
1564
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:281</a></div>
1561
1565
  </td>
1562
1566
  </tr>
1563
1567
 
@@ -1593,8 +1597,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1593
1597
 
1594
1598
  <tr>
1595
1599
  <td class="col-md-4">
1596
- <div class="io-line">Defined in <a href="" data-line="259"
1597
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:259</a></div>
1600
+ <div class="io-line">Defined in <a href="" data-line="267"
1601
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:267</a></div>
1598
1602
  </td>
1599
1603
  </tr>
1600
1604
 
@@ -1630,8 +1634,8 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1630
1634
 
1631
1635
  <tr>
1632
1636
  <td class="col-md-4">
1633
- <div class="io-line">Defined in <a href="" data-line="254"
1634
- class="link-to-prism">src/code-snippet/code-snippet.component.ts:254</a></div>
1637
+ <div class="io-line">Defined in <a href="" data-line="262"
1638
+ class="link-to-prism">src/code-snippet/code-snippet.component.ts:262</a></div>
1635
1639
  </td>
1636
1640
  </tr>
1637
1641
 
@@ -1671,7 +1675,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1671
1675
  </tr>
1672
1676
  <tr>
1673
1677
  <td class="col-md-4">
1674
- <div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/code-snippet/code-snippet.component.ts:214</a></div>
1678
+ <div class="io-line">Defined in <a href="" data-line="218" class="link-to-prism">src/code-snippet/code-snippet.component.ts:218</a></div>
1675
1679
  </td>
1676
1680
  </tr>
1677
1681
 
@@ -1701,7 +1705,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1701
1705
  </tr>
1702
1706
  <tr>
1703
1707
  <td class="col-md-4">
1704
- <div class="io-line">Defined in <a href="" data-line="209" class="link-to-prism">src/code-snippet/code-snippet.component.ts:209</a></div>
1708
+ <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/code-snippet/code-snippet.component.ts:213</a></div>
1705
1709
  </td>
1706
1710
  </tr>
1707
1711
 
@@ -1731,7 +1735,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1731
1735
  </tr>
1732
1736
  <tr>
1733
1737
  <td class="col-md-4">
1734
- <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/code-snippet/code-snippet.component.ts:211</a></div>
1738
+ <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/code-snippet/code-snippet.component.ts:215</a></div>
1735
1739
  </td>
1736
1740
  </tr>
1737
1741
 
@@ -1761,7 +1765,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1761
1765
  </tr>
1762
1766
  <tr>
1763
1767
  <td class="col-md-4">
1764
- <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/code-snippet/code-snippet.component.ts:210</a></div>
1768
+ <div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/code-snippet/code-snippet.component.ts:214</a></div>
1765
1769
  </td>
1766
1770
  </tr>
1767
1771
 
@@ -1792,7 +1796,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1792
1796
  </tr>
1793
1797
  <tr>
1794
1798
  <td class="col-md-4">
1795
- <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/code-snippet/code-snippet.component.ts:215</a></div>
1799
+ <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/code-snippet/code-snippet.component.ts:219</a></div>
1796
1800
  </td>
1797
1801
  </tr>
1798
1802
 
@@ -1817,7 +1821,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1817
1821
  </tr>
1818
1822
  <tr>
1819
1823
  <td class="col-md-4">
1820
- <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/code-snippet/code-snippet.component.ts:220</a></div>
1824
+ <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/code-snippet/code-snippet.component.ts:224</a></div>
1821
1825
  </td>
1822
1826
  </tr>
1823
1827
 
@@ -1842,7 +1846,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1842
1846
  </tr>
1843
1847
  <tr>
1844
1848
  <td class="col-md-4">
1845
- <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/code-snippet/code-snippet.component.ts:219</a></div>
1849
+ <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/code-snippet/code-snippet.component.ts:223</a></div>
1846
1850
  </td>
1847
1851
  </tr>
1848
1852
 
@@ -1867,7 +1871,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1867
1871
  </tr>
1868
1872
  <tr>
1869
1873
  <td class="col-md-4">
1870
- <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/code-snippet/code-snippet.component.ts:217</a></div>
1874
+ <div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/code-snippet/code-snippet.component.ts:221</a></div>
1871
1875
  </td>
1872
1876
  </tr>
1873
1877
 
@@ -1892,7 +1896,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1892
1896
  </tr>
1893
1897
  <tr>
1894
1898
  <td class="col-md-4">
1895
- <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/code-snippet/code-snippet.component.ts:216</a></div>
1899
+ <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/code-snippet/code-snippet.component.ts:220</a></div>
1896
1900
  </td>
1897
1901
  </tr>
1898
1902
 
@@ -1924,7 +1928,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1924
1928
  </tr>
1925
1929
  <tr>
1926
1930
  <td class="col-md-4">
1927
- <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/code-snippet/code-snippet.component.ts:147</a></div>
1931
+ <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/code-snippet/code-snippet.component.ts:151</a></div>
1928
1932
  </td>
1929
1933
  </tr>
1930
1934
 
@@ -1949,7 +1953,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1949
1953
  </tr>
1950
1954
  <tr>
1951
1955
  <td class="col-md-4">
1952
- <div class="io-line">Defined in <a href="" data-line="213" class="link-to-prism">src/code-snippet/code-snippet.component.ts:213</a></div>
1956
+ <div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/code-snippet/code-snippet.component.ts:217</a></div>
1953
1957
  </td>
1954
1958
  </tr>
1955
1959
 
@@ -1980,7 +1984,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
1980
1984
  </tr>
1981
1985
  <tr>
1982
1986
  <td class="col-md-4">
1983
- <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/code-snippet/code-snippet.component.ts:207</a></div>
1987
+ <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/code-snippet/code-snippet.component.ts:211</a></div>
1984
1988
  </td>
1985
1989
  </tr>
1986
1990
 
@@ -2009,7 +2013,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
2009
2013
  </tr>
2010
2014
  <tr>
2011
2015
  <td class="col-md-4">
2012
- <div class="io-line">Defined in <a href="" data-line="131" class="link-to-prism">src/code-snippet/code-snippet.component.ts:131</a></div>
2016
+ <div class="io-line">Defined in <a href="" data-line="135" class="link-to-prism">src/code-snippet/code-snippet.component.ts:135</a></div>
2013
2017
  </td>
2014
2018
  </tr>
2015
2019
 
@@ -2031,7 +2035,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
2031
2035
  </tr>
2032
2036
  <tr>
2033
2037
  <td class="col-md-4">
2034
- <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/code-snippet/code-snippet.component.ts:134</a></div>
2038
+ <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/code-snippet/code-snippet.component.ts:138</a></div>
2035
2039
  </td>
2036
2040
  </tr>
2037
2041
 
@@ -2053,7 +2057,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
2053
2057
  </tr>
2054
2058
  <tr>
2055
2059
  <td class="col-md-4">
2056
- <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/code-snippet/code-snippet.component.ts:137</a></div>
2060
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/code-snippet/code-snippet.component.ts:141</a></div>
2057
2061
  </td>
2058
2062
  </tr>
2059
2063
 
@@ -2075,7 +2079,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
2075
2079
  </tr>
2076
2080
  <tr>
2077
2081
  <td class="col-md-4">
2078
- <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/code-snippet/code-snippet.component.ts:140</a></div>
2082
+ <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/code-snippet/code-snippet.component.ts:144</a></div>
2079
2083
  </td>
2080
2084
  </tr>
2081
2085
 
@@ -2097,7 +2101,7 @@ Default is <code>16</code>, hence height of expanded row will be 16 * rowHeightI
2097
2101
  </tr>
2098
2102
  <tr>
2099
2103
  <td class="col-md-4">
2100
- <div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/code-snippet/code-snippet.component.ts:143</a></div>
2104
+ <div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/code-snippet/code-snippet.component.ts:147</a></div>
2101
2105
  </td>
2102
2106
  </tr>
2103
2107
 
@@ -2153,7 +2157,9 @@ export enum SnippetType {
2153
2157
  [ngClass]&#x3D;&quot;{
2154
2158
  &#x27;cds--snippet--light&#x27;: theme &#x3D;&#x3D;&#x3D; &#x27;light&#x27;
2155
2159
  }&quot;&gt;
2156
- &lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;
2160
+ &lt;code #code&gt;
2161
+ &lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;
2162
+ &lt;/code&gt;
2157
2163
  &lt;/span&gt;
2158
2164
  &lt;/ng-template&gt;
2159
2165
  &lt;/ng-container&gt;
@@ -2178,7 +2184,7 @@ export enum SnippetType {
2178
2184
  &lt;pre
2179
2185
  #codeContent
2180
2186
  *ngIf&#x3D;&quot;!skeleton&quot;
2181
- (scroll)&#x3D;&quot;(display &#x3D;&#x3D;&#x3D; &#x27;multi&#x27; ? handleScroll() : null)&quot;&gt;&lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;&lt;/pre&gt;
2187
+ (scroll)&#x3D;&quot;(display &#x3D;&#x3D;&#x3D; &#x27;multi&#x27; ? handleScroll() : null)&quot;&gt;&lt;code #code&gt;&lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;&lt;/code&gt;&lt;/pre&gt;
2182
2188
  &lt;/div&gt;
2183
2189
  &lt;div *ngIf&#x3D;&quot;hasLeft&quot; class&#x3D;&quot;cds--snippet__overflow-indicator--left&quot;&gt;&lt;/div&gt;
2184
2190
  &lt;div *ngIf&#x3D;&quot;hasRight&quot; class&#x3D;&quot;cds--snippet__overflow-indicator--right&quot;&gt;&lt;/div&gt;
@@ -2224,7 +2230,9 @@ export enum SnippetType {
2224
2230
  &#x27;tabindex&#x27;: &#x27;0&#x27;
2225
2231
  }&quot;&gt;
2226
2232
  &lt;ng-container *ngIf&#x3D;&quot;display &#x3D;&#x3D;&#x3D; &#x27;inline&#x27;&quot;&gt;
2227
- &lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;
2233
+ &lt;code #code&gt;
2234
+ &lt;ng-container *ngTemplateOutlet&#x3D;&quot;codeTemplate&quot;&gt;&lt;/ng-container&gt;
2235
+ &lt;/code&gt;
2228
2236
  &lt;/ng-container&gt;
2229
2237
  &lt;ng-container *ngIf&#x3D;&quot;display !&#x3D;&#x3D; &#x27;inline&#x27;&quot;&gt;
2230
2238
  &lt;svg cdsIcon&#x3D;&quot;copy&quot; size&#x3D;&quot;16&quot; class&#x3D;&quot;cds--snippet__icon&quot;&gt;&lt;/svg&gt;
@@ -2233,7 +2241,7 @@ export enum SnippetType {
2233
2241
  &lt;/ng-template&gt;
2234
2242
 
2235
2243
  &lt;ng-template #codeTemplate&gt;
2236
- &lt;code #code&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/code&gt;
2244
+ &lt;ng-content&gt;&lt;/ng-content&gt;
2237
2245
  &lt;/ng-template&gt;
2238
2246
  &#x60;
2239
2247
  })
@@ -2338,6 +2346,10 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2338
2346
  }
2339
2347
 
2340
2348
  handleScroll() {
2349
+ if (this.skeleton) {
2350
+ return;
2351
+ }
2352
+
2341
2353
  let ref;
2342
2354
  switch (this.display) {
2343
2355
  case &quot;multi&quot;:
@@ -2369,7 +2381,7 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2369
2381
  onCopyButtonClicked() {
2370
2382
  if (!this.disabled) {
2371
2383
  window.navigator.clipboard
2372
- .writeText(this.code.nativeElement.innerText || this.code.nativeElement.textContent).then(() &#x3D;&gt; {
2384
+ .writeText(this.code).then(() &#x3D;&gt; {
2373
2385
  this.showFeedback &#x3D; true;
2374
2386
  this.animating &#x3D; true;
2375
2387
  setTimeout(() &#x3D;&gt; {
@@ -2382,6 +2394,11 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2382
2394
 
2383
2395
  ngOnInit() {
2384
2396
  this.calculateContainerHeight();
2397
+ }
2398
+
2399
+ ngAfterViewInit() {
2400
+ this.canExpand();
2401
+ this.handleScroll();
2385
2402
  if (window) {
2386
2403
  this.eventService.on(window as any, &quot;resize&quot;, () &#x3D;&gt; {
2387
2404
  this.canExpand();
@@ -2390,15 +2407,8 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2390
2407
  }
2391
2408
  }
2392
2409
 
2393
- ngAfterViewInit() {
2394
- setTimeout(() &#x3D;&gt; {
2395
- this.canExpand();
2396
- this.handleScroll();
2397
- });
2398
- }
2399
-
2400
2410
  calculateContainerHeight() {
2401
- if (this.display &#x3D;&#x3D;&#x3D; &quot;multi&quot;) {
2411
+ if (this.display &#x3D;&#x3D;&#x3D; &quot;multi&quot; &amp;&amp; !this.skeleton) {
2402
2412
  this.styles &#x3D; {};
2403
2413
  if (this.expanded) {
2404
2414
  if (this.maxExpandedNumberOfRows &gt; 0) {
@@ -2419,7 +2429,7 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2419
2429
  }
2420
2430
 
2421
2431
  protected canExpand() {
2422
- if (this.display &#x3D;&#x3D;&#x3D; &quot;multi&quot;) {
2432
+ if (this.display &#x3D;&#x3D;&#x3D; &quot;multi&quot; &amp;&amp; !this.skeleton) {
2423
2433
  const height &#x3D; this.codeContent.nativeElement.getBoundingClientRect().height;
2424
2434
  if (
2425
2435
  this.maxCollapsedNumberOfRows &gt; 0 &amp;&amp;
@@ -2472,7 +2482,7 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
2472
2482
  <script src="../js/libs/htmlparser.js"></script>
2473
2483
  <script src="../js/libs/deep-iterator.js"></script>
2474
2484
  <script>
2475
- var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="display === \'inline\'; else notInline"> <ng-container *ngIf="!hideCopyButton; else noBtnInline"> <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container> </ng-container> <ng-template #noBtnInline> <span class="cds--snippet cds--snippet--inline cds--snippet--no-copy" [ngClass]="{ \'cds--snippet--light\': theme === \'light\' }"> <ng-container *ngTemplateOutlet="codeTemplate"></ng-container> </span> </ng-template></ng-container><ng-template #notInline> <div #codeContainer class="cds--snippet-container" [attr.aria-label]="translations.CODE_SNIPPET_TEXT" [attr.tabindex]="display === \'single\' && !disabled ? \'0\' : null" [attr.role]="display===\'single\' ? \'textarea\' : null" [ngStyle]="styles" (scroll)="(display === \'single\' ? handleScroll() : null)"> <ng-container *ngIf="skeleton"> <span *ngIf="display === \'single\'; else multiSkeleton"></span> <ng-template #multiSkeleton> <span></span> <span></span> <span></span> </ng-template> </ng-container> <pre #codeContent *ngIf="!skeleton" (scroll)="(display === \'multi\' ? handleScroll() : null)"><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre> </div> <div *ngIf="hasLeft" class="cds--snippet__overflow-indicator--left"></div> <div *ngIf="hasRight" class="cds--snippet__overflow-indicator--right"></div> <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container> <button *ngIf="isExpandable" class="cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand" (click)="toggleSnippetExpansion()" type="button"> <span class="cds--snippet-btn--text">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span> <svg cdsIcon="chevron--down" size="16" class="cds--icon-chevron--down" [attr.aria-label]="translations.SHOW_MORE_ICON"></svg> </button></ng-template><ng-template #buttonTemplate> <cds-icon-button *ngIf="!skeleton" [description]="showFeedback ? feedbackText : copyButtonDescription" [align]="align" [dropShadow]="dropShadow" [caret]="caret" [highContrast]="highContrast" [isOpen]="isOpen" [enterDelayMs]="enterDelayMs" [leaveDelayMs]="leaveDelayMs" type="button" kind="primary" size="md" (click)="onCopyButtonClicked($event)" [buttonNgClass]="{ \'cds--snippet--light\': theme === \'light\', \'cds--snippet--inline\': display === \'inline\', \'cds--btn--icon-only\': display !== \'inline\', \'cds--copy-btn\': display !== \'inline\', \'cds--copy-btn--animating\': animating, \'cds--copy-btn--fade-in\': showFeedback, \'cds--copy-btn--fade-out\': !showFeedback && animating, \'cds--snippet cds--copy\': true }" [buttonAttributes]="{ \'aria-label\': translations.COPY_CODE, \'aria-live\': \'polite\', \'tabindex\': \'0\' }"> <ng-container *ngIf="display === \'inline\'"> <ng-container *ngTemplateOutlet="codeTemplate"></ng-container> </ng-container> <ng-container *ngIf="display !== \'inline\'"> <svg cdsIcon="copy" size="16" class="cds--snippet__icon"></svg> </ng-container> </cds-icon-button></ng-template><ng-template #codeTemplate> <code #code><ng-content></ng-content></code></ng-template> </div>'
2485
+ var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="display === \'inline\'; else notInline"> <ng-container *ngIf="!hideCopyButton; else noBtnInline"> <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container> </ng-container> <ng-template #noBtnInline> <span class="cds--snippet cds--snippet--inline cds--snippet--no-copy" [ngClass]="{ \'cds--snippet--light\': theme === \'light\' }"> <code #code> <ng-container *ngTemplateOutlet="codeTemplate"></ng-container> </code> </span> </ng-template></ng-container><ng-template #notInline> <div #codeContainer class="cds--snippet-container" [attr.aria-label]="translations.CODE_SNIPPET_TEXT" [attr.tabindex]="display === \'single\' && !disabled ? \'0\' : null" [attr.role]="display===\'single\' ? \'textarea\' : null" [ngStyle]="styles" (scroll)="(display === \'single\' ? handleScroll() : null)"> <ng-container *ngIf="skeleton"> <span *ngIf="display === \'single\'; else multiSkeleton"></span> <ng-template #multiSkeleton> <span></span> <span></span> <span></span> </ng-template> </ng-container> <pre #codeContent *ngIf="!skeleton" (scroll)="(display === \'multi\' ? handleScroll() : null)"><code #code><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></code></pre> </div> <div *ngIf="hasLeft" class="cds--snippet__overflow-indicator--left"></div> <div *ngIf="hasRight" class="cds--snippet__overflow-indicator--right"></div> <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container> <button *ngIf="isExpandable" class="cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand" (click)="toggleSnippetExpansion()" type="button"> <span class="cds--snippet-btn--text">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span> <svg cdsIcon="chevron--down" size="16" class="cds--icon-chevron--down" [attr.aria-label]="translations.SHOW_MORE_ICON"></svg> </button></ng-template><ng-template #buttonTemplate> <cds-icon-button *ngIf="!skeleton" [description]="showFeedback ? feedbackText : copyButtonDescription" [align]="align" [dropShadow]="dropShadow" [caret]="caret" [highContrast]="highContrast" [isOpen]="isOpen" [enterDelayMs]="enterDelayMs" [leaveDelayMs]="leaveDelayMs" type="button" kind="primary" size="md" (click)="onCopyButtonClicked($event)" [buttonNgClass]="{ \'cds--snippet--light\': theme === \'light\', \'cds--snippet--inline\': display === \'inline\', \'cds--btn--icon-only\': display !== \'inline\', \'cds--copy-btn\': display !== \'inline\', \'cds--copy-btn--animating\': animating, \'cds--copy-btn--fade-in\': showFeedback, \'cds--copy-btn--fade-out\': !showFeedback && animating, \'cds--snippet cds--copy\': true }" [buttonAttributes]="{ \'aria-label\': translations.COPY_CODE, \'aria-live\': \'polite\', \'tabindex\': \'0\' }"> <ng-container *ngIf="display === \'inline\'"> <code #code> <ng-container *ngTemplateOutlet="codeTemplate"></ng-container> </code> </ng-container> <ng-container *ngIf="display !== \'inline\'"> <svg cdsIcon="copy" size="16" class="cds--snippet__icon"></svg> </ng-container> </cds-icon-button></ng-template><ng-template #codeTemplate> <ng-content></ng-content></ng-template> </div>'
2476
2486
  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': 'ContainedList', 'selector': 'cds-contained-list, ibm-contained-list'},{'name': 'ContainedListItem', 'selector': 'cds-contained-list-item, ibm-contained-list-item'},{'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'},{'name': 'TreeNodeComponent', 'selector': 'cds-tree-node'},{'name': 'TreeViewComponent', 'selector': 'cds-tree-view'}];
2477
2487
  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]'}];
2478
2488
  var ACTUAL_COMPONENT = {'name': 'CodeSnippet'};