carbon-components-angular 5.28.6 → 5.29.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 (43) hide show
  1. package/docs/documentation/classes/NumberChange.html +5 -0
  2. package/docs/documentation/components/NumberComponent.html +105 -64
  3. package/docs/documentation/components/Toggle.html +37 -31
  4. package/docs/documentation/coverage.html +3 -3
  5. package/docs/documentation/js/search/search_index.js +2 -2
  6. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  7. package/docs/documentation/modules/ThemeModule.html +13 -13
  8. package/docs/documentation/modules/TilesModule/dependencies.svg +74 -74
  9. package/docs/documentation/modules/TilesModule.html +74 -74
  10. package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -37
  11. package/docs/documentation/modules/TimePickerModule.html +41 -37
  12. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
  13. package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
  14. package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
  15. package/docs/documentation/modules/ToggleModule.html +4 -4
  16. package/docs/documentation/modules/ToggletipModule/dependencies.svg +38 -38
  17. package/docs/documentation/modules/ToggletipModule.html +38 -38
  18. package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
  19. package/docs/documentation/modules/TooltipModule.html +29 -29
  20. package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
  21. package/docs/documentation/modules/TreeviewModule.html +34 -34
  22. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  23. package/docs/documentation/modules/UIShellModule.html +4 -4
  24. package/docs/documentation.json +179 -168
  25. package/docs/storybook/iframe.html +2 -2
  26. package/docs/storybook/main.f423084e.iframe.bundle.js +1 -0
  27. package/docs/storybook/{number-input-number-stories.9417488b.iframe.bundle.js → number-input-number-stories.a1953960.iframe.bundle.js} +1 -1
  28. package/docs/storybook/project.json +1 -1
  29. package/docs/storybook/{runtime~main.c6417940.iframe.bundle.js → runtime~main.c24c8c1d.iframe.bundle.js} +1 -1
  30. package/esm2020/number-input/number.component.mjs +13 -2
  31. package/esm2020/toggle/toggle.component.mjs +6 -1
  32. package/fesm2015/carbon-components-angular-number-input.mjs +12 -1
  33. package/fesm2015/carbon-components-angular-number-input.mjs.map +1 -1
  34. package/fesm2015/carbon-components-angular-toggle.mjs +5 -0
  35. package/fesm2015/carbon-components-angular-toggle.mjs.map +1 -1
  36. package/fesm2020/carbon-components-angular-number-input.mjs +12 -1
  37. package/fesm2020/carbon-components-angular-number-input.mjs.map +1 -1
  38. package/fesm2020/carbon-components-angular-toggle.mjs +5 -0
  39. package/fesm2020/carbon-components-angular-toggle.mjs.map +1 -1
  40. package/number-input/number.component.d.ts +5 -1
  41. package/package.json +1 -1
  42. package/toggle/toggle.component.d.ts +5 -0
  43. package/docs/storybook/main.6dd3a7b1.iframe.bundle.js +0 -1
