carbon-components-angular 5.27.1 → 5.27.3

package/docs/documentation.json

@@ -1077,12 +1077,12 @@
         },
         {
             "name": "Node",
-            "id": "interface-Node-09eeb1b6c9287774e55ad67974594c0a238d6956c0499e9342cca577c333c2e66bc37f343fd1ac1adba83accdca940523ae5d74c999c9167bf8021a4e003b060",
+            "id": "interface-Node-f154b580d651666245c94b5a699d661a10636f6b5c829c3bd10c0d22bc6ddf306f8c98b872b88f046ba3bc37e3ebfaf31b9437fb5a5ab3bb366bb8bfb90451e0",
             "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\tvalue?: any;\n\tid?: string;\n\tactive?: boolean;\n\tdisabled?: boolean;\n\texpanded?: boolean;\n\tselected?: boolean;\n\ticon?: string | TemplateRef<any>;\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\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\tchildren?: Node[];\n\t[key: string]: any;\n}\n",
             "properties": [
                 {
                     "name": "active",
@@ -1100,7 +1100,7 @@
                     "type": "Node[]",
                     "optional": true,
                     "description": "",
-                    "line": 12
+                    "line": 13
                 },
                 {
                     "name": "disabled",
@@ -1129,6 +1129,15 @@
                     "description": "",
                     "line": 11
                 },
+                {
+                    "name": "iconContext",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "any",
+                    "optional": true,
+                    "description": "",
+                    "line": 12
+                },
                 {
                     "name": "id",
                     "deprecated": false,
@@ -1168,7 +1177,7 @@
             ],
             "indexSignatures": [
                 {
-                    "id": "index-declaration-09eeb1b6c9287774e55ad67974594c0a238d6956c0499e9342cca577c333c2e66bc37f343fd1ac1adba83accdca940523ae5d74c999c9167bf8021a4e003b060",
+                    "id": "index-declaration-f154b580d651666245c94b5a699d661a10636f6b5c829c3bd10c0d22bc6ddf306f8c98b872b88f046ba3bc37e3ebfaf31b9437fb5a5ab3bb366bb8bfb90451e0",
                     "args": [
                         {
                             "name": "key",
@@ -1178,7 +1187,7 @@
                         }
                     ],
                     "returnType": "any",
-                    "line": 12,
+                    "line": 13,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -48783,7 +48792,7 @@
         },
         {
             "name": "SideNavItem",
-            "id": "component-SideNavItem-0e90d789334ddeff849fa154a071e2be9fbc9fff93061fabaa13b524a0be523b6ec985e1cbeba78aee33da52011a7da7305958e51f17f3d665fa6d277cc26d71",
+            "id": "component-SideNavItem-4ee73859c5cb9524fc3b4aa56cccdc688c59ba72c7a1f463dd3735971000f5c0e12635a8336943a8f922bd7b49e9effffb0e7db1b82f92cf830d1c7ea5b076fc",
             "file": "src/ui-shell/sidenav/sidenav-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48795,7 +48804,7 @@
             "styles": [
                 "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"
             ],
-            "template": "<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\tclass=\"cds--side-nav__link\"\n\t[ngClass]=\"{\n\t\t'cds--side-nav__item--active': active\n\t}\"\n\t[href]=\"href\"\n\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t[attr.title]=\"title ? title : null\"\n\t(click)=\"navigate($event)\">\n\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n</a>\n\n<ng-template #sidenavItemRouterTpl>\n\t<a\n\t\t[routerLink]=\"route\"\n\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t(click)=\"navigate($event)\"\n\t\tariaCurrentWhenActive=\"page\"\n\t\t[attr.title]=\"title ? title : null\"\n\t\tclass=\"cds--side-nav__link\">\n\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t</a>\n</ng-template>\n\n<ng-template #sidenavItemContentTpl>\n\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__link-text\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-template>\n\t",
+            "template": "<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\tclass=\"cds--side-nav__link\"\n\t[ngClass]=\"{\n\t\t'cds--side-nav__item--active': active\n\t}\"\n\t[href]=\"href\"\n\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t[attr.title]=\"title ? title : null\"\n\t(click)=\"navigate($event)\">\n\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n</a>\n\n<ng-template #sidenavItemRouterTpl>\n\t<a\n\t\t[attr.title]=\"title ? title : null\"\n\t\t[routerLink]=\"route\"\n\t\t\t[relativeTo]=\"routeExtras?.relativeTo\"\n\t\t[queryParams]=\"routeExtras?.queryParams\"\n\t\t[fragment]=\"routeExtras?.fragment\"\n\t\t[queryParamsHandling]=\"routeExtras?.queryParamsHandling\"\n\t\t[preserveFragment]=\"routeExtras?.preserveFragment\"\n\t\t[skipLocationChange]=\"routeExtras?.skipLocationChange\"\n\t\t[replaceUrl]=\"routeExtras?.replaceUrl\"\n\t\t[state]=\"routeExtras?.state\"\n\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\tariaCurrentWhenActive=\"page\"\n\t\tclass=\"cds--side-nav__link\">\n\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t</a>\n</ng-template>\n\n<ng-template #sidenavItemContentTpl>\n\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t</div>\n\t<span class=\"cds--side-nav__link-text\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -48807,7 +48816,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the active (current page) state for the link.\n",
                     "description": "<p>Toggles the active (current page) state for the link.</p>\n",
-                    "line": 91,
+                    "line": 98,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48817,7 +48826,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n",
                     "description": "<p>Link for the item. NOTE: <em>do not</em> pass unsafe or untrusted values, this has the potential to open you up to XSS attacks</p>\n",
-                    "line": 63,
+                    "line": 70,
                     "type": "string",
                     "decorators": []
                 },
@@ -48826,7 +48835,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 99,
+                    "line": 106,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48836,7 +48845,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nArray of commands to send to the router when the link is activated\nSee: https://angular.io/api/router/Router#navigate\n",
                     "description": "<p>Array of commands to send to the router when the link is activated\nSee: <a href=\"https://angular.io/api/router/Router#navigate\">https://angular.io/api/router/Router#navigate</a></p>\n",
-                    "line": 97,
+                    "line": 104,
                     "type": "any[]",
                     "decorators": []
                 },
@@ -48846,7 +48855,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRouter options. Used in conjunction with `route`\nSee: https://angular.io/api/router/Router#navigate\n",
                     "description": "<p>Router options. Used in conjunction with <code>route</code>\nSee: <a href=\"https://angular.io/api/router/Router#navigate\">https://angular.io/api/router/Router#navigate</a></p>\n",
-                    "line": 105,
+                    "line": 112,
                     "type": "any",
                     "decorators": []
                 },
@@ -48856,7 +48865,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle attribute of the anchor element.\n",
                     "description": "<p>Title attribute of the anchor element.</p>\n",
-                    "line": 110,
+                    "line": 117,
                     "type": "string",
                     "decorators": []
                 },
