carbon-components-angular 5.52.0 → 5.53.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/documentation/components/Toggle.html +79 -65
- package/docs/documentation/coverage.html +7 -7
- package/docs/documentation/directives/List.html +66 -8
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/miscellaneous/enumerations.html +8 -8
- package/docs/documentation/modules/TilesModule/dependencies.svg +82 -82
- package/docs/documentation/modules/TilesModule.html +82 -82
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -37
- package/docs/documentation/modules/TimePickerModule.html +41 -37
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TimePickerSelectModule.html +4 -4
- package/docs/documentation/modules/ToggleModule/dependencies.svg +38 -34
- package/docs/documentation/modules/ToggleModule.html +38 -34
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TreeviewModule.html +4 -4
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +82 -68
- package/docs/storybook/{1895.0331c090.iframe.bundle.js → 1895.4ffc48da.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{list-list-stories.e906cf67.iframe.bundle.js → list-list-stories.b81c613e.iframe.bundle.js} +1 -1
- package/docs/storybook/main.0374ee2c.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.da6b1cc1.iframe.bundle.js → runtime~main.7aee42be.iframe.bundle.js} +1 -1
- package/docs/storybook/{toggle-toggle-stories.def6c644.iframe.bundle.js → toggle-toggle-stories.7832edbb.iframe.bundle.js} +1 -1
- package/esm2020/list/list.directive.mjs +12 -3
- package/esm2020/toggle/toggle.component.mjs +9 -4
- package/fesm2015/carbon-components-angular-list.mjs +11 -2
- package/fesm2015/carbon-components-angular-list.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-toggle.mjs +8 -3
- package/fesm2015/carbon-components-angular-toggle.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-list.mjs +11 -2
- package/fesm2020/carbon-components-angular-list.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-toggle.mjs +8 -3
- package/fesm2020/carbon-components-angular-toggle.mjs.map +1 -1
- package/list/list.directive.d.ts +5 -1
- package/package.json +1 -1
- package/toggle/toggle.component.d.ts +6 -1
- package/docs/storybook/main.607e4b6f.iframe.bundle.js +0 -1
|
@@ -177,7 +177,8 @@
|
|
|
177
177
|
role="switch"
|
|
178
178
|
type="button"
|
|
179
179
|
[attr.aria-checked]="checked"
|
|
180
|
-
(click)="onClick($event)"
|
|
180
|
+
(click)="onClick($event)"
|
|
181
|
+
[attr.aria-label]="ariaLabel">
|
|
181
182
|
</button>
|
|
182
183
|
<label
|
|
183
184
|
class="cds--toggle__label"
|
|
@@ -367,6 +368,9 @@
|
|
|
367
368
|
<tr>
|
|
368
369
|
<td class="col-md-4">
|
|
369
370
|
<ul class="index-list">
|
|
371
|
+
<li>
|
|
372
|
+
<a href="#ariaLabel" >ariaLabel</a>
|
|
373
|
+
</li>
|
|
370
374
|
<li>
|
|
371
375
|
<a href="#hideLabel" >hideLabel</a>
|
|
372
376
|
</li>
|
|
@@ -385,9 +389,6 @@
|
|
|
385
389
|
<li>
|
|
386
390
|
<a href="#skeleton" >skeleton</a>
|
|
387
391
|
</li>
|
|
388
|
-
<li>
|
|
389
|
-
<a href="#ariaLabel" >ariaLabel</a>
|
|
390
|
-
</li>
|
|
391
392
|
<li>
|
|
392
393
|
<a href="#ariaLabelledby" >ariaLabelledby</a>
|
|
393
394
|
</li>
|
|
@@ -511,7 +512,7 @@
|
|
|
511
512
|
</tr>
|
|
512
513
|
<tr>
|
|
513
514
|
<td class="col-md-4">
|
|
514
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
515
|
+
<div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/toggle/toggle.component.ts:170</a></div>
|
|
515
516
|
</td>
|
|
516
517
|
</tr>
|
|
517
518
|
|
|
@@ -565,6 +566,40 @@
|
|
|
565
566
|
|
|
566
567
|
<section data-compodoc="block-inputs">
|
|
567
568
|
<h3 id="inputs">Inputs</h3>
|
|
569
|
+
<table class="table table-sm table-bordered">
|
|
570
|
+
<tbody>
|
|
571
|
+
<tr>
|
|
572
|
+
<td class="col-md-4">
|
|
573
|
+
<a name="ariaLabel"></a>
|
|
574
|
+
<b>ariaLabel</b>
|
|
575
|
+
</td>
|
|
576
|
+
</tr>
|
|
577
|
+
<tr>
|
|
578
|
+
<td class="col-md-4">
|
|
579
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
|
|
580
|
+
|
|
581
|
+
</td>
|
|
582
|
+
</tr>
|
|
583
|
+
<tr>
|
|
584
|
+
<td class="col-md-4" colspan="2">
|
|
585
|
+
<div class="io-line">Inherited from <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
|
|
586
|
+
</div>
|
|
587
|
+
</td>
|
|
588
|
+
</tr>
|
|
589
|
+
<tr>
|
|
590
|
+
<td class="col-md-2" colspan="2">
|
|
591
|
+
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:151</a></code>
|
|
592
|
+
</div>
|
|
593
|
+
</td>
|
|
594
|
+
</tr>
|
|
595
|
+
<tr>
|
|
596
|
+
<td class="col-md-4">
|
|
597
|
+
<div class="io-description"><p>Set <code>aria-label</code> property for the button when label is empty</p>
|
|
598
|
+
</div>
|
|
599
|
+
</td>
|
|
600
|
+
</tr>
|
|
601
|
+
</tbody>
|
|
602
|
+
</table>
|
|
568
603
|
<table class="table table-sm table-bordered">
|
|
569
604
|
<tbody>
|
|
570
605
|
<tr>
|
|
@@ -592,7 +627,7 @@
|
|
|
592
627
|
</tr>
|
|
593
628
|
<tr>
|
|
594
629
|
<td class="col-md-2" colspan="2">
|
|
595
|
-
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:
|
|
630
|
+
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:146</a></code>
|
|
596
631
|
</div>
|
|
597
632
|
</td>
|
|
598
633
|
</tr>
|
|
@@ -620,7 +655,7 @@
|
|
|
620
655
|
</tr>
|
|
621
656
|
<tr>
|
|
622
657
|
<td class="col-md-2" colspan="2">
|
|
623
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
658
|
+
<div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/toggle/toggle.component.ts:138</a></div>
|
|
624
659
|
</td>
|
|
625
660
|
</tr>
|
|
626
661
|
<tr>
|
|
@@ -647,7 +682,7 @@
|
|
|
647
682
|
</tr>
|
|
648
683
|
<tr>
|
|
649
684
|
<td class="col-md-2" colspan="2">
|
|
650
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
685
|
+
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/toggle/toggle.component.ts:116</a></div>
|
|
651
686
|
</td>
|
|
652
687
|
</tr>
|
|
653
688
|
<tr>
|
|
@@ -674,7 +709,7 @@
|
|
|
674
709
|
</tr>
|
|
675
710
|
<tr>
|
|
676
711
|
<td class="col-md-2" colspan="2">
|
|
677
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
712
|
+
<div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/toggle/toggle.component.ts:128</a></div>
|
|
678
713
|
</td>
|
|
679
714
|
</tr>
|
|
680
715
|
<tr>
|
|
@@ -706,7 +741,7 @@
|
|
|
706
741
|
</tr>
|
|
707
742
|
<tr>
|
|
708
743
|
<td class="col-md-2" colspan="2">
|
|
709
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
744
|
+
<div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/toggle/toggle.component.ts:142</a></div>
|
|
710
745
|
</td>
|
|
711
746
|
</tr>
|
|
712
747
|
<tr>
|
|
@@ -744,35 +779,7 @@
|
|
|
744
779
|
</tr>
|
|
745
780
|
<tr>
|
|
746
781
|
<td class="col-md-2" colspan="2">
|
|
747
|
-
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:
|
|
748
|
-
</div>
|
|
749
|
-
</td>
|
|
750
|
-
</tr>
|
|
751
|
-
</tbody>
|
|
752
|
-
</table>
|
|
753
|
-
<table class="table table-sm table-bordered">
|
|
754
|
-
<tbody>
|
|
755
|
-
<tr>
|
|
756
|
-
<td class="col-md-4">
|
|
757
|
-
<a name="ariaLabel"></a>
|
|
758
|
-
<b>ariaLabel</b>
|
|
759
|
-
</td>
|
|
760
|
-
</tr>
|
|
761
|
-
<tr>
|
|
762
|
-
<td class="col-md-4">
|
|
763
|
-
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
|
|
764
|
-
|
|
765
|
-
</td>
|
|
766
|
-
</tr>
|
|
767
|
-
<tr>
|
|
768
|
-
<td class="col-md-4" colspan="2">
|
|
769
|
-
<div class="io-line">Inherited from <code><a href="../components/Checkbox.html" target="_self" >Checkbox</a></code>
|
|
770
|
-
</div>
|
|
771
|
-
</td>
|
|
772
|
-
</tr>
|
|
773
|
-
<tr>
|
|
774
|
-
<td class="col-md-2" colspan="2">
|
|
775
|
-
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:108</a></code>
|
|
782
|
+
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:153</a></code>
|
|
776
783
|
</div>
|
|
777
784
|
</td>
|
|
778
785
|
</tr>
|
|
@@ -1184,7 +1191,7 @@ on an indeterminate checkbox.</p>
|
|
|
1184
1191
|
</tr>
|
|
1185
1192
|
<tr>
|
|
1186
1193
|
<td class="col-md-4">
|
|
1187
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1194
|
+
<div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/toggle/toggle.component.ts:160</a></div>
|
|
1188
1195
|
</td>
|
|
1189
1196
|
</tr>
|
|
1190
1197
|
|
|
@@ -1215,7 +1222,7 @@ on an indeterminate checkbox.</p>
|
|
|
1215
1222
|
</tr>
|
|
1216
1223
|
<tr>
|
|
1217
1224
|
<td class="col-md-4">
|
|
1218
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1225
|
+
<div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/toggle/toggle.component.ts:155</a></div>
|
|
1219
1226
|
</td>
|
|
1220
1227
|
</tr>
|
|
1221
1228
|
|
|
@@ -1241,7 +1248,7 @@ on an indeterminate checkbox.</p>
|
|
|
1241
1248
|
</tr>
|
|
1242
1249
|
<tr>
|
|
1243
1250
|
<td class="col-md-4">
|
|
1244
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1251
|
+
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/toggle/toggle.component.ts:156</a></div>
|
|
1245
1252
|
</td>
|
|
1246
1253
|
</tr>
|
|
1247
1254
|
|
|
@@ -1317,7 +1324,7 @@ on an indeterminate checkbox.</p>
|
|
|
1317
1324
|
</tr>
|
|
1318
1325
|
<tr>
|
|
1319
1326
|
<td class="col-md-4">
|
|
1320
|
-
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:
|
|
1327
|
+
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:208</a></code>
|
|
1321
1328
|
</div>
|
|
1322
1329
|
</td>
|
|
1323
1330
|
</tr>
|
|
@@ -1356,8 +1363,8 @@ on an indeterminate checkbox.</p>
|
|
|
1356
1363
|
|
|
1357
1364
|
<tr>
|
|
1358
1365
|
<td class="col-md-4">
|
|
1359
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1360
|
-
class="link-to-prism">src/toggle/toggle.component.ts:
|
|
1366
|
+
<div class="io-line">Defined in <a href="" data-line="198"
|
|
1367
|
+
class="link-to-prism">src/toggle/toggle.component.ts:198</a></div>
|
|
1361
1368
|
</td>
|
|
1362
1369
|
</tr>
|
|
1363
1370
|
|
|
@@ -1393,8 +1400,8 @@ on an indeterminate checkbox.</p>
|
|
|
1393
1400
|
|
|
1394
1401
|
<tr>
|
|
1395
1402
|
<td class="col-md-4">
|
|
1396
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1397
|
-
class="link-to-prism">src/toggle/toggle.component.ts:
|
|
1403
|
+
<div class="io-line">Defined in <a href="" data-line="190"
|
|
1404
|
+
class="link-to-prism">src/toggle/toggle.component.ts:190</a></div>
|
|
1398
1405
|
</td>
|
|
1399
1406
|
</tr>
|
|
1400
1407
|
|
|
@@ -1430,8 +1437,8 @@ on an indeterminate checkbox.</p>
|
|
|
1430
1437
|
|
|
1431
1438
|
<tr>
|
|
1432
1439
|
<td class="col-md-4">
|
|
1433
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1434
|
-
class="link-to-prism">src/toggle/toggle.component.ts:
|
|
1440
|
+
<div class="io-line">Defined in <a href="" data-line="194"
|
|
1441
|
+
class="link-to-prism">src/toggle/toggle.component.ts:194</a></div>
|
|
1435
1442
|
</td>
|
|
1436
1443
|
</tr>
|
|
1437
1444
|
|
|
@@ -1469,8 +1476,8 @@ on an indeterminate checkbox.</p>
|
|
|
1469
1476
|
|
|
1470
1477
|
<tr>
|
|
1471
1478
|
<td class="col-md-4">
|
|
1472
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1473
|
-
class="link-to-prism">src/toggle/toggle.component.ts:
|
|
1479
|
+
<div class="io-line">Defined in <a href="" data-line="213"
|
|
1480
|
+
class="link-to-prism">src/toggle/toggle.component.ts:213</a></div>
|
|
1474
1481
|
</td>
|
|
1475
1482
|
</tr>
|
|
1476
1483
|
|
|
@@ -1538,7 +1545,7 @@ on an indeterminate checkbox.</p>
|
|
|
1538
1545
|
</tr>
|
|
1539
1546
|
<tr>
|
|
1540
1547
|
<td class="col-md-4">
|
|
1541
|
-
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:
|
|
1548
|
+
<div class="io-line">Defined in <code><a href="../components/Checkbox.html#source" target="_self" >Checkbox:186</a></code>
|
|
1542
1549
|
</div>
|
|
1543
1550
|
</td>
|
|
1544
1551
|
</tr>
|
|
@@ -2318,7 +2325,7 @@ on an indeterminate checkbox.</p>
|
|
|
2318
2325
|
</tr>
|
|
2319
2326
|
<tr>
|
|
2320
2327
|
<td class="col-md-4">
|
|
2321
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2328
|
+
<div class="io-line">Defined in <a href="" data-line="169" class="link-to-prism">src/toggle/toggle.component.ts:169</a></div>
|
|
2322
2329
|
</td>
|
|
2323
2330
|
</tr>
|
|
2324
2331
|
|
|
@@ -2344,7 +2351,7 @@ on an indeterminate checkbox.</p>
|
|
|
2344
2351
|
</tr>
|
|
2345
2352
|
<tr>
|
|
2346
2353
|
<td class="col-md-4">
|
|
2347
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2354
|
+
<div class="io-line">Defined in <a href="" data-line="170" class="link-to-prism">src/toggle/toggle.component.ts:170</a></div>
|
|
2348
2355
|
</td>
|
|
2349
2356
|
</tr>
|
|
2350
2357
|
|
|
@@ -2369,7 +2376,7 @@ on an indeterminate checkbox.</p>
|
|
|
2369
2376
|
</tr>
|
|
2370
2377
|
<tr>
|
|
2371
2378
|
<td class="col-md-4">
|
|
2372
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2379
|
+
<div class="io-line">Defined in <a href="" data-line="167" class="link-to-prism">src/toggle/toggle.component.ts:167</a></div>
|
|
2373
2380
|
</td>
|
|
2374
2381
|
</tr>
|
|
2375
2382
|
|
|
@@ -2410,7 +2417,7 @@ on an indeterminate checkbox.</p>
|
|
|
2410
2417
|
</tr>
|
|
2411
2418
|
<tr>
|
|
2412
2419
|
<td class="col-md-4">
|
|
2413
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2420
|
+
<div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/toggle/toggle.component.ts:155</a></div>
|
|
2414
2421
|
</td>
|
|
2415
2422
|
</tr>
|
|
2416
2423
|
|
|
@@ -2442,7 +2449,7 @@ on an indeterminate checkbox.</p>
|
|
|
2442
2449
|
</tr>
|
|
2443
2450
|
<tr>
|
|
2444
2451
|
<td class="col-md-4">
|
|
2445
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2452
|
+
<div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/toggle/toggle.component.ts:110</a></div>
|
|
2446
2453
|
</td>
|
|
2447
2454
|
</tr>
|
|
2448
2455
|
|
|
@@ -2767,7 +2774,7 @@ on an indeterminate checkbox.</p>
|
|
|
2767
2774
|
</tr>
|
|
2768
2775
|
<tr>
|
|
2769
2776
|
<td class="col-md-4">
|
|
2770
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2777
|
+
<div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/toggle/toggle.component.ts:120</a></div>
|
|
2771
2778
|
</td>
|
|
2772
2779
|
</tr>
|
|
2773
2780
|
|
|
@@ -2778,7 +2785,7 @@ on an indeterminate checkbox.</p>
|
|
|
2778
2785
|
</tr>
|
|
2779
2786
|
<tr>
|
|
2780
2787
|
<td class="col-md-4">
|
|
2781
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2788
|
+
<div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/toggle/toggle.component.ts:116</a></div>
|
|
2782
2789
|
</td>
|
|
2783
2790
|
</tr>
|
|
2784
2791
|
<tr>
|
|
@@ -2838,7 +2845,7 @@ on an indeterminate checkbox.</p>
|
|
|
2838
2845
|
</tr>
|
|
2839
2846
|
<tr>
|
|
2840
2847
|
<td class="col-md-4">
|
|
2841
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2848
|
+
<div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/toggle/toggle.component.ts:132</a></div>
|
|
2842
2849
|
</td>
|
|
2843
2850
|
</tr>
|
|
2844
2851
|
|
|
@@ -2849,7 +2856,7 @@ on an indeterminate checkbox.</p>
|
|
|
2849
2856
|
</tr>
|
|
2850
2857
|
<tr>
|
|
2851
2858
|
<td class="col-md-4">
|
|
2852
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2859
|
+
<div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/toggle/toggle.component.ts:128</a></div>
|
|
2853
2860
|
</td>
|
|
2854
2861
|
</tr>
|
|
2855
2862
|
<tr>
|
|
@@ -2909,7 +2916,7 @@ on an indeterminate checkbox.</p>
|
|
|
2909
2916
|
</tr>
|
|
2910
2917
|
<tr>
|
|
2911
2918
|
<td class="col-md-4">
|
|
2912
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2919
|
+
<div class="io-line">Defined in <a href="" data-line="156" class="link-to-prism">src/toggle/toggle.component.ts:156</a></div>
|
|
2913
2920
|
</td>
|
|
2914
2921
|
</tr>
|
|
2915
2922
|
|
|
@@ -2931,7 +2938,7 @@ on an indeterminate checkbox.</p>
|
|
|
2931
2938
|
</tr>
|
|
2932
2939
|
<tr>
|
|
2933
2940
|
<td class="col-md-4">
|
|
2934
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
2941
|
+
<div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/toggle/toggle.component.ts:160</a></div>
|
|
2935
2942
|
</td>
|
|
2936
2943
|
</tr>
|
|
2937
2944
|
|
|
@@ -2956,6 +2963,7 @@ import { I18n } from "carbon-components-angular/i18n";
|
|
|
2956
2963
|
import { Observable } from "rxjs";
|
|
2957
2964
|
|
|
2958
2965
|
/**
|
|
2966
|
+
* @deprecated since v5 - Use boolean
|
|
2959
2967
|
* Defines the set of states for a toggle component.
|
|
2960
2968
|
*/
|
|
2961
2969
|
export enum ToggleState {
|
|
@@ -2994,7 +3002,8 @@ export enum ToggleState {
|
|
|
2994
3002
|
role="switch"
|
|
2995
3003
|
type="button"
|
|
2996
3004
|
[attr.aria-checked]="checked"
|
|
2997
|
-
(click)="onClick($event)"
|
|
3005
|
+
(click)="onClick($event)"
|
|
3006
|
+
[attr.aria-label]="ariaLabel">
|
|
2998
3007
|
</button>
|
|
2999
3008
|
<label
|
|
3000
3009
|
class="cds--toggle__label"
|
|
@@ -3087,6 +3096,11 @@ export class Toggle extends Checkbox {
|
|
|
3087
3096
|
*/
|
|
3088
3097
|
@Input() hideLabel = false;
|
|
3089
3098
|
|
|
3099
|
+
/**
|
|
3100
|
+
* Set `aria-label` property for the button when label is empty
|
|
3101
|
+
*/
|
|
3102
|
+
@Input() ariaLabel: string;
|
|
3103
|
+
|
|
3090
3104
|
@HostBinding("class.cds--toggle--skeleton") @Input() skeleton = false;
|
|
3091
3105
|
|
|
3092
3106
|
@HostBinding("class.cds--toggle") toggleClass = true;
|
|
@@ -3181,7 +3195,7 @@ export class Toggle extends Checkbox {
|
|
|
3181
3195
|
<script src="../js/libs/htmlparser.js"></script>
|
|
3182
3196
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
3183
3197
|
<script>
|
|
3184
|
-
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>'
|
|
3198
|
+
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)" [attr.aria-label]="ariaLabel"> </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>'
|
|
3185
3199
|
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'}];
|
|
3186
3200
|
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': 'ClickableTileIconDirective', 'selector': '[cdsClickableTileIcon], [ibmClickableTileIcon]'},{'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': 'LinkIconDirective', 'selector': '[ibmLinkIcon], [cdsLinkIcon]'},{'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]'}];
|
|
3187
3201
|
var ACTUAL_COMPONENT = {'name': 'Toggle'};
|
|
@@ -1378,16 +1378,16 @@
|
|
|
1378
1378
|
<span class="coverage-count">(1/3)</span>
|
|
1379
1379
|
</td>
|
|
1380
1380
|
</tr>
|
|
1381
|
-
<tr class="
|
|
1381
|
+
<tr class="medium">
|
|
1382
1382
|
<td>
|
|
1383
1383
|
<!-- miscellaneous -->
|
|
1384
1384
|
<a href="./directives/List.html">src/list/list.directive.ts</a>
|
|
1385
1385
|
</td>
|
|
1386
1386
|
<td>directive</td>
|
|
1387
1387
|
<td>List</td>
|
|
1388
|
-
<td align="right" data-sort="
|
|
1389
|
-
<span class="coverage-percent">
|
|
1390
|
-
<span class="coverage-count">(
|
|
1388
|
+
<td align="right" data-sort="33">
|
|
1389
|
+
<span class="coverage-percent">33 %</span>
|
|
1390
|
+
<span class="coverage-count">(2/6)</span>
|
|
1391
1391
|
</td>
|
|
1392
1392
|
</tr>
|
|
1393
1393
|
<tr class="very-good">
|
|
@@ -2861,9 +2861,9 @@
|
|
|
2861
2861
|
</td>
|
|
2862
2862
|
<td>component</td>
|
|
2863
2863
|
<td>Toggle</td>
|
|
2864
|
-
<td align="right" data-sort="
|
|
2865
|
-
<span class="coverage-percent">
|
|
2866
|
-
<span class="coverage-count">(
|
|
2864
|
+
<td align="right" data-sort="73">
|
|
2865
|
+
<span class="coverage-percent">73 %</span>
|
|
2866
|
+
<span class="coverage-count">(38/52)</span>
|
|
2867
2867
|
</td>
|
|
2868
2868
|
</tr>
|
|
2869
2869
|
<tr class="low">
|
|
@@ -156,6 +156,20 @@
|
|
|
156
156
|
<tbody>
|
|
157
157
|
|
|
158
158
|
|
|
159
|
+
<tr>
|
|
160
|
+
<td class="col-md-4">
|
|
161
|
+
<h6><b>Inputs</b></h6>
|
|
162
|
+
</td>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td class="col-md-4">
|
|
166
|
+
<ul class="index-list">
|
|
167
|
+
<li>
|
|
168
|
+
<a href="#isExpressive" >isExpressive</a>
|
|
169
|
+
</li>
|
|
170
|
+
</ul>
|
|
171
|
+
</td>
|
|
172
|
+
</tr>
|
|
159
173
|
|
|
160
174
|
|
|
161
175
|
<tr>
|
|
@@ -215,7 +229,7 @@
|
|
|
215
229
|
</tr>
|
|
216
230
|
<tr>
|
|
217
231
|
<td class="col-md-4">
|
|
218
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
232
|
+
<div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/list/list.directive.ts:44</a></div>
|
|
219
233
|
</td>
|
|
220
234
|
</tr>
|
|
221
235
|
|
|
@@ -253,7 +267,41 @@
|
|
|
253
267
|
</table>
|
|
254
268
|
</section>
|
|
255
269
|
|
|
270
|
+
<section data-compodoc="block-inputs">
|
|
271
|
+
<h3 id="inputs">Inputs</h3>
|
|
272
|
+
<table class="table table-sm table-bordered">
|
|
273
|
+
<tbody>
|
|
274
|
+
<tr>
|
|
275
|
+
<td class="col-md-4">
|
|
276
|
+
<a name="isExpressive"></a>
|
|
277
|
+
<b>isExpressive</b>
|
|
278
|
+
</td>
|
|
279
|
+
</tr>
|
|
280
|
+
<tr>
|
|
281
|
+
<td class="col-md-4">
|
|
282
|
+
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
|
|
256
283
|
|
|
284
|
+
</td>
|
|
285
|
+
</tr>
|
|
286
|
+
<tr>
|
|
287
|
+
<td class="col-md-4">
|
|
288
|
+
<i>Default value : </i><code>false</code>
|
|
289
|
+
</td>
|
|
290
|
+
</tr>
|
|
291
|
+
<tr>
|
|
292
|
+
<td class="col-md-2" colspan="2">
|
|
293
|
+
<div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/list/list.directive.ts:44</a></div>
|
|
294
|
+
</td>
|
|
295
|
+
</tr>
|
|
296
|
+
<tr>
|
|
297
|
+
<td class="col-md-4">
|
|
298
|
+
<div class="io-description"><p>Set to <code>true</code> to make list expressive</p>
|
|
299
|
+
</div>
|
|
300
|
+
</td>
|
|
301
|
+
</tr>
|
|
302
|
+
</tbody>
|
|
303
|
+
</table>
|
|
304
|
+
</section>
|
|
257
305
|
|
|
258
306
|
<section data-compodoc="block-properties">
|
|
259
307
|
<h3>HostBindings</h3> <table class="table table-sm table-bordered">
|
|
@@ -275,7 +323,7 @@
|
|
|
275
323
|
</tr>
|
|
276
324
|
<tr>
|
|
277
325
|
<td class="col-md-4">
|
|
278
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
326
|
+
<div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/list/list.directive.ts:37</a></div>
|
|
279
327
|
</td>
|
|
280
328
|
</tr>
|
|
281
329
|
|
|
@@ -301,7 +349,7 @@
|
|
|
301
349
|
</tr>
|
|
302
350
|
<tr>
|
|
303
351
|
<td class="col-md-4">
|
|
304
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
352
|
+
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/list/list.directive.ts:27</a></div>
|
|
305
353
|
</td>
|
|
306
354
|
</tr>
|
|
307
355
|
|
|
@@ -327,7 +375,7 @@
|
|
|
327
375
|
</tr>
|
|
328
376
|
<tr>
|
|
329
377
|
<td class="col-md-4">
|
|
330
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
378
|
+
<div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/list/list.directive.ts:32</a></div>
|
|
331
379
|
</td>
|
|
332
380
|
</tr>
|
|
333
381
|
|
|
@@ -359,7 +407,7 @@
|
|
|
359
407
|
</tr>
|
|
360
408
|
<tr>
|
|
361
409
|
<td class="col-md-4">
|
|
362
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
410
|
+
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/list/list.directive.ts:27</a></div>
|
|
363
411
|
</td>
|
|
364
412
|
</tr>
|
|
365
413
|
|
|
@@ -381,7 +429,7 @@
|
|
|
381
429
|
</tr>
|
|
382
430
|
<tr>
|
|
383
431
|
<td class="col-md-4">
|
|
384
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
432
|
+
<div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/list/list.directive.ts:32</a></div>
|
|
385
433
|
</td>
|
|
386
434
|
</tr>
|
|
387
435
|
|
|
@@ -403,7 +451,7 @@
|
|
|
403
451
|
</tr>
|
|
404
452
|
<tr>
|
|
405
453
|
<td class="col-md-4">
|
|
406
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
454
|
+
<div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/list/list.directive.ts:37</a></div>
|
|
407
455
|
</td>
|
|
408
456
|
</tr>
|
|
409
457
|
|
|
@@ -415,7 +463,12 @@
|
|
|
415
463
|
|
|
416
464
|
|
|
417
465
|
<div class="tab-pane fade tab-source-code" id="source">
|
|
418
|
-
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
|
|
466
|
+
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
|
|
467
|
+
Directive,
|
|
468
|
+
ElementRef,
|
|
469
|
+
HostBinding,
|
|
470
|
+
Input
|
|
471
|
+
} from "@angular/core";
|
|
419
472
|
|
|
420
473
|
/**
|
|
421
474
|
* Applies either ordered or unordered styling to the list container it is applied to.
|
|
@@ -450,6 +503,11 @@ export class List {
|
|
|
450
503
|
return !!(this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement.tagName === "LI");
|
|
451
504
|
}
|
|
452
505
|
|
|
506
|
+
/**
|
|
507
|
+
* Set to `true` to make list expressive
|
|
508
|
+
*/
|
|
509
|
+
@Input() @HostBinding("class.cds--list--expressive") isExpressive = false;
|
|
510
|
+
|
|
453
511
|
constructor(protected elementRef: ElementRef) {}
|
|
454
512
|
}
|
|
455
513
|
</code></pre>
|