carbon-components-angular 5.12.3 → 5.12.4

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 (83) hide show
  1. package/accordion/accordion.component.d.ts +3 -0
  2. package/button/button.directive.d.ts +8 -0
  3. package/docs/documentation/components/Accordion.html +23 -20
  4. package/docs/documentation/components/Tag.html +1 -1
  5. package/docs/documentation/components/TagFilter.html +1 -1
  6. package/docs/documentation/coverage.html +11 -11
  7. package/docs/documentation/directives/Button.html +309 -10
  8. package/docs/documentation/directives/TextInput.html +195 -11
  9. package/docs/documentation/js/search/search_index.js +2 -2
  10. package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
  11. package/docs/documentation/modules/CodeSnippetModule.html +4 -4
  12. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +42 -38
  13. package/docs/documentation/modules/DatePickerInputModule.html +42 -38
  14. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +4 -4
  15. package/docs/documentation/modules/FileUploaderModule.html +4 -4
  16. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  17. package/docs/documentation/modules/NumberModule.html +4 -4
  18. package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
  19. package/docs/documentation/modules/PanelModule.html +36 -36
  20. package/docs/documentation/modules/RadioModule/dependencies.svg +49 -49
  21. package/docs/documentation/modules/RadioModule.html +49 -49
  22. package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
  23. package/docs/documentation/modules/SelectModule.html +43 -43
  24. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  25. package/docs/documentation/modules/SliderModule.html +4 -4
  26. package/docs/documentation/modules/TableModule/dependencies.svg +216 -216
  27. package/docs/documentation/modules/TableModule.html +216 -216
  28. package/docs/documentation/modules/TabsModule/dependencies.svg +4 -4
  29. package/docs/documentation/modules/TabsModule.html +4 -4
  30. package/docs/documentation/modules/TagModule/dependencies.svg +29 -29
  31. package/docs/documentation/modules/TagModule.html +29 -29
  32. package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
  33. package/docs/documentation/modules/ThemeModule.html +4 -4
  34. package/docs/documentation/modules/TilesModule/dependencies.svg +101 -101
  35. package/docs/documentation/modules/TilesModule.html +101 -101
  36. package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -45
  37. package/docs/documentation/modules/TimePickerModule.html +41 -45
  38. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +8 -8
  39. package/docs/documentation/modules/TimePickerSelectModule.html +8 -8
  40. package/docs/documentation/modules/ToggleModule/dependencies.svg +41 -45
  41. package/docs/documentation/modules/ToggleModule.html +41 -45
  42. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  43. package/docs/documentation/modules/ToggletipModule.html +37 -37
  44. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  45. package/docs/documentation/modules/TooltipModule.html +4 -4
  46. package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
  47. package/docs/documentation/modules/UIShellModule.html +4 -4
  48. package/docs/documentation.json +286 -48
  49. package/docs/storybook/4578.86305077.iframe.bundle.js +1 -0
  50. package/docs/storybook/{7153.22bf775d.iframe.bundle.js → 7153.91b7684a.iframe.bundle.js} +1 -1
  51. package/docs/storybook/accordion-accordion-stories.4a6c54ee.iframe.bundle.js +1 -0
  52. package/docs/storybook/iframe.html +2 -2
  53. package/docs/storybook/main.8d868a96.iframe.bundle.js +1 -0
  54. package/docs/storybook/{patterns-filtering-multiple-categories-stories.6703c130.iframe.bundle.js → patterns-filtering-multiple-categories-stories.558f489b.iframe.bundle.js} +1 -1
  55. package/docs/storybook/project.json +1 -1
  56. package/docs/storybook/{runtime~main.584e1b10.iframe.bundle.js → runtime~main.84b152cd.iframe.bundle.js} +1 -1
  57. package/docs/storybook/{tag-tag-stories.5e95b96d.iframe.bundle.js → tag-tag-stories.e525e112.iframe.bundle.js} +1 -1
  58. package/esm2020/accordion/accordion.component.mjs +12 -3
  59. package/esm2020/button/button.directive.mjs +36 -2
  60. package/esm2020/input/input.directive.mjs +24 -2
  61. package/esm2020/tag/tag-filter.component.mjs +2 -2
  62. package/esm2020/tag/tag.component.mjs +2 -2
  63. package/fesm2015/carbon-components-angular-accordion.mjs +11 -2
  64. package/fesm2015/carbon-components-angular-accordion.mjs.map +1 -1
  65. package/fesm2015/carbon-components-angular-button.mjs +35 -1
  66. package/fesm2015/carbon-components-angular-button.mjs.map +1 -1
  67. package/fesm2015/carbon-components-angular-input.mjs +23 -1
  68. package/fesm2015/carbon-components-angular-input.mjs.map +1 -1
  69. package/fesm2015/carbon-components-angular-tag.mjs +2 -2
  70. package/fesm2015/carbon-components-angular-tag.mjs.map +1 -1
  71. package/fesm2020/carbon-components-angular-accordion.mjs +11 -2
  72. package/fesm2020/carbon-components-angular-accordion.mjs.map +1 -1
  73. package/fesm2020/carbon-components-angular-button.mjs +35 -1
  74. package/fesm2020/carbon-components-angular-button.mjs.map +1 -1
  75. package/fesm2020/carbon-components-angular-input.mjs +23 -1
  76. package/fesm2020/carbon-components-angular-input.mjs.map +1 -1
  77. package/fesm2020/carbon-components-angular-tag.mjs +2 -2
  78. package/fesm2020/carbon-components-angular-tag.mjs.map +1 -1
  79. package/input/input.directive.d.ts +6 -0
  80. package/package.json +1 -1
  81. package/docs/storybook/4578.d79a1b3e.iframe.bundle.js +0 -1
  82. package/docs/storybook/accordion-accordion-stories.87b53382.iframe.bundle.js +0 -1
  83. package/docs/storybook/main.4241d66b.iframe.bundle.js +0 -1
