carbon-components-angular 5.40.0 → 5.40.2

package/docs/documentation.json

@@ -577,12 +577,12 @@
         },
         {
             "name": "EventOnNode",
-            "id": "interface-EventOnNode-d5f25891ddf25573626261f166c52167f7bcd1adcd406ea5d13eaa922adfde3d4f796e7fded71d3be912b33fda5176d2192000bedb21ce11a2871f5461f29de5",
+            "id": "interface-EventOnNode-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d",
             "file": "src/treeview/tree-node.types.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// selectable is only valid for nodes with children. If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n",
+            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// Selectable is only valid for nodes with children.\n\t// If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n",
             "properties": [
                 {
                     "name": "event",
@@ -591,7 +591,7 @@
                     "type": "Event",
                     "optional": false,
                     "description": "",
-                    "line": 23
+                    "line": 24
                 },
                 {
                     "name": "node",
@@ -600,7 +600,7 @@
                     "type": "Node",
                     "optional": false,
                     "description": "",
-                    "line": 22
+                    "line": 23
                 }
             ],
             "indexSignatures": [],
@@ -1110,12 +1110,12 @@
         },
         {
             "name": "Node",
-            "id": "interface-Node-d5f25891ddf25573626261f166c52167f7bcd1adcd406ea5d13eaa922adfde3d4f796e7fded71d3be912b33fda5176d2192000bedb21ce11a2871f5461f29de5",
+            "id": "interface-Node-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d",
             "file": "src/treeview/tree-node.types.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// selectable is only valid for nodes with children. If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n",
+            "sourceCode": "import { TemplateRef } from \"@angular/core\";\n\nexport interface Node {\n\tlabel: string | TemplateRef<any>;\n\tlabelContext?: any;\n\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\t// Selectable is only valid for nodes with children.\n\t// If true, the node won't become selected and if clicked it would only expand/compress itself\n\tselectable?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\n\ticonContext?: any;\n\tgap?: number;\n\tchildren?: Node[];\n\t[key: string]: any;\n}\n\nexport interface EventOnNode {\n\tnode: Node;\n\tevent: Event;\n}\n",
             "properties": [
                 {
                     "name": "active",
@@ -1133,7 +1133,7 @@
                     "type": "Node[]",
                     "optional": true,
                     "description": "",
-                    "line": 17
+                    "line": 18
                 },
                 {
                     "name": "disabled",
@@ -1151,7 +1151,7 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "",
-                    "line": 12
+                    "line": 13
                 },
                 {
                     "name": "gap",
@@ -1160,7 +1160,7 @@
                     "type": "number",
                     "optional": true,
                     "description": "",
-                    "line": 16
+                    "line": 17
                 },
                 {
                     "name": "icon",
@@ -1169,7 +1169,7 @@
                     "type": "string | TemplateRef<any>",
                     "optional": true,
                     "description": "",
-                    "line": 14
+                    "line": 15
                 },
                 {
                     "name": "iconContext",
@@ -1178,7 +1178,7 @@
                     "type": "any",
                     "optional": true,
                     "description": "",
-                    "line": 15
+                    "line": 16
                 },
                 {
                     "name": "id",
@@ -1214,7 +1214,7 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "",
-                    "line": 11
+                    "line": 12
                 },
                 {
                     "name": "selected",
@@ -1223,7 +1223,7 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "",
-                    "line": 13
+                    "line": 14
                 },
                 {
                     "name": "value",
@@ -1237,7 +1237,7 @@
             ],
             "indexSignatures": [
                 {
-                    "id": "index-declaration-d5f25891ddf25573626261f166c52167f7bcd1adcd406ea5d13eaa922adfde3d4f796e7fded71d3be912b33fda5176d2192000bedb21ce11a2871f5461f29de5",
+                    "id": "index-declaration-be3eae17d143a1c4f4f77c37a2ccd29b23c49139c15ebbe4b45a7cce0f6d0246c96c7082462e0fd64e0fd48fee5c428b973e04a3ce4a05d3c7ce5b56e718609d",
                     "args": [
                         {
                             "name": "key",
@@ -1247,7 +1247,7 @@
                         }
                     ],
                     "returnType": "any",
-                    "line": 17,
+                    "line": 18,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -26141,7 +26141,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-1f0b9e935ec897e4d099c9ca3d8fc393d0c402c52c032f9f96bd9f1b3252f3a61d5c50defda466e553041dd584c327b583c5fa50edf4dce0a34339dc4d9ce386",
+            "id": "component-DatePicker-1c8fbc0995cbbd6a94d00855b7555a2f327a0f38cc18fdad013b6a64e005d83e5baccd6126ff931487f4a26715f9de55d2d3d481680f0e7abea12884df50ad09",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -26450,7 +26450,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWe are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes\n",
                     "description": "<p>We are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes</p>\n",
-                    "line": 258,
+                    "line": 259,
                     "type": "EventEmitter<any>"
                 },
                 {
@@ -26458,7 +26458,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 252,
+                    "line": 253,
                     "type": "EventEmitter<any>"
                 }
             ],
@@ -26470,7 +26470,7 @@
                     "type": "DatePickerInput",
                     "optional": false,
                     "description": "",
-                    "line": 249,
+                    "line": 250,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -26489,7 +26489,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "",
-                    "line": 413
+                    "line": 414
                 },
                 {
                     "name": "propagateChange",
@@ -26499,7 +26499,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 415
+                    "line": 416
                 },
                 {
                     "name": "rangeInput",
@@ -26508,7 +26508,7 @@
                     "type": "DatePickerInput",
                     "optional": false,
                     "description": "",
-                    "line": 250,
+                    "line": 251,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -26527,7 +26527,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 362,
+                    "line": 363,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26546,7 +26546,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 378,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26572,7 +26572,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 443,
+                    "line": 444,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the range input\n",
@@ -26602,7 +26602,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 428,
+                    "line": 429,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the `valueChange` event from the primary/single input\n",
@@ -26632,7 +26632,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 454,
+                    "line": 455,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles opening the calendar \"properly\" when the calendar icon is clicked.\n",
@@ -26662,7 +26662,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 405,
+                    "line": 406,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -26690,7 +26690,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 409,
+                    "line": 410,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -26718,7 +26718,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 401,
+                    "line": 402,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the DatePicker.\n\nex: `this.formGroup.get(\"myDatePicker\").disable();`\n\n",
@@ -26726,8 +26726,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11430,
-                                "end": 11440,
+                                "pos": 11436,
+                                "end": 11446,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26738,8 +26738,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 11424,
-                                "end": 11429,
+                                "pos": 11430,
+                                "end": 11435,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26763,7 +26763,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 385,
+                    "line": 386,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n",
@@ -26771,8 +26771,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11029,
-                                "end": 11034,
+                                "pos": 11035,
+                                "end": 11040,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26783,8 +26783,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 11023,
-                                "end": 11028,
+                                "pos": 11029,
+                                "end": 11034,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -26806,7 +26806,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 362
+                    "line": 363
                 },
                 {
                     "name": "focusout",
@@ -26814,7 +26814,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 377
+                    "line": 378
                 }
             ],
             "standalone": false,
