carbon-components-angular 5.58.0 → 5.58.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.
Files changed (55) hide show
  1. package/docs/documentation/components/ActionableNotification.html +80 -41
  2. package/docs/documentation/components/Notification.html +76 -37
  3. package/docs/documentation/coverage.html +6 -6
  4. package/docs/documentation/js/search/search_index.js +2 -2
  5. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  6. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  7. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +37 -41
  8. package/docs/documentation/modules/DatePickerInputModule.html +37 -41
  9. package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
  10. package/docs/documentation/modules/DialogModule.html +34 -34
  11. package/docs/documentation/modules/FileUploaderModule/dependencies.svg +36 -36
  12. package/docs/documentation/modules/FileUploaderModule.html +36 -36
  13. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  14. package/docs/documentation/modules/NumberModule.html +4 -4
  15. package/docs/documentation/modules/RadioModule/dependencies.svg +48 -48
  16. package/docs/documentation/modules/RadioModule.html +48 -48
  17. package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
  18. package/docs/documentation/modules/SelectModule.html +43 -43
  19. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  20. package/docs/documentation/modules/SliderModule.html +4 -4
  21. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  22. package/docs/documentation/modules/TabsModule.html +69 -69
  23. package/docs/documentation/modules/TagModule/dependencies.svg +39 -39
  24. package/docs/documentation/modules/TagModule.html +39 -39
  25. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  26. package/docs/documentation/modules/ThemeModule.html +13 -13
  27. package/docs/documentation/modules/TilesModule/dependencies.svg +91 -91
  28. package/docs/documentation/modules/TilesModule.html +91 -91
  29. package/docs/documentation/modules/TimePickerModule/dependencies.svg +42 -38
  30. package/docs/documentation/modules/TimePickerModule.html +42 -38
  31. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +41 -45
  32. package/docs/documentation/modules/TimePickerSelectModule.html +41 -45
  33. package/docs/documentation/modules/ToggleModule/dependencies.svg +18 -18
  34. package/docs/documentation/modules/ToggleModule.html +18 -18
  35. package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
  36. package/docs/documentation/modules/ToggletipModule.html +37 -37
  37. package/docs/documentation/modules/TreeviewModule/dependencies.svg +36 -36
  38. package/docs/documentation/modules/TreeviewModule.html +36 -36
  39. package/docs/documentation.json +88 -68
  40. package/docs/storybook/901.9e4e376b.iframe.bundle.js +1 -0
  41. package/docs/storybook/iframe.html +2 -2
  42. package/docs/storybook/main.bb78eaa7.iframe.bundle.js +1 -0
  43. package/docs/storybook/project.json +1 -1
  44. package/docs/storybook/{runtime~main.89fec306.iframe.bundle.js → runtime~main.d514f8b8.iframe.bundle.js} +1 -1
  45. package/esm2020/notification/actionable-notification.component.mjs +18 -7
  46. package/esm2020/notification/notification.component.mjs +17 -6
  47. package/fesm2015/carbon-components-angular-notification.mjs +33 -11
  48. package/fesm2015/carbon-components-angular-notification.mjs.map +1 -1
  49. package/fesm2020/carbon-components-angular-notification.mjs +33 -11
  50. package/fesm2020/carbon-components-angular-notification.mjs.map +1 -1
  51. package/notification/actionable-notification.component.d.ts +1 -0
  52. package/notification/notification.component.d.ts +1 -0
  53. package/package.json +1 -1
  54. package/docs/storybook/901.32dc2d61.iframe.bundle.js +0 -1
  55. package/docs/storybook/main.622b2392.iframe.bundle.js +0 -1
@@ -19062,7 +19062,7 @@
19062
19062
  },
