carbon-components-angular 5.24.4 → 5.24.6

package/docs/documentation.json

@@ -17978,7 +17978,7 @@
         },
         {
             "name": "ActionableNotification",
-            "id": "component-ActionableNotification-37c57c40e62996a822b61abcb6cf3be3b5bee007d67cb4d898d7ff3af0fcef52bdde368b722e8a213ffe7ccaef82eab2d44a1e4202dc7860ad15b96bd43dd15e",
+            "id": "component-ActionableNotification-57714382cfdef67a6be498b98366423e6cc43d51076620586300e8a374d103c10aa3214323b7015e2403c434cfd677f5e4de45bea20b25105eb746735eb45ebf",
             "file": "src/notification/actionable-notification.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -18287,7 +18287,7 @@
             "description": "<p>Actionable notification allows for interactive elements within a notification. There are two variants offered, inline &amp; toast.</p>\n<p><a href=\"../../?path=/story/components-notification--actionable-notification\">See demo</a></p>\n",
             "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",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -25402,7 +25402,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-7e4c1a72a9fa822b6861abe0954594560bce57db381b0bd399307492e598c4e6f563771a0e1910ee82fa02ed8ed66db666735f9615011822c18134fa60df5d60",
+            "id": "component-DatePicker-d295ff1ef16790bb751b53dd85141be6bf7ed89d4b550cc01bdaf6a34b65528f4f455d3912bb47f3eeaf2d39e24ac9814ea3a005fe4fca7ea284cf121a6c2ffe",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -25741,7 +25741,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "",
-                    "line": 399
+                    "line": 403
                 },
                 {
                     "name": "propagateChange",
@@ -25751,7 +25751,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 401
+                    "line": 405
                 },
                 {
                     "name": "rangeInput",
@@ -25779,7 +25779,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 348,
+                    "line": 352,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -25798,7 +25798,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 363,
+                    "line": 367,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -25824,7 +25824,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 429,
+                    "line": 433,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the range input\n",
@@ -25854,7 +25854,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 414,
+                    "line": 418,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the primary/single input\n",
@@ -25884,7 +25884,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 440,
+                    "line": 444,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles opening the calendar \"properly\" when the calendar icon is clicked.\n",
@@ -25914,7 +25914,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 391,
+                    "line": 395,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -25942,7 +25942,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 395,
+                    "line": 399,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -25970,7 +25970,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 387,
+                    "line": 391,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the DatePicker.\n\nex: `this.formGroup.get(\"myDatePicker\").disable();`\n\n",
@@ -25978,8 +25978,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10907,
-                                "end": 10917,
+                                "pos": 11063,
+                                "end": 11073,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -25990,8 +25990,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10901,
-                                "end": 10906,
+                                "pos": 11057,
+                                "end": 11062,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26015,7 +26015,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 371,
+                    "line": 375,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n",
@@ -26023,8 +26023,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10506,
-                                "end": 10511,
+                                "pos": 10662,
+                                "end": 10667,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26035,8 +26035,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10500,
-                                "end": 10505,
+                                "pos": 10656,
+                                "end": 10661,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26058,7 +26058,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 348
+                    "line": 352
                 },
                 {
                     "name": "focusout",
@@ -26066,7 +26066,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 363
+                    "line": 367
                 }
             ],
             "standalone": false,
