@sapudex/web-components 2.30.0 → 2.32.0

package/src/MastheadCountrySelector.ts

@@ -9,7 +9,7 @@ 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 {
-  isUp, isDown, isRight, isLeft, isEnd, isHome,
+  isEnd, isHome, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
@@ -17,7 +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";
+import { NO_MATCHES_FOUND, RESULT_RETURNED, BACK_TO_REGION_LIST } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -217,14 +217,6 @@ class UDExMastheadCountrySelector extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
-  /**
-   * Defines direction of the component.
-   *
-   * @private
-   */
-  @property({ type: String })
-    _direction!: string;
-
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
 
@@ -250,7 +242,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
     this.setTabIndexForItems();
-    this.handleDirection();
     this.handleOutsideClick();
 
     if (this.isSingleMode) {
@@ -283,55 +274,23 @@ class UDExMastheadCountrySelector extends UI5Element {
   handleKeyDown(e: KeyboardEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
-    if (item.hasAttribute("is-back")) {
-      this.handleBackKeyboard(e);
-      return;
-    }
-
     if (item.hasAttribute("is-nav-item")) {
-      this.handleUpArrow(e);
-      this.handleDownArrow(e);
-      this.handleRightArrow(e);
-      this.handleLeftArrow(e);
+      const isFirstItem = item === this.items[0];
+      const isLastItem = item === this.items[this.items.length - 1];
+
+      if (isTabNext(e) && !isLastItem) {
+        e.preventDefault();
+        this.focusNextItem(item);
+      }
+      if (isTabPrevious(e) && !isFirstItem) {
+        e.preventDefault();
+        this.focusPreviousItem(item);
+      }
       this.handleHomeKey(e);
       this.handleEndKey(e);
     }
   }
 
-  handleBackKeyboard(e: KeyboardEvent): void {
-    if ((isLeft(e) && !this.isRtlDirection) || (isRight(e) && this.isRtlDirection)) {
-      this.backToRegions();
-    }
-  }
-
-  handleRightArrow(e: KeyboardEvent): void {
-    if (isRight(e) && !this.isRtlDirection) {
-      this.openCountriesByRegion(e);
-      this.fireEventRegionItemClick(e);
-    }
-  }
-
-  handleLeftArrow(e: KeyboardEvent): void {
-    if (isLeft(e) && this.isRtlDirection) {
-      this.openCountriesByRegion(e);
-      this.fireEventRegionItemClick(e);
-    }
-  }
-
-  handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      e.preventDefault();
-      this.focusPreviousItem(e);
-    }
-  }
-
-  handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      e.preventDefault();
-      this.focusNextItem(e);
-    }
-  }
-
   handleSearch(e: CustomEvent): void {
     const searchTerm = e.detail.value.toLowerCase().trim() as string;
 
@@ -377,17 +336,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._requestRender = !this._requestRender;
   }
 
-  handleDirection() {
-    const directionStyles: string = window
-      .getComputedStyle(this)
-      .getPropertyValue("direction");
-    if (!directionStyles) {
-      this._direction = "ltr";
-    } else {
-      this._direction = directionStyles;
-    }
-  }
-
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
       if (e.target !== this && !this.isMobile) {
@@ -415,21 +363,9 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._shouldFocusRegionByIndex = true;
   }
 
-  focusPreviousItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;
-    const prevItem = this.items[prevIndex];
-    this.items[currentIndex]._tabIndex = "-1";
-    prevItem._tabIndex = "0";
-    prevItem.scrollIntoView({ block: "center" });
-    prevItem.focus({ preventScroll: true });
-  }
-
-  focusNextItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
+  focusNextItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = currentItem.index;
+    const nextIndex = currentIndex + 1;
     const nextItem = this.items[nextIndex];
     this.items[currentIndex]._tabIndex = "-1";
     nextItem._tabIndex = "0";
@@ -437,6 +373,16 @@ class UDExMastheadCountrySelector extends UI5Element {
     nextItem.focus({ preventScroll: true });
   }
 
+  focusPreviousItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = currentItem.index;
+    const prevIndex = currentIndex - 1;
+    const prevItem = this.items[prevIndex];
+    this.items[currentIndex]._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.scrollIntoView({ block: "center" });
+    prevItem.focus({ preventScroll: true });
+  }
+
   focusLastItem(e: KeyboardEvent): void {
     const currentIndex = (e.target as UDExMastheadMenuItem).index;
     const lastItemIndex = this.items.length - 1;
@@ -564,7 +510,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   handleCountryListShadowVisible(): void {
-    if (this.scrollBottomCountriesList === 0) {
+    if (this.scrollBottomCountriesList <= 1) {
       this.removeScrollableClassInCountryList();
     } else {
       this.addScrollableClassToCountryList();
@@ -623,10 +569,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     }));
   }
 
