carbon-components-angular 5.11.1 → 5.12.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 (57) hide show
  1. package/docs/documentation/components/Toggle.html +188 -197
  2. package/docs/documentation/coverage.html +1 -1
  3. package/docs/documentation/js/search/search_index.js +2 -2
  4. package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
  5. package/docs/documentation/modules/CodeSnippetModule.html +4 -4
  6. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +38 -42
  7. package/docs/documentation/modules/DatePickerInputModule.html +38 -42
  8. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +4 -4
  9. package/docs/documentation/modules/FileUploaderModule.html +4 -4
  10. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/NumberModule.html +4 -4
  12. package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
  13. package/docs/documentation/modules/PanelModule.html +36 -36
  14. package/docs/documentation/modules/RadioModule/dependencies.svg +49 -49
  15. package/docs/documentation/modules/RadioModule.html +49 -49
  16. package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
  17. package/docs/documentation/modules/SelectModule.html +43 -43
  18. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  19. package/docs/documentation/modules/SliderModule.html +4 -4
  20. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  21. package/docs/documentation/modules/TableModule.html +216 -216
  22. package/docs/documentation/modules/TabsModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/TabsModule.html +4 -4
  24. package/docs/documentation/modules/TagModule/dependencies.svg +28 -28
  25. package/docs/documentation/modules/TagModule.html +28 -28
  26. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  27. package/docs/documentation/modules/ThemeModule.html +13 -13
  28. package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
  29. package/docs/documentation/modules/TilesModule.html +98 -98
  30. package/docs/documentation/modules/TimePickerModule/dependencies.svg +26 -26
  31. package/docs/documentation/modules/TimePickerModule.html +26 -26
  32. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +45 -49
  33. package/docs/documentation/modules/TimePickerSelectModule.html +45 -49
  34. package/docs/documentation/modules/ToggleModule/dependencies.svg +45 -41
  35. package/docs/documentation/modules/ToggleModule.html +45 -41
  36. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  37. package/docs/documentation/modules/ToggletipModule.html +4 -4
  38. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  39. package/docs/documentation/modules/TooltipModule.html +4 -4
  40. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  41. package/docs/documentation/modules/UIShellModule.html +4 -4
  42. package/docs/documentation.json +55 -68
  43. package/docs/storybook/{1895.69e2c275.iframe.bundle.js → 1895.f908bfb8.iframe.bundle.js} +1 -1
  44. package/docs/storybook/iframe.html +2 -2
  45. package/docs/storybook/{main.3dbeb194.iframe.bundle.js → main.78985516.iframe.bundle.js} +1 -1
  46. package/docs/storybook/main.css +173 -75
  47. package/docs/storybook/project.json +1 -1
  48. package/docs/storybook/{runtime~main.902da3f3.iframe.bundle.js → runtime~main.e61e8f0b.iframe.bundle.js} +1 -1
  49. package/docs/storybook/toggle-toggle-stories.3f40e3b9.iframe.bundle.js +1 -0
  50. package/esm2020/toggle/toggle.component.mjs +103 -83
  51. package/fesm2015/carbon-components-angular-toggle.mjs +102 -82
  52. package/fesm2015/carbon-components-angular-toggle.mjs.map +1 -1
  53. package/fesm2020/carbon-components-angular-toggle.mjs +102 -82
  54. package/fesm2020/carbon-components-angular-toggle.mjs.map +1 -1
  55. package/package.json +1 -1
  56. package/toggle/toggle.component.d.ts +3 -2
  57. package/docs/storybook/toggle-toggle-stories.3af803a8.iframe.bundle.js +0 -1
@@ -117,50 +117,56 @@
117
117
 
118
118
  <tr>
119
119
  <td class="col-md-3">template</td>
120
- <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;button
121
- class&#x3D;&quot;cds--toggle__button&quot;
122
- [disabled]&#x3D;&quot;disabled&quot;
123
- [id]&#x3D;&quot;id&quot;
124
- role&#x3D;&quot;switch&quot;
125
- type&#x3D;&quot;button&quot;
126
- [attr.aria-checked]&#x3D;&quot;checked&quot;
127
- (click)&#x3D;&quot;onClick($event)&quot;&gt;
128
- &lt;/button&gt;
129
- &lt;label
130
- class&#x3D;&quot;cds--toggle__label&quot;
131
- [for]&#x3D;&quot;id&quot;&gt;
132
- &lt;span
133
- class&#x3D;&quot;cds--toggle__label-text&quot;
134
- [ngClass]&#x3D;&quot;{
135
- &#x27;cds--visually-hidden&#x27;: hideLabel
136
- }&quot;&gt;
137
- &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
138
- &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
139
- &lt;/span&gt;
140
- &lt;div
141
- class&#x3D;&quot;cds--toggle__appearance&quot;
142
- [ngClass]&#x3D;&quot;{
143
- &#x27;cds--toggle__appearance--sm&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;
144
- }&quot;&gt;
120
+ <td class="col-md-9"><pre class="line-numbers"><code class="language-html">&lt;ng-container *ngIf&#x3D;&quot;!skeleton; else skeletonTemplate;&quot;&gt;
121
+ &lt;button
122
+ class&#x3D;&quot;cds--toggle__button&quot;
123
+ [disabled]&#x3D;&quot;disabled&quot;
124
+ [id]&#x3D;&quot;id&quot;
125
+ role&#x3D;&quot;switch&quot;
126
+ type&#x3D;&quot;button&quot;
127
+ [attr.aria-checked]&#x3D;&quot;checked&quot;
128
+ (click)&#x3D;&quot;onClick($event)&quot;&gt;
129
+ &lt;/button&gt;
130
+ &lt;label
131
+ class&#x3D;&quot;cds--toggle__label&quot;
132
+ [for]&#x3D;&quot;id&quot;&gt;
133
+ &lt;span
134
+ class&#x3D;&quot;cds--toggle__label-text&quot;
135
+ [ngClass]&#x3D;&quot;{
136
+ &#x27;cds--visually-hidden&#x27;: hideLabel
137
+ }&quot;&gt;
138
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
139
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
140
+ &lt;/span&gt;
145
141
  &lt;div
