@sapudex/web-components 0.199.3 → 0.225.0

package/src/MastheadItem.hbs

@@ -1,11 +1,4 @@
 {{#if hasHref}}
-    {{#if isTargetBlank}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
     <a
         id="{{this._id}}"
         class="{{additionalClass}}"
@@ -18,6 +11,13 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </a>
+    {{#if isTargetBlank}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
 {{else if isProfileBtn}}
     <span
         id="{{this._id}}"
@@ -32,7 +32,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </span>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{else}}
@@ -48,21 +48,24 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if showDropdown}}
+    {{#if isDropdownOpened}}
         {{> dropdown}}
     {{/if}}
 {{/if}}
 
 {{#*inline "content"}}
     {{#if icon}}
-        <span class="udex-masthead-item__icon-container">
-          <ui5-icon
-              class="udex-masthead-item__icon"
-              name="{{icon}}"
-              show-tooltip="{{iconAlt}}"
-              accessible-name="{{iconAlt}}">
-          </ui5-icon>
-        </span>
+        <ui5-icon
+            class="udex-masthead-item__icon"
+            name="{{icon}}"
+            show-tooltip="{{iconAlt}}"
+            accessible-name="{{iconAlt}}">
+        </ui5-icon>
+    {{else if image}}
+        <img
+            class="udex-masthead-item__image"
+            src="{{image}}"
+            alt="{{imageAlt}}"/>
     {{else}}
         <span class="udex-masthead-item__text">
             <slot></slot>

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
  *
@@ -62,7 +93,7 @@ export type ItemClickEventDetail = {
  * For the <code>udex-masthead-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -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 {
   /**
@@ -104,7 +142,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     subItems!: string;
 
   /**
@@ -113,7 +151,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     menuTitle!: string;
 
   /**
@@ -122,7 +160,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    * @default ""
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     text!: string;
 
   /**
@@ -134,15 +172,42 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     selected!: boolean;
 
+  /**
+   * Defines if the arrow icon is hidden.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    hideArrowIcon!: boolean;
+
   /**
    * Defines the icon in the item.
    *
    * @public
    * @default ""
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     icon!: string;
 
+  /**
+   * Defines the image in the item.
+   *
+   * @public
+   * @default ""
+   */
+  @property({ type: String })
+    image!: string;
+
+  /**
+   * Defines an alt text for item image
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageAlt!: string;
+
   /**
    * Defines the href of the item.
    *
@@ -183,8 +248,8 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    iconAlt?: string;
+  @property({ type: String })
+    iconAlt!: string;
 
   /**
    * Hide active border for item
@@ -193,7 +258,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: Boolean })
-    hideActiveBorder?: boolean;
+    hideActiveBorder!: boolean;
 
   /**
    * Defines direction of the text.
@@ -201,7 +266,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @private
    */
   @property({ type: String })
-    _direction?: string;
+    _direction!: string;
 
   /**
    * Defines the mobile mode for component
@@ -231,11 +296,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   _profileAvatar!: UDExAvatar;
   _mastheadShell!: UDExMastheadShell;
+  _isEscPress!: boolean;
 
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM(): void {
@@ -251,13 +317,32 @@ 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 {
-    const eTarget = e.relatedTarget as HTMLElement;
-    const focusedAvatarItem = eTarget?.shadowRoot?.querySelector("[ui5-avatar]");
+    if (e.relatedTarget === null || this._isEscPress) {
+      return;
+    }
 
-    if (!this.isMobile && (!this.isProfileBtn || eTarget === null || focusedAvatarItem)) {
+    const eTarget = e.target as HTMLElement;
+    if (!this.isMobile && eTarget.getAttribute("slot") === "dropdown") {
       this.closeDropdown();
     }
   }
@@ -273,6 +358,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
+    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -282,13 +368,42 @@ 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,
@@ -343,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 {
@@ -362,10 +478,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get additionalClass(): string {
-    const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
+    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" : "";
-    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`.trim();
+    const countrySelectorClass = this.isCountrySelectorBtn ? "udex-masthead-item__button--country-selector" : "";
+    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass} ${countrySelectorClass}`.trim();
   }
 
   get profileAvatar(): UDExAvatar {
@@ -410,7 +527,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.join(" ").trim();
   }
 
-  get showDropdown(): boolean {
+  get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
 
@@ -419,7 +536,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get hasArrowDown(): boolean {
-    return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
+    return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length && !this.hideArrowIcon;
   }
 
   get isProfileBtn(): boolean {
@@ -430,12 +547,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "exploreSAP";
   }
 
-  get accessibleLabel(): string {
-    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+  get isCountrySelectorBtn(): boolean {
+    return this.getAttribute("slot") === "countrySelector";
   }
 
-  get isMenuItem(): boolean {
-    return true;
+  get isCartBtn(): boolean {
+    return this.getAttribute("slot") === "cart";
+  }
+
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
   get isMobile(): boolean {
@@ -449,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,16 +34,23 @@
 {{/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>
-                <udex-masthead-menu-item
-                    @click="{{../../../handleMenuItemClick}}"
-                    badge="{{this.badge}}"
-                    ?external-link="{{this.externalLink}}"
-                    url="{{this.url}}"
-                    label="{{this.title}}">
-                </udex-masthead-menu-item>
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        @click="{{../../../handleMenuItemClick}}"
+                        badge="{{this.badge}}"
+                        ?external-link="{{this.externalLink}}"
+                        url="{{this.url}}"
+                        label="{{this.title}}">
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{/if}}
             </li>
         {{/each}}
     </ul>

package/src/MastheadMenu.ts

@@ -8,7 +8,8 @@ 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";
 
 // Styles
@@ -34,6 +35,7 @@ export type MenuItem = {
 };
 
 export type MenuItemClickEventDetail = {
+  category?: string,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
 }
@@ -49,7 +51,7 @@ export type MenuItemClickEventDetail = {
  * For the <code>udex-masthead-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -60,7 +62,7 @@ export type MenuItemClickEventDetail = {
   renderer: litRender,
   styles: MastheadMenuCss,
   template: MastheadMenuTemplate,
-  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem],
+  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem, UDExDivider],
 })
 
 /**
@@ -71,6 +73,9 @@ export type MenuItemClickEventDetail = {
  */
 @event("menu-item-click", {
   detail: {
+    category: {
+      type: String,
+    },
     item: {
       type: HTMLElement,
     },
@@ -129,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/MastheadMenuItem.hbs

@@ -1,28 +1,29 @@
 {{#if isActive}}
-    {{#if externalLink}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
     <a
         class="udex-masthead-menu-item {{rootClass}}"
         aria-describedby="{{ariaDescribedby}}"
         role="{{accessibleRoleText}}"
         href="{{url}}"
         part="{{partAttr}}"
-        target="{{targetLink}}">
+        target="{{targetLink}}"
+        tabindex="{{_tabIndex}}">
         {{#if iconStart}}
             {{>arrow-left}}
         {{/if}}
-        <span class={{labelClass}}>
+        <span class="{{labelClass}}">
            {{>label}}
         </span>
         {{#if iconEnd}}
             {{>arrow-right}}
         {{/if}}
     </a>
+    {{#if externalLink}}
+        <span
+            id="new-win-desc"
+            class="udex-masthead-hidden-text">
+            {{openInNewWindowText}}
+        </span>
+    {{/if}}
     {{#if badge}}
         <udex-badge
             part="badge"
@@ -39,7 +40,9 @@
             _id="{{id}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
-            role="button">
+            aria-haspopup="{{ariaHasPopup}}"
+            role="button"
+            tabindex="{{_tabIndex}}">
             {{#if iconStart}}
                 {{>arrow-left}}
             {{/if}}

package/src/MastheadMenuItem.ts

@@ -6,6 +6,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
@@ -32,7 +33,7 @@ export enum ItemType {
  * For the <code>udex-masthead-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenuItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -133,6 +134,22 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: Boolean })
     iconEnd?: boolean;
 
+  /**
+   * Defines the index for the item.
+   *
+   * @public
+   */
+  @property({ validator: Integer })
+    index!: number;
+
+  /**
+   * Defines the aria-haspopup attribute for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    ariaHasPopup!: string;
+
   /**
    * Define the target of the item
    * <b>Note:</b> Standard hyperlink behavior is supported.
@@ -141,27 +158,36 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: Target, defaultValue: Target._self })
     target!: `${Target}`;
 
+  /**
+   * Defines the tabindex attribute for the item.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _tabIndex!: string;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadMenuItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
   }
 
   get rootClass(): string {
-    const badgeClass = this.badge ? "udex-masthead-menu-item_badge" : "";
-    const rootClass = this.isHeadingType ? "udex-masthead-menu-item_is-header" : "udex-masthead-menu-item_is-list";
+    const prefixClass = "udex-masthead-menu-item";
+    const badgeClass = this.badge ? `${prefixClass}_badge` : "";
+    const rootClass = this.isHeadingType ? `${prefixClass}_is-header` : `${prefixClass}_is-list`;
     return `${rootClass} ${badgeClass}`;
   }
 
   get labelClass(): string {
     const root = "udex-masthead-menu-item__label";
-    return this.externalLink ? `${root} udex-masthead-menu-item__label_with-icon` : `${root}`;
+    return this.externalLink ? `${root} ${root}__label_with-icon` : `${root}`;
   }
 
   get isHeadingType(): boolean {
@@ -173,7 +199,7 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get isActive(): boolean {
-    return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+    return !!this.url && !this.isButtonType;
   }
 
   get targetLink(): string {