feat(ui5-breadcrumbs-item): introduce click event

packages/main/cypress/specs/Breadcrumbs.cy.tsx

@@ -1031,4 +1031,97 @@ describe("Breadcrumbs with item for current page", () => {
 					.should('not.exist');
 			});
 	});
+});
+
+describe("BreadcrumbsItem click event", () => {
+	it("fires click event on item when a visible link is clicked", () => {
+		cy.mount(
+			<Breadcrumbs>
+				<BreadcrumbsItem id="item1" href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="item2" href="#">Link2</BreadcrumbsItem>
+				<BreadcrumbsItem>Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("ui5-click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-link-wrapper ui5-link")
+			.first()
+			.realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+	});
+
+	it("fires click event on current page item (label) when activated", () => {
+		cy.mount(
+			<Breadcrumbs>
+				<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="currentItem">Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#currentItem").then(($item) => {
+			$item[0].addEventListener("ui5-click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-current-location span")
+			.realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+	});
+
+	it("prevents item-click on breadcrumbs when item click is cancelled", () => {
+		let itemClickFired = false;
+
+		cy.mount(
+			<Breadcrumbs onItemClick={() => { itemClickFired = true; }}>
+				<BreadcrumbsItem id="item1" href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem>Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("ui5-click", (e: Event) => { e.preventDefault(); });
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-link-wrapper ui5-link")
+			.first()
+			.realClick();
+
+		cy.then(() => {
+			expect(itemClickFired).to.be.false;
+		});
+	});
+
+	it("prevents item-click on breadcrumbs when current page item click is cancelled", () => {
+		let itemClickFired = false;
+
+		cy.mount(
+			<Breadcrumbs onItemClick={() => { itemClickFired = true; }}>
+				<BreadcrumbsItem href="#">Link1</BreadcrumbsItem>
+				<BreadcrumbsItem id="currentItem">Location</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+
+		cy.get("#currentItem").then(($item) => {
+			$item[0].addEventListener("ui5-click", (e: Event) => { e.preventDefault(); });
+		});
+
+		cy.get("[ui5-breadcrumbs]")
+			.shadow()
+			.find(".ui5-breadcrumbs-current-location span")
+			.realClick();
+
+		cy.then(() => {
+			expect(itemClickFired).to.be.false;
+		});
+	});
 });

packages/main/src/Breadcrumbs.ts

@@ -387,6 +387,16 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 				shiftKey,
 			} = e.detail;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		})) {
+			e.preventDefault();
+			return;
+		}
+
 		if (!this.fireDecoratorEvent("item-click", {
 			item,
 			altKey,
@@ -408,6 +418,15 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 				shiftKey,
 			} = e;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		})) {
+			return;
+		}
+
 		this.fireDecoratorEvent("item-click", {
 			item,
 			altKey,
@@ -422,6 +441,15 @@ class Breadcrumbs extends UI5Element implements IToolbarItemContent {
 			items = this._getItems(),
 			item = items.find(x => `${x._id}-li` === listItem.id)!;
 
+		if (!item.fireDecoratorEvent("click", {
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			shiftKey: false,
+		})) {
+			return;
+		}
+
 		if (this.fireDecoratorEvent("item-click", { item })) {
 			locationOpen(item.href, item.target || "_self", "noopener,noreferrer");
 			this.responsivePopover!.open = false;

packages/main/src/BreadcrumbsItem.ts

@@ -3,9 +3,17 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import eventStrict from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import LinkDesign from "./types/LinkDesign.js";
 
+type BreadcrumbsItemClickEventDetail = {
+	altKey: boolean;
+	ctrlKey: boolean;
+	metaKey: boolean;
+	shiftKey: boolean;
+};
+
 /**
  * @class
  *
@@ -19,7 +27,26 @@ import LinkDesign from "./types/LinkDesign.js";
  * @abstract
  */
 @customElement("ui5-breadcrumbs-item")
+/**
+ * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+ *
+ * **Note:** The event is also fired for the current page location item (the last item), which is not a link by design.
+ *
+ * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+ * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+ * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+ * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
+ * @public
+ * @since 2.10.0
+ */
+@eventStrict("click", {
+	bubbles: true,
+	cancelable: true,
+})
 class BreadcrumbsItem extends UI5Element {
+	eventDetails!: {
+		"click": BreadcrumbsItemClickEventDetail,
+	}
 	/**
 	 * Defines the link href.
 	 *
@@ -87,3 +114,4 @@ class BreadcrumbsItem extends UI5Element {
 BreadcrumbsItem.define();
 
 export default BreadcrumbsItem;
+export type { BreadcrumbsItemClickEventDetail };

packages/main/test/pages/Breadcrumbs.html

@@ -200,6 +200,25 @@ <h2>Breadcrumbs with hardcoded width: 300px and design="NoCurrentPage"</h2>
 		</ui5-breadcrumbs>
 	</div>
 
+	<h2>BreadcrumbsItem click event</h2>
+	<p>Each item fires its own <code>ui5-click</code> event. The log below shows which item was clicked.</p>
+
+	<ui5-breadcrumbs id="breadcrumbsClickEvent">
+		<ui5-breadcrumbs-item id="clickItem1" href="#">Products</ui5-breadcrumbs-item>
+		<ui5-breadcrumbs-item id="clickItem2" href="#">Laptops</ui5-breadcrumbs-item>
+		<ui5-breadcrumbs-item id="clickItem3">ThinkPad X1</ui5-breadcrumbs-item>
+	</ui5-breadcrumbs>
+
+	<p>Last item click: <span id="itemClickResult">-</span></p>
+
+	<script>
+		document.querySelectorAll("#breadcrumbsClickEvent ui5-breadcrumbs-item").forEach((item) => {
+			item.addEventListener("ui5-click", (e) => {
+				document.getElementById("itemClickResult").textContent = item.innerText.trim();
+			});
+		});
+	</script>
+
 	<script>
 		// HCB button
 		var btn = document.getElementById('myBtn');

packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx

@@ -6,6 +6,7 @@ import Basic from "../../../_samples/main/Breadcrumbs/Basic/Basic.md";
 import BreadcrumbsStyles from "../../../_samples/main/Breadcrumbs/BreadcrumbsStyles/BreadcrumbsStyles.md";
 import BreadcrumbsOverflow from "../../../_samples/main/Breadcrumbs/BreadcrumbsOverflow/BreadcrumbsOverflow.md";
 import NoCurrentPage from "../../../_samples/main/Breadcrumbs/NoCurrentPage/NoCurrentPage.md";
+import ClickEvent from "../../../_samples/main/Breadcrumbs/ClickEvent/ClickEvent.md";
 
 
 <%COMPONENT_OVERVIEW%>
@@ -31,4 +32,9 @@ Separator between the links can be easily changed.
 ### Current Page Appearance
 The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem - as "current page" (bold and without separator) and as a regular link, followed by separator.
 
-<NoCurrentPage />
+<NoCurrentPage />
+
+### Item Click Event
+Each `ui5-breadcrumbs-item` fires its own `click` event, allowing framework consumers to attach handlers directly on the item.
+
+<ClickEvent />

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/ClickEvent.md

@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/main.js

@@ -0,0 +1,8 @@
+import "@ui5/webcomponents/dist/Breadcrumbs.js";
+import "@ui5/webcomponents/dist/BreadcrumbsItem.js";
+
+document.querySelectorAll("ui5-breadcrumbs-item").forEach((item) => {
+    item.addEventListener("ui5-click", () => {
+        document.getElementById("result").textContent = item.innerText.trim();
+    });
+});

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/sample.html

@@ -0,0 +1,27 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-breadcrumbs>
+        <ui5-breadcrumbs-item id="item-products" href="#">Products</ui5-breadcrumbs-item>
+        <ui5-breadcrumbs-item id="item-laptops" href="#">Laptops</ui5-breadcrumbs-item>
+        <ui5-breadcrumbs-item id="item-current">ThinkPad X1</ui5-breadcrumbs-item>
+    </ui5-breadcrumbs>
+
+    <p>Last clicked item: <strong id="result">-</strong></p>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->

packages/website/docs/_samples/main/Breadcrumbs/ClickEvent/sample.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import BreadcrumbsClass from "@ui5/webcomponents/dist/Breadcrumbs.js";
+import BreadcrumbsItemClass from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
+
+const Breadcrumbs = createReactComponent(BreadcrumbsClass);
+const BreadcrumbsItem = createReactComponent(BreadcrumbsItemClass);
+
+function App() {
+  const [lastClicked, setLastClicked] = useState("-");
+
+  return (
+    <>
+      <Breadcrumbs>
+        <BreadcrumbsItem href="#" onClick={() => setLastClicked("Products")}>
+          Products
+        </BreadcrumbsItem>
+        <BreadcrumbsItem href="#" onClick={() => setLastClicked("Laptops")}>
+          Laptops
+        </BreadcrumbsItem>
+        <BreadcrumbsItem onClick={() => setLastClicked("ThinkPad X1")}>
+          ThinkPad X1
+        </BreadcrumbsItem>
+      </Breadcrumbs>
+      <p>
+        Last clicked item: <strong>{lastClicked}</strong>
+      </p>
+    </>
+  );
+}
+
+export default App;