19063
19063
  {
19064
19064
  "name": "ActionableNotification",
19065
- "id": "component-ActionableNotification-57714382cfdef67a6be498b98366423e6cc43d51076620586300e8a374d103c10aa3214323b7015e2403c434cfd677f5e4de45bea20b25105eb746735eb45ebf",
19065
+ "id": "component-ActionableNotification-c46fe8cda2f79f9e50aaa8d1e32cc7f8b50de98e8223db63149ecea636582ad9e501dba4f1f37c2214918aa764740b293ea0408c112facbbff8c7a693705edc8",
19066
19066
  "file": "src/notification/actionable-notification.component.ts",
19067
19067
  "encapsulation": [],
19068
19068
  "entryComponents": [],
@@ -19072,7 +19072,7 @@
19072
19072
  "selector": "cds-actionable-notification, ibm-actionable-notification",
19073
19073
  "styleUrls": [],
19074
19074
  "styles": [],
19075
- "template": "<div class=\"cds--actionable-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t}\"\n\t\tclass=\"cds--actionable-notification__icon\">\n\t</svg>\n\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t<button\n\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t(click)=\"onClick(action, $event)\"\n\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\tsize=\"sm\"\n\t\tcdsActionableButton>\n\t\t{{action.text}}\n\t</button>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--actionable-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n</button>\n\t",
19075
+ "template": "<div class=\"cds--actionable-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t}\"\n\t\tclass=\"cds--actionable-notification__icon\">\n\t</svg>\n\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t<div\n\t\t\t\tcdsActionableTitle\n\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t[id]=\"notificationID\"\n\t\t\t\t[innerHTML]=\"notificationObj.title\">\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t<button\n\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t(click)=\"onClick(action, $event)\"\n\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\tsize=\"sm\"\n\t\tcdsActionableButton>\n\t\t{{action.text}}\n\t</button>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--actionable-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n</button>\n\t",
19076
19076
  "templateUrl": [],
19077
19077
  "viewProviders": [],
19078
19078
  "hostDirectives": [],
@@ -19083,7 +19083,7 @@
19083
19083
  "deprecationMessage": "",
19084
19084
  "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
19085
19085
  "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n",
19086
- "line": 75,
19086
+ "line": 80,
19087
19087
  "type": "ActionableContent",
19088
19088
  "decorators": []
19089
19089
  }
@@ -19112,7 +19112,7 @@
19112
19112
  "type": "object",
19113
19113
  "optional": false,
19114
19114
  "description": "<p>Set default variant &amp; role, alternatives can be provided through notificationObj property</p>\n",
19115
- "line": 100,
19115
+ "line": 106,
19116
19116
  "rawdescription": "\n\nSet default variant & role, alternatives can be provided through notificationObj property\n"
19117
19117
  },
