refactor(ui5-tabcontainer): provide tabIndex in tabSelect even

The tab index is provided as event details and don't have to be calculated by users, that otherwise have to consider the tab separators, which can be a little cumbersome.

FIXES: #1196

BREAKING CHANGE: `itemSelect` is renamed to `tabSelect` and the `item` event param is renamed to `tab`.

packages/main/src/TabContainer.js

@@ -112,15 +112,18 @@ const metadata = {
 
 	},
 	events: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+
 		/**
-		 * Fired when an item is selected.
+		 * Fired when a tab is selected.
 		 *
 		 * @event
-		 * @param {HTMLElement} item The selected <code>item</code>.
+		 * @param {HTMLElement} tab The selected <code>tab</code>.
+		 * @param {Number} tabIndex The selected <code>tab</code> index.
 		 * @public
 		 */
-		itemSelect: {
-			item: { type: HTMLElement },
+		tabSelect: {
+			tab: { type: HTMLElement },
+			tabIndex: { type: Number },
 		},
 	},
 };
@@ -296,7 +299,7 @@ class TabContainer extends UI5Element {
 	_onItemSelect(target) {
 		const selectedIndex = findIndex(this.items, item => item._id === target.id);
 		const selectedTabIndex = findIndex(this._getTabs(), item => item._id === target.id);
-		const currentSelectedTab = this.items[selectedIndex];
+		const selectedTab = this.items[selectedIndex];
 
 		// update selected items
 		this.items.forEach((item, index) => {
@@ -312,17 +315,18 @@ class TabContainer extends UI5Element {
 
 		// update collapsed state
 		if (!this.fixed) {
-			if (currentSelectedTab === this._selectedTab) {
+			if (selectedTab === this._selectedTab) {
 				this.collapsed = !this.collapsed;
 			} else {
 				this.collapsed = false;
 			}
 		}
 
 		// select the tab
-		this._selectedTab = currentSelectedTab;
-		this.fireEvent("itemSelect", {
-			item: currentSelectedTab,
+		this._selectedTab = selectedTab;
+		this.fireEvent("tabSelect", {
+			tab: selectedTab,
+			tabIndex: selectedTabIndex,
 		});
 	}
 

packages/main/test/pages/TabContainer.html

@@ -277,11 +277,13 @@ <h2>Tabs with input elements</h2>
 	<section class="result">
 		<h2>Result</h2>
 		<span id="result"></span>
+		<span id="resultIdx"></span>
 	</section>
 
 	<script>
-		document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
-			document.getElementById("result").innerHTML = event.detail.item.text;
+		document.getElementById("tabContainer1").addEventListener("ui5-tabSelect", function (event) {
+			result.innerHTML = event.detail.tab.text;
+			resultIdx.innerHTML = event.detail.tabIndex;
 		});
 	</script>
 </body>

packages/main/test/specs/TabContainer.spec.js

@@ -13,15 +13,18 @@ describe("TabContainer general interaction", () => {
 		assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab filter matches.");
 	});
 
-	it("tests itemSelect event", () => {
+	it("tests tabSelect event", () => {
 		const item = browser.$("#tabContainer1").shadow$(".ui5-tc__headerItem:nth-child(3)");
 		const result = browser.$("#result");
+		const resultIdx = browser.$("#resultIdx");
 
 		const SELECTED_TAB_TEXT = "Laptops";
+		const SELECTED_TAB_INDEX = "1";
 
 		item.click();
 
-		assert.strictEqual(result.getText(), SELECTED_TAB_TEXT, "Item text is retrieved correctly.");
+		assert.strictEqual(result.getText(), SELECTED_TAB_TEXT, "Tab text is retrieved correctly.");
+		assert.strictEqual(resultIdx.getText(), SELECTED_TAB_INDEX, "Tab index is retrieved correctly.");
 	});
 
 	it("scroll works on iconsOnly TabContainer", () => {