carbon-components-angular 5.40.1 → 5.40.3

package/docs/documentation.json

@@ -5282,12 +5282,12 @@
     "classes": [
         {
             "name": "CheckboxExportedTests",
-            "id": "class-CheckboxExportedTests-b826a1e1d7456ba9c5aa59006bf24db146bb604d062bcc0dc453e2492e00ed2d49006019b30c04736a7bae5c84650cf561fbe25c653c34f00409ad88230dfd38",
+            "id": "class-CheckboxExportedTests-6b6157797937d6676e8ab8a092bd396bf5dbead2e095c1077e1c287dc3036bc363e31c65bcfef623c6f348a4969d9d6d772bc1f8e3c18865affbd312b723cfa0",
             "file": "src/checkbox/checkbox-exported-tests.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { expect } from \"chai\";\n\nimport merge from \"lodash/merge\";\n\nimport ComponentTests from \"../exported-tests/component-tests\";\n\nconst defaults = {\n\tselectors: {\n\t\troot: \"cds-checkbox\",\n\t\tinput: \"input\"\n\t}\n};\n\nclass CheckboxExportedTests extends ComponentTests {\n\tconstructor(configs) {\n\t\tsuper(merge({}, defaults, configs));\n\t\tthis.tests = this.tests.concat(this.structure());\n\t}\n\n\tstructure() {\n\t\tconst tests = [\n\t\t\t{\n\t\t\t\tname: \"initially be unchecked, be checked on click\",\n\t\t\t\tgetActual: fragment =>\n\t\t\t\t\tnew Promise(resolve => {\n\t\t\t\t\t\tconst component = this.getComponent(\n\t\t\t\t\t\t\tfragment,\n\t\t\t\t\t\t\t`${this.settings.selectors.root} ${this.settings.selectors.input}`\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst initialState = component.checked;\n\t\t\t\t\t\tcomponent.click();\n\t\t\t\t\t\tconst afterClickState = component.checked;\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tinitialState,\n\t\t\t\t\t\t\tafterClickState\n\t\t\t\t\t\t});\n\t\t\t\t\t}),\n\t\t\t\trunComparison: results => {\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.initialState).to.be.false;\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.afterClickState).to.be.true;\n\t\t\t\t}\n\t\t\t}\n\t\t];\n\t\treturn [{\n\t\t\tname: \"Basic checkbox tests\",\n\t\t\ttests: this.getTests(tests)\n\t\t}];\n\t}\n}\n\nexport default CheckboxExportedTests;\n",
+            "sourceCode": "import { expect } from \"chai\";\nimport merge from \"lodash/merge\";\nimport ComponentTests from \"../exported-tests/component-tests\";\n\nconst defaults = {\n\tselectors: {\n\t\troot: \"cds-checkbox\",\n\t\tinput: \"input\"\n\t}\n};\n\nclass CheckboxExportedTests extends ComponentTests {\n\tconstructor(configs) {\n\t\tsuper(merge({}, defaults, configs));\n\t\tthis.tests = this.tests.concat(this.structure());\n\t}\n\n\tstructure() {\n\t\tconst tests = [\n\t\t\t{\n\t\t\t\tname: \"initially be unchecked, be checked on click\",\n\t\t\t\tgetActual: fragment =>\n\t\t\t\t\tnew Promise(resolve => {\n\t\t\t\t\t\tconst component = this.getComponent(\n\t\t\t\t\t\t\tfragment,\n\t\t\t\t\t\t\t`${this.settings.selectors.root} ${this.settings.selectors.input}`\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst initialState = component.checked;\n\t\t\t\t\t\tcomponent.click();\n\t\t\t\t\t\tconst afterClickState = component.checked;\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tinitialState,\n\t\t\t\t\t\t\tafterClickState\n\t\t\t\t\t\t});\n\t\t\t\t\t}),\n\t\t\t\t\trunComparison: results => {\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.initialState).to.be.false;\n\t\t\t\t\t// tslint:disable-next-line\n\t\t\t\t\texpect(results.afterClickState).to.be.true;\n\t\t\t\t}\n\t\t\t}\n\t\t];\n\t\treturn [{\n\t\t\tname: \"Basic checkbox tests\",\n\t\t\ttests: this.getTests(tests)\n\t\t}];\n\t}\n}\n\nexport default CheckboxExportedTests;\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -5301,7 +5301,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 14,
+                "line": 12,
                 "jsdoctags": [
                     {
                         "name": "configs",
@@ -5367,7 +5367,7 @@
                     "optional": false,
                     "returnType": "{}",
                     "typeParameters": [],
-                    "line": 20,
+                    "line": 18,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -15942,12 +15942,12 @@
         },
         {
             "name": "RouterLinkExtendedDirective",
-            "id": "directive-RouterLinkExtendedDirective-59c6eeb137fca35b6c7635d5f530483299891a2d5c2903a569ed48b345bff9fcedae1b7ed592c66a187147a743b9f32bbe9f12f01b9e5d14f654c435e750474b",
+            "id": "directive-RouterLinkExtendedDirective-ac7fa78aa335dce13bd8bffbb115daa3b12dbe24357a0e507e6715bed39fb218e7733a19f1727b2c0c850f7fd07ba85f22fd0bd5db2c925fcdd657758a31a395",
             "file": "src/ui-shell/sidenav/routerlink-extended.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import { Directive, Input, OnChanges, SimpleChanges } from \"@angular/core\";\nimport { NavigationExtras, RouterLinkWithHref } from \"@angular/router\";\nimport { keys } from \"lodash\";\n\n@Directive({\n\t// tslint:disable-next-line\n\tselector: \"[routerLink]\"\n})\nexport class RouterLinkExtendedDirective extends RouterLinkWithHref implements OnChanges {\n\t// TODO: Change RouterLinkWithHref with RouterLink from angular 15 since RouterLinkWithHref has been deprecated\n\t@Input() routeExtras: NavigationExtras;\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.routeExtras && this.routeExtras) {\n\t\t\tkeys(this.routeExtras).forEach(routeExtraProperty => this[routeExtraProperty] = this.routeExtras[routeExtraProperty]);\n\t\t}\n\n\t\tsuper.ngOnChanges(changes);\n\t}\n}\n",
+            "sourceCode": "import { Directive, Input, OnChanges, SimpleChanges } from \"@angular/core\";\nimport { NavigationExtras, RouterLinkWithHref } from \"@angular/router\";\nimport keys from \"lodash/keys\";\n\n@Directive({\n\t// tslint:disable-next-line\n\tselector: \"[routerLink]\"\n})\nexport class RouterLinkExtendedDirective extends RouterLinkWithHref implements OnChanges {\n\t// TODO: Change RouterLinkWithHref with RouterLink from angular 15 since RouterLinkWithHref has been deprecated\n\t@Input() routeExtras: NavigationExtras;\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.routeExtras && this.routeExtras) {\n\t\t\tkeys(this.routeExtras).forEach(routeExtraProperty => this[routeExtraProperty] = this.routeExtras[routeExtraProperty]);\n\t\t}\n\n\t\tsuper.ngOnChanges(changes);\n\t}\n}\n",
             "selector": "[routerLink]",
             "providers": [],
             "hostDirectives": [],
@@ -66844,7 +66844,7 @@
         },
         {
             "name": "TreeNodeComponent",
-            "id": "component-TreeNodeComponent-ff93813fd856a50781df6cbcba9f95d79f7b3acfe18d8d168bb09d06106f6050b85aa03cd375ff81f95ee506ab869d21bfdb8e81d11bdc890aefa9554cff630b",
+            "id": "component-TreeNodeComponent-638ba38397215c1dcb4a26f6383e09fdb8454ab897d7050e6f6bb6695e32ace672799c7d7979688922bb516b38ba39474baa39c40e120d9950c328be853f73bc",
             "file": "src/treeview/tree-node.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66854,7 +66854,7 @@
             "selector": "cds-tree-node",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template\n\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<div\n\t[id]=\"id\"\n\tclass=\"cds--tree-node\"\n\t[ngClass]=\"{\n\t\t'cds--tree-node--active': active,\n\t\t'cds--tree-node--disabled': disabled,\n\t\t'cds--tree-node--selected': selected,\n\t\t'cds--tree-leaf-node': !children.length,\n\t\t'cds--tree-parent-node': children.length,\n\t\t'cds--tree-node--with-icon': icon\n\t}\"\n\t[attr.aria-expanded]=\"expanded || null\"\n\t[attr.aria-current]=\"active || null\"\n\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t[attr.aria-disabled]=\"disabled\"\n\trole=\"treeitem\"\n\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t(focus)=\"emitFocusEvent($event)\"\n\t(blur)=\"emitBlurEvent($event)\"\n\t(keydown)=\"navigateTree($event)\">\n\t<div\n\t\t*ngIf=\"!children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<!-- Icon -->\n\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template\n\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"children.length\"\n\t\tclass=\"cds--tree-node__label\"\n\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\trole=\"group\"\n\t\t(click)=\"nodeClick($event)\">\n\t\t<span\n\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t<svg\n\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t<!-- Icon -->\n\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t</ng-template>\n\t\t</span>\n\t</div>\n\t<div\n\t\t*ngIf=\"expanded\"\n\t\trole=\"group\"\n\t\tclass=\"cds--tree-node__children\">\n\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t\t<ng-template #notProjected>\n\t\t\t<cds-tree-node\n\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t[node]=\"childNode\"\n\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(nodetoggle)=\"nodetoggle.emit($event)\">\n\t\t\t</cds-tree-node>\n\t\t</ng-template>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -66864,7 +66864,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 124,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66873,7 +66873,7 @@
                     "defaultValue": "[]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 134,
+                    "line": 135,
                     "type": "Node[]",
                     "decorators": []
                 },
@@ -66884,7 +66884,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetermines the depth of the node\nCalculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n",
                     "description": "<p>Determines the depth of the node\nCalculated by default when passing <code>Node</code> array to <code>TreeViewComponent</code>, manual entry required otherwise</p>\n",
-                    "line": 140,
+                    "line": 141,
                     "type": "number",
                     "decorators": []
                 },
@@ -66893,7 +66893,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 124,
+                    "line": 125,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66902,7 +66902,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 126,
+                    "line": 127,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66911,7 +66911,7 @@
                     "defaultValue": "0",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 134,
                     "type": "number",
                     "decorators": []
                 },
@@ -66919,7 +66919,7 @@
                     "name": "icon",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 132,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66927,7 +66927,7 @@
                     "name": "iconContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 132,
+                    "line": 133,
                     "type": "any",
                     "decorators": []
                 },