@@ -26074,7 +26074,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language]\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language]\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\tif (this.range) {\n\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36664,7 +36664,7 @@
         },
         {
             "name": "Notification",
-            "id": "component-Notification-43d0959bf53fe78a06970fb1c691f737a852cee9fdd0b03b006bc999dd579efc831026d2c5c8c216eac65f14a2d94541c83cea04c1a03a18d38d8abf38ddc7e0",
+            "id": "component-Notification-954b6bd2010556ddca9849bd2d2c31fc4dae8f63a7b6d970ce5063dcea8f018a8b9a6592d6df4aa7a2a004174cac08bbc92389a288e88e002161b69f8c794101",
             "file": "src/notification/notification.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36954,7 +36954,7 @@
             "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",
             "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",
             "type": "component",
-            "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 { of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -54796,7 +54796,7 @@
         },
         {
             "name": "TableHead",
-            "id": "component-TableHead-b318eccec7b4d59677e1a70971195d9ea8f3236f4836e22e66d7d985b7bbdaeae9e0911cbfc5ede4237afec71e5b14bddf2a1b821b645cb1c2ce082b1be13b6c",
+            "id": "component-TableHead-2d68f7b9140d6b32f7f6cf1233835b396303e5a0283e237c8dc738c2262fafb8471a7499ed5c748c6c3b9942511775108a574ef38bbcb582b73fb3da583576b5",
             "file": "src/table/head/table-head.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -54808,7 +54808,7 @@
             "styles": [
                 "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t"
             ],
-            "template": "<ng-container *ngIf=\"model\">\n\t<tr>\n\t\t<th\n\t\t\tcdsTableHeadExpand\n\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\tscope=\"col\"\n\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t[id]=\"model.getId('expand')\">\n\t\t</th>\n\t\t<th\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\tstyle=\"width: 0;\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t</th>\n\t\t<th\n\t\t\tcdsTableHeadCheckbox\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t</th>\n\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t<th\n\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\tcdsTableHeadCell\n\t\t\t\tscope=\"col\"\n\t\t\t\t[class]=\"column.className\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t[column]=\"column\"\n\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t</th>\n\t\t</ng-container>\n\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\tscope=\"col\"\n\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t<!--\n\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t-->\n\t\t</th>\n\t</tr>\n</ng-container>\n<ng-content></ng-content>\n",
+            "template": "<ng-container *ngIf=\"model\">\n\t<tr>\n\t\t<th\n\t\t\tcdsTableHeadExpand\n\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\tscope=\"col\"\n\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t[id]=\"model.getId('expand')\">\n\t\t</th>\n\t\t<th\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t</th>\n\t\t<th\n\t\t\tcdsTableHeadCheckbox\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t</th>\n\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t<th\n\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\tcdsTableHeadCell\n\t\t\t\tscope=\"col\"\n\t\t\t\t[class]=\"column.className\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t[column]=\"column\"\n\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t</th>\n\t\t</ng-container>\n\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\tscope=\"col\"\n\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t<!--\n\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t-->\n\t\t</th>\n\t</tr>\n</ng-container>\n<ng-content></ng-content>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -54817,7 +54817,7 @@
                     "name": "checkboxHeaderLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 113,
+                    "line": 112,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -54826,7 +54826,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 96,
+                    "line": 95,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54834,7 +54834,7 @@
                     "name": "filterTitle",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 140,
+                    "line": 139,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -54842,7 +54842,7 @@
                     "name": "model",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 92,
+                    "line": 91,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -54851,7 +54851,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 100,
+                    "line": 99,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54860,7 +54860,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 98,
+                    "line": 97,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54869,7 +54869,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94,
+                    "line": 93,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54878,7 +54878,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 102,
+                    "line": 101,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54889,7 +54889,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n",
                     "description": "<p>Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.</p>\n",
-                    "line": 110,
+                    "line": 109,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -54897,7 +54897,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 130,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -54905,7 +54905,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 122,
+                    "line": 121,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -54914,7 +54914,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 104,
+                    "line": 103,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -54929,15 +54929,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 4048,
-                            "end": 4063,
+                            "pos": 4026,
+                            "end": 4041,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 4049,
-                                "end": 4054,
+                                "pos": 4027,
+                                "end": 4032,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54946,8 +54946,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 4055,
-                                "end": 4060,
+                                "pos": 4033,
+                                "end": 4038,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54958,7 +54958,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 163,
+                    "line": 162,
                     "type": "EventEmitter"
                 },
                 {
@@ -54970,15 +54970,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 3924,
-                            "end": 3939,
+                            "pos": 3902,
+                            "end": 3917,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 3925,
-                                "end": 3930,
+                                "pos": 3903,
+                                "end": 3908,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54987,8 +54987,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 3931,
-                                "end": 3936,
+                                "pos": 3909,
+                                "end": 3914,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54999,7 +54999,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 157,
+                    "line": 156,
                     "type": "EventEmitter"
                 },
                 {
@@ -55009,7 +55009,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an index of the column that wants to be sorted.\n",
                     "description": "<p>Emits an index of the column that wants to be sorted.</p>\n",
-                    "line": 151,
+                    "line": 150,
                     "type": "EventEmitter"
                 }
             ],
