npm - carbon-components-angular - Versions diffs - 5.38.2 → 5.39.0 - Mend

carbon-components-angular 5.38.2 → 5.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/docs/documentation.json CHANGED Viewed

@@ -1077,12 +1077,12 @@
         },
         {
             "name": "Node",
-            "id": "interface-Node-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
+            "id": "interface-Node-51b8acc2d3c8e33ebce66dda0f8fa6da57a1762dd8e484223d38bf26dd6fa8bbb350d4a9f39c0441d2eb94c70dae1a6bd398ada4f8200c436d4c3f8ab708e161",
             "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\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",
+            "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",
             "properties": [
                 {
                     "name": "active",
@@ -1100,7 +1100,7 @@
                     "type": "Node[]",
                     "optional": true,
                     "description": "",
-                    "line": 15
+                    "line": 17
                 },
                 {
                     "name": "disabled",
@@ -1118,7 +1118,7 @@
                     "type": "boolean",
                     "optional": true,
                     "description": "",
-                    "line": 10
+                    "line": 12
                 },
                 {
                     "name": "gap",
@@ -1127,7 +1127,7 @@
                     "type": "number",
                     "optional": true,
                     "description": "",
-                    "line": 14
+                    "line": 16
                 },
                 {
                     "name": "icon",
@@ -1136,7 +1136,7 @@
                     "type": "string | TemplateRef<any>",
                     "optional": true,
                     "description": "",
-                    "line": 12
+                    "line": 14
                 },
                 {
                     "name": "iconContext",
@@ -1145,7 +1145,7 @@
                     "type": "any",
                     "optional": true,
                     "description": "",
-                    "line": 13
+                    "line": 15
                 },
                 {
                     "name": "id",
@@ -1175,7 +1175,7 @@
                     "line": 5
                 },
                 {
-                    "name": "selected",
+                    "name": "selectable",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "boolean",
@@ -1183,6 +1183,15 @@
                     "description": "",
                     "line": 11
                 },
+                {
+                    "name": "selected",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "optional": true,
+                    "description": "",
+                    "line": 13
+                },
                 {
                     "name": "value",
                     "deprecated": false,
@@ -1195,7 +1204,7 @@
             ],
             "indexSignatures": [
                 {
-                    "id": "index-declaration-edec89fb3656ba70a0f7f007520c3f4a9501f4fd644b7c925dc041a592cabb45e60b40806aa86c48628a87daac9b0bafca5decb6647aca2cbb534f57f10885b9",
+                    "id": "index-declaration-51b8acc2d3c8e33ebce66dda0f8fa6da57a1762dd8e484223d38bf26dd6fa8bbb350d4a9f39c0441d2eb94c70dae1a6bd398ada4f8200c436d4c3f8ab708e161",
                     "args": [
                         {
                             "name": "key",
@@ -1205,7 +1214,7 @@
                         }
                     ],
                     "returnType": "any",
-                    "line": 15,
+                    "line": 17,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -5025,7 +5034,7 @@
         },
         {
             "name": "TreeViewService",
-            "id": "injectable-TreeViewService-e73e890807e66c62beb16a847a3f21c04640e388a5413f6454b823e813272c209fb8059d38e3cde06e45cfa73dfccf731050f315f211f8a656be2a70ed086434",
+            "id": "injectable-TreeViewService-7961c67119d92e5f11bd7238d28b1fe821afd43edcdafc1beabc0d3aa7929db2fc6618b13241a9898ba687859d101443a8e961ab46561220e82bb5162902fbf1",
             "file": "src/treeview/treeview.service.ts",
             "properties": [
                 {
@@ -5036,9 +5045,18 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Variable used across all nodes and wrapper to determine if we should allow content projection\nor generate the tree</p>\n<p>Value is updated by passing a value to <code>tree</code> input in wrapper component.</p>\n",
-                    "line": 14,
+                    "line": 15,
                     "rawdescription": "\n\nVariable used across all nodes and wrapper to determine if we should allow content projection\nor generate the tree\n\nValue is updated by passing a value to `tree` input in wrapper component.\n"
                 },
+                {
+                    "name": "focusNodeObservable",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Observable<Node>",
+                    "optional": false,
+                    "description": "",
+                    "line": 8
+                },
                 {
                     "name": "isMultiSelect",
                     "defaultValue": "false",
@@ -5047,7 +5065,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p><strong>Experimental</strong></p>\n",
-                    "line": 18,
+                    "line": 19,
                     "rawdescription": "\n\n**Experimental**\n"
                 },
                 {
@@ -5067,7 +5085,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 64,
+                    "line": 75,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRemoves all selected nodes from the map\n",
@@ -5086,7 +5104,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 52,
+                    "line": 63,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRemoves selected node from the map\n",
@@ -5094,8 +5112,53 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 1148,
-                                "end": 1152,
+                                "pos": 1435,
+                                "end": 1439,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "node"
+                            },
+                            "type": "Node",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 1429,
+                                "end": 1434,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": "<p>: Node</p>\n"
+                        }
+                    ]
+                },
+                {
+                    "name": "focusNode",
+                    "args": [
+                        {
+                            "name": "node",
+                            "type": "Node",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 38,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nEmits the focused node\n",
+                    "description": "<p>Emits the focused node</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 983,
+                                "end": 987,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -5106,8 +5169,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 1142,
-                                "end": 1147,
+                                "pos": 977,
+                                "end": 982,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -5131,7 +5194,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 35,
+                    "line": 46,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nStore selected node in map\n",
@@ -5139,8 +5202,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 824,
-                                "end": 828,
+                                "pos": 1111,
+                                "end": 1115,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -5151,8 +5214,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 818,
-                                "end": 823,
+                                "pos": 1105,
+                                "end": 1110,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -5168,14 +5231,14 @@
             "deprecationMessage": "",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { Observable, ReplaySubject } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\n\n@Injectable()\nexport class TreeViewService {\n\tselectionObservable: Observable<any | any[]>;\n\t/**\n\t * Variable used across all nodes and wrapper to determine if we should allow content projection\n\t * or generate the tree\n\t *\n\t * Value is updated by passing a value to `tree` input in wrapper component.\n\t */\n\tcontentProjected = true;\n\t/**\n\t * **Experimental**\n\t */\n\tisMultiSelect = false;\n\n\tprivate selectionSubject = new ReplaySubject<Map<string, Node>>(1);\n\n\t/**\n\t * Hold's list of selected nodes and preserves order\n\t */\n\tprivate value = new Map();\n\n\tconstructor() {\n\t\tthis.selectionObservable = this.selectionSubject.asObservable();\n\t}\n\n\t/**\n\t * Store selected node in map\n\t * @param node: Node\n\t */\n\tselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Since multiselect is not enabled, we clear existing map\n\t\tif (!this.isMultiSelect) {\n\t\t\tthis.value.clear();\n\t\t}\n\t\tthis.value.set(node.id, node);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes selected node from the map\n\t * @param node: Node\n\t */\n\tdeselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value.delete(node.id);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes all selected nodes from the map\n\t */\n\tdeselectAllNodes() {\n\t\tthis.value.clear();\n\t\tthis.selectionSubject.next(this.value);\n\t}\n}\n",
+            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport { Observable, ReplaySubject } from \"rxjs\";\nimport { Node } from \"./tree-node.types\";\n\n@Injectable()\nexport class TreeViewService {\n\tselectionObservable: Observable<any | any[]>;\n\tfocusNodeObservable: Observable<Node>;\n\t/**\n\t * Variable used across all nodes and wrapper to determine if we should allow content projection\n\t * or generate the tree\n\t *\n\t * Value is updated by passing a value to `tree` input in wrapper component.\n\t */\n\tcontentProjected = true;\n\t/**\n\t * **Experimental**\n\t */\n\tisMultiSelect = false;\n\n\tprivate selectionSubject = new ReplaySubject<Map<string, Node>>(1);\n\tprivate focusNodeSubject = new ReplaySubject<Node>(1);\n\n\t/**\n\t * Hold's list of selected nodes and preserves order\n\t */\n\tprivate value = new Map();\n\n\tconstructor() {\n\t\tthis.selectionObservable = this.selectionSubject.asObservable();\n\t\tthis.focusNodeObservable = this.focusNodeSubject.asObservable();\n\t}\n\n\t/**\n\t * Emits the focused node\n\t * @param node: Node\n\t */\n\tfocusNode(node: Node) {\n\t\tthis.focusNodeSubject.next(node);\n\t}\n\n\t/**\n\t * Store selected node in map\n\t * @param node: Node\n\t */\n\tselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Since multiselect is not enabled, we clear existing map\n\t\tif (!this.isMultiSelect) {\n\t\t\tthis.value.clear();\n\t\t}\n\t\tthis.value.set(node.id, node);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes selected node from the map\n\t * @param node: Node\n\t */\n\tdeselectNode(node: Node) {\n\t\tif (!node) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value.delete(node.id);\n\t\tthis.selectionSubject.next(this.value);\n\t}\n\n\t/**\n\t * Removes all selected nodes from the map\n\t */\n\tdeselectAllNodes() {\n\t\tthis.value.clear();\n\t\tthis.selectionSubject.next(this.value);\n\t}\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 25
+                "line": 27
             },
             "extends": [],
             "type": "injectable"
@@ -60691,7 +60754,7 @@
         },
         {
             "name": "TextareaLabelComponent",
-            "id": "component-TextareaLabelComponent-6a8135bd9830b5713906212dd6f7f0476ce7154d8f3dca437e8855afdc6aca7ebb16a98721cfbabf36201b5090f894a9c50f65bcba6f201d8b1abb441b0e8273",
+            "id": "component-TextareaLabelComponent-c0f9e14c995584d15db3016e5bfc6210d288aaca3f1605f84bf42a810b086820ac0ee36da71a46fc8e7a77aef9967a8b32ed98e8b5d05a08dad880d84993923b",
             "file": "src/input/textarea-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -60906,7 +60969,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 180,
+                    "line": 184,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -60936,6 +60999,14 @@
                     "line": 145,
                     "type": "boolean",
                     "decorators": []
+                },
+                {
+                    "name": "class.cds--text-area__wrapper--readonly",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 147,
+                    "type": "any",
+                    "decorators": []
                 }
             ],
             "hostListeners": [],
@@ -60944,7 +61015,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-textarea-label&gt;\n    Label\n    &lt;textarea cdsTextArea class=&quot;textarea-field&quot;&gt;\n&lt;/cds-textarea-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input-text-area--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-textarea-label>\n\tLabel\n\t<textarea cdsTextArea class=\"textarea-field\">\n</cds-textarea-label>\n```\n\n[See demo](../../?path=/story/components-input-text-area--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-textarea-label>\n * \tLabel\n * \t<textarea cdsTextArea class=\"textarea-field\">\n * </cds-textarea-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input-text-area--basic)\n */\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-area__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"[cdsTextArea],[ibmTextArea],textarea\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextareaLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-textarea-\" + TextareaLabelComponent.labelCounter;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textAreaTemplate: 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` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-textarea-label>\n * \tLabel\n * \t<textarea cdsTextArea class=\"textarea-field\">\n * </cds-textarea-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input-text-area--basic)\n */\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-area__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"[cdsTextArea],[ibmTextArea],textarea\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextareaLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-textarea-\" + TextareaLabelComponent.labelCounter;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textAreaTemplate: 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` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-area__wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"textarea\")?.readOnly ?? false;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -60961,7 +61032,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 145,
+                "line": 149,
                 "rawdescription": "\n\nCreates an instance of Label.\n",
                 "jsdoctags": [
                     {
@@ -60978,7 +61049,18 @@
             "extends": [],
             "implements": [
                 "AfterViewInit"
-            ]
+            ],
+            "accessors": {
+                "isReadonly": {
+                    "name": "isReadonly",
+                    "getSignature": {
+                        "name": "isReadonly",
+                        "type": "",
+                        "returnType": "",
+                        "line": 147
+                    }
+                }
+            }
         },
         {
             "name": "TextInputLabelComponent",
@@ -66729,7 +66811,7 @@
         },
         {
             "name": "TreeNodeComponent",
-            "id": "component-TreeNodeComponent-c92ddc59f0218683e4fcc77e08c4981a5bc88974f90c94b24cb01d09b757cd6c980a04425f538445af59ba71061124b7ae89a54f150ba0dc68e78310c61879ce",
+            "id": "component-TreeNodeComponent-2839c6326e93c041059cc55f01d9dbea744ce9cfc33b045018560b7e23dfb92d5e948be6b4e3e112b2e3cf6b9a5c1f1172918ec34b61553ca8c0795840f58d5e",
             "file": "src/treeview/tree-node.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66758,7 +66840,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 134,
                     "type": "Node[]",
                     "decorators": []
                 },
@@ -66769,7 +66851,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": 139,
+                    "line": 140,
                     "type": "number",
                     "decorators": []
                 },
@@ -66787,7 +66869,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 126,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66796,7 +66878,7 @@
                     "defaultValue": "0",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 132,
+                    "line": 133,
                     "type": "number",
                     "decorators": []
                 },
