feat: Exposing toggle output for treeview (#2968)

Co-authored-by: Akshat Patel <[email protected]>

Author: Licen-it

src/treeview/tree-node.component.ts

@@ -11,7 +11,7 @@ import {
 } from "@angular/core";
 import { Subscription } from "rxjs";
 import { TreeViewService } from "./treeview.service";
-import { Node } from "./tree-node.types";
+import { EventOnNode, Node } from "./tree-node.types";
 
 @Component({
 	selector: "cds-tree-node",
@@ -166,10 +166,10 @@ export class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy
 		return this._node;
 	}
 
-	@Output() nodeFocus = new EventEmitter();
-	@Output() nodeBlur = new EventEmitter();
-	@Output() nodeSelect = new EventEmitter();
-	@Output() nodetoggle = new EventEmitter();
+	@Output() nodeFocus = new EventEmitter<EventOnNode>();
+	@Output() nodeBlur = new EventEmitter<EventOnNode>();
+	@Output() nodeSelect = new EventEmitter<Node>();
+	@Output() nodetoggle = new EventEmitter<EventOnNode>();
 
 	offset;
 	private _node;
@@ -212,8 +212,10 @@ export class TreeNodeComponent implements AfterContentChecked, OnInit, OnDestroy
 			if (this.selectable || this.children.length === 0) {
 				this.selected = true;
 				this.active = true;
+				const node = { id: this.id, label: this.label, value: this.value };
 				// Passes event to all nodes to update highlighting & parent to emit
-				this.treeViewService.selectNode({ id: this.id, label: this.label, value: this.value });
+				this.treeViewService.selectNode(node);
+				this.nodeSelect.emit(node);
 			} else {
 				this.toggleExpanded(event);
 			}

src/treeview/tree-node.types.ts

@@ -17,3 +17,8 @@ export interface Node {
 	children?: Node[];
 	[key: string]: any;
 }
+
+export interface EventOnNode {
+	node: Node;
+	event: Event;
+}

src/treeview/treeview.component.ts

@@ -13,7 +13,7 @@ import {
 	OnDestroy
 } from "@angular/core";
 import { Subscription } from "rxjs";
-import { Node } from "./tree-node.types";
+import { EventOnNode, Node } from "./tree-node.types";
 import { TreeViewService } from "./treeview.service";
 
 /**
@@ -57,7 +57,8 @@ import { TreeViewService } from "./treeview.service";
 			<ng-template #notProjected>
 				<cds-tree-node
 					*ngFor="let node of tree"
-					[node]="node">
+					[node]="node"
+					(nodetoggle)="onNodeToggle($event)">
 				</cds-tree-node>
 			</ng-template>
 		</div>
@@ -101,6 +102,7 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
 	}
 
 	@Output() select = new EventEmitter<Node | Node[]>();
+	@Output() toggle = new EventEmitter<Node>();
 	@ViewChild("treeWrapper") root: ElementRef;
 
 	private treeWalker: TreeWalker;
@@ -161,6 +163,17 @@ export class TreeViewComponent implements AfterViewInit, OnInit, OnDestroy {
 		}
 	}
 
+	/**
+	 * Propagate node toggle event
+	 * @param eventOnNode - EventOnNode
+	 */
+	onNodeToggle(eventOnNode: EventOnNode) {
+		if (!eventOnNode) {
+			return;
+		}
+		this.toggle.emit(eventOnNode.node)
+	}
+
 	/**
 	 * Node focus change
 	 * @param node - Node