19118
19118
  {
@@ -19123,7 +19123,7 @@
19123
19123
  "type": "",
19124
19124
  "optional": false,
19125
19125
  "description": "",
19126
- "line": 86,
19126
+ "line": 92,
19127
19127
  "decorators": [
19128
19128
  {
19129
19129
  "name": "HostBinding",
@@ -19136,17 +19136,27 @@
19136
19136
  },
19137
19137
  {
19138
19138
  "name": "notificationID",
19139
- "defaultValue": "`notification-${ActionableNotification.notificationCount++}`",
19139
+ "defaultValue": "`actionable-notification-${ActionableNotification.notificationCount++}`",
19140
19140
  "deprecated": false,
19141
19141
  "deprecationMessage": "",
19142
19142
  "type": "",
19143
19143
  "optional": false,
19144
19144
  "description": "",
19145
- "line": 85,
19145
+ "line": 90
19146
+ },
19147
+ {
19148
+ "name": "notificationLabel",
19149
+ "defaultValue": "this.notificationID",
19150
+ "deprecated": false,
19151
+ "deprecationMessage": "",
19152
+ "type": "",
19153
+ "optional": false,
19154
+ "description": "",
19155
+ "line": 91,
19146
19156
  "decorators": [
19147
19157
  {
19148
19158
  "name": "HostBinding",
19149
- "stringifiedArguments": "'attr.id'"
19159
+ "stringifiedArguments": "'attr.aria-labelledBy'"
19150
19160
  }
19151
19161
  ],
19152
19162
  "modifierKind": [
@@ -19262,11 +19272,11 @@
19262
19272
  "deprecationMessage": "",
19263
19273
  "hostBindings": [
19264
19274
  {
19265
- "name": "attr.id",
19266
- "defaultValue": "`notification-${ActionableNotification.notificationCount++}`",
19275
+ "name": "attr.aria-labelledBy",
19276
+ "defaultValue": "this.notificationID",
19267
19277
  "deprecated": false,
19268
19278
  "deprecationMessage": "",
19269
- "line": 85,
19279
+ "line": 91,
19270
19280
  "type": "string",
19271
19281
  "decorators": []
19272
19282
  },
@@ -19275,7 +19285,7 @@
19275
19285
  "defaultValue": "true",
19276
19286
  "deprecated": false,
19277
19287
  "deprecationMessage": "",
19278
- "line": 86,
19288
+ "line": 92,
19279
19289
  "type": "boolean",
19280
19290
  "decorators": []
19281
19291
  },
@@ -19283,7 +19293,7 @@
19283
19293
  "name": "class.cds--actionable-notification--error",
19284
19294
  "deprecated": false,
19285
19295
  "deprecationMessage": "",
19286
- "line": 88,
19296
+ "line": 94,
19287
19297
  "type": "boolean",
19288
19298
  "decorators": []
19289
19299
  },
@@ -19291,7 +19301,7 @@
19291
19301
  "name": "class.cds--actionable-notification--hide-close-button",
19292
19302
  "deprecated": false,
19293
19303
  "deprecationMessage": "",
19294
- "line": 95,
19304
+ "line": 101,
19295
19305
  "type": "boolean",
19296
19306
  "decorators": []
19297
19307
  },
@@ -19299,7 +19309,7 @@
19299
19309
  "name": "class.cds--actionable-notification--info",
19300
19310
  "deprecated": false,
19301
19311
  "deprecationMessage": "",
19302
- "line": 89,
19312
+ "line": 95,
19303
19313
  "type": "boolean",
19304
19314
  "decorators": []
19305
19315
  },
@@ -19307,7 +19317,7 @@
19307
19317
  "name": "class.cds--actionable-notification--info-square",
19308
19318
  "deprecated": false,
19309
19319
  "deprecationMessage": "",
19310
- "line": 90,
19320
+ "line": 96,
19311
19321
  "type": "boolean",
19312
19322
  "decorators": []
19313
19323
  },
@@ -19315,7 +19325,7 @@
19315
19325
  "name": "class.cds--actionable-notification--low-contrast",
19316
19326
  "deprecated": false,
19317
19327
  "deprecationMessage": "",
19318
- "line": 94,
19328
+ "line": 100,
19319
19329
  "type": "any",
19320
19330
  "decorators": []
19321
19331
  },
@@ -19323,7 +19333,7 @@
19323
19333
  "name": "class.cds--actionable-notification--success",
19324
19334
  "deprecated": false,
19325
19335
  "deprecationMessage": "",
19326
- "line": 91,
19336
+ "line": 97,
19327
19337
  "type": "boolean",
19328
19338
  "decorators": []
19329
19339
  },
@@ -19331,7 +19341,7 @@
19331
19341
  "name": "class.cds--actionable-notification--toast",
19332
19342
  "deprecated": false,
19333
19343
  "deprecationMessage": "",
19334
- "line": 87,
19344
+ "line": 93,
19335
19345
  "type": "boolean",
19336
19346
  "decorators": []
19337
19347
  },
@@ -19339,7 +19349,7 @@
19339
19349
  "name": "class.cds--actionable-notification--warning",
19340
19350
  "deprecated": false,
19341
19351
  "deprecationMessage": "",
19342
- "line": 92,
19352
+ "line": 98,
19343
19353
  "type": "boolean",
19344
19354
  "decorators": []
19345
19355
  },
@@ -19347,7 +19357,7 @@
19347
19357
  "name": "class.cds--actionable-notification--warning-alt",
19348
19358
  "deprecated": false,
19349
19359
  "deprecationMessage": "",
19350
- "line": 93,
19360
+ "line": 99,
19351
19361
  "type": "boolean",
19352
19362
  "decorators": []
19353
19363
  },