@@ -66804,7 +66886,7 @@
                     "name": "icon",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66812,7 +66894,7 @@
                     "name": "iconContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 132,
                     "type": "any",
                     "decorators": []
                 },
@@ -66829,7 +66911,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 126,
+                    "line": 127,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66837,7 +66919,7 @@
                     "name": "labelContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 127,
+                    "line": 128,
                     "type": "any",
                     "decorators": []
                 },
@@ -66847,16 +66929,25 @@
                     "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": 145,
+                    "line": 146,
                     "type": "Node",
                     "decorators": []
                 },
+                {
+                    "name": "selectable",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 125,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "selected",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 128,
+                    "line": 129,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66864,7 +66955,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 130,
                     "type": "any",
                     "decorators": []
                 }
@@ -66875,7 +66966,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 168,
+                    "line": 170,
                     "type": "EventEmitter"
                 },
                 {
@@ -66883,7 +66974,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 167,
+                    "line": 169,
                     "type": "EventEmitter"
                 },
                 {
@@ -66891,7 +66982,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 169,
+                    "line": 171,
                     "type": "EventEmitter"
                 },
                 {
@@ -66899,7 +66990,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 170,
+                    "line": 172,
                     "type": "EventEmitter"
                 }
             ],
@@ -66911,7 +67002,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 172
+                    "line": 174
                 },
                 {
                     "name": "treeNodeCount",
@@ -66934,7 +67025,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 221,
+                    "line": 227,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculate the node offset\n",
@@ -66942,8 +67033,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 6114,
-                                "end": 6121,
+                                "pos": 6346,
+                                "end": 6353,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66967,7 +67058,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 244,
+                    "line": 252,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66995,7 +67086,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 240,
+                    "line": 246,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -67016,7 +67107,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 299,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67036,7 +67127,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 287,
+                    "line": 295,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67067,7 +67158,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 264,
+                    "line": 272,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
@@ -67097,7 +67188,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 207,
+                    "line": 209,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
@@ -67105,8 +67196,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5761,
-                                "end": 5766,
+                                "pos": 5884,
+                                "end": 5889,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67117,8 +67208,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5755,
-                                "end": 5760,
+                                "pos": 5878,
+                                "end": 5883,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67142,7 +67233,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 252,
+                    "line": 260,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpand children if not disabled\n",
@@ -67150,8 +67241,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6800,
-                                "end": 6805,
+                                "pos": 7086,
+                                "end": 7091,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67162,8 +67253,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6794,
-                                "end": 6799,
+                                "pos": 7080,
+                                "end": 7085,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67184,7 +67275,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 { 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() 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.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();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\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 = value.has(this.id);\n\t\t\tthis.active = 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\tthis.selected = true;\n\t\t\tthis.active = true;\n\t\t\tevent.target.parentElement.focus();\n\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\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\tthis.nodeFocus.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\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 { 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();\n\t@Output() nodeBlur = new EventEmitter();\n\t@Output() nodeSelect = new EventEmitter();\n\t@Output() nodetoggle = new EventEmitter();\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\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\t\tthis.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });\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": "",
@@ -67201,7 +67292,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 174,
+                "line": 176,
                 "jsdoctags": [
                     {
                         "name": "treeViewService",
@@ -67237,7 +67328,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 145,
+                        "line": 146,
                         "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": [
@@ -67256,14 +67347,14 @@
                         "name": "node",
                         "type": "",
                         "returnType": "",
-                        "line": 163
+                        "line": 165
                     }
                 }
             }
         },
         {
             "name": "TreeViewComponent",
-            "id": "component-TreeViewComponent-9b6130f78321359e71f56d2044bb1ed7d588faff0561c87756d1f591288e94fb45666b6e97d4edf883c7f4984fba82bcb92d55a211c507f20e64b097f855b0cb",
+            "id": "component-TreeViewComponent-b9fa4fd0420b66db7ff8bbafc73d718c1e2dc9d7c43384452a4b85392d75a4bc927c1c16bf25e40d4d4e8b0f2728cafb9a93882ae9113be27180b8283e0b225e",
             "file": "src/treeview/treeview.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -67406,7 +67497,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 170,
+                    "line": 182,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67426,7 +67517,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 166,
+                    "line": 178,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67457,7 +67548,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 156,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNavigate tree using tree walker\n",
@@ -67465,8 +67556,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3986,
-                                "end": 3991,
+                                "pos": 3840,
+                                "end": 3845,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67477,8 +67568,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3980,
-                                "end": 3985,
+                                "pos": 3834,
+                                "end": 3839,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67488,6 +67579,51 @@
                             "comment": "<ul>\n<li>KeyboardEvent</li>\n</ul>\n"
                         }
                     ]