package/docs/documentation/classes/NumberChange.html CHANGED
@@ -322,6 +322,7 @@ export class NumberChange {
322
322
  [attr.max]="max"
323
323
  [attr.step]="step"
324
324
  [disabled]="disabled"
325
+ [readonly]="readonly"
325
326
  [required]="required"
326
327
  [attr.aria-label]="ariaLabel"
327
328
  [attr.data-invalid]="invalid ? invalid : null"
@@ -399,6 +400,10 @@ export class NumberComponent implements ControlValueAccessor {
399
400
 
400
401
  @HostBinding("class.cds--form-item") containerClass = true;
401
402
 
403
+ /**
404
+ * Set to `true` for readonly state.
405
+ */
406
+ @Input() @HostBinding("class.cds--number--readonly") readonly = false;
402
407
  /**
403
408
  * @deprecated since v5 - Use `cdsLayer` directive instead
404
409
  * `light` or `dark` number input theme.
package/docs/documentation/components/NumberComponent.html CHANGED
@@ -204,6 +204,7 @@
204
204
  [attr.max]="max"
205
205
  [attr.step]="step"
206
206
  [disabled]="disabled"
207
+ [readonly]="readonly"
207
208
  [required]="required"
208
209
  [attr.aria-label]="ariaLabel"
209
210
  [attr.data-invalid]="invalid ? invalid : null"
@@ -421,6 +422,9 @@
421
422
  <li>
422
423
  <a href="#precision" >precision</a>
423
424
  </li>
425
+ <li>
426
+ <a href="#readonly" >readonly</a>
427
+ </li>
424
428
  <li>
425
429
  <a href="#required" >required</a>
426
430
  </li>
@@ -529,7 +533,7 @@
529
533
  </tr>
530
534
  <tr>
531
535
  <td class="col-md-4">
532
- <div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/number-input/number.component.ts:266</a></div>
536
+ <div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">src/number-input/number.component.ts:271</a></div>
533
537
  </td>
534
538
  </tr>
535
539
 
@@ -587,7 +591,7 @@
587
591
  </tr>
588
592
  <tr>
589
593
  <td class="col-md-2" colspan="2">
590
- <div class="io-line">Defined in <a href="" data-line="239" class="link-to-prism">src/number-input/number.component.ts:239</a></div>
594
+ <div class="io-line">Defined in <a href="" data-line="244" class="link-to-prism">src/number-input/number.component.ts:244</a></div>
591
595
  </td>
592
596
  </tr>
593
597
  <tr>
@@ -614,7 +618,7 @@
614
618
  </tr>
615
619
  <tr>
616
620
  <td class="col-md-2" colspan="2">
617
- <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/number-input/number.component.ts:246</a></div>
621
+ <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/number-input/number.component.ts:251</a></div>
618
622
  </td>
619
623
  </tr>
620
624
  </tbody>
@@ -640,7 +644,7 @@
640
644
  </tr>
641
645
  <tr>
642
646
  <td class="col-md-2" colspan="2">
643
- <div class="io-line">Defined in <a href="" data-line="161" class="link-to-prism">src/number-input/number.component.ts:161</a></div>
647
+ <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/number-input/number.component.ts:166</a></div>
644
648
  </td>
645
649
  </tr>
646
650
  <tr>
@@ -667,7 +671,7 @@
667
671
  </tr>
668
672
  <tr>
669
673
  <td class="col-md-2" colspan="2">
670
- <div class="io-line">Defined in <a href="" data-line="215" class="link-to-prism">src/number-input/number.component.ts:215</a></div>
674
+ <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/number-input/number.component.ts:220</a></div>
671
675
  </td>
672
676
  </tr>
673
677
  <tr>
@@ -699,7 +703,7 @@
699
703
  </tr>
700
704
  <tr>
701
705
  <td class="col-md-2" colspan="2">
702
- <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/number-input/number.component.ts:173</a></div>
706
+ <div class="io-line">Defined in <a href="" data-line="178" class="link-to-prism">src/number-input/number.component.ts:178</a></div>
703
707
  </td>
704
708
  </tr>
705
709
  <tr>
@@ -726,7 +730,7 @@
726
730
  </tr>
727
731
  <tr>
728
732
  <td class="col-md-2" colspan="2">
729
- <div class="io-line">Defined in <a href="" data-line="255" class="link-to-prism">src/number-input/number.component.ts:255</a></div>
733
+ <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/number-input/number.component.ts:260</a></div>
730
734
  </td>
731
735
  </tr>
732
736
  </tbody>
@@ -752,7 +756,7 @@
752
756
  </tr>
753
757
  <tr>
754
758
  <td class="col-md-2" colspan="2">
755
- <div class="io-line">Defined in <a href="" data-line="169" class="link-to-prism">src/number-input/number.component.ts:169</a></div>
759
+ <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/number-input/number.component.ts:174</a></div>
756
760
  </td>
757
761
  </tr>
758
762
  <tr>
@@ -779,7 +783,7 @@
779
783
  </tr>
780
784
  <tr>
781
785
  <td class="col-md-2" colspan="2">
782
- <div class="io-line">Defined in <a href="" data-line="219" class="link-to-prism">src/number-input/number.component.ts:219</a></div>
786
+ <div class="io-line">Defined in <a href="" data-line="224" class="link-to-prism">src/number-input/number.component.ts:224</a></div>
783
787
  </td>
784
788
  </tr>
785
789
  <tr>
@@ -806,7 +810,7 @@
806
810
  </tr>
807
811
  <tr>
808
812
  <td class="col-md-2" colspan="2">
809
- <div class="io-line">Defined in <a href="" data-line="211" class="link-to-prism">src/number-input/number.component.ts:211</a></div>
813
+ <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/number-input/number.component.ts:216</a></div>
810
814
  </td>
811
815
  </tr>
812
816
  <tr>
@@ -838,7 +842,7 @@
838
842
  </tr>
839
843
  <tr>
840
844
  <td class="col-md-2" colspan="2">
841
- <div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/number-input/number.component.ts:207</a></div>
845
+ <div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/number-input/number.component.ts:212</a></div>
842
846
  </td>
843
847
  </tr>
844
848
  <tr>
@@ -870,7 +874,7 @@
870
874
  </tr>
871
875
  <tr>
872
876
  <td class="col-md-2" colspan="2">
873
- <div class="io-line">Defined in <a href="" data-line="203" class="link-to-prism">src/number-input/number.component.ts:203</a></div>
877
+ <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/number-input/number.component.ts:208</a></div>
874
878
  </td>
875
879
  </tr>
876
880
  <tr>
@@ -902,7 +906,7 @@
902
906
  </tr>
903
907
  <tr>
904
908
  <td class="col-md-2" colspan="2">
905
- <div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/number-input/number.component.ts:177</a></div>
909
+ <div class="io-line">Defined in <a href="" data-line="182" class="link-to-prism">src/number-input/number.component.ts:182</a></div>
906
910
  </td>
907
911
  </tr>
908
912
  <tr>
@@ -929,12 +933,44 @@
929
933
  </tr>
930
934
  <tr>
931
935
  <td class="col-md-2" colspan="2">
932
- <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/number-input/number.component.ts:227</a></div>
936
+ <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/number-input/number.component.ts:232</a></div>
933
937
  </td>
934
938
  </tr>
935
939
  <tr>
936
940
  <td class="col-md-4">
937
941
  <div class="io-description"><p>If <code>step</code> is a decimal, we may want precision to be set to go around floating point precision.</p>
942
+ </div>
943
+ </td>
944
+ </tr>
945
+ </tbody>
946
+ </table>
947
+ <table class="table table-sm table-bordered">
948
+ <tbody>
949
+ <tr>
950
+ <td class="col-md-4">
951
+ <a name="readonly"></a>
952
+ <b>readonly</b>
953
+ </td>
954
+ </tr>
955
+ <tr>
956
+ <td class="col-md-4">
957
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
958
+
959
+ </td>
960
+ </tr>
961
+ <tr>
962
+ <td class="col-md-4">
963
+ <i>Default value : </i><code>false</code>
964
+ </td>
965
+ </tr>
966
+ <tr>
967
+ <td class="col-md-2" colspan="2">
968
+ <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/number-input/number.component.ts:157</a></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 readonly state.</p>
938
974
  </div>
939
975
  </td>
940
976
  </tr>
@@ -956,7 +992,7 @@
956
992
  </tr>
957
993
  <tr>
958
994
  <td class="col-md-2" colspan="2">
959
- <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/number-input/number.component.ts:185</a></div>
995
+ <div class="io-line">Defined in <a href="" data-line="190" class="link-to-prism">src/number-input/number.component.ts:190</a></div>
960
996
  </td>
961
997
  </tr>
962
998
  <tr>
@@ -988,7 +1024,7 @@
988
1024
  </tr>
989
1025
  <tr>
990
1026
  <td class="col-md-2" colspan="2">
991
- <div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/number-input/number.component.ts:181</a></div>
1027
+ <div class="io-line">Defined in <a href="" data-line="186" class="link-to-prism">src/number-input/number.component.ts:186</a></div>
992
1028
  </td>
993
1029
  </tr>
994
1030
  <tr>
@@ -1020,7 +1056,7 @@
1020
1056
  </tr>
1021
1057
  <tr>
1022
1058
  <td class="col-md-2" colspan="2">
1023
- <div class="io-line">Defined in <a href="" data-line="165" class="link-to-prism">src/number-input/number.component.ts:165</a></div>
1059
+ <div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/number-input/number.component.ts:170</a></div>
1024
1060
  </td>
1025
1061
  </tr>
1026
1062
  <tr>
@@ -1052,7 +1088,7 @@
1052
1088
  </tr>
1053
1089
  <tr>
1054
1090
  <td class="col-md-2" colspan="2">
1055
- <div class="io-line">Defined in <a href="" data-line="223" class="link-to-prism">src/number-input/number.component.ts:223</a></div>
1091
+ <div class="io-line">Defined in <a href="" data-line="228" class="link-to-prism">src/number-input/number.component.ts:228</a></div>
1056
1092
  </td>
1057
1093
  </tr>
1058
1094
  <tr>
@@ -1084,7 +1120,7 @@
1084
1120
  </tr>
1085
1121
  <tr>
1086
1122
  <td class="col-md-2" colspan="2">
1087
- <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/number-input/number.component.ts:157</a></div>
1123
+ <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/number-input/number.component.ts:162</a></div>
1088
1124
  </td>
1089
1125
  </tr>
1090
1126
  </tbody>
@@ -1105,7 +1141,7 @@
1105
1141
  </tr>
1106
1142
  <tr>
1107
1143
  <td class="col-md-2" colspan="2">
1108
- <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/number-input/number.component.ts:189</a></div>
1144
+ <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/number-input/number.component.ts:194</a></div>
1109
1145
  </td>
1110
1146
  </tr>
1111
1147
  <tr>
@@ -1137,7 +1173,7 @@
1137
1173
  </tr>
1138
1174
  <tr>
1139
1175
  <td class="col-md-2" colspan="2">
1140
- <div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/number-input/number.component.ts:231</a></div>
1176
+ <div class="io-line">Defined in <a href="" data-line="236" class="link-to-prism">src/number-input/number.component.ts:236</a></div>
1141
1177
  </td>
1142
1178
  </tr>
1143
1179
  <tr>
@@ -1164,7 +1200,7 @@
1164
1200
  </tr>
1165
1201
  <tr>
1166
1202
  <td class="col-md-2" colspan="2">
1167
- <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/number-input/number.component.ts:235</a></div>
1203
+ <div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/number-input/number.component.ts:240</a></div>
1168
1204
  </td>
1169
1205
  </tr>
1170
1206
  <tr>
@@ -1194,7 +1230,7 @@
1194
1230
  </tr>
1195
1231
  <tr>
1196
1232
  <td class="col-md-2" colspan="2">
1197
- <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/number-input/number.component.ts:243</a></div>
1233
+ <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/number-input/number.component.ts:248</a></div>
1198
1234
  </td>
1199
1235
  </tr>
1200
1236
  <tr>
@@ -1231,7 +1267,7 @@
1231
1267
  </tr>
1232
1268
  <tr>
1233
1269
  <td class="col-md-4">
1234
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/number-input/number.component.ts:151</a></div>
1270
+ <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/number-input/number.component.ts:152</a></div>
1235
1271
  </td>
1236
1272
  </tr>
1237
1273
 
@@ -1261,8 +1297,8 @@
1261
1297
 
1262
1298
  <tr>
1263
1299
  <td class="col-md-4">
1264
- <div class="io-line">Defined in <a href="" data-line="299"
1265
- class="link-to-prism">src/number-input/number.component.ts:299</a></div>
1300
+ <div class="io-line">Defined in <a href="" data-line="304"
1301
+ class="link-to-prism">src/number-input/number.component.ts:304</a></div>
1266
1302
  </td>
1267
1303
  </tr>
1268
1304
 
@@ -1295,8 +1331,8 @@
1295
1331
 
1296
1332
  <tr>
1297
1333
  <td class="col-md-4">
1298
- <div class="io-line">Defined in <a href="" data-line="353"
1299
- class="link-to-prism">src/number-input/number.component.ts:353</a></div>
1334
+ <div class="io-line">Defined in <a href="" data-line="358"
1335
+ class="link-to-prism">src/number-input/number.component.ts:358</a></div>
1300
1336
  </td>
1301
1337
  </tr>
1302
1338
 
@@ -1343,8 +1379,8 @@
1343
1379
 
1344
1380
  <tr>
1345
1381
  <td class="col-md-4">
1346
- <div class="io-line">Defined in <a href="" data-line="299"
1347
- class="link-to-prism">src/number-input/number.component.ts:299</a></div>
1382
+ <div class="io-line">Defined in <a href="" data-line="304"
1383
+ class="link-to-prism">src/number-input/number.component.ts:304</a></div>
1348
1384
  </td>
1349
1385
  </tr>
1350
1386
 
@@ -1380,8 +1416,8 @@
1380
1416
 
1381
1417
  <tr>
1382
1418
  <td class="col-md-4">
1383
- <div class="io-line">Defined in <a href="" data-line="342"
1384
- class="link-to-prism">src/number-input/number.component.ts:342</a></div>
1419
+ <div class="io-line">Defined in <a href="" data-line="347"
1420
+ class="link-to-prism">src/number-input/number.component.ts:347</a></div>
1385
1421
  </td>
1386
1422
  </tr>
1387
1423
 
@@ -1417,8 +1453,8 @@
1417
1453
 
1418
1454
  <tr>
1419
1455
  <td class="col-md-4">
1420
- <div class="io-line">Defined in <a href="" data-line="346"
1421
- class="link-to-prism">src/number-input/number.component.ts:346</a></div>
1456
+ <div class="io-line">Defined in <a href="" data-line="351"
1457
+ class="link-to-prism">src/number-input/number.component.ts:351</a></div>
1422
1458
  </td>
1423
1459
  </tr>
1424
1460
 
@@ -1456,8 +1492,8 @@
1456
1492
 
1457
1493
  <tr>
1458
1494
  <td class="col-md-4">
1459
- <div class="io-line">Defined in <a href="" data-line="366"
1460
- class="link-to-prism">src/number-input/number.component.ts:366</a></div>
1495
+ <div class="io-line">Defined in <a href="" data-line="371"
1496
+ class="link-to-prism">src/number-input/number.component.ts:371</a></div>
1461
1497
  </td>
1462
1498
  </tr>
1463
1499
 
@@ -1519,8 +1555,8 @@
1519
1555
 
1520
1556
  <tr>
1521
1557
  <td class="col-md-4">
1522
- <div class="io-line">Defined in <a href="" data-line="334"
1523
- class="link-to-prism">src/number-input/number.component.ts:334</a></div>
1558
+ <div class="io-line">Defined in <a href="" data-line="339"
1559
+ class="link-to-prism">src/number-input/number.component.ts:339</a></div>
1524
1560
  </td>
1525
1561
  </tr>
1526
1562
 
@@ -1558,8 +1594,8 @@
1558
1594
 
1559
1595
  <tr>
1560
1596
  <td class="col-md-4">
1561
- <div class="io-line">Defined in <a href="" data-line="323"
1562
- class="link-to-prism">src/number-input/number.component.ts:323</a></div>
1597
+ <div class="io-line">Defined in <a href="" data-line="328"
1598
+ class="link-to-prism">src/number-input/number.component.ts:328</a></div>
1563
1599
  </td>
1564
1600
  </tr>
1565
1601
 
@@ -1597,8 +1633,8 @@
1597
1633
 
1598
1634
  <tr>
1599
1635
  <td class="col-md-4">
1600
- <div class="io-line">Defined in <a href="" data-line="361"
1601
- class="link-to-prism">src/number-input/number.component.ts:361</a></div>
1636
+ <div class="io-line">Defined in <a href="" data-line="366"
1637
+ class="link-to-prism">src/number-input/number.component.ts:366</a></div>
1602
1638
  </td>
1603
1639
  </tr>
1604
1640
 
@@ -1662,8 +1698,8 @@
1662
1698
 
1663
1699
  <tr>
1664
1700
  <td class="col-md-4">
1665
- <div class="io-line">Defined in <a href="" data-line="286"
1666
- class="link-to-prism">src/number-input/number.component.ts:286</a></div>
1701
+ <div class="io-line">Defined in <a href="" data-line="291"
1702
+ class="link-to-prism">src/number-input/number.component.ts:291</a></div>
1667
1703
  </td>
1668
1704
  </tr>
1669
1705
 
@@ -1733,8 +1769,8 @@
1733
1769
 
1734
1770
  <tr>
1735
1771
  <td class="col-md-4">
1736
- <div class="io-line">Defined in <a href="" data-line="294"
1737
- class="link-to-prism">src/number-input/number.component.ts:294</a></div>
1772
+ <div class="io-line">Defined in <a href="" data-line="299"
1773
+ class="link-to-prism">src/number-input/number.component.ts:299</a></div>
1738
1774
  </td>
1739
1775
  </tr>
1740
1776
 
@@ -1807,8 +1843,8 @@
1807
1843
 
1808
1844
  <tr>
1809
1845
  <td class="col-md-4">
1810
- <div class="io-line">Defined in <a href="" data-line="306"
1811
- class="link-to-prism">src/number-input/number.component.ts:306</a></div>
1846
+ <div class="io-line">Defined in <a href="" data-line="311"
1847
+ class="link-to-prism">src/number-input/number.component.ts:311</a></div>
1812
1848
  </td>
1813
1849
  </tr>
1814
1850
 
@@ -1878,8 +1914,8 @@
1878
1914
 
1879
1915
  <tr>
1880
1916
  <td class="col-md-4">
1881
- <div class="io-line">Defined in <a href="" data-line="279"
1882
- class="link-to-prism">src/number-input/number.component.ts:279</a></div>
1917
+ <div class="io-line">Defined in <a href="" data-line="284"
1918
+ class="link-to-prism">src/number-input/number.component.ts:284</a></div>
1883
1919
  </td>
1884
1920
  </tr>
1885
1921
 
@@ -1963,7 +1999,7 @@
1963
1999
  </tr>
1964
2000
  <tr>
1965
2001
  <td class="col-md-4">
1966
- <div class="io-line">Defined in <a href="" data-line="265" class="link-to-prism">src/number-input/number.component.ts:265</a></div>
2002
+ <div class="io-line">Defined in <a href="" data-line="270" class="link-to-prism">src/number-input/number.component.ts:270</a></div>
1967
2003
  </td>
1968
2004
  </tr>
1969
2005
 
@@ -1995,7 +2031,7 @@
1995
2031
  </tr>
1996
2032
  <tr>
1997
2033
  <td class="col-md-4">
1998
- <div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/number-input/number.component.ts:266</a></div>
2034
+ <div class="io-line">Defined in <a href="" data-line="271" class="link-to-prism">src/number-input/number.component.ts:271</a></div>
1999
2035
  </td>
2000
2036
  </tr>
2001
2037
 
@@ -2027,7 +2063,7 @@
2027
2063
  </tr>
2028
2064
  <tr>
2029
2065
  <td class="col-md-4">
2030
- <div class="io-line">Defined in <a href="" data-line="263" class="link-to-prism">src/number-input/number.component.ts:263</a></div>
2066
+ <div class="io-line">Defined in <a href="" data-line="268" class="link-to-prism">src/number-input/number.component.ts:268</a></div>
2031
2067
  </td>
2032
2068
  </tr>
2033
2069
 
@@ -2062,7 +2098,7 @@
2062
2098
  </tr>
2063
2099
  <tr>
2064
2100
  <td class="col-md-4">
2065
- <div class="io-line">Defined in <a href="" data-line="151" class="link-to-prism">src/number-input/number.component.ts:151</a></div>
2101
+ <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/number-input/number.component.ts:152</a></div>
2066
2102
  </td>
2067
2103
  </tr>
2068
2104
 
@@ -2094,7 +2130,7 @@
2094
2130
  </tr>
2095
2131
  <tr>
2096
2132
  <td class="col-md-4">
2097
- <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/number-input/number.component.ts:149</a></div>
2133
+ <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/number-input/number.component.ts:150</a></div>
2098
2134
  </td>
2099
2135
  </tr>
2100
2136
 
@@ -2131,7 +2167,7 @@
2131
2167
  </tr>
2132
2168
  <tr>
2133
2169
  <td class="col-md-4">
2134
- <div class="io-line">Defined in <a href="" data-line="313" class="link-to-prism">src/number-input/number.component.ts:313</a></div>
2170
+ <div class="io-line">Defined in <a href="" data-line="318" class="link-to-prism">src/number-input/number.component.ts:318</a></div>
2135
2171
  </td>
2136
2172
  </tr>
2137
2173
 
@@ -2162,7 +2198,7 @@
2162
2198
  </tr>
2163
2199
  <tr>
2164
2200
  <td class="col-md-4">
2165
- <div class="io-line">Defined in <a href="" data-line="318" class="link-to-prism">src/number-input/number.component.ts:318</a></div>
2201
+ <div class="io-line">Defined in <a href="" data-line="323" class="link-to-prism">src/number-input/number.component.ts:323</a></div>
2166
2202
  </td>
2167
2203
  </tr>
2168
2204
 
@@ -2197,7 +2233,7 @@
2197
2233
  </tr>
2198
2234
  <tr>
2199
2235
  <td class="col-md-4">
2200
- <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/number-input/number.component.ts:197</a></div>
2236
+ <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/number-input/number.component.ts:202</a></div>
2201
2237
  </td>
2202
2238
  </tr>
2203
2239
 
@@ -2208,7 +2244,7 @@
2208
2244
  </tr>
2209
2245
  <tr>
2210
2246
  <td class="col-md-4">
2211
- <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/number-input/number.component.ts:189</a></div>
2247
+ <div class="io-line">Defined in <a href="" data-line="194" class="link-to-prism">src/number-input/number.component.ts:194</a></div>
2212
2248
  </td>
2213
2249
  </tr>
2214
2250
  <tr>
@@ -2268,7 +2304,7 @@
2268
2304
  </tr>
2269
2305
  <tr>
2270
2306
  <td class="col-md-4">
2271
- <div class="io-line">Defined in <a href="" data-line="250" class="link-to-prism">src/number-input/number.component.ts:250</a></div>
2307
+ <div class="io-line">Defined in <a href="" data-line="255" class="link-to-prism">src/number-input/number.component.ts:255</a></div>
2272
2308
  </td>
2273
2309
  </tr>
2274
2310
 
@@ -2279,7 +2315,7 @@
2279
2315
  </tr>
2280
2316
  <tr>
2281
2317
  <td class="col-md-4">
2282
- <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/number-input/number.component.ts:246</a></div>
2318
+ <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/number-input/number.component.ts:251</a></div>
2283
2319
  </td>
2284
2320
  </tr>
2285
2321
  <tr>
@@ -2337,7 +2373,7 @@
2337
2373
  </tr>
2338
2374
  <tr>
2339
2375
  <td class="col-md-4">
2340
- <div class="io-line">Defined in <a href="" data-line="259" class="link-to-prism">src/number-input/number.component.ts:259</a></div>
2376
+ <div class="io-line">Defined in <a href="" data-line="264" class="link-to-prism">src/number-input/number.component.ts:264</a></div>
2341
2377
  </td>
2342
2378
  </tr>
2343
2379
 
@@ -2348,7 +2384,7 @@
2348
2384
  </tr>
2349
2385
  <tr>
2350
2386
  <td class="col-md-4">
2351
- <div class="io-line">Defined in <a href="" data-line="255" class="link-to-prism">src/number-input/number.component.ts:255</a></div>
2387
+ <div class="io-line">Defined in <a href="" data-line="260" class="link-to-prism">src/number-input/number.component.ts:260</a></div>
2352
2388
  </td>
2353
2389
  </tr>
2354
2390
  <tr>
@@ -2470,6 +2506,7 @@ export class NumberChange {
2470
2506
  [attr.max]&#x3D;&quot;max&quot;
2471
2507
  [attr.step]&#x3D;&quot;step&quot;
2472
2508
  [disabled]&#x3D;&quot;disabled&quot;
2509
+ [readonly]&#x3D;&quot;readonly&quot;
2473
2510
  [required]&#x3D;&quot;required&quot;
2474
2511
  [attr.aria-label]&#x3D;&quot;ariaLabel&quot;
2475
2512
  [attr.data-invalid]&#x3D;&quot;invalid ? invalid : null&quot;
@@ -2547,6 +2584,10 @@ export class NumberComponent implements ControlValueAccessor {
2547
2584
 
2548
2585
  @HostBinding(&quot;class.cds--form-item&quot;) containerClass &#x3D; true;
2549
2586
 
2587
+ /**
2588
+ * Set to &#x60;true&#x60; for readonly state.
2589
+ */
2590
+ @Input() @HostBinding(&quot;class.cds--number--readonly&quot;) readonly &#x3D; false;
2550
2591
  /**
2551
2592
  * @deprecated since v5 - Use &#x60;cdsLayer&#x60; directive instead
2552
2593
  * &#x60;light&#x60; or &#x60;dark&#x60; number input theme.
@@ -2795,7 +2836,7 @@ export { NumberComponent as Number };
2795
2836
  <script src="../js/libs/htmlparser.js"></script>
2796
2837
  <script src="../js/libs/deep-iterator.js"></script>
2797
2838
  <script>
2798
- var COMPONENT_TEMPLATE = '<div><div data-numberinput [attr.data-invalid]="(invalid ? true : null)" class="cds--number" [ngClass]="{ \'cds--number--light\': theme === \'light\', \'cds--number--nolabel\': !label, \'cds--number--helpertext\': helperText, \'cds--skeleton\' : skeleton, \'cds--number--sm\': size === \'sm\', \'cds--number--md\': size === \'md\', \'cds--number--lg\': size === \'lg\' }"> <label *ngIf="skeleton && label" class="cds--label cds--skeleton"></label> <label *ngIf="!skeleton && label" [for]="id" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--number__input-wrapper" [ngClass]="{ \'cds--number__input-wrapper--warning\': warn }"> <input type="number" [id]="id" [value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step" [disabled]="disabled" [required]="required" [attr.aria-label]="ariaLabel" [attr.data-invalid]="invalid ? invalid : null" [placeholder]="placeholder" (change)="onNumberInputChange($event)"/> <svg *ngIf="!skeleton && invalid" cdsIcon="warning--filled" size="16" class="cds--number__invalid"> </svg> <svg *ngIf="!skeleton && !invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--number__invalid cds--number__invalid--warning"> </svg> <div *ngIf="!skeleton" class="cds--number__controls"> <button class="cds--number__control-btn down-icon" type="button" [attr.disabled]="disabled ? true : null" aria-live="polite" aria-atomic="true" [attr.aria-label]="getDecrementLabel() | async" (click)="onDecrement()"> <svg cdsIcon="subtract" size="16"></svg> </button> <div class="cds--number__rule-divider"></div> <button class="cds--number__control-btn up-icon" type="button" [attr.disabled]="disabled ? true : null" aria-live="polite" aria-atomic="true" [attr.aria-label]="getIncrementLabel() | async" (click)="onIncrement()"> <svg cdsIcon="add" size="16"></svg> </button> <div class="cds--number__rule-divider"></div> </div> </div> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{ \'cds--form__helper-text--disabled\': disabled }"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div></div> </div>'
2839
+ var COMPONENT_TEMPLATE = '<div><div data-numberinput [attr.data-invalid]="(invalid ? true : null)" class="cds--number" [ngClass]="{ \'cds--number--light\': theme === \'light\', \'cds--number--nolabel\': !label, \'cds--number--helpertext\': helperText, \'cds--skeleton\' : skeleton, \'cds--number--sm\': size === \'sm\', \'cds--number--md\': size === \'md\', \'cds--number--lg\': size === \'lg\' }"> <label *ngIf="skeleton && label" class="cds--label cds--skeleton"></label> <label *ngIf="!skeleton && label" [for]="id" class="cds--label" [ngClass]="{\'cds--label--disabled\': disabled}"> <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container> <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template> </label> <div class="cds--number__input-wrapper" [ngClass]="{ \'cds--number__input-wrapper--warning\': warn }"> <input type="number" [id]="id" [value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step" [disabled]="disabled" [readonly]="readonly" [required]="required" [attr.aria-label]="ariaLabel" [attr.data-invalid]="invalid ? invalid : null" [placeholder]="placeholder" (change)="onNumberInputChange($event)"/> <svg *ngIf="!skeleton && invalid" cdsIcon="warning--filled" size="16" class="cds--number__invalid"> </svg> <svg *ngIf="!skeleton && !invalid && warn" cdsIcon="warning--alt--filled" size="16" class="cds--number__invalid cds--number__invalid--warning"> </svg> <div *ngIf="!skeleton" class="cds--number__controls"> <button class="cds--number__control-btn down-icon" type="button" [attr.disabled]="disabled ? true : null" aria-live="polite" aria-atomic="true" [attr.aria-label]="getDecrementLabel() | async" (click)="onDecrement()"> <svg cdsIcon="subtract" size="16"></svg> </button> <div class="cds--number__rule-divider"></div> <button class="cds--number__control-btn up-icon" type="button" [attr.disabled]="disabled ? true : null" aria-live="polite" aria-atomic="true" [attr.aria-label]="getIncrementLabel() | async" (click)="onIncrement()"> <svg cdsIcon="add" size="16"></svg> </button> <div class="cds--number__rule-divider"></div> </div> </div> <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text" [ngClass]="{ \'cds--form__helper-text--disabled\': disabled }"> <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container> <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template> </div> <div *ngIf="invalid" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container> <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template> </div> <div *ngIf="!invalid && warn" class="cds--form-requirement"> <ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container> <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template> </div></div> </div>'
2799
2840
  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': 'PasswordInputLabelComponent', 'selector': 'cds-password-label, ibm-password-label'},{'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'}];
2800
2841
  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': 'PasswordInput', 'selector': '[cdsPassword], [ibmPassword]'},{'name': 'PopoverContainer', 'selector': '[cdsPopover], [ibmPopover]'},{'name': 'RouterLinkExtendedDirective', 'selector': '[routerLink]'},{'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]'}];
2801
2842
  var ACTUAL_COMPONENT = {'name': 'NumberComponent'};