@@ -19371,7 +19381,7 @@
19371
19381
  "description": "<p>Actionable notification allows for interactive elements within a notification. There are two variants offered, inline &amp; toast.</p>\n<p><a href=\"../../?path=/story/components-notification--actionable-notification\">See demo</a></p>\n",
19372
19382
  "rawdescription": "\n\nActionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n\n[See demo](../../?path=/story/components-notification--actionable-notification)\n",
19373
19383
  "type": "component",
19374
- "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
19384
+ "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tcdsActionableTitle\n\t\t\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t\t\t[id]=\"notificationID\"\n\t\t\t\t\t\t[innerHTML]=\"notificationObj.title\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `actionable-notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
19375
19385
  "assetsDirs": [],
19376
19386
  "styleUrlsData": "",
19377
19387
  "stylesData": "",
@@ -19394,7 +19404,7 @@
19394
19404
  "deprecationMessage": ""
19395
19405
  }
19396
19406
  ],
19397
- "line": 104,
19407
+ "line": 110,
19398
19408
  "jsdoctags": [
19399
19409
  {
19400
19410
  "name": "notificationDisplayService",
@@ -19436,7 +19446,7 @@
19436
19446
  }
19437
19447
  ],
19438
19448
  "returnType": "void",
19439
- "line": 78,
19449
+ "line": 83,
19440
19450
  "jsdoctags": [
19441
19451
  {
19442
19452
  "name": "obj",
@@ -19453,7 +19463,7 @@
19453
19463
  "name": "notificationObj",
19454
19464
  "type": "",
19455
19465
  "returnType": "ActionableContent",
19456
- "line": 75,
19466
+ "line": 80,
19457
19467
  "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
19458
19468
  "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n"
19459
19469
  }
@@ -19464,7 +19474,7 @@
19464
19474
  "name": "toastVariant",
19465
19475
  "type": "",
19466
19476
  "returnType": "",
19467
- "line": 87
19477
+ "line": 93
19468
19478
  }
19469
19479
  },
19470
19480
  "isError": {
@@ -19473,7 +19483,7 @@
19473
19483
  "name": "isError",
19474
19484
  "type": "",
19475
19485
  "returnType": "",
19476
- "line": 88
19486
+ "line": 94
19477
19487
  }
19478
19488
  },
19479
19489
  "isInfo": {
@@ -19482,7 +19492,7 @@
19482
19492
  "name": "isInfo",
19483
19493
  "type": "",
19484
19494
  "returnType": "",
19485
- "line": 89
19495
+ "line": 95
19486
19496
  }
19487
19497
  },
19488
19498
  "isInfoSquare": {
@@ -19491,7 +19501,7 @@
19491
19501
  "name": "isInfoSquare",
19492
19502
  "type": "",
19493
19503
  "returnType": "",
19494
- "line": 90
19504
+ "line": 96
19495
19505
  }
19496
19506
  },
19497
19507
  "isSuccess": {
@@ -19500,7 +19510,7 @@
19500
19510
  "name": "isSuccess",
19501
19511
  "type": "",
19502
19512
  "returnType": "",
19503
- "line": 91
19513
+ "line": 97
19504
19514
  }
19505
19515
  },
19506
19516
  "isWarning": {
@@ -19509,7 +19519,7 @@
19509
19519
  "name": "isWarning",
19510
19520
  "type": "",
19511
19521
  "returnType": "",
19512
- "line": 92
19522
+ "line": 98
19513
19523
  }
19514
19524
  },
19515
19525
  "isWarningAlt": {
@@ -19518,7 +19528,7 @@
19518
19528
  "name": "isWarningAlt",
19519
19529
  "type": "",
19520
19530
  "returnType": "",
19521
- "line": 93
19531
+ "line": 99
19522
19532
  }
19523
19533
  },
19524
19534
  "isLowContrast": {
@@ -19527,7 +19537,7 @@
19527
19537
  "name": "isLowContrast",
19528
19538
  "type": "",
19529
19539
  "returnType": "",
19530
- "line": 94
19540
+ "line": 100
19531
19541
  }
19532
19542
  },