@@ -55022,7 +55022,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 165,
+                    "line": 164,
                     "modifierKind": [
                         123
                     ]
@@ -55035,7 +55035,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 188,
+                    "line": 187,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -55045,7 +55045,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 199,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -55055,7 +55055,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 195,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -55065,7 +55065,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 192,
+                    "line": 191,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -55075,7 +55075,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 180,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -55089,7 +55089,7 @@
             "description": "<p>A subcomponent that creates the thead of the table</p>\n<h2>Basic usage</h2>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;thead cdsTableHead [model]=&quot;model&quot;&gt;&lt;/thead&gt;</code></pre></div>",
             "rawdescription": "\n\nA subcomponent that creates the thead of the table\n\n## Basic usage\n\n```html\n\t<thead cdsTableHead [model]=\"model\"></thead>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t<thead cdsTableHead [model]=\"model\"></thead>\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tcdsTableHeadExpand\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t\t[id]=\"model.getId('expand')\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\tstyle=\"width: 0;\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tcdsTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t`]\n})\nexport class TableHead implements AfterViewInit {\n\t@Input() model: TableModel;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() enableSingleSelect = false;\n\n\t@Input() selectAllCheckboxSomeSelected = false;\n\n\t@Input() selectAllCheckbox = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() stickyHeader = false;\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input()\n\tset checkboxHeaderLabel(value: string | Observable<string>) {\n\t\tthis._checkboxHeaderLabel.override(value);\n\t}\n\n\tget checkboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.value;\n\t}\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable<string>) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<TableModel>();\n\n\tpublic scrollbarWidth = 0;\n\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.scrollbarWidth = getScrollbarWidth();\n\t\t});\n\t}\n\n\tonSelectAllCheckboxChange() {\n\t\tif (!this.selectAllCheckbox && !this.selectAllCheckboxSomeSelected) {\n\t\t\tthis.selectAll.emit(this.model);\n\t\t} else {\n\t\t\tthis.deselectAll.emit(this.model);\n\t\t}\n\t}\n\n\tgetCheckboxHeaderLabel(): Observable<string> {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetSortDescendingLabel(): Observable<string> {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\n\tgetSortAscendingLabel(): Observable<string> {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetFilterTitle(): Observable<string> {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t<thead cdsTableHead [model]=\"model\"></thead>\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tcdsTableHeadExpand\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t\t[id]=\"model.getId('expand')\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tcdsTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t`]\n})\nexport class TableHead implements AfterViewInit {\n\t@Input() model: TableModel;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() enableSingleSelect = false;\n\n\t@Input() selectAllCheckboxSomeSelected = false;\n\n\t@Input() selectAllCheckbox = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() stickyHeader = false;\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input()\n\tset checkboxHeaderLabel(value: string | Observable<string>) {\n\t\tthis._checkboxHeaderLabel.override(value);\n\t}\n\n\tget checkboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.value;\n\t}\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable<string>) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<TableModel>();\n\n\tpublic scrollbarWidth = 0;\n\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.scrollbarWidth = getScrollbarWidth();\n\t\t});\n\t}\n\n\tonSelectAllCheckboxChange() {\n\t\tif (!this.selectAllCheckbox && !this.selectAllCheckboxSomeSelected) {\n\t\t\tthis.selectAll.emit(this.model);\n\t\t} else {\n\t\t\tthis.deselectAll.emit(this.model);\n\t\t}\n\t}\n\n\tgetCheckboxHeaderLabel(): Observable<string> {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetSortDescendingLabel(): Observable<string> {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\n\tgetSortAscendingLabel(): Observable<string> {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetFilterTitle(): Observable<string> {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t\n",
@@ -55106,7 +55106,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 170,
+                "line": 169,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -55139,7 +55139,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 113,
+                        "line": 112,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55156,7 +55156,7 @@
                         "name": "checkboxHeaderLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 117
