From d9ce4d11d862d678e86b4c8339e110ce42bf14a3 Mon Sep 17 00:00:00 2001 From: Adrian Bobev Date: Tue, 19 Nov 2024 22:38:55 +0200 Subject: [PATCH 01/19] feat(ui5-profile-menu): introduce new component --- packages/fiori/src/ProfileMenu.hbs | 70 ++++ packages/fiori/src/ProfileMenu.ts | 314 ++++++++++++++++++ packages/fiori/src/ProfileMenuAccount.ts | 71 ++++ packages/fiori/src/ProfileMenuItem.hbs | 1 + packages/fiori/src/ProfileMenuItem.ts | 47 +++ packages/fiori/src/bundle.esm.ts | 3 + .../fiori/src/i18n/messagebundle.properties | 12 + packages/fiori/src/themes/ProfileMenu.css | 58 ++++ packages/fiori/src/themes/ProfileMenuItem.css | 3 + packages/fiori/test/pages/ProfileMenu.html | 109 ++++++ .../fiori/ProfileMenu/ProfileMenu.mdx | 8 + .../fiori/ProfileMenu/ProfileMenuAccount.mdx | 8 + .../fiori/ProfileMenu/ProfileMenuItem.mdx | 8 + 13 files changed, 712 insertions(+) create mode 100644 packages/fiori/src/ProfileMenu.hbs create mode 100644 packages/fiori/src/ProfileMenu.ts create mode 100644 packages/fiori/src/ProfileMenuAccount.ts create mode 100644 packages/fiori/src/ProfileMenuItem.hbs create mode 100644 packages/fiori/src/ProfileMenuItem.ts create mode 100644 packages/fiori/src/themes/ProfileMenu.css create mode 100644 packages/fiori/src/themes/ProfileMenuItem.css create mode 100644 packages/fiori/test/pages/ProfileMenu.html create mode 100644 packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenu.mdx create mode 100644 packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuAccount.mdx create mode 100644 packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuItem.mdx diff --git a/packages/fiori/src/ProfileMenu.hbs b/packages/fiori/src/ProfileMenu.hbs new file mode 100644 index 000000000000..ea8090f0d983 --- /dev/null +++ b/packages/fiori/src/ProfileMenu.hbs @@ -0,0 +1,70 @@ + + {{#if _selectedAccount}} + + {{/if}} + + {{#if showOtherAccounts}} + + + {{#if _otherAccounts.length}} + + {{#each _otherAccounts}} + + + + + {{text}} + {{subtitle1}} +
+ {{subtitle2}} + + {{/each}} + + {{/if}} + + {{/if}} + + {{#if menuItems.length}} + + + + {{/if}} + +
+ {{_signOutButtonText}} +
+ \ No newline at end of file diff --git a/packages/fiori/src/ProfileMenu.ts b/packages/fiori/src/ProfileMenu.ts new file mode 100644 index 000000000000..fb5e30b96061 --- /dev/null +++ b/packages/fiori/src/ProfileMenu.ts @@ -0,0 +1,314 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { customElement } from "@ui5/webcomponents-base/dist/decorators.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.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 ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.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 ProfileMenuAccount from "./ProfileMenuAccount.js"; +import ProfileMenuItem from "./ProfileMenuItem.js"; +import ProfileMenuTemplate from "./generated/templates/ProfileMenuTemplate.lit.js"; +import ProfileMenuCss from "./generated/themes/ProfileMenu.css.js"; + +// Texts +import { + PROFILE_MENU_OTHER_ACCOUNT_BUTTON_TXT, + PROFILE_MENU_MANAGE_ACCOUNT_BUTTON_TXT, + PROFILE_MENU_SIGN_OUT_BUTTON_TXT, + PROFILE_MENU_POPOVER_ACCESSIBLE_NAME, +} from "./generated/i18n/i18n-defaults.js"; + +type ProfileMenuItemClickEventDetail = { + item: ProfileMenuItem; +} + +type ProfileMenuOtherAccountClickEventDetail = { + prevSelectedAccount: ProfileMenuAccount; + selectedAccount: ProfileMenuAccount; +} + +/** + * @class + * ### Overview + * + * The `ui5-profile-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 profile and all other logged in accounts. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/ProfileMenu.js";` + * + * `import "@ui5/webcomponents-fiori/dist/ProfileMenuItem.js";` (for `ui5-profile-menu-item`) + * + * @constructor + * @extends UI5Element + * @experimental + * @public + */ +@customElement({ + tag: "ui5-profile-menu", + languageAware: true, + renderer: litRender, + template: ProfileMenuTemplate, + styles: [ProfileMenuCss], + dependencies: [ + ResponsivePopover, + Avatar, + Title, + Text, + Label, + Button, + Panel, + Icon, + List, + ListItemStandard, + Tag, + ], +}) + +/** + * Fired when selected account avatar is clicked. + * @public + */ +@event("avatar-click") + +/** + * Fired when the "Manage Account" button is clicked. + * @public + */ +@event("manage-account-click") + +/** + * Fired when the "Add Account" button is clicked. + * @public + */ +@event("add-account-click") + +/** + * Fired when account is switched. + * @param {ProfileMenuAccount} prevSelectedAccount The previously selected account. + * @param {ProfileMenuAccount} selectedAccount The selected account. + * @public + */ +@event("change-account", { + detail: { + prevSelectedAccount: { type: ProfileMenuAccount }, + selectedAccount: { type: ProfileMenuAccount }, + }, + cancelable: true, +}) + +/** + * Fired when a menu item is clicked. + * @param {ProfileMenuItem} item The selected `profile menu item`. + * @public + */ +@event("item-click", { + detail: { + item: { type: ProfileMenuItem }, + }, + cancelable: true, +}) + +/** + * Fired when the "Sign Out" button is clicked. + * @public + */ +@event("sign-out-click", { + cancelable: true, +}) +class ProfileMenu extends UI5Element { + /** + * Defines, if the Profile menu dialog is opened. + * + * @default false + * @public + */ + @property({ type: Boolean }) + open = false; + + /** + * Defines the ID or DOM Reference of the element at which the profile 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 Profile menu will show other accounts. + * + * @default false + * @public + */ + @property({ type: Boolean }) + showOtherAccounts = false; + + /** + * Defines the menu items. + * @public + */ + @slot({ + type: HTMLElement, + "default": true, + }) + menuItems!: Array; + + /** + * Defines the profile accounts. + * + * **Note:** If one item is used, it will be shown as 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!: ProfileMenuAccount; + + /** + * @private + */ + _otherAccounts: ProfileMenuAccount[] = []; + + onBeforeRendering() { + this._selectedAccount = this.accounts.find(account => account.selected) || this.accounts[0]; + this._otherAccounts = this.accounts.filter(account => account !== this._selectedAccount); + } + + _handleAvatarClick() { + this.fireDecoratorEvent("avatar-click"); + } + + _handleManageAccountClick() { + this.fireDecoratorEvent("manage-account-click"); + } + + _handleAddAccountClick() { + this.fireDecoratorEvent("add-account-click"); + } + + _handleAccountSwitch(e: CustomEvent<{ item: ListItemClickEventDetail & { associatedAccount: ProfileMenuAccount } }>) { + 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._closeProfileMenu(); + } + + _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._closeProfileMenu(); + } + + _handlePopoverAfterClose() { + this.open = false; + } + + _openItemSubMenu(item: ProfileMenuItem) { + if (!item._popover || item._popover.open) { + return; + } + + item._popover.opener = item; + item._popover.open = true; + item.selected = true; + } + + _closeItemSubMenu(item: ProfileMenuItem) { + 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; + } + } + + _closeProfileMenu() { + this.open = false; + } + + get _manageAccountButtonText() { + return ProfileMenu.i18nBundle.getText(PROFILE_MENU_MANAGE_ACCOUNT_BUTTON_TXT); + } + + get _otherAccountsButtonText() { + return ProfileMenu.i18nBundle.getText(PROFILE_MENU_OTHER_ACCOUNT_BUTTON_TXT); + } + + get _signOutButtonText() { + return ProfileMenu.i18nBundle.getText(PROFILE_MENU_SIGN_OUT_BUTTON_TXT); + } + + get accessibleNameText() { + return ProfileMenu.i18nBundle.getText(PROFILE_MENU_POPOVER_ACCESSIBLE_NAME); + } +} + +ProfileMenu.define(); + +export default ProfileMenu; +export type { + ProfileMenuItemClickEventDetail, + ProfileMenuOtherAccountClickEventDetail, +}; diff --git a/packages/fiori/src/ProfileMenuAccount.ts b/packages/fiori/src/ProfileMenuAccount.ts new file mode 100644 index 000000000000..584ab4bda363 --- /dev/null +++ b/packages/fiori/src/ProfileMenuAccount.ts @@ -0,0 +1,71 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { customElement } from "@ui5/webcomponents-base/decorators.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; + +@customElement({ + tag: "ui5-profile-menu-account", +}) +/** + * @class + * ### Overview + * + * The `ui5-profile-menu-account` represents an account in the `ui5-profile-menu`. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/ProfileMenuAccount.js";` + * + * @constructor + * @extends UI5Element + * @experimental + * @public + */ +class ProfileMenuAccount extends UI5Element { + /** + * Defines, the avatar of the profile. + * + * @default "" + * @public + */ + @property({ type: String }) + avatar = ""; + + /** + * Defines, the title text of the profile. + * + * @default "" + * @public + */ + @property({ type: String }) + text!: string; + + /** + * Defines, the subtitle1 of the profile. + * + * @default "" + * @public + */ + @property({ type: String }) + subtitle1?: string; + + /** + * Defines, the subtitle2 of the profile. + * + * @default "" + * @public + */ + @property({ type: String }) + subtitle2?: string; + + /** + * Defines, if the profile is selected + * + * @default "" + * @public + */ + @property({ type: Boolean }) + selected = false; +} + +ProfileMenuAccount.define(); + +export default ProfileMenuAccount; diff --git a/packages/fiori/src/ProfileMenuItem.hbs b/packages/fiori/src/ProfileMenuItem.hbs new file mode 100644 index 000000000000..72d8b8ae22e8 --- /dev/null +++ b/packages/fiori/src/ProfileMenuItem.hbs @@ -0,0 +1 @@ +{{>include "../../main/src/MenuItem.hbs"}} diff --git a/packages/fiori/src/ProfileMenuItem.ts b/packages/fiori/src/ProfileMenuItem.ts new file mode 100644 index 000000000000..8ff405bf673b --- /dev/null +++ b/packages/fiori/src/ProfileMenuItem.ts @@ -0,0 +1,47 @@ +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 ProfileMenuItemTemplate from "./generated/templates/ProfileMenuItemTemplate.lit.js"; + +// Styles +import profileMenuItemCss from "./generated/themes/ProfileMenuItem.css.js"; + +/** + * @class + * + * ### Overview + * + * `ui5-profile-menu-item` is the item to use inside a `ui5-profile-menu`. + * An arbitrary hierarchy structure can be represented by recursively nesting menu items. + * + * ### Usage + * + * `ui5-profile-menu-item` represents a node in a `ui5-profile-menu`. The profile 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-profile-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/ProfileMenuItem.js";` + * @constructor + * @extends MenuItem + * @experimental + * @public + */ +@customElement({ + tag: "ui5-profile-menu-item", + template: ProfileMenuItemTemplate, + styles: [MenuItem.styles, profileMenuItemCss], + dependencies: [Icon, List, ResponsivePopover], +}) +class ProfileMenuItem extends MenuItem { + +} + +ProfileMenuItem.define(); + +export default ProfileMenuItem; diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 0b1a4f0f3e7b..16e608c8c567 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -27,6 +27,9 @@ import NotificationList from "./NotificationList.js"; import Page from "./Page.js"; import ProductSwitch from "./ProductSwitch.js"; import ProductSwitchItem from "./ProductSwitchItem.js"; +import ProfileMenu from "./ProfileMenu.js"; +import ProfileMenuAccount from "./ProfileMenuAccount.js"; +import ProfileMenuItem from "./ProfileMenuItem.js"; import ShellBar from "./ShellBar.js"; import ShellBarItem from "./ShellBarItem.js"; import SideNavigation from "./SideNavigation.js"; diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index c06fb5686dae..e0aa46781ce8 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -430,3 +430,15 @@ SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME=More Items #XTXT: Accessible name for the Group Header SIDE_NAVIGATION_GROUP_HEADER_DESC=Group Header + +#XTXT: Profile menu other account button +PROFILE_MENU_OTHER_ACCOUNT_BUTTON_TXT=Other account + +#XTXT: Profile menu manage account button +PROFILE_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Manage account + +#XTXT: Profile menu sign out button +PROFILE_MENU_SIGN_OUT_BUTTON_TXT=Sign Out + +#XACT: ARIA information for the profile menu popover +PROFILE_MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the profile menu diff --git a/packages/fiori/src/themes/ProfileMenu.css b/packages/fiori/src/themes/ProfileMenu.css new file mode 100644 index 000000000000..47bc833b113c --- /dev/null +++ b/packages/fiori/src/themes/ProfileMenu.css @@ -0,0 +1,58 @@ +.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 { + border: .0625rem solid var(--sapGroup_TitleBorderColor); + margin-bottom: 1rem; +} + +.ui5-pm-other-accounts::part(content) { + padding: 0; +} + +.ui5-profile-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/ProfileMenuItem.css b/packages/fiori/src/themes/ProfileMenuItem.css new file mode 100644 index 000000000000..8a4d369a95a8 --- /dev/null +++ b/packages/fiori/src/themes/ProfileMenuItem.css @@ -0,0 +1,3 @@ +.ui5-menu-rp { + width: 20rem; +} \ No newline at end of file diff --git a/packages/fiori/test/pages/ProfileMenu.html b/packages/fiori/test/pages/ProfileMenu.html new file mode 100644 index 000000000000..eac2b9eea08b --- /dev/null +++ b/packages/fiori/test/pages/ProfileMenu.html @@ -0,0 +1,109 @@ + + + + + Profile Menu + + + + + + + + +Profile menu + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenu.mdx b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenu.mdx new file mode 100644 index 000000000000..f2ed8e071715 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenu.mdx @@ -0,0 +1,8 @@ +--- +slug: ../ProfileMenu +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuAccount.mdx b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuAccount.mdx new file mode 100644 index 000000000000..78da935ca0d6 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuAccount.mdx @@ -0,0 +1,8 @@ +--- +slug: ../ProfileMenuAccount +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuItem.mdx b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuItem.mdx new file mode 100644 index 000000000000..be38d1a8e4e4 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/ProfileMenu/ProfileMenuItem.mdx @@ -0,0 +1,8 @@ +--- +slug: ../ProfileMenuItem +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file From 4865fc027bf5dc977a658ae01d218d90b51d8a8e Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 20 Nov 2024 14:55:34 +0200 Subject: [PATCH 02/19] chore: add manageAccount property add initials property of ProfileMenuAccount --- packages/fiori/src/ProfileMenu.hbs | 17 ++++++++++++----- packages/fiori/src/ProfileMenu.ts | 9 +++++++++ packages/fiori/src/ProfileMenuAccount.ts | 9 +++++++++ packages/fiori/test/pages/ProfileMenu.html | 6 +++--- 4 files changed, 33 insertions(+), 8 deletions(-) diff --git a/packages/fiori/src/ProfileMenu.hbs b/packages/fiori/src/ProfileMenu.hbs index ea8090f0d983..3e5c75640efe 100644 --- a/packages/fiori/src/ProfileMenu.hbs +++ b/packages/fiori/src/ProfileMenu.hbs @@ -13,8 +13,10 @@ > {{#if _selectedAccount}} {{/if}} @@ -37,8 +41,11 @@ {{#each _otherAccounts}} - - + + {{#if avatar}} + + {{/if}} + {{text}} {{subtitle1}} diff --git a/packages/fiori/src/ProfileMenu.ts b/packages/fiori/src/ProfileMenu.ts index fb5e30b96061..198e9dde2aa4 100644 --- a/packages/fiori/src/ProfileMenu.ts +++ b/packages/fiori/src/ProfileMenu.ts @@ -149,6 +149,15 @@ class ProfileMenu extends UI5Element { @property({ converter: DOMReferenceConverter }) opener?: HTMLElement | string; + /** + * Defines, if the Profile menu will show manage accounts. + * + * @default false + * @public + */ + @property({ type: Boolean }) + showManageAccount = false; + /** * Defines, if the Profile menu will show other accounts. * diff --git a/packages/fiori/src/ProfileMenuAccount.ts b/packages/fiori/src/ProfileMenuAccount.ts index 584ab4bda363..e56ddf9d5fb7 100644 --- a/packages/fiori/src/ProfileMenuAccount.ts +++ b/packages/fiori/src/ProfileMenuAccount.ts @@ -29,6 +29,15 @@ class ProfileMenuAccount extends UI5Element { @property({ type: String }) avatar = ""; + /** + * Defines, the avatar initials of the profile. + * + * @default "" + * @public + */ + @property({ type: String }) + initials = ""; + /** * Defines, the title text of the profile. * diff --git a/packages/fiori/test/pages/ProfileMenu.html b/packages/fiori/test/pages/ProfileMenu.html index eac2b9eea08b..6014b10a5225 100644 --- a/packages/fiori/test/pages/ProfileMenu.html +++ b/packages/fiori/test/pages/ProfileMenu.html @@ -21,7 +21,7 @@ Profile menu - + @@ -57,7 +57,7 @@ menu.addEventListener("item-click", function (event) { const item = event.detail.item.getAttribute("data-id"); - + switch (item) { case "setting": console.log("Open Setting Dialog"); From a95be5e2851bf34e73d20b5ea6f96a6df37b5a5d Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Thu, 21 Nov 2024 14:57:26 +0200 Subject: [PATCH 03/19] chore: add sample --- packages/fiori/src/ProfileMenu.hbs | 4 +- packages/fiori/src/ProfileMenu.ts | 1 + packages/fiori/src/ProfileMenuAccount.ts | 4 +- packages/fiori/test/pages/ProfileMenu.html | 2 +- .../fiori/ProfileMenu/ProfileMenu.mdx | 8 ++- .../_samples/fiori/ProfileMenu/Basic/Basic.md | 4 ++ .../_samples/fiori/ProfileMenu/Basic/main.js | 68 +++++++++++++++++++ .../fiori/ProfileMenu/Basic/sample.html | 59 ++++++++++++++++ 8 files changed, 143 insertions(+), 7 deletions(-) create mode 100644 packages/website/docs/_samples/fiori/ProfileMenu/Basic/Basic.md create mode 100644 packages/website/docs/_samples/fiori/ProfileMenu/Basic/main.js create mode 100644 packages/website/docs/_samples/fiori/ProfileMenu/Basic/sample.html diff --git a/packages/fiori/src/ProfileMenu.hbs b/packages/fiori/src/ProfileMenu.hbs index 3e5c75640efe..173b47f25b83 100644 --- a/packages/fiori/src/ProfileMenu.hbs +++ b/packages/fiori/src/ProfileMenu.hbs @@ -13,7 +13,7 @@ > {{#if _selectedAccount}}