@sapudex/web-components 0.117.1 → 0.138.0

package/src/MastheadMobileMenu.hbs

@@ -11,15 +11,36 @@
             {{/if}}
             {{#if _showCategories}}
                 <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
-                    <udex-masthead-menu-item
-                        class="udex-masthead-mobile-menu__back-item"
-                        @click="{{handleBackToMenuItems}}"
-                        label="{{_clickedItem.innerText}}"
-                        type="Button"
-                        has-border
-                        icon-start
-                        back-to-nav>
-                    </udex-masthead-menu-item>
+                    {{#if _hideExploreSapBtn}}
+                        <udex-masthead-menu-item
+                            class="udex-masthead-mobile-menu__back-item"
+                            @click="{{handleExploreBackToMenuItems}}"
+                            label="{{_clickedItem.innerText}}"
+                            type="Button"
+                            has-border
+                            icon-start
+                            is-explore-back>
+                        </udex-masthead-menu-item>
+                    {{else}}
+                        {{#if isNotMultipleMode}}
+                            <udex-masthead-menu-item
+                                class="udex-masthead-mobile-menu__heading"
+                                label="{{_clickedItem.innerText}}"
+                                type="Heading"
+                                has-border>
+                            </udex-masthead-menu-item>
+                        {{else}}
+                            <udex-masthead-menu-item
+                                class="udex-masthead-mobile-menu__back-item"
+                                @click="{{handleBackToMenuItems}}"
+                                label="{{_clickedItem.innerText}}"
+                                type="Button"
+                                has-border
+                                icon-start
+                                is-back-to-nav>
+                            </udex-masthead-menu-item>
+                        {{/if}}
+                    {{/if}}
                 </li>
                 {{>categories}}
             {{/if}}
@@ -32,7 +53,7 @@
                         type="Button"
                         has-border
                         icon-start
-                        back-to-categories>
+                        is-back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
                 {{>category-items}}
@@ -69,6 +90,7 @@
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
+                    @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     has-border>
@@ -84,6 +106,7 @@
             <udex-masthead-menu-item
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
+                @click="{{handleMobileItemEvent}}"
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -106,6 +129,7 @@
             {{#each this.items}}
                 <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
                     <udex-masthead-menu-item
+                        @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
                         has-border>
@@ -120,6 +144,7 @@
     {{#if _category.url}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
+                @click="{{../handleMobileItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
                 has-border>
@@ -129,6 +154,7 @@
     {{#each _category.items}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
+                @click="{{../handleMobileItemEvent}}"
                 label="{{this.title}}"
                 url="{{this.url}}"
                 has-border>

package/src/MastheadMobileMenu.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
@@ -13,9 +14,15 @@ import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
+export type MobileItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExMastheadMenuItem,
+}
+
 /**
  * @class
  *
@@ -41,6 +48,31 @@ import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js"
   dependencies: [UDExMastheadMenuItem],
 })
 
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
+/**
+ * Fires when explorer menu button is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("explorer-menu-click")
+
 class UDExMastheadMobileMenu extends UI5Element {
   /**
    * Slot for search
@@ -83,6 +115,9 @@ class UDExMastheadMobileMenu extends UI5Element {
   _clickedItem!: UDExMastheadItem;
   _categories!: Array<SubMenuLinkItem>;
   _category!: SubMenuLinkItem;
+  _shouldFocusItemByIndex!: boolean;
+  _shouldFocusExploreBtn!: boolean;
+  _focusedItemIndex!: number;
 
   static i18nBundle: I18nBundle;
 
@@ -91,34 +126,53 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   onAfterRendering() {
-    if (this.hasAttribute("slot")) {
-      this.focusFirstItem();
-    }
+    this.handleMenuMode();
+    this.handleFocusItem();
   }
 
   handleMenuItemClick(e: Event) {
     e.preventDefault();
-    this.openCategories(e);
+    e.stopPropagation();
+    const item = this.getItemByList(e.target as UDExMastheadItem);
+    this.openCategories(item);
+    this.setFocusItemByIndex(0);
+    this.fireMobileItemEvent(e);
   }
 
   handleMenuCategoryClick(e: Event) {
     e.preventDefault();
+    e.stopPropagation();
     this.openCategoryItems(e);
+    this.setFocusItemByIndex(0);
+    this.fireMobileItemEvent(e);
   }
 
   handleExploreSapClick(e: Event) {
     e.preventDefault();
-    this._hideExploreSapBtn = true;
-    this._showCategoryItems = false;
-    this.openCategories(e);
+    this.openExploreSapMenu(e);
+    this.setFocusItemByIndex(0);
+    this.fireEvent("explorer-menu-click");
   }
 
-  handleBackToMenuItems() {
+  handleBackToMenuItems(e: Event) {
+    e.stopPropagation();
     this.showFirstLevelMenu();
+    this.setFocusItemByIndex(this.items.indexOf(this._clickedItem));
+    this.fireMobileItemEvent(e);
   }
 
-  handleBackToCategories() {
+  handleBackToCategories(e: Event) {
+    e.stopPropagation();
     this.showCategories();
+    this.setFocusItemByIndex(this._category.index + 1);
+    this.fireMobileItemEvent(e);
+  }
+
+  handleExploreBackToMenuItems(e: Event) {
+    e.stopPropagation();
+    this.showFirstLevelMenu();
+    this.setFocusExploreBtn();
+    this.fireMobileItemEvent(e);
   }
 
   handleKeyDown(e: KeyboardEvent) {
@@ -175,36 +229,85 @@ class UDExMastheadMobileMenu extends UI5Element {
     }
   }
 
+  handleMobileItemEvent(e: Event) {
+    e.stopPropagation();
+    this.fireMobileItemEvent(e);
+  }
+
+  handleMenuMode() {
+    if (this.isCategoriesOpen) {
+      if (this.isNoMenuItemsMode) {
+        this.openCategories(this.exploreItem);
+      }
+
+      if (this.isSingleMenuMode) {
+        this.openCategories(this.items[0]);
+      }
+    }
+  }
+
+  handleFocusItem() {
+    if (this._shouldFocusItemByIndex) {
+      this.focusItemByIndex(this._focusedItemIndex);
+    }
+
+    if (this._shouldFocusExploreBtn) {
+      this.focusExploreBtn();
+    }
+  }
+
   moveToBackWithKeyboard(e: KeyboardEvent) {
-    const target = e.target as UDExMastheadItem;
-    if (target.hasAttribute("back-to-nav")) {
+    const target = e.target as UDExMastheadMenuItem;
+    if (target.hasAttribute("is-back-to-nav")) {
       this.showFirstLevelMenu();
+      this.setFocusItemByIndex(this.items.indexOf(this._clickedItem));
+      this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("back-to-categories")) {
+    if (target.hasAttribute("is-back-to-categories")) {
       this.showCategories();
+      this.setFocusItemByIndex(this._category.index + 1);
+      this.fireMobileItemEvent(e);
+    }
+
+    if (target.hasAttribute("is-explore-back")) {
+      this.showFirstLevelMenu();
+      this.setFocusExploreBtn();
+      this.fireMobileItemEvent(e);
     }
   }
 
   moveToNextLevelWithKeyboard(e: KeyboardEvent) {
     const target = e.target as UDExMastheadItem;
+    const item = this.getItemByList(e.target as UDExMastheadItem);
 
     if (target.hasAttribute("is-explore")) {
       this._hideExploreSapBtn = true;
       this._showCategoryItems = false;
+      this.fireMobileItemEvent(e);
     }
 
     if (target.hasAttribute("first-level")) {
-      this.openCategories(e);
+      this.openCategories(item);
+      this.fireMobileItemEvent(e);
     }
 
     if (target.hasAttribute("second-level")) {
       this.openCategoryItems(e);
+      this.fireMobileItemEvent(e);
     }
+
+    this.setFocusItemByIndex(0);
+  }
+
+  focusItemByIndex(index: number): void {
+    this.getListItemByIndex(index)?.focus();
+    this._shouldFocusItemByIndex = false;
   }
 
-  focusFirstItem(): void {
-    this.getListItemByIndex(0)?.focus();
+  focusExploreBtn(): void {
+    this.exploreBtnMenu.focus();
+    this._shouldFocusExploreBtn = false;
   }
 
   focusPreviousItem(e: KeyboardEvent): void {
@@ -226,17 +329,23 @@ class UDExMastheadMobileMenu extends UI5Element {
     listItem?.focus();
   }
 
-  openCategories(e: Event) {
+  openExploreSapMenu(e: Event) {
     const item = this.getItemByList(e.target as UDExMastheadItem);
+    this._hideExploreSapBtn = true;
+    this._showCategoryItems = false;
+    this.openCategories(item);
+  }
+
+  openCategories(item: UDExMastheadItem) {
     this._clickedItem = item;
     this._categories = this.getCategories(item.getSubItems());
-    this.setCategoryByItem(item);
     this._showCategories = true;
   }
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
-    this.setCategoryByItem(item);
+    const index = Number(item.getAttribute("id"));
+    this._category = { ...this._categories[index], index };
     this._showCategories = false;
     this._showCategoryItems = true;
   }
@@ -252,9 +361,20 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
-  setCategoryByItem(item: UDExMastheadMenuItem | UDExMastheadItem) {
-    const index = Number(item.getAttribute("id"));
-    this._category = this._categories[index];
+  fireMobileItemEvent(e: Event) {
+    this.fireEvent<MobileItemClickEventDetail>("item-click", {
+      item: e.target as UDExMastheadMenuItem,
+      originalEvent: e,
+    }, true, false);
+  }
+
+  setFocusItemByIndex(index: number) {
+    this._shouldFocusItemByIndex = true;
+    this._focusedItemIndex = index;
+  }
+
+  setFocusExploreBtn(): void {
+    this._shouldFocusExploreBtn = true;
   }
 
   getItemByList(el: UDExMastheadItem): UDExMastheadItem {
@@ -284,6 +404,10 @@ class UDExMastheadMobileMenu extends UI5Element {
     return this.navigationItems[index]?.querySelector("udex-masthead-menu-item");
   }
 
+  get exploreBtnMenu(): UDExMastheadMenuItem {
+    return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
+  }
+
   get isRtlDirection(): boolean {
     return this._direction === "rtl";
   }
@@ -305,7 +429,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   get showExploreBtn(): boolean {
-    return this.hasExploreBtnSlot && !this._hideExploreSapBtn;
+    return this.hasExploreBtnSlot && !this._hideExploreSapBtn && !!this.items.length;
   }
 
   get hasExploreBtnSlot(): boolean {
@@ -315,6 +439,22 @@ class UDExMastheadMobileMenu extends UI5Element {
   get hasSearchSlot(): boolean {
     return !!this.search.length;
   }
+
+  get isCategoriesOpen(): boolean {
+    return !this._showCategoryItems;
+  }
+
+  get isSingleMenuMode(): boolean {
+    return this.items.length === 1 && this.isCategoriesOpen;
+  }
+
+  get isNoMenuItemsMode(): boolean {
+    return this.items.length === 0 && this.isCategoriesOpen;
+  }
+
+  get isNotMultipleMode(): boolean {
+    return this.isSingleMenuMode || this.isNoMenuItemsMode;
+  }
 }
 
 UDExMastheadMobileMenu.define();

package/src/MastheadProfileMenu.hbs

@@ -20,10 +20,14 @@
     </div>
   {{/if}}
   <div class="udex-masthead-profile-menu__links">
-    <udex-masthead-menu sub-items='{{linksList}}'></udex-masthead-menu>
+    <udex-masthead-menu
+        sub-items='{{linksList}}'
+        @ui5-menu-item-click={{handleProfileMenuItemClick}}>
+    </udex-masthead-menu>
     {{#if logoutLink}}
-        <div class="udex-masthead-profile-menu__actions" @click={{userLogout}}>
+        <div class="udex-masthead-profile-menu__actions">
             <udex-masthead-menu-item
+                @click={{handleUserLogoutItemClick}}
                 url="{{logoutUrl}}"
                 label="{{logoutText}}">
             </udex-masthead-menu-item>

package/src/MastheadProfileMenu.ts

@@ -9,16 +9,26 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
 
 interface UserData {
-    name?: string,
-    username?: string,
-    email?: string,
-    avatarUrl?: string,
-    avatarInitials?: string
+  name?: string,
+  username?: string,
+  email?: string,
+  avatarUrl?: string,
+  avatarInitials?: string
+}
+
+export type LogoutClickEventDetail = {
+  originalEvent: Event,
+}
+
+export type ProfileMenuItemClickEventDetail = {
+  item: UDExMastheadMenuItem,
+  originalEvent: Event,
 }
 
 /**
@@ -50,7 +60,30 @@ interface UserData {
  * Fired when use click Logout link
  * @public
  */
-@event("logout")
+@event("logout", {
+  detail: {
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
+/**
+ * Fires when profile ment item is clicked
+ *
+ * @public
+ */
+@event("profile-item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
 class UDExMastheadProfileMenu extends UI5Element {
   /**
    * Defines the object of link values
@@ -60,6 +93,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    */
   @property()
     links!: string;
+
   /**
    * Defines the object of user profile data
    *
@@ -68,6 +102,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    */
   @property()
     loggedInUser!: string;
+
   /**
    * Defines the link for logout
    *
@@ -86,10 +121,29 @@ class UDExMastheadProfileMenu extends UI5Element {
     message!: Array<Node>;
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
+  static async onDefine(): Promise<void> {
     UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
+  handleUserLogoutItemClick(e: Event): void {
+    this.fireEvent<LogoutClickEventDetail>("logout", {
+      originalEvent: e,
+    });
+  }
+
+  handleProfileMenuItemClick(e: CustomEvent): void {
+    const { item, originalEvent } = e.detail;
+
+    this.fireEvent<ProfileMenuItemClickEventDetail>("profile-item-click", {
+      item,
+      originalEvent,
+    });
+  }
+
+  parseArrayFromString<T>(string: string): T[] {
+    return string ? JSON.parse(string) as T[] : [];
+  }
+
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -100,25 +154,17 @@ class UDExMastheadProfileMenu extends UI5Element {
     return this.parseArrayFromString(this.loggedInUser) as UserData;
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
+  get messageAvailable(): boolean {
+    return !!this.message.length;
   }
 
-  get messageAvailable() {
-    return this.message.length;
+  get logoutLink(): boolean {
+    return !!this.logoutUrl.length;
   }
 
-  get logoutLink() {
-    return this.logoutUrl.length;
-  }
-
-  get logoutText() {
+  get logoutText(): string {
     return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
   }
-
-  userLogout() {
-    this.fireEvent("logout");
-  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.hbs

@@ -23,7 +23,10 @@
     {{#if _isSearchVisible}}
         <div class="udex-masthead-shell__search-container">
             <slot name="search"></slot>
+        </div>
+        <div class="udex-masthead-shell__btn-holder">
             <udex-control-button
+                class="udex-masthead-shell__close-search-btn"
                 size="Small"
                 icon="decline"
                 accessible-name="{{closeButtonAccessibleName}}"
@@ -32,7 +35,9 @@
         </div>
     {{else}}
         <div class="udex-masthead-shell__right-menu">
-            <div class="udex-masthead-shell__explore" @click="{{setSelectedItem}}">
+            <div
+                class="udex-masthead-shell__explore"
+                @ui5-item-click="{{setSelectedItem}}">
                 <slot name="exploreSAP"></slot>
             </div>
             {{#if hasSearch}}
@@ -48,6 +53,7 @@
             {{#if hasCart}}
                 <div
                     class="udex-masthead-shell__cart"
+                    @ui5-item-click="{{setSelectedItem}}"
                     @click="{{handleCartClick}}">
                     <slot name="cart"></slot>
                 </div>
@@ -55,13 +61,14 @@
             {{#if hasProfile}}
                 <div
                     class="udex-masthead-shell__profile"
+                    @ui5-item-click="{{setSelectedItem}}"
                     @click="{{handleProfileClick}}">
                     <slot name="profile"></slot>
                 </div>
             {{/if}}
             {{#if hasMobileMenuButtons}}
                 <udex-masthead-item
-                    @click="{{handleMobileMenuClick}}"
+                    @ui5-item-click="{{handleMobileMenuClick}}"
                     class="udex-masthead-shell__menu-btn"
                     accessible-role="button"
                     icon="menu2"
@@ -70,7 +77,7 @@
                     <slot slot="dropdown" name="mobileMenu"></slot>
                 </udex-masthead-item>
                 <udex-masthead-item
-                    @click="{{handleMobileCloseClick}}"
+                    @ui5-item-click="{{handleMobileCloseClick}}"
                     class="udex-masthead-shell__close-btn"
                     accessible-role="button"
                     icon="decline"
@@ -84,7 +91,7 @@
 </div>
 
 {{#*inline "item"}}
-    <div @click="{{../setSelectedItem}}" class="udex-masthead-shell__item" role="menuitem">
+    <div @ui5-item-click="{{../setSelectedItem}}" class="udex-masthead-shell__item" role="menuitem">
         <slot name="{{_individualSlot}}"></slot>
     </div>
 {{/inline}}
@@ -92,8 +99,10 @@
 {{#*inline "logo"}}
     {{#if homeUrl}}
         <a
+            @click="{{handleLogoClick}}"
             role="link"
             href="{{homeUrl}}"
+            title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
             class="udex-masthead-shell__logo udex-masthead-shell__logo--link">
@@ -117,6 +126,7 @@
 {{#*inline "siteLabel"}}
     {{#if homeUrl}}
         <a
+            @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
             target="_self"