feat(ui5-filter-item, ui5-sort-item,..): add selected filterItems to ui5-confirm event details

packages/fiori/src/FilterItem.ts

@@ -45,6 +45,15 @@ class FilterItem extends UI5Element {
 	 */
 	@slot()
 	values!: Array<FilterItemOption>;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 FilterItem.define();

packages/fiori/src/FilterItemOption.ts

@@ -36,6 +36,15 @@ class FilterItemOption extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 FilterItemOption.define();

packages/fiori/src/SortItem.ts

@@ -36,6 +36,15 @@ class SortItem extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 SortItem.define();

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -93,7 +93,29 @@ <h3> ViewSettingsDialog</h3>
 	<ui5-input id="sortByItem" style="display: none"></ui5-input>
 	<ui5-input id="sortOrder" style="display: none"></ui5-input>
 
+	<h3>ViewSettingsDialog with item-keys</h3>
+
+	<ui5-button id="btnOpenDialogWithItemKey">Show ViewSettingsDialog</ui5-button>
+	<ui5-view-settings-dialog id="vsdWithItemKey">
+		<ui5-sort-item slot="sortItems" text="Name" item-key="sortName"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Position" item-key="sortPosition"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Company" item-key="sortCompany"></ui5-sort-item>
+
+		<ui5-filter-item slot="filterItems" text="Filter 1" item-key="filter1">
+			<ui5-filter-item-option slot="values" text="Some filter 1" item-key="filterOption1"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Some filter 2" item-key="filterOption2"></ui5-filter-item-option>
+		</ui5-filter-item>
+		<ui5-filter-item slot="filterItems" text="Filter 2" item-key="filter2">
+			<ui5-filter-item-option slot="values" text="Some filter 3" item-key="filterOption3"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Some filter 4" item-key="filterOption4"></ui5-filter-item-option>
+		</ui5-filter-item>
+	</ui5-view-settings-dialog>
+
 	<script>
+		btnOpenDialogWithItemKey.addEventListener("click", function () {
+			vsdWithItemKey.open = true;
+		});
+
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.open = true;
 		});

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

@@ -139,7 +139,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-header").$("ui5-button").click();
 
 		const sortByLiText = await viewSettingsDialog.shadow$("[sort-by]").$("ui5-li").getText();
-		assert.include(sortByLiText, "Name", "sortBy should  have an option selected");
+		assert.include(sortByLiText, "Name", "sortBy should have an option selected");
 
 		await browser.keys("Escape");
 	});
@@ -176,4 +176,36 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		await browser.keys("Escape");
 	});
+
+	it("should access the same sort item via item-key, after text being changed", async () => {
+		const btnOpenDialog = await browser.$("#btnOpenDialogWithItemKey");
+		const viewSettingsDialog = await browser.$("#vsdWithItemKey");
+
+		await btnOpenDialog.click();
+
+		// Access the sort item using item-key
+		const sortItem = await viewSettingsDialog.$(`[item-key="sortCompany"]`);
+		const secondSortItemLi = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[1];
+
+		// Get the text of the list item
+		let sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
+		sortItemLiText = sortItemLiText.split("\n")[0]; // Trim the text because it returns 'Company\nNot Selected';
+
+		let sortItemText = await sortItem.getAttribute("text");
+
+		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text before update");
+
+		// Change the text of the item
+		await sortItem.setAttribute("text", "Cooperation");
+
+		await browser.keys("Escape");
+		await btnOpenDialog.click();
+		secondSortItemLi.click(); // Click on another item to re-render, so the text changes successfully.
+
+		sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
+		sortItemLiText = sortItemLiText.split("\n")[0];
+		sortItemText = await sortItem.getAttribute("text");
+
+		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text after update");
+	});
 });