+                        "line": 116
                     }
                 },
                 "sortDescendingLabel": {
@@ -55175,7 +55175,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 122,
+                        "line": 121,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55192,7 +55192,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 126
+                        "line": 125
                     }
                 },
                 "sortAscendingLabel": {
@@ -55211,7 +55211,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 131,
+                        "line": 130,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55228,7 +55228,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 135
+                        "line": 134
                     }
                 },
                 "filterTitle": {
@@ -55247,7 +55247,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 140,
+                        "line": 139,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55264,7 +55264,7 @@
                         "name": "filterTitle",
                         "type": "",
                         "returnType": "",
-                        "line": 144
+                        "line": 143
                     }
                 }
             }
@@ -56020,7 +56020,7 @@
         },
         {
             "name": "TableRadio",
-            "id": "component-TableRadio-59a741fdc07d9c2cd4f74121d4378a59fc923e4ecd535ca8c171cf7491819ac51a64147873c83886b41d737075e00e27f03a809cc8630b27895ce3495ac12dfa",
+            "id": "component-TableRadio-3efc3af9bbed3a84b40694053282346adf91a4efa2ce1669f7f10a66099534fdcf49a3fd05e094ddced37922d206fa5c0b75f0503428860d737373f03eccd698",
             "file": "src/table/cell/table-radio.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -56039,7 +56039,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 32,
+                    "line": 33,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56047,7 +56047,7 @@
                     "name": "row",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 27,
+                    "line": 28,
                     "type": "any[]",
                     "decorators": []
                 },
@@ -56056,7 +56056,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 29,
+                    "line": 30,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56066,7 +56066,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n<cds-table [selectionLabelColumn]=\"0\"></cds-table>\n<!-- results in aria-label=\"Select first column value\"\n(where \"first column value\" is the value of the first column in the row -->\n```\n",
                     "description": "<p>Used to populate the row selection checkbox label with a useful value if set.</p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">&lt;cds-table [selectionLabelColumn]=&quot;0&quot;&gt;&lt;/cds-table&gt;\n&lt;!-- results in aria-label=&quot;Select first column value&quot;\n(where &quot;first column value&quot; is the value of the first column in the row --&gt;</code></pre></div>",
-                    "line": 54,
+                    "line": 58,
                     "type": "number",
                     "decorators": []
                 },
@@ -56075,7 +56075,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 60,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -56088,11 +56088,50 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits if a single row is selected.\n",
                     "description": "<p>Emits if a single row is selected.</p>\n",
-                    "line": 61,
+                    "line": 65,
                     "type": "EventEmitter"
                 }
             ],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "radioColumn",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 45,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--table-column-radio'"
+                        }
+                    ],
+                    "modifierKind": [
+                        167
+                    ]
+                },
+                {
+                    "name": "selectableColumn",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 46,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--table-column-checkbox'"
+                        }
+                    ],
+                    "modifierKind": [
+                        167
+                    ]
+                }
+            ],
             "methodsClass": [
                 {
                     "name": "getLabel",
@@ -56100,7 +56139,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 74,
+                    "line": 78,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -56117,7 +56156,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 67,
+                    "line": 71,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -56135,14 +56174,33 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [],
+            "hostBindings": [
+                {
+                    "name": "class.cds--table-column-checkbox",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 46,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--table-column-radio",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 45,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRadio], [ibmTableRadio]\",\n\ttemplate: `\n\t\t<cds-radio\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[attr.aria-label]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t\t\t[ariaLabel]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t\t\t[checked]=\"selected\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"change.emit()\">\n\t\t</cds-radio>\n\t`\n})\nexport class TableRadio {\n\t@Input() row: any[];\n\n\t@Input() selected = false;\n\n\t@Input()\n\tset label(value: string | Observable<string>) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() change = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable<string> {\n\t\treturn this._label.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableRow } from \"../table-row.class\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableRadio], [ibmTableRadio]\",\n\ttemplate: `\n\t\t<cds-radio\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[attr.aria-label]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t\t\t[ariaLabel]=\"getLabel() | i18nReplace:getSelectionLabelValue(row) | async\"\n\t\t\t[checked]=\"selected\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"change.emit()\">\n\t\t</cds-radio>\n\t`\n})\nexport class TableRadio {\n\t@Input() row: any[];\n\n\t@Input() selected = false;\n\n\t@Input()\n\tset label(value: string | Observable<string>) {\n\t\tthis._label.override(value);\n\t}\n\n\tget label() {\n\t\treturn this._label.value;\n\t}\n\n\tget disabled(): boolean {\n\t\treturn this.row ? !!(this.row as TableRow).disabled : false;\n\t}\n\n\t@HostBinding(\"class.cds--table-column-radio\") radioColumn = true;\n\t@HostBinding(\"class.cds--table-column-checkbox\") selectableColumn = true;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * Emits if a single row is selected.\n\t */\n\t@Output() change = new EventEmitter();\n\n\tprotected _label = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetLabel(): Observable<string> {\n\t\treturn this._label.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -56159,7 +56217,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 63,
+                "line": 67,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -56189,7 +56247,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 32,
+                        "line": 33,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -56206,7 +56264,7 @@
                         "name": "label",
                         "type": "",
                         "returnType": "",
-                        "line": 36
+                        "line": 37
                     }
                 },
                 "disabled": {
@@ -56215,7 +56273,7 @@
                         "name": "disabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 40
+                        "line": 41
                     }
                 }
             }