19533
19543
  "isCloseHidden": {
@@ -19536,7 +19546,7 @@
19536
19546
  "name": "isCloseHidden",
19537
19547
  "type": "",
19538
19548
  "returnType": "",
19539
- "line": 95
19549
+ "line": 101
19540
19550
  }
19541
19551
  }
19542
19552
  }
@@ -39104,7 +39114,7 @@
39104
39114
  },
39105
39115
  {
39106
39116
  "name": "Notification",
39107
- "id": "component-Notification-954b6bd2010556ddca9849bd2d2c31fc4dae8f63a7b6d970ce5063dcea8f018a8b9a6592d6df4aa7a2a004174cac08bbc92389a288e88e002161b69f8c794101",
39117
+ "id": "component-Notification-07629cc065856bfd8dabc21a6b334615def759c00da1054674f13666364d961e594cc4958734ed251dac15e7c424acef301f2128b847a00f6701c8dd09be1ed4",
39108
39118
  "file": "src/notification/notification.component.ts",
39109
39119
  "encapsulation": [],
39110
39120
  "entryComponents": [],
@@ -39114,7 +39124,7 @@
39114
39124
  "selector": "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification",
39115
39125
  "styleUrls": [],
39116
39126
  "styles": [],
39117
- "template": "<div class=\"cds--inline-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\tclass=\"cds--inline-notification__icon\">\n\t</svg>\n\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t</div>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t</div>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--inline-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n</button>\n\t",
39127
+ "template": "<div class=\"cds--inline-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\tclass=\"cds--inline-notification__icon\">\n\t</svg>\n\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t<div\n\t\t\tcdsNotificationTitle\n\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t[innerHTML]=\"notificationObj.title\"\n\t\t\t[id]=\"notificationID\">\n\t\t</div>\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t</div>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t</div>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--inline-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n</button>\n\t",
39118
39128
  "templateUrl": [],
39119
39129
  "viewProviders": [],
39120
39130
  "hostDirectives": [],
@@ -39125,7 +39135,7 @@
39125
39135
  "deprecationMessage": "",
39126
39136
  "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
39127
39137
  "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n",
39128
- "line": 55,
39138
+ "line": 60,
39129
39139
  "type": "NotificationContent",
39130
39140
  "decorators": []
39131
39141
  }
@@ -39154,7 +39164,7 @@
39154
39164
  "type": "",
39155
39165
  "optional": false,
39156
39166
  "description": "",
39157
- "line": 66,
39167
+ "line": 72,
39158
39168
  "decorators": [
39159
39169
  {
39160
39170
  "name": "HostBinding",
@@ -39173,11 +39183,21 @@
39173
39183
  "type": "",
39174
39184
  "optional": false,
39175
39185
  "description": "",
39176
- "line": 65,
39186
+ "line": 70
39187
+ },
39188
+ {
39189
+ "name": "notificationLabel",
39190
+ "defaultValue": "this.notificationID",
39191
+ "deprecated": false,
39192
+ "deprecationMessage": "",
39193
+ "type": "",
39194
+ "optional": false,
39195
+ "description": "",
39196
+ "line": 71,
39177
39197
  "decorators": [
39178
39198
  {
39179
39199
  "name": "HostBinding",
39180
- "stringifiedArguments": "'attr.id'"
39200
+ "stringifiedArguments": "'attr.aria-labelledBy'"
39181
39201
  }
39182
39202
  ],
39183
39203
  "modifierKind": [
@@ -39293,11 +39313,11 @@
39293
39313
  "deprecationMessage": "",
39294
39314
  "hostBindings": [
39295
39315
  {
39296
- "name": "attr.id",
39297
- "defaultValue": "`notification-${Notification.notificationCount++}`",
39316
+ "name": "attr.aria-labelledBy",
39317
+ "defaultValue": "this.notificationID",
39298
39318
  "deprecated": false,
39299
39319
  "deprecationMessage": "",
39300
- "line": 65,
39320
+ "line": 71,
39301
39321
  "type": "string",
39302
39322
  "decorators": []
39303
39323
  },
@@ -39306,7 +39326,7 @@
39306
39326
  "defaultValue": "true",
39307
39327
  "deprecated": false,
39308
39328
  "deprecationMessage": "",
39309
- "line": 66,
39329
+ "line": 72,
39310
39330
  "type": "boolean",
39311
39331
  "decorators": []
39312
39332
  },
@@ -39314,7 +39334,7 @@
39314
39334
  "name": "class.cds--inline-notification--error",
39315
39335
  "deprecated": false,
39316
39336
  "deprecationMessage": "",
39317
- "line": 67,
39337
+ "line": 73,
39318
39338
  "type": "boolean",
39319
39339
  "decorators": []
39320
39340
  },
@@ -39322,7 +39342,7 @@
39322
39342
  "name": "class.cds--inline-notification--hide-close-button",
39323
39343
  "deprecated": false,
39324
39344
  "deprecationMessage": "",
39325
- "line": 74,
39345
+ "line": 80,
39326
39346
  "type": "boolean",
39327
39347
  "decorators": []
39328
39348
  },
@@ -39330,7 +39350,7 @@
39330
39350
  "name": "class.cds--inline-notification--info",
39331
39351
  "deprecated": false,
39332
39352
  "deprecationMessage": "",
39333
- "line": 68,
39353
+ "line": 74,
39334
39354
  "type": "boolean",
39335
39355
  "decorators": []
39336
39356
  },
