@ui5/webcomponents-fiori 2.5.0-rc.2 → 2.5.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.2...v2.5.0-rc.3) (2024-12-05)
+
+
+### Bug Fixes
+
+* **ui5-list:** enable focusin event bubbling ([#10156](https://github.com/SAP/ui5-webcomponents/issues/10156)) ([3b6cc84](https://github.com/SAP/ui5-webcomponents/commit/3b6cc8457ab47c1651a34f04b9401ee3112bd8c5)), closes [#9787](https://github.com/SAP/ui5-webcomponents/issues/9787)
+* **ui5-view-settings-dialog:** adjust dialog heading level ([#10289](https://github.com/SAP/ui5-webcomponents/issues/10289)) ([08d48a3](https://github.com/SAP/ui5-webcomponents/commit/08d48a3eb5e16708242b4a721ead74aebb8bb8ae))
+
+
+### Features
+
+* **framework:** add strict event type checking ([#10235](https://github.com/SAP/ui5-webcomponents/issues/10235)) ([4ff8ab7](https://github.com/SAP/ui5-webcomponents/commit/4ff8ab7c34db5058b92511767be1b96c69a91cb5))
+* **ui5-user-menu:** introduce new component ([#10244](https://github.com/SAP/ui5-webcomponents/issues/10244)) ([1558499](https://github.com/SAP/ui5-webcomponents/commit/15584993472c2a9d34349da999da74bfe450e76e))
+
+
+
+
+
 # [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
 
 

package/README.md

@@ -31,6 +31,9 @@ such as a common header (ShellBar).
 | Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
 | Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |
 | Upload Collection Item                    | `ui5-upload-collection-item`   | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";`     |
+| User Menu                                 | `ui5-user-menu`                | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";`                 |
+| User Menu Account                         | `ui5-user-menu-account`        | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";`          |
+| User Menu Item                            | `ui5-user-menu-item`           | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";`             |
 | View Settings Dialog                      | `ui5-view-settings-dialog`     | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`       |
 | View Settings Dialog - Sort Item          | `ui5-sort-item`                | `import "@ui5/webcomponents-fiori/dist/SortItem.js";`                 |
 | View Settings Dialog - Filter Item        | `ui5-filter-item`              | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`               |

package/cypress/specs/UserMenu.cy.ts

@@ -0,0 +1,345 @@
+import { html } from "lit";
+import "../../src/UserMenu.js";
+import "../../src/UserMenuAccount.js";
+import "../../src/UserMenuItem.js";
+
+import "@ui5/webcomponents/dist/Avatar.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-icons/dist/action-settings.js";
+
+describe("Initial rendering", () => {
+	it("tests no config provided", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+		cy.get("@responsivePopover").should("exist");
+		cy.get("@responsivePopover").find("[ui5-button]").contains("Sign Out");
+		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
+	});
+
+	it("tests config show-manage-account", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-manage-account>
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+		cy.get("@responsivePopover").should("exist");
+		cy.get("@responsivePopover").find("[ui5-button]").contains("Manage account");
+		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
+	});
+
+	it("tests config show-other-accounts", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts>
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE"
+												   selected>
+							</ui5-user-menu-account>
+							<ui5-user-menu-account slot="accounts"
+												   avatar-initials="AC"
+												   title-text="Alain Chevalier 2"
+												   subtitle-text="test.alian.chevalier@sap.com">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+		cy.get("@responsivePopover").should("exist");
+		cy.get("@responsivePopover").find("[ui5-panel]").contains("Other accounts (1)");
+		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
+	});
+
+	it("tests config show-add-account", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts show-add-account>
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE"
+												   selected>
+							</ui5-user-menu-account>
+							<ui5-user-menu-account slot="accounts"
+												   avatar-initials="AC"
+												   title-text="Alain Chevalier 2"
+												   subtitle-text="test.alian.chevalier@sap.com">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+		cy.get("@responsivePopover").should("exist");
+		cy.get("@responsivePopover").find(".ui5-pm-add-account-btn").should("exist");
+		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 2);
+	});
+});
+
+describe("Menu configuration", () => {
+	it("tests config items", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+							<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
+							<ui5-user-menu-item text="Product-specific account action"
+												data-id="account-action2"></ui5-user-menu-item>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
+		cy.get("@userMenuItems").should("exist");
+		cy.get("@userMenuItems").should("have.length", 2);
+	});
+
+	it("tests config items with submenu items", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+							<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
+							<ui5-user-menu-item text="Product-specific account action"
+												data-id="account-action2"></ui5-user-menu-item>
+							<ui5-user-menu-item text="Legal Information">
+								<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
+								<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
+							</ui5-user-menu-item>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
+		cy.get("@userMenuItems").should("exist");
+		cy.get("@userMenuItems").find("[ui5-user-menu-item]").as("userSubMenuItems");
+		cy.get("@userSubMenuItems").should("exist");
+		cy.get("@userSubMenuItems").should("have.length", 2);
+	});
+
+	it("tests config items with icon", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+							<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").find("[ui5-user-menu-item]").as("userMenuItems");
+		cy.get("@userMenuItems").should("exist");
+		cy.get("@userMenuItems").should("have.length", 1);
+		cy.get("@userMenuItems").should("have.attr", "icon", "action-settings");
+	});
+});
+
+describe("Avatar configuration", () => {
+	it("tests default", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+		<ui5-user-menu open opener="openUserMenuBtn">
+			<ui5-user-menu-account slot="accounts"
+								   title-text="Alain Chevalier 1"
+								   subtitle-text="alian.chevalier@sap.com"
+								   description="Delivery Manager, SAP SE">
+			</ui5-user-menu-account>
+		</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").should("have.length", 1);
+		cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
+	});
+
+	it("tests initials", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   avatar-initials="AC"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").should("have.length", 1);
+		cy.get("@avatar").should("have.attr", "initials", "AC");
+	});
+
+	it("tests image", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   avatar-src="./../../test/pages/img/man_avatar_1.png"
+												   title-text="Alain Chevalier 1"
+												   subtitle-text="alian.chevalier@sap.com"
+												   description="Delivery Manager, SAP SE">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").should("have.length", 1);
+		cy.get("@avatar").find("img").as("image");
+		cy.get("@image").should("have.length", 1);
+		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
+	});
+});
+
+describe("Events", () => {
+	it("tests avatar-click event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.find("[ui5-avatar]")
+			.as("avatar");
+
+		cy.get("@userMenu")
+			.then($avatar => {
+				$avatar.get(0).addEventListener("avatar-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@avatar").click();
+
+		cy.get("@clicked").should("have.been.calledOnce");
+	});
+
+	it("tests manage-account-click event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-manage-account>
+							<ui5-user-menu-account slot="accounts"
+												   title-text="Alain Chevalier 1"
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.shadow()
+			.find("[ui5-button]")
+			.eq(0)
+			.as("manageAccountBtn");
+
+		cy.get("@userMenu").then($userMenu => {
+			$userMenu.get(0).addEventListener("manage-account-click", cy.stub().as("clicked"));
+		});
+
+		cy.get("@manageAccountBtn").click();
+
+		cy.get("@clicked").should("have.been.calledOnce");
+	});
+
+	it("tests add-account-click event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-add-account show-other-accounts>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.shadow()
+			.find(".ui5-pm-add-account-btn")
+			.as("addAccountBtn");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("add-account-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@addAccountBtn").click();
+
+		cy.get("@clicked").should("have.been.calledOnce");
+	});
+
+	it("tests change-account event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn" show-other-accounts>
+							<ui5-user-menu-account slot="accounts" title-text="Alain Chevalier 1">
+							</ui5-user-menu-account>
+							<ui5-user-menu-account slot="accounts" title-text="Alain Chevalier 2">
+							</ui5-user-menu-account>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.shadow()
+			.find("[ui5-panel]")
+			.as("otherAccounts");
+
+		cy.get("@userMenu").then($userMenu => {
+			$userMenu.get(0).addEventListener("change-account", cy.stub().as("changedAccount"));
+		});
+
+		cy.get("@otherAccounts")
+			.shadow()
+			.find("[ui5-button]")
+			.click();
+
+		cy.get("@otherAccounts")
+			.find("[ui5-li-custom]")
+			.click();
+
+		cy.get("@changedAccount").should("have.been.calledOnce");
+		cy.get("@changedAccount").its("args.0.0.detail.prevSelectedAccount").should("have.property", "titleText", "Alain Chevalier 1");
+		cy.get("@changedAccount").its("args.0.0.detail.selectedAccount").should("have.property", "titleText", "Alain Chevalier 2");
+	});
+
+	it("tests item-click event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+							<ui5-user-menu-item text="Setting" data-id="setting"></ui5-user-menu-item>
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.find("[ui5-user-menu-item]")
+			.as("userMenuItem");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("item-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@userMenuItem").click();
+
+		cy.get("@clicked").should("have.been.calledOnce");
+		cy.get("@clicked").its("args.0.0.detail.item").should("have.property", "text", "Setting");
+	});
+
+	it("tests sign-out-click event", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+						<ui5-user-menu open opener="openUserMenuBtn">
+						</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").shadow().find("[ui5-button]").as("signOutBtn");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("sign-out-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@signOutBtn").click();
+
+		cy.get("@clicked").should("have.been.calledOnce");
+	});
+});