@@ -61053,7 +61111,7 @@
         },
         {
             "name": "Toast",
-            "id": "component-Toast-e2338466c3fc6ba01ac5801d7a6340dbb0706e2ad3e6f7ee33b853586cab5a3764c69a455127ed683cdab0692bd21f791d99be477a692785c261edad9d52cd7e",
+            "id": "component-Toast-dbdb1ed91c8a893a349f8e2cdc59946fa62aed3a0bd25c0d6d8762afa82dfeb6866975150a36df3f9bdc941a2f88a8d84e25d5acd80cfab39604b35ba0431acc",
             "file": "src/notification/toast.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61063,7 +61121,7 @@
             "selector": "cds-toast, ibm-toast",
             "styleUrls": [],
             "styles": [],
-            "template": "<svg\n\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\tsize=\"20\"\n\t*ngIf=\"notificationObj.type\"\n\tclass=\"cds--toast-notification__icon\">\n</svg>\n<div class=\"cds--toast-notification__details\">\n\t<h3 *ngIf=\"!notificationObj.template\" cdsToastTitle [innerHTML]=\"notificationObj.title\"></h3>\n\t<div *ngIf=\"!notificationObj.template\" cdsToastSubtitle>\n\t\t<span [innerHTML]=\"notificationObj.subtitle\"></span>\n\t</div>\n\t<p *ngIf=\"!notificationObj.template\" cdsToastCaption [innerHTML]=\"notificationObj.caption\"></p>\n\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\tclass=\"cds--toast-notification__close-button\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel\"\n\t(click)=\"onClose()\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--toast-notification__close-icon\"></svg>\n</button>\n\t",
+            "template": "<svg\n\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\tsize=\"20\"\n\t*ngIf=\"notificationObj.type\"\n\tclass=\"cds--toast-notification__icon\">\n</svg>\n<div class=\"cds--toast-notification__details\">\n\t<h3 *ngIf=\"!notificationObj.template\" cdsToastTitle [innerHTML]=\"notificationObj.title\"></h3>\n\t<div *ngIf=\"!notificationObj.template\" cdsToastSubtitle>\n\t\t<span [innerHTML]=\"notificationObj.subtitle\"></span>\n\t</div>\n\t<p *ngIf=\"!notificationObj.template\" cdsToastCaption [innerHTML]=\"notificationObj.caption\"></p>\n\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\tclass=\"cds--toast-notification__close-button\"\n\ttype=\"button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t(click)=\"onClose()\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--toast-notification__close-icon\"></svg>\n</button>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -61074,7 +61132,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCan have `type`, `title`, `subtitle`, and `caption` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n",
                     "description": "<p>Can have <code>type</code>, <code>title</code>, <code>subtitle</code>, and <code>caption</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n",
-                    "line": 52,
+                    "line": 53,
                     "type": "ToastContent",
                     "decorators": []
                 }