@@ -48867,7 +48876,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUse the routerLink attribute on <a> tag for navigation instead of using event handlers\n",
                     "description": "<p>Use the routerLink attribute on <a> tag for navigation instead of using event handlers</p>\n",
-                    "line": 78,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -48880,7 +48889,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits the navigation status promise when the link is activated\n",
                     "description": "<p>Emits the navigation status promise when the link is activated</p>\n",
-                    "line": 115,
+                    "line": 122,
                     "type": "EventEmitter"
                 },
                 {
@@ -48890,7 +48899,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.\n",
                     "description": "<p>Emits when <code>active</code> input is changed. This is mainly used to indicate to any parent menu items that a\nchild sidenav item is active or not active.</p>\n",
-                    "line": 121,
+                    "line": 128,
                     "type": "EventEmitter"
                 }
             ],
@@ -48903,7 +48912,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 123,
+                    "line": 130,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -48929,7 +48938,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 142,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48953,7 +48962,7 @@
                     "defaultValue": "\"listitem\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 130,
                     "type": "string",
                     "decorators": []
                 },
@@ -48961,7 +48970,7 @@
                     "name": "class.cds--side-nav__item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 80,
+                    "line": 87,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48969,7 +48978,7 @@
                     "name": "class.cds--side-nav__menu-item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 84,
+                    "line": 91,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -48980,7 +48989,7 @@
             "description": "<p><code>SideNavItem</code> can either be a child of <code>SideNav</code> or <code>SideNavMenu</code></p>\n",
             "rawdescription": "\n\n`SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\t\t\tclass=\"cds--side-nav__link\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t(click)=\"navigate($event)\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t</a>\n\n\t\t<ng-template #sidenavItemRouterTpl>\n\t\t\t<a\n\t\t\t\t[routerLink]=\"route\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\t(click)=\"navigate($event)\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\tclass=\"cds--side-nav__link\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t\t</a>\n\t\t</ng-template>\n\n\t\t<ng-template #sidenavItemContentTpl>\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\t\t\tclass=\"cds--side-nav__link\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t\t[href]=\"href\"\n\t\t\t[attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t(click)=\"navigate($event)\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t</a>\n\n\t\t<ng-template #sidenavItemRouterTpl>\n\t\t\t<a\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\t[routerLink]=\"route\"\n \t\t\t\t[relativeTo]=\"routeExtras?.relativeTo\"\n\t\t\t\t[queryParams]=\"routeExtras?.queryParams\"\n\t\t\t\t[fragment]=\"routeExtras?.fragment\"\n\t\t\t\t[queryParamsHandling]=\"routeExtras?.queryParamsHandling\"\n\t\t\t\t[preserveFragment]=\"routeExtras?.preserveFragment\"\n\t\t\t\t[skipLocationChange]=\"routeExtras?.skipLocationChange\"\n\t\t\t\t[replaceUrl]=\"routeExtras?.replaceUrl\"\n\t\t\t\t[state]=\"routeExtras?.state\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\n\t\t\t\tclass=\"cds--side-nav__link\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t\t</a>\n\t\t</ng-template>\n\n\t\t<ng-template #sidenavItemContentTpl>\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n",
