@sapudex/web-components 2.29.0 → 2.31.0

package/src/MastheadMobileMenu.hbs

@@ -38,7 +38,7 @@
                                 class="udex-masthead-mobile-menu__back-item"
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
-                                aria-has-popup="true"
+                                aria-haspopup="true"
                                 type="Button"
                                 is-back
                                 has-border
@@ -58,7 +58,7 @@
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         has-border
                         icon-start
                         is-back
@@ -75,9 +75,8 @@
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
-            @keydown="{{handleLeftRightKeys}}"
             accessible-role-text="button"
-            aria-has-popup="true"
+            aria-haspopup="true"
             type="Button"
             first-level-btn
             first-level
@@ -96,7 +95,7 @@
                     part="menu-item"
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
-                    aria-has-popup="true"
+                    aria-haspopup="true"
                     id="{{this._id}}"
                     type="Button"
                     first-level-btn
@@ -141,7 +140,7 @@
                         @click="{{../handleMenuCategoryClick}}"
                         id="{{@index}}"
                         label="{{this.category}}"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         type="Button"
                         second-level-btn
                         second-level

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;

package/src/Pagination.ts

@@ -40,7 +40,8 @@ export enum UDExPaginationType {
 
 export enum UDExDisplayType {
   desktop = "desktop",
-  mobile = "mobile"
+  mobile = "mobile",
+  auto = "auto"
 }
 
 type UDExPaginationChangeEventDetail = {
@@ -121,6 +122,14 @@ class UDExPagination extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Tracks the resolved display mode for auto display.
+   *
+   * @private
+   */
+  @property({ noAttribute: true })
+    _effectiveDisplay?: `${UDExDisplayType}`;
+
   /**
    * Defines if the previous button is in pseudo-disabled.
    *
@@ -140,6 +149,8 @@ class UDExPagination extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  static readonly AUTO_DISPLAY_BREAKPOINT = 980;
+
   _pages: Page[];
   _visiblePages: Page[];
 
@@ -150,6 +161,7 @@ class UDExPagination extends UI5Element {
   _firstPageIndex!: number;
   _lastPageIndex!: number;
   _pageFocusedManually!: boolean;
+  _resizeHandler!: () => void;
 
   constructor() {
     super();
@@ -160,12 +172,44 @@ class UDExPagination extends UI5Element {
     this._mobileDisplayNumber = 5;
     this._desktopDisplayNumber = 10;
     this._pageFocusedManually = false;
+    this._resizeHandler = this._handleResize.bind(this);
   }
 
   onEnterDOM() {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.display === UDExDisplayType.auto) {
+      this._effectiveDisplay = this._displayType;
+      window.addEventListener("resize", this._resizeHandler);
+    }
+  }
+
+  onExitDOM() {
+    window.removeEventListener("resize", this._resizeHandler);
+  }
+
+  _handleResize(): void {
+    if (this.display === UDExDisplayType.auto) {
+      const newDisplay = this._displayType;
+      if (this._effectiveDisplay !== newDisplay) {
+        this._effectiveDisplay = newDisplay;
+        this._pages = [];
+      }
+    }
+  }
+
+  get _displayType(): `${UDExDisplayType}` {
+    return window.innerWidth > UDExPagination.AUTO_DISPLAY_BREAKPOINT
+      ? UDExDisplayType.desktop
+      : UDExDisplayType.mobile;
+  }
+
+  get effectiveDisplay(): `${UDExDisplayType}` {
+    if (this.display === UDExDisplayType.auto) {
+      return this._effectiveDisplay ?? (this._displayType);
+    }
+    return this.display;
   }
 
   onBeforeRendering(): void {
@@ -182,13 +226,13 @@ class UDExPagination extends UI5Element {
 
   get typeFull(): boolean {
     return (
-      this.type === UDExPaginationType.full || this.display === UDExDisplayType.mobile
+      this.type === UDExPaginationType.full || this.effectiveDisplay === UDExDisplayType.mobile
     );
   }
 
   get typeShort(): boolean {
     return (
-      this.type === UDExPaginationType.short && this.display !== UDExDisplayType.mobile
+      this.type === UDExPaginationType.short && this.effectiveDisplay !== UDExDisplayType.mobile
     );
   }
 
@@ -265,19 +309,19 @@ class UDExPagination extends UI5Element {
     if (this._direction === "rtl") {
       classes = `${classes} udex-pagination--${this._direction}`;
     }
-    if (!this.display) {
+    if (!this.effectiveDisplay) {
       return classes;
     }
-    return `${classes} udex-pagination--${this.display} udex-pagination--${this.type}`;
+    return `${classes} udex-pagination--${this.effectiveDisplay} udex-pagination--${this.type}`;
   }
 
   get displayNumber(): number {
-    const lastIndex = this.display === UDExDisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
+    const lastIndex = this.effectiveDisplay === UDExDisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
     return lastIndex;
   }
 
   get pageOffset(): number {
-    if (this.display === UDExDisplayType.mobile) {
+    if (this.effectiveDisplay === UDExDisplayType.mobile) {
       return Math.floor(this._mobileDisplayNumber / 2);
     }
     return this._desktopDisplayNumber / 2 - 1;
@@ -364,7 +408,7 @@ class UDExPagination extends UI5Element {
       return;
     }
 
-    if (!this._pages.length || this._visiblePages.length < this.displayNumber) {
+    if (!this._pages.length || this._visiblePages.length !== this.displayNumber) {
       this._firstPageIndex = 0;
       this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
       this._pageFocusedManually = false;

package/src/PromoTile.ts

@@ -81,6 +81,15 @@ class UDExPromoTile extends UI5Element {
   @slot({ type: HTMLElement })
     pictogram?: Array<HTMLElement>;
 
+  /**
+   * Allows control over setting the CSS gradient.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    backgroundGradient?: string;
+
   /**
    * Defines the orientation of the Promo Tile component.
    *
@@ -179,6 +188,7 @@ class UDExPromoTile extends UI5Element {
   _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;
   _lightModeColors: Array<number> = [1, 2];
   _darkModeColors: Array<number> = [7, 8, 9, 10];
+  _defaultBackgroundColor = "#FFF";
 
   constructor() {
     super();

package/src/PromoTileTemplate.tsx

@@ -12,7 +12,10 @@ export default function PromoTileTemplate(this: UDExPromoTile) {
     <div
       role="region"
       class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}
-      aria-label={this.promoTileContainerText}>
+      aria-label={this.promoTileContainerText}
+      style={this.backgroundGradient
+        ? { backgroundImage: this.backgroundGradient, backgroundColor: this._defaultBackgroundColor }
+        : undefined}>
       {this._showPictogram &&
         <div
           part="image"