@@ -66936,7 +66936,7 @@
                     "defaultValue": "`tree-node-${TreeNodeComponent.treeNodeCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 122,
+                    "line": 123,
                     "type": "string",
                     "decorators": []
                 },
@@ -66944,7 +66944,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 127,
+                    "line": 128,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -66952,7 +66952,7 @@
                     "name": "labelContext",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 128,
+                    "line": 129,
                     "type": "any",
                     "decorators": []
                 },
@@ -66962,7 +66962,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                     "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
-                    "line": 146,
+                    "line": 147,
                     "type": "Node",
                     "decorators": []
                 },
@@ -66971,7 +66971,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 126,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66980,7 +66980,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 130,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -66988,7 +66988,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "any",
                     "decorators": []
                 }
@@ -66999,7 +66999,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 170,
+                    "line": 171,
                     "type": "EventEmitter"
                 },
                 {
@@ -67007,7 +67007,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 169,
+                    "line": 170,
                     "type": "EventEmitter"
                 },
                 {
@@ -67015,7 +67015,7 @@
                     "defaultValue": "new EventEmitter<Node>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 171,
+                    "line": 172,
                     "type": "EventEmitter"
                 },
                 {
@@ -67023,7 +67023,7 @@
                     "defaultValue": "new EventEmitter<EventOnNode>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 172,
+                    "line": 173,
                     "type": "EventEmitter"
                 }
             ],