@@ -49003,7 +49012,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 125,
+                "line": 132,
                 "jsdoctags": [
                     {
                         "name": "domSanitizer",
@@ -49046,7 +49055,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 63,
+                        "line": 70,
                         "rawdescription": "\n\nLink for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n",
                         "description": "<p>Link for the item. NOTE: <em>do not</em> pass unsafe or untrusted values, this has the potential to open you up to XSS attacks</p>\n",
                         "jsdoctags": [
@@ -49065,7 +49074,7 @@
                         "name": "href",
                         "type": "",
                         "returnType": "",
-                        "line": 71
+                        "line": 78
                     }
                 },
                 "sideNav": {
@@ -49074,7 +49083,7 @@
                         "name": "sideNav",
                         "type": "",
                         "returnType": "",
-                        "line": 80
+                        "line": 87
                     }
                 },
                 "menuItem": {
@@ -49083,7 +49092,7 @@
                         "name": "menuItem",
                         "type": "",
                         "returnType": "",
-                        "line": 84
+                        "line": 91
                     }
                 }
             }
@@ -66328,7 +66337,7 @@
         },
         {
             "name": "TreeNodeComponent",
-            "id": "component-TreeNodeComponent-7ec1ff7178f0ff69205663f92dc7a0cf620b3b25386a669ca3897c531216fd65f3950df9db21724f79e09f8a1555ac1a50e8b58e414c5c83fccf3a85c89c3380",
+            "id": "component-TreeNodeComponent-9d63a1728fca50659f4d28ba6b47f934363b54a663cac55c2ed8ffdfc7d6c68d4dac6dba040b1cd4b8c1abfd7142a39c2cbc0e8baebbc905324e09f12bf6f462",
             "file": "src/treeview/tree-node.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66338,7 +66347,7 @@
             "selector": "cds-tree-node",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t{{label}}\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t{{label}}\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t{{label}}\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t</ng-template>\n\t\t\t{{label}}\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -66348,7 +66357,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 109,
+                    "line": 113,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66357,7 +66366,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 116,
+                    "line": 121,
                     "type": "Node[]",
                     "decorators": []
                 },
@@ -66368,7 +66377,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": 122,
+                    "line": 127,
                     "type": "number",
                     "decorators": []
                 },
@@ -66377,7 +66386,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 110,
+                    "line": 114,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66386,7 +66395,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 111,
+                    "line": 115,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66394,16 +66403,24 @@
                     "name": "icon",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 115,
+                    "line": 119,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
+                {
+                    "name": "iconContext",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 120,
+                    "type": "any",
+                    "decorators": []
+                },
                 {
                     "name": "id",
                     "defaultValue": "`tree-node-${TreeNodeComponent.treeNodeCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 108,
+                    "line": 112,
                     "type": "string",
                     "decorators": []
                 },
@@ -66411,7 +66428,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112,
+                    "line": 116,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66421,7 +66438,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                     "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
-                    "line": 128,
+                    "line": 133,
                     "type": "Node",
                     "decorators": []
                 },
@@ -66430,7 +66447,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 113,
+                    "line": 117,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66438,7 +66455,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 114,
+                    "line": 118,
                     "type": "any",
                     "decorators": []
                 }
@@ -66449,7 +66466,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 148,
+                    "line": 154,
                     "type": "EventEmitter"
                 },
                 {
@@ -66457,7 +66474,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 147,
+                    "line": 153,
                     "type": "EventEmitter"
                 },
                 {
@@ -66465,7 +66482,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 149,
+                    "line": 155,
                     "type": "EventEmitter"
                 },
                 {
@@ -66473,7 +66490,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 150,
+                    "line": 156,
                     "type": "EventEmitter"
                 }
             ],