@@ -61103,7 +61161,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 55,
+                    "line": 66,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -61122,7 +61180,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 54,
+                    "line": 65,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -61246,7 +61304,7 @@
                     "defaultValue": "`toast-${Toast.toastCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 65,
                     "type": "string",
                     "decorators": []
                 },
@@ -61255,7 +61313,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 55,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61263,7 +61321,7 @@
                     "name": "class.cds--toast-notification--error",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 67,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61271,7 +61329,7 @@
                     "name": "class.cds--toast-notification--hide-close-button",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 63,
+                    "line": 74,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61279,7 +61337,7 @@
                     "name": "class.cds--toast-notification--info",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 57,
+                    "line": 68,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61287,7 +61345,7 @@
                     "name": "class.cds--toast-notification--info-square",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 58,
+                    "line": 69,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61295,7 +61353,7 @@
                     "name": "class.cds--toast-notification--low-contrast",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 62,
+                    "line": 73,
                     "type": "any",
                     "decorators": []
                 },
@@ -61303,7 +61361,7 @@
                     "name": "class.cds--toast-notification--success",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 70,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61311,7 +61369,7 @@
                     "name": "class.cds--toast-notification--warning",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 60,
+                    "line": 71,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61319,7 +61377,7 @@
                     "name": "class.cds--toast-notification--warning-alt",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 61,
+                    "line": 72,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61343,7 +61401,7 @@
             "description": "<p>Toast 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--toast\">See demo</a></p>\n",
             "rawdescription": "\n\nToast messages are displayed toward the top of the UI and do not interrupt user’s work.\n\n[See demo](../../?path=/story/components-notification--toast)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { ToastContent } from \"./notification-content.interface\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Toast messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--toast)\n */\n@Component({\n\tselector: \"cds-toast, ibm-toast\",\n\ttemplate: `\n\t\t<svg\n\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\tsize=\"20\"\n\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\tclass=\"cds--toast-notification__icon\">\n\t\t</svg>\n\t\t<div class=\"cds--toast-notification__details\">\n\t\t\t<h3 *ngIf=\"!notificationObj.template\" cdsToastTitle [innerHTML]=\"notificationObj.title\"></h3>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsToastSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.subtitle\"></span>\n\t\t\t</div>\n\t\t\t<p *ngIf=\"!notificationObj.template\" cdsToastCaption [innerHTML]=\"notificationObj.caption\"></p>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\tclass=\"cds--toast-notification__close-button\"\n\t\t\ttype=\"button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel\"\n\t\t\t(click)=\"onClose()\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--toast-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Toast extends BaseNotification implements OnInit {\n\tprivate static toastCount = 0;\n\t/**\n\t * Can have `type`, `title`, `subtitle`, and `caption` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t */\n\t@Input() notificationObj: ToastContent;\n\n\t@HostBinding(\"attr.id\") toastID = `toast-${Toast.toastCount++}`;\n\t@HostBinding(\"class.cds--toast-notification\") toastClass = true;\n\t@HostBinding(\"class.cds--toast-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--toast-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--toast-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--toast-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--toast-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--toast-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--toast-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--toast-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\tngOnInit() {\n\t\tif (!this.notificationObj.closeLabel) {\n\t\t\tthis.notificationObj.closeLabel = this.i18n.get().NOTIFICATION.CLOSE_BUTTON;\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ToastContent } from \"./notification-content.interface\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Toast messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--toast)\n */\n@Component({\n\tselector: \"cds-toast, ibm-toast\",\n\ttemplate: `\n\t\t<svg\n\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\tsize=\"20\"\n\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\tclass=\"cds--toast-notification__icon\">\n\t\t</svg>\n\t\t<div class=\"cds--toast-notification__details\">\n\t\t\t<h3 *ngIf=\"!notificationObj.template\" cdsToastTitle [innerHTML]=\"notificationObj.title\"></h3>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsToastSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.subtitle\"></span>\n\t\t\t</div>\n\t\t\t<p *ngIf=\"!notificationObj.template\" cdsToastCaption [innerHTML]=\"notificationObj.caption\"></p>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\tclass=\"cds--toast-notification__close-button\"\n\t\t\ttype=\"button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\t(click)=\"onClose()\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--toast-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Toast extends BaseNotification implements OnInit {\n\tprivate static toastCount = 0;\n\t/**\n\t * Can have `type`, `title`, `subtitle`, and `caption` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t */\n\t@Input() set notificationObj(obj: ToastContent) {\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\tget notificationObj(): ToastContent {\n\t\treturn this._notificationObj as ToastContent;\n\t}\n\n\n\t@HostBinding(\"attr.id\") toastID = `toast-${Toast.toastCount++}`;\n\t@HostBinding(\"class.cds--toast-notification\") toastClass = true;\n\t@HostBinding(\"class.cds--toast-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--toast-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--toast-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--toast-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--toast-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--toast-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--toast-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--toast-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\tngOnInit() {\n\t\tif (!this.notificationObj.closeLabel) {\n\t\t\tthis.notificationObj.closeLabel = this.i18n.get().NOTIFICATION.CLOSE_BUTTON;\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61366,7 +61424,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 63,