package/docs/documentation/directives/Button.html CHANGED
@@ -198,6 +198,21 @@
198
198
  <li>
199
199
  <a href="#class.cds--btn--xl" >class.cds--btn--xl</a>
200
200
  </li>
201
+ <li>
202
+ <a href="#class.cds--layout--size-2xl" >class.cds--layout--size-2xl</a>
203
+ </li>
204
+ <li>
205
+ <a href="#class.cds--layout--size-lg" >class.cds--layout--size-lg</a>
206
+ </li>
207
+ <li>
208
+ <a href="#class.cds--layout--size-md" >class.cds--layout--size-md</a>
209
+ </li>
210
+ <li>
211
+ <a href="#class.cds--layout--size-sm" >class.cds--layout--size-sm</a>
212
+ </li>
213
+ <li>
214
+ <a href="#class.cds--layout--size-xl" >class.cds--layout--size-xl</a>
215
+ </li>
201
216
  </ul>
202
217
  </td>
203
218
  </tr>
@@ -250,6 +265,21 @@
250
265
  <li>
251
266
  <a href="#twoExtraLargeSize" >twoExtraLargeSize</a>
252
267
  </li>
268
+ <li>
269
+ <a href="#smallLayoutSize" >smallLayoutSize</a>
270
+ </li>
271
+ <li>
272
+ <a href="#mediumLayoutSize" >mediumLayoutSize</a>
273
+ </li>
274
+ <li>
275
+ <a href="#largeLayoutSize" >largeLayoutSize</a>
276
+ </li>
277
+ <li>
278
+ <a href="#extraLargeLayoutSize" >extraLargeLayoutSize</a>
279
+ </li>
280
+ <li>
281
+ <a href="#twoExtraLargeLayoutSize" >twoExtraLargeLayoutSize</a>
282
+ </li>
253
283
  </ul>
254
284
  </td>
255
285
  </tr>
@@ -493,7 +523,7 @@ This should only be used for creating custom icon buttons, otherwise use
493
523
  </tr>
494
524
  <tr>
495
525
  <td class="col-md-4">
496
- <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/button/button.directive.ts:93</a></div>
526
+ <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/button/button.directive.ts:96</a></div>
497
527
  </td>
498
528
  </tr>
499
529
 
@@ -623,7 +653,7 @@ This should only be used for creating custom icon buttons, otherwise use
623
653
  </tr>
624
654
  <tr>
625
655
  <td class="col-md-4">
626
- <div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/button/button.directive.ts:87</a></div>
656
+ <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/button/button.directive.ts:90</a></div>
627
657
  </td>
628
658
  </tr>
629
659
 
@@ -649,7 +679,7 @@ This should only be used for creating custom icon buttons, otherwise use
649
679
  </tr>
650
680
  <tr>
651
681
  <td class="col-md-4">
652
- <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/button/button.directive.ts:84</a></div>
682
+ <div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/button/button.directive.ts:87</a></div>
653
683
  </td>
654
684
  </tr>
655
685
 
@@ -727,7 +757,7 @@ This should only be used for creating custom icon buttons, otherwise use
727
757
  </tr>
728
758
  <tr>
729
759
  <td class="col-md-4">
730
- <div class="io-line">Defined in <a href="" data-line="81" class="link-to-prism">src/button/button.directive.ts:81</a></div>
760
+ <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/button/button.directive.ts:84</a></div>
731
761
  </td>
