@sapudex/web-components 2.4.2 → 2.6.0

package/src/MastheadMenu.ts

@@ -9,6 +9,7 @@ import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
+import type UDExMastheadItem from "./MastheadItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -23,6 +24,7 @@ export type Item = {
   title: string;
   url: string;
   externalLink: boolean;
+  isDivider?: boolean;
 };
 
 export type SubMenuLinkItem = {
@@ -38,9 +40,10 @@ export type MenuItem = {
 
 type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
+  analyticsPath: Array<string>,
+  analyticsName: AnalyticsName,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
-  analyticsName: AnalyticsName,
   sourceNode: HTMLElement,
 }
 
@@ -129,18 +132,26 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: PointerEvent): 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.fireDecoratorEvent("menu-item-click", {
-        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-        analyticsName: AnalyticsName.Header,
-        item,
-        originalEvent: e,
-        ...(type !== UDExItemType.Heading && { category: list?.getAttribute("category") || "" }),
-      });
+    const menuItem = e.target as UDExMastheadMenuItem;
+    if (!menuItem.url?.length) {
+      return;
     }
+
+    const mainItem = this.closest("[udex-masthead-item]") as UDExMastheadItem;
+    const menuList = menuItem.closest(".udex-masthead-menu__list") as HTMLElement;
+    const sourceNode = menuItem.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement;
+    const category = menuList?.getAttribute("category") || "";
+
+    const eventDetail: UDExMastheadMenuMenuItemClickEventDetail = {
+      analyticsPath: [mainItem?.label, category, menuItem.label].filter(Boolean),
+      analyticsName: AnalyticsName.Header,
+      originalEvent: e,
+      item: menuItem,
+      sourceNode,
+      ...(menuItem.type !== UDExItemType.Heading && { category }),
+    };
+
+    this.fireDecoratorEvent("menu-item-click", eventDetail);
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {
@@ -168,10 +179,16 @@ class UDExMastheadMenu extends UI5Element {
   get itemsList(): Array<MenuItem> {
     let id = 1;
     const parsedItems: Array<MenuItem> = parseArrayFromString(this.subItems);
+
     return parsedItems.map((mainItem: MenuItem) => {
-      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
-        category.categoryId = `${id++}`;
-        return category;
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
+        subMenu.categoryId = `${id++}`;
+        subMenu.items = subMenu.items.map((item: Item) => ({
+          ...item,
+          ...(item.title === "-" && { isDivider: true }),
+        }));
+
+        return subMenu;
       });
 
       return mainItem;

package/src/MastheadMobileMenu.hbs

@@ -18,6 +18,7 @@
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
                             type="Button"
+                            is-back
                             has-border
                             icon-start
                             is-explore-back>
@@ -39,6 +40,7 @@
                                 label="{{_clickedItem.innerText}}"
                                 aria-has-popup="true"
                                 type="Button"
+                                is-back
                                 has-border
                                 icon-start
                                 is-back-to-nav>
@@ -59,6 +61,7 @@
                         aria-has-popup="true"
                         has-border
                         icon-start
+                        is-back
                         is-back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
@@ -76,6 +79,7 @@
             accessible-role-text="button"
             aria-has-popup="true"
             type="Button"
+            first-level-btn
             first-level
             icon-end
             is-explore
@@ -95,9 +99,10 @@
                     aria-has-popup="true"
                     id="{{this._id}}"
                     type="Button"
+                    first-level-btn
+                    first-level
                     has-border
-                    icon-end
-                    first-level>
+                    icon-end>
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
@@ -106,6 +111,7 @@
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     target="{{this.target}}"
+                    first-level
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -121,6 +127,7 @@
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
+                second-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -136,6 +143,7 @@
                     label="{{this.category}}"
                     aria-has-popup="true"
                     type="Button"
+                    second-level-btn
                     second-level
                     has-border
                     icon-end>
@@ -149,6 +157,7 @@
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
+                        second-level
                         has-border>
                     </udex-masthead-menu-item>
                 </li>
@@ -165,6 +174,7 @@
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
+                third-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -177,6 +187,7 @@
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
+                    third-level
                     has-border>
                 </udex-masthead-menu-item>
             </li>

package/src/MastheadMobileMenu.ts

@@ -19,12 +19,17 @@ import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenu
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
+const INDEX_OFFSET_WITH_OVERVIEW = 2;
+const INDEX_OFFSET_WITHOUT_OVERVIEW = 1;
+
 type UDExMastheadMobileMenuItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
   item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
+  isBack: boolean,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 }
 
@@ -127,6 +132,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusItemByIndex!: boolean;
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
+  _navItem?: UDExMastheadMenuItem;
 
   onAfterRendering() {
     this.handleMenuMode();
@@ -168,7 +174,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleBackToCategories(e: PointerEvent) {
     e.stopPropagation();
     this.showCategories();
-    this.setFocusItemByIndex(this._category.index + 1);
+    this.setFocusItemByIndex(this._category.index);
     this.fireMobileItemEvent(e);
   }
 
@@ -277,7 +283,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
     if (target.hasAttribute("is-back-to-categories")) {
       this.showCategories();
-      this.setFocusItemByIndex(this._category.index + 1);
+      this.setFocusItemByIndex(this._category.index);
       this.fireMobileItemEvent(e);
     }
 
@@ -299,12 +305,12 @@ class UDExMastheadMobileMenu extends UI5Element {
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("first-level")) {
+    if (target.hasAttribute("first-level-btn")) {
       this.openCategories(item);
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("second-level")) {
+    if (target.hasAttribute("second-level-btn")) {
       this.openCategoryItems(e);
       this.fireMobileItemEvent(e);
     }
@@ -397,8 +403,9 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
+    const indexOffset = this._clickedItem.href ? INDEX_OFFSET_WITH_OVERVIEW : INDEX_OFFSET_WITHOUT_OVERVIEW;
     const index = Number(item.getAttribute("id"));
-    this._category = { ...this._categories[index], index };
+    this._category = { ...this._categories[index], index: index + indexOffset };
     this._showCategories = false;
     this._showCategoryItems = true;
   }
@@ -416,15 +423,19 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
     const item = e.target as UDExMastheadMenuItem;
-
-    this.fireDecoratorEvent("item-click", {
-      isMobile: true,
+    const isBack = item.hasAttribute("is-back");
+    const eventDetail: UDExMastheadMobileMenuItemClickEventDetail = {
+      ...(category && { category }),
       item,
+      isMobile: true,
+      isBack,
+      analyticsPath: this.buildAnalyticsPath(item),
       originalEvent: e,
       analyticsName: AnalyticsName.Header,
       sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-      ...(category && { category }),
-    });
+    };
+
+    this.fireDecoratorEvent("item-click", eventDetail);
   }
 
   fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
@@ -483,6 +494,42 @@ class UDExMastheadMobileMenu extends UI5Element {
     });
   }
 
+  buildAnalyticsPath(item: UDExMastheadMenuItem): Array<string> {
+    const category = this.getListItemByIndex(0).label.trim();
+    const isFirstLevel = item.hasAttribute("first-level");
+    const isSecondLevel = item.hasAttribute("second-level");
+    const isThirdLevel = item.hasAttribute("third-level");
+    const isBackToCategories = item.hasAttribute("is-back-to-categories");
+    const shouldResetPath = item.hasAttribute("is-back-to-nav") || this._hideExploreSapBtn;
+    const isExploreMode = !this.showExploreBtn && !!this.items.length;
+    const clickedLabel = item.label.trim();
+    const analyticsPath: Array<string> = [];
+
+    if (shouldResetPath) {
+      this._navItem = undefined;
+      analyticsPath.length = 0;
+    }
+
+    if (isFirstLevel) {
+      this._navItem = item;
+      analyticsPath.push(clickedLabel);
+    } else if (isSecondLevel) {
+      analyticsPath.push(...(this._navItem ? [category, clickedLabel] : [clickedLabel]));
+    } else if (isThirdLevel) {
+      analyticsPath.push(...(this._navItem ? [this._navItem.label.trim(), category, clickedLabel] : [category, clickedLabel]));
+    } else if (isBackToCategories) {
+      if (this._navItem) {
+        analyticsPath.push(this._navItem.label.trim());
+      }
+    }
+
+    if (isExploreMode) {
+      analyticsPath.unshift(this.exploreItem.label);
+    }
+
+    return analyticsPath;
+  }
+
   get exploreBtnMenu(): UDExMastheadMenuItem {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }

package/src/MastheadShell.hbs

@@ -1,5 +1,5 @@
 <header
-    class="udex-masthead-shell"
+    class="{{mainClass}}"
     @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
         <div class="udex-masthead-shell__landing-wrap">
@@ -10,6 +10,10 @@
             {{#if siteLabel}}
                 {{>siteLabel}}
             {{/if}}
+
+            {{#if coBrandImage}}
+                {{>coBrand}}
+            {{/if}}
         </div>
 
         {{#if isMainMenuVisible}}
@@ -48,7 +52,7 @@
         {{/if}}
     {{/if}}
 
-    <div class="udex-masthead-shell__right-menu">
+    <div class="{{rightMenuClass}}">
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @ui5-item-click="{{handleOpenMobileMenu}}"
@@ -68,47 +72,47 @@
             </div>
         {{/if}}
         {{#if hasSearch}}
-            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-                <udex-masthead-item
+          <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+            <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
                     part="search-button"
                     @click="{{handleSearchClick}}"
                     accessible-name="search">
-                </udex-masthead-item>
-            </div>
+            </udex-masthead-item>
+          </div>
         {{/if}}
         {{#if hasCart}}
-            <div
-                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCartClick}}">
-                <slot name="cart"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCartClick}}">
+            <slot name="cart"></slot>
+          </div>
         {{/if}}
         {{#if hasSupport}}
-            <div
-                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleSupportClick}}">
-                <slot name="support"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__support udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleSupportClick}}">
+            <slot name="support"></slot>
+          </div>
         {{/if}}
         {{#if hasProfile}}
-            <div
-                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleProfileClick}}">
-                <slot name="profile"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleProfileClick}}">
+            <slot name="profile"></slot>
+          </div>
         {{/if}}
         {{#if hasCountrySelector}}
-            <div
-                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCountrySelectorClick}}">
-                <slot name="countrySelector"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCountrySelectorClick}}">
+            <slot name="countrySelector"></slot>
+          </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
@@ -166,6 +170,7 @@
             @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
+            title="{{siteLabelTitle}}"
             target="_self"
             aria-label="{{siteLabelAriaLabel}}"
             class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">
@@ -175,3 +180,32 @@
         <div class="udex-masthead-shell__site-label">{{siteLabel}}</div>
     {{/if}}
 {{/inline}}
+
+{{#*inline "coBrand"}}
+    {{#if coBrandUrl}}
+        <div class="udex-masthead-shell__co-brand">
+            <a
+                class="udex-masthead-shell__co-brand-link"
+                @click="{{handleCoBrandClick}}"
+                href="{{coBrandUrl}}"
+                title="{{coBrandTitle}}"
+                aria-label="{{coBrandAriaLabel}}"
+                target="_self"
+                role="link">
+                <img
+                    class="udex-masthead-shell__co-brand-image"
+                    src="{{coBrandImage}}"
+                    alt="{{coBrandAlt}}"
+                />
+            </a>
+        </div>
+    {{else}}
+        <div class="udex-masthead-shell__co-brand">
+            <img
+                class="udex-masthead-shell__co-brand-image"
+                src="{{coBrandImage}}"
+                alt="{{coBrandAlt}}"
+            />
+        </div>
+    {{/if}}
+{{/inline}}