146
- class&#x3D;&quot;cds--toggle__switch&quot;
142
+ class&#x3D;&quot;cds--toggle__appearance&quot;
147
143
  [ngClass]&#x3D;&quot;{
148
- &#x27;cds--toggle__switch--checked&#x27;: checked
144
+ &#x27;cds--toggle__appearance--sm&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;
149
145
  }&quot;&gt;
150
- &lt;svg
151
- *ngIf&#x3D;&quot;size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;&quot;
152
- class&#x3D;&#x27;cds--toggle__check&#x27;
153
- width&#x3D;&quot;6px&quot;
154
- height&#x3D;&quot;5px&quot;
155
- viewBox&#x3D;&quot;0 0 6 5&quot;&gt;
156
- &lt;path d&#x3D;&quot;M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z&quot; /&gt;
157
- &lt;/svg&gt;
146
+ &lt;div
147
+ class&#x3D;&quot;cds--toggle__switch&quot;
148
+ [ngClass]&#x3D;&quot;{
149
+ &#x27;cds--toggle__switch--checked&#x27;: checked
150
+ }&quot;&gt;
151
+ &lt;svg
152
+ *ngIf&#x3D;&quot;size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;&quot;
153
+ class&#x3D;&#x27;cds--toggle__check&#x27;
154
+ width&#x3D;&quot;6px&quot;
155
+ height&#x3D;&quot;5px&quot;
156
+ viewBox&#x3D;&quot;0 0 6 5&quot;&gt;
157
+ &lt;path d&#x3D;&quot;M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z&quot; /&gt;
158
+ &lt;/svg&gt;
159
+ &lt;/div&gt;
160
+ &lt;span class&#x3D;&quot;cds--toggle__text&quot;&gt;
161
+ {{(hideLabel ? label : (getCheckedText() | async))}}
162
+ &lt;/span&gt;
158
163
  &lt;/div&gt;
159
- &lt;span class&#x3D;&quot;cds--toggle__text&quot;&gt;
160
- {{(hideLabel ? label : (getCheckedText() | async))}}
161
- &lt;/span&gt;
162
- &lt;/div&gt;
163
- &lt;/label&gt;
164
+ &lt;/label&gt;
165
+ &lt;/ng-container&gt;
166
+ &lt;ng-template #skeletonTemplate&gt;
167
+ &lt;div class&#x3D;&quot;cds--toggle__skeleton-circle&quot;&gt;&lt;/div&gt;
168
+ &lt;div class&#x3D;&quot;cds--toggle__skeleton-rectangle&quot;&gt;&lt;/div&gt;
169
+ &lt;/ng-template&gt;
164
170
  </code></pre></td>
165
171
  </tr>
166
172
 
@@ -196,10 +202,6 @@
196
202
  <span class="modifier">Protected</span>
197
203
  <a href="#_onValues" >_onValues</a>
198
204
  </li>
199
- <li>
200
- <span class="modifier"></span>
201
- <a href="#formItem" >formItem</a>
202
- </li>
203
205
  <li>
204
206
  <a href="#id" >id</a>
205
207
  </li>
@@ -328,6 +330,9 @@
328
330
  <li>
329
331
  <a href="#size" >size</a>
330
332
  </li>
333
+ <li>
334
+ <a href="#skeleton" >skeleton</a>
335
+ </li>
331
336
  <li>
332
337
  <a href="#ariaLabel" >ariaLabel</a>
333
338
  </li>
@@ -352,9 +357,6 @@
352
357
  <li>
353
358
  <a href="#required" >required</a>
354
359
  </li>
355
- <li>
356
- <a href="#skeleton" >skeleton</a>
357
- </li>
358
360
  <li>
359
361
  <a href="#value" >value</a>
360
362
  </li>
@@ -436,6 +438,9 @@
436
438
  <li>
437
439
  <a href="#disabledClass" >disabledClass</a>
438
440
  </li>
441
+ <li>
442
+ <a href="#formItem" >formItem</a>
443
+ </li>
439
444
  </ul>
440
445
  </td>
441
446
  </tr>
@@ -454,7 +459,7 @@
454
459
  </tr>
455
460
  <tr>
456
461
  <td class="col-md-4">
457
- <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
462
+ <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/toggle/toggle.component.ts:151</a></div>
458
463
  </td>
459
464
  </tr>
460
465
 
@@ -535,7 +540,7 @@
535
540
  </tr>
536
541
  <tr>
537
542
  <td class="col-md-2" colspan="2">
538
- <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:126</a></code>
543
+ <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:132</a></code>
539
544
  </div>
540
545
  </td>
541
546
  </tr>
@@ -563,7 +568,7 @@
563
568
  </tr>
564
569
  <tr>
565
570
  <td class="col-md-2" colspan="2">
566
- <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/toggle/toggle.component.ts:118</a></div>
571
+ <div class="io-line">Defined in <a href="" data-line="124" class="link-to-prism">src/toggle/toggle.component.ts:124</a></div>
567
572
  </td>
568
573
  </tr>
569
574
  <tr>
