@sapudex/web-components 2.4.1 → 2.5.0

package/src/MastheadItem.ts

@@ -10,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 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 { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
@@ -22,7 +23,6 @@ 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";
 
@@ -285,12 +285,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  @property({ type: Boolean })
+    _preventFocusOut!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
-  _isEscPress!: boolean;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -310,15 +312,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
+    if (this.shouldFocusFirstElement) {
+      this.applyFocusToFirstElement();
+    }
+
     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, UDExMastheadDropdownItemAction.ClickOutside);
         }
@@ -328,13 +333,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();
     }
   }
@@ -350,7 +369,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
-    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -405,7 +423,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   setDropdownInsetStart(): void {
-    const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+    const dropdown = this.dropdownHolder;
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
       const marginInlineStart = this.calculateMarginInlineStart(rect);
@@ -454,6 +472,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
+  async applyFocusToFirstElement(): Promise<void> {
+    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
+    if (focusedElement) {
+      focusedElement.focus();
+    }
+  }
+
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -462,6 +487,32 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return 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 dropdownHolder(): HTMLElement {
+    return this.getDomElement(".udex-masthead-item__dropdown")!;
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -513,6 +564,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
+  get shouldFocusFirstElement(): boolean {
+    return this.isDropdownOpened && !this._preventFocusOut;
+  }
+
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }

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";
@@ -38,9 +39,10 @@ export type MenuItem = {
 
 type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
+  analyticsPath: Array<string>,
+  analyticsName: AnalyticsName,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
-  analyticsName: AnalyticsName,
   sourceNode: HTMLElement,
 }
 
@@ -129,18 +131,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 {

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,6 +99,8 @@
                     aria-has-popup="true"
                     id="{{this._id}}"
                     type="Button"
+                    first-level-btn
+                    first-level
                     has-border
                     icon-end
                     first-level>
@@ -106,6 +112,7 @@
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     target="{{this.target}}"
+                    first-level
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -121,6 +128,7 @@
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
+                second-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -136,6 +144,7 @@
                     label="{{this.category}}"
                     aria-has-popup="true"
                     type="Button"
+                    second-level-btn
                     second-level
                     has-border
                     icon-end>
@@ -149,6 +158,7 @@
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
+                        second-level
                         has-border>
                     </udex-masthead-menu-item>
                 </li>
@@ -165,6 +175,7 @@
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
+                third-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -177,6 +188,7 @@
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
+                    third-level
                     has-border>
                 </udex-masthead-menu-item>
             </li>

package/src/MastheadMobileMenu.ts

@@ -24,7 +24,9 @@ type UDExMastheadMobileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
+  isBack: boolean,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 }
 
@@ -127,6 +129,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusItemByIndex!: boolean;
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
+  _navItem?: UDExMastheadMenuItem;
 
   onAfterRendering() {
     this.handleMenuMode();
@@ -299,12 +302,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);
     }
@@ -416,15 +419,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 +490,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}}
@@ -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}}