@sapudex/web-components 0.230.3 → 0.231.1

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": "0.230.3",
+  "version": "0.231.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -44,7 +44,7 @@
         },
         {
           "name": "udex-accordion-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-item-focus** - Triggered when the user focuses on an accordion item.\n\n### **Slots:**\n - **default** - Slot for accordion item content.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n---\n\n\n### **Events:**\n - **accordion-item-focus** - Triggered when the user focuses on an accordion item.\n- **accordion-item-click** - Triggered when the user clicks on an accordion item.\n\n### **Slots:**\n - **default** - Slot for accordion item content.",
           "doc-url": "",
           "attributes": [
             {
@@ -78,6 +78,10 @@
             {
               "name": "accordion-item-focus",
               "description": "Triggered when the user focuses on an accordion item."
+            },
+            {
+              "name": "accordion-item-click",
+              "description": "Triggered when the user clicks on an accordion item."
             }
           ],
           "js": {
@@ -107,6 +111,10 @@
               {
                 "name": "accordion-item-focus",
                 "description": "Triggered when the user focuses on an accordion item."
+              },
+              {
+                "name": "accordion-item-click",
+                "description": "Triggered when the user clicks on an accordion item."
               }
             ]
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.230.3",
+  "version": "0.231.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/Accordion.hbs

@@ -1,6 +1,7 @@
 <div
     class="udex-accordion"
     @keydown="{{keydownHandler}}"
+    @ui5-accordion-item-click="{{updateAllExpandedStatus}}"
     @ui5-accordion-item-focus="{{itemFocusHandler}}">
     <div class="udex-accordion__head" part="head">
         <h3 class="udex-accordion__headline">{{headlineText}}</h3>

package/src/Accordion.ts

@@ -104,26 +104,12 @@ class UDExAccordion extends UI5Element {
     UDExAccordion.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
-  get toggleAllText(): string {
-    return this._allExpanded
-      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
-      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
-  }
-
-  get isExpanded(): boolean {
-    return this._allExpanded;
-  }
-
-  get items(): {item: HTMLElement}[] {
-    return this._items.map(el => {
-      return {
-        item: el,
-      };
-    });
+  onEnterDOM() {
+    this.updateAllExpandedStatus();
   }
 
-  get headlineText(): string {
-    return this.headline ? this.headline : "Default headline";
+  updateAllExpandedStatus() {
+    this._allExpanded = this._items.every(item => item.expanded);
   }
 
   toggleAllHandler(e: Event) {
@@ -188,6 +174,28 @@ class UDExAccordion extends UI5Element {
       this._activeItemIndex = this._items?.indexOf(target) ?? -1;
     }
   }
+
+  get toggleAllText(): string {
+    return this._allExpanded
+      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
+      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
+  }
+
+  get isExpanded(): boolean {
+    return this._allExpanded;
+  }
+
+  get items(): {item: HTMLElement}[] {
+    return this._items.map(el => {
+      return {
+        item: el,
+      };
+    });
+  }
+
+  get headlineText(): string {
+    return this.headline ? this.headline : "Default headline";
+  }
 }
 
 UDExAccordion.define();

package/src/AccordionItem.ts

@@ -49,6 +49,12 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  */
 @event("accordion-item-focus")
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ */
+@event("accordion-item-click")
+
 class UDExAccordionItem extends UI5Element {
   /**
    * Defines the Badge at the end of the title item.
@@ -56,7 +62,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() numberBadge!: string;
+  @property()
+    numberBadge!: string;
 
   /**
    * Defines the title of the accordion item component.
@@ -66,7 +73,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() title!: string;
+  @property()
+    title!: string;
 
   /**
    * Defines if the accordion item is expanded by default
@@ -74,7 +82,8 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @public
    */
-  @property({ type: Boolean }) expanded!: boolean;
+  @property({ type: Boolean })
+    expanded!: boolean;
 
   /**
    * Used internally to understand the component's open or closed state.
@@ -82,14 +91,16 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @private
    */
-  @property({ type: Boolean, noAttribute: true }) isOpen = false;
+  @property({ type: Boolean, noAttribute: true })
+    isOpen = false;
 
   /**
    * Defines direction of the accordion item.
    *
    * @public
    */
-  @property({ type: String }) _direction?: string;
+  @property({ type: String })
+    _direction?: string;
 
   /**
    * Slot for accordion item content.
@@ -97,7 +108,8 @@ class UDExAccordionItem extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: Node, "default": true }) content!: Array<Node>;
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
 
   constructor() {
     super();
@@ -121,6 +133,7 @@ class UDExAccordionItem extends UI5Element {
     e.preventDefault();
     this.toggleItemState(e.currentTarget as HTMLElement, this.expanded);
     this.toggleExpanded();
+    this.fireEvent("accordion-item-click");
   }
 
   toggleItemState(el: HTMLElement, isActive: boolean) {

package/src/CountrySelector.ts

@@ -427,28 +427,23 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.onOpen(this.getInput());
     this._search.focus();
     this._search.value = key;
-    this.onValueSearch(key);
+    this.fireChangeSearch();
   }
 
   handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
-  onValueSearch(searchValue: string) {
-    this._shouldFilterItems = true;
-    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireEvent("change-search", { value: searchValue });
-  }
-
   handleTriggerClick() {
     this._dropdown.open = !this._dropdown.open;
   }
 
   handleValueSearch(e:CustomEvent) {
-    this.onValueSearch(e.detail.value as string);
+    this.onSearch(e);
+    this.fireChangeSearch();
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onSubmitSearch();
   }
 
@@ -491,6 +486,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  fireChangeSearch(): void {
+    this.fireEvent("change-search", { value: this._search.value });
+  }
+
   getSearch(): Search {
     return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }

package/src/MastheadCountrySelector.hbs

@@ -1,8 +1,6 @@
 <div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
     {{#if _isActiveRegionOpen}}
-        <span class="udex-masthead-country-selector__title">
-            {{countryTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
@@ -25,9 +23,10 @@
             non-interactive-submit-button
             show-submit-button>
         </udex-search>
+        <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
         <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
             {{#each _activeCountries}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                         @click="{{../fireEventCountryItemClick}}"
@@ -41,19 +40,16 @@
             {{/each}}
         </ul>
     {{else}}
-        <span class="udex-masthead-country-selector__title">
-            {{regionTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">
             {{#each regionsData}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-has-popup="true"
-                        accessible-role="button"
                         type="Button"
                         is-nav-item
                         has-border

package/src/MastheadCountrySelector.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import {
@@ -15,6 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -227,8 +230,15 @@ class UDExMastheadCountrySelector extends UI5Element {
   _activeCountries!: Array<Country>;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusRegionByIndex!: boolean;
+  _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExMastheadCountrySelector.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  }
+
   constructor() {
     super();
     this._activeCountries = [];
@@ -325,6 +335,10 @@ class UDExMastheadCountrySelector extends UI5Element {
       this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
     }
 
+    this._accSearchResultInfo = this._activeCountries.length
+      ? `${this._activeCountries.length} ${this.resultReturnedText}`
+      : this.noMatchesFoundText;
+
     this._shouldFocusBackBtn = false;
     this.fireEvent<SearchEventDetail>("country-selector-search", {
       value: e.detail.value,
@@ -502,6 +516,14 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  get noMatchesFoundText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+  }
+
   get items(): Array<UDExMastheadMenuItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
     return items ? Array.from(items) : [];

package/src/MastheadItem.ts

@@ -10,6 +10,7 @@ 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 { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
@@ -17,6 +18,7 @@ import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import { Target } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
@@ -334,6 +336,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
+    if (this.shouldFocusFirstElement) {
+      this.applyFocusToFirstElement();
+    }
+
     this.handleOutsideClick();
   }
 
@@ -441,7 +447,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   setDropdownInsetStart(): void {
-    const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+    const dropdown = this.dropdownHolder;
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
       const marginInlineStart = this.calculateMarginInlineStart(rect);
@@ -474,6 +480,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return null;
   }
 
+  async applyFocusToFirstElement(): Promise<void> {
+    const menu = this.querySelector("[udex-masthead-menu]");
+
+    if (menu) {
+      const menuItems = Array.from(menu.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>("[udex-masthead-menu-item]") || []);
+      const itemWithUrl = menuItems.find(menuItem => menuItem.url);
+      const focusableElement = itemWithUrl?.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-menu-item");
+      if (focusableElement) {
+        focusableElement.focus();
+        return;
+      }
+    }
+
+    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
+    focusedElement?.focus();
+  }
+
   handleDirection(): void {
     const directionStyles = window
       .getComputedStyle(this)
@@ -524,6 +547,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       || this.isNavItemTarget(target);
   }
 
+  get dropdownHolder(): HTMLElement {
+    return this.getDomElement(".udex-masthead-item__dropdown")!;
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -575,6 +602,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
+  get shouldFocusFirstElement(): boolean {
+    return this.isDropdownOpened && !this._preventFocusOut;
+  }
+
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }

package/src/MastheadMenu.hbs

@@ -40,7 +40,9 @@
         category="{{this.category}}">
         {{#each this.items}}
             <li>
-                {{#if this.url}}
+                {{#if this.isDivider}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else}}
                     <udex-masthead-menu-item
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
@@ -48,8 +50,6 @@
                         url="{{this.url}}"
                         label="{{this.title}}">
                     </udex-masthead-menu-item>
-                {{else}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
                 {{/if}}
             </li>
         {{/each}}

package/src/MastheadMenu.ts

@@ -12,6 +12,7 @@ import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import UDExMastheadItem from "./MastheadItem.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -22,6 +23,7 @@ export type Item = {
   title: string;
   url: string;
   externalLink: boolean;
+  isDivider?: boolean;
 };
 
 export type SubMenuLinkItem = {
@@ -37,9 +39,10 @@ export type MenuItem = {
 
 export type MenuItemClickEventDetail = {
   category?: string,
+  analyticsPath: Array<string>,
+  analyticsName: AnalyticsName,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
-  analyticsName: AnalyticsName,
   sourceNode: HTMLElement,
 }
 
@@ -79,6 +82,9 @@ export type MenuItemClickEventDetail = {
     category: {
       type: String,
     },
+    analyticsPath: {
+      type: Array<string>,
+    },
     item: {
       type: HTMLElement,
     },
@@ -143,18 +149,26 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: Event): void {
-    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", {
-        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-        analyticsName: AnalyticsName.Header,
-        item,
-        originalEvent: e,
-        ...(type !== ItemType.Heading && { category: list?.getAttribute("category") || "" }),
-      });
+    const menuItem = e.target as UDExMastheadMenuItem;
+    if (!menuItem.url?.length) {
+      return;
     }
+
+    const mainItem = this.closest("[udex-masthead-item]") as UDExMastheadItem;
+    const menuList = menuItem.closest(".udex-masthead-menu__list") as HTMLElement;
+    const sourceNode = menuItem.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement;
+    const category = menuList?.getAttribute("category") || "";
+
+    const eventDetail: MenuItemClickEventDetail = {
+      analyticsPath: [mainItem?.label, category, menuItem.label].filter(Boolean),
+      analyticsName: AnalyticsName.Header,
+      originalEvent: e,
+      item: menuItem,
+      sourceNode,
+      ...(menuItem.type !== ItemType.Heading && { category }),
+    };
+
+    this.fireEvent<MenuItemClickEventDetail>("menu-item-click", eventDetail);
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {
@@ -186,10 +200,16 @@ class UDExMastheadMenu extends UI5Element {
   get itemsList(): Array<MenuItem> {
     let id = 1;
     const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);
+
     return parsedItems.map((mainItem: MenuItem) => {
-      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
-        category.categoryId = `${id++}`;
-        return category;
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
+        subMenu.categoryId = `${id++}`;
+        subMenu.items = subMenu.items.map((item: Item) => ({
+          ...item,
+          ...(item.title === "-" && { isDivider: true }),
+        }));
+
+        return subMenu;
       });
 
       return mainItem;

package/src/MastheadMobileMenu.hbs

@@ -17,6 +17,7 @@
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
                             type="Button"
+                            is-back
                             has-border
                             icon-start
                             is-explore-back>
@@ -35,6 +36,7 @@
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
                                 type="Button"
+                                is-back
                                 has-border
                                 icon-start
                                 is-back-to-nav>
@@ -51,6 +53,7 @@
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
+                        is-back
                         has-border
                         icon-start
                         is-back-to-categories>
@@ -68,6 +71,7 @@
             @keydown="{{handleLeftRightKeys}}"
             accessible-role="button"
             type="Button"
+            first-level-btn
             first-level
             icon-end
             is-explore
@@ -88,7 +92,8 @@
                     type="Button"
                     has-border
                     icon-end
-                    first-level>
+                    first-level
+                    first-level-btn>
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item
@@ -96,6 +101,7 @@
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     target="{{this.target}}"
+                    first-level
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -110,6 +116,7 @@
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
+                second-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -125,6 +132,7 @@
                     aria-has-popup="true"
                     type="Button"
                     second-level
+                    second-level-btn
                     has-border
                     icon-end>
                 </udex-masthead-menu-item>
@@ -136,6 +144,7 @@
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
+                        second-level
                         has-border>
                     </udex-masthead-menu-item>
                 </li>
@@ -151,6 +160,7 @@
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
+                third-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -162,6 +172,7 @@
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
+                    third-level
                     has-border>
                 </udex-masthead-menu-item>
             </li>