@sapudex/web-components 0.225.0 → 2.0.0

package/src/MastheadShell.ts

@@ -2,27 +2,28 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-  isLeft, isRight, isSpace, isEnter, isEscape,
+  isLeft, isRight, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/cart.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
-import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
+import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
-import UDExSearch from "./Search.js";
+import type UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
-import UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 
@@ -32,11 +33,10 @@ import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 const canvasContentFont = "16px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
-export const MastheadOriginalEvent = {
-  detail: {
-    originalEvent: { type: Event },
-  },
-};
+
+type UDExMastheadShellBaseEventDetail = {
+  originalEvent: PointerEvent,
+}
 
 /**
  * @class
@@ -75,80 +75,68 @@ export const MastheadOriginalEvent = {
  *
  * @public
  */
-@event("mobile-menu-open")
+@event("mobile-menu-open", { bubbles: true })
 
 /**
  * Fired event when the user clicks the mobile menu button closer.
  *
  * @public
  */
-@event("mobile-menu-close")
+@event("mobile-menu-close", { bubbles: true })
 
 /**
  * Fired event when the user clicks the search button trigger.
  *
  * @public
  */
-@event("search-click", MastheadOriginalEvent)
-
-/**
- * Fired event when the user clicks the search close button.
- *
- * @public
- */
-@event("search-close-click", MastheadOriginalEvent)
-
-/**
- * Fired event when the search panel is opened.
- *
- * @public
- */
-@event("search-opened")
-
-/**
- * Fired event when the search panel is closed.
- *
- * @public
- */
-@event("search-closed")
+@event("search-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
  */
-@event("cart-click", MastheadOriginalEvent)
+@event("cart-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
  */
-@event("profile-click", MastheadOriginalEvent)
+@event("profile-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
  */
-@event("country-selector-click", MastheadOriginalEvent)
+@event("country-selector-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks the logo.
  *
  * @public
  */
-@event("logo-click", MastheadOriginalEvent)
+@event("logo-click", { bubbles: true })
 
 /**
  * Fired event when the user clicks the site label.
  *
  * @public
- * @public
  */
-@event("site-label-click", MastheadOriginalEvent)
+@event("site-label-click", { bubbles: true })
 
 class UDExMastheadShell extends UI5Element {
+  eventDetails!: {
+    "mobile-menu-open": void,
+    "mobile-menu-close": void,
+    "search-click": void,
+    "cart-click": void,
+    "profile-click": void,
+    "country-selector-click": void,
+    "logo-click": UDExMastheadShellBaseEventDetail,
+    "site-label-click": UDExMastheadShellBaseEventDetail,
+  };
   /**
    * Slot for country selector item.
    *
@@ -210,11 +198,11 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines URL to homepage. It will be used as a link on a logo and a site label
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
-    homeUrl!: string;
+    homeUrl?: string;
 
   /**
    * Defines URL for site label. It will be used as a link on a logo and a site label
@@ -223,7 +211,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @property({ type: String })
-    siteLabelUrl!: string;
+    siteLabelUrl: string = "";
 
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
@@ -259,7 +247,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoUrl!: string;
+    logoUrl: string = "";
 
   /**
    * Defines the Logo default title
@@ -268,7 +256,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoTitle!: string;
+    logoTitle: string = "";
 
   /**
    * Defines a site label. It will be displayed next to a logo.
@@ -277,40 +265,42 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @property({ type: String })
-    siteLabel!: string;
+    siteLabel: string = "";
 
   /**
    * Defines an alt text for logo
    *
+   * @default ""
    * @public
    */
   @property({ type: String })
-    logoAlt!: string;
+    logoAlt: string = "";
 
   /**
    * Defines an accessible name for close icon for the search bar
    *
-   * default: ""
+   * @default ""
    * @public
    */
   @property({ type: String })
-    closeButtonAccessibleName!: string;
-
+    closeButtonAccessibleName: string = "";
   /**
    * Defines an aria label for the homepage link
    *
+   * @default ""
    * @public
    */
   @property({ type: String })
-    homepageAriaLabel!: string;
+    homepageAriaLabel: string = "";
 
   /**
    * Defines an aria label for the site label
    *
+   * @default ""
    * @public
    */
   @property({ type: String })
-    siteLabelAriaLabel!: string;
+    siteLabelAriaLabel: string = "";
 
   /**
    * Defines if the search container is opened
@@ -344,18 +334,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     _closeBtnClicked!: boolean;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   _searchOpener!: UDExMastheadItem | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
 
-  static i18nBundle: I18nBundle;
-
-  static async onDefine(): Promise<void> {
-    UDExMastheadShell.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -366,6 +353,8 @@ class UDExMastheadShell extends UI5Element {
     this._searchOpener = this.searchOpener;
     this._mobileMenu = this.mastheadMobileMenu;
 
+    this.handleOutsideClick();
+
     if (this._isSearchOpened) {
       this.focusSearchInput();
     }
@@ -394,7 +383,6 @@ class UDExMastheadShell extends UI5Element {
 
     if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
-      this.resetSelectedItems();
       return;
     }
 
@@ -424,19 +412,6 @@ class UDExMastheadShell extends UI5Element {
     this.handleRightArrow(e);
   }
 
-  handleSearchKeyDown(e: CustomEvent): void {
-    e.stopPropagation();
-    const keyEvent = e.detail as KeyboardEvent;
-
-    if (isEscape(keyEvent)) {
-      if (this.showSearchByDefault && this.isAtLeastBreakpointSizeM) {
-        return;
-      }
-      this.closeSearch();
-      this.focusSearchBtn();
-    }
-  }
-
   handleLeftArrow(e: KeyboardEvent): void {
     if (isLeft(e)) {
       const currentItem = e.target as UDExMastheadItem;
@@ -461,33 +436,33 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  handleLogoClick(e: CustomEvent): void {
-    this.fireEvent("logo-click", { originalEvent: e });
+  handleLogoClick(e: PointerEvent): void {
+    this.fireDecoratorEvent("logo-click", { originalEvent: e });
   }
 
-  handleSiteLabelClick(e: CustomEvent): void {
-    this.fireEvent("site-label-click", { originalEvent: e });
+  handleSiteLabelClick(e: PointerEvent): void {
+    this.fireDecoratorEvent("site-label-click", { originalEvent: e });
   }
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("search-click", { originalEvent: e });
     this.openSearch();
+    this.fireEvent("search-click");
   }
 
   handleCartClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("cart-click", { originalEvent: e });
+    this.fireDecoratorEvent("cart-click");
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("profile-click", { originalEvent: e });
+    this.fireDecoratorEvent("profile-click");
   }
 
   handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("country-selector-click", { originalEvent: e });
+    this.fireDecoratorEvent("country-selector-click");
   }
 
   handleOpenMobileMenu(): void {
@@ -503,13 +478,12 @@ class UDExMastheadShell extends UI5Element {
       this.setOverflowBody();
     }
 
-    this.fireEvent("mobile-menu-open");
+    this.fireDecoratorEvent("mobile-menu-open");
   }
 
-  handleCloseSearch(e: CustomEvent): void {
-    this._closeBtnClicked = true;
-    this.fireEvent("search-close-click", { originalEvent: e });
+  handleCloseSearch(): void {
     this.closeSearch();
+    this._closeBtnClicked = true;
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -520,6 +494,17 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
+  handleOutsideClick(): void {
+    document.addEventListener("click", (e: MouseEvent) => {
+      const el = e.target as UDExMastheadItem;
+      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
+      const isDropdownSlot = el.getAttribute("slot") === "dropdown";
+      if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
+        this.resetSelectedItems();
+      }
+    });
+  }
+
   focusSearchInput(): void {
     const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
     if (searchSlot) {
@@ -545,10 +530,7 @@ class UDExMastheadShell extends UI5Element {
 
   resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedId && item.selected) {
-        if (item.hasDropdownSlot) {
-          item.fireDropdownCloseEvent(item.eventItemTitle, DropdownItemAction.ClickOutside);
-        }
+      if (item._id !== clickedId) {
         item.selected = false;
       }
     });
@@ -694,7 +676,6 @@ class UDExMastheadShell extends UI5Element {
    */
   closeSearch(): void {
     this._isSearchOpened = false;
-    this.fireEvent("search-closed");
   }
 
   /**
@@ -705,7 +686,7 @@ class UDExMastheadShell extends UI5Element {
     const shouldPreventOpeningSearch = this._isSearchOpened
       || (this.isBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
-      || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
+      || (this.IsAtLeastBreakpointSizeM && this.showSearchByDefault);
 
     if (shouldPreventOpeningSearch) {
       return;
@@ -717,8 +698,6 @@ class UDExMastheadShell extends UI5Element {
     if (this._searchOpener) {
       this._searchOpener.selected = false;
     }
-
-    this.fireEvent("search-opened");
   }
 
   /**
@@ -727,7 +706,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openMobileMenu(): void {
     if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
-      this.mobileBtn?.handleSelectedChange();
+      (this.mobileBtn as UDExMastheadItem).handleSelectedChange();
       this.handleOpenMobileMenu();
     }
   }
@@ -741,8 +720,8 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
-    (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
+    this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
     if (this.bodyOverflow) {
@@ -836,7 +815,7 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtMost("M");
   }
 
-  get isAtLeastBreakpointSizeM(): boolean {
+  get IsAtLeastBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtLeast("M");
   }