+                },
+                {
+                    "name": "onNodeFocusChange",
+                    "args": [
+                        {
+                            "name": "node",
+                            "type": "Node",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 168,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nNode focus change\n",
+                    "description": "<p>Node focus change</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 4142,
+                                "end": 4146,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "node"
+                            },
+                            "type": "Node",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 4136,
+                                "end": 4141,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": "<ul>\n<li>Node</li>\n</ul>\n"
+                        }
+                    ]
                 }
             ],
             "deprecated": false,
@@ -67499,7 +67635,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 { 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</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@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\t// Update focus to reset arrow key traversal\n\t\t\t// Select the current highlight node as the last node, since we preserve order in map\n\t\t\tthis.treeWalker.currentNode = this.elementRef.nativeElement.querySelector(`#${CSS.escape(nodes[nodes.length - 1].id)}`);\n\t\t\tthis.select.emit(this.treeViewService.isMultiSelect ? nodes : nodes[0]);\n\t\t});\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\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 { 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</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@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 * 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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -73189,7 +73325,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "[]",
-                "defaultValue": "[\n\t{\n\t\tid: \"1\",\n\t\tvalue: \"Artificial intelligence\",\n\t\tlabel: \"Artificial intelligence\"\n\t},\n\t{\n\t\tid: \"2\",\n\t\tvalue: \"Blockchain\",\n\t\tlabel: \"Blockchain\"\n\t},\n\t{\n\t\tid: \"3\",\n\t\tvalue: \"Business automation\",\n\t\tlabel: \"Business automation\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"3-1\",\n\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\tlabel: \"Business process automation\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3-2\",\n\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\tlabel: \"Business process mapping\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"4\",\n\t\tvalue: \"Business operations\",\n\t\tlabel: \"Business operations\"\n\t},\n\t{\n\t\tid: \"5\",\n\t\tvalue: \"Cloud computing\",\n\t\tlabel: \"Cloud computing\",\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"5-1\",\n\t\t\t\tvalue: \"Containers\",\n\t\t\t\tlabel: \"Containers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-2\",\n\t\t\t\tvalue: \"Databases\",\n\t\t\t\tlabel: \"Databases\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-3\",\n\t\t\t\tvalue: \"DevOps\",\n\t\t\t\tlabel: \"DevOps\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\tlabel: \"Solutions\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\tlabel: \"Resources\"\n\t\t\t\t\t\t\t}\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\t},\n\t{\n\t\tid: \"6\",\n\t\tvalue: \"Data & Analytics\",\n\t\tlabel: \"Data & Analytics\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"6-1\",\n\t\t\t\tvalue: \"Big data\",\n\t\t\t\tlabel: \"Big data\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6-2\",\n\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\tlabel: \"Business intelligence\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"7\",\n\t\tvalue: \"IT infrastructure\",\n\t\tlabel: \"IT infrastructure\",\n\t\texpanded: true,\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"7-1\",\n\t\t\t\tvalue: \"Data storage\",\n\t\t\t\tlabel: \"Data storage\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7-2\",\n\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\tlabel: \"Enterprise servers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"8\",\n\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"8-1\",\n\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\tlabel: \"Insights\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"8-2\",\n\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\tlabel: \"Benefits\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]"
+                "defaultValue": "[\n\t{\n\t\tid: \"1\",\n\t\tvalue: \"Artificial intelligence\",\n\t\tlabel: \"Artificial intelligence\"\n\t},\n\t{\n\t\tid: \"2\",\n\t\tvalue: \"Blockchain\",\n\t\tlabel: \"Blockchain\"\n\t},\n\t{\n\t\tid: \"3\",\n\t\tvalue: \"Business automation\",\n\t\tlabel: \"Business automation\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"3-1\",\n\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\tlabel: \"Business process automation\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3-2\",\n\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\tlabel: \"Business process mapping\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"4\",\n\t\tvalue: \"Business operations\",\n\t\tlabel: \"Business operations\"\n\t},\n\t{\n\t\tid: \"5\",\n\t\tvalue: \"Cloud computing\",\n\t\tlabel: \"Cloud computing\",\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"5-1\",\n\t\t\t\tvalue: \"Containers\",\n\t\t\t\tlabel: \"Containers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-2\",\n\t\t\t\tvalue: \"Databases\",\n\t\t\t\tlabel: \"Databases\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-3\",\n\t\t\t\tvalue: \"DevOps\",\n\t\t\t\tlabel: \"DevOps\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\tlabel: \"Solutions\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\tlabel: \"Resources\"\n\t\t\t\t\t\t\t}\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\t},\n\t{\n\t\tid: \"6\",\n\t\tvalue: \"Data & Analytics\",\n\t\tlabel: \"Data & Analytics\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"6-1\",\n\t\t\t\tvalue: \"Big data\",\n\t\t\t\tlabel: \"Big data\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6-2\",\n\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\tlabel: \"Business intelligence\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"7\",\n\t\tvalue: \"Not selectable node\",\n\t\tlabel: \"Not selectable node\",\n\t\tselectable: false,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"7-1\",\n\t\t\t\tvalue: \"Child 1\",\n\t\t\t\tlabel: \"Child 1\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7-2\",\n\t\t\t\tvalue: \"Child 2\",\n\t\t\t\tlabel: \"Child 2\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"8\",\n\t\tvalue: \"IT infrastructure\",\n\t\tlabel: \"IT infrastructure\",\n\t\texpanded: true,\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"8-1\",\n\t\t\t\tvalue: \"Data storage\",\n\t\t\t\tlabel: \"Data storage\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"8-2\",\n\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\tlabel: \"Enterprise servers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"9\",\n\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-1\",\n\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\tlabel: \"Insights\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-2\",\n\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\tlabel: \"Benefits\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]"
             },
             {
                 "name": "NonSVGRootTemplate",
@@ -74304,7 +74440,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -79020,7 +79156,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-textarea-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[disabled]=\"disabled\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<textarea\n\t\t\tcdsTextArea\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[rows]=\"rows\"\n\t\t\t[cols]=\"cols\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\taria-label=\"textarea\"></textarea>\n\t\t</cds-textarea-label>\n\t`\n})"
                 }
             ],
             "src/layer/layer.stories.ts": [
@@ -80516,7 +80652,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "[]",
-                    "defaultValue": "[\n\t{\n\t\tid: \"1\",\n\t\tvalue: \"Artificial intelligence\",\n\t\tlabel: \"Artificial intelligence\"\n\t},\n\t{\n\t\tid: \"2\",\n\t\tvalue: \"Blockchain\",\n\t\tlabel: \"Blockchain\"\n\t},\n\t{\n\t\tid: \"3\",\n\t\tvalue: \"Business automation\",\n\t\tlabel: \"Business automation\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"3-1\",\n\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\tlabel: \"Business process automation\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3-2\",\n\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\tlabel: \"Business process mapping\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"4\",\n\t\tvalue: \"Business operations\",\n\t\tlabel: \"Business operations\"\n\t},\n\t{\n\t\tid: \"5\",\n\t\tvalue: \"Cloud computing\",\n\t\tlabel: \"Cloud computing\",\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"5-1\",\n\t\t\t\tvalue: \"Containers\",\n\t\t\t\tlabel: \"Containers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-2\",\n\t\t\t\tvalue: \"Databases\",\n\t\t\t\tlabel: \"Databases\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-3\",\n\t\t\t\tvalue: \"DevOps\",\n\t\t\t\tlabel: \"DevOps\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\tlabel: \"Solutions\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\tlabel: \"Resources\"\n\t\t\t\t\t\t\t}\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\t},\n\t{\n\t\tid: \"6\",\n\t\tvalue: \"Data & Analytics\",\n\t\tlabel: \"Data & Analytics\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"6-1\",\n\t\t\t\tvalue: \"Big data\",\n\t\t\t\tlabel: \"Big data\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6-2\",\n\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\tlabel: \"Business intelligence\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"7\",\n\t\tvalue: \"IT infrastructure\",\n\t\tlabel: \"IT infrastructure\",\n\t\texpanded: true,\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"7-1\",\n\t\t\t\tvalue: \"Data storage\",\n\t\t\t\tlabel: \"Data storage\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7-2\",\n\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\tlabel: \"Enterprise servers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"8\",\n\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"8-1\",\n\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\tlabel: \"Insights\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"8-2\",\n\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\tlabel: \"Benefits\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]"
+                    "defaultValue": "[\n\t{\n\t\tid: \"1\",\n\t\tvalue: \"Artificial intelligence\",\n\t\tlabel: \"Artificial intelligence\"\n\t},\n\t{\n\t\tid: \"2\",\n\t\tvalue: \"Blockchain\",\n\t\tlabel: \"Blockchain\"\n\t},\n\t{\n\t\tid: \"3\",\n\t\tvalue: \"Business automation\",\n\t\tlabel: \"Business automation\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"3-1\",\n\t\t\t\tvalue: \"Business process automation\",\n\t\t\t\tlabel: \"Business process automation\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"3-2\",\n\t\t\t\tvalue: \"Business process mapping\",\n\t\t\t\tlabel: \"Business process mapping\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"4\",\n\t\tvalue: \"Business operations\",\n\t\tlabel: \"Business operations\"\n\t},\n\t{\n\t\tid: \"5\",\n\t\tvalue: \"Cloud computing\",\n\t\tlabel: \"Cloud computing\",\n\t\texpanded: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"5-1\",\n\t\t\t\tvalue: \"Containers\",\n\t\t\t\tlabel: \"Containers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-2\",\n\t\t\t\tvalue: \"Databases\",\n\t\t\t\tlabel: \"Databases\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"5-3\",\n\t\t\t\tvalue: \"DevOps\",\n\t\t\t\tlabel: \"DevOps\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-4\",\n\t\t\t\t\t\tvalue: \"Solutions\",\n\t\t\t\t\t\tlabel: \"Solutions\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"5-5\",\n\t\t\t\t\t\tvalue: \"Case studies\",\n\t\t\t\t\t\tlabel: \"Case studies\",\n\t\t\t\t\t\texpanded: true,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"5-6\",\n\t\t\t\t\t\t\t\tvalue: \"Resources\",\n\t\t\t\t\t\t\t\tlabel: \"Resources\"\n\t\t\t\t\t\t\t}\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\t},\n\t{\n\t\tid: \"6\",\n\t\tvalue: \"Data & Analytics\",\n\t\tlabel: \"Data & Analytics\",\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"6-1\",\n\t\t\t\tvalue: \"Big data\",\n\t\t\t\tlabel: \"Big data\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"6-2\",\n\t\t\t\tvalue: \"Business intelligence\",\n\t\t\t\tlabel: \"Business intelligence\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"7\",\n\t\tvalue: \"Not selectable node\",\n\t\tlabel: \"Not selectable node\",\n\t\tselectable: false,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"7-1\",\n\t\t\t\tvalue: \"Child 1\",\n\t\t\t\tlabel: \"Child 1\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"7-2\",\n\t\t\t\tvalue: \"Child 2\",\n\t\t\t\tlabel: \"Child 2\"\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: \"8\",\n\t\tvalue: \"IT infrastructure\",\n\t\tlabel: \"IT infrastructure\",\n\t\texpanded: true,\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: \"8-1\",\n\t\t\t\tvalue: \"Data storage\",\n\t\t\t\tlabel: \"Data storage\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"8-2\",\n\t\t\t\tvalue: \"Enterprise servers\",\n\t\t\t\tlabel: \"Enterprise servers\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"9\",\n\t\t\t\tvalue: \"Hybrid cloud infrastructure\",\n\t\t\t\tlabel: \"Hybrid cloud infrastructure\",\n\t\t\t\texpanded: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-1\",\n\t\t\t\t\t\tvalue: \"Insights\",\n\t\t\t\t\t\tlabel: \"Insights\"\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: \"9-2\",\n\t\t\t\t\t\tvalue: \"Benefits\",\n\t\t\t\t\t\tlabel: \"Benefits\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]"
                 },
                 {
                     "name": "ProjectedContent",
@@ -85416,8 +85552,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TextareaLabelComponent",
-                "coveragePercent": 68,
-                "coverageCount": "13/19",
+                "coveragePercent": 65,
+                "coverageCount": "13/20",
                 "status": "good"
             },
             {
@@ -88959,8 +89095,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TreeNodeComponent",
-                "coveragePercent": 20,
-                "coverageCount": "6/30",
+                "coveragePercent": 19,
+                "coverageCount": "6/31",
                 "status": "low"
             },
             {
@@ -88969,7 +89105,7 @@
                 "linktype": "interface",
                 "name": "Node",
                 "coveragePercent": 0,
-                "coverageCount": "0/13",
+                "coverageCount": "0/14",
                 "status": "low"
             },
             {
@@ -88977,8 +89113,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TreeViewComponent",
-                "coveragePercent": 46,
-                "coverageCount": "7/15",
+                "coveragePercent": 50,
+                "coverageCount": "8/16",
                 "status": "medium"
             },
             {
@@ -88986,8 +89122,8 @@
                 "type": "injectable",
                 "linktype": "injectable",
                 "name": "TreeViewService",
-                "coveragePercent": 62,
-                "coverageCount": "5/8",
+                "coveragePercent": 60,
+                "coverageCount": "6/10",
                 "status": "good"
             },
             {