diff --git a/packages/fiori/README.md b/packages/fiori/README.md index b9467b3cec86..03b70a85a879 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/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";` | diff --git a/packages/fiori/src/UserMenu.hbs b/packages/fiori/src/UserMenu.hbs new file mode 100644 index 000000000000..0ed288e85961 --- /dev/null +++ b/packages/fiori/src/UserMenu.hbs @@ -0,0 +1,91 @@ + + {{#if _selectedAccount}} +
+ + {{#if _selectedAccount.avatar}} + + {{/if}} + + + + + {{#if _selectedAccount.titleText}} + {{_selectedAccount.titleText}} + {{/if}} + {{#if _selectedAccount.additionalText}} + {{_selectedAccount.additionalText}} + {{/if}} + {{#if _selectedAccount.description}} + {{_selectedAccount.description}} + {{/if}} + + {{#if showManageAccount}} + + {{/if}} +
+ {{/if}} + + {{#if showOtherAccounts}} + + + {{#if _otherAccounts.length}} + + {{#each _otherAccounts}} + +
+ + {{#if avatar}} + + {{/if}} + +
+ {{#if titleText}} + {{titleText}} + {{/if}} + {{#if additionalText}} + {{additionalText}} + {{/if}} + {{#if description}} + {{description}} + {{/if}} +
+
+ + {{/each}} + + {{/if}} + + {{/if}} + + {{#if menuItems.length}} + + + + {{/if}} + +
+ {{_signOutButtonText}} +
+ \ No newline at end of file diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts new file mode 100644 index 000000000000..ad94bf35c4c4 --- /dev/null +++ b/packages/fiori/src/UserMenu.ts @@ -0,0 +1,350 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { + customElement, slot, event, property, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js"; +import Avatar from "@ui5/webcomponents/dist/Avatar.js"; +import Title from "@ui5/webcomponents/dist/Title.js"; +import Text from "@ui5/webcomponents/dist/Text.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; +import Label from "@ui5/webcomponents/dist/Label.js"; +import Panel from "@ui5/webcomponents/dist/Panel.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import List, { type ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js"; +import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js"; +import Tag from "@ui5/webcomponents/dist/Tag.js"; +import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; +import UserMenuAccount from "./UserMenuAccount.js"; +import UserMenuItem from "./UserMenuItem.js"; +import UserMenuTemplate from "./generated/templates/UserMenuTemplate.lit.js"; +import UserMenuCss from "./generated/themes/UserMenu.css.js"; + +// Icons +import "@ui5/webcomponents-icons/dist/add-employee.js"; +import "@ui5/webcomponents-icons/dist/person-placeholder.js"; +import "@ui5/webcomponents-icons/dist/log.js"; +import "@ui5/webcomponents-icons/dist/user-settings.js"; + +// Texts +import { + USER_MENU_OTHER_ACCOUNT_BUTTON_TXT, + USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT, + USER_MENU_SIGN_OUT_BUTTON_TXT, + USER_MENU_POPOVER_ACCESSIBLE_NAME, + USER_MENU_EDIT_AVATAR_TXT, + USER_MENU_ADD_ACCOUNT_TXT, +} from "./generated/i18n/i18n-defaults.js"; + +type UserMenuItemClickEventDetail = { + item: UserMenuItem; +} + +type UserMenuOtherAccountClickEventDetail = { + prevSelectedAccount: UserMenuAccount; + selectedAccount: UserMenuAccount; +} + +/** + * @class + * ### Overview + * + * The `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar` + * and allows the user to easily see information and settings for the current user and all other logged in accounts. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` + * + * `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` (for `ui5-user-menu-item`) + * + * @constructor + * @extends UI5Element + * @experimental + * @public + * @since 2.5.0 + */ + +@customElement({ + tag: "ui5-user-menu", + languageAware: true, + renderer: litRender, + template: UserMenuTemplate, + styles: [UserMenuCss], + dependencies: [ + ResponsivePopover, + Avatar, + Title, + Text, + Label, + Button, + Panel, + Icon, + List, + ListItemCustom, + Tag, + ], +}) + +/** + * Fired when the account avatar is selected. + * @public + */ +@event("avatar-click", { + bubbles: false, +}) + +/** + * Fired when the "Manage Account" button is selected. + * @public + */ +@event("manage-account-click", { + bubbles: false, +}) + +/** + * Fired when the "Add Account" button is selected. + * @public + */ +@event("add-account-click", { + bubbles: false, +}) + +/** + * Fired when the account is switched to a different one. + * @param {UserMenuAccount} prevSelectedAccount The previously selected account. + * @param {UserMenuAccount} selectedAccount The selected account. + * @public + */ +@event("change-account", { + detail: { + prevSelectedAccount: { type: UserMenuAccount }, + selectedAccount: { type: UserMenuAccount }, + }, + bubbles: false, + cancelable: true, +}) + +/** + * Fired when a menu item is selected. + * @param {UserMenuItem} item The selected `user menu item`. + * @public + */ +@event("item-click", { + detail: { + item: { type: UserMenuItem }, + }, + bubbles: false, + cancelable: true, +}) + +/** + * Fired when the "Sign Out" button is selected. + * @public + */ +@event("sign-out-click", { + bubbles: false, + cancelable: true, +}) +class UserMenu extends UI5Element { + /** + * Defines if the User Menu dialog is opened. + * + * @default false + * @public + */ + @property({ type: Boolean }) + open = false; + + /** + * Defines the ID or DOM Reference of the element at which the user menu is shown. + * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. + * You can only set the `opener` attribute to a DOM Reference when using JavaScript. + * @public + * @default undefined + */ + @property({ converter: DOMReferenceConverter }) + opener?: HTMLElement | string; + + /** + * Defines if the User Menu shows the Manage Account option. + * + * @default false + * @public + */ + @property({ type: Boolean }) + showManageAccount = false; + + /** + * Defines if the User Menu shows the Other Accounts option. + * + * @default false + * @public + */ + @property({ type: Boolean }) + showOtherAccounts = false; + + /** + * Defines the menu items. + * @public + */ + @slot({ + type: HTMLElement, + "default": true, + }) + menuItems!: Array; + + /** + * Defines the user accounts. + * + * **Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless + * there is an item with `selected` property set to `true`. + * @public + */ + @slot({ + type: HTMLElement, + invalidateOnChildChange: { + properties: true, + slots: false, + }, + }) + accounts!: Array; + + @i18n("@ui5/webcomponents-fiori") + static i18nBundle: I18nBundle; + + /** + * @private + */ + _selectedAccount!: UserMenuAccount; + + onBeforeRendering() { + this._selectedAccount = this.accounts.find(account => account.selected) || this.accounts[0]; + } + + _handleAvatarClick() { + this.fireDecoratorEvent("avatar-click"); + } + + _handleManageAccountClick() { + this.fireDecoratorEvent("manage-account-click"); + } + + _handleAddAccountClick() { + this.fireDecoratorEvent("add-account-click"); + } + + _handleAccountSwitch(e: CustomEvent<{ item: ListItemClickEventDetail & { associatedAccount: UserMenuAccount } }>) { + const eventPrevented = !this.fireDecoratorEvent("change-account", { + prevSelectedAccount: this._selectedAccount, + selectedAccount: e.detail.item.associatedAccount, + }); + + if (eventPrevented) { + return; + } + + this._selectedAccount.selected = false; + e.detail.item.associatedAccount.selected = true; + } + + _handleSignOutClick() { + const eventPrevented = !this.fireDecoratorEvent("sign-out-click"); + + if (eventPrevented) { + return; + } + + this._closeUserMenu(); + } + + _handleMenuItemClick(e: CustomEvent) { + const item = e.detail.item; + + if (!item._popover) { + const eventPrevented = !this.fireDecoratorEvent("item-click", { + "item": item, + }); + + if (!eventPrevented) { + item.fireEvent("close-menu"); + } + } else { + this._openItemSubMenu(item); + } + } + + _handleMenuItemClose() { + this._closeUserMenu(); + } + + _handlePopoverAfterClose() { + this.open = false; + } + + _openItemSubMenu(item: UserMenuItem) { + if (!item._popover || item._popover.open) { + return; + } + + item._popover.opener = item; + item._popover.open = true; + item.selected = true; + } + + _closeItemSubMenu(item: UserMenuItem) { + if (item && item._popover) { + const openedSibling = item._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open); + if (openedSibling) { + this._closeItemSubMenu(openedSibling); + } + + item._popover.open = false; + item.selected = false; + } + } + + _closeUserMenu() { + this.open = false; + } + + get _otherAccounts() { + return this.accounts.filter(account => account !== this._selectedAccount); + } + + get _manageAccountButtonText() { + return UserMenu.i18nBundle.getText(USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT); + } + + get _otherAccountsButtonText() { + return UserMenu.i18nBundle.getText(USER_MENU_OTHER_ACCOUNT_BUTTON_TXT); + } + + get _signOutButtonText() { + return UserMenu.i18nBundle.getText(USER_MENU_SIGN_OUT_BUTTON_TXT); + } + + get _editAvatarTooltip() { + return UserMenu.i18nBundle.getText(USER_MENU_EDIT_AVATAR_TXT); + } + + get _addAccountTooltip() { + return UserMenu.i18nBundle.getText(USER_MENU_ADD_ACCOUNT_TXT); + } + + get accessibleNameText() { + if (!this._selectedAccount) { + return ""; + } + return `${UserMenu.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_NAME)} ${this._selectedAccount.titleText}`; + } +} + +UserMenu.define(); + +export default UserMenu; +export type { + UserMenuItemClickEventDetail, + UserMenuOtherAccountClickEventDetail, +}; diff --git a/packages/fiori/src/UserMenuAccount.ts b/packages/fiori/src/UserMenuAccount.ts new file mode 100644 index 000000000000..7b314844c54c --- /dev/null +++ b/packages/fiori/src/UserMenuAccount.ts @@ -0,0 +1,84 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js"; + +@customElement({ + tag: "ui5-user-menu-account", +}) +/** + * @class + * ### Overview + * + * The `ui5-user-menu-account` represents an account in the `ui5-user-menu`. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";` + * + * @constructor + * @extends UI5Element + * @experimental + * @public + * @since 2.5.0 + */ +class UserMenuAccount extends UI5Element { + /** + * Defines the avatar of the user. + * + * @default "" + * @public + */ + @property({ type: String }) + avatar?: string; + + /** + * Defines the avatar initials of the user. + * + * @default undefined + * @public + */ + @property({ type: String }) + initials?: string; + + /** + * Defines the title text of the user. + * + * @default "" + * @public + */ + @property({ type: String }) + titleText = ""; + + /** + * Defines additional text of the user. + * + * @default "" + * @public + */ + @property({ type: String }) + additionalText = ""; + + /** + * Defines description of the user. + * + * @default "" + * @public + */ + @property({ type: String }) + description = ""; + + /** + * Defines if the user is selected. + * + * @default false + * @public + */ + @property({ type: Boolean }) + selected = false; + + get _initials() { + return this.initials || "undefined"; + } +} + +UserMenuAccount.define(); + +export default UserMenuAccount; diff --git a/packages/fiori/src/UserMenuItem.hbs b/packages/fiori/src/UserMenuItem.hbs new file mode 100644 index 000000000000..72d8b8ae22e8 --- /dev/null +++ b/packages/fiori/src/UserMenuItem.hbs @@ -0,0 +1 @@ +{{>include "../../main/src/MenuItem.hbs"}} diff --git a/packages/fiori/src/UserMenuItem.ts b/packages/fiori/src/UserMenuItem.ts new file mode 100644 index 000000000000..e31c8a57159c --- /dev/null +++ b/packages/fiori/src/UserMenuItem.ts @@ -0,0 +1,48 @@ +import { customElement } from "@ui5/webcomponents-base/dist/decorators.js"; +// import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import List from "@ui5/webcomponents/dist/List.js"; +import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import MenuItem from "@ui5/webcomponents/dist/MenuItem.js"; + +import UserMenuItemTemplate from "./generated/templates/UserMenuItemTemplate.lit.js"; + +// Styles +import userMenuItemCss from "./generated/themes/UserMenuItem.css.js"; + +/** + * @class + * + * ### Overview + * + * `ui5-user-menu-item` is the item to use inside a `ui5-user-menu`. + * An arbitrary hierarchy structure can be represented by recursively nesting menu items. + * + * ### Usage + * + * `ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list, + * and each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use + * `ui5-user-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use. + * + * ### ES6 Module Import + * + * `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` + * @constructor + * @extends MenuItem + * @experimental + * @public + * @since 2.5.0 + */ +@customElement({ + tag: "ui5-user-menu-item", + template: UserMenuItemTemplate, + styles: [MenuItem.styles, userMenuItemCss], + dependencies: [Icon, List, ResponsivePopover], +}) +class UserMenuItem extends MenuItem { + +} + +UserMenuItem.define(); + +export default UserMenuItem; diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 0b1a4f0f3e7b..0706e94ff785 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -37,6 +37,9 @@ import Timeline from "./Timeline.js"; import NavigationLayout from "./NavigationLayout.js"; import UploadCollection from "./UploadCollection.js"; import UploadCollectionItem from "./UploadCollectionItem.js"; +import UserMenu from "./UserMenu.js"; +import UserMenuAccount from "./UserMenuAccount.js"; +import UserMenuItem from "./UserMenuItem.js"; import ViewSettingsDialog from "./ViewSettingsDialog.js"; import Wizard from "./Wizard.js"; diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index c06fb5686dae..c7163819b46d 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -430,3 +430,21 @@ SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME=More Items #XTXT: Accessible name for the Group Header SIDE_NAVIGATION_GROUP_HEADER_DESC=Group Header + +#XTXT: User menu other accounts button +USER_MENU_OTHER_ACCOUNT_BUTTON_TXT=Other accounts + +#XTXT: User menu manage account button +USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Manage account + +#XTXT: User menu sign out button +USER_MENU_SIGN_OUT_BUTTON_TXT=Sign Out + +#XACT: ARIA User menu edit avatar +USER_MENU_EDIT_AVATAR_TXT=Edit avatar + +#XACT: ARIA add account +USER_MENU_ADD_ACCOUNT_TXT=Add account + +#XACT: ARIA information for the user menu popover +USER_MENU_POPOVER_ACCESSIBLE_NAME=User menu for diff --git a/packages/fiori/src/themes/UserMenu.css b/packages/fiori/src/themes/UserMenu.css new file mode 100644 index 000000000000..0f833d5d11cd --- /dev/null +++ b/packages/fiori/src/themes/UserMenu.css @@ -0,0 +1,65 @@ +.ui5-pm-rp { + width: 20rem; +} + +.ui5-pm-rp::part(header), +.ui5-pm-rp::part(content), +.ui5-pm-rp::part(footer) { + padding-inline: 0.5rem; +} + +.ui5-pm-rp::part(header) { + padding-top: 1rem; + box-shadow: none; +} + +.ui5-pm-rp::part(content) { + padding-top: 0; + padding-bottom: 0.5rem; +} + +.ui5-pm-rp::part(footer) { + padding-block: 0.5rem; +} + +.ui5-pm-selected-account { + display: flex; + align-items: center; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.ui5-pm-manage-account-btn { + margin-top: 0.5rem; +} + +.ui5-pm-other-accounts { + margin-bottom: 1rem; +} + +.ui5-pm-other-accounts::part(content) { + padding: 0; +} + +.ui5-pm-other-accounts-content { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + gap: 1rem; + padding-block: 1rem; +} + +.ui5-user-menu-account-header { + display: flex; + flex: 1; + justify-content: space-between; + align-items: center; +} + +.ui5-pm-footer { + display: flex; + flex: 1; + justify-content: flex-end; + align-items: center; +} \ No newline at end of file diff --git a/packages/fiori/src/themes/UserMenuItem.css b/packages/fiori/src/themes/UserMenuItem.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html new file mode 100644 index 000000000000..e440a89bd9ed --- /dev/null +++ b/packages/fiori/test/pages/UserMenu.html @@ -0,0 +1,108 @@ + + + + + User Menu + + + + + + + + +User menu + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx new file mode 100644 index 000000000000..a8580d8be6bf --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx @@ -0,0 +1,13 @@ +--- +slug: ../UserMenu +sidebar_class_name: newComponentBadge +--- + +import Basic from "../../../_samples/fiori/UserMenu/Basic/Basic.md"; + +<%COMPONENT_OVERVIEW%> + +## Basic Sample + + +<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx new file mode 100644 index 000000000000..db312b6fb517 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuAccount.mdx @@ -0,0 +1,8 @@ +--- +slug: ../UserMenuAccount +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx new file mode 100644 index 000000000000..191e8d739e12 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItem.mdx @@ -0,0 +1,8 @@ +--- +slug: ../UserMenuItem +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/Basic.md b/packages/website/docs/_samples/fiori/UserMenu/Basic/Basic.md new file mode 100644 index 000000000000..e11458217b49 --- /dev/null +++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/Basic.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js new file mode 100644 index 000000000000..bbb1b84698a1 --- /dev/null +++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/main.js @@ -0,0 +1,68 @@ +import "@ui5/webcomponents-fiori/dist/UserMenu.js"; +import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; +import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; + +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents-icons/dist/action-settings.js"; +import "@ui5/webcomponents-icons/dist/globe.js"; +import "@ui5/webcomponents-icons/dist/collaborate.js"; +import "@ui5/webcomponents-icons/dist/official-service.js"; +import "@ui5/webcomponents-icons/dist/private.js"; +import "@ui5/webcomponents-icons/dist/accelerated.js"; + +const button = document.getElementById("btnOpenUserMenu"); +const menu = document.getElementById("userMenu"); + +button.addEventListener("click", function () { + menu.open = true; +}); + +menu.addEventListener("item-click", function (event) { + const item = event.detail.item.getAttribute("data-id"); + + switch (item) { + case "setting": + console.log("Open Setting Dialog"); + break; + case "privacy-policy": + console.log("Privacy Policy"); + break; + case "terms-of-use": + console.log("Terms of Use"); + break; + case "account-action1": + console.log("Product-specific account action 1"); + break; + case "account-action2": + console.log("Product-specific account action 2"); + break; + default: + console.log("Default"); + } +}); + +menu.addEventListener("avatar-click", function () { + console.log("Avatar clicked"); +}); + +menu.addEventListener("manage-account-click", function () { + console.log("Manage account clicked"); +}); + +menu.addEventListener("add-account-click", function () { + console.log("Add account clicked"); +}); + +menu.addEventListener("change-account", function (event) { + console.log("Change account account", event.detail); +}); + +menu.addEventListener("sign-out-click", function (event) { + console.log("Sign Out clicked"); + + const result = prompt("Sign Out", "Are you sure you want to sign out?"); + if (result) { + menu.open = false; + } + event.preventDefault(); +}); \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html new file mode 100644 index 000000000000..d2a1a4a12eca --- /dev/null +++ b/packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html @@ -0,0 +1,62 @@ + + + + + + + User Menu sample + + + + + + + + + +User menu + + + + + + + + + + + + + + + + + + + + + +