732
762
  </tr>
733
763
 
@@ -779,7 +809,137 @@ This should only be used for creating custom icon buttons, otherwise use
779
809
  </tr>
780
810
  <tr>
781
811
  <td class="col-md-4">
782
- <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/button/button.directive.ts:90</a></div>
812
+ <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/button/button.directive.ts:93</a></div>
813
+ </td>
814
+ </tr>
815
+
816
+
817
+ </tbody>
818
+ </table>
819
+ <table class="table table-sm table-bordered">
820
+ <tbody>
821
+ <tr>
822
+ <td class="col-md-4">
823
+ <a name="class.cds--layout--size-2xl"></a>
824
+ <span class="name">
825
+ <span ><b>class.cds--layout--size-2xl</b></span>
826
+ <a href="#class.cds--layout--size-2xl"><span class="icon ion-ios-link"></span></a>
827
+ </span>
828
+ </td>
829
+ </tr>
830
+ <tr>
831
+ <td class="col-md-4">
832
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
833
+
834
+ </td>
835
+ </tr>
836
+ <tr>
837
+ <td class="col-md-4">
838
+ <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/button/button.directive.ts:113</a></div>
839
+ </td>
840
+ </tr>
841
+
842
+
843
+ </tbody>
844
+ </table>
845
+ <table class="table table-sm table-bordered">
846
+ <tbody>
847
+ <tr>
848
+ <td class="col-md-4">
849
+ <a name="class.cds--layout--size-lg"></a>
850
+ <span class="name">
851
+ <span ><b>class.cds--layout--size-lg</b></span>
852
+ <a href="#class.cds--layout--size-lg"><span class="icon ion-ios-link"></span></a>
853
+ </span>
854
+ </td>
855
+ </tr>
856
+ <tr>
857
+ <td class="col-md-4">
858
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
859
+
860
+ </td>
861
+ </tr>
862
+ <tr>
863
+ <td class="col-md-4">
864
+ <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/button/button.directive.ts:107</a></div>
865
+ </td>
866
+ </tr>
867
+
868
+
869
+ </tbody>
870
+ </table>
871
+ <table class="table table-sm table-bordered">
872
+ <tbody>
873
+ <tr>
874
+ <td class="col-md-4">
875
+ <a name="class.cds--layout--size-md"></a>
876
+ <span class="name">
877
+ <span ><b>class.cds--layout--size-md</b></span>
878
+ <a href="#class.cds--layout--size-md"><span class="icon ion-ios-link"></span></a>
879
+ </span>
880
+ </td>
881
+ </tr>
882
+ <tr>
883
+ <td class="col-md-4">
884
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
885
+
886
+ </td>
887
+ </tr>
888
+ <tr>
889
+ <td class="col-md-4">
890
+ <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/button/button.directive.ts:104</a></div>
891
+ </td>
892
+ </tr>
893
+
894
+
895
+ </tbody>
896
+ </table>
897
+ <table class="table table-sm table-bordered">
898
+ <tbody>
899
+ <tr>
900
+ <td class="col-md-4">
901
+ <a name="class.cds--layout--size-sm"></a>
902
+ <span class="name">
903
+ <span ><b>class.cds--layout--size-sm</b></span>
904
+ <a href="#class.cds--layout--size-sm"><span class="icon ion-ios-link"></span></a>
905
+ </span>
906
+ </td>
907
+ </tr>
908
+ <tr>
909
+ <td class="col-md-4">
910
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
911
+
912
+ </td>
913
+ </tr>
914
+ <tr>
915
+ <td class="col-md-4">
916
+ <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/button/button.directive.ts:101</a></div>
917
+ </td>
918
+ </tr>
919
+
920
+
921
+ </tbody>
922
+ </table>
923
+ <table class="table table-sm table-bordered">
924
+ <tbody>
925
+ <tr>
926
+ <td class="col-md-4">
927
+ <a name="class.cds--layout--size-xl"></a>
928
+ <span class="name">
929
+ <span ><b>class.cds--layout--size-xl</b></span>
930
+ <a href="#class.cds--layout--size-xl"><span class="icon ion-ios-link"></span></a>
931
+ </span>
932
+ </td>
933
+ </tr>
934
+ <tr>
935
+ <td class="col-md-4">
936
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
937
+
938
+ </td>
939
+ </tr>
940
+ <tr>
941
+ <td class="col-md-4">
942
+ <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/button/button.directive.ts:110</a></div>
783
943
  </td>
784
944
  </tr>
785
945
 