@@ -26822,7 +26822,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><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[readonly]=\"readonly\"\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[readonly]=\"readonly\"\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\n\t@Input() readonly = 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\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\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\t\"readonly\"\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\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\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.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\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\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\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[readonly]=\"readonly\"\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[readonly]=\"readonly\"\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\n\t@Input() readonly = 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\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\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\t\"readonly\"\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\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\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.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\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\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\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": "",
@@ -26845,7 +26845,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 297,
+                "line": 298,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -48017,7 +48017,7 @@
         },
         {
             "name": "Select",
-            "id": "component-Select-b56838c9a6ad3fa2101ba902a6132ed17f96dd38751fe11a6df0919b1a2fdc3c81b4c3ae5523df12ae3b7ba8a8bd0f4167d2454dac365196a6400973427bee2d",
+            "id": "component-Select-a8a6aae51793162f41b32c2eaf5df8d974b99126b971714fb6d30709bbc9b741e78d609f84b0a66faf6864d6e876999f10d0892e0b4c21ac628f16a6620511be",
             "file": "src/select/select.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48040,7 +48040,7 @@
                     "name": "ariaLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 199,
+                    "line": 210,
                     "type": "string",
                     "decorators": []
                 },
@@ -48051,7 +48051,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable component.\n",
                     "description": "<p>Set to true to disable component.</p>\n",
-                    "line": 180,
+                    "line": 191,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48062,7 +48062,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`inline` or `default` select displays\n",
                     "description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
-                    "line": 148,
+                    "line": 159,
                     "type": "\"inline\" | \"default\"",
                     "decorators": []
                 },