@@ -39338,7 +39358,7 @@
39338
39358
  "name": "class.cds--inline-notification--info-square",
39339
39359
  "deprecated": false,
39340
39360
  "deprecationMessage": "",
39341
- "line": 69,
39361
+ "line": 75,
39342
39362
  "type": "boolean",
39343
39363
  "decorators": []
39344
39364
  },
@@ -39346,7 +39366,7 @@
39346
39366
  "name": "class.cds--inline-notification--low-contrast",
39347
39367
  "deprecated": false,
39348
39368
  "deprecationMessage": "",
39349
- "line": 73,
39369
+ "line": 79,
39350
39370
  "type": "any",
39351
39371
  "decorators": []
39352
39372
  },
@@ -39354,7 +39374,7 @@
39354
39374
  "name": "class.cds--inline-notification--success",
39355
39375
  "deprecated": false,
39356
39376
  "deprecationMessage": "",
39357
- "line": 70,
39377
+ "line": 76,
39358
39378
  "type": "boolean",
39359
39379
  "decorators": []
39360
39380
  },
@@ -39362,7 +39382,7 @@
39362
39382
  "name": "class.cds--inline-notification--warning",
39363
39383
  "deprecated": false,
39364
39384
  "deprecationMessage": "",
39365
- "line": 71,
39385
+ "line": 77,
39366
39386
  "type": "boolean",
39367
39387
  "decorators": []
39368
39388
  },
@@ -39370,7 +39390,7 @@
39370
39390
  "name": "class.cds--inline-notification--warning-alt",
39371
39391
  "deprecated": false,
39372
39392
  "deprecationMessage": "",
39373
- "line": 72,
39393
+ "line": 78,
39374
39394
  "type": "boolean",
39375
39395
  "decorators": []
39376
39396
  },
@@ -39394,7 +39414,7 @@
39394
39414
  "description": "<p>Notification messages are displayed toward the top of the UI and do not interrupt user’s work.</p>\n<p><a href=\"../../?path=/story/components-notification--basic\">See demo</a></p>\n",
39395
39415
  "rawdescription": "\n\nNotification messages are displayed toward the top of the UI and do not interrupt user’s work.\n\n[See demo](../../?path=/story/components-notification--basic)\n",
39396
39416
  "type": "component",
39397
- "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
39417
+ "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tcdsNotificationTitle\n\t\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t\t[innerHTML]=\"notificationObj.title\"\n\t\t\t\t\t[id]=\"notificationID\">\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
39398
39418
  "assetsDirs": [],
39399
39419
  "styleUrlsData": "",
39400
39420
  "stylesData": "",
@@ -39417,7 +39437,7 @@
39417
39437
  "deprecationMessage": ""
