@sapudex/web-components 2.4.0 → 2.4.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1326,7 +1326,7 @@
               "name": "background-color-scheme",
               "description": "Defines the solid background color.",
               "value": {
-                "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\"",
+                "type": "UDExEventRibbonColorSheme",
                 "default": "\"Blue\""
               }
             },
@@ -1369,9 +1369,7 @@
               {
                 "name": "background-color-scheme",
                 "description": "Defines the solid background color.",
-                "value": {
-                  "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\""
-                }
+                "value": { "type": "UDExEventRibbonColorSheme" }
               },
               {
                 "name": "background-image",
@@ -3380,11 +3378,6 @@
               "description": "Defines a title for sub menu items",
               "value": { "type": "string", "default": "\"\"" }
             },
-            {
-              "name": "text",
-              "description": "Defines the text of item.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "selected",
               "description": "Defines the selected item.",
@@ -3439,6 +3432,11 @@
               "name": "hide-active-border",
               "description": "Hide active border for item",
               "value": { "type": "boolean", "default": "\"\"" }
+            },
+            {
+              "name": "label",
+              "description": "Defines the label for analytics",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -3471,11 +3469,6 @@
                 "description": "Defines a title for sub menu items",
                 "value": { "type": "string" }
               },
-              {
-                "name": "text",
-                "description": "Defines the text of item.",
-                "value": { "type": "string" }
-              },
               {
                 "name": "selected",
                 "description": "Defines the selected item.",
@@ -3530,6 +3523,11 @@
                 "name": "hide-active-border",
                 "description": "Hide active border for item",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "label",
+                "description": "Defines the label for analytics",
+                "value": { "type": "string" }
               }
             ],
             "events": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/AssetsVariables.ts