@@ -590,7 +595,7 @@
590
595
  </tr>
591
596
  <tr>
592
597
  <td class="col-md-2" colspan="2">
593
- <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/toggle/toggle.component.ts:96</a></div>
598
+ <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/toggle/toggle.component.ts:102</a></div>
594
599
  </td>
595
600
  </tr>
596
601
  <tr>
@@ -617,7 +622,7 @@
617
622
  </tr>
618
623
  <tr>
619
624
  <td class="col-md-2" colspan="2">
620
- <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/toggle/toggle.component.ts:108</a></div>
625
+ <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/toggle/toggle.component.ts:114</a></div>
621
626
  </td>
622
627
  </tr>
623
628
  <tr>
@@ -649,7 +654,7 @@
649
654
  </tr>
650
655
  <tr>
651
656
  <td class="col-md-2" colspan="2">
652
- <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/toggle/toggle.component.ts:122</a></div>
657
+ <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/toggle/toggle.component.ts:128</a></div>
653
658
  </td>
654
659
  </tr>
655
660
  <tr>
@@ -660,6 +665,39 @@
660
665
  </tr>
661
666
  </tbody>
662
667
  </table>
668
+ <table class="table table-sm table-bordered">
669
+ <tbody>
670
+ <tr>
671
+ <td class="col-md-4">
672
+ <a name="skeleton"></a>
673
+ <b>skeleton</b>
674
+ </td>
675
+ </tr>
676
+ <tr>
677
+ <td class="col-md-4">
678
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
679
+
680
+ </td>
681
+ </tr>
682
+ <tr>
683
+ <td class="col-md-4">
684
+ <i>Default value : </i><code>false</code>
685
+ </td>
686
+ </tr>
687
+ <tr>
688
+ <td class="col-md-4" colspan="2">
689
+ <div class="io-line">Inherited from <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
690
+ </div>
691
+ </td>
692
+ </tr>
693
+ <tr>
694
+ <td class="col-md-2" colspan="2">
695
+ <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:134</a></code>
696
+ </div>
697
+ </td>
698
+ </tr>
699
+ </tbody>
700
+ </table>
663
701
  <table class="table table-sm table-bordered">
664
702
  <tbody>
665
703
  <tr>
@@ -932,45 +970,6 @@
932
970
  <tr>
933
971
  <td class="col-md-4">
934
972
  <div class="io-description"><p>Reflects the required attribute of the <code>input</code> element.</p>
935
- </div>
936
- </td>
937
- </tr>
938
- </tbody>
939
- </table>
940
- <table class="table table-sm table-bordered">
941
- <tbody>
942
- <tr>
943
- <td class="col-md-4">
944
- <a name="skeleton"></a>
945
- <b>skeleton</b>
946
- </td>
947
- </tr>
948
- <tr>
949
- <td class="col-md-4">
950
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
951
-
952
- </td>
953
- </tr>
954
- <tr>
955
- <td class="col-md-4">
956
- <i>Default value : </i><code>false</code>
957
- </td>
958
- </tr>
959
- <tr>
960
- <td class="col-md-4" colspan="2">
961
- <div class="io-line">Inherited from <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
962
- </div>
963
- </td>
964
- </tr>
965
- <tr>
966
- <td class="col-md-2" colspan="2">
967
- <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:81</a></code>
968
- </div>
969
- </td>
970
- </tr>
971
- <tr>
972
- <td class="col-md-4">
973
- <div class="io-description"><p>Set to <code>true</code> for a loading checkbox.</p>
974
973
  </div>
975
974
  </td>
976
975
  </tr>
@@ -1135,15 +1134,10 @@ on an indeterminate checkbox.</p>
1135
1134
  <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
1136
1135
 
1137
1136
  </td>
1138
- </tr>
1139
- <tr>
1140
- <td class="col-md-4">
1141
- <i>Default value : </i><code>true</code>
1142
- </td>
1143
1137
  </tr>
1144
1138
  <tr>
1145
1139
  <td class="col-md-4">
1146
- <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/toggle/toggle.component.ts:133</a></div>
1140
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
1147
1141
  </td>
1148
1142
  </tr>
1149
1143
 
@@ -1174,7 +1168,7 @@ on an indeterminate checkbox.</p>
1174
1168
  </tr>
1175
1169
  <tr>
1176
1170
  <td class="col-md-4">
1177
- <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/toggle/toggle.component.ts:128</a></div>
1171
+ <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/toggle/toggle.component.ts:136</a></div>
1178
1172
  </td>
1179
1173
  </tr>
1180
1174
 
@@ -1200,7 +1194,7 @@ on an indeterminate checkbox.</p>
1200
1194
  </tr>
1201
1195
  <tr>
1202
1196
  <td class="col-md-4">
1203
- <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/toggle/toggle.component.ts:129</a></div>
1197
+ <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/toggle/toggle.component.ts:137</a></div>
1204
1198
  </td>
1205
1199
  </tr>
1206
1200
 
@@ -1276,7 +1270,7 @@ on an indeterminate checkbox.</p>
1276
1270
  </tr>
1277
1271
  <tr>
1278
1272
  <td class="col-md-4">
1279
- <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:179</a></code>
1273
+ <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:189</a></code>
1280
1274
  </div>
1281
1275
  </td>
1282
1276
  </tr>
@@ -1315,8 +1309,8 @@ on an indeterminate checkbox.</p>
1315
1309
 
1316
1310
  <tr>
1317
1311
  <td class="col-md-4">