@@ -48072,7 +48072,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 156,
+                    "line": 167,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48083,7 +48083,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the unique ID. Defaults to `select-${total count of selects instantiated}`\n",
                     "description": "<p>Sets the unique ID. Defaults to <code>select-${total count of selects instantiated}</code></p>\n",
-                    "line": 172,
+                    "line": 183,
                     "type": "string",
                     "decorators": []
                 },
@@ -48094,7 +48094,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid select component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
-                    "line": 188,
+                    "line": 199,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48104,7 +48104,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 160,
+                    "line": 171,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48114,7 +48114,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the select. Appears above the input.\n",
                     "description": "<p>Label for the select. Appears above the input.</p>\n",
-                    "line": 152,
+                    "line": 163,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48125,7 +48125,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for readonly state.\n",
                     "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
-                    "line": 192,
+                    "line": 203,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48136,7 +48136,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 176,
+                    "line": 187,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -48147,7 +48147,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true for a loading select.\n",
                     "description": "<p>Set to true for a loading select.</p>\n",
-                    "line": 184,
+                    "line": 195,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48158,15 +48158,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` select theme",
                     "jsdoctags": [
                         {
-                            "pos": 5564,
-                            "end": 5657,
+                            "pos": 5728,
+                            "end": 5821,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 5565,
-                                "end": 5575,
+                                "pos": 5729,
+                                "end": 5739,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48176,7 +48176,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> select theme</p>\n"
                         }
                     ],
-                    "line": 198,
+                    "line": 209,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -48184,7 +48184,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 205,
+                    "line": 140,
                     "type": "any",
                     "decorators": []
                 },
@@ -48195,7 +48195,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 164,
+                    "line": 175,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48205,7 +48205,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 168,
+                    "line": 179,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -48216,7 +48216,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 201,
+                    "line": 212,
                     "type": "EventEmitter"
                 }
             ],
@@ -48228,7 +48228,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 203,
+                    "line": 214,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -48247,7 +48247,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
-                    "line": 143,
+                    "line": 154,
                     "rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
                     "modifierKind": [
                         126
@@ -48350,7 +48350,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 295,
+                    "line": 289,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48378,7 +48378,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 279,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48534,7 +48534,7 @@
             "description": "<p><code>cds-select</code> provides a styled <code>select</code> component. Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SelectModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-select [(ngModel)]=&quot;model&quot;&gt;\n    &lt;option value=&quot;default&quot; disabled selected hidden&gt;Choose an option&lt;/option&gt;\n    &lt;option value=&quot;option1&quot;&gt;Option 1&lt;/option&gt;\n    &lt;option value=&quot;option2&quot;&gt;Option 2&lt;/option&gt;\n    &lt;option value=&quot;option3&quot;&gt;Option 3&lt;/option&gt;\n&lt;/cds-select&gt;\n    ```\n\n[See demo](../../?path=/story/components-select--basic)</code></pre></div>",
             "rawdescription": "\n\n`cds-select` provides a styled `select` component. Get started with importing the module:\n\n```typescript\nimport { SelectModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-select [(ngModel)]=\"model\">\n\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t<option value=\"option1\">Option 1</option>\n\t<option value=\"option2\">Option 2</option>\n\t<option value=\"option3\">Option 3</option>\n</cds-select>\n\t```\n\n[See demo](../../?path=/story/components-select--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled,\n\t\t\t\t\t'cds--select--readonly': readonly\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\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\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(<HTMLElement>event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled,\n\t\t\t\t\t'cds--select--readonly': readonly\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\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\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(<HTMLElement>event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -48560,7 +48560,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 205,
+                        "line": 140,
                         "jsdoctags": [
                             {
                                 "name": "v",
@@ -48577,7 +48577,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 212
+                        "line": 147
                     }
                 }
             }
@@ -62336,7 +62336,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable component.\n",
                     "description": "<p>Set to true to disable component.</p>\n",
-                    "line": 180,
+                    "line": 191,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62350,7 +62350,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`inline` or `default` select displays\n",
                     "description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
