@sapudex/web-components 0.127.6 → 0.138.0

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

@@ -35,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}}
@@ -51,6 +53,7 @@
             {{#if hasCart}}
                 <div
                     class="udex-masthead-shell__cart"
+                    @ui5-item-click="{{setSelectedItem}}"
                     @click="{{handleCartClick}}">
                     <slot name="cart"></slot>
                 </div>
@@ -58,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"
@@ -73,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"
@@ -87,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}}
@@ -95,6 +99,7 @@
 {{#*inline "logo"}}
     {{#if homeUrl}}
         <a
+            @click="{{handleLogoClick}}"
             role="link"
             href="{{homeUrl}}"
             title="{{logoTitle}}"
@@ -121,6 +126,7 @@
 {{#*inline "siteLabel"}}
     {{#if homeUrl}}
         <a
+            @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
             target="_self"

package/src/MastheadShell.ts

@@ -24,6 +24,7 @@ import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
 const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 const breakpointSizeM: number = 1279;
+
 /**
  * @class
  *
@@ -58,7 +59,6 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the search button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#searchClick
  * @public
  */
 @event("search-click")
@@ -66,7 +66,6 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the cart button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#cartClick
  * @public
  */
 @event("cart-click")
@@ -74,10 +73,36 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the profile button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#profileClick
  * @public
  */
 @event("profile-click")
+
+/**
+ * Fired event when the user clicks the logo.
+ *
+ * @public
+ */
+@event("logo-click", {
+  detail: {
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
+/**
+ * Fired event when the user clicks the site label.
+ *
+ * @public
+ */
+@event("site-label-click", {
+  detail: {
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
 class UDExMastheadShell extends UI5Element {
   /**
    * Slot for mobile menu
@@ -281,11 +306,11 @@ class UDExMastheadShell extends UI5Element {
       this._isSearchVisible = false;
     }
 
-    if (this._shouldHandleResize) {
-      this._mobileMenu?.showFirstLevelMenu();
-      this.removeOverflowBody();
+    if (this._shouldHandleResize && this.isMobileView) {
+      this.resetMobileMenuOpenState();
       return;
     }
+
     this._shouldHandleResize = true;
   }
 
@@ -313,6 +338,14 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
+  handleLogoClick(e: CustomEvent): void {
+    this.fireEvent("logo-click", { originalEvent: e });
+  }
+
+  handleSiteLabelClick(e: CustomEvent): void {
+    this.fireEvent("site-label-click", { originalEvent: e });
+  }
+
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
     this._isSearchVisible = true;
@@ -325,13 +358,11 @@ class UDExMastheadShell extends UI5Element {
 
   handleCartClick(e: CustomEvent) {
     e.stopPropagation();
-    this.setSelectedItem(e);
     this.fireEvent("cart-click");
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.setSelectedItem(e);
     this.fireEvent("profile-click");
   }
 
@@ -457,6 +488,16 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
+  resetMobileMenuOpenState(): void {
+    this.removeActiveMobileClass();
+    this.resetSelectedItems();
+    this._mobileMenu?.showFirstLevelMenu();
+
+    if (this.bodyOverflow) {
+      this.removeOverflowBody();
+    }
+  }
+
   get searchOpener(): UDExMastheadItem | null | undefined {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }

package/src/MediaPlayer.hbs

@@ -10,8 +10,7 @@
 <audio
   id="{{playerElementId}}"
   class="udex-media-player__video  video-js {{aspectRatioClass}}"
-  preload="auto"
-  data-setup="{{dataSetup}}" 
+  preload="auto" 
 >
   <source src="{{source}}" type="{{type}}" />
 </audio>
@@ -21,7 +20,6 @@
   <video
     id="{{playerElementId}}"
     class="udex-media-player__video video-js {{aspectRatioClass}}"
-    data-setup="{{dataSetup}}" 
   >
     <source src="{{source}}" type="{{type}}">
     {{#each _tracks}}