1318
- <div class="io-line">Defined in <a href="" data-line="169"
1319
- class="link-to-prism">src/toggle/toggle.component.ts:169</a></div>
1312
+ <div class="io-line">Defined in <a href="" data-line="179"
1313
+ class="link-to-prism">src/toggle/toggle.component.ts:179</a></div>
1320
1314
  </td>
1321
1315
  </tr>
1322
1316
 
@@ -1352,8 +1346,8 @@ on an indeterminate checkbox.</p>
1352
1346
 
1353
1347
  <tr>
1354
1348
  <td class="col-md-4">
1355
- <div class="io-line">Defined in <a href="" data-line="161"
1356
- class="link-to-prism">src/toggle/toggle.component.ts:161</a></div>
1349
+ <div class="io-line">Defined in <a href="" data-line="171"
1350
+ class="link-to-prism">src/toggle/toggle.component.ts:171</a></div>
1357
1351
  </td>
1358
1352
  </tr>
1359
1353
 
@@ -1389,8 +1383,8 @@ on an indeterminate checkbox.</p>
1389
1383
 
1390
1384
  <tr>
1391
1385
  <td class="col-md-4">
1392
- <div class="io-line">Defined in <a href="" data-line="165"
1393
- class="link-to-prism">src/toggle/toggle.component.ts:165</a></div>
1386
+ <div class="io-line">Defined in <a href="" data-line="175"
1387
+ class="link-to-prism">src/toggle/toggle.component.ts:175</a></div>
1394
1388
  </td>
1395
1389
  </tr>
1396
1390
 
@@ -1428,8 +1422,8 @@ on an indeterminate checkbox.</p>
1428
1422
 
1429
1423
  <tr>
1430
1424
  <td class="col-md-4">
1431
- <div class="io-line">Defined in <a href="" data-line="184"
1432
- class="link-to-prism">src/toggle/toggle.component.ts:184</a></div>
1425
+ <div class="io-line">Defined in <a href="" data-line="194"
1426
+ class="link-to-prism">src/toggle/toggle.component.ts:194</a></div>
1433
1427
  </td>
1434
1428
  </tr>
1435
1429
 
@@ -1499,7 +1493,7 @@ on an indeterminate checkbox.</p>
1499
1493
  </tr>
1500
1494
  <tr>
1501
1495
  <td class="col-md-4">
1502
- <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:157</a></code>
1496
+ <div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:167</a></code>
1503
1497
  </div>
1504
1498
  </td>
1505
1499
  </tr>
@@ -2295,7 +2289,7 @@ on an indeterminate checkbox.</p>
2295
2289
  </tr>
2296
2290
  <tr>
2297
2291
  <td class="col-md-4">
2298
- <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/toggle/toggle.component.ts:140</a></div>
2292
+ <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/toggle/toggle.component.ts:150</a></div>
2299
2293
  </td>
2300
2294
  </tr>
2301
2295
 
@@ -2321,42 +2315,7 @@ on an indeterminate checkbox.</p>
2321
2315
  </tr>
2322
2316
  <tr>
2323
2317
  <td class="col-md-4">