-  get isRtlDirection(): boolean {
-    return this._direction === "rtl";
-  }
-
   get homeSearchMode(): UDExSearchMode {
     return UDExSearchMode.HomeSearch;
   }
@@ -642,6 +584,10 @@ class UDExMastheadCountrySelector extends UI5Element {
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
+
+  get backToRegionListAccessibleName(): string {
+    return `${this._activeRegion?.title} ${translate(UDExMastheadCountrySelector, BACK_TO_REGION_LIST)}`;
+  }
 }
 
 UDExMastheadCountrySelector.define();

package/src/MastheadItem.ts

@@ -481,8 +481,17 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  recalculateDropdownPosition(): void {
+    const dropdown = this.dropdownHolder;
+    if (dropdown) {
+      dropdown.style.marginInlineStart = "";
+      this.setDropdownInsetStart();
+    }
+  }
+
   calculateMarginInlineStart(rect: DOMRect): number | null {
     const { left, right } = rect;
+    const viewportWidth = document.documentElement.clientWidth;
 
     if (this.isLtrDirection && left < 0) {
       return left * -1 + 15;
@@ -492,12 +501,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       return left - 15;
     }
 
-    if (this.isRtlDirection && right > window.innerWidth) {
-      return right - window.innerWidth + 15;
+    if (this.isRtlDirection && right > viewportWidth) {
+      return right - viewportWidth + 15;
     }
 
-    if (this.isLtrDirection && right > window.innerWidth) {
-      return window.innerWidth - right - 15;
+    if (this.isLtrDirection && right > viewportWidth) {
+      return viewportWidth - right - 15;
     }
 
     return null;

package/src/MastheadMenuItem.hbs

@@ -38,6 +38,7 @@
     {{#if isButtonType}}
         <button
             _id="{{id}}"
+            aria-label="{{_accessibleName}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
             aria-haspopup="{{ariaHasPopup}}"

package/src/MastheadMenuItem.ts

@@ -162,6 +162,15 @@ class UDExMastheadMenuItem extends UI5Element {
   @property()
     target: `${UDExTarget}` = UDExTarget._self;
 
+  /**
+   * Defines the accessible name of the item.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _accessibleName?: string;
+
   /**
    * Defines the tabindex attribute for the item.
    *

package/src/MastheadMobileMenu.hbs

@@ -75,7 +75,6 @@
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
-            @keydown="{{handleLeftRightKeys}}"
             accessible-role-text="button"
             aria-haspopup="true"
             type="Button"

package/src/MastheadMobileMenu.ts

@@ -7,7 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp, isDown, isRight, isLeft, isHome, isEnd,
+  isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
@@ -134,9 +134,6 @@ class UDExMastheadMobileMenu extends UI5Element {
   @property({ type: Boolean })
     _showCategoryItems!: boolean;
 
-  @property({ type: String })
-    _direction?: string;
-
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -202,63 +199,51 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   handlePressKey(e: KeyboardEvent) {
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
-    this.handleLeftRightKeys(e);
-    this.handleHomeKey(e);
-    this.handleEndKey(e);
-  }
+    const currentItem = e.target as UDExMastheadMenuItem;
+    const items = this.navigationItems;
+    const isFirstItem = currentItem === items[0];
+    const isLastItem = currentItem === items[items.length - 1];
 
-  handleLeftRightKeys(e: KeyboardEvent) {
-    this.handleRightArrow(e);
-    this.handleLeftArrow(e);
-  }
-
-  handleRightArrow(e: KeyboardEvent) {
-    if (isRight(e)) {
+    if (isTabNext(e) && !isLastItem) {
       e.preventDefault();
-      this.handleDirection();
-      if (this.isRtlDirection) {
-        this.moveToBackWithKeyboard(e);
-      } else {
-        this.moveToNextLevelWithKeyboard(e);
-      }
+      this.focusNextItem(currentItem);
     }
-  }
-
-  handleLeftArrow(e: KeyboardEvent) {
-    if (isLeft(e)) {
+    if (isTabPrevious(e) && !isFirstItem) {
       e.preventDefault();
-      this.handleDirection();
-      if (this.isRtlDirection) {
-        this.moveToNextLevelWithKeyboard(e);
-      } else {
-        this.moveToBackWithKeyboard(e);
-      }
+      this.focusPreviousItem(currentItem);
     }
+    this.handleHomeKey(e);
+    this.handleEndKey(e);
   }
 
-  handleUpArrow(e: KeyboardEvent) {
-    if (isUp(e)) {
-      e.preventDefault();
-      this.focusPreviousItem(e);
-    }
-  }
+  focusNextItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = this.getCurrentIndex(currentItem);
+    const nextIndex = currentIndex + 1;
+    const currentListItem = this.getListItemByIndex(currentIndex);
+    let nextItem = this.getListItemByIndex(nextIndex);
 
-  handleDownArrow(e: KeyboardEvent) {
-    if (isDown(e)) {
-      e.preventDefault();
-      this.focusNextItem(e);
+    if (nextItem.type === UDExItemType.Heading) {
+      nextItem = this.getListItemByIndex(nextIndex + 1);
     }
+
+    currentListItem._tabIndex = "-1";
+    nextItem._tabIndex = "0";
+    nextItem.focus();
   }
 
-  handleDirection() {
-    const directionStyles: string = window.getComputedStyle(this).getPropertyValue("direction");
-    if (!directionStyles) {
-      this._direction = "ltr";
-    } else {
-      this._direction = directionStyles;
+  focusPreviousItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = this.getCurrentIndex(currentItem);
+    const previousIndex = currentIndex - 1;
+    const currentListItem = this.getListItemByIndex(currentIndex);
+    let prevItem = this.getListItemByIndex(previousIndex);
+
+    if (prevItem.type === UDExItemType.Heading) {
+      prevItem = this.getListItemByIndex(this.navigationItems.length - 1);
     }
+
+    currentListItem._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.focus();
   }
 
   handleMobileItemEvent(e: PointerEvent) {
@@ -291,51 +276,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     }
   }
 
-  moveToBackWithKeyboard(e: KeyboardEvent) {
-    const target = e.target as UDExMastheadMenuItem;
-    if (target.hasAttribute("is-back-to-nav")) {
-      this.showFirstLevelMenu();
-      this.setFocusItemByIndex(this.items.indexOf(this._clickedItem));
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("is-back-to-categories")) {
-      this.showCategories();
-      this.setFocusItemByIndex(this._category.index);
-      this.fireMobileItemEvent(e);
-    }
-
-    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.getClickedItem(e.target as UDExMastheadItem);
-
-    if (target.hasAttribute("is-explore")) {
-      this._hideExploreSapBtn = true;
-      this._showCategoryItems = false;
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("first-level-btn")) {
-      this.openCategories(item);
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("second-level-btn")) {
-      this.openCategoryItems(e);
-      this.fireMobileItemEvent(e);
-    }
-
-    this.setFocusItemByIndex(0);
-  }
-
   focusItemByIndex(index: number): void {
     this.getListItemByIndex(index)?.focus();
     this._shouldFocusItemByIndex = false;
@@ -346,38 +286,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._shouldFocusExploreBtn = false;
   }
 
-  focusPreviousItem(e: KeyboardEvent): void {
-    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 === UDExItemType.Heading) {
-      prevItem = this.getListItemByIndex(lastIndex);
-    }
-
-    currentItem._tabIndex = "-1";
-    prevItem._tabIndex = "0";
-    prevItem.focus();
-  }
-
-  focusNextItem(e: KeyboardEvent): void {
-    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 === UDExItemType.Heading) {
-      nextItem = this.getListItemByIndex(nextIndex + 1);
-    }
-
-    currentItem._tabIndex = "-1";
-    nextItem._tabIndex = "0";
-    nextItem.focus();
-  }
-
   handleEndKey(e: KeyboardEvent): void {
     if (isEnd(e)) {
       e.preventDefault();
@@ -572,10 +480,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }
 
-  get isRtlDirection(): boolean {
-    return this._direction === "rtl";
-  }
-
   get navigationItems(): Array<UDExMastheadMenuItem> {
     return Array.from(this.shadowRoot!.querySelectorAll<UDExMastheadMenuItem>("ul [udex-masthead-menu-item]"));
   }

package/src/MastheadProfileMenu.ts

@@ -418,7 +418,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   toggleScrollableClass(el: HTMLElement, className: string, scrollBottom: number): void {
-    if (scrollBottom === 0) {
+    if (scrollBottom <= 1) {
       el.classList.remove(`${className}_scrollable`);
     } else {
       el.classList.add(`${className}_scrollable`);

package/src/MastheadShell.hbs

@@ -53,17 +53,6 @@
     {{/if}}
 
     <div class="{{rightMenuClass}}">
-        {{#if hasMobileMenuButtons}}
-            <udex-masthead-item
-                @ui5-item-click="{{handleOpenMobileMenu}}"
-                class="udex-masthead-shell__menu-btn"
-                accessible-role="button"
-                icon="menu2"
-                part="menu-open-btn"
-                accessible-name="menu">
-                <slot slot="dropdown" name="mobileMenu"></slot>
-            </udex-masthead-item>
-        {{/if}}
         {{#if hasExploreSAP}}
             <div
                 class="udex-masthead-shell__explore"
@@ -124,6 +113,15 @@
             </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @ui5-item-click="{{handleOpenMobileMenu}}"
+                class="udex-masthead-shell__menu-btn"
+                accessible-role="button"
+                icon="menu2"
+                part="menu-open-btn"
+                accessible-name="menu">
+                <slot slot="dropdown" name="mobileMenu"></slot>
+            </udex-masthead-item>
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
                 @ui5-item-click="{{closeMobileMenu}}"

package/src/MastheadShell.ts

@@ -9,7 +9,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-  isLeft, isRight, isSpace, isEnter, isEscape,
+  isSpace, isEnter, isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
@@ -617,9 +617,16 @@ class UDExMastheadShell extends UI5Element {
       this.setProfileMobileMode();
     }
 
+    this.recalculateOpenDropdownPosition();
     this._shouldHandleResize = true;
   }
 
+  recalculateOpenDropdownPosition(): void {
+    this.getSelectedItems()
+      .filter(item => item.hasDropdownSlot && !item.isMobile && !item.isExploreBtn)
+      .forEach(item => item.recalculateDropdownPosition());
+  }
+
   handleMobileMode(): void {
     const rootHolder = this.getDomRef();
     if (rootHolder) {
@@ -641,8 +648,6 @@ class UDExMastheadShell extends UI5Element {
 
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
-    this.handleLeftArrow(e);
-    this.handleRightArrow(e);
   }
 
   handleSearchKeyDown(e: CustomEvent): void {
@@ -658,30 +663,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  handleLeftArrow(e: KeyboardEvent): void {
-    if (isLeft(e)) {
-      const currentItem = e.target as UDExMastheadItem;
-      if (this.isNavigationItem(currentItem)) {
-        if (currentItem.selected) {
-          currentItem.closeDropdown();
-        }
-        this.focusPreviousMenuItem(currentItem);
-      }
-    }
-  }
-
-  handleRightArrow(e: KeyboardEvent): void {
-    if (isRight(e)) {
-      const currentItem = e.target as UDExMastheadItem;
-      if (this.isNavigationItem(currentItem)) {
-        if (currentItem.selected) {
-          currentItem.closeDropdown();
-        }
-        this.focusNextMenuItem(currentItem);
-      }
-    }
-  }
-
   handleLogoClick(e: PointerEvent): void {
     this.fireMastheadEvent("logo-click", e);
   }
@@ -765,21 +746,6 @@ class UDExMastheadShell extends UI5Element {
     input?.focus();
   }
 
-  focusPreviousMenuItem(item: UDExMastheadItem): void {
-    const menuItems = this.menuItems;
-    const lastItemIndex = menuItems.length - 1;
-    const currentSelectedIndex = this.getCurrentIndex(item);
-    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    menuItems[previousSelectIndex].focus();
-  }
-
-  focusNextMenuItem(item: UDExMastheadItem): void {
-    const menuItems = this.menuItems;
-    const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    menuItems[nextSelectIndex].focus();
-  }
-
   resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
       if (item._id !== clickedId && item.selected) {
@@ -811,10 +777,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  getCurrentIndex(item: UDExMastheadItem): number {
-    return this.menuItems.indexOf(item);
-  }
-
   getSelectedItems(): Array<UDExMastheadItem> {
     const buttonsArray: Array<UDExMastheadItem> = [
       ...this.menuItems,
@@ -920,10 +882,6 @@ class UDExMastheadShell extends UI5Element {
     return window.getComputedStyle(this.getDomRef()!).getPropertyValue(`${variableName}`);
   }
 
-  isNavigationItem(item: UDExMastheadItem): boolean {
-    return this.menuItems.some(menuItem => menuItem === item);
-  }
-
   setOverflowBody() {
     const { body: { style } } = document;
     this._shouldHandleResize = false;