+                "line": 74,
                 "jsdoctags": [
                     {
                         "name": "notificationDisplayService",
@@ -61393,13 +61451,51 @@
                 "OnInit"
             ],
             "accessors": {
+                "notificationObj": {
+                    "name": "notificationObj",
+                    "setSignature": {
+                        "name": "notificationObj",
+                        "type": "void",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "args": [
+                            {
+                                "name": "obj",
+                                "type": "ToastContent",
+                                "deprecated": false,
+                                "deprecationMessage": ""
+                            }
+                        ],
+                        "returnType": "void",
+                        "line": 53,
+                        "rawdescription": "\n\nCan have `type`, `title`, `subtitle`, and `caption` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n",
+                        "description": "<p>Can have <code>type</code>, <code>title</code>, <code>subtitle</code>, and <code>caption</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n",
+                        "jsdoctags": [
+                            {
+                                "name": "obj",
+                                "type": "ToastContent",
+                                "deprecated": false,
+                                "deprecationMessage": "",
+                                "tagName": {
+                                    "text": "param"
+                                }
+                            }
+                        ]
+                    },
+                    "getSignature": {
+                        "name": "notificationObj",
+                        "type": "",
+                        "returnType": "ToastContent",
+                        "line": 60
+                    }
+                },
                 "isError": {
                     "name": "isError",
                     "getSignature": {
                         "name": "isError",
                         "type": "",
                         "returnType": "",
-                        "line": 56
+                        "line": 67
                     }
                 },
                 "isInfo": {
@@ -61408,7 +61504,7 @@
                         "name": "isInfo",
                         "type": "",
                         "returnType": "",
-                        "line": 57
+                        "line": 68
                     }
                 },
                 "isInfoSquare": {
@@ -61417,7 +61513,7 @@
                         "name": "isInfoSquare",
                         "type": "",
                         "returnType": "",
-                        "line": 58
+                        "line": 69
                     }
                 },
                 "isSuccess": {
@@ -61426,7 +61522,7 @@
                         "name": "isSuccess",
                         "type": "",
                         "returnType": "",
-                        "line": 59
+                        "line": 70
                     }
                 },
                 "isWarning": {
@@ -61435,7 +61531,7 @@
                         "name": "isWarning",
                         "type": "",
                         "returnType": "",
-                        "line": 60
+                        "line": 71
                     }
                 },
                 "isWarningAlt": {
@@ -61444,7 +61540,7 @@
                         "name": "isWarningAlt",
                         "type": "",
                         "returnType": "",
-                        "line": 61
+                        "line": 72
                     }
                 },
                 "isLowContrast": {
@@ -61453,7 +61549,7 @@
                         "name": "isLowContrast",
                         "type": "",
                         "returnType": "",
-                        "line": 62
+                        "line": 73
                     }
                 },
                 "isCloseHidden": {
@@ -61462,7 +61558,7 @@
                         "name": "isCloseHidden",
                         "type": "",
                         "returnType": "",
-                        "line": 63
+                        "line": 74
                     }
                 }
             }
@@ -85325,8 +85421,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TableRadio",
-                "coveragePercent": 20,
-                "coverageCount": "2/10",
+                "coveragePercent": 14,
+                "coverageCount": "2/14",
                 "status": "low"
             },
             {