2324
- <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
2325
- </td>
2326
- </tr>
2327
-
2328
-
2329
- </tbody>
2330
- </table>
2331
- <table class="table table-sm table-bordered">
2332
- <tbody>
2333
- <tr>
2334
- <td class="col-md-4">
2335
- <a name="formItem"></a>
2336
- <span class="name">
2337
- <span class="modifier"></span>
2338
- <span ><b>formItem</b></span>
2339
- <a href="#formItem"><span class="icon ion-ios-link"></span></a>
2340
- </span>
2341
- </td>
2342
- </tr>
2343
- <tr>
2344
- <td class="col-md-4">
2345
- <i>Default value : </i><code>true</code>
2346
- </td>
2347
- </tr>
2348
- <tr>
2349
- <td class="col-md-4">
2350
- <b>Decorators : </b>
2351
- <br />
2352
- <code>
2353
- @HostBinding(&#x27;class.cds--form-item&#x27;)<br />
2354
- </code>
2355
- </td>
2356
- </tr>
2357
- <tr>
2358
- <td class="col-md-4">
2359
- <div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/toggle/toggle.component.ts:133</a></div>
2318
+ <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/toggle/toggle.component.ts:151</a></div>
2360
2319
  </td>
2361
2320
  </tr>
2362
2321
 
@@ -2381,7 +2340,7 @@ on an indeterminate checkbox.</p>
2381
2340
  </tr>
2382
2341
  <tr>
2383
2342
  <td class="col-md-4">
2384
- <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/toggle/toggle.component.ts:138</a></div>
2343
+ <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/toggle/toggle.component.ts:148</a></div>
2385
2344
  </td>
2386
2345
  </tr>
2387
2346
 
@@ -2422,7 +2381,7 @@ on an indeterminate checkbox.</p>
2422
2381
  </tr>
2423
2382
  <tr>
2424
2383
  <td class="col-md-4">
2425
- <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/toggle/toggle.component.ts:128</a></div>
2384
+ <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/toggle/toggle.component.ts:136</a></div>
2426
2385
  </td>
2427
2386
  </tr>
2428
2387
 
@@ -2454,7 +2413,7 @@ on an indeterminate checkbox.</p>
2454
2413
  </tr>
2455
2414
  <tr>
2456
2415
  <td class="col-md-4">
2457
- <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/toggle/toggle.component.ts:90</a></div>
2416
+ <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/toggle/toggle.component.ts:96</a></div>
2458
2417
  </td>
2459
2418
  </tr>
2460
2419
 
@@ -2779,7 +2738,7 @@ on an indeterminate checkbox.</p>
2779
2738
  </tr>
2780
2739
  <tr>
2781
2740
  <td class="col-md-4">
2782
- <div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/toggle/toggle.component.ts:100</a></div>
2741
+ <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/toggle/toggle.component.ts:106</a></div>
2783
2742
  </td>
2784
2743
  </tr>
2785
2744
 
@@ -2790,7 +2749,7 @@ on an indeterminate checkbox.</p>
2790
2749
  </tr>
2791
2750
  <tr>
2792
2751
  <td class="col-md-4">
2793
- <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/toggle/toggle.component.ts:96</a></div>
2752
+ <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/toggle/toggle.component.ts:102</a></div>
2794
2753
  </td>
2795
2754
  </tr>
2796
2755
  <tr>
@@ -2850,7 +2809,7 @@ on an indeterminate checkbox.</p>
2850
2809
  </tr>
2851
2810
  <tr>
2852
2811
  <td class="col-md-4">
2853
- <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/toggle/toggle.component.ts:112</a></div>
2812
+ <div class="io-line">Defined in <a href="" data-line="118" class="link-to-prism">src/toggle/toggle.component.ts:118</a></div>
2854
2813
  </td>
2855
2814
  </tr>
2856
2815
 
@@ -2861,7 +2820,7 @@ on an indeterminate checkbox.</p>
2861
2820
  </tr>
2862
2821
  <tr>
2863
2822
  <td class="col-md-4">
2864
- <div class="io-line">Defined in <a href="" data-line="108" class="link-to-prism">src/toggle/toggle.component.ts:108</a></div>
2823
+ <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/toggle/toggle.component.ts:114</a></div>
2865
2824
  </td>
2866
2825
  </tr>
2867
2826
  <tr>
@@ -2921,7 +2880,29 @@ on an indeterminate checkbox.</p>
2921
2880
  </tr>
2922
2881
  <tr>
2923
2882
  <td class="col-md-4">
2924
- <div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/toggle/toggle.component.ts:129</a></div>
2883
+ <div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/toggle/toggle.component.ts:137</a></div>
2884
+ </td>
2885
+ </tr>
2886
+
2887
+ </tbody>
2888
+ </table>
2889
+ <table class="table table-sm table-bordered">
2890
+ <tbody>
2891
+ <tr>
2892
+ <td class="col-md-4">
2893
+ <a name="formItem"></a>
2894
+ <span class="name"><b>formItem</b><a href="#formItem"><span class="icon ion-ios-link"></span></a></span>
2895
+ </td>
2896
+ </tr>
2897
+
2898
+ <tr>
2899
+ <td class="col-md-4">
2900
+ <span class="accessor"><b>get</b><code>formItem()</code></span>
2901
+ </td>
2902
+ </tr>
2903
+ <tr>
2904
+ <td class="col-md-4">
2905
+ <div class="io-line">Defined in <a href="" data-line="141" class="link-to-prism">src/toggle/toggle.component.ts:141</a></div>
2925
2906
  </td>
2926
2907
  </tr>
2927
2908
 
@@ -2964,50 +2945,56 @@ export enum ToggleState {
2964
2945
  @Component({
2965
2946
  selector: &quot;cds-toggle, ibm-toggle&quot;,
2966
2947
  template: &#x60;
2967
- &lt;button
2968
- class&#x3D;&quot;cds--toggle__button&quot;
2969
- [disabled]&#x3D;&quot;disabled&quot;
2970
- [id]&#x3D;&quot;id&quot;
2971
- role&#x3D;&quot;switch&quot;
2972
- type&#x3D;&quot;button&quot;
2973
- [attr.aria-checked]&#x3D;&quot;checked&quot;
2974
- (click)&#x3D;&quot;onClick($event)&quot;&gt;
2975
- &lt;/button&gt;
2976
- &lt;label
2977
- class&#x3D;&quot;cds--toggle__label&quot;
2978
- [for]&#x3D;&quot;id&quot;&gt;
2979
- &lt;span
2980
- class&#x3D;&quot;cds--toggle__label-text&quot;
2981
- [ngClass]&#x3D;&quot;{
2982
- &#x27;cds--visually-hidden&#x27;: hideLabel
2983
- }&quot;&gt;
2984
- &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
2985
- &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
2986
- &lt;/span&gt;
2987
- &lt;div
2988
- class&#x3D;&quot;cds--toggle__appearance&quot;
2989
- [ngClass]&#x3D;&quot;{
2990
- &#x27;cds--toggle__appearance--sm&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;
2991
- }&quot;&gt;
2948
+ &lt;ng-container *ngIf&#x3D;&quot;!skeleton; else skeletonTemplate;&quot;&gt;
2949
+ &lt;button
2950
+ class&#x3D;&quot;cds--toggle__button&quot;
2951
+ [disabled]&#x3D;&quot;disabled&quot;
2952
+ [id]&#x3D;&quot;id&quot;
2953
+ role&#x3D;&quot;switch&quot;
2954
+ type&#x3D;&quot;button&quot;
2955
+ [attr.aria-checked]&#x3D;&quot;checked&quot;
2956
+ (click)&#x3D;&quot;onClick($event)&quot;&gt;
2957
+ &lt;/button&gt;
2958
+ &lt;label
2959
+ class&#x3D;&quot;cds--toggle__label&quot;
2960
+ [for]&#x3D;&quot;id&quot;&gt;
2961
+ &lt;span
2962
+ class&#x3D;&quot;cds--toggle__label-text&quot;
2963
+ [ngClass]&#x3D;&quot;{
2964
+ &#x27;cds--visually-hidden&#x27;: hideLabel
2965
+ }&quot;&gt;
2966
+ &lt;ng-container *ngIf&#x3D;&quot;!isTemplate(label)&quot;&gt;{{label}}&lt;/ng-container&gt;
2967
+ &lt;ng-template *ngIf&#x3D;&quot;isTemplate(label)&quot; [ngTemplateOutlet]&#x3D;&quot;label&quot;&gt;&lt;/ng-template&gt;
2968
+ &lt;/span&gt;
2992
2969
  &lt;div
2993
- class&#x3D;&quot;cds--toggle__switch&quot;
2970
+ class&#x3D;&quot;cds--toggle__appearance&quot;
2994
2971
  [ngClass]&#x3D;&quot;{
2995
- &#x27;cds--toggle__switch--checked&#x27;: checked
2972
+ &#x27;cds--toggle__appearance--sm&#x27;: size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;
2996
2973
  }&quot;&gt;
