@sapudex/web-components 0.224.0 → 0.225.0

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,
+} from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -21,6 +23,12 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+export enum DropdownItemAction {
+  Open = "Open",
+  Close = "Close",
+  ClickOutside = "Click Outside",
+}
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -51,6 +59,29 @@ export type ItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
+export type DropdownEventDetail = {
+  title: string,
+  action: DropdownItemAction,
+}
+
+export const DropdownBaseEventDetail = {
+  detail: {
+    title: { type: String },
+    action: { type: DropdownItemAction },
+  },
+};
+
+export const ItemBaseEvent = {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: Event,
+    },
+  },
+};
+
 /**
  * @class
  *
@@ -86,16 +117,23 @@ export type ItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("item-click", {
-  detail: {
-    item: {
-      type: HTMLElement,
-    },
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("item-click", ItemBaseEvent)
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-closed", DropdownBaseEventDetail)
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("dropdown-opened", DropdownBaseEventDetail)
 
 class UDExMastheadItem extends UI5Element implements IMastheadItem {
   /**
@@ -258,6 +296,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
+  _isEscPress!: boolean;
 
   static i18nBundle: I18nBundle;
 
@@ -278,10 +317,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, DropdownItemAction.ClickOutside);
+        }
+
+        this.selected = false;
+      }
+    });
   }
 
   handleFocusout(e: FocusEvent): void {
-    if (e.relatedTarget === null) {
+    if (e.relatedTarget === null || this._isEscPress) {
       return;
     }
 
@@ -302,6 +358,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
+    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -311,23 +368,48 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
+    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }
 
   handleItemClick(e: Event): void {
+    this.fireItemClickEvent(e);
     this.handleSelectedChange();
+    this.fireDropdownEvents();
+  }
+
+  handleSelectedChange(): void {
+    this.selected = this.isMobile ? true : !this.selected;
+  }
+
+  fireDropdownEvents(): void {
+    if (this.hasDropdownSlot) {
+      const { Open, Close } = DropdownItemAction;
+      const action = this.selected ? Open : Close;
+      if (this.selected) {
+        this.fireDropdownOpenEvent(this.eventItemTitle, action);
+      } else {
+        this.fireDropdownCloseEvent(this.eventItemTitle, action);
+      }
+    }
+  }
+
+  fireDropdownCloseEvent(title: string, action: DropdownItemAction): void {
+    this.fireEvent<DropdownEventDetail>("dropdown-closed", { title, action });
+  }
 
+  fireDropdownOpenEvent(title: string, action: DropdownItemAction): void {
+    this.fireEvent<DropdownEventDetail>("dropdown-opened", { title, action });
+  }
+
+  fireItemClickEvent(e: Event): void {
     this.fireEvent<ItemClickEventDetail>("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) {
@@ -376,6 +458,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
+    this.fireDropdownCloseEvent(this.eventItemTitle, DropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -444,7 +527,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.join(" ").trim();
   }
 
-  get showDropdown(): boolean {
+  get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
 
@@ -468,12 +551,12 @@ 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 accessibleLabel(): string {
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
   get isMobile(): boolean {
@@ -487,6 +570,22 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get openInNewWindowText(): string {
     return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
   }
+
+  get eventItemTitle(): string {
+    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);
+    }
+
+    return this.innerText.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, { ItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 
@@ -35,6 +35,7 @@ export type MenuItem = {
 };
 
 export type MenuItemClickEventDetail = {
+  category?: string,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
 }
@@ -72,6 +73,9 @@ export type MenuItemClickEventDetail = {
  */
 @event("menu-item-click", {
   detail: {
+    category: {
+      type: String,
+    },
     item: {
       type: HTMLElement,
     },
@@ -130,10 +134,17 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: Event): void {
-    this.fireEvent<MenuItemClickEventDetail>("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.fireEvent<MenuItemClickEventDetail>("menu-item-click", {
+        item,
+        originalEvent: e,
+        ...(type !== ItemType.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

@@ -19,6 +19,8 @@ import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenu
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
 export type MobileItemClickEventDetail = {
+  category?: string,
+  isMobile: boolean,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
 }
@@ -71,7 +73,13 @@ export type MobileItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("explorer-menu-click")
+@event("explorer-menu-click", {
+  detail: {
+    originalEvent: {
+      type: Event,
+    },
+  },
+})
 
 class UDExMastheadMobileMenu extends UI5Element {
   /**
@@ -152,7 +160,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireEvent("explorer-menu-click");
+    this.fireEvent("explorer-menu-click", { originalEvent: e });
   }
 
   handleBackToMenuItems(e: Event) {
@@ -239,6 +247,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);
@@ -406,8 +419,10 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
-  fireMobileItemEvent(e: Event) {
+  fireMobileItemEvent(e: Event, category?: string) {
     this.fireEvent<MobileItemClickEventDetail>("item-click", {
+      ...(category && { category }),
+      isMobile: true,
       item: e.target as UDExMastheadMenuItem,
       originalEvent: e,
     }, true, false);

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}}
@@ -96,7 +100,6 @@
                 <slot name="countrySelector"></slot>
             </div>
         {{/if}}
-
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"

package/src/MastheadShell.ts

@@ -7,7 +7,7 @@ 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 {
-  isLeft, isRight, isSpace, isEnter,
+  isLeft, isRight, isSpace, isEnter, isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
@@ -16,7 +16,7 @@ import "@ui5/webcomponents-icons/dist/cart.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 from "./MastheadItem.js";
+import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
@@ -32,6 +32,12 @@ 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 },
+  },
+};
+
 /**
  * @class
  *
@@ -83,54 +89,64 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  *
  * @public
  */
-@event("search-click")
+@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")
 
 /**
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
  */
-@event("cart-click")
+@event("cart-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
  */
-@event("profile-click")
+@event("profile-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
  */
-@event("country-selector-click")
+@event("country-selector-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the logo.
  *
  * @public
  */
-@event("logo-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("logo-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the site label.
  *
  * @public
+ * @public
  */
-@event("site-label-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("site-label-click", MastheadOriginalEvent)
 
 class UDExMastheadShell extends UI5Element {
   /**
@@ -350,8 +366,6 @@ class UDExMastheadShell extends UI5Element {
     this._searchOpener = this.searchOpener;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    this.handleOutsideClick();
-
     if (this._isSearchOpened) {
       this.focusSearchInput();
     }
@@ -380,6 +394,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
+      this.resetSelectedItems();
       return;
     }
 
@@ -409,6 +424,19 @@ 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;
@@ -443,23 +471,23 @@ class UDExMastheadShell extends UI5Element {
 
   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");
+    this.fireEvent("cart-click", { originalEvent: e });
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("profile-click");
+    this.fireEvent("profile-click", { originalEvent: e });
   }
 
   handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("country-selector-click");
+    this.fireEvent("country-selector-click", { originalEvent: e });
   }
 
   handleOpenMobileMenu(): void {
@@ -478,9 +506,10 @@ class UDExMastheadShell extends UI5Element {
     this.fireEvent("mobile-menu-open");
   }
 
-  handleCloseSearch(): void {
-    this.closeSearch();
+  handleCloseSearch(e: CustomEvent): void {
     this._closeBtnClicked = true;
+    this.fireEvent("search-close-click", { originalEvent: e });
+    this.closeSearch();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -491,17 +520,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", (e: Event) => {
-      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) {
@@ -527,7 +545,10 @@ class UDExMastheadShell extends UI5Element {
 
   resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedId) {
+      if (item._id !== clickedId && item.selected) {
+        if (item.hasDropdownSlot) {
+          item.fireDropdownCloseEvent(item.eventItemTitle, DropdownItemAction.ClickOutside);
+        }
         item.selected = false;
       }
     });
@@ -673,6 +694,7 @@ class UDExMastheadShell extends UI5Element {
    */
   closeSearch(): void {
     this._isSearchOpened = false;
+    this.fireEvent("search-closed");
   }
 
   /**
@@ -683,7 +705,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;
@@ -695,6 +717,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._searchOpener) {
       this._searchOpener.selected = false;
     }
+
+    this.fireEvent("search-opened");
   }
 
   /**
@@ -703,7 +727,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openMobileMenu(): void {
     if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
-      (this.mobileBtn as UDExMastheadItem).handleSelectedChange();
+      this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
   }
@@ -717,8 +741,8 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
-    this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
     if (this.bodyOverflow) {
@@ -812,7 +836,7 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtMost("M");
   }
 
-  get IsAtLeastBreakpointSizeM(): boolean {
+  get isAtLeastBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtLeast("M");
   }
 

package/src/PasswordField.hbs

@@ -2,6 +2,7 @@
     type="{{type}}"
     value="{{value}}"
     label="{{passwordLabel}}"
+    autocomplete="{{autocomplete}}"
     ?disabled="{{disabled}}"
     ?readonly="{{readonly}}"
     ?displayonly="{{displayonly}}"