carbon-components-angular 5.58.0 → 5.58.2
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/ActionableNotification.html +80 -41
- package/docs/documentation/components/DropdownList.html +84 -82
- package/docs/documentation/components/Notification.html +76 -37
- package/docs/documentation/coverage.html +6 -6
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ComboBoxModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +37 -41
- package/docs/documentation/modules/DatePickerInputModule.html +37 -41
- package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
- package/docs/documentation/modules/DialogModule.html +34 -34
- package/docs/documentation/modules/FileUploaderModule/dependencies.svg +36 -36
- package/docs/documentation/modules/FileUploaderModule.html +36 -36
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +48 -48
- package/docs/documentation/modules/RadioModule.html +48 -48
- package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
- package/docs/documentation/modules/SelectModule.html +43 -43
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
- package/docs/documentation/modules/TabsModule.html +69 -69
- package/docs/documentation/modules/TagModule/dependencies.svg +39 -39
- package/docs/documentation/modules/TagModule.html +39 -39
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +107 -107
- package/docs/documentation/modules/TilesModule.html +107 -107
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +45 -41
- package/docs/documentation/modules/TimePickerModule.html +45 -41
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +38 -42
- package/docs/documentation/modules/TimePickerSelectModule.html +38 -42
- package/docs/documentation/modules/ToggleModule/dependencies.svg +34 -38
- package/docs/documentation/modules/ToggleModule.html +34 -38
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +38 -38
- package/docs/documentation/modules/ToggletipModule.html +38 -38
- package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
- package/docs/documentation/modules/TooltipModule.html +29 -29
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +31 -31
- package/docs/documentation/modules/TreeviewModule.html +31 -31
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +134 -114
- package/docs/storybook/{3224.5a4b3111.iframe.bundle.js → 3224.ee9adbba.iframe.bundle.js} +1 -1
- package/docs/storybook/901.9e4e376b.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.d00e3563.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.89fec306.iframe.bundle.js → runtime~main.c31464c5.iframe.bundle.js} +1 -1
- package/esm2020/dropdown/list/dropdown-list.component.mjs +5 -3
- package/esm2020/notification/actionable-notification.component.mjs +18 -7
- package/esm2020/notification/notification.component.mjs +17 -6
- package/fesm2015/carbon-components-angular-dropdown.mjs +4 -2
- package/fesm2015/carbon-components-angular-dropdown.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-notification.mjs +33 -11
- package/fesm2015/carbon-components-angular-notification.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-dropdown.mjs +4 -2
- package/fesm2020/carbon-components-angular-dropdown.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-notification.mjs +33 -11
- package/fesm2020/carbon-components-angular-notification.mjs.map +1 -1
- package/notification/actionable-notification.component.d.ts +1 -0
- package/notification/notification.component.d.ts +1 -0
- package/package.json +1 -1
- package/docs/storybook/901.32dc2d61.iframe.bundle.js +0 -1
- package/docs/storybook/main.622b2392.iframe.bundle.js +0 -1
|
@@ -190,7 +190,12 @@
|
|
|
190
190
|
</svg>
|
|
191
191
|
<div class="cds--actionable-notification__text-wrapper">
|
|
192
192
|
<div class="cds--actionable-notification__content">
|
|
193
|
-
<div
|
|
193
|
+
<div
|
|
194
|
+
cdsActionableTitle
|
|
195
|
+
*ngIf="!notificationObj.template"
|
|
196
|
+
[id]="notificationID"
|
|
197
|
+
[innerHTML]="notificationObj.title">
|
|
198
|
+
</div>
|
|
194
199
|
<div *ngIf="!notificationObj.template" cdsActionableSubtitle>
|
|
195
200
|
<span [innerHTML]="notificationObj.message"></span>
|
|
196
201
|
<ng-container *ngFor="let link of notificationObj.links">
|
|
@@ -260,9 +265,12 @@
|
|
|
260
265
|
<a href="#notificationCount" >notificationCount</a>
|
|
261
266
|
</li>
|
|
262
267
|
<li>
|
|
263
|
-
<span class="modifier"></span>
|
|
264
268
|
<a href="#notificationID" >notificationID</a>
|
|
265
269
|
</li>
|
|
270
|
+
<li>
|
|
271
|
+
<span class="modifier"></span>
|
|
272
|
+
<a href="#notificationLabel" >notificationLabel</a>
|
|
273
|
+
</li>
|
|
266
274
|
<li>
|
|
267
275
|
<span class="modifier">Protected</span>
|
|
268
276
|
<a href="#_notificationObj" >_notificationObj</a>
|
|
@@ -338,7 +346,7 @@
|
|
|
338
346
|
<td class="col-md-4">
|
|
339
347
|
<ul class="index-list">
|
|
340
348
|
<li>
|
|
341
|
-
<a href="#attr.
|
|
349
|
+
<a href="#attr.aria-labelledBy" >attr.aria-labelledBy</a>
|
|
342
350
|
</li>
|
|
343
351
|
<li>
|
|
344
352
|
<a href="#class.cds--actionable-notification" >class.cds--actionable-notification</a>
|
|
@@ -434,7 +442,7 @@
|
|
|
434
442
|
</tr>
|
|
435
443
|
<tr>
|
|
436
444
|
<td class="col-md-4">
|
|
437
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
445
|
+
<div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/notification/actionable-notification.component.ts:110</a></div>
|
|
438
446
|
</td>
|
|
439
447
|
</tr>
|
|
440
448
|
|
|
@@ -502,7 +510,7 @@
|
|
|
502
510
|
</tr>
|
|
503
511
|
<tr>
|
|
504
512
|
<td class="col-md-2" colspan="2">
|
|
505
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
513
|
+
<div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/notification/actionable-notification.component.ts:80</a></div>
|
|
506
514
|
</td>
|
|
507
515
|
</tr>
|
|
508
516
|
<tr>
|
|
@@ -558,10 +566,10 @@
|
|
|
558
566
|
<tbody>
|
|
559
567
|
<tr>
|
|
560
568
|
<td class="col-md-4">
|
|
561
|
-
<a name="attr.
|
|
569
|
+
<a name="attr.aria-labelledBy"></a>
|
|
562
570
|
<span class="name">
|
|
563
|
-
<span ><b>attr.
|
|
564
|
-
<a href="#attr.
|
|
571
|
+
<span ><b>attr.aria-labelledBy</b></span>
|
|
572
|
+
<a href="#attr.aria-labelledBy"><span class="icon ion-ios-link"></span></a>
|
|
565
573
|
</span>
|
|
566
574
|
</td>
|
|
567
575
|
</tr>
|
|
@@ -573,12 +581,12 @@
|
|
|
573
581
|
</tr>
|
|
574
582
|
<tr>
|
|
575
583
|
<td class="col-md-4">
|
|
576
|
-
<i>Default value : </i><code
|
|
584
|
+
<i>Default value : </i><code>this.notificationID</code>
|
|
577
585
|
</td>
|
|
578
586
|
</tr>
|
|
579
587
|
<tr>
|
|
580
588
|
<td class="col-md-4">
|
|
581
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
589
|
+
<div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/notification/actionable-notification.component.ts:91</a></div>
|
|
582
590
|
</td>
|
|
583
591
|
</tr>
|
|
584
592
|
|
|
@@ -609,7 +617,7 @@
|
|
|
609
617
|
</tr>
|
|
610
618
|
<tr>
|
|
611
619
|
<td class="col-md-4">
|
|
612
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
620
|
+
<div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/notification/actionable-notification.component.ts:92</a></div>
|
|
613
621
|
</td>
|
|
614
622
|
</tr>
|
|
615
623
|
|
|
@@ -635,7 +643,7 @@
|
|
|
635
643
|
</tr>
|
|
636
644
|
<tr>
|
|
637
645
|
<td class="col-md-4">
|
|
638
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
646
|
+
<div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/notification/actionable-notification.component.ts:94</a></div>
|
|
639
647
|
</td>
|
|
640
648
|
</tr>
|
|
641
649
|
|
|
@@ -661,7 +669,7 @@
|
|
|
661
669
|
</tr>
|
|
662
670
|
<tr>
|
|
663
671
|
<td class="col-md-4">
|
|
664
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
672
|
+
<div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/notification/actionable-notification.component.ts:101</a></div>
|
|
665
673
|
</td>
|
|
666
674
|
</tr>
|
|
667
675
|
|
|
@@ -687,7 +695,7 @@
|
|
|
687
695
|
</tr>
|
|
688
696
|
<tr>
|
|
689
697
|
<td class="col-md-4">
|
|
690
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
698
|
+
<div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/notification/actionable-notification.component.ts:95</a></div>
|
|
691
699
|
</td>
|
|
692
700
|
</tr>
|
|
693
701
|
|
|
@@ -713,7 +721,7 @@
|
|
|
713
721
|
</tr>
|
|
714
722
|
<tr>
|
|
715
723
|
<td class="col-md-4">
|
|
716
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
724
|
+
<div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/notification/actionable-notification.component.ts:96</a></div>
|
|
717
725
|
</td>
|
|
718
726
|
</tr>
|
|
719
727
|
|
|
@@ -739,7 +747,7 @@
|
|
|
739
747
|
</tr>
|
|
740
748
|
<tr>
|
|
741
749
|
<td class="col-md-4">
|
|
742
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
750
|
+
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/notification/actionable-notification.component.ts:100</a></div>
|
|
743
751
|
</td>
|
|
744
752
|
</tr>
|
|
745
753
|
|
|
@@ -765,7 +773,7 @@
|
|
|
765
773
|
</tr>
|
|
766
774
|
<tr>
|
|
767
775
|
<td class="col-md-4">
|
|
768
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
776
|
+
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/notification/actionable-notification.component.ts:97</a></div>
|
|
769
777
|
</td>
|
|
770
778
|
</tr>
|
|
771
779
|
|
|
@@ -791,7 +799,7 @@
|
|
|
791
799
|
</tr>
|
|
792
800
|
<tr>
|
|
793
801
|
<td class="col-md-4">
|
|
794
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
802
|
+
<div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/notification/actionable-notification.component.ts:93</a></div>
|
|
795
803
|
</td>
|
|
796
804
|
</tr>
|
|
797
805
|
|
|
@@ -817,7 +825,7 @@
|
|
|
817
825
|
</tr>
|
|
818
826
|
<tr>
|
|
819
827
|
<td class="col-md-4">
|
|
820
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
828
|
+
<div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/notification/actionable-notification.component.ts:98</a></div>
|
|
821
829
|
</td>
|
|
822
830
|
</tr>
|
|
823
831
|
|
|
@@ -843,7 +851,7 @@
|
|
|
843
851
|
</tr>
|
|
844
852
|
<tr>
|
|
845
853
|
<td class="col-md-4">
|
|
846
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
854
|
+
<div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/notification/actionable-notification.component.ts:99</a></div>
|
|
847
855
|
</td>
|
|
848
856
|
</tr>
|
|
849
857
|
|
|
@@ -1105,7 +1113,7 @@
|
|
|
1105
1113
|
</tr>
|
|
1106
1114
|
<tr>
|
|
1107
1115
|
<td class="col-md-4">
|
|
1108
|
-
<div class="io-line">Defined in <code><a href="../components/BaseNotification.html#source" target="_self" >BaseNotification:
|
|
1116
|
+
<div class="io-line">Defined in <code><a href="../components/BaseNotification.html#source" target="_self" >BaseNotification:106</a></code>
|
|
1109
1117
|
</div>
|
|
1110
1118
|
</td>
|
|
1111
1119
|
</tr>
|
|
@@ -1147,7 +1155,7 @@
|
|
|
1147
1155
|
</tr>
|
|
1148
1156
|
<tr>
|
|
1149
1157
|
<td class="col-md-4">
|
|
1150
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1158
|
+
<div class="io-line">Defined in <a href="" data-line="92" class="link-to-prism">src/notification/actionable-notification.component.ts:92</a></div>
|
|
1151
1159
|
</td>
|
|
1152
1160
|
</tr>
|
|
1153
1161
|
|
|
@@ -1180,7 +1188,7 @@
|
|
|
1180
1188
|
</tr>
|
|
1181
1189
|
<tr>
|
|
1182
1190
|
<td class="col-md-4">
|
|
1183
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1191
|
+
<div class="io-line">Defined in <a href="" data-line="72" class="link-to-prism">src/notification/actionable-notification.component.ts:72</a></div>
|
|
1184
1192
|
</td>
|
|
1185
1193
|
</tr>
|
|
1186
1194
|
|
|
@@ -1193,7 +1201,6 @@
|
|
|
1193
1201
|
<td class="col-md-4">
|
|
1194
1202
|
<a name="notificationID"></a>
|
|
1195
1203
|
<span class="name">
|
|
1196
|
-
<span class="modifier"></span>
|
|
1197
1204
|
<span ><b>notificationID</b></span>
|
|
1198
1205
|
<a href="#notificationID"><span class="icon ion-ios-link"></span></a>
|
|
1199
1206
|
</span>
|
|
@@ -1201,7 +1208,33 @@
|
|
|
1201
1208
|
</tr>
|
|
1202
1209
|
<tr>
|
|
1203
1210
|
<td class="col-md-4">
|
|
1204
|
-
<i>Default value : </i><code>`notification-${ActionableNotification.notificationCount++}`</code>
|
|
1211
|
+
<i>Default value : </i><code>`actionable-notification-${ActionableNotification.notificationCount++}`</code>
|
|
1212
|
+
</td>
|
|
1213
|
+
</tr>
|
|
1214
|
+
<tr>
|
|
1215
|
+
<td class="col-md-4">
|
|
1216
|
+
<div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/notification/actionable-notification.component.ts:90</a></div>
|
|
1217
|
+
</td>
|
|
1218
|
+
</tr>
|
|
1219
|
+
|
|
1220
|
+
|
|
1221
|
+
</tbody>
|
|
1222
|
+
</table>
|
|
1223
|
+
<table class="table table-sm table-bordered">
|
|
1224
|
+
<tbody>
|
|
1225
|
+
<tr>
|
|
1226
|
+
<td class="col-md-4">
|
|
1227
|
+
<a name="notificationLabel"></a>
|
|
1228
|
+
<span class="name">
|
|
1229
|
+
<span class="modifier"></span>
|
|
1230
|
+
<span ><b>notificationLabel</b></span>
|
|
1231
|
+
<a href="#notificationLabel"><span class="icon ion-ios-link"></span></a>
|
|
1232
|
+
</span>
|
|
1233
|
+
</td>
|
|
1234
|
+
</tr>
|
|
1235
|
+
<tr>
|
|
1236
|
+
<td class="col-md-4">
|
|
1237
|
+
<i>Default value : </i><code>this.notificationID</code>
|
|
1205
1238
|
</td>
|
|
1206
1239
|
</tr>
|
|
1207
1240
|
<tr>
|
|
@@ -1209,13 +1242,13 @@
|
|
|
1209
1242
|
<b>Decorators : </b>
|
|
1210
1243
|
<br />
|
|
1211
1244
|
<code>
|
|
1212
|
-
@HostBinding('attr.
|
|
1245
|
+
@HostBinding('attr.aria-labelledBy')<br />
|
|
1213
1246
|
</code>
|
|
1214
1247
|
</td>
|
|
1215
1248
|
</tr>
|
|
1216
1249
|
<tr>
|
|
1217
1250
|
<td class="col-md-4">
|
|
1218
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1251
|
+
<div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/notification/actionable-notification.component.ts:91</a></div>
|
|
1219
1252
|
</td>
|
|
1220
1253
|
</tr>
|
|
1221
1254
|
|
|
@@ -1362,7 +1395,7 @@
|
|
|
1362
1395
|
</tr>
|
|
1363
1396
|
<tr>
|
|
1364
1397
|
<td class="col-md-4">
|
|
1365
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1398
|
+
<div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/notification/actionable-notification.component.ts:80</a></div>
|
|
1366
1399
|
</td>
|
|
1367
1400
|
</tr>
|
|
1368
1401
|
<tr>
|
|
@@ -1386,7 +1419,7 @@
|
|
|
1386
1419
|
</tr>
|
|
1387
1420
|
<tr>
|
|
1388
1421
|
<td class="col-md-4">
|
|
1389
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1422
|
+
<div class="io-line">Defined in <a href="" data-line="83" class="link-to-prism">src/notification/actionable-notification.component.ts:83</a></div>
|
|
1390
1423
|
</td>
|
|
1391
1424
|
</tr>
|
|
1392
1425
|
<tr>
|
|
@@ -1444,7 +1477,7 @@
|
|
|
1444
1477
|
</tr>
|
|
1445
1478
|
<tr>
|
|
1446
1479
|
<td class="col-md-4">
|
|
1447
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1480
|
+
<div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/notification/actionable-notification.component.ts:93</a></div>
|
|
1448
1481
|
</td>
|
|
1449
1482
|
</tr>
|
|
1450
1483
|
|
|
@@ -1466,7 +1499,7 @@
|
|
|
1466
1499
|
</tr>
|
|
1467
1500
|
<tr>
|
|
1468
1501
|
<td class="col-md-4">
|
|
1469
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1502
|
+
<div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/notification/actionable-notification.component.ts:94</a></div>
|
|
1470
1503
|
</td>
|
|
1471
1504
|
</tr>
|
|
1472
1505
|
|
|
@@ -1488,7 +1521,7 @@
|
|
|
1488
1521
|
</tr>
|
|
1489
1522
|
<tr>
|
|
1490
1523
|
<td class="col-md-4">
|
|
1491
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1524
|
+
<div class="io-line">Defined in <a href="" data-line="95" class="link-to-prism">src/notification/actionable-notification.component.ts:95</a></div>
|
|
1492
1525
|
</td>
|
|
1493
1526
|
</tr>
|
|
1494
1527
|
|
|
@@ -1510,7 +1543,7 @@
|
|
|
1510
1543
|
</tr>
|
|
1511
1544
|
<tr>
|
|
1512
1545
|
<td class="col-md-4">
|
|
1513
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1546
|
+
<div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/notification/actionable-notification.component.ts:96</a></div>
|
|
1514
1547
|
</td>
|
|
1515
1548
|
</tr>
|
|
1516
1549
|
|
|
@@ -1532,7 +1565,7 @@
|
|
|
1532
1565
|
</tr>
|
|
1533
1566
|
<tr>
|
|
1534
1567
|
<td class="col-md-4">
|
|
1535
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1568
|
+
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/notification/actionable-notification.component.ts:97</a></div>
|
|
1536
1569
|
</td>
|
|
1537
1570
|
</tr>
|
|
1538
1571
|
|
|
@@ -1554,7 +1587,7 @@
|
|
|
1554
1587
|
</tr>
|
|
1555
1588
|
<tr>
|
|
1556
1589
|
<td class="col-md-4">
|
|
1557
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1590
|
+
<div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/notification/actionable-notification.component.ts:98</a></div>
|
|
1558
1591
|
</td>
|
|
1559
1592
|
</tr>
|
|
1560
1593
|
|
|
@@ -1576,7 +1609,7 @@
|
|
|
1576
1609
|
</tr>
|
|
1577
1610
|
<tr>
|
|
1578
1611
|
<td class="col-md-4">
|
|
1579
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1612
|
+
<div class="io-line">Defined in <a href="" data-line="99" class="link-to-prism">src/notification/actionable-notification.component.ts:99</a></div>
|
|
1580
1613
|
</td>
|
|
1581
1614
|
</tr>
|
|
1582
1615
|
|
|
@@ -1598,7 +1631,7 @@
|
|
|
1598
1631
|
</tr>
|
|
1599
1632
|
<tr>
|
|
1600
1633
|
<td class="col-md-4">
|
|
1601
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1634
|
+
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/notification/actionable-notification.component.ts:100</a></div>
|
|
1602
1635
|
</td>
|
|
1603
1636
|
</tr>
|
|
1604
1637
|
|
|
@@ -1620,7 +1653,7 @@
|
|
|
1620
1653
|
</tr>
|
|
1621
1654
|
<tr>
|
|
1622
1655
|
<td class="col-md-4">
|
|
1623
|
-
<div class="io-line">Defined in <a href="" data-line="
|
|
1656
|
+
<div class="io-line">Defined in <a href="" data-line="101" class="link-to-prism">src/notification/actionable-notification.component.ts:101</a></div>
|
|
1624
1657
|
</td>
|
|
1625
1658
|
</tr>
|
|
1626
1659
|
|
|
@@ -1664,7 +1697,12 @@ import { BaseNotification } from "./base-notification.component";
|
|
|
1664
1697
|
</svg>
|
|
1665
1698
|
<div class="cds--actionable-notification__text-wrapper">
|
|
1666
1699
|
<div class="cds--actionable-notification__content">
|
|
1667
|
-
<div
|
|
1700
|
+
<div
|
|
1701
|
+
cdsActionableTitle
|
|
1702
|
+
*ngIf="!notificationObj.template"
|
|
1703
|
+
[id]="notificationID"
|
|
1704
|
+
[innerHTML]="notificationObj.title">
|
|
1705
|
+
</div>
|
|
1668
1706
|
<div *ngIf="!notificationObj.template" cdsActionableSubtitle>
|
|
1669
1707
|
<span [innerHTML]="notificationObj.message"></span>
|
|
1670
1708
|
<ng-container *ngFor="let link of notificationObj.links">
|
|
@@ -1715,7 +1753,8 @@ export class ActionableNotification extends BaseNotification {
|
|
|
1715
1753
|
this._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);
|
|
1716
1754
|
}
|
|
1717
1755
|
|
|
1718
|
-
|
|
1756
|
+
notificationID = `actionable-notification-${ActionableNotification.notificationCount++}`;
|
|
1757
|
+
@HostBinding("attr.aria-labelledBy") notificationLabel = this.notificationID;
|
|
1719
1758
|
@HostBinding("class.cds--actionable-notification") notificationClass = true;
|
|
1720
1759
|
@HostBinding("class.cds--actionable-notification--toast") get toastVariant() { return this.notificationObj.variant === "toast"; }
|
|
1721
1760
|
@HostBinding("class.cds--actionable-notification--error") get isError() { return this.notificationObj.type === "error"; }
|
|
@@ -1770,7 +1809,7 @@ export class ActionableNotification extends BaseNotification {
|
|
|
1770
1809
|
<script src="../js/libs/htmlparser.js"></script>
|
|
1771
1810
|
<script src="../js/libs/deep-iterator.js"></script>
|
|
1772
1811
|
<script>
|
|
1773
|
-
var COMPONENT_TEMPLATE = '<div><div class="cds--actionable-notification__details"> <svg [cdsIcon]="iconDictionary[notificationObj.type]" size="20" *ngIf="notificationObj.type" [ngClass]="{ \'cds--inline-notification__icon\': notificationObj.variant === \'inline\', \'cds--toast-notification__icon\': notificationObj.variant === \'toast\' }" class="cds--actionable-notification__icon"> </svg> <div class="cds--actionable-notification__text-wrapper"> <div class="cds--actionable-notification__content"> <div
|
|
1812
|
+
var COMPONENT_TEMPLATE = '<div><div class="cds--actionable-notification__details"> <svg [cdsIcon]="iconDictionary[notificationObj.type]" size="20" *ngIf="notificationObj.type" [ngClass]="{ \'cds--inline-notification__icon\': notificationObj.variant === \'inline\', \'cds--toast-notification__icon\': notificationObj.variant === \'toast\' }" class="cds--actionable-notification__icon"> </svg> <div class="cds--actionable-notification__text-wrapper"> <div class="cds--actionable-notification__content"> <div cdsActionableTitle *ngIf="!notificationObj.template" [id]="notificationID" [innerHTML]="notificationObj.title"> </div> <div *ngIf="!notificationObj.template" cdsActionableSubtitle> <span [innerHTML]="notificationObj.message"></span> <ng-container *ngFor="let link of notificationObj.links"> <a cdsLink [href]="link.href">{{link.text}}</a> </ng-container> </div> <ng-container *ngTemplateOutlet="notificationObj.template; context: { $implicit: notificationObj }"></ng-container> </div> </div></div><ng-container *ngIf="!notificationObj.actionsTemplate"> <button *ngFor="let action of notificationObj.actions" (click)="onClick(action, $event)" [cdsButton]="notificationObj.variant === \'inline\' ? \'ghost\' : \'tertiary\'" size="sm" cdsActionableButton> {{action.text}} </button></ng-container><ng-container *ngTemplateOutlet="notificationObj.actionsTemplate; context: { $implicit: notificationObj }"></ng-container><button *ngIf="!isCloseHidden" (click)="onClose()" class="cds--actionable-notification__close-button" [attr.aria-label]="notificationObj.closeLabel | async" type="button"> <svg cdsIcon="close" size="16" class="cds--actionable-notification__close-icon"></svg></button> </div>'
|
|
1774
1813
|
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': 'ComboButtonComponent', 'selector': 'cds-combo-button'},{'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-menu, cds-context-menu, ibm-context-menu'},{'name': 'ContextMenuDividerComponent', 'selector': 'cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider'},{'name': 'ContextMenuGroupComponent', 'selector': 'cds-menu-group, cds-context-menu-group, ibm-context-menu-group'},{'name': 'ContextMenuItemComponent', 'selector': 'cds-menu-item, 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': 'MenuButtonComponent', 'selector': 'cds-menu-button'},{'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': 'TagOperationalComponent', 'selector': 'cds-tag-operational, ibm-tag-operational'},{'name': 'TagSelectableComponent', 'selector': 'cds-tag-selectable, ibm-tag-selectable'},{'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'}];
|
|
1775
1814
|
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': 'TagIconDirective', 'selector': '[cdsTagIcon], [ibmTagIcon]'},{'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]'}];
|
|
1776
1815
|
var ACTUAL_COMPONENT = {'name': 'ActionableNotification'};
|