@@ -67035,7 +67035,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 174
+                    "line": 175
                 },
                 {
                     "name": "treeNodeCount",
@@ -67045,7 +67045,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 121,
+                    "line": 122,
                     "modifierKind": [
                         126
                     ]
@@ -67058,7 +67058,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 229,
+                    "line": 230,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalculate the node offset\n",
@@ -67066,8 +67066,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 6459,
-                                "end": 6466,
+                                "pos": 6504,
+                                "end": 6511,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67091,7 +67091,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -67119,7 +67119,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 248,
+                    "line": 249,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -67140,7 +67140,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 301,
+                    "line": 302,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67160,7 +67160,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 297,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -67191,7 +67191,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 274,
+                    "line": 275,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nManages the keyboard accessibility for children expansion & selection\n",
@@ -67221,7 +67221,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 209,
+                    "line": 210,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects the node and emits the event from the tree view component\n",
@@ -67229,8 +67229,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5942,
-                                "end": 5947,
+                                "pos": 5987,
+                                "end": 5992,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67241,8 +67241,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5936,
-                                "end": 5941,
+                                "pos": 5981,
+                                "end": 5986,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67266,7 +67266,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 262,
+                    "line": 263,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpand children if not disabled\n",
@@ -67274,8 +67274,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7200,
-                                "end": 7205,
+                                "pos": 7245,
+                                "end": 7250,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67286,8 +67286,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7194,
-                                "end": 7199,
+                                "pos": 7239,
+                                "end": 7244,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -67308,7 +67308,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() selectable = true;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.selectable = node.selectable ?? this.selectable;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter<EventOnNode>();\n\t@Output() nodeBlur = new EventEmitter<EventOnNode>();\n\t@Output() nodeSelect = new EventEmitter<Node>();\n\t@Output() nodetoggle = new EventEmitter<EventOnNode>();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = this.selectable && value.has(this.id);\n\t\t\tthis.active = this.selectable && this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tevent.target.parentElement.focus();\n\t\t\tif (this.selectable || this.children.length === 0) {\n\t\t\t\tthis.selected = true;\n\t\t\t\tthis.active = true;\n\t\t\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\t\tthis.treeViewService.selectNode(node);\n\t\t\t\tthis.nodeSelect.emit(node);\n\t\t\t} else {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\tthis.nodeFocus.emit({ node, event });\n\t\tthis.treeViewService.focusNode(node);\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tOnInit,\n\tOnDestroy,\n\tAfterContentInit,\n\tTemplateRef,\n\tAfterContentChecked\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { TreeViewService } from \"./treeview.service\";\nimport { EventOnNode, Node } from \"./tree-node.types\";\n\n@Component({\n\tselector: \"cds-tree-node\",\n\ttemplate: `\n\t\t<div\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"cds--tree-node\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tree-node--active': active,\n\t\t\t\t'cds--tree-node--disabled': disabled,\n\t\t\t\t'cds--tree-node--selected': selected,\n\t\t\t\t'cds--tree-leaf-node': !children.length,\n\t\t\t\t'cds--tree-parent-node': children.length,\n\t\t\t\t'cds--tree-node--with-icon': icon\n\t\t\t}\"\n\t\t\t[attr.aria-expanded]=\"expanded || null\"\n\t\t\t[attr.aria-current]=\"active || null\"\n\t\t\t[attr.aria-selected]=\"disabled ? null : selected\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\trole=\"treeitem\"\n\t\t\t[attr.tabindex]=\"selected ? 0 : -1\"\n\t\t\t(focus)=\"emitFocusEvent($event)\"\n\t\t\t(blur)=\"emitBlurEvent($event)\"\n\t\t\t(keydown)=\"navigateTree($event)\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<!-- Icon -->\n\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(icon)\" [ngTemplateOutlet]=\"icon\"></ng-template>\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"children.length\"\n\t\t\t\tclass=\"cds--tree-node__label\"\n\t\t\t\t[style.padding-inline-start.rem]=\"offset\"\n\t\t\t\t[style.margin-inline-start.rem]=\"-offset\"\n\t\t\t\trole=\"group\"\n\t\t\t\t(click)=\"nodeClick($event)\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--tree-parent-node__toggle\"\n\t\t\t\t\t[attr.disabled]=\"disabled || null\"\n\t\t\t\t\t(click)=\"toggleExpanded($event)\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclass=\"cds--tree-parent-node__toggle-icon\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tree-parent-node__toggle-icon--expanded' : expanded}\"\n\t\t\t\t\t\tibmIcon=\"caret--down\"\n\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t</svg>\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tree-node__label__details\">\n\t\t\t\t\t<!-- Icon -->\n\t\t\t\t\t<ng-container *ngIf=\"icon && !isTemplate(icon)\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclass=\"cds--tree-node__icon\"\n\t\t\t\t\t\t\t[cdsIcon]=\"icon\"\n\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(icon)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"icon\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: iconContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"isTemplate(label)\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"label\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: labelContext }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"expanded\"\n\t\t\t\trole=\"group\"\n\t\t\t\tclass=\"cds--tree-node__children\">\n\t\t\t\t<ng-container *ngIf=\"isProjected(); else notProjected\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template #notProjected>\n\t\t\t\t\t<cds-tree-node\n\t\t\t\t\t\t*ngFor=\"let childNode of children\"\n\t\t\t\t\t\t[node]=\"childNode\"\n\t\t\t\t\t\t[depth]=\"depth + 1\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(nodetoggle)=\"nodetoggle.emit($event)\">\n\t\t\t\t\t</cds-tree-node>\n\t\t\t\t</ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`\n})\nexport class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy {\n\tstatic treeNodeCount = 0;\n\t@Input() id = `tree-node-${TreeNodeComponent.treeNodeCount++}`;\n\t@Input() active = false;\n\t@Input() disabled = false;\n\t@Input() selectable = true;\n\t@Input() expanded = false;\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() labelContext: any;\n\t@Input() selected = false;\n\t@Input() value;\n\t@Input() icon: string | TemplateRef<any>;\n\t@Input() iconContext: any;\n\t@Input() gap = 0;\n\t@Input() children: Node[] = [];\n\n\t/**\n\t * Determines the depth of the node\n\t * Calculated by default when passing `Node` array to `TreeViewComponent`, manual entry required otherwise\n\t */\n\t@Input() depth = 0;\n\n\t/**\n\t * Simple way to set all attributes of Node component via node object\n\t * Would simplify setting component attributes when dynamically rendering node.\n\t */\n\t@Input() set node(node: Node) {\n\t\tthis._node = node;\n\n\t\tthis.id = node.id ?? this.id;\n\t\tthis.active = node.active ?? this.active;\n\t\tthis.disabled = node.disabled ?? this.disabled;\n\t\tthis.selectable = node.selectable ?? this.selectable;\n\t\tthis.expanded = node.expanded ?? this.expanded;\n\t\tthis.label = node.label ?? this.label;\n\t\tthis.labelContext = node.labelContext ?? this.labelContext;\n\t\tthis.value = node.value ?? this.value;\n\t\tthis.icon = node.icon ?? this.icon;\n\t\tthis.selected = node.selected ?? this.selected;\n\t\tthis.depth = node.depth ?? this.depth;\n\t\tthis.gap = node.gap ?? this.gap;\n\t\tthis.children = node.children ?? this.children;\n\t\tthis.iconContext = node.iconText ?? this.iconContext;\n\t}\n\n\tget node() {\n\t\treturn this._node;\n\t}\n\n\t@Output() nodeFocus = new EventEmitter<EventOnNode>();\n\t@Output() nodeBlur = new EventEmitter<EventOnNode>();\n\t@Output() nodeSelect = new EventEmitter<Node>();\n\t@Output() nodetoggle = new EventEmitter<EventOnNode>();\n\n\toffset;\n\tprivate _node;\n\tprivate subscription: Subscription;\n\n\tconstructor(private treeViewService: TreeViewService) {}\n\n\t/**\n\t * Caclulate offset for margin/padding\n\t */\n\tngAfterContentChecked(): void {\n\t\tthis.offset = this.calculateOffset();\n\t}\n\n\t/**\n\t * Highlight the node\n\t */\n\tngOnInit(): void {\n\t\t// Highlight the node\n\t\tthis.subscription = this.treeViewService.selectionObservable.subscribe((value: Map<string, Node>) => {\n\t\t\tthis.selected = this.selectable && value.has(this.id);\n\t\t\tthis.active = this.selectable && this.selected;\n\t\t});\n\t}\n\n\t/**\n\t * Unsubscribe from subscriptions\n\t */\n\tngOnDestroy(): void {\n\t\tthis.subscription?.unsubscribe();\n\t}\n\n\t/**\n\t * Selects the node and emits the event from the tree view component\n\t * @param event\n\t */\n\tnodeClick(event) {\n\t\tif (!this.disabled) {\n\t\t\tevent.target.parentElement.focus();\n\t\t\tif (this.selectable || this.children.length === 0) {\n\t\t\t\tthis.selected = true;\n\t\t\t\tthis.active = true;\n\t\t\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\t\t\t// Passes event to all nodes to update highlighting & parent to emit\n\t\t\t\tthis.treeViewService.selectNode(node);\n\t\t\t\tthis.nodeSelect.emit(node);\n\t\t\t} else {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Calculate the node offset\n\t * @returns Number\n\t */\n\tcalculateOffset() {\n\t\t// Parent node with icon\n\t\tif (this.children.length && this.icon) {\n\t\t\treturn this.depth + 1 + this.depth * 0.5;\n\t\t}\n\n\t\t// parent node without icon\n\t\tif (this.children.length) {\n\t\t\treturn this.depth + 1;\n\t\t}\n\n\t\t// leaf node with icon\n\t\tif (this.icon) {\n\t\t\treturn this.depth + 2 + this.depth * 0.5;\n\t\t}\n\n\t\treturn this.depth + this.gap + 2.5;\n\t}\n\n\temitFocusEvent(event) {\n\t\tconst node = { id: this.id, label: this.label, value: this.value };\n\t\tthis.nodeFocus.emit({ node, event });\n\t\tthis.treeViewService.focusNode(node);\n\t}\n\n\temitBlurEvent(event) {\n\t\tthis.nodeBlur.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t}\n\n\t/**\n\t * Expand children if not disabled\n\t * @param event: Event\n\t */\n\ttoggleExpanded(event) {\n\t\tif (!this.disabled) {\n\t\t\tthis.nodetoggle.emit({ node: { id: this.id, label: this.label, value: this.value }, event });\n\t\t\tthis.expanded = !this.expanded;\n\t\t\t// Prevent selection of the node\n\t\t\tevent.stopPropagation();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for children expansion & selection\n\t */\n\tnavigateTree(event: KeyboardEvent) {\n\t\tif (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\" || event.key === \"Enter\") {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t\t// Unexpand\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tif (this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tif (!this.expanded && this.children) {\n\t\t\t\tthis.toggleExpanded(event);\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Enter\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.nodeClick(event);\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tpublic isProjected() {\n\t\treturn this.treeViewService.contentProjected;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -67325,7 +67325,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 176,
+                "line": 177,
                 "jsdoctags": [
                     {
                         "name": "treeViewService",
@@ -67361,7 +67361,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 146,
+                        "line": 147,
                         "rawdescription": "\n\nSimple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.\n",
                         "description": "<p>Simple way to set all attributes of Node component via node object\nWould simplify setting component attributes when dynamically rendering node.</p>\n",
                         "jsdoctags": [
@@ -67380,7 +67380,7 @@
                         "name": "node",
                         "type": "",
                         "returnType": "",
-                        "line": 165
+                        "line": 166
                     }
                 }
             }
