@sapudex/web-components 2.25.1 → 2.26.0

package/src/List.ts

@@ -8,6 +8,7 @@ import {
   isUp, isDown, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type UDExListItem from "./ListItem.js";
+import type { UDExScrollIntoViewOptions } from "./types/List.js";
 import { UDExListStyleType, UDExListMode } from "./types/List.js";
 import type UDExListGroupHeader from "./ListGroupHeader.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
@@ -162,6 +163,15 @@ class UDExList extends UI5Element {
   @slot({ type: HTMLElement, "default": true })
     items!: Array<UDExListItemBase>;
 
+  /**
+   * Defines the scroll behavior for the items of the component.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _scrollIntoView?: `${UDExScrollIntoViewOptions}`;
+
   _focusHandler: UDExListWithFirstLetterFocus = new UDExFirstLetterFocusHandler();
 
   @i18n("@sapudex/web-components")
@@ -211,6 +221,9 @@ class UDExList extends UI5Element {
     if (nonInteractiveHeader && previousSelectIndex === 0) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, lastItemIndex);
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[lastItemIndex]);
+      }
       items[lastItemIndex].focus();
       return;
     }
@@ -218,6 +231,9 @@ class UDExList extends UI5Element {
     if (nonInteractiveHeader) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, previousSelectIndex - 1);
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[previousSelectIndex - 1]);
+      }
       items[previousSelectIndex - 1].focus();
       return;
     }
@@ -225,6 +241,9 @@ class UDExList extends UI5Element {
     if (isHeaderItem) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, previousSelectIndex);
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[previousSelectIndex]);
+      }
       this.focusHeader(items[previousSelectIndex]);
       return;
     }
@@ -236,7 +255,12 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, previousSelectIndex);
-    setTimeout(() => { items[previousSelectIndex].focus(); }, 0);
+    setTimeout(() => {
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[previousSelectIndex]);
+      }
+      items[previousSelectIndex].focus();
+    }, 0);
   }
 
   handleDownArrow(e: KeyboardEvent): void {
@@ -250,6 +274,9 @@ class UDExList extends UI5Element {
     if (nonInteractiveHeader) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, nextSelectIndex + 1);
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[nextSelectIndex + 1]);
+      }
       items[nextSelectIndex + 1].focus();
       return;
     }
@@ -257,6 +284,9 @@ class UDExList extends UI5Element {
     if (isHeaderItem) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, nextSelectIndex);
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[nextSelectIndex]);
+      }
       this.focusHeader(items[nextSelectIndex]);
       return;
     }
@@ -268,7 +298,12 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, nextSelectIndex);
-    setTimeout(() => { items[nextSelectIndex].focus(); }, 0);
+    setTimeout(() => {
+      if (this._scrollIntoView) {
+        this.scrollToItem(items[nextSelectIndex]);
+      }
+      items[nextSelectIndex].focus();
+    }, 0);
   }
 
   handleHomeKey(e: KeyboardEvent): void {
@@ -370,6 +405,10 @@ class UDExList extends UI5Element {
     header.focus();
   }
 
+  scrollToItem(item: UDExListItemBase): void {
+    item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
+  }
+
   unsetTabIndexByIndex(items: UDExListItemBase[], index: number): void {
     items[index]._tabIndex = "-1";
   }

package/src/MastheadCountrySelector.hbs

@@ -25,22 +25,26 @@
             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="none">
-                    <udex-masthead-menu-item
-                        class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
-                        @click="{{../handleCountryClick}}"
-                        _country-code="{{this.countryCode}}"
-                        url="{{this.url}}"
-                        label="{{this.displayTitle}}"
-                        index="{{@index}}"
-                        part="menu-item"
-                        is-nav-item>
-                    </udex-masthead-menu-item>
-                </li>
-            {{/each}}
-        </ul>
+        <div class="udex-masthead-country-selector__list-container">
+            <div class="udex-masthead-country-selector__list-wrap" @scroll={{this.handleCountryListShadowVisible}}>
+                <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+                    {{#each _activeCountries}}
+                        <li role="none">
+                            <udex-masthead-menu-item
+                              class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
+                              @click="{{../handleCountryClick}}"
+                              _country-code="{{this.countryCode}}"
+                              url="{{this.url}}"
+                              label="{{this.displayTitle}}"
+                              index="{{@index}}"
+                              part="menu-item"
+                              is-nav-item>
+                            </udex-masthead-menu-item>
+                        </li>
+                    {{/each}}
+                </ul>
+            </div>
+        </div>
     {{else}}
         <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">

package/src/MastheadCountrySelector.ts

@@ -215,6 +215,8 @@ class UDExMastheadCountrySelector extends UI5Element {
   _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
   _mastheadShell!: UDExMastheadShell;
+  _countriesListHolderClassName = "udex-masthead-country-selector__list-wrap";
+  _itemClassName = "udex-masthead-country-selector__item";
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -234,6 +236,10 @@ class UDExMastheadCountrySelector extends UI5Element {
     if (this.isSingleMode) {
       this.handleSingleRegionMode();
     }
+
+    if (this._activeCountries) {
+      this.checkScrollableCountriesList();
+    }
   }
 
   onEnterDOM(): void {
@@ -397,10 +403,10 @@ class UDExMastheadCountrySelector extends UI5Element {
     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.focus();
+    prevItem.scrollIntoView({ block: "center" });
+    prevItem.focus({ preventScroll: true });
   }
 
   focusNextItem(e: KeyboardEvent): void {
@@ -408,34 +414,53 @@ class UDExMastheadCountrySelector extends UI5Element {
     const lastItemIndex = this.items.length - 1;
     const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
     const nextItem = this.items[nextIndex];
-
     this.items[currentIndex]._tabIndex = "-1";
     nextItem._tabIndex = "0";
-    nextItem.focus();
+    nextItem.scrollIntoView({ block: "center" });
+    nextItem.focus({ preventScroll: true });
+  }
+
+  focusLastItem(e: KeyboardEvent): void {
+    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+    const lastItemIndex = this.items.length - 1;
+    const lastItem = this.items[lastItemIndex];
+
+    this.items[currentIndex]._tabIndex = "-1";
+    lastItem._tabIndex = "0";
+    lastItem.scrollIntoView({ block: "end" });
+    lastItem.focus({ preventScroll: true });
+  }
+
+  focusFirstItem(e: KeyboardEvent): void {
+    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+    const firstItem = this.items[0];
+
+    this.items[currentIndex]._tabIndex = "-1";
+    firstItem._tabIndex = "0";
+    firstItem.focus();
   }
 
   handleEndKey(e: KeyboardEvent): void {
     if (isEnd(e)) {
       e.preventDefault();
-      const currentIndex = (e.target as UDExMastheadMenuItem).index;
-      const lastItemIndex = this.items.length - 1;
-      const lastItem = this.items[lastItemIndex];
 
-      this.items[currentIndex]._tabIndex = "-1";
-      lastItem._tabIndex = "0";
-      lastItem.focus();
+      if (this.isScrollableCountriesList) {
+        this.removeScrollableClassInCountryList();
+      }
+
+      this.focusLastItem(e);
     }
   }
 
   handleHomeKey(e: KeyboardEvent): void {
     if (isHome(e)) {
       e.preventDefault();
-      const currentIndex = (e.target as UDExMastheadMenuItem).index;
-      const firstItem = this.items[0];
 
-      this.items[currentIndex]._tabIndex = "-1";
-      firstItem._tabIndex = "0";
-      firstItem.focus();
+      if (this.isScrollableCountriesList) {
+        this.addScrollableClassToCountryList();
+      }
+
+      this.focusFirstItem(e);
     }
   }
 
@@ -509,6 +534,48 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._mastheadShell.mobileBtn?.focus();
   }
 
+  checkScrollableCountriesList(): void {
+    if (this.countryListHolder) {
+      requestAnimationFrame(() => {
+        if (this.isScrollableCountriesList) {
+          this.addScrollableClassToCountryList();
+        } else {
+          this.removeScrollableClassInCountryList();
+        }
+      });
+    }
+  }
+
+  handleCountryListShadowVisible(): void {
+    if (this.scrollBottomCountriesList === 0) {
+      this.removeScrollableClassInCountryList();
+    } else {
+      this.addScrollableClassToCountryList();
+    }
+  }
+
+  addScrollableClassToCountryList(): void {
+    this.countryListHolder.classList.add(`${this._countriesListHolderClassName}_scrollable`);
+  }
+
+  removeScrollableClassInCountryList(): void {
+    this.countryListHolder.classList.remove(`${this._countriesListHolderClassName}_scrollable`);
+  }
+
+  get scrollBottomCountriesList(): number {
+    const countriesList = this.countryListHolder;
+    return countriesList.scrollHeight - countriesList.scrollTop - countriesList.clientHeight;
+  }
+
+  get isScrollableCountriesList(): boolean {
+    const countriesList = this.countryListHolder;
+    return countriesList ? countriesList.scrollHeight > countriesList.clientHeight : false;
+  }
+
+  get countryListHolder(): HTMLElement {
+    return this.shadowRoot?.querySelector<HTMLElement>(`.${this._countriesListHolderClassName}`) as HTMLElement;
+  }
+
   get noMatchesFoundText(): string {
     return translate(UDExMastheadCountrySelector, NO_MATCHES_FOUND);
   }
@@ -518,7 +585,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   get items(): Array<UDExMastheadMenuItem> {
-    const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
+    const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(`.${this._itemClassName}`);
     return items ? Array.from(items) : [];
   }
 

package/src/MastheadItem.ts

@@ -412,7 +412,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   handleItemClick(e: PointerEvent): void {
     if (this.isProfileBtn) {
-      this.profileSlot?.closeIdentitiesPanel();
+      this.handleProfileButtonClick();
     }
     this.handleSelectedChange();
     this.fireItemClickEvent(e);
@@ -423,6 +423,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.selected = this.isMobile ? true : !this.selected;
   }
 
+  handleProfileButtonClick(): void {
+    const profile = this.profileSlot;
+    if (profile) {
+      profile.closeIdentitiesPanel();
+      profile.scrollToTopProfileMenu();
+      profile._requestRender = true;
+    }
+  }
+
   fireDropdownEvents(): void {
     if (this.hasDropdownSlot) {
       const { Open, Close } = UDExMastheadDropdownItemAction;

package/src/MastheadMenu.ts

@@ -8,7 +8,9 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
-import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isUp, isDown, isTabNext, isTabPrevious, isHome, isEnd,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
@@ -17,6 +19,7 @@ import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
+import type { UDExScrollIntoViewOptions } from "./types/List.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -120,28 +123,58 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the scroll behavior for the items of the component.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _scrollIntoView?: `${UDExScrollIntoViewOptions}`;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   handleKeyDown(e: KeyboardEvent): void {
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
+    const isFirstItem = e.target === this.links[0];
+    const isLastItem = e.target === this.links[this.links.length - 1];
+
+    if (isUp(e) || (isTabPrevious(e) && !isFirstItem)) {
+      this.handleUpArrow(e);
+    }
+    if (isDown(e) || (isTabNext(e) && !isLastItem)) {
+      this.handleDownArrow(e);
+    }
+    if (isHome(e)) {
+      this.handleHomeKey(e);
+    }
+    if (isEnd(e)) {
+      this.handleEndKey(e);
+    }
+  }
+
+  handleHomeKey(e: KeyboardEvent): void {
+    e.preventDefault();
+    const firstItem = this.links[0];
+    firstItem.focus();
+  }
+
+  handleEndKey(e: KeyboardEvent): void {
+    e.preventDefault();
+    const lastItem = this.links[this.links.length - 1];
+    lastItem.focus();
   }
 
   handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      e.preventDefault();
-      const currentItem = e.target as UDExMastheadMenuItem;
-      this.focusPreviousItem(currentItem);
-    }
+    e.preventDefault();
+    const currentItem = e.target as UDExMastheadMenuItem;
+    this.focusPreviousItem(currentItem);
   }
 
   handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      e.preventDefault();
-      const currentItem = e.target as UDExMastheadMenuItem;
-      this.focusNextItem(currentItem);
-    }
+    e.preventDefault();
+    const currentItem = e.target as UDExMastheadMenuItem;
+    this.focusNextItem(currentItem);
   }
 
   handleMenuItemClick(e: PointerEvent): void {
@@ -171,12 +204,18 @@ class UDExMastheadMenu extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.links.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+    if (this._scrollIntoView) {
+      this.scrollToItem(this.links[previousSelectIndex]);
+    }
     this.links[previousSelectIndex].focus();
   }
 
   focusNextItem(item: UDExMastheadMenuItem): void {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const nextSelectIndex = currentSelectedIndex + 1 > this.links.length - 1 ? 0 : currentSelectedIndex + 1;
+    if (this._scrollIntoView) {
+      this.scrollToItem(this.links[nextSelectIndex]);
+    }
     this.links[nextSelectIndex].focus();
   }
 
@@ -184,6 +223,10 @@ class UDExMastheadMenu extends UI5Element {
     return this.links.indexOf(item);
   }
 
+  scrollToItem(item: UDExMastheadMenuItem): void {
+    item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
+  }
+
   get links(): Array<UDExMastheadMenuItem> {
     const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("[udex-masthead-menu-item]"));
     return menuItems.filter(({ url }) => url && url.length > 0);

package/src/MastheadProfileMenu.hbs

@@ -14,7 +14,8 @@
       <udex-avatar
         aria-hidden="true"
         size="L"
-        initials="{{userData.avatarInitials}}">
+        initials="{{userData.avatarInitials}}"
+        fallback-icon="{{userData.fallbackIcon}}">
         {{#if userData.avatarUrl}}
           <img src="{{userData.avatarUrl}}" alt="avatar"/>
         {{/if}}
@@ -40,25 +41,39 @@
       <slot name="message"></slot>
     </div>
   {{/if}}
-  <div class="udex-masthead-profile-menu__links">
-    <udex-masthead-menu
-      exportparts="badge, menu-item"
-      part="menu"
-      sub-items='{{linksList}}'
-      @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
-    </udex-masthead-menu>
-    {{#if logoutLink}}
-      <div class="udex-masthead-profile-menu__actions">
-        <udex-masthead-menu-item
-          @click="{{handleUserLogoutItemClick}}"
-          label="{{logoutText}}"
-          url="{{logoutUrl}}">
-        </udex-masthead-menu-item>
+  <div class="udex-masthead-profile-menu__content">
+      <div
+          class="udex-masthead-profile-menu__links"
+          @scroll="{{handleProfileMenuShadowVisible}}">
+          <udex-masthead-menu
+            exportparts="badge, menu-item"
+            part="menu"
+            sub-items='{{linksList}}'
+            @ui5-menu-item-click="{{handleProfileMenuItemClick}}"
+            _scroll-into-view="Center">
+          </udex-masthead-menu>
       </div>
-    {{/if}}
   </div>
+  {{#if hasActionButton}}
+      <div class="udex-masthead-profile-menu__actions">
+          {{#if hasLogoutButton}}
+              <div class="udex-masthead-profile-menu__btn">
+                <slot name="logoutButton"></slot>
+              </div>
+          {{else}}
+              <udex-link
+                  @click="{{handleUserLogoutClick}}"
+                  end-icon="action"
+                  design="Default"
+                  accessible-role="Link"
+                  href="{{logoutUrl}}">
+                  {{logoutText}}
+              </udex-link>
+          {{/if}}
+      </div>
+  {{/if}}
 {{/inline}}
-
+ 
 {{#*inline "account-indetities"}}
   <div class="udex-masthead-profile-menu__header-wrap back-btn">
     <udex-masthead-menu-item
@@ -70,13 +85,15 @@
     </udex-masthead-menu-item>
     <span class="udex-masthead-profile-menu__switcher-title">{{switcherAccountText}}</span>
   </div>
+  <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
   <div class="udex-masthead-profile-menu__identities-list-wrap">
-    <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
     {{#if identitiesList.length}}
       <udex-list
         class="udex-masthead-profile-menu__identities-list"
         mode="SingleSelect"
         accessible-name="{{listTitleText}}"
+        @scroll="{{handleIdentitiesListShadowVisible}}"
+        _scroll-into-view="Center"
         controlled>
         {{#each identitiesList}}
           <udex-list-item
@@ -92,13 +109,13 @@
         {{/each}}
       </udex-list>
     {{/if}}
-    <udex-button
-      @click="{{fireEventAddOrRemoveAccountClick}}"
-      class="udex-masthead-profile-menu__add-remove-btn"
-      design="Primary"
-      end-icon="action"
-      size="Large">
-      {{addOrRemoveAccountText}}
-    </udex-button>
   </div>
+  <udex-button
+    @click="{{fireEventAddOrRemoveAccountClick}}"
+    class="udex-masthead-profile-menu__add-remove-btn"
+    design="Primary"
+    end-icon="action"
+    size="Large">
+    {{addOrRemoveAccountText}}
+  </udex-button>
 {{/inline}}