-                    "line": 148,
+                    "line": 159,
                     "type": "\"inline\" | \"default\"",
                     "decorators": [],
                     "inheritance": {
@@ -62363,7 +62363,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 156,
+                    "line": 167,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62377,7 +62377,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid select component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
-                    "line": 188,
+                    "line": 199,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62390,7 +62390,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 160,
+                    "line": 171,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62404,7 +62404,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for readonly state.\n",
                     "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
-                    "line": 192,
+                    "line": 203,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62418,7 +62418,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 176,
+                    "line": 187,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": [],
                     "inheritance": {
@@ -62429,7 +62429,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 205,
+                    "line": 140,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -62443,7 +62443,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 164,
+                    "line": 175,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62456,7 +62456,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 168,
+                    "line": 179,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62470,7 +62470,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 201,
+                    "line": 212,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Select"
@@ -62542,7 +62542,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 203,
+                    "line": 214,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -62564,7 +62564,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
-                    "line": 143,
+                    "line": 154,
                     "rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
                     "modifierKind": [
                         126
@@ -62679,7 +62679,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 295,
+                    "line": 289,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -62710,7 +62710,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 279,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66844,7 +66844,7 @@
         },
         {
             "name": "TreeNodeComponent",
-            "id": "component-TreeNodeComponent-f247b34aeaf9e1819ad39b7c149f34a37c1903bf92d92b78c591683ab3bd10dc8316a5e65c1065c80159c2a8c7d1dbc1f4dfc896e0ca48b7bb530483e0e4e8c9",
+            "id": "component-TreeNodeComponent-638ba38397215c1dcb4a26f6383e09fdb8454ab897d7050e6f6bb6695e32ace672799c7d7979688922bb516b38ba39474baa39c40e120d9950c328be853f73bc",
             "file": "src/treeview/tree-node.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66854,7 +66854,7 @@
             "selector": "cds-tree-node",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template\n\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template\n\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(nodetoggle)=\"nodetoggle.emit($event)\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -66864,7 +66864,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 124,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66873,7 +66873,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 134,
+                    "line": 135,
                     "type": "Node[]",
                     "decorators": []
                 },
@@ -66884,7 +66884,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetermines the depth of the node\nCalculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n",
                     "description": "<p>Determines the depth of the node\nCalculated by default when passing <code>Node</code> array to <code>TreeViewComponent</code>, manual entry required otherwise</p>\n",
-                    "line": 140,
+                    "line": 141,
                     "type": "number",
                     "decorators": []
                 },
@@ -66893,7 +66893,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 124,
+                    "line": 125,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66902,7 +66902,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 126,
+                    "line": 127,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66911,7 +66911,7 @@
                     "defaultValue": "0",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 134,
                     "type": "number",
                     "decorators": []
                 },
@@ -66919,7 +66919,7 @@
                     "name": "icon",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 132,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66927,7 +66927,7 @@
                     "name": "iconContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 132,
+                    "line": 133,
                     "type": "any",
                     "decorators": []
                 },
@@ -66936,7 +66936,7 @@
                     "defaultValue": "`tree-node-${TreeNodeComponent.treeNodeCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 122,
+                    "line": 123,
                     "type": "string",
                     "decorators": []
                 },
@@ -66944,7 +66944,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 127,
+                    "line": 128,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66952,7 +66952,7 @@
                     "name": "labelContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 128,
+                    "line": 129,
                     "type": "any",
                     "decorators": []
                 },
@@ -66962,7 +66962,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                     "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
-                    "line": 146,
+                    "line": 147,
                     "type": "Node",
                     "decorators": []
                 },
@@ -66971,7 +66971,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 126,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66980,7 +66980,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 130,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66988,7 +66988,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "any",
                     "decorators": []
                 }
@@ -66999,7 +66999,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 170,
+                    "line": 171,
                     "type": "EventEmitter"
                 },
                 {
@@ -67007,7 +67007,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 169,
+                    "line": 170,
                     "type": "EventEmitter"
                 },
                 {
@@ -67015,7 +67015,7 @@
                     "defaultValue": "new EventEmitter<Node>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 171,
+                    "line": 172,
                     "type": "EventEmitter"
                 },
                 {
@@ -67023,7 +67023,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 172,
+                    "line": 173,
                     "type": "EventEmitter"
                 }
             ],