@@ -1065,9 +1225,16 @@ This should only be used for creating custom icon buttons, otherwise use
1065
1225
  </tr>
1066
1226
  <tr>
1067
1227
  <td class="col-md-4">
1068
- <div class="io-line">Defined in <a href="" data-line="81" class="link-to-prism">src/button/button.directive.ts:81</a></div>
1228
+ <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/button/button.directive.ts:84</a></div>
1069
1229
  </td>
1070
1230
  </tr>
1231
+ <tr>
1232
+ <td class="col-md-4">
1233
+
1234
+ <div>
1235
+ </div>
1236
+ </td>
1237
+ </tr>
1071
1238
 
1072
1239
  </tbody>
1073
1240
  </table>
@@ -1087,7 +1254,7 @@ This should only be used for creating custom icon buttons, otherwise use
1087
1254
  </tr>
1088
1255
  <tr>
1089
1256
  <td class="col-md-4">
1090
- <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/button/button.directive.ts:84</a></div>
1257
+ <div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/button/button.directive.ts:87</a></div>
1091
1258
  </td>
1092
1259
  </tr>
1093
1260
 
@@ -1109,7 +1276,7 @@ This should only be used for creating custom icon buttons, otherwise use
1109
1276
  </tr>
1110
1277
  <tr>
1111
1278
  <td class="col-md-4">
1112
- <div class="io-line">Defined in <a href="" data-line="87" class="link-to-prism">src/button/button.directive.ts:87</a></div>
1279
+ <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/button/button.directive.ts:90</a></div>
1113
1280
  </td>
1114
1281
  </tr>
1115
1282
 
@@ -1131,7 +1298,7 @@ This should only be used for creating custom icon buttons, otherwise use
1131
1298
  </tr>
1132
1299
  <tr>
1133
1300
  <td class="col-md-4">
1134
- <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/button/button.directive.ts:90</a></div>
1301
+ <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/button/button.directive.ts:93</a></div>
1135
1302
  </td>
1136
1303
  </tr>
1137
1304
 
@@ -1153,7 +1320,117 @@ This should only be used for creating custom icon buttons, otherwise use
1153
1320
  </tr>
1154
1321
  <tr>
1155
1322
  <td class="col-md-4">
1156
- <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/button/button.directive.ts:93</a></div>
1323
+ <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/button/button.directive.ts:96</a></div>
1324
+ </td>
1325
+ </tr>
1326
+
1327
+ </tbody>
1328
+ </table>
1329
+ <table class="table table-sm table-bordered">
1330
+ <tbody>
1331
+ <tr>
1332
+ <td class="col-md-4">
1333
+ <a name="smallLayoutSize"></a>
1334
+ <span class="name"><b>smallLayoutSize</b><a href="#smallLayoutSize"><span class="icon ion-ios-link"></span></a></span>
1335
+ </td>
1336
+ </tr>
1337
+
1338
+ <tr>
1339
+ <td class="col-md-4">
1340
+ <span class="accessor"><b>get</b><code>smallLayoutSize()</code></span>
1341
+ </td>
1342
+ </tr>
1343
+ <tr>
1344
+ <td class="col-md-4">
1345
+ <div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/button/button.directive.ts:101</a></div>
1346
+ </td>
1347
+ </tr>
1348
+
1349
+ </tbody>
1350
+ </table>
1351
+ <table class="table table-sm table-bordered">
1352
+ <tbody>
1353
+ <tr>
1354
+ <td class="col-md-4">
1355
+ <a name="mediumLayoutSize"></a>
1356
+ <span class="name"><b>mediumLayoutSize</b><a href="#mediumLayoutSize"><span class="icon ion-ios-link"></span></a></span>
1357
+ </td>
1358
+ </tr>
1359
+
1360
+ <tr>
1361
+ <td class="col-md-4">
1362
+ <span class="accessor"><b>get</b><code>mediumLayoutSize()</code></span>
1363
+ </td>
1364
+ </tr>
1365
+ <tr>
1366
+ <td class="col-md-4">
1367
+ <div class="io-line">Defined in <a href="" data-line="104" class="link-to-prism">src/button/button.directive.ts:104</a></div>
1368
+ </td>
1369
+ </tr>
1370
+
1371
+ </tbody>
1372
+ </table>
1373
+ <table class="table table-sm table-bordered">
1374
+ <tbody>
1375
+ <tr>
1376
+ <td class="col-md-4">
1377
+ <a name="largeLayoutSize"></a>
1378
+ <span class="name"><b>largeLayoutSize</b><a href="#largeLayoutSize"><span class="icon ion-ios-link"></span></a></span>
1379
+ </td>
1380
+ </tr>
1381
+
1382
+ <tr>
1383
+ <td class="col-md-4">
1384
+ <span class="accessor"><b>get</b><code>largeLayoutSize()</code></span>
1385
+ </td>
1386
+ </tr>
1387
+ <tr>
1388
+ <td class="col-md-4">
1389
+ <div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/button/button.directive.ts:107</a></div>
1390
+ </td>
1391
+ </tr>
1392
+
1393
+ </tbody>
1394
+ </table>
1395
+ <table class="table table-sm table-bordered">
1396
+ <tbody>
1397
+ <tr>
1398
+ <td class="col-md-4">
1399
+ <a name="extraLargeLayoutSize"></a>
1400
+ <span class="name"><b>extraLargeLayoutSize</b><a href="#extraLargeLayoutSize"><span class="icon ion-ios-link"></span></a></span>
1401
+ </td>
1402
+ </tr>
1403
+
1404
+ <tr>
1405
+ <td class="col-md-4">
1406
+ <span class="accessor"><b>get</b><code>extraLargeLayoutSize()</code></span>
1407
+ </td>
1408
+ </tr>
1409
+ <tr>
1410
+ <td class="col-md-4">
1411
+ <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/button/button.directive.ts:110</a></div>
1412
+ </td>
1413
+ </tr>
1414
+
1415
+ </tbody>
1416
+ </table>
1417
+ <table class="table table-sm table-bordered">
1418
+ <tbody>
1419
+ <tr>
1420
+ <td class="col-md-4">
1421
+ <a name="twoExtraLargeLayoutSize"></a>
1422
+ <span class="name"><b>twoExtraLargeLayoutSize</b><a href="#twoExtraLargeLayoutSize"><span class="icon ion-ios-link"></span></a></span>
1423
+ </td>
1424
+ </tr>
1425
+
1426
+ <tr>
1427
+ <td class="col-md-4">
1428
+ <span class="accessor"><b>get</b><code>twoExtraLargeLayoutSize()</code></span>
1429
+ </td>
1430
+ </tr>
1431
+ <tr>
1432
+ <td class="col-md-4">
1433
+ <div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/button/button.directive.ts:113</a></div>
1157
1434
  </td>