2997
- &lt;svg
2998
- *ngIf&#x3D;&quot;size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;&quot;
2999
- class&#x3D;&#x27;cds--toggle__check&#x27;
3000
- width&#x3D;&quot;6px&quot;
3001
- height&#x3D;&quot;5px&quot;
3002
- viewBox&#x3D;&quot;0 0 6 5&quot;&gt;
3003
- &lt;path d&#x3D;&quot;M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z&quot; /&gt;
3004
- &lt;/svg&gt;
2974
+ &lt;div
2975
+ class&#x3D;&quot;cds--toggle__switch&quot;
2976
+ [ngClass]&#x3D;&quot;{
2977
+ &#x27;cds--toggle__switch--checked&#x27;: checked
2978
+ }&quot;&gt;
2979
+ &lt;svg
2980
+ *ngIf&#x3D;&quot;size &#x3D;&#x3D;&#x3D; &#x27;sm&#x27;&quot;
2981
+ class&#x3D;&#x27;cds--toggle__check&#x27;
2982
+ width&#x3D;&quot;6px&quot;
2983
+ height&#x3D;&quot;5px&quot;
2984
+ viewBox&#x3D;&quot;0 0 6 5&quot;&gt;
2985
+ &lt;path d&#x3D;&quot;M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z&quot; /&gt;
2986
+ &lt;/svg&gt;
2987
+ &lt;/div&gt;
2988
+ &lt;span class&#x3D;&quot;cds--toggle__text&quot;&gt;
2989
+ {{(hideLabel ? label : (getCheckedText() | async))}}
2990
+ &lt;/span&gt;
3005
2991
  &lt;/div&gt;
3006
- &lt;span class&#x3D;&quot;cds--toggle__text&quot;&gt;
3007
- {{(hideLabel ? label : (getCheckedText() | async))}}
3008
- &lt;/span&gt;
3009
- &lt;/div&gt;
3010
- &lt;/label&gt;
2992
+ &lt;/label&gt;
2993
+ &lt;/ng-container&gt;
2994
+ &lt;ng-template #skeletonTemplate&gt;
2995
+ &lt;div class&#x3D;&quot;cds--toggle__skeleton-circle&quot;&gt;&lt;/div&gt;
2996
+ &lt;div class&#x3D;&quot;cds--toggle__skeleton-rectangle&quot;&gt;&lt;/div&gt;
2997
+ &lt;/ng-template&gt;
3011
2998
  &#x60;,
