@sapudex/web-components 0.199.3 → 0.224.0

package/src/MastheadMobileMenu.ts

@@ -7,10 +7,10 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp, isDown, isRight, isLeft, isEnter,
+  isUp, isDown, isRight, isLeft, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
-import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
@@ -34,7 +34,7 @@ export type MobileItemClickEventDetail = {
  * For the <code>udex-masthead-mobile-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMobileMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -122,18 +122,19 @@ class UDExMastheadMobileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onAfterRendering() {
     this.handleMenuMode();
+    this.setTabIndexForItems();
     this.handleFocusItem();
   }
 
   handleMenuItemClick(e: Event) {
     e.preventDefault();
     e.stopPropagation();
-    const item = this.getItemByList(e.target as UDExMastheadItem);
+    const item = this.getClickedItem(e.target as UDExMastheadItem);
     this.openCategories(item);
     this.setFocusItemByIndex(0);
     this.fireMobileItemEvent(e);
@@ -175,16 +176,22 @@ class UDExMastheadMobileMenu extends UI5Element {
     this.fireMobileItemEvent(e);
   }
 
-  handleKeyDown(e: KeyboardEvent) {
+  handlePressKey(e: KeyboardEvent) {
     this.handleUpArrow(e);
     this.handleDownArrow(e);
+    this.handleLeftRightKeys(e);
+    this.handleHomeKey(e);
+    this.handleEndKey(e);
+  }
+
+  handleLeftRightKeys(e: KeyboardEvent) {
     this.handleRightArrow(e);
     this.handleLeftArrow(e);
   }
 
   handleRightArrow(e: KeyboardEvent) {
-    this.handleDirection();
-    if (isRight(e) || isEnter(e)) {
+    if (isRight(e)) {
+      this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToBackWithKeyboard(e);
       } else {
@@ -194,8 +201,8 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   handleLeftArrow(e: KeyboardEvent) {
-    this.handleDirection();
-    if (isLeft(e) || isEnter(e)) {
+    if (isLeft(e)) {
+      this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToNextLevelWithKeyboard(e);
       } else {
@@ -219,9 +226,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   handleDirection() {
-    const directionStyles: string = window
-      .getComputedStyle(this)
-      .getPropertyValue("direction");
+    const directionStyles: string = window.getComputedStyle(this).getPropertyValue("direction");
     if (!directionStyles) {
       this._direction = "ltr";
     } else {
@@ -235,14 +240,12 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   handleMenuMode() {
-    if (this.isCategoriesOpen) {
-      if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
-        this.openCategories(this.exploreItem);
-      }
+    if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
+      this.openCategories(this.exploreItem);
+    }
 
-      if (this.isSingleMenuMode) {
-        this.openCategories(this.items[0]);
-      }
+    if (this.isSingleMenuMode && !this._hideExploreSapBtn) {
+      this.openCategories(this.items[0]);
     }
   }
 
@@ -273,13 +276,14 @@ class UDExMastheadMobileMenu extends UI5Element {
     if (target.hasAttribute("is-explore-back")) {
       this.showFirstLevelMenu();
       this.setFocusExploreBtn();
+      this._focusedItemIndex = 0;
       this.fireMobileItemEvent(e);
     }
   }
 
   moveToNextLevelWithKeyboard(e: KeyboardEvent) {
     const target = e.target as UDExMastheadItem;
-    const item = this.getItemByList(e.target as UDExMastheadItem);
+    const item = this.getClickedItem(e.target as UDExMastheadItem);
 
     if (target.hasAttribute("is-explore")) {
       this._hideExploreSapBtn = true;
@@ -311,26 +315,67 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   focusPreviousItem(e: KeyboardEvent): void {
-    const target = e.target as HTMLElement;
-    const currentItem = target.parentElement as HTMLElement;
-    const currentSelectedIndex = this.getCurrentIndex(currentItem);
-    const lastItemIndex = this.navigationItems.length - 1;
-    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    const listItem = this.getListItemByIndex(previousSelectIndex);
-    listItem?.focus();
+    const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
+    const lastIndex = this.navigationItems.length - 1;
+    const previousIndex = currentIndex - 1 < 0 ? lastIndex : currentIndex - 1;
+    const currentItem = this.getListItemByIndex(currentIndex);
+    let prevItem = this.getListItemByIndex(previousIndex);
+
+    if (prevItem.type === ItemType.Heading) {
+      prevItem = this.getListItemByIndex(lastIndex);
+    }
+
+    currentItem._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.focus();
   }
 
   focusNextItem(e: KeyboardEvent): void {
-    const target = e.target as HTMLElement;
-    const currentItem = target.parentElement as HTMLElement;
-    const currentSelectedIndex = this.getCurrentIndex(currentItem);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    const listItem = this.getListItemByIndex(nextSelectIndex);
-    listItem?.focus();
+    const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
+    const navLength = this.navigationItems.length;
+    const nextIndex = currentIndex + 1 > navLength - 1 ? 0 : currentIndex + 1;
+    const currentItem = this.getListItemByIndex(currentIndex);
+    let nextItem = this.getListItemByIndex(nextIndex);
+
+    if (nextItem.type === ItemType.Heading) {
+      nextItem = this.getListItemByIndex(nextIndex + 1);
+    }
+
+    currentItem._tabIndex = "-1";
+    nextItem._tabIndex = "0";
+    nextItem.focus();
+  }
+
+  handleEndKey(e: KeyboardEvent): void {
+    if (isEnd(e)) {
+      e.preventDefault();
+      const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
+      const lastIndex = this.navigationItems.length - 1;
+      const currentItem = this.getListItemByIndex(currentIndex);
+      const lastItem = this.getListItemByIndex(lastIndex);
+
+      currentItem._tabIndex = "-1";
+      lastItem._tabIndex = "0";
+      lastItem.focus();
+    }
+  }
+
+  handleHomeKey(e: KeyboardEvent): void {
+    if (isHome(e)) {
+      e.preventDefault();
+      const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
+      const currentItem = this.getListItemByIndex(currentIndex);
+      const firstItem = this.getListItemByIndex(0);
+      const focusedIndex = firstItem.type === ItemType.Heading ? 1 : 0;
+
+      currentItem._tabIndex = "-1";
+      this.getListItemByIndex(focusedIndex)._tabIndex = "0";
+      this.getListItemByIndex(focusedIndex).focus();
+    }
   }
 
   openExploreSapMenu(e: Event) {
-    const item = this.getItemByList(e.target as UDExMastheadItem);
+    const item = this.getClickedItem(e.target as UDExMastheadItem);
     this._hideExploreSapBtn = true;
     this._showCategoryItems = false;
     this.openCategories(item);
@@ -377,7 +422,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._shouldFocusExploreBtn = true;
   }
 
-  getItemByList(el: UDExMastheadItem): UDExMastheadItem {
+  getClickedItem(el: UDExMastheadItem): UDExMastheadItem {
     const items = [
       ...this.items,
       ...[this.hasExploreBtnSlot ? this.exploreItem : []],
@@ -396,12 +441,24 @@ class UDExMastheadMobileMenu extends UI5Element {
     return categories;
   }
 
-  getCurrentIndex(item: HTMLElement): number {
+  getCurrentIndex(item: UDExMastheadMenuItem): number {
     return this.navigationItems.indexOf(item);
   }
 
-  getListItemByIndex(index: number): HTMLElement | null {
-    return this.navigationItems[index]?.querySelector("[udex-masthead-menu-item]");
+  getListItemByIndex(index: number): UDExMastheadMenuItem {
+    return this.navigationItems[index];
+  }
+
+  setTabIndexForItems(): void {
+    this.navigationItems.forEach((item, index) => {
+      if (this._focusedItemIndex > 0) {
+        item._tabIndex = index === this._focusedItemIndex ? "0" : "-1";
+        return;
+      }
+
+      const isPrevItemHeading = this.navigationItems[index - 1]?.type === ItemType.Heading;
+      item._tabIndex = isPrevItemHeading || index === 0 ? "0" : "-1";
+    });
   }
 
   get exploreBtnMenu(): UDExMastheadMenuItem {
@@ -412,8 +469,8 @@ class UDExMastheadMobileMenu extends UI5Element {
     return this._direction === "rtl";
   }
 
-  get navigationItems(): Array<HTMLElement> {
-    return Array.from(this.shadowRoot!.querySelectorAll(".udex-masthead-mobile-menu__list-item"));
+  get navigationItems(): Array<UDExMastheadMenuItem> {
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExMastheadMenuItem>("ul [udex-masthead-menu-item]"));
   }
 
   get showNavigation(): boolean {

package/src/MastheadProfileMenu.hbs

@@ -23,12 +23,12 @@
   <div class="udex-masthead-profile-menu__links">
     <udex-masthead-menu
         sub-items='{{linksList}}'
-        @ui5-menu-item-click={{handleProfileMenuItemClick}}>
+        @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
     </udex-masthead-menu>
     {{#if logoutLink}}
         <div class="udex-masthead-profile-menu__actions">
             <udex-masthead-menu-item
-                @click={{handleUserLogoutItemClick}}
+                @click="{{handleUserLogoutItemClick}}"
                 url="{{logoutUrl}}"
                 label="{{logoutText}}">
             </udex-masthead-menu-item>

package/src/MastheadProfileMenu.ts

@@ -42,7 +42,7 @@ export type ProfileMenuItemClickEventDetail = {
  * For the <code>udex-masthead-profile-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadProfileMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadProfileMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -69,7 +69,7 @@ export type ProfileMenuItemClickEventDetail = {
 })
 
 /**
- * Fires when profile ment item is clicked
+ * Fires when profile menu item is clicked
  *
  * @public
  */
@@ -131,7 +131,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   handleUserLogoutItemClick(e: Event): void {

package/src/MastheadShell.hbs

@@ -37,7 +37,7 @@
                     icon="decline"
                     tooltip="{{closeButtonAccessibleName}}"
                     accessible-name="{{closeButtonAccessibleName}}"
-                    @click={{hideSearch}}>
+                    @click="{{handleCloseSearch}}">
                 </udex-control-button>
             </div>
         {{/if}}
@@ -46,7 +46,7 @@
     <div class="udex-masthead-shell__right-menu">
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
-                @ui5-item-click="{{handleMobileMenuClick}}"
+                @ui5-item-click="{{handleOpenMobileMenu}}"
                 class="udex-masthead-shell__menu-btn"
                 accessible-role="button"
                 icon="menu2"
@@ -88,10 +88,19 @@
                 <slot name="profile"></slot>
             </div>
         {{/if}}
+        {{#if hasCountrySelector}}
+            <div
+                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCountrySelectorClick}}">
+                <slot name="countrySelector"></slot>
+            </div>
+        {{/if}}
+
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
-                @ui5-item-click="{{handleMobileCloseClick}}"
+                @ui5-item-click="{{closeMobileMenu}}"
                 class="udex-masthead-shell__close-btn"
                 accessible-role="button"
                 icon="decline"