@@ -73966,7 +73966,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button #trigger cdsButton=\"primary\" (click)=\"open = true\">Open</button>\n\t\t<cds-modal [open]=\"open\" [trigger]=\"trigger\" (overlaySelected)=\"open = false\">\n\t\t\t<cds-modal-header (closeSelect)=\"open = false\" [showCloseButton]=\"showCloseButton\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta\">No service required</p>\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta\">A very simple modal</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div class=\"cds--modal-content\">\n\t\t\t\t<p>hello world</p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<ng-container>\n\t\t\t\t\t<button\n\t\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\t\t(click)=\"open = false\"\n\t\t\t\t\t\t[attr.modal-primary-focus]=\"true\">\n\t\t\t\t\t\tOkay\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button #trigger cdsButton=\"primary\" (click)=\"open = true\">Open</button>\n\t\t<cds-modal [open]=\"open\" [trigger]=\"trigger\" (overlaySelected)=\"open = false\" (close)=\"open = false\">\n\t\t\t<cds-modal-header (closeSelect)=\"open = false\" [showCloseButton]=\"showCloseButton\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta\">No service required</p>\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta\">A very simple modal</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div class=\"cds--modal-content\">\n\t\t\t\t<p>hello world</p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<ng-container>\n\t\t\t\t\t<button\n\t\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\t\t(click)=\"open = false\"\n\t\t\t\t\t\t[attr.modal-primary-focus]=\"true\">\n\t\t\t\t\t\tOkay\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t`\n})"
             },
             {
                 "name": "Single",
@@ -79484,7 +79484,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button #trigger cdsButton=\"primary\" (click)=\"open = true\">Open</button>\n\t\t<cds-modal [open]=\"open\" [trigger]=\"trigger\" (overlaySelected)=\"open = false\">\n\t\t\t<cds-modal-header (closeSelect)=\"open = false\" [showCloseButton]=\"showCloseButton\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta\">No service required</p>\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta\">A very simple modal</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div class=\"cds--modal-content\">\n\t\t\t\t<p>hello world</p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<ng-container>\n\t\t\t\t\t<button\n\t\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\t\t(click)=\"open = false\"\n\t\t\t\t\t\t[attr.modal-primary-focus]=\"true\">\n\t\t\t\t\t\tOkay\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button #trigger cdsButton=\"primary\" (click)=\"open = true\">Open</button>\n\t\t<cds-modal [open]=\"open\" [trigger]=\"trigger\" (overlaySelected)=\"open = false\" (close)=\"open = false\">\n\t\t\t<cds-modal-header (closeSelect)=\"open = false\" [showCloseButton]=\"showCloseButton\">\n\t\t\t\t<p class=\"cds--modal-header__label cds--type-delta\">No service required</p>\n\t\t\t\t<p class=\"cds--modal-header__heading cds--type-beta\">A very simple modal</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div class=\"cds--modal-content\">\n\t\t\t\t<p>hello world</p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer>\n\t\t\t\t<ng-container>\n\t\t\t\t\t<button\n\t\t\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t\t\t(click)=\"open = false\"\n\t\t\t\t\t\t[attr.modal-primary-focus]=\"true\">\n\t\t\t\t\t\tOkay\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t`\n})"
                 },
                 {
                     "name": "Template",