@sapudex/web-components 0.184.0 → 0.192.4

package/src/MastheadItem.ts

@@ -13,9 +13,8 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
-import MastheadShell from "./MastheadShell.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-
+import UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 
 // Styles
@@ -212,6 +211,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Slot for the dropdown
    *
@@ -231,20 +238,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     content?: Array<HTMLElement>;
 
   _profileAvatar!: UDExAvatar;
+  _mastheadShell!: UDExMastheadShell;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
     UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
   }
 
-  onAfterRendering() {
+  onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
+    this._mastheadShell = this.mastheadShell;
     this.handleDirection();
     if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
       this.setDropdownInsetStart();
@@ -280,13 +290,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
-    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("[udex-masthead-shell]")!;
-
-    mastheadShell.closeMobileMenu();
-    mastheadShell.mobileBtn?.focus();
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
   }
 
-  handleNavigationItemClick(e: Event): void {
+  handleItemClick(e: Event): void {
     this.selected = this.isMobile ? true : !this.selected;
 
     this.fireEvent<ItemClickEventDetail>("item-click", {
@@ -357,6 +365,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.parseArrayFromString(this.subItems);
   }
 
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
+
   get additionalClass(): string {
     const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
@@ -435,7 +447,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < breakpointSizeM;
+    return window.innerWidth < breakpointSizeM || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MastheadMenu.ts

@@ -99,6 +99,14 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: String, defaultValue: "[]" })
     subItems!: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);

package/src/MastheadMenuItem.hbs

@@ -11,7 +11,7 @@
         aria-describedby="{{ariaDescribedby}}"
         role="{{accessibleRoleText}}"
         href="{{url}}"
-        part="menu-item-link"
+        part="{{partAttr}}"
         target="{{target}}">
         {{#if iconStart}}
             {{>arrow-left}}
@@ -25,6 +25,7 @@
     </a>
     {{#if badge}}
         <udex-badge
+            part="badge"
             class="udex-masthead-menu-item-badge"
             type="Number"
             number-design="Blue"

package/src/MastheadMenuItem.ts

@@ -196,6 +196,10 @@ class UDExMastheadMenuItem extends UI5Element {
   get accessibleRoleText(): string | null {
     return this.accessibleRole ? this.accessibleRole : null;
   }
+
+  get partAttr(): string {
+    return this.badge ? "menu-item-link-badge" : "menu-item-link";
+  }
 }
 
 UDExMastheadMenuItem.define();

package/src/MastheadProfileMenu.ts

@@ -112,6 +112,14 @@ class UDExMastheadProfileMenu extends UI5Element {
   @property()
     logoutUrl!: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Placeholder for message strip.
    *

package/src/MastheadShell.hbs

@@ -1,15 +1,19 @@
-<div class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
+<header class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
-        {{#if logoUrl}}
-            {{>logo}}
-        {{/if}}
+        <div class="udex-masthead-shell__landing-wrap">
+            {{#if logoUrl}}
+                {{>logo}}
+            {{/if}}
 
-        {{#if siteLabel}}
-            {{>siteLabel}}
-        {{/if}}
+            {{#if siteLabel}}
+                {{>siteLabel}}
+            {{/if}}
+        </div>
 
         {{#if isMainMenuVisible}}
-            <nav aria-label="{{mainNavigationAriaLabel}}">
+            <nav
+                class="udex-masthead-shell__nav"
+                aria-label="{{mainNavigationAriaLabel}}">
                 <ul
                     class="udex-masthead-shell__main-menu"
                     aria-label="{{mainNavigationAriaLabel}}">
@@ -39,67 +43,65 @@
         {{/if}}
     {{/if}}
 
-    {{#if isRightMenuVisible}}
-        <div class="udex-masthead-shell__right-menu">
-            {{#if hasMobileMenuButtons}}
-                <udex-masthead-item
-                    @ui5-item-click="{{handleMobileMenuClick}}"
-                    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"
-                    @ui5-item-click="{{setSelectedItem}}">
-                    <slot name="exploreSAP"></slot>
-                </div>
-            {{/if}}
-            {{#if hasSearch}}
-                <div class="udex-masthead-shell__search-icon">
-                    <udex-masthead-item
-                        class="udex-masthead-shell__search-btn"
-                        icon="search"
-                        @click="{{handleSearchClick}}"
-                        accessible-name="search">
-                    </udex-masthead-item>
-                </div>
-            {{/if}}
-            {{#if hasCart}}
-                <div
-                    class="udex-masthead-shell__cart"
-                    @ui5-item-click="{{setSelectedItem}}"
-                    @click="{{handleCartClick}}">
-                    <slot name="cart"></slot>
-                </div>
-            {{/if}}
-            {{#if hasProfile}}
-                <div
-                    class="udex-masthead-shell__profile"
-                    @ui5-item-click="{{setSelectedItem}}"
-                    @click="{{handleProfileClick}}">
-                    <slot name="profile"></slot>
-                </div>
-            {{/if}}
-            {{#if hasMobileMenuButtons}}
+    <div class="udex-masthead-shell__right-menu">
+        {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @ui5-item-click="{{handleMobileMenuClick}}"
+                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"
+                @ui5-item-click="{{setSelectedItem}}">
+                <slot name="exploreSAP"></slot>
+            </div>
+        {{/if}}
+        {{#if hasSearch}}
+            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
                 <udex-masthead-item
-                    @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
-                    @ui5-item-click="{{handleMobileCloseClick}}"
-                    class="udex-masthead-shell__close-btn"
-                    accessible-role="button"
-                    icon="decline"
-                    accessible-name="close"
-                    part="menu-close-btn"
-                    hide-active-border>
+                    class="udex-masthead-shell__search-btn"
+                    icon="search"
+                    @click="{{handleSearchClick}}"
+                    accessible-name="search">
                 </udex-masthead-item>
-            {{/if}}
-        </div>
-    {{/if}}
-</div>
+            </div>
+        {{/if}}
+        {{#if hasCart}}
+            <div
+                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCartClick}}">
+                <slot name="cart"></slot>
+            </div>
+        {{/if}}
+        {{#if hasProfile}}
+            <div
+                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleProfileClick}}">
+                <slot name="profile"></slot>
+            </div>
+        {{/if}}
+        {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
+                @ui5-item-click="{{handleMobileCloseClick}}"
+                class="udex-masthead-shell__close-btn"
+                accessible-role="button"
+                icon="decline"
+                accessible-name="close"
+                part="menu-close-btn"
+                hide-active-border>
+            </udex-masthead-item>
+        {{/if}}
+    </div>
+</header>
 
 {{#*inline "item"}}
     <li

package/src/MastheadShell.ts

@@ -15,19 +15,22 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/cart.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-
+import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
-import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 
 const breakpointSizeM: number = 1279;
+const canvasContentFont = "16px '72 Brand Variable'";
+type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | undefined | null;
+type MastheadItemType = UDExMastheadItem | null | undefined;
 /**
  * @class
  *
@@ -293,6 +296,14 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     _isMobileMenuOpen!: boolean;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Defines if the close button was clicked
    *
@@ -343,11 +354,15 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
+    if (this.shouldHandleMobileView) {
+      this.handleMobileMode();
+    }
+
     if (this.isBreakpointSizeM) {
       this._isSearchOpened = false;
     }
 
-    if (this._shouldHandleResize && this.isBreakpointSizeM) {
+    if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
       return;
     }
@@ -355,6 +370,23 @@ class UDExMastheadShell extends UI5Element {
     this._shouldHandleResize = true;
   }
 
+  handleMobileMode(): void {
+    const rootHolder = this.getDomRef();
+    if (rootHolder) {
+      const rootHolderWidth = this.getRootHolderWidth(rootHolder);
+      const landingHolderWidth = this.getLandingHolderWidth();
+      const rightMenuWidth = this.getRightMenuWidth();
+      const mainMenuWidth = this.getMainMenuWidth();
+      const availableWidth = rootHolderWidth - rightMenuWidth - landingHolderWidth;
+
+      if (mainMenuWidth >= availableWidth) {
+        this.setMobileMode();
+      } else {
+        this.removeMobileMode();
+      }
+    }
+  }
+
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
     this.handleLeftArrow(e);
@@ -429,12 +461,14 @@ class UDExMastheadShell extends UI5Element {
   handleMobileCloseClick(e: CustomEvent) {
     e.preventDefault();
     this.closeMobileMenu();
+    this.fireMobileMenuCloseEvent();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
     if (isSpace(e) || isEnter(e)) {
       e.preventDefault();
       this.closeMobileMenu();
+      this.fireMobileMenuCloseEvent();
       this.mobileBtn?.focus();
     }
   }
@@ -442,7 +476,7 @@ class UDExMastheadShell extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const el = e.target as UDExMastheadItem;
-      const isMobile = window.innerWidth < 1280;
+      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
       const isDropdownSlot = el.getAttribute("slot") === "dropdown";
       if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
         this.resetSelectedItems();
@@ -459,16 +493,18 @@ class UDExMastheadShell extends UI5Element {
   }
 
   focusPreviousMenuItem(item: UDExMastheadItem): void {
+    const menuItems = this.menuItems;
+    const lastItemIndex = menuItems.length - 1;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const lastItemIndex = this.menuItems.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    this.menuItems[previousSelectIndex].focus();
+    menuItems[previousSelectIndex].focus();
   }
 
   focusNextMenuItem(item: UDExMastheadItem): void {
+    const menuItems = this.menuItems;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    this.menuItems[nextSelectIndex].focus();
+    const nextSelectIndex = currentSelectedIndex + 1 > menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
+    menuItems[nextSelectIndex].focus();
   }
 
   resetSelectedItems(): void {
@@ -518,6 +554,74 @@ class UDExMastheadShell extends UI5Element {
     return buttonsArray.filter(({ selected }) => selected);
   }
 
+  getRootHolderWidth(root: HTMLElement): number {
+    const rootPadding = parseInt(window.getComputedStyle(root).getPropertyValue("padding-left")) * 2;
+    const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+    return this.getDomRef()!.clientWidth + scrollWidth - rootPadding;
+  }
+
+  getLandingHolderWidth(): number {
+    const landingHolder = this.getDomElement(".udex-masthead-shell__landing-wrap");
+    return landingHolder?.offsetWidth || 0;
+  }
+
+  getRightMenuWidth(): number {
+    const itemsIcon = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>(".udex-masthead-shell__item_icon")];
+    const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
+    const itemIconGaps = itemsIcon.length * this.getItemIconGap();
+    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(this.exploreSAP[0]) : 0;
+    const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
+    return exploreSAPWidth + itemIconWidths + rightMenuGaps;
+  }
+
+  getItemIconWidth(): number {
+    const style = window.getComputedStyle(this.profileItem);
+    const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
+    return parseInt(itemIconWidthVar);
+  }
+
+  getMainMenuWidth(): number {
+    const mainItems = this.getSlottedNodes("menuItems");
+    const gapItemVar = this.getRootVar("--udex-masthead-shell-item-gap");
+    return mainItems.reduce((accumulatedWidth, item, index) => {
+      return accumulatedWidth + this.getItemWidth(item as UDExMastheadItem) + (index && parseInt(gapItemVar));
+    }, 0);
+  }
+
+  getDomElement(selector: string): HTMLElement | undefined | null {
+    return this.shadowRoot?.querySelector(`${selector}`);
+  }
+
+  getItemWidth(item: UDExMastheadItem): number {
+    const context = this.getCanvasContext();
+    context.font = canvasContentFont;
+    return Math.ceil(context.measureText(item.innerText.trim()).width);
+  }
+
+  getCanvasContext(): CanvasRenderingContext2D {
+    const canvas = document.createElement("canvas");
+    return canvas.getContext("2d")!;
+  }
+
+  getItemIconGap(): number {
+    const gapIconItemVar = this.getRootVar("--udex-masthead-shell-item-icon-gap");
+    return parseInt(gapIconItemVar);
+  }
+
+  getExploreSapBtnGap(): number {
+    const exploreSapBtnGapVar = this.getRootVar("--udex-masthead-shell-explore-margin");
+    return this.hasExploreSAP ? parseInt(exploreSapBtnGapVar) : 0;
+  }
+
+  getRightMenuGap(): number {
+    const rightMenuGapVar = this.getRootVar("--udex-masthead-right-menu-padding");
+    return parseInt(rightMenuGapVar);
+  }
+
+  getRootVar(variableName: string): string {
+    return window.getComputedStyle(this.getDomRef()!).getPropertyValue(`${variableName}`);
+  }
+
   isNavigationItem(item: UDExMastheadItem): boolean {
     return this.menuItems.some(menuItem => menuItem === item);
   }
@@ -541,15 +645,33 @@ class UDExMastheadShell extends UI5Element {
     if (this.bodyOverflow) {
       this.removeOverflowBody();
     }
+  }
 
-    this.fireMobileMenuCloseEvent();
+  setMobileMode(): void {
+    this._isMobileMode = true;
+    this.slottedItems.forEach((item: MastheadSlottedItem) => {
+      if (item) {
+        item._isMobileMode = true;
+      }
+    });
+  }
+
+  removeMobileMode(): void {
+    this._isMobileMode = false;
+    this.slottedItems.forEach((item: MastheadSlottedItem) => {
+      item?.removeAttribute("_is-mobile-mode");
+    });
   }
 
   fireMobileMenuCloseEvent(): void {
     this.fireEvent("mobile-menu-close");
   }
 
-  get searchOpener(): UDExMastheadItem | null | undefined {
+  get slottedItems(): (MastheadSlottedItem)[] {
+    return [this.profileItem, this.cartItem, this.profileMenu, this.profileMenuLinks];
+  }
+
+  get searchOpener(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
 
@@ -561,14 +683,30 @@ class UDExMastheadShell extends UI5Element {
     return this.querySelector("[udex-masthead-mobile-menu]");
   }
 
-  get mobileBtn(): UDExMastheadItem | null | undefined {
+  get mobileBtn(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__menu-btn");
   }
 
-  get closeBtn(): UDExMastheadItem | null | undefined {
+  get closeBtn(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__close-btn");
   }
 
+  get profileItem(): UDExMastheadItem {
+    return this.getSlottedNodes<UDExMastheadItem>("profile")[0];
+  }
+
+  get cartItem(): MastheadItemType {
+    return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
+  }
+
+  get profileMenu(): UDExMastheadProfileMenu {
+    return this.querySelector("[udex-masthead-profile-menu]")!;
+  }
+
+  get profileMenuLinks(): UDExMastheadMenu | undefined | null {
+    return this.profileMenu?.shadowRoot?.querySelector("[udex-masthead-menu]");
+  }
+
   get hasProfile(): boolean {
     return !!this.profile.length;
   }
@@ -597,14 +735,14 @@ class UDExMastheadShell extends UI5Element {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }
 
-  get isRightMenuVisible(): boolean {
-    return this.showSearchByDefault || !this._isSearchOpened;
-  }
-
   get isSearchVisible(): boolean {
     return this.showSearchByDefault || this._isSearchOpened;
   }
 
+  get shouldHandleMobileView(): boolean {
+    return !this.isBreakpointSizeM && !this.showSearchByDefault;
+  }
+
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }

package/src/Pagination.hbs

@@ -1,6 +1,6 @@
 {{#if pages}}
-<nav aria-label="pagination" class="{{paginationClass}}">
-    <ul class="udex-pagination__list" role="navigation" aria-label="{{paginationAccessibleName}}">      
+<nav class="{{paginationClass}}" role="navigation" aria-label="{{paginationAccessibleName}}">
+    <ul class="udex-pagination__list">
         {{#if absoluteNavigation}}
         <li class="udex-pagination__item--first udex-pagination__item">
             <udex-button

package/src/Pagination.ts

@@ -82,9 +82,10 @@ class UDExPagination extends UI5Element {
    * Defines number of pages.
    *
    * @public
+   * @default 0
    */
-  @property({ validator: Integer })
-    pages?: number;
+  @property({ validator: Integer, defaultValue: 0 })
+    pages: number;
 
   /**
    * Defines type of pagination.
@@ -143,6 +144,7 @@ class UDExPagination extends UI5Element {
 
   constructor() {
     super();
+    this.pages = 0;
     this._pages = [];
     this._visiblePages = [];
     this.currentPageIndex = 0;
@@ -348,15 +350,16 @@ class UDExPagination extends UI5Element {
     this.emitChangeEvent();
   }
 
-  setupPages(pages?: number) {
+  setupPages(pages: number) {
     if (!pages) {
       this._visiblePages = [];
       return;
     }
 
-    if (!this._pages.length) {
+    if (!this._pages.length || this._visiblePages.length < this.displayNumber) {
       this._firstPageIndex = 0;
       this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
+      this._pageFocusedManually = false;
     }
 
     this._pages = this.setupPagesData();
@@ -397,7 +400,7 @@ class UDExPagination extends UI5Element {
         this._lastPageIndex--;
       }
     } else {
-      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages!) {
+      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages) {
         this._firstPageIndex++;
         this._lastPageIndex++;
       }

package/src/Search.ts

@@ -904,6 +904,7 @@ class UDExSearch extends UI5Element {
         const suggestionObserver = this._createObserver(this.Suggestion.popover);
         const popoverNode = this.Suggestion?.popover as Node;
         suggestionObserver.observe(popoverNode, { attributes: true, attributeOldValue: true });
+        this.Suggestion.initLists();
       }
 
       if (prefixPopover) {