@sapudex/web-components 2.0.0 → 2.1.1

package/src/MastheadItem.ts

@@ -10,7 +10,9 @@ 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 { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.js";
+import {
+  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT,
+} from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -22,6 +24,12 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+export enum UDExMastheadDropdownItemAction {
+  Open = "Open",
+  Close = "Close",
+  ClickOutside = "Click Outside",
+}
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -52,6 +60,11 @@ type UDExMastheadItemItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
+export type UDExMastheadDropdownEventDetail = {
+  title: string,
+  action: UDExMastheadDropdownItemAction,
+}
+
 /**
  * @class
  *
@@ -89,9 +102,27 @@ type UDExMastheadItemItemClickEventDetail = {
  */
 @event("item-click", { bubbles: true })
 
+/**
+ * Fires when dropdown is closed
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-closed", { bubbles: true })
+
+/**
+ * Fires when dropdown is opened
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-opened", { bubbles: true })
+
 class UDExMastheadItem extends UI5Element implements IMastheadItem {
   eventDetails!: {
     "item-click": UDExMastheadItemItemClickEventDetail,
+    "dropdown-closed": UDExMastheadDropdownEventDetail,
+    "dropdown-opened": UDExMastheadDropdownEventDetail,
   };
   /**
    * Defines sub items for item
@@ -256,6 +287,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
+  _isEscPress!: boolean;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -270,10 +302,27 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
       this.setDropdownInsetStart();
     }
+
+    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 (this.isDropdownOpened) {
+          this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.ClickOutside);
+        }
+
+        this.selected = false;
+      }
+    });
   }
 
   handleFocusout(e: FocusEvent): void {
-    if (e.relatedTarget === null) {
+    if (e.relatedTarget === null || this._isEscPress) {
       return;
     }
 
@@ -294,6 +343,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
+    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -303,32 +353,56 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
+    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }
 
   handleItemClick(e: PointerEvent): void {
     this.handleSelectedChange();
+    this.fireItemClickEvent(e);
+    this.fireDropdownEvents();
+  }
 
+  handleSelectedChange(): void {
+    this.selected = this.isMobile ? true : !this.selected;
+  }
+
+  fireDropdownEvents(): void {
+    if (this.hasDropdownSlot) {
+      const { Open, Close } = UDExMastheadDropdownItemAction;
+      const action = this.selected ? Open : Close;
+      if (this.selected) {
+        this.fireDropdownOpenEvent(this.eventItemTitle, action);
+      } else {
+        this.fireDropdownCloseEvent(this.eventItemTitle, action);
+      }
+    }
+  }
+
+  fireDropdownCloseEvent(title: string, action: UDExMastheadDropdownItemAction): void {
+    this.fireDecoratorEvent("dropdown-closed", { title, action });
+  }
+
+  fireDropdownOpenEvent(title: string, action: UDExMastheadDropdownItemAction): void {
+    this.fireDecoratorEvent("dropdown-opened", { title, action });
+  }
+
+  fireItemClickEvent(e: PointerEvent): void {
     this.fireDecoratorEvent("item-click", {
       item: this,
       originalEvent: e,
     });
   }
 
-  handleSelectedChange(): void {
-    this.selected = this.isMobile ? true : !this.selected;
-  }
-
   setDropdownInsetStart(): void {
     const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
-      const dropdownHolder = this.getDomElement(".udex-masthead-item__dropdown-holder");
       const marginInlineStart = this.calculateMarginInlineStart(rect);
 
-      if (marginInlineStart !== null && dropdownHolder) {
-        dropdownHolder.style.marginInlineStart = `${marginInlineStart - 3}px`;
+      if (marginInlineStart !== null) {
+        dropdown.style.marginInlineStart = `${marginInlineStart - 3}px`;
       }
     }
   }
@@ -368,6 +442,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
+    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -390,8 +465,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     const iconClass = (this.icon || this.image) ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
     const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
+    const supportClass = this.isSupportBtn ? "udex-masthead-item__button--support" : "";
     const countrySelectorClass = this.isCountrySelectorBtn ? "udex-masthead-item__button--country-selector" : "";
-    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass}`.trim();
+    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass} ${supportClass}`.trim();
   }
 
   get profileAvatar(): UDExAvatar {
@@ -436,7 +512,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.join(" ").trim();
   }
 
-  get showDropdown(): boolean {
+  get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
 
@@ -460,12 +536,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "countrySelector";
   }
 
-  get accessibleLabel(): string {
-    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+  get isCartBtn(): boolean {
+    return this.getAttribute("slot") === "cart";
   }
 
-  get isMenuItem(): boolean {
-    return true;
+  get isSupportBtn(): boolean {
+    return this.getAttribute("slot") === "support";
+  }
+
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
   get isMobile(): boolean {
@@ -479,6 +559,30 @@ 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.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);
+    }
+
+    return this.firstChild?.nodeValue?.trim() || "";
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.hbs

@@ -34,7 +34,10 @@
 {{/inline}}
 
 {{#*inline "list"}}
-    <ul class="udex-masthead-menu__list" aria-labelledby="category-{{categoryId}}">
+    <ul
+        class="udex-masthead-menu__list"
+        aria-labelledby="category-{{categoryId}}"
+        category="{{this.category}}">
         {{#each this.items}}
             <li>
                 {{#if this.url}}

package/src/MastheadMenu.ts

@@ -8,7 +8,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
-import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 
@@ -35,6 +35,7 @@ export type MenuItem = {
 };
 
 type UDExMastheadMenuMenuItemClickEventDetail = {
+  category?: string,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
 }
@@ -124,10 +125,16 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: PointerEvent): void {
-    this.fireDecoratorEvent("menu-item-click", {
-      item: e.target as UDExMastheadMenuItem,
-      originalEvent: e,
-    });
+    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", {
+        item,
+        originalEvent: e,
+        ...(type !== UDExItemType.Heading && { category: list?.getAttribute("category") || "" }),
+      });
+    }
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {

package/src/MastheadMobileMenu.hbs

@@ -148,7 +148,7 @@
     {{#if _category.url}}
         <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
             <udex-masthead-menu-item
-                @click="{{../handleMobileItemEvent}}"
+                @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
                 has-border>
@@ -159,7 +159,7 @@
         {{#if this.url}}
             <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
                 <udex-masthead-menu-item
-                    @click="{{../handleMobileItemEvent}}"
+                    @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
                     has-border>

package/src/MastheadMobileMenu.ts

@@ -22,6 +22,12 @@ import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js"
 type UDExMastheadMobileMenuItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
   item: UDExMastheadMenuItem,
+  category?: string,
+  isMobile: boolean,
+}
+
+type UDExMastheadMobileMenuExploreClickEventDetail = {
+  originalEvent: PointerEvent | KeyboardEvent,
 }
 
 /**
@@ -68,7 +74,7 @@ type UDExMastheadMobileMenuItemClickEventDetail = {
 class UDExMastheadMobileMenu extends UI5Element {
   eventDetails!: {
     "item-click": UDExMastheadMobileMenuItemClickEventDetail,
-    "explorer-menu-click": void,
+    "explorer-menu-click": UDExMastheadMobileMenuExploreClickEventDetail,
   };
   /**
    * Slot for search
@@ -145,7 +151,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireDecoratorEvent("explorer-menu-click");
+    this.fireDecoratorEvent("explorer-menu-click", { originalEvent: e });
   }
 
   handleBackToMenuItems(e: PointerEvent) {
@@ -232,6 +238,11 @@ class UDExMastheadMobileMenu extends UI5Element {
     this.fireMobileItemEvent(e);
   }
 
+  handleMobileCategoryItemEvent(e: PointerEvent) {
+    e.stopPropagation();
+    this.fireMobileItemEvent(e, this._category.category);
+  }
+
   handleMenuMode() {
     if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
       this.openCategories(this.exploreItem);
@@ -399,10 +410,12 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
-  fireMobileItemEvent(e: PointerEvent | KeyboardEvent) {
+  fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
     this.fireDecoratorEvent("item-click", {
+      isMobile: true,
       item: e.target as UDExMastheadMenuItem,
       originalEvent: e,
+      ...(category && { category }),
     });
   }
 

package/src/MastheadShell.hbs

@@ -1,4 +1,6 @@
-<header class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
+<header
+    class="udex-masthead-shell"
+    @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
         <div class="udex-masthead-shell__landing-wrap">
             {{#if logoUrl}}
@@ -26,7 +28,9 @@
     </div>
 
     {{#if isSearchVisible}}
-        <div class="udex-masthead-shell__search-container">
+        <div
+            class="udex-masthead-shell__search-container"
+            @ui5-search-keydown="{{handleSearchKeyDown}}">
             <slot name="search"></slot>
         </div>
         {{#if _isSearchOpened}}
@@ -80,6 +84,14 @@
                 <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>
+        {{/if}}
         {{#if hasProfile}}
             <div
                 class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
@@ -96,7 +108,6 @@
                 <slot name="countrySelector"></slot>
             </div>
         {{/if}}
-
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"