@@ -25,8 +25,13 @@ const variablesOverwrite = `:root {
   ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
+  
+  /* Avatar */
+  [udex-avatar].dark {
+    ${getScopedVarName("--_ui5_avatar_outline")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);
+  }
 
-  udex-search {
+  [udex-search] {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
   }
 

package/src/MastheadCountrySelector.hbs

@@ -9,6 +9,7 @@
                 @click="{{backToRegions}}"
                 label="{{_activeRegion?.title}}"
                 type="Button"
+                part="menu-item"
                 is-back
                 icon-start>
             </udex-masthead-menu-item>
@@ -35,6 +36,7 @@
                         url="{{this.url}}"
                         label="{{this.displayTitle}}"
                         index="{{@index}}"
+                        part="menu-item"
                         is-nav-item>
                     </udex-masthead-menu-item>
                 </li>
@@ -55,6 +57,7 @@
                         aria-has-popup="true"
                         accessible-role="button"
                         type="Button"
+                        part="menu-item"
                         is-nav-item
                         has-border
                         icon-end

package/src/MastheadCountrySelector.ts

@@ -11,8 +11,10 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
-
 import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+import AnalyticsName from "./types/AnalyticsName.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import type UDExMastheadShell from "./MastheadShell.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -23,6 +25,8 @@ type UDExMastheadCountrySelectorRegionClickEventDetail = {
     countries: Array<Country>,
   },
   originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadCountrySelectorItemClickEventDetail = {
@@ -32,10 +36,13 @@ type UDExMastheadCountrySelectorItemClickEventDetail = {
     url: string,
   },
   originalEvent: Event,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 type UDExMastheadCountrySelectorSearchEventDetail = {
   value: string,
+  analyticsName: AnalyticsName,
 }
 
 export type Region = {
@@ -287,6 +294,7 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._shouldFocusBackBtn = false;
     this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
+      analyticsName: AnalyticsName.Header,
     });
     this.refreshRendering();
   }
@@ -323,7 +331,7 @@ class UDExMastheadCountrySelector extends UI5Element {
 
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
-      if (e.target !== this) {
+      if (e.target !== this && !this.isMobile) {
         this.handleSearchReset();
         this._isActiveRegionOpen = false;
         this.setActiveRegion(null);
@@ -412,14 +420,16 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   fireEventRegionItemClick(e: CustomEvent | KeyboardEvent): void {
-    const { label } = e.target as UDExMastheadMenuItem;
+    const item = e.target as UDExMastheadMenuItem;
 
     this.fireDecoratorEvent("region-item-click", {
       item: {
-        title: label,
+        title: item.label,
         countries: this._activeRegion?.countries || [],
       },
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 
@@ -434,6 +444,8 @@ class UDExMastheadCountrySelector extends UI5Element {
         url: url || "",
       },
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
     });
   }
 
@@ -476,6 +488,14 @@ class UDExMastheadCountrySelector extends UI5Element {
   get isSingleMode(): boolean {
     return this.regionsData.length === 1;
   }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
+  }
+
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
 }
 
 UDExMastheadCountrySelector.define();

package/src/MastheadItem.hbs

@@ -8,7 +8,9 @@
         href="{{href}}"
         aria-label="{{accessibleLabel}}"
         aria-describedby="{{ariaDescribedBy}}"
-        @click="{{handleItemClick}}">
+        @click="{{handleItemClick}}"
+        @mousedown="{{handleMouseDown}}"
+        @mouseup="{{handleMouseUp}}">
         {{> content}}
     </a>
     {{#if isTargetBlank}}
@@ -28,7 +30,9 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{handleItemClick}}">
+        @click="{{handleItemClick}}"
+        @mousedown="{{handleMouseDown}}"
+        @mouseup="{{handleMouseUp}}">
         {{> content}}
     </span>
     {{#if isDropdownOpened}}
@@ -45,6 +49,8 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
+        @mousedown="{{handleMouseDown}}"
+        @mouseup="{{handleMouseUp}}"
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
@@ -63,18 +69,20 @@
             mode="Decorative">
         </ui5-icon>
     {{else if image}}
-        <img
-            class="udex-masthead-item__image"
-            id="{{this._id}}_image-alt"
-            src="{{image}}"
-            alt="{{imageAlt}}"/>
-            {{#if imageAlt}}
-                <span
-                    id="image-desc"
-                    class="udex-masthead-hidden-text">
-                    {{imageAlt}}
-                </span>
-            {{/if}}
+        <div class="udex-masthead-item__image-wrap">
+            <img
+                class="udex-masthead-item__image"
+                id="{{this._id}}_image-alt"
+                src="{{image}}"
+                alt="{{imageAlt}}"/>
+        </div>
+        {{#if imageAlt}}
+            <span
+                id="image-desc"
+                class="udex-masthead-hidden-text">
+                {{imageAlt}}
+            </span>
+        {{/if}}
     {{else}}
         <span class="udex-masthead-item__text">
             <slot></slot>

package/src/MastheadItem.ts

@@ -11,7 +11,7 @@ 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, CART, COUNTRY_SELECTOR, SUPPORT,
+  OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
@@ -21,6 +21,7 @@ import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit
 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";
@@ -58,11 +59,14 @@ export type MenuItem = {
 type UDExMastheadItemItemClickEventDetail = {
   originalEvent: PointerEvent,
   item: UDExMastheadItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 export type UDExMastheadDropdownEventDetail = {
   title: string,
   action: UDExMastheadDropdownItemAction,
+  analyticsName: AnalyticsName,
 }
 
 /**
@@ -142,15 +146,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     menuTitle: string = "";
 
-  /**
-   * Defines the text of item.
-   *
-   * @public
-   * @default ""
-   */
-  @property({ type: String })
-    text: string = "";
-
   /**
    * Defines the selected item.
    *
@@ -264,6 +259,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the label for analytics
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
   /**
    * Slot for the dropdown
    *
@@ -282,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()) {
@@ -295,6 +300,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  onBeforeRendering(): void {
+    this.label = this.eventItemTitle;
+  }
+
   onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
     this._mastheadShell = this.mastheadShell;
@@ -304,14 +313,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
 
     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);
         }
@@ -321,13 +329,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();
     }
   }
@@ -343,7 +365,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscape(): void {
-    this._isEscPress = true;
     this.closeDropdown();
     if (this.isProfileBtn) {
       this._profileAvatar.focus();
@@ -381,17 +402,19 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   fireDropdownCloseEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-closed", { title, action });
+    this.fireDecoratorEvent("dropdown-closed", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireDropdownOpenEvent(title: string, action: UDExMastheadDropdownItemAction): void {
-    this.fireDecoratorEvent("dropdown-opened", { title, action });
+    this.fireDecoratorEvent("dropdown-opened", { title, action, analyticsName: AnalyticsName.Header });
   }
 
   fireItemClickEvent(e: PointerEvent): void {
     this.fireDecoratorEvent("item-click", {
       item: this,
       originalEvent: e,
+      analyticsName: AnalyticsName.Header,
+      sourceNode: e.currentTarget as HTMLElement,
     });
   }
 
@@ -442,7 +465,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   closeDropdown(): void {
     this.selected = false;
-    this.fireDropdownCloseEvent(this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
+    this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
   getDomElement(selector: string): HTMLElement | undefined | null {
@@ -453,6 +476,28 @@ 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 mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -532,6 +577,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.getAttribute("slot") === "cart";
   }
 
+  get isSearchBtn(): boolean {
+    return this.icon === "search";
+  }
+
   get isSupportBtn(): boolean {
     return this.getAttribute("slot") === "support";
   }
@@ -553,22 +602,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get eventItemTitle(): string {
-    if (this.accessibleName) {
-      return this.accessibleName.trim();
+    if (this.isSearchBtn) {
+      return UDExMastheadItem.i18nBundle.getText(SEARCH);
     }
-
     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);
     }

package/src/MastheadMenu.hbs

@@ -22,6 +22,8 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         <udex-masthead-menu-item
+            part="menu-item"
+            exportparts="menu-item"
             id="category-{{categoryId}}"
             @click="{{../../handleMenuItemClick}}"
             url="{{this.url}}"
@@ -42,11 +44,14 @@
             <li>
                 {{#if this.url}}
                     <udex-masthead-menu-item
+                        part="menu-item"
+                        exportparts="menu-item"
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
                         ?external-link="{{this.externalLink}}"
                         url="{{this.url}}"
-                        label="{{this.title}}">
+                        label="{{this.title}}"
+                        exportparts="badge">
                     </udex-masthead-menu-item>
                 {{else}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>

package/src/MastheadMenu.ts

@@ -12,6 +12,7 @@ import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
+import AnalyticsName from "./types/AnalyticsName.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -39,6 +40,8 @@ type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
+  analyticsName: AnalyticsName,
+  sourceNode: HTMLElement,
 }
 
 /**
@@ -131,6 +134,8 @@ class UDExMastheadMenu extends UI5Element {
     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") || "" }),

package/src/MastheadMenuItem.hbs

@@ -41,7 +41,7 @@
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
             aria-haspopup="{{ariaHasPopup}}"
-            role="button"
+            role="{{accessibleRoleText}}"
             tabindex="{{_tabIndex}}">
             {{#if iconStart}}
                 {{>arrow-left}}

package/src/MastheadMenuItem.ts

@@ -225,8 +225,8 @@ class UDExMastheadMenuItem extends UI5Element {
     return this.externalLink ? "new-win-desc" : null;
   }
 
-  get accessibleRoleText(): string | null {
-    return this.accessibleRole ? this.accessibleRole : null;
+  get accessibleRoleText(): string {
+    return this.accessibleRole ? this.accessibleRole : "menuitem";
   }
 
   get partAttr(): string {