@@ -67035,7 +67035,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 174
+                    "line": 175
                 },
                 {
                     "name": "treeNodeCount",
@@ -67045,7 +67045,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 121,
+                    "line": 122,
                     "modifierKind": [
                         126
                     ]
@@ -67058,7 +67058,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 229,
+                    "line": 230,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculate the node offset\n",
@@ -67066,8 +67066,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 6459,
-                                "end": 6466,
+                                "pos": 6504,
+                                "end": 6511,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67091,7 +67091,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -67119,7 +67119,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 248,
+                    "line": 249,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -67140,7 +67140,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 301,
+                    "line": 302,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67160,7 +67160,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 297,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67191,7 +67191,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 274,
+                    "line": 275,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
@@ -67221,7 +67221,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 209,
+                    "line": 210,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
@@ -67229,8 +67229,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5942,
-                                "end": 5947,
+                                "pos": 5987,
+                                "end": 5992,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67241,8 +67241,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5936,
-                                "end": 5941,
+                                "pos": 5981,
+                                "end": 5986,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67266,7 +67266,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 262,
+                    "line": 263,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpand children if not disabled\n",
@@ -67274,8 +67274,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7199,
-                                "end": 7204,
+                                "pos": 7245,
+                                "end": 7250,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67286,8 +67286,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7193,
-                                "end": 7198,
+                                "pos": 7239,
+                                "end": 7244,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67308,7 +67308,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() selectable = true;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.selectable = node.selectable ?? this.selectable;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter<EventOnNode>();\n\t@Output() nodeBlur = new EventEmitter<EventOnNode>();\n\t@Output() nodeSelect = new EventEmitter<Node>();\n\t@Output() nodetoggle = new EventEmitter<EventOnNode>();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = this.selectable && value.has(this.id);\n\t\t\tthis.active = this.selectable && this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tevent.target.parentElement.focus();\n\t\t\tif (this.selectable || this.children.length === 0) {\n\t\t\t\tthis.selected = true;\n\t\t\t\tthis.active = true;\n\t\t\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\t\tthis.treeViewService.selectNode(node);\n\t\t\t\tthis.nodeSelect.emit(node);\n\t\t\t} else {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tconst node = { id: this.id, label: this.label, value: this.value }\n\t\tthis.nodeFocus.emit({ node, event });\n\t\tthis.treeViewService.focusNode(node);\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(nodetoggle)=\"nodetoggle.emit($event)\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() selectable = true;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.selectable = node.selectable ?? this.selectable;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter<EventOnNode>();\n\t@Output() nodeBlur = new EventEmitter<EventOnNode>();\n\t@Output() nodeSelect = new EventEmitter<Node>();\n\t@Output() nodetoggle = new EventEmitter<EventOnNode>();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = this.selectable && value.has(this.id);\n\t\t\tthis.active = this.selectable && this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tevent.target.parentElement.focus();\n\t\t\tif (this.selectable || this.children.length === 0) {\n\t\t\t\tthis.selected = true;\n\t\t\t\tthis.active = true;\n\t\t\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\t\tthis.treeViewService.selectNode(node);\n\t\t\t\tthis.nodeSelect.emit(node);\n\t\t\t} else {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\tthis.nodeFocus.emit({ node, event });\n\t\tthis.treeViewService.focusNode(node);\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -67325,7 +67325,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 176,
+                "line": 177,
                 "jsdoctags": [
                     {
                         "name": "treeViewService",
@@ -67361,7 +67361,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 146,
+                        "line": 147,
                         "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                         "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
                         "jsdoctags": [
@@ -67380,14 +67380,14 @@
                         "name": "node",
                         "type": "",
                         "returnType": "",
-                        "line": 165
+                        "line": 166
                     }
                 }
             }
         },
         {
             "name": "TreeViewComponent",
-            "id": "component-TreeViewComponent-8d954cb6125d3c443a8a0d822e524179d6899d027d418f2c998a9d5151c03cfca618ac1d653d283daf42525d08e48fc4cc682fe056958668b5582f63a2db14f6",
+            "id": "component-TreeViewComponent-c46a4f208404fb562f72ec62cd14af2cb442211349453ea8342a8d526266a076d3878479e62b616b220a8da2287e3d88dba5352d4772f4dec67a440abc5d338f",
             "file": "src/treeview/treeview.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -67642,8 +67642,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4441,
-                                "end": 4445,
+                                "pos": 4442,
+                                "end": 4446,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67654,8 +67654,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4435,
-                                "end": 4440,
+                                "pos": 4436,
+                                "end": 4441,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67721,7 +67721,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TreeviewModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tree-view--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TreeviewModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tree-view--basic)\n",
             "type": "component",
-            "sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\"\n\t\t\t\t\t(nodetoggle)=\"onNodeToggle($event)\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) => this.copyNode(node));\n\t\tthis.treeViewService.contentProjected = false;\n\t}\n\n\tget tree() {\n\t\treturn this._tree;\n\t}\n\n\tstatic treeViewCount = 0;\n\n\t@Input() id = `tree-view-${TreeViewComponent.treeViewCount++}`;\n\t/**\n\t * Tree view label\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional context for label if it's a template\n\t */\n\t@Input() labelContext: any;\n\t/**\n\t * Specify the size of the list items in the tree\n\t */\n\t@Input() size: \"xs\" | \"sm\" = \"sm\";\n\t/**\n\t * **Experimental** - Enable to select multiple nodes\n\t */\n\t@Input() set isMultiSelect(isMulti: boolean) {\n\t\tthis.treeViewService.isMultiSelect = isMulti;\n\t}\n\n\t@Output() select = new EventEmitter<Node | Node[]>();\n\t@Output() toggle = new EventEmitter<Node>();\n\t@ViewChild(\"treeWrapper\") root: ElementRef;\n\n\tprivate treeWalker: TreeWalker;\n\tprivate _tree: Node[] = [];\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tpublic treeViewService: TreeViewService,\n\t\tprivate elementRef: ElementRef\n\t) {}\n\n\t/**\n\t * Subscribe for node selection\n\t */\n\tngOnInit(): void {\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((nodesMap: Map<string, Node>) => {\n\t\t\t// Get all values from the map to emit\n\t\t\tconst nodes = [...nodesMap.values()];\n\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\n\t\tthis.subscription.add(this.treeViewService.focusNodeObservable.subscribe(node => this.onNodeFocusChange(node)));\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\t/**\n\t * Initialize tree walker to support keyboard navigation\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.treeWalker = this.document.createTreeWalker(this.root.nativeElement, NodeFilter.SHOW_ELEMENT, {\n\t\t\tacceptNode: function (node: HTMLElement) {\n\t\t\t\tif (node.classList.contains(`cds--tree-node--disabled`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t\t}\n\t\t\t\tif (node.matches(`div.cds--tree-node`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_SKIP;\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Navigate tree using tree walker\n\t * @param event - KeyboardEvent\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowUp\") {\n\t\t\t(this.treeWalker.previousNode() as HTMLElement)?.focus();\n\t\t}\n\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\t(this.treeWalker.nextNode() as HTMLElement)?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Propagate node toggle event\n\t * @param eventOnNode - EventOnNode\n\t */\n\tonNodeToggle(eventOnNode: EventOnNode) {\n\t\tif (!eventOnNode) {\n\t\t\treturn;\n\t\t}\n\t\tthis.toggle.emit(eventOnNode.node)\n\t}\n\n\t/**\n\t * Node focus change\n\t * @param node - Node\n\t */\n\tonNodeFocusChange(node: Node) {\n\t\tif (!node) {\n\t\t\t// if for some reason the focused node is not defined we fallback on the root element of the treeview\n\t\t\tthis.treeWalker.currentNode = this.treeWalker.root;\n\t\t\treturn;\n\t\t}\n\t\t// Update current node based on focus change to have a better keyboard navigation experience\n\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(node.id)}`);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n\n\tprivate copyNode(node: Node): Node {\n\t\t// making a recursive shallow copy to avoid performance issues when deeply cloning templateRefs if defined in the node\n\t\tconst copiedNode = Object.assign({}, node);\n\t\tif (node.children) {\n\t\t  copiedNode.children = node.children.map(child => this.copyNode(child));\n\t\t}\n\t\treturn copiedNode;\n\t}\n}\n",
+            "sourceCode": "import { DOCUMENT } from \"@angular/common\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tEventEmitter,\n\tAfterViewInit,\n\tInject,\n\tViewChild,\n\tElementRef,\n\tOnInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\nimport { TreeViewService } from \"./treeview.service\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TreeviewModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tree-view--basic)\n */\n@Component({\n\tselector: \"cds-tree-view\",\n\ttemplate: `\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--tree\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree--sm': size === 'sm',\n\t\t\t\t'cds--tree--xs': size === 'xs'\n\t\t\t}\"\n\t\t\t[attr.aria-label]=\"label ? label : null\"\n\t\t\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t\t\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\t\t\trole=\"tree\"\n\t\t\t(keydown)=\"navigateTree($event)\"\n\t\t\t#treeWrapper>\n\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-container>\n\t\t\t<ng-template #notProjected>\n\t\t\t\t<cds-tree-node\n\t\t\t\t\t*ngFor=\"let node of tree\"\n\t\t\t\t\t[node]=\"node\"\n\t\t\t\t\t(nodetoggle)=\"onNodeToggle($event)\">\n\t\t\t\t</cds-tree-node>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n\tproviders: [TreeViewService]\n})\nexport class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {\n\t/**\n\t * Pass `Node[]` array to have tree view render the nodes\n\t * Passing value will disregard projected content\n\t */\n\t@Input() set tree(treeNodes: Node[]) {\n\t\tthis._tree = treeNodes.map((node) => this.copyNode(node));\n\t\tthis.treeViewService.contentProjected = false;\n\t}\n\n\tget tree() {\n\t\treturn this._tree;\n\t}\n\n\tstatic treeViewCount = 0;\n\n\t@Input() id = `tree-view-${TreeViewComponent.treeViewCount++}`;\n\t/**\n\t * Tree view label\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional context for label if it's a template\n\t */\n\t@Input() labelContext: any;\n\t/**\n\t * Specify the size of the list items in the tree\n\t */\n\t@Input() size: \"xs\" | \"sm\" = \"sm\";\n\t/**\n\t * **Experimental** - Enable to select multiple nodes\n\t */\n\t@Input() set isMultiSelect(isMulti: boolean) {\n\t\tthis.treeViewService.isMultiSelect = isMulti;\n\t}\n\n\t@Output() select = new EventEmitter<Node | Node[]>();\n\t@Output() toggle = new EventEmitter<Node>();\n\t@ViewChild(\"treeWrapper\") root: ElementRef;\n\n\tprivate treeWalker: TreeWalker;\n\tprivate _tree: Node[] = [];\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tpublic treeViewService: TreeViewService,\n\t\tprivate elementRef: ElementRef\n\t) {}\n\n\t/**\n\t * Subscribe for node selection\n\t */\n\tngOnInit(): void {\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((nodesMap: Map<string, Node>) => {\n\t\t\t// Get all values from the map to emit\n\t\t\tconst nodes = [...nodesMap.values()];\n\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\n\t\tthis.subscription.add(this.treeViewService.focusNodeObservable.subscribe(node => this.onNodeFocusChange(node)));\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\t/**\n\t * Initialize tree walker to support keyboard navigation\n\t */\n\tngAfterViewInit(): void {\n\t\tthis.treeWalker = this.document.createTreeWalker(this.root.nativeElement, NodeFilter.SHOW_ELEMENT, {\n\t\t\tacceptNode: function (node: HTMLElement) {\n\t\t\t\tif (node.classList.contains(`cds--tree-node--disabled`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_REJECT;\n\t\t\t\t}\n\t\t\t\tif (node.matches(`div.cds--tree-node`)) {\n\t\t\t\t\treturn NodeFilter.FILTER_ACCEPT;\n\t\t\t\t}\n\t\t\t\treturn NodeFilter.FILTER_SKIP;\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Navigate tree using tree walker\n\t * @param event - KeyboardEvent\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowUp\") {\n\t\t\t(this.treeWalker.previousNode() as HTMLElement)?.focus();\n\t\t}\n\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\t(this.treeWalker.nextNode() as HTMLElement)?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Propagate node toggle event\n\t * @param eventOnNode - EventOnNode\n\t */\n\tonNodeToggle(eventOnNode: EventOnNode) {\n\t\tif (!eventOnNode) {\n\t\t\treturn;\n\t\t}\n\t\tthis.toggle.emit(eventOnNode.node);\n\t}\n\n\t/**\n\t * Node focus change\n\t * @param node - Node\n\t */\n\tonNodeFocusChange(node: Node) {\n\t\tif (!node) {\n\t\t\t// if for some reason the focused node is not defined we fallback on the root element of the treeview\n\t\t\tthis.treeWalker.currentNode = this.treeWalker.root;\n\t\t\treturn;\n\t\t}\n\t\t// Update current node based on focus change to have a better keyboard navigation experience\n\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(node.id)}`);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n\n\tprivate copyNode(node: Node): Node {\n\t\t// making a recursive shallow copy to avoid performance issues when deeply cloning templateRefs if defined in the node\n\t\tconst copiedNode = Object.assign({}, node);\n\t\tif (node.children) {\n\t\t\tcopiedNode.children = node.children.map(child => this.copyNode(child));\n\t\t}\n\t\treturn copiedNode;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",