3012
2999
  providers: [
3013
3000
  {
@@ -3059,12 +3046,16 @@ export class Toggle extends Checkbox {
3059
3046
  */
3060
3047
  @Input() hideLabel &#x3D; false;
3061
3048
 
3049
+ @HostBinding(&quot;class.cds--toggle--skeleton&quot;) @Input() skeleton &#x3D; false;
3050
+
3062
3051
  @HostBinding(&quot;class.cds--toggle&quot;) toggleClass &#x3D; true;
3063
3052
  @HostBinding(&quot;class.cds--toggle--disabled&quot;) get disabledClass () {
3064
3053
  return this.disabled;
3065
3054
  }
3066
3055
 
3067
- @HostBinding(&quot;class.cds--form-item&quot;) formItem &#x3D; true;
3056
+ @HostBinding(&quot;class.cds--form-item&quot;) get formItem() {
3057
+ return !this.skeleton;
3058
+ }
3068
3059
 
3069
3060
  /**
3070
3061
  * The unique id allocated to the &#x60;Toggle&#x60;.
@@ -3149,7 +3140,7 @@ export class Toggle extends Checkbox {
3149
3140
  <script src="../js/libs/htmlparser.js"></script>
3150
3141
  <script src="../js/libs/deep-iterator.js"></script>
3151
3142
  <script>
3152
- var COMPONENT_TEMPLATE = '<div><button class="cds--toggle__button" [disabled]="disabled" [id]="id" role="switch" type="button" [attr.aria-checked]="checked" (click)="onClick($event)"></button><label class="cds--toggle__label" [for]="id"> <span class="cds--toggle__label-text" [ngClass]="{ \'cds--visually-hidden\': hideLabel }"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </span> <div class="cds--toggle__appearance" [ngClass]="{ \'cds--toggle__appearance--sm\': size === \'sm\' }"> <div class="cds--toggle__switch" [ngClass]="{ \'cds--toggle__switch--checked\': checked }"> <svg *ngIf="size === \'sm\'" class=\'cds--toggle__check\' width="6px" height="5px" viewBox="0 0 6 5"> <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" /> </svg> </div> <span class="cds--toggle__text"> {{(hideLabel ? label : (getCheckedText() | async))}} </span> </div></label> </div>'
3143
+ var COMPONENT_TEMPLATE = '<div><ng-container *ngIf="!skeleton; else skeletonTemplate;"> <button class="cds--toggle__button" [disabled]="disabled" [id]="id" role="switch" type="button" [attr.aria-checked]="checked" (click)="onClick($event)"> </button> <label class="cds--toggle__label" [for]="id"> <span class="cds--toggle__label-text" [ngClass]="{ \'cds--visually-hidden\': hideLabel }"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </span> <div class="cds--toggle__appearance" [ngClass]="{ \'cds--toggle__appearance--sm\': size === \'sm\' }"> <div class="cds--toggle__switch" [ngClass]="{ \'cds--toggle__switch--checked\': checked }"> <svg *ngIf="size === \'sm\'" class=\'cds--toggle__check\' width="6px" height="5px" viewBox="0 0 6 5"> <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" /> </svg> </div> <span class="cds--toggle__text"> {{(hideLabel ? label : (getCheckedText() | async))}} </span> </div> </label></ng-container><ng-template #skeletonTemplate> <div class="cds--toggle__skeleton-circle"></div> <div class="cds--toggle__skeleton-rectangle"></div></ng-template> </div>'
3153
3144
  var COMPONENTS = [{'name': 'Accordion', 'selector': 'cds-accordion, ibm-accordion'},{'name': 'AccordionItem', 'selector': 'cds-accordion-item, ibm-accordion-item'},{'name': 'ActionableNotification', 'selector': 'cds-actionable-notification, ibm-actionable-notification'},{'name': 'AlertModal', 'selector': 'cds-alert-modal, ibm-alert-modal'},{'name': 'BaseIconButton', 'selector': ''},{'name': 'BaseNotification', 'selector': ''},{'name': 'BaseTabHeader', 'selector': ''},{'name': 'Breadcrumb', 'selector': 'cds-breadcrumb, ibm-breadcrumb'},{'name': 'BreadcrumbItemComponent', 'selector': 'cds-breadcrumb-item, ibm-breadcrumb-item'},{'name': 'ButtonSet', 'selector': 'cds-button-set, ibm-button-set'},{'name': 'Checkbox', 'selector': 'cds-checkbox, ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'cds-clickable-tile, ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'cds-code-snippet, ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'cds-combo-box, ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'cds-content-switcher, ibm-content-switcher'},{'name': 'ContextMenuComponent', 'selector': 'cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-context-menu-item, ibm-context-menu-item'},{'name': 'DatePicker', 'selector': 'cds-date-picker, ibm-date-picker'},{'name': 'DatePickerInput', 'selector': 'cds-date-picker-input, ibm-date-picker-input'},{'name': 'Dialog', 'selector': 'cds-dialog, ibm-dialog'},{'name': 'Documentation', 'selector': 'cds-documentation'},{'name': 'Dropdown', 'selector': 'cds-dropdown, ibm-dropdown'},{'name': 'DropdownList', 'selector': 'cds-dropdown-list, ibm-dropdown-list'},{'name': 'ExpandableTile', 'selector': 'cds-expandable-tile, ibm-expandable-tile'},{'name': 'FileComponent', 'selector': 'cds-file, ibm-file'},{'name': 'FileUploader', 'selector': 'cds-file-uploader, ibm-file-uploader'},{'name': 'Hamburger', 'selector': 'cds-hamburger, ibm-hamburger'},{'name': 'Header', 'selector': 'cds-header, ibm-header'},{'name': 'HeaderAction', 'selector': 'cds-header-action, ibm-header-action'},{'name': 'HeaderGlobal', 'selector': 'cds-header-global, ibm-header-global'},{'name': 'HeaderItem', 'selector': 'cds-header-item, ibm-header-item'},{'name': 'HeaderMenu', 'selector': 'cds-header-menu, ibm-header-menu'},{'name': 'HeaderNavigation', 'selector': 'cds-header-navigation, ibm-header-navigation'},{'name': 'IconButton', 'selector': 'cds-icon-button, ibm-icon-button'},{'name': 'InlineLoading', 'selector': 'cds-inline-loading, ibm-inline-loading'},{'name': 'Label', 'selector': 'cds-label, ibm-label'},{'name': 'ListColumn', 'selector': 'cds-list-column, ibm-list-column'},{'name': 'ListHeader', 'selector': 'cds-list-header, ibm-list-header'},{'name': 'ListRow', 'selector': 'cds-list-row, ibm-list-row'},{'name': 'Loading', 'selector': 'cds-loading, ibm-loading'},{'name': 'Modal', 'selector': 'cds-modal, ibm-modal'},{'name': 'ModalFooter', 'selector': 'cds-modal-footer, ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'cds-modal-header, ibm-modal-header'},{'name': 'Notification', 'selector': 'cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification'},{'name': 'NumberComponent', 'selector': 'cds-number, ibm-number'},{'name': 'OverflowMenu', 'selector': 'cds-overflow-menu, ibm-overflow-menu'},{'name': 'OverflowMenuCustomPane', 'selector': 'cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane'},{'name': 'OverflowMenuOption', 'selector': 'cds-overflow-menu-option, ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'cds-overflow-menu-pane, ibm-overflow-menu-pane'},{'name': 'Overlay', 'selector': 'cds-overlay, ibm-overlay'},{'name': 'Pagination', 'selector': 'cds-pagination, ibm-pagination'},{'name': 'PaginationNav', 'selector': 'cds-pagination-nav, ibm-pagination-navm'},{'name': 'PaginationNavItem', 'selector': 'cds-pagination-nav-item, ibm-pagination-nav-item'},{'name': 'PaginationOverflow', 'selector': 'cds-pagination-overflow, ibm-pagination-overflow'},{'name': 'Panel', 'selector': 'cds-panel, ibm-panel'},{'name': 'Placeholder', 'selector': 'cds-placeholder, ibm-placeholder'},{'name': 'PopoverContent', 'selector': 'cds-popover-content, ibm-popover-content'},{'name': 'ProgressBar', 'selector': 'cds-progress-bar, ibm-progress-bar'},{'name': 'ProgressIndicator', 'selector': 'cds-progress-indicator, ibm-progress-indicator'},{'name': 'Radio', 'selector': 'cds-radio, ibm-radio'},{'name': 'RadioGroup', 'selector': 'cds-radio-group, ibm-radio-group'},{'name': 'Search', 'selector': 'cds-search, ibm-search'},{'name': 'Select', 'selector': 'cds-select, ibm-select'},{'name': 'SelectionTile', 'selector': 'cds-selection-tile, ibm-selection-tile'},{'name': 'SideNav', 'selector': 'cds-sidenav, ibm-sidenav'},{'name': 'SideNavItem', 'selector': 'cds-sidenav-item, ibm-sidenav-item'},{'name': 'SideNavMenu', 'selector': 'cds-sidenav-menu, ibm-sidenav-menu'},{'name': 'SkeletonPlaceholder', 'selector': 'cds-skeleton-placeholder, ibm-skeleton-placeholder'},{'name': 'SkeletonText', 'selector': 'cds-skeleton-text, ibm-skeleton-text'},{'name': 'Slider', 'selector': 'cds-slider, ibm-slider'},{'name': 'StructuredList', 'selector': 'cds-structured-list, ibm-structured-list'},{'name': 'SwitcherList', 'selector': 'cds-switcher-list, ibm-switcher-list'},{'name': 'SwitcherListItem', 'selector': 'cds-switcher-list-item, ibm-switcher-list-item'},{'name': 'Tab', 'selector': 'cds-tab, ibm-tab'},{'name': 'TabHeaderGroup', 'selector': 'cds-tab-header-group, ibm-tab-header-group'},{'name': 'TabHeaders', 'selector': 'cds-tab-headers, ibm-tab-headers'},{'name': 'Table', 'selector': 'cds-table, ibm-table'},{'name': 'TableBody', 'selector': '[cdsTableBody], [ibmTableBody]'},{'name': 'TableCheckbox', 'selector': '[cdsTableCheckbox], [ibmTableCheckbox]'},{'name': 'TableContainer', 'selector': 'cds-table-container, ibm-table-container'},{'name': 'TableData', 'selector': '[cdsTableData], [ibmTableData]'},{'name': 'TableExpandButton', 'selector': '[cdsTableExpandButton], [ibmTableExpandButton]'},{'name': 'TableExpandedRow', 'selector': '[cdsTableExpandedRow], [ibmTableExpandedRow]'},{'name': 'TableHead', 'selector': '[cdsTableHead], [ibmTableHead]'},{'name': 'TableHeadCell', 'selector': '[cdsTableHeadCell], [ibmTableHeadCell]'},{'name': 'TableHeadCheckbox', 'selector': '[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]'},{'name': 'TableHeader', 'selector': 'cds-table-header, ibm-table-header'},{'name': 'TableHeadExpand', 'selector': '[cdsTableHeadExpand], [ibmTableHeadExpand]'},{'name': 'TableRadio', 'selector': '[cdsTableRadio], [ibmTableRadio]'},{'name': 'TableRowComponent', 'selector': '[cdsTableRow], [ibmTableRow]'},{'name': 'TableToolbar', 'selector': 'cds-table-toolbar, ibm-table-toolbar'},{'name': 'TableToolbarActions', 'selector': 'cds-table-toolbar-actions, ibm-table-toolbar-actions'},{'name': 'TableToolbarContent', 'selector': 'cds-table-toolbar-content, ibm-table-toolbar-content'},{'name': 'TableToolbarSearch', 'selector': 'cds-table-toolbar-search, ibm-table-toolbar-search'},{'name': 'Tabs', 'selector': 'cds-tabs, ibm-tabs'},{'name': 'TabSkeleton', 'selector': 'cds-tabs-skeleton, ibm-tabs-skeleton'},{'name': 'Tag', 'selector': 'cds-tag, ibm-tag'},{'name': 'TagFilter', 'selector': 'cds-tag-filter, ibm-tag-filter'},{'name': 'TextareaLabelComponent', 'selector': 'cds-textarea-label, ibm-textarea-label'},{'name': 'TextInputLabelComponent', 'selector': 'cds-text-label, ibm-text-label'},{'name': 'Tile', 'selector': 'cds-tile, ibm-tile'},{'name': 'TileGroup', 'selector': 'cds-tile-group, ibm-tile-group'},{'name': 'TimePicker', 'selector': 'cds-timepicker, ibm-timepicker'},{'name': 'TimePickerSelect', 'selector': 'cds-timepicker-select, ibm-timepicker-select'},{'name': 'Toast', 'selector': 'cds-toast, ibm-toast'},{'name': 'Toggle', 'selector': 'cds-toggle, ibm-toggle'},{'name': 'Toggletip', 'selector': 'cds-toggletip, ibm-toggletip'},{'name': 'Tooltip', 'selector': 'cds-tooltip, ibm-tooltip'},{'name': 'TooltipDefinition', 'selector': 'cds-tooltip-definition, ibm-tooltip-definition'}];
3154
3145
  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]'}];
3155
3146
  var ACTUAL_COMPONENT = {'name': 'Toggle'};