feat(ui5-side-navigation-item, ui5-side-navigation-sub-item): introduce click event

packages/fiori/src/SideNavigation.js

@@ -182,6 +182,12 @@ class SideNavigation extends UI5Element {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
 
+		if (!(item.getAttribute("whole-item-toggleable") === "true")) {
+			item.fireEvent("click");
+		} else {
+			item.expanded = !item.expanded;
+		}
+
 		if (item.selected && !this.collapsed) {
 			return;
 		}

packages/fiori/src/SideNavigationItem.js

@@ -54,7 +54,33 @@ const metadata = {
 		selected: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present).
+		 * If set to true, pressing the whole item will toggle the sub items, and it won't fire the <code>click</code> event.
+		 * By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.
+		 *
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.9
+		 */
+		wholeItemToggleable: {
+			type: Boolean,
+		},
 	},
+
+	events: {
+		/**
+		 * @public
+		 * @event
+		 * @since 1.0.0-rc.9
+		 */
+		click: {
+
+		},
+	},
+
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.

packages/fiori/src/SideNavigationSubItem.js

@@ -43,6 +43,17 @@ const metadata = {
 			type: String,
 		},
 	},
+
+	events: {
+		/**
+		 * @public
+		 * @event
+		 * @since 1.0.0-rc.9
+		 */
+		click: {
+
+		},
+	},
 };
 
 /**

packages/fiori/test/pages/SideNavigation.html

@@ -33,6 +33,7 @@
 
 		.content {
 			height: 100%;
+			display: flex;
 		}
 	</style>
 </head>
@@ -54,7 +55,7 @@
 				<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
-			<ui5-side-navigation-item text="Events" icon="calendar">
+			<ui5-side-navigation-item text="Events" icon="calendar" whole-item-toggleable="true">
 				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
@@ -66,7 +67,15 @@
 			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
 		</ui5-side-navigation>
 
-		<ui5-input id="counter" value="0"></ui5-input>
+		<div>
+			<ui5-label>selection-change event</ui5-label>
+			<ui5-input id="counter" value="0"></ui5-input>
+		</div>
+
+		<div>
+			<ui5-label>click event</ui5-label>
+			<ui5-input id="click-counter" value="0"></ui5-input>
+		</div>
 	</div>
 
 
@@ -75,11 +84,19 @@
 	<script>
 		var sideNavigation = document.querySelector("ui5-side-navigation"),
 			input = document.querySelector("#counter"),
-			counter = 0;
+			clickInput = document.querySelector("#click-counter"),
+			counter = 0,
+			clickCounter = 0;
 		document.querySelector("#startButton").addEventListener("click", function(event) {
 			sideNavigation.collapsed = !sideNavigation.collapsed;
 		});
 
+		document.querySelectorAll("ui5-side-navigation-item").forEach(item => {
+			item.addEventListener("click", event => {
+				clickInput.value = ++clickCounter;
+			});
+		})
+
 		sideNavigation.addEventListener("ui5-selection-change", function() {
 			input.value = ++counter;
 		});

packages/fiori/test/specs/SideNavigation.spec.js

@@ -38,6 +38,26 @@ describe("Component Behavior", () => {
 			items[1].click();
 
 			assert.strictEqual(input.getProperty("value"), "5", "Event is fired");
-		})
+		});
+
+		it("Tests click event & whole-item-toggleable property", () => {
+			const input = browser.$("#click-counter");
+			const sideNavigation = browser.$("ui5-side-navigation");
+			let items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
+
+			items[0].click();
+
+			assert.strictEqual(input.getProperty("value"), "6", "Event is fired");
+
+			items[3].click();
+
+			assert.strictEqual(input.getProperty("value"), "6", "Event is not fired");
+			assert.strictEqual(items[3].getAttribute("expanded"), "true", "Expanded is toggled");
+
+			items[3].click();
+
+			assert.strictEqual(input.getProperty("value"), "6", "Event is not fired");
+			assert.strictEqual(items[3].getAttribute("expanded"), "false", "Expanded is toggled");
+		});
 	});
 });