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
package/docs/documentation.json
CHANGED
|
@@ -19062,7 +19062,7 @@
|
|
|
19062
19062
|
},
|
|
19063
19063
|
{
|
|
19064
19064
|
"name": "ActionableNotification",
|
|
19065
|
-
"id": "component-ActionableNotification-
|
|
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
|
|
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>"error"</code>, <code>"info"</code>, <code>"info-square"</code>, <code>"warning"</code>, <code>"warning-alt"</code>, or <code>"success"</code></p>\n<p><code>message</code> is the message to display</p>\n",
|
|
19086
|
-
"line":
|
|
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 & role, alternatives can be provided through notificationObj property</p>\n",
|
|
19115
|
-
"line":
|
|
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":
|
|
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":
|
|
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.
|
|
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.
|
|
19266
|
-
"defaultValue": "
|
|
19275
|
+
"name": "attr.aria-labelledBy",
|
|
19276
|
+
"defaultValue": "this.notificationID",
|
|
19267
19277
|
"deprecated": false,
|
|
19268
19278
|
"deprecationMessage": "",
|
|
19269
|
-
"line":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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 & 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
|
|
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":
|
|
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":
|
|
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":
|
|
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>"error"</code>, <code>"info"</code>, <code>"info-square"</code>, <code>"warning"</code>, <code>"warning-alt"</code>, or <code>"success"</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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
19549
|
+
"line": 101
|
|
19540
19550
|
}
|
|
19541
19551
|
}
|
|
19542
19552
|
}
|
|
@@ -30452,7 +30462,7 @@
|
|
|
30452
30462
|
},
|
|
30453
30463
|
{
|
|
30454
30464
|
"name": "DropdownList",
|
|
30455
|
-
"id": "component-DropdownList-
|
|
30465
|
+
"id": "component-DropdownList-2962a296e4b76167cde4c2e261085e0728345b5a38b21703280b336d812f03e0af28abd7428b954103fbf3988dba72cd0b6a658eeb927759801fb662d167d727",
|
|
30456
30466
|
"file": "src/dropdown/list/dropdown-list.component.ts",
|
|
30457
30467
|
"encapsulation": [],
|
|
30458
30468
|
"entryComponents": [],
|
|
@@ -30466,7 +30476,7 @@
|
|
|
30466
30476
|
"selector": "cds-dropdown-list, ibm-dropdown-list",
|
|
30467
30477
|
"styleUrls": [],
|
|
30468
30478
|
"styles": [],
|
|
30469
|
-
"template": "<ul\n\t#list\n\t[id]=\"listId\"\n\trole=\"listbox\"\n\tclass=\"cds--list-box__menu cds--multi-select\"\n\t(scroll)=\"emitScroll($event)\"\n\t(keydown)=\"navigateList($event)\"\n\ttabindex=\"
|
|
30479
|
+
"template": "<ul\n\t#list\n\t[id]=\"listId\"\n\trole=\"listbox\"\n\tclass=\"cds--list-box__menu cds--multi-select\"\n\t(scroll)=\"emitScroll($event)\"\n\t(keydown)=\"navigateList($event)\"\n\ttabindex=\"0\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t<li\n\t\trole=\"option\"\n\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t(click)=\"doClick($event, item)\"\n\t\tclass=\"cds--list-box__menu-item\"\n\t\t[attr.aria-selected]=\"item.selected\"\n\t\t[id]=\"getItemId(i)\"\n\t\t[attr.tabindex]=\"highlightedItem === getItemId(i) ? 0 : null\"\n\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t}\">\n\t\t<div\n\t\t\t#listItem\n\t\t\ttabindex=\"-1\"\n\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t<label\n\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t</svg>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t</ng-template>\n\t\t</div>\n\t</li>\n</ul>",
|
|
30470
30480
|
"templateUrl": [],
|
|
30471
30481
|
"viewProviders": [],
|
|
30472
30482
|
"hostDirectives": [],
|
|
@@ -30476,7 +30486,7 @@
|
|
|
30476
30486
|
"defaultValue": "this.i18n.get().DROPDOWN_LIST.LABEL",
|
|
30477
30487
|
"deprecated": false,
|
|
30478
30488
|
"deprecationMessage": "",
|
|
30479
|
-
"line":
|
|
30489
|
+
"line": 121,
|
|
30480
30490
|
"type": "any",
|
|
30481
30491
|
"decorators": []
|
|
30482
30492
|
},
|
|
@@ -30486,7 +30496,7 @@
|
|
|
30486
30496
|
"deprecationMessage": "",
|
|
30487
30497
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
30488
30498
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
30489
|
-
"line":
|
|
30499
|
+
"line": 125,
|
|
30490
30500
|
"type": "Array | Observable",
|
|
30491
30501
|
"decorators": []
|
|
30492
30502
|
},
|
|
@@ -30497,7 +30507,7 @@
|
|
|
30497
30507
|
"deprecationMessage": "",
|
|
30498
30508
|
"rawdescription": "\n\nTemplate to bind to items in the `DropdownList` (optional).\n",
|
|
30499
30509
|
"description": "<p>Template to bind to items in the <code>DropdownList</code> (optional).</p>\n",
|
|
30500
|
-
"line":
|
|
30510
|
+
"line": 150,
|
|
30501
30511
|
"type": "string | TemplateRef<any>",
|
|
30502
30512
|
"decorators": []
|
|
30503
30513
|
},
|
|
@@ -30508,7 +30518,7 @@
|
|
|
30508
30518
|
"deprecationMessage": "",
|
|
30509
30519
|
"rawdescription": "\n\nDefines whether to show title attribute or not\n",
|
|
30510
30520
|
"description": "<p>Defines whether to show title attribute or not</p>\n",
|
|
30511
|
-
"line":
|
|
30521
|
+
"line": 182,
|
|
30512
30522
|
"type": "boolean",
|
|
30513
30523
|
"decorators": []
|
|
30514
30524
|
},
|
|
@@ -30519,7 +30529,7 @@
|
|
|
30519
30529
|
"deprecationMessage": "",
|
|
30520
30530
|
"rawdescription": "\n\nDefines whether or not the `DropdownList` supports selecting multiple items as opposed to single\nitem selection.\n",
|
|
30521
30531
|
"description": "<p>Defines whether or not the <code>DropdownList</code> supports selecting multiple items as opposed to single\nitem selection.</p>\n",
|
|
30522
|
-
"line":
|
|
30532
|
+
"line": 177,
|
|
30523
30533
|
"type": "\"single\" | \"multi\"",
|
|
30524
30534
|
"decorators": []
|
|
30525
30535
|
}
|
|
@@ -30532,7 +30542,7 @@
|
|
|
30532
30542
|
"deprecationMessage": "",
|
|
30533
30543
|
"rawdescription": "\n\nEvent to suggest a blur on the view.\nEmits _after_ the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event\n\nWhen this event fires focus should be placed on some element outside of the list - blurring the list as a result\n",
|
|
30534
30544
|
"description": "<p>Event to suggest a blur on the view.\nEmits <em>after</em> the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event</p>\n<p>When this event fires focus should be placed on some element outside of the list - blurring the list as a result</p>\n",
|
|
30535
|
-
"line":
|
|
30545
|
+
"line": 168,
|
|
30536
30546
|
"type": "EventEmitter"
|
|
30537
30547
|
},
|
|
30538
30548
|
{
|
|
@@ -30542,7 +30552,7 @@
|
|
|
30542
30552
|
"deprecationMessage": "",
|
|
30543
30553
|
"rawdescription": "\n\nEvent to emit scroll event of a list within the `DropdownList`.\n",
|
|
30544
30554
|
"description": "<p>Event to emit scroll event of a list within the <code>DropdownList</code>.</p>\n",
|
|
30545
|
-
"line":
|
|
30555
|
+
"line": 158,
|
|
30546
30556
|
"type": "EventEmitter<ScrollCustomEvent>"
|
|
30547
30557
|
},
|
|
30548
30558
|
{
|
|
@@ -30552,7 +30562,7 @@
|
|
|
30552
30562
|
"deprecationMessage": "",
|
|
30553
30563
|
"rawdescription": "\n\nEvent to emit selection of a list item within the `DropdownList`.\n",
|
|
30554
30564
|
"description": "<p>Event to emit selection of a list item within the <code>DropdownList</code>.</p>\n",
|
|
30555
|
-
"line":
|
|
30565
|
+
"line": 154,
|
|
30556
30566
|
"type": "EventEmitter<literal type | []>"
|
|
30557
30567
|
}
|
|
30558
30568
|
],
|
|
@@ -30565,7 +30575,7 @@
|
|
|
30565
30575
|
"type": "Array<ListItem>",
|
|
30566
30576
|
"optional": false,
|
|
30567
30577
|
"description": "<p>Holds the list of items that will be displayed in the <code>DropdownList</code>.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in <code>DropdownList</code>).</p>\n",
|
|
30568
|
-
"line":
|
|
30578
|
+
"line": 195,
|
|
30569
30579
|
"rawdescription": "\n\nHolds the list of items that will be displayed in the `DropdownList`.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in `DropdownList`).\n",
|
|
30570
30580
|
"modifierKind": [
|
|
30571
30581
|
125
|
|
@@ -30578,7 +30588,7 @@
|
|
|
30578
30588
|
"type": "ElementRef",
|
|
30579
30589
|
"optional": false,
|
|
30580
30590
|
"description": "",
|
|
30581
|
-
"line":
|
|
30591
|
+
"line": 228,
|
|
30582
30592
|
"modifierKind": [
|
|
30583
30593
|
125
|
|
30584
30594
|
]
|
|
@@ -30591,7 +30601,7 @@
|
|
|
30591
30601
|
"type": "null",
|
|
30592
30602
|
"optional": false,
|
|
30593
30603
|
"description": "",
|
|
30594
|
-
"line":
|
|
30604
|
+
"line": 189,
|
|
30595
30605
|
"modifierKind": [
|
|
30596
30606
|
125
|
|
30597
30607
|
]
|
|
@@ -30603,7 +30613,7 @@
|
|
|
30603
30613
|
"type": "ElementRef",
|
|
30604
30614
|
"optional": false,
|
|
30605
30615
|
"description": "<p>Maintains a reference to the view DOM element for the unordered list of items within the <code>DropdownList</code>.</p>\n",
|
|
30606
|
-
"line":
|
|
30616
|
+
"line": 172,
|
|
30607
30617
|
"rawdescription": "\n\nMaintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n",
|
|
30608
30618
|
"decorators": [
|
|
30609
30619
|
{
|
|
@@ -30623,7 +30633,7 @@
|
|
|
30623
30633
|
"type": "number",
|
|
30624
30634
|
"optional": false,
|
|
30625
30635
|
"description": "",
|
|
30626
|
-
"line":
|
|
30636
|
+
"line": 120,
|
|
30627
30637
|
"modifierKind": [
|
|
30628
30638
|
126
|
|
30629
30639
|
]
|
|
@@ -30636,7 +30646,7 @@
|
|
|
30636
30646
|
"type": "",
|
|
30637
30647
|
"optional": false,
|
|
30638
30648
|
"description": "",
|
|
30639
|
-
"line":
|
|
30649
|
+
"line": 188,
|
|
30640
30650
|
"modifierKind": [
|
|
30641
30651
|
125
|
|
30642
30652
|
]
|
|
@@ -30649,7 +30659,7 @@
|
|
|
30649
30659
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
30650
30660
|
"optional": false,
|
|
30651
30661
|
"description": "<p>Defines the rendering size of the <code>DropdownList</code> input component.</p>\n",
|
|
30652
|
-
"line":
|
|
30662
|
+
"line": 187,
|
|
30653
30663
|
"rawdescription": "\n\nDefines the rendering size of the `DropdownList` input component.\n",
|
|
30654
30664
|
"modifierKind": [
|
|
30655
30665
|
125
|
|
@@ -30676,7 +30686,7 @@
|
|
|
30676
30686
|
"optional": false,
|
|
30677
30687
|
"returnType": "void",
|
|
30678
30688
|
"typeParameters": [],
|
|
30679
|
-
"line":
|
|
30689
|
+
"line": 552,
|
|
30680
30690
|
"deprecated": false,
|
|
30681
30691
|
"deprecationMessage": "",
|
|
30682
30692
|
"rawdescription": "\n\nEmits the selected item or items after a mouse click event has occurred.\n",
|
|
@@ -30716,7 +30726,7 @@
|
|
|
30716
30726
|
"optional": false,
|
|
30717
30727
|
"returnType": "void",
|
|
30718
30728
|
"typeParameters": [],
|
|
30719
|
-
"line":
|
|
30729
|
+
"line": 254,
|
|
30720
30730
|
"deprecated": false,
|
|
30721
30731
|
"deprecationMessage": "",
|
|
30722
30732
|
"jsdoctags": [
|
|
@@ -30745,7 +30755,7 @@
|
|
|
30745
30755
|
"optional": false,
|
|
30746
30756
|
"returnType": "void",
|
|
30747
30757
|
"typeParameters": [],
|
|
30748
|
-
"line":
|
|
30758
|
+
"line": 587,
|
|
30749
30759
|
"deprecated": false,
|
|
30750
30760
|
"deprecationMessage": "",
|
|
30751
30761
|
"rawdescription": "\n\nEmits the scroll event of the options list\n",
|
|
@@ -30776,7 +30786,7 @@
|
|
|
30776
30786
|
"optional": false,
|
|
30777
30787
|
"returnType": "void",
|
|
30778
30788
|
"typeParameters": [],
|
|
30779
|
-
"line":
|
|
30789
|
+
"line": 284,
|
|
30780
30790
|
"deprecated": false,
|
|
30781
30791
|
"deprecationMessage": "",
|
|
30782
30792
|
"rawdescription": "\n\nFilters the items being displayed in the DOM list.\n",
|
|
@@ -30800,7 +30810,7 @@
|
|
|
30800
30810
|
"optional": false,
|
|
30801
30811
|
"returnType": "HTMLElement",
|
|
30802
30812
|
"typeParameters": [],
|
|
30803
|
-
"line":
|
|
30813
|
+
"line": 415,
|
|
30804
30814
|
"deprecated": false,
|
|
30805
30815
|
"deprecationMessage": "",
|
|
30806
30816
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is selected within the `DropdownList`.\n",
|
|
@@ -30812,7 +30822,7 @@
|
|
|
30812
30822
|
"optional": false,
|
|
30813
30823
|
"returnType": "ListItem",
|
|
30814
30824
|
"typeParameters": [],
|
|
30815
|
-
"line":
|
|
30825
|
+
"line": 405,
|
|
30816
30826
|
"deprecated": false,
|
|
30817
30827
|
"deprecationMessage": "",
|
|
30818
30828
|
"rawdescription": "\n\nReturns the `ListItem` that is selected within `DropdownList`.\n",
|
|
@@ -30831,7 +30841,7 @@
|
|
|
30831
30841
|
"optional": false,
|
|
30832
30842
|
"returnType": "string",
|
|
30833
30843
|
"typeParameters": [],
|
|
30834
|
-
"line":
|
|
30844
|
+
"line": 266,
|
|
30835
30845
|
"deprecated": false,
|
|
30836
30846
|
"deprecationMessage": "",
|
|
30837
30847
|
"jsdoctags": [
|
|
@@ -30852,7 +30862,7 @@
|
|
|
30852
30862
|
"optional": false,
|
|
30853
30863
|
"returnType": "Array<ListItem>",
|
|
30854
30864
|
"typeParameters": [],
|
|
30855
|
-
"line":
|
|
30865
|
+
"line": 425,
|
|
30856
30866
|
"deprecated": false,
|
|
30857
30867
|
"deprecationMessage": "",
|
|
30858
30868
|
"rawdescription": "\n\nReturns the items as an Array\n",
|
|
@@ -30864,7 +30874,7 @@
|
|
|
30864
30874
|
"optional": false,
|
|
30865
30875
|
"returnType": "HTMLElement",
|
|
30866
30876
|
"typeParameters": [],
|
|
30867
|
-
"line":
|
|
30877
|
+
"line": 336,
|
|
30868
30878
|
"deprecated": false,
|
|
30869
30879
|
"deprecationMessage": "",
|
|
30870
30880
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is subsequent to the selected item.\n",
|
|
@@ -30876,7 +30886,7 @@
|
|
|
30876
30886
|
"optional": false,
|
|
30877
30887
|
"returnType": "ListItem",
|
|
30878
30888
|
"typeParameters": [],
|
|
30879
|
-
"line":
|
|
30889
|
+
"line": 318,
|
|
30880
30890
|
"deprecated": false,
|
|
30881
30891
|
"deprecationMessage": "",
|
|
30882
30892
|
"rawdescription": "\n\nReturns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n",
|
|
@@ -30888,7 +30898,7 @@
|
|
|
30888
30898
|
"optional": false,
|
|
30889
30899
|
"returnType": "HTMLElement",
|
|
30890
30900
|
"typeParameters": [],
|
|
30891
|
-
"line":
|
|
30901
|
+
"line": 379,
|
|
30892
30902
|
"deprecated": false,
|
|
30893
30903
|
"deprecationMessage": "",
|
|
30894
30904
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that precedes the selected item.\n",
|
|
@@ -30900,7 +30910,7 @@
|
|
|
30900
30910
|
"optional": false,
|
|
30901
30911
|
"returnType": "ListItem",
|
|
30902
30912
|
"typeParameters": [],
|
|
30903
|
-
"line":
|
|
30913
|
+
"line": 362,
|
|
30904
30914
|
"deprecated": false,
|
|
30905
30915
|
"deprecationMessage": "",
|
|
30906
30916
|
"rawdescription": "\n\nReturns the `ListItem` that precedes the selected item within `DropdownList`.\n",
|
|
@@ -30912,7 +30922,7 @@
|
|
|
30912
30922
|
"optional": false,
|
|
30913
30923
|
"returnType": "ListItem[]",
|
|
30914
30924
|
"typeParameters": [],
|
|
30915
|
-
"line":
|
|
30925
|
+
"line": 432,
|
|
30916
30926
|
"deprecated": false,
|
|
30917
30927
|
"deprecationMessage": "",
|
|
30918
30928
|
"rawdescription": "\n\nReturns a list containing the selected item(s) in the `DropdownList`.\n",
|
|
@@ -30924,7 +30934,7 @@
|
|
|
30924
30934
|
"optional": false,
|
|
30925
30935
|
"returnType": "boolean",
|
|
30926
30936
|
"typeParameters": [],
|
|
30927
|
-
"line":
|
|
30937
|
+
"line": 328,
|
|
30928
30938
|
"deprecated": false,
|
|
30929
30939
|
"deprecationMessage": "",
|
|
30930
30940
|
"rawdescription": "\n\nReturns `true` if the selected item is not the last item in the `DropdownList`.\n",
|
|
@@ -30936,7 +30946,7 @@
|
|
|
30936
30946
|
"optional": false,
|
|
30937
30947
|
"returnType": "boolean",
|
|
30938
30948
|
"typeParameters": [],
|
|
30939
|
-
"line":
|
|
30949
|
+
"line": 372,
|
|
30940
30950
|
"deprecated": false,
|
|
30941
30951
|
"deprecationMessage": "",
|
|
30942
30952
|
"rawdescription": "\n\nReturns `true` if the selected item is not the first in the list.\n",
|
|
@@ -30948,7 +30958,7 @@
|
|
|
30948
30958
|
"optional": false,
|
|
30949
30959
|
"returnType": "void",
|
|
30950
30960
|
"typeParameters": [],
|
|
30951
|
-
"line":
|
|
30961
|
+
"line": 494,
|
|
30952
30962
|
"deprecated": false,
|
|
30953
30963
|
"deprecationMessage": "",
|
|
30954
30964
|
"rawdescription": "\n\nInitializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n",
|
|
@@ -30967,7 +30977,7 @@
|
|
|
30967
30977
|
"optional": false,
|
|
30968
30978
|
"returnType": "void",
|
|
30969
30979
|
"typeParameters": [],
|
|
30970
|
-
"line":
|
|
30980
|
+
"line": 520,
|
|
30971
30981
|
"deprecated": false,
|
|
30972
30982
|
"deprecationMessage": "",
|
|
30973
30983
|
"rawdescription": "\n\nManages the keyboard accessibility for navigation and selection within a `DropdownList`.\n",
|
|
@@ -30997,7 +31007,7 @@
|
|
|
30997
31007
|
"optional": false,
|
|
30998
31008
|
"returnType": "void",
|
|
30999
31009
|
"typeParameters": [],
|
|
31000
|
-
"line":
|
|
31010
|
+
"line": 578,
|
|
31001
31011
|
"deprecated": false,
|
|
31002
31012
|
"deprecationMessage": "",
|
|
31003
31013
|
"jsdoctags": [
|
|
@@ -31025,7 +31035,7 @@
|
|
|
31025
31035
|
"optional": false,
|
|
31026
31036
|
"returnType": "void",
|
|
31027
31037
|
"typeParameters": [],
|
|
31028
|
-
"line":
|
|
31038
|
+
"line": 572,
|
|
31029
31039
|
"deprecated": false,
|
|
31030
31040
|
"deprecationMessage": "",
|
|
31031
31041
|
"jsdoctags": [
|
|
@@ -31054,7 +31064,7 @@
|
|
|
31054
31064
|
"optional": false,
|
|
31055
31065
|
"returnType": "void",
|
|
31056
31066
|
"typeParameters": [],
|
|
31057
|
-
"line":
|
|
31067
|
+
"line": 597,
|
|
31058
31068
|
"deprecated": false,
|
|
31059
31069
|
"deprecationMessage": "",
|
|
31060
31070
|
"rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n",
|
|
@@ -31085,7 +31095,7 @@
|
|
|
31085
31095
|
"optional": false,
|
|
31086
31096
|
"returnType": "void",
|
|
31087
31097
|
"typeParameters": [],
|
|
31088
|
-
"line":
|
|
31098
|
+
"line": 443,
|
|
31089
31099
|
"deprecated": false,
|
|
31090
31100
|
"deprecationMessage": "",
|
|
31091
31101
|
"rawdescription": "\n\nTransforms array input list of items to the correct state by updating the selected item(s).\n",
|
|
@@ -31116,7 +31126,7 @@
|
|
|
31116
31126
|
"optional": false,
|
|
31117
31127
|
"returnType": "void",
|
|
31118
31128
|
"typeParameters": [],
|
|
31119
|
-
"line":
|
|
31129
|
+
"line": 602,
|
|
31120
31130
|
"deprecated": false,
|
|
31121
31131
|
"deprecationMessage": "",
|
|
31122
31132
|
"jsdoctags": [
|
|
@@ -31138,7 +31148,7 @@
|
|
|
31138
31148
|
"optional": false,
|
|
31139
31149
|
"returnType": "void",
|
|
31140
31150
|
"typeParameters": [],
|
|
31141
|
-
"line":
|
|
31151
|
+
"line": 303,
|
|
31142
31152
|
"deprecated": false,
|
|
31143
31153
|
"deprecationMessage": "",
|
|
31144
31154
|
"rawdescription": "\n\nInitializes (or re-initializes) the Observable that handles switching focus to an element based on\nkey input matching the first letter of the item in the list.\n",
|
|
@@ -31150,7 +31160,7 @@
|
|
|
31150
31160
|
"optional": false,
|
|
31151
31161
|
"returnType": "void",
|
|
31152
31162
|
"typeParameters": [],
|
|
31153
|
-
"line":
|
|
31163
|
+
"line": 505,
|
|
31154
31164
|
"deprecated": false,
|
|
31155
31165
|
"deprecationMessage": ""
|
|
31156
31166
|
},
|
|
@@ -31167,7 +31177,7 @@
|
|
|
31167
31177
|
"optional": false,
|
|
31168
31178
|
"returnType": "void",
|
|
31169
31179
|
"typeParameters": [],
|
|
31170
|
-
"line":
|
|
31180
|
+
"line": 273,
|
|
31171
31181
|
"deprecated": false,
|
|
31172
31182
|
"deprecationMessage": "",
|
|
31173
31183
|
"rawdescription": "\n\nUpdates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n",
|
|
@@ -31194,7 +31204,7 @@
|
|
|
31194
31204
|
"description": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-dropdown-list [items]="listItems"></cds-dropdown-list></code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">listItems = [\n {\n content: "item one",\n selected: false\n },\n {\n content: "item two",\n selected: false,\n },\n {\n content: "item three",\n selected: false\n },\n {\n content: "item four",\n selected: false\n }\n];</code></pre></div>",
|
|
31195
31205
|
"rawdescription": "\n\n```html\n<cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n```\n```typescript\nlistItems = [\n\t{\n\t\tcontent: \"item one\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item two\",\n\t\tselected: false,\n\t},\n\t{\n\t\tcontent: \"item three\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item four\",\n\t\tselected: false\n\t}\n];\n```\n",
|
|
31196
31206
|
"type": "component",
|
|
31197
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\tconst selectedNewItems = [];\n\t\t\tfor (let newItem of value) {\n\t\t\t\tif (newItem && newItem.selected) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare later\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// add to the list of selected items\n\t\t\t\t\tselectedNewItems.push(tempNewItem);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// fast path when no items are selected\n\t\t\t\tif (selectedNewItems.length === 0) {\n\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let selectedNewItem of selectedNewItems) {\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(selectedNewItem)) {\n\t\t\t\t\t\toldItem.selected = true;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.index < 0 && this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
|
|
31207
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.tabindex]=\"highlightedItem === getItemId(i) ? 0 : null\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\tconst selectedNewItems = [];\n\t\t\tfor (let newItem of value) {\n\t\t\t\tif (newItem && newItem.selected) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare later\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// add to the list of selected items\n\t\t\t\t\tselectedNewItems.push(tempNewItem);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// fast path when no items are selected\n\t\t\t\tif (selectedNewItems.length === 0) {\n\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let selectedNewItem of selectedNewItems) {\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(selectedNewItem)) {\n\t\t\t\t\t\toldItem.selected = true;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.index < 0 && this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
|
|
31198
31208
|
"assetsDirs": [],
|
|
31199
31209
|
"styleUrlsData": "",
|
|
31200
31210
|
"stylesData": "",
|
|
@@ -31223,7 +31233,7 @@
|
|
|
31223
31233
|
"deprecationMessage": ""
|
|
31224
31234
|
}
|
|
31225
31235
|
],
|
|
31226
|
-
"line":
|
|
31236
|
+
"line": 223,
|
|
31227
31237
|
"rawdescription": "\n\nCreates an instance of `DropdownList`.\n",
|
|
31228
31238
|
"jsdoctags": [
|
|
31229
31239
|
{
|
|
@@ -31278,7 +31288,7 @@
|
|
|
31278
31288
|
}
|
|
31279
31289
|
],
|
|
31280
31290
|
"returnType": "void",
|
|
31281
|
-
"line":
|
|
31291
|
+
"line": 125,
|
|
31282
31292
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
31283
31293
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
31284
31294
|
"jsdoctags": [
|
|
@@ -31297,7 +31307,7 @@
|
|
|
31297
31307
|
"name": "items",
|
|
31298
31308
|
"type": "",
|
|
31299
31309
|
"returnType": "Array | Observable",
|
|
31300
|
-
"line":
|
|
31310
|
+
"line": 144
|
|
31301
31311
|
}
|
|
31302
31312
|
}
|
|
31303
31313
|
}
|
|
@@ -39104,7 +39114,7 @@
|
|
|
39104
39114
|
},
|
|
39105
39115
|
{
|
|
39106
39116
|
"name": "Notification",
|
|
39107
|
-
"id": "component-Notification-
|
|
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
|
|
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>"error"</code>, <code>"info"</code>, <code>"info-square"</code>, <code>"warning"</code>, <code>"warning-alt"</code>, or <code>"success"</code></p>\n<p><code>message</code> is the message to display</p>\n",
|
|
39128
|
-
"line":
|
|
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":
|
|
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":
|
|
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.
|
|
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.
|
|
39297
|
-
"defaultValue": "
|
|
39316
|
+
"name": "attr.aria-labelledBy",
|
|
39317
|
+
"defaultValue": "this.notificationID",
|
|
39298
39318
|
"deprecated": false,
|
|
39299
39319
|
"deprecationMessage": "",
|
|
39300
|
-
"line":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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
|
|
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":
|
|
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":
|
|
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":
|
|
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>"error"</code>, <code>"info"</code>, <code>"info-square"</code>, <code>"warning"</code>, <code>"warning-alt"</code>, or <code>"success"</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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
90073
|
-
"coverageCount": "6/
|
|
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":
|
|
90181
|
-
"coverageCount": "5/
|
|
90200
|
+
"coveragePercent": 21,
|
|
90201
|
+
"coverageCount": "5/23",
|
|
90182
90202
|
"status": "low"
|
|
90183
90203
|
},
|
|
90184
90204
|
{
|