1158
1435
  </tr>
1159
1436
 
@@ -1245,6 +1522,9 @@ export class Button {
1245
1522
  @HostBinding(&quot;class.cds--btn--danger--ghost&quot;) get dangerGhost() {
1246
1523
  return this.cdsButton &#x3D;&#x3D;&#x3D; &quot;danger--ghost&quot;;
1247
1524
  }
1525
+ /**
1526
+ * @todo remove &#x60;cds--btn--${size}&#x60; classes in v12
1527
+ */
1248
1528
  @HostBinding(&quot;class.cds--btn--sm&quot;) get smallSize() {
1249
1529
  return this.size &#x3D;&#x3D;&#x3D; &quot;sm&quot; &amp;&amp; !this.isExpressive;
1250
1530
  }
@@ -1260,6 +1540,25 @@ export class Button {
1260
1540
  @HostBinding(&quot;class.cds--btn--2xl&quot;) get twoExtraLargeSize() {
1261
1541
  return this.size &#x3D;&#x3D;&#x3D; &quot;2xl&quot;;
1262
1542
  }
1543
+
1544
+ // Size classes
1545
+ @HostBinding(&quot;class.cds--layout--size-sm&quot;) get smallLayoutSize() {
1546
+ return this.size &#x3D;&#x3D;&#x3D; &quot;sm&quot; &amp;&amp; !this.isExpressive;
1547
+ }
1548
+ @HostBinding(&quot;class.cds--layout--size-md&quot;) get mediumLayoutSize() {
1549
+ return this.size &#x3D;&#x3D;&#x3D; &quot;md&quot; &amp;&amp; !this.isExpressive;
1550
+ }
1551
+ @HostBinding(&quot;class.cds--layout--size-lg&quot;) get largeLayoutSize() {
1552
+ return this.size &#x3D;&#x3D;&#x3D; &quot;lg&quot;;
1553
+ }
1554
+ @HostBinding(&quot;class.cds--layout--size-xl&quot;) get extraLargeLayoutSize() {
1555
+ return this.size &#x3D;&#x3D;&#x3D; &quot;xl&quot;;
1556
+ }
1557
+ @HostBinding(&quot;class.cds--layout--size-2xl&quot;) get twoExtraLargeLayoutSize() {
1558
+ return this.size &#x3D;&#x3D;&#x3D; &quot;2xl&quot;;
1559
+ }
1560
+
1561
+
1263
1562
  }
1264
1563
  </code></pre>
1265
1564
  </div>