@@ -66485,7 +66502,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 152
+                    "line": 158
                 },
                 {
                     "name": "treeNodeCount",
@@ -66495,7 +66512,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 107,
+                    "line": 111,
                     "modifierKind": [
                         126
                     ]
@@ -66508,7 +66525,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 201,
+                    "line": 207,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculate the node offset\n",
@@ -66516,8 +66533,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 5367,
-                                "end": 5374,
+                                "pos": 5530,
+                                "end": 5537,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66541,7 +66558,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 224,
+                    "line": 230,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66569,7 +66586,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 220,
+                    "line": 226,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -66590,7 +66607,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 271,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -66610,7 +66627,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 267,
+                    "line": 273,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -66641,7 +66658,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 244,
+                    "line": 250,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
@@ -66671,7 +66688,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 193,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
@@ -66679,8 +66696,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5014,
-                                "end": 5019,
+                                "pos": 5177,
+                                "end": 5182,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66691,8 +66708,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5008,
-                                "end": 5013,
+                                "pos": 5171,
+                                "end": 5176,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66716,7 +66733,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 238,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpand children if not disabled\n",
@@ -66724,8 +66741,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6042,
-                                "end": 6047,
+                                "pos": 6205,
+                                "end": 6210,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66736,8 +66753,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6036,
-                                "end": 6041,
+                                "pos": 6199,
+                                "end": 6204,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66758,7 +66775,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{{label}}\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 *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t\t{{label}}\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() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\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.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.children = node.children ?? this.children;\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 + 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{{label}}\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{{label}}\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() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\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.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.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 + 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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -66775,7 +66792,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 154,
+                "line": 160,
                 "jsdoctags": [
                     {
                         "name": "treeViewService",
@@ -66811,7 +66828,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 128,
+                        "line": 133,
                         "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": [
@@ -66830,14 +66847,14 @@
                         "name": "node",
                         "type": "",
                         "returnType": "",
-                        "line": 143
+                        "line": 149
                     }
                 }
             }
         },
         {
             "name": "TreeViewComponent",
-            "id": "component-TreeViewComponent-8b184a3855e6290e861659453b67a46ce151d1010cf3d998136aaa3f75436d55c0c81a631005ac8bc1810ff4db4a99351149134f7d97f1a838d1b0e1a1e185d5",
+            "id": "component-TreeViewComponent-70cc6386996a3d6c8b808d643f0a0f2b7a6c2cf15c42b972eabc637879f0bec0d1a80324b2f46d623a9c182bb0eba6d0dbd788e8e32b16649b8056dad9ee9e4b",
             "file": "src/treeview/treeview.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66852,7 +66869,7 @@
             "selector": "cds-tree-view",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t*ngIf=\"label\"\n\t[id]=\"id\"\n\tclass=\"cds--label\">\n\t{{label}}\n</label>\n<div\n\tclass=\"cds--tree\"\n\t[ngClass]=\"{\n\t\t'cds--tree--sm': size === 'sm',\n\t\t'cds--tree--xs': size === 'xs'\n\t}\"\n\t[attr.aria-label]=\"label ? label : null\"\n\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\trole=\"tree\"\n\t(keydown)=\"navigateTree($event)\"\n\t#treeWrapper>\n\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t<ng-content></ng-content>\n\t</ng-container>\n\t<ng-template #notProjected>\n\t\t<cds-tree-node\n\t\t\t*ngFor=\"let node of tree\"\n\t\t\t[node]=\"node\">\n\t\t</cds-tree-node>\n\t</ng-template>\n</div>\n\t",
+            "template": "<label\n\t*ngIf=\"label\"\n\t[id]=\"id\"\n\tclass=\"cds--label\">\n\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t<ng-template\n\t\t*ngIf=\"isTemplate(label)\"\n\t\t[ngTemplateOutlet]=\"label\"\n\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--tree\"\n\t[ngClass]=\"{\n\t\t'cds--tree--sm': size === 'sm',\n\t\t'cds--tree--xs': size === 'xs'\n\t}\"\n\t[attr.aria-label]=\"label ? label : null\"\n\t[attr.aria-labelledby]=\"!label ? id : null\"\n\t[attr.aria-multiselectable]=\"isMultiSelect || null\"\n\trole=\"tree\"\n\t(keydown)=\"navigateTree($event)\"\n\t#treeWrapper>\n\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t<ng-content></ng-content>\n\t</ng-container>\n\t<ng-template #notProjected>\n\t\t<cds-tree-node\n\t\t\t*ngFor=\"let node of tree\"\n\t\t\t[node]=\"node\">\n\t\t</cds-tree-node>\n\t</ng-template>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -66862,7 +66879,7 @@
                     "defaultValue": "`tree-view-${TreeViewComponent.treeViewCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 78,
+                    "line": 83,
                     "type": "string",
                     "decorators": []
                 },