39418
39438
  }
39419
39439
  ],
39420
- "line": 74,
39440
+ "line": 80,
39421
39441
  "jsdoctags": [
39422
39442
  {
39423
39443
  "name": "notificationDisplayService",
@@ -39459,7 +39479,7 @@
39459
39479
  }
39460
39480
  ],
39461
39481
  "returnType": "void",
39462
- "line": 58,
39482
+ "line": 63,
39463
39483
  "jsdoctags": [
39464
39484
  {
39465
39485
  "name": "obj",
@@ -39476,7 +39496,7 @@
39476
39496
  "name": "notificationObj",
39477
39497
  "type": "",
39478
39498
  "returnType": "NotificationContent",
39479
- "line": 55,
39499
+ "line": 60,
39480
39500
  "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
39481
39501
  "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n"
39482
39502
  }
@@ -39487,7 +39507,7 @@
39487
39507
  "name": "isError",
39488
39508
  "type": "",
39489
39509
  "returnType": "",
39490
- "line": 67
39510
+ "line": 73
39491
39511
  }
39492
39512
  },
39493
39513
  "isInfo": {
@@ -39496,7 +39516,7 @@
39496
39516
  "name": "isInfo",
39497
39517
  "type": "",
39498
39518
  "returnType": "",
39499
- "line": 68
39519
+ "line": 74
39500
39520
  }
39501
39521
  },
39502
39522
  "isInfoSquare": {
@@ -39505,7 +39525,7 @@
39505
39525
  "name": "isInfoSquare",
39506
39526
  "type": "",
39507
39527
  "returnType": "",
39508
- "line": 69
39528
+ "line": 75
39509
39529
  }
39510
39530
  },
39511
39531
  "isSuccess": {
@@ -39514,7 +39534,7 @@
39514
39534
  "name": "isSuccess",
39515
39535
  "type": "",
39516
39536
  "returnType": "",
39517
- "line": 70
39537
+ "line": 76
39518
39538
  }
39519
39539
  },
39520
39540
  "isWarning": {
@@ -39523,7 +39543,7 @@
39523
39543
  "name": "isWarning",
39524
39544
  "type": "",
39525
39545
  "returnType": "",
39526
- "line": 71
39546
+ "line": 77
39527
39547
  }
39528
39548
  },
39529
39549
  "isWarningAlt": {
@@ -39532,7 +39552,7 @@
39532
39552
  "name": "isWarningAlt",
39533
39553
  "type": "",
39534
39554
  "returnType": "",
39535
- "line": 72
39555
+ "line": 78
39536
39556
  }
39537
39557
  },
39538
39558
  "isLowContrast": {
@@ -39541,7 +39561,7 @@
39541
39561
  "name": "isLowContrast",
39542
39562
  "type": "",
39543
39563
  "returnType": "",
39544
- "line": 73
39564
+ "line": 79
39545
39565
  }
39546
39566
  },
39547
39567
  "isCloseHidden": {
@@ -39550,7 +39570,7 @@
39550
39570
  "name": "isCloseHidden",
39551
39571
  "type": "",
39552
39572
  "returnType": "",
39553
- "line": 74
39573
+ "line": 80
39554
39574
  }
39555
39575
  }
39556
39576
  }
@@ -90069,8 +90089,8 @@
90069
90089
  "type": "component",
90070
90090
  "linktype": "component",
90071
90091
  "name": "ActionableNotification",
90072
- "coveragePercent": 25,
90073
- "coverageCount": "6/24",
90092
+ "coveragePercent": 24,
90093
+ "coverageCount": "6/25",
90074
90094
  "status": "low"
90075
90095
  },
90076
90096
  {
@@ -90177,8 +90197,8 @@
90177
90197
  "type": "component",
90178
90198
  "linktype": "component",
90179
90199
  "name": "Notification",
90180
- "coveragePercent": 22,
90181
- "coverageCount": "5/22",
90200
+ "coveragePercent": 21,
90201
+ "coverageCount": "5/23",
90182
90202
  "status": "low"
90183
90203
  },
90184
90204
  {