@sapudex/web-components 2.3.0 → 2.4.1

package/src/MastheadItem.ts

@@ -11,7 +11,7 @@ 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 type UDExAvatar from "./Avatar.js";
@@ -20,6 +20,8 @@ import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -31,7 +33,6 @@ export enum UDExMastheadDropdownItemAction {
 }
 
 export interface IMastheadItem {
-  text?: string;
   selected?: boolean;
   icon?: string;
   avatar?: Array<HTMLElement>;
@@ -58,11 +59,14 @@ export type MenuItem = {
 type UDExMastheadItemItemClickEventDetail = {
   originalEvent: PointerEvent,
   item: UDExMastheadItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 export type UDExMastheadDropdownEventDetail = {
   title: string,
   action: UDExMastheadDropdownItemAction,
+  analyticsName: AnalyticsName,
 }
 
 /**
@@ -142,15 +146,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     menuTitle: string = "";
 
-  /**
-   * Defines the text of item.
-   *
-   * @public
-   * @default ""
-   */
-  @property({ type: String })
-    text: string = "";
-
   /**
    * Defines the selected item.
    *
@@ -264,6 +259,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
    *
@@ -295,6 +298,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  onBeforeRendering(): void {
+    this.label = this.eventItemTitle;
+  }
+
   onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
     this._mastheadShell = this.mastheadShell;
@@ -381,17 +388,19 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   fireDropdownCloseEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-closed", { title, action });
+    this.fireDecoratorEvent("dropdown-closed", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireDropdownOpenEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-opened", { title, action });
+    this.fireDecoratorEvent("dropdown-opened", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireItemClickEvent(e: PointerEvent): void {
     this.fireDecoratorEvent("item-click", {
       item: this,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: e.currentTarget as HTMLElement,
     });
   }
 
@@ -442,19 +451,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
-    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
+    this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   getSubItems(): Array<MenuItem> {
-    return this.parseArrayFromString(this.subItems);
+    return parseArrayFromString(this.subItems);
   }
 
   get mastheadShell(): UDExMastheadShell {
@@ -494,22 +499,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.selected ? " udex-masthead-item__button--active" : "";
   }
 
-  get ariaDescribedBy(): string {
+  get ariaDescribedBy(): string | undefined {
     const labels = [];
 
-    if (this.text) {
-      labels.push(`${this.__id}-text`);
-    }
-
-    if (this.icon) {
-      labels.push(`${this.__id}-icon`);
-    }
-
     if (this.isTargetBlank) {
       labels.push(`new-win-desc`);
     }
 
-    return labels.join(" ").trim();
+    if (this.imageAlt) {
+      labels.push(`image-desc`);
+    }
+
+    return labels.length ? labels.join(" ").trim() : undefined;
   }
 
   get isDropdownOpened(): boolean {
@@ -540,6 +541,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";
   }
@@ -561,22 +566,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   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.hbs

@@ -22,6 +22,8 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         <udex-masthead-menu-item
+            part="menu-item"
+            exportparts="menu-item"
             id="category-{{categoryId}}"
             @click="{{../../handleMenuItemClick}}"
             url="{{this.url}}"
@@ -42,11 +44,14 @@
             <li>
                 {{#if this.url}}
                     <udex-masthead-menu-item
+                        part="menu-item"
+                        exportparts="menu-item"
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
                         ?external-link="{{this.externalLink}}"
                         url="{{this.url}}"
-                        label="{{this.title}}">
+                        label="{{this.title}}"
+                        exportparts="badge">
                     </udex-masthead-menu-item>
                 {{else}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>

package/src/MastheadMenu.ts

@@ -11,6 +11,8 @@ import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -38,6 +40,8 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -130,6 +134,8 @@ class UDExMastheadMenu extends UI5Element {
     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") || "" }),
@@ -154,10 +160,6 @@ class UDExMastheadMenu extends UI5Element {
     return this.links.indexOf(item);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   get links(): Array<UDExMastheadMenuItem> {
     const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("[udex-masthead-menu-item]"));
     return menuItems.filter(({ url }) => url && url.length > 0);
@@ -165,7 +167,7 @@ class UDExMastheadMenu extends UI5Element {
 
   get itemsList(): Array<MenuItem> {
     let id = 1;
-    const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);
+    const parsedItems: Array<MenuItem> = parseArrayFromString(this.subItems);
     return parsedItems.map((mainItem: MenuItem) => {
       mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
         category.categoryId = `${id++}`;

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

@@ -225,8 +225,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,9 +10,10 @@
                 {{>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
+                            part="menu-item"
                             class="udex-masthead-mobile-menu__back-item"
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
@@ -24,6 +25,7 @@
                     {{else}}
                         {{#if isNotMultipleMode}}
                             <udex-masthead-menu-item
+                                part="menu-item"
                                 class="udex-masthead-mobile-menu__heading"
                                 label="{{_clickedItem.innerText}}"
                                 type="Heading"
@@ -31,9 +33,11 @@
                             </udex-masthead-menu-item>
                         {{else}}
                             <udex-masthead-menu-item
+                                part="menu-item"
                                 class="udex-masthead-mobile-menu__back-item"
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
+                                aria-has-popup="true"
                                 type="Button"
                                 has-border
                                 icon-start
@@ -45,12 +49,14 @@
                 {{>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
+                        part="menu-item"
                         class="udex-masthead-mobile-menu__back-item"
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
+                        aria-has-popup="true"
                         has-border
                         icon-start
                         is-back-to-categories>
@@ -62,11 +68,13 @@
     </div>
     {{#if showExploreBtn}}
         <udex-masthead-menu-item
+            part="menu-item"
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
             @keydown="{{handleLeftRightKeys}}"
-            accessible-role="button"
+            accessible-role-text="button"
+            aria-has-popup="true"
             type="Button"
             first-level
             icon-end
@@ -78,9 +86,10 @@
 
 {{#*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
+                    part="menu-item"
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
                     aria-has-popup="true"
@@ -92,6 +101,7 @@
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
+                    part="menu-item"
                     @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
@@ -105,8 +115,9 @@
 
 {{#*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
+                part="menu-item"
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
@@ -116,8 +127,9 @@
     {{/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
+                    part="menu-item"
                     @click="{{../handleMenuCategoryClick}}"
                     url="{{this.url}}"
                     id="{{@index}}"
@@ -131,8 +143,9 @@
             </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
+                        part="menu-item"
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
@@ -146,8 +159,9 @@
 
 {{#*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
+                part="menu-item"
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
@@ -157,8 +171,9 @@
     {{/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
+                    part="menu-item"
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"

package/src/MastheadMobileMenu.ts

@@ -13,7 +13,7 @@ import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
-
+import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
 
 // Styles
@@ -24,10 +24,14 @@ type UDExMastheadMobileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadMobileMenuExploreClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -151,7 +155,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireDecoratorEvent("explorer-menu-click", { originalEvent: e });
+    this.fireExploreSapMobileButton(e);
   }
 
   handleBackToMenuItems(e: PointerEvent) {
@@ -411,14 +415,26 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
+    const item = e.target as UDExMastheadMenuItem;
+
     this.fireDecoratorEvent("item-click", {
       isMobile: true,
-      item: e.target as UDExMastheadMenuItem,
+      item,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
       ...(category && { category }),
     });
   }
 
+  fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
+    this.fireDecoratorEvent("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.hbs

@@ -22,6 +22,8 @@
   {{/if}}
   <div class="udex-masthead-profile-menu__links">
     <udex-masthead-menu
+        part="menu"
+        exportparts="badge, menu-item"
         sub-items='{{linksList}}'
         @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
     </udex-masthead-menu>

package/src/MastheadProfileMenu.ts

@@ -10,6 +10,8 @@ import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
 import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -22,13 +24,11 @@ interface UserData {
   avatarInitials?: string
 }
 
-type UDExMastheadProfileMenuLogoutClickEventDetail = {
-  originalEvent: PointerEvent,
-}
-
 type UDExMastheadProfileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   originalEvent: PointerEvent,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -71,7 +71,7 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
 
 class UDExMastheadProfileMenu extends UI5Element {
   eventDetails!: {
-    "logout": UDExMastheadProfileMenuLogoutClickEventDetail,
+    "logout": UDExMastheadProfileMenuItemClickEventDetail,
     "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail
   };
   /**
@@ -121,8 +121,13 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   handleUserLogoutItemClick(e: PointerEvent): void {
+    const item = e.target as UDExMastheadMenuItem;
+
     this.fireDecoratorEvent("logout", {
+      item,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
     });
   }
 
@@ -132,13 +137,11 @@ class UDExMastheadProfileMenu extends UI5Element {
     this.fireDecoratorEvent("profile-item-click", {
       item,
       originalEvent,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 
-  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),
@@ -146,7 +149,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   get userData(): UserData {
-    return this.parseArrayFromString(this.loggedInUser) as UserData;
+    return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
   get messageAvailable(): boolean {

package/src/MastheadShell.hbs

@@ -39,6 +39,7 @@
                     class="udex-masthead-shell__close-search-btn"
                     size="Small"
                     icon="decline"
+                    part="search-close-button"
                     tooltip="{{closeButtonAccessibleName}}"
                     accessible-name="{{closeButtonAccessibleName}}"
                     @click="{{handleCloseSearch}}">
@@ -71,6 +72,7 @@
                 <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
+                    part="search-button"
                     @click="{{handleSearchClick}}"
                     accessible-name="search">
                 </udex-masthead-item>