@@ -66872,7 +66889,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n**Experimental** - Enable to select multiple nodes\n",
                     "description": "<p><strong>Experimental</strong> - Enable to select multiple nodes</p>\n",
-                    "line": 90,
+                    "line": 99,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66882,10 +66899,20 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTree view label\n",
                     "description": "<p>Tree view label</p>\n",
-                    "line": 82,
+                    "line": 87,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
+                {
+                    "name": "labelContext",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOptional context for label if it's a template\n",
+                    "description": "<p>Optional context for label if it&#39;s a template</p>\n",
+                    "line": 91,
+                    "type": "any",
+                    "decorators": []
+                },
                 {
                     "name": "size",
                     "defaultValue": "\"sm\"",
@@ -66893,7 +66920,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the size of the list items in the tree\n",
                     "description": "<p>Specify the size of the list items in the tree</p>\n",
-                    "line": 86,
+                    "line": 95,
                     "type": "\"xs\" | \"sm\"",
                     "decorators": []
                 },
@@ -66903,7 +66930,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPass `Node[]` array to have tree view render the nodes\nPassing value will disregard projected content\n",
                     "description": "<p>Pass <code>Node[]</code> array to have tree view render the nodes\nPassing value will disregard projected content</p>\n",
-                    "line": 67,
+                    "line": 72,
                     "type": "Node[]",
                     "decorators": []
                 }
@@ -66914,7 +66941,7 @@
                     "defaultValue": "new EventEmitter<Node | Node[]>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94,
+                    "line": 103,
                     "type": "EventEmitter"
                 }
             ],
@@ -66926,7 +66953,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 95,
+                    "line": 104,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -66945,7 +66972,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 76,
+                    "line": 81,
                     "modifierKind": [
                         126
                     ]
@@ -66958,13 +66985,44 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 157,
+                    "line": 170,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
                         125
                     ]
                 },
+                {
+                    "name": "isTemplate",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "boolean",
+                    "typeParameters": [],
+                    "line": 166,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        125
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "navigateTree",
                     "args": [
@@ -66978,7 +67036,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 147,
+                    "line": 156,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNavigate tree using tree walker\n",
@@ -66986,8 +67044,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3692,
-                                "end": 3697,
+                                "pos": 3993,
+                                "end": 3998,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -66998,8 +67056,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3686,
-                                "end": 3691,
+                                "pos": 3987,
+                                "end": 3992,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67020,7 +67078,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{{label}}\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) => Object.assign({}, 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 * 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\tprotected 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 isProjected() {\n\t\treturn this.treeViewService.contentProjected;\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) => Object.assign({}, 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\tprotected 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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -67049,7 +67107,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 99,
+                "line": 108,
                 "jsdoctags": [
                     {
                         "name": "document",
@@ -67103,7 +67161,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 67,
+                        "line": 72,
                         "rawdescription": "\n\nPass `Node[]` array to have tree view render the nodes\nPassing value will disregard projected content\n",
                         "description": "<p>Pass <code>Node[]</code> array to have tree view render the nodes\nPassing value will disregard projected content</p>\n",
                         "jsdoctags": [
@@ -67122,7 +67180,7 @@
                         "name": "tree",
                         "type": "",
                         "returnType": "",
-                        "line": 72
+                        "line": 77
                     }
                 },
                 "isMultiSelect": {
@@ -67141,7 +67199,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 90,
+                        "line": 99,
                         "rawdescription": "\n\n**Experimental** - Enable to select multiple nodes\n",
                         "description": "<p><strong>Experimental</strong> - Enable to select multiple nodes</p>\n",
                         "jsdoctags": [
@@ -88477,8 +88535,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TreeNodeComponent",
-                "coveragePercent": 22,
-                "coverageCount": "6/27",
+                "coveragePercent": 21,
+                "coverageCount": "6/28",
                 "status": "low"
             },
             {
@@ -88487,7 +88545,7 @@
                 "linktype": "interface",
                 "name": "Node",
                 "coveragePercent": 0,
-                "coverageCount": "0/10",
+                "coverageCount": "0/11",
                 "status": "low"
             },
             {
@@ -88496,7 +88554,7 @@
                 "linktype": "component",
                 "name": "TreeViewComponent",
                 "coveragePercent": 50,
-                "coverageCount": "6/12",
+                "coverageCount": "7/14",
                 "status": "medium"
             },
             {