@sapudex/web-components 0.230.1 → 0.230.3

package/src/MastheadItem.ts

@@ -11,15 +11,17 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
-  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT,
+  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
-import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { Target } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import AnalyticsName from "./types/AnalyticsName.js";
+import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
@@ -56,11 +58,14 @@ export type MenuItem = {
 export type ItemClickEventDetail = {
   originalEvent: Event,
   item: UDExMastheadItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 export type DropdownEventDetail = {
   title: string,
   action: DropdownItemAction,
+  analyticsName: AnalyticsName,
 }
 
 export const DropdownBaseEventDetail = {
@@ -78,6 +83,12 @@ export const ItemBaseEvent = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 };
 
@@ -98,6 +109,7 @@ export const ItemBaseEvent = {
  * @extends UI5Element
  * @public
  */
+
 @customElement({
   tag: "udex-masthead-item",
   renderer: litRender,
@@ -266,6 +278,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the label for analytics
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
   /**
    * Slot for the dropdown
    *
@@ -284,9 +304,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  @property({ type: Boolean })
+    _preventFocusOut!: boolean;
+
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
-  _isEscPress!: boolean;
 
   static i18nBundle: I18nBundle;
 
@@ -300,6 +322,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  onBeforeRendering(): void {
+    this.label = this.eventItemTitle;
+  }
+
   onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
     this._mastheadShell = this.mastheadShell;
@@ -309,14 +335,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
 
     this.handleOutsideClick();
-    this._isEscPress = false;
   }
 
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const target = e.target as HTMLElement;
       const item = target.closest("[udex-masthead-item]");
-      if (item !== this && !this.isMobile) {
+      if (item !== this && !this.isMobile && this.selected) {
         if (this.isDropdownOpened) {
           this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.ClickOutside);
         }
@@ -326,13 +351,27 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  handleMouseDown(): void {
+    this._preventFocusOut = true;
+  }
+
+  handleMouseUp(): void {
+    this._preventFocusOut = false;
+  }
+
   handleFocusout(e: FocusEvent): void {
-    if (e.relatedTarget === null || this._isEscPress) {
+    if (this.isFocusOutPrevented(e)) {
       return;
     }
 
-    const eTarget = e.target as HTMLElement;
-    if (!this.isMobile && eTarget.getAttribute("slot") === "dropdown") {
+    this.handleFocusOutForDropdowns(e);
+  }
+
+  handleFocusOutForDropdowns(e: FocusEvent): void {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const target = e.target as HTMLElement;
+
+    if (this.shouldCloseDropdown(relatedTarget, target)) {
       this.closeDropdown();
     }
   }
@@ -348,7 +387,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
-    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -386,17 +424,19 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   fireDropdownCloseEvent(title: string, action: DropdownItemAction): void {
-    this.fireEvent<DropdownEventDetail>("dropdown-closed", { title, action });
+    this.fireEvent<DropdownEventDetail>("dropdown-closed", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireDropdownOpenEvent(title: string, action: DropdownItemAction): void {
-    this.fireEvent<DropdownEventDetail>("dropdown-opened", { title, action });
+    this.fireEvent<DropdownEventDetail>("dropdown-opened", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireItemClickEvent(e: Event): void {
     this.fireEvent<ItemClickEventDetail>("item-click", {
       item: this,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: e.currentTarget as HTMLElement,
     });
   }
 
@@ -462,6 +502,28 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.parseArrayFromString(this.subItems);
   }
 
+  private isFocusOutPrevented(e: FocusEvent): boolean {
+    return this.isMobile || e.relatedTarget === null || this._preventFocusOut;
+  }
+
+  private isProfileButtonTarget(relatedTarget: HTMLElement | null): boolean {
+    return (relatedTarget?.tagName === "UDEX-AVATAR" || relatedTarget?.tagName === "UDEX-MASTHEAD-ITEM") && this.isProfileBtn;
+  }
+
+  private isNavItemTarget(target: HTMLElement): boolean {
+    return target.getAttribute("slot") === "dropdown" && !this.isProfileBtn;
+  }
+
+  private isRelatedTargetOutside(relatedTarget: HTMLElement | null): boolean {
+    return relatedTarget?.closest("[udex-masthead-item]") === null;
+  }
+
+  private shouldCloseDropdown(relatedTarget: HTMLElement, target:HTMLElement): boolean {
+    return this.isRelatedTargetOutside(relatedTarget)
+      || this.isProfileButtonTarget(relatedTarget)
+      || this.isNavItemTarget(target);
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -541,6 +603,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "cart";
   }
 
+  get isSearchBtn(): boolean {
+    return this.icon === "search";
+  }
+
   get isSupportBtn(): boolean {
     return this.getAttribute("slot") === "support";
   }
@@ -560,24 +626,19 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get openInNewWindowText(): string {
     return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
   }
-
   get eventItemTitle(): string {
-    if (this.accessibleName) {
-      return this.accessibleName.trim();
+    if (this.isSearchBtn) {
+      return UDExMastheadItem.i18nBundle.getText(SEARCH);
     }
-
     if (this.isCartBtn) {
       return UDExMastheadItem.i18nBundle.getText(CART);
     }
-
     if (this.isProfileBtn) {
       return UDExMastheadItem.i18nBundle.getText(PROFILE);
     }
-
     if (this.isCountrySelectorBtn) {
       return UDExMastheadItem.i18nBundle.getText(COUNTRY_SELECTOR);
     }
-
     if (this.isSupportBtn) {
       return UDExMastheadItem.i18nBundle.getText(SUPPORT);
     }

package/src/MastheadMenu.ts

@@ -11,6 +11,7 @@ import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -38,6 +39,8 @@ export type MenuItemClickEventDetail = {
   category?: string,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -82,6 +85,12 @@ export type MenuItemClickEventDetail = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -136,10 +145,11 @@ class UDExMastheadMenu extends UI5Element {
   handleMenuItemClick(e: Event): void {
     const item = e.target as UDExMastheadMenuItem;
     const { url, type } = item;
-
     if (url?.length) {
       const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
       this.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
+        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+        analyticsName: AnalyticsName.Header,
         item,
         originalEvent: e,
         ...(type !== ItemType.Heading && { category: list?.getAttribute("category") || "" }),

package/src/MastheadMenuItem.hbs

@@ -41,7 +41,7 @@
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
             aria-haspopup="{{ariaHasPopup}}"
-            role="button"
+            role="{{accessibleRoleText}}"
             tabindex="{{_tabIndex}}">
             {{#if iconStart}}
                 {{>arrow-left}}

package/src/MastheadMenuItem.ts

@@ -226,8 +226,8 @@ class UDExMastheadMenuItem extends UI5Element {
     return this.externalLink ? "new-win-desc" : null;
   }
 
-  get accessibleRoleText(): string | null {
-    return this.accessibleRole ? this.accessibleRole : null;
+  get accessibleRoleText(): string {
+    return this.accessibleRole ? this.accessibleRole : "menuitem";
   }
 
   get partAttr(): string {

package/src/MastheadMobileMenu.hbs

@@ -10,7 +10,7 @@
                 {{>nav-items}}
             {{/if}}
             {{#if _showCategories}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     {{#if _hideExploreSapBtn}}
                         <udex-masthead-menu-item
                             class="udex-masthead-mobile-menu__back-item"
@@ -45,7 +45,7 @@
                 {{>categories}}
             {{/if}}
             {{#if _showCategoryItems}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-mobile-menu__back-item"
                         @click="{{handleBackToCategories}}"
@@ -78,7 +78,7 @@
 
 {{#*inline "nav-items"}}
     {{#each items}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             {{#if this.subItems}}
                 <udex-masthead-menu-item
                     @click="{{../handleMenuItemClick}}"
@@ -105,7 +105,7 @@
 
 {{#*inline "categories"}}
     {{#if _clickedItem.href}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             <udex-masthead-menu-item
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
@@ -116,7 +116,7 @@
     {{/if}}
     {{#each _categories}}
         {{#if this.category}}
-            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
                 <udex-masthead-menu-item
                     @click="{{../handleMenuCategoryClick}}"
                     url="{{this.url}}"
@@ -131,7 +131,7 @@
             </li>
         {{else}}
             {{#each this.items}}
-                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
@@ -146,7 +146,7 @@
 
 {{#*inline "category-items"}}
     {{#if _category.url}}
-        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+        <li class="udex-masthead-mobile-menu__list-item" role="none">
             <udex-masthead-menu-item
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
@@ -157,7 +157,7 @@
     {{/if}}
     {{#each _category.items}}
         {{#if this.url}}
-            <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
                 <udex-masthead-menu-item
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"

package/src/MastheadMobileMenu.ts

@@ -12,8 +12,8 @@ import {
 import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
-
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
@@ -23,6 +23,8 @@ export type MobileItemClickEventDetail = {
   isMobile: boolean,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -64,6 +66,12 @@ export type MobileItemClickEventDetail = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -78,6 +86,12 @@ export type MobileItemClickEventDetail = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -160,7 +174,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireEvent("explorer-menu-click", { originalEvent: e });
+    this.fireExploreSapMobileButton(e);
   }
 
   handleBackToMenuItems(e: Event) {
@@ -420,14 +434,26 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   fireMobileItemEvent(e: Event, category?: string) {
+    const item = e.target as UDExMastheadMenuItem;
+
     this.fireEvent<MobileItemClickEventDetail>("item-click", {
       ...(category && { category }),
       isMobile: true,
-      item: e.target as UDExMastheadMenuItem,
+      item,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
     }, true, false);
   }
 
+  fireExploreSapMobileButton(e: Event) {
+    this.fireEvent("explorer-menu-click", {
+      originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: (e.target as HTMLElement).shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+    });
+  }
+
   setFocusItemByIndex(index: number) {
     this._shouldFocusItemByIndex = true;
     this._focusedItemIndex = index;

package/src/MastheadProfileMenu.ts

@@ -10,6 +10,7 @@ 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";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -22,13 +23,11 @@ interface UserData {
   avatarInitials?: string
 }
 
-export type LogoutClickEventDetail = {
-  originalEvent: Event,
-}
-
-export type ProfileMenuItemClickEventDetail = {
-  item: UDExMastheadMenuItem,
+export type UDExProfileClickEventDetail = {
   originalEvent: Event,
+  analyticsName: AnalyticsName,
+  item: UDExMastheadMenuItem
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -65,6 +64,15 @@ export type ProfileMenuItemClickEventDetail = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    item: {
+      type: HTMLElement,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -81,6 +89,12 @@ export type ProfileMenuItemClickEventDetail = {
     originalEvent: {
       type: Event,
     },
+    analyticsName: {
+      type: AnalyticsName,
+    },
+    sourceNode: {
+      type: HTMLElement,
+    },
   },
 })
 
@@ -135,17 +149,24 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   handleUserLogoutItemClick(e: Event): void {
-    this.fireEvent<LogoutClickEventDetail>("logout", {
+    const item = e.target as UDExMastheadMenuItem;
+
+    this.fireEvent<UDExProfileClickEventDetail>("logout", {
+      item,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
     });
   }
 
   handleProfileMenuItemClick(e: CustomEvent): void {
     const { item, originalEvent } = e.detail;
 
-    this.fireEvent<ProfileMenuItemClickEventDetail>("profile-item-click", {
+    this.fireEvent<UDExProfileClickEventDetail>("profile-item-click", {
       item,
       originalEvent,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 

package/src/MastheadShell.ts

@@ -24,6 +24,7 @@ import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -34,6 +35,14 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
 export const MastheadOriginalEvent = {
   detail: {
     originalEvent: { type: Event },
+    analyticsName: { type: AnalyticsName },
+    sourceNode: { type: HTMLElement },
+  },
+};
+
+export const AnalyticsNameEventDetail = {
+  detail: {
+    analyticsName: { type: AnalyticsName },
   },
 };
 
@@ -74,14 +83,14 @@ export const MastheadOriginalEvent = {
  *
  * @public
  */
-@event("mobile-menu-open")
+@event("mobile-menu-open", AnalyticsNameEventDetail)
 
 /**
  * Fired event when the user clicks the mobile menu button closer.
  *
  * @public
  */
-@event("mobile-menu-close")
+@event("mobile-menu-close", AnalyticsNameEventDetail)
 
 /**
  * Fired event when the user clicks the search button trigger.
@@ -102,14 +111,14 @@ export const MastheadOriginalEvent = {
  *
  * @public
  */
-@event("search-opened")
+@event("search-opened", AnalyticsNameEventDetail)
 
 /**
  * Fired event when the search panel is closed.
  *
  * @public
  */
-@event("search-closed")
+@event("search-closed", AnalyticsNameEventDetail)
 
 /**
  * Fired event when the user clicks the cart button trigger.
@@ -150,7 +159,6 @@ export const MastheadOriginalEvent = {
  * Fired event when the user clicks the site label.
  *
  * @public
- * @public
  */
 @event("site-label-click", MastheadOriginalEvent)
 
@@ -486,37 +494,37 @@ class UDExMastheadShell extends UI5Element {
   }
 
   handleLogoClick(e: CustomEvent): void {
-    this.fireEvent("logo-click", { originalEvent: e });
+    this.fireMastheadEvent("logo-click", e);
   }
 
   handleSiteLabelClick(e: CustomEvent): void {
-    this.fireEvent("site-label-click", { originalEvent: e });
+    this.fireMastheadEvent("site-label-click", e);
   }
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("search-click", { originalEvent: e });
+    this.fireMastheadEvent("search-click", e);
     this.openSearch();
   }
 
   handleCartClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("cart-click", { originalEvent: e });
+    this.fireMastheadEvent("cart-click", e);
   }
 
   handleSupportClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("support-click", { originalEvent: e });
+    this.fireMastheadEvent("support-click", e);
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("profile-click", { originalEvent: e });
+    this.fireMastheadEvent("profile-click", e);
   }
 
   handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("country-selector-click", { originalEvent: e });
+    this.fireMastheadEvent("country-selector-click", e);
   }
 
   handleOpenMobileMenu(): void {
@@ -532,12 +540,12 @@ class UDExMastheadShell extends UI5Element {
       this.setOverflowBody();
     }
 
-    this.fireEvent("mobile-menu-open");
+    this.fireMastheadEvent("mobile-menu-open");
   }
 
   handleCloseSearch(e: CustomEvent): void {
     this._closeBtnClicked = true;
-    this.fireEvent("search-close-click", { originalEvent: e });
+    this.fireMastheadEvent("search-close-click", e);
     this.closeSearch();
   }
 
@@ -730,7 +738,16 @@ class UDExMastheadShell extends UI5Element {
    */
   closeSearch(): void {
     this._isSearchOpened = false;
-    this.fireEvent("search-closed");
+    this.fireMastheadEvent("search-closed");
+  }
+
+  fireMastheadEvent(eventName: string, e?: CustomEvent): void {
+    const eventDetails = {
+      analyticsName: AnalyticsName.Header,
+      ...(e && { originalEvent: e }),
+      ...(e && { sourceNode: e.currentTarget as HTMLElement }),
+    };
+    this.fireEvent(eventName, eventDetails);
   }
 
   /**
@@ -754,7 +771,7 @@ class UDExMastheadShell extends UI5Element {
       this._searchOpener.selected = false;
     }
 
-    this.fireEvent("search-opened");
+    this.fireMastheadEvent("search-opened");
   }
 
   /**
@@ -785,7 +802,7 @@ class UDExMastheadShell extends UI5Element {
       this.removeOverflowBody();
     }
 
-    this.fireEvent("mobile-menu-close");
+    this.fireMastheadEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {