@sapudex/web-components 2.29.0 → 2.30.0

package/src/MastheadItem.hbs

@@ -21,23 +21,21 @@
         </span>
     {{/if}}
 {{else if isProfileBtn}}
-    <span
+    <button
         id="{{this._id}}"
-        class="udex-masthead-item__btn {{additionalClass}}"
-        aria-expanded="{{selected}}"
+        class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
+        aria-expanded="{{buttonAriaExpanded}}"
         aria-describedby="{{ariaDescribedBy}}"
         aria-controls="{{this._id}}_dropdown"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{handleItemClick}}"
+        @click-default="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}">
         {{> content}}
-    </span>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    </button>
+    {{> dropdown}}
 {{else}}
     <button
         role="{{accessibleRoleName}}"
@@ -46,7 +44,6 @@
         aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @mousedown="{{handleMouseDown}}"
@@ -54,9 +51,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    {{> dropdown}}
 {{/if}}
 
 {{#*inline "content"}}
@@ -69,14 +64,23 @@
             mode="Decorative">
         </ui5-icon>
     {{else if image}}
-        <div class="udex-masthead-item__image-wrap">
-            <img
-                class="udex-masthead-item__image"
-                id="{{this._id}}_image-alt"
-                src="{{image}}"
-                aria-hidden="{{isCountrySelectorBtn}}"
-                alt="{{imageAlt}}"/>
-        </div>
+        {{#if imageLoadError}}
+            <ui5-icon
+                class="udex-masthead-item__icon"
+                name="sap-icon://world"
+                mode="Decorative">
+            </ui5-icon>
+        {{else}}
+            <div class="udex-masthead-item__image-wrap">
+                <img
+                    class="udex-masthead-item__image"
+                    id="{{this._id}}_image-alt"
+                    src="{{image}}"
+                    aria-hidden="{{isCountrySelectorBtn}}"
+                    alt="{{imageAlt}}"
+                    @error="{{handleImageError}}"/>
+            </div>
+        {{/if}}
         {{#if imageAlt}}
             <span
                 id="image-desc"
@@ -99,13 +103,17 @@
 {{/inline}}
 
 {{#*inline "dropdown"}}
+    {{#if isDropdownOpened}}
     <div
         id="{{this._id}}_dropdown"
         class="udex-masthead-item__dropdown"
         @keydown="{{handleKeyDown}}"
         @focusout="{{handleFocusout}}">
-        <div class="udex-masthead-item__dropdown-holder">
-            <slot name="dropdown"></slot>
-        </div>
+          <div class="udex-masthead-item__dropdown-holder">
+              <slot name="dropdown"></slot>
+          </div>
     </div>
+    {{else}}
+      <div id="{{this._id}}_dropdown"></div>
+    {{/if}}
 {{/inline}}

package/src/MastheadItem.ts

@@ -10,13 +10,13 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/world.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
@@ -315,6 +315,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMenuCloseBtn?: boolean;
 
+  /**
+   * Defines if the image failed to load
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _imageLoadError = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -339,10 +347,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
-    if (this.shouldFocusFirstElement) {
-      this.applyFocusToFirstElement();
-    }
-
     this.handleOutsideClick();
   }
 
@@ -432,6 +436,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  handleImageError(): void {
+    this._imageLoadError = true;
+  }
+
   fireDropdownEvents(): void {
     if (this.hasDropdownSlot) {
       const { Open, Close } = UDExMastheadDropdownItemAction;
@@ -511,13 +519,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
-  async applyFocusToFirstElement(): Promise<void> {
-    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
-    if (focusedElement) {
-      focusedElement.focus();
-    }
-  }
-
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -607,10 +608,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
-  get shouldFocusFirstElement(): boolean {
-    return this.isDropdownOpened && !this._preventFocusOut;
-  }
-
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
@@ -688,9 +685,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get buttonAriaExpanded(): boolean | undefined {
-    if (!this.isSearchBtn) {
-      return this.selected;
+    if (!this.hasDropdownSlot) {
+      return undefined;
     }
+    return this.selected || false;
+  }
+
+  get imageLoadError(): boolean {
+    return this._imageLoadError && this.isCountrySelectorBtn;
   }
 }
 

package/src/MastheadMenu.ts

@@ -9,7 +9,7 @@ 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, isTabNext, isTabPrevious, isHome, isEnd,
+  isTabNext, isTabPrevious, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
@@ -139,11 +139,11 @@ class UDExMastheadMenu extends UI5Element {
     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 (isTabPrevious(e) && !isFirstItem) {
+      this.handlePreviousItemFocus(e);
     }
-    if (isDown(e) || (isTabNext(e) && !isLastItem)) {
-      this.handleDownArrow(e);
+    if (isTabNext(e) && !isLastItem) {
+      this.handleNextItemFocus(e);
     }
     if (isHome(e)) {
       this.handleHomeKey(e);
@@ -165,13 +165,13 @@ class UDExMastheadMenu extends UI5Element {
     lastItem.focus();
   }
 
-  handleUpArrow(e: KeyboardEvent): void {
+  handlePreviousItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusPreviousItem(currentItem);
   }
 
-  handleDownArrow(e: KeyboardEvent): void {
+  handleNextItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusNextItem(currentItem);
@@ -239,10 +239,11 @@ class UDExMastheadMenu extends UI5Element {
     return parsedItems.map((mainItem: MenuItem) => {
       mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
         subMenu.categoryId = `${id++}`;
-        subMenu.items = subMenu.items.map((item: Item) => ({
+
+        subMenu.items = subMenu.items ? subMenu.items.map((item: Item) => ({
           ...item,
           ...(item.title === "-" && { isDivider: true }),
-        }));
+        })) : [];
 
         return subMenu;
       });

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
@@ -77,7 +77,7 @@
             @click="{{handleExploreSapClick}}"
             @keydown="{{handleLeftRightKeys}}"
             accessible-role-text="button"
-            aria-has-popup="true"
+            aria-haspopup="true"
             type="Button"
             first-level-btn
             first-level
@@ -96,7 +96,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 +141,7 @@
                         @click="{{../handleMenuCategoryClick}}"
                         id="{{@index}}"
                         label="{{this.category}}"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         type="Button"
                         second-level-btn
                         second-level

package/src/Pagination.ts

@@ -364,7 +364,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/ReviewItem.ts

@@ -8,7 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ReviewItemTemplate from "./ReviewItemTemplate.js";
-import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
+import { SHOW_LESS, SHOW_MORE } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -73,14 +73,6 @@ class UDExReviewItem extends UI5Element {
   @property({ type: String })
     text!: string;
 
-  /**
-   * Defines whether button for showing truncated text is shown.
-   * @default 2
-   * @private
-   */
-  @property({ type: Number })
-    _textLineLimit: number = 2;
-
   /**
    * Defines whether the text is expanded.
    * @default false
@@ -123,23 +115,30 @@ class UDExReviewItem extends UI5Element {
   @slot()
     date!: Array<HTMLElement>;
 
+  /**
+   * Slot for custom content.
+   *
+   * @slot
+   */
+  @slot()
+    content?: Array<HTMLElement>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   _handleResizeBound: ResizeObserverCallback;
   _textElement!: HTMLElement;
   _visibleText!: string;
-  _maxHeight: number = 48;
+  _maxHeight: number = 90;
   _maxRating: number = 5;
   _minRating: number = 0;
 
   constructor() {
     super();
-    this._handleResizeBound = this._checkTextOverflow.bind(this);
+    this._handleResizeBound = this._handleResize.bind(this);
   }
 
   onEnterDOM(): void {
-    this._maxHeight = 48;
     this._completeText = this.text;
     ResizeHandler.register(this, this._handleResizeBound);
   }
@@ -149,19 +148,22 @@ class UDExReviewItem extends UI5Element {
   }
 
   onAfterRendering(): void {
-    this._textElement = this.getTextElement();
-    this._checkTextOverflow();
+    this._textElement = this.textElement;
+    if (this.text) {
+      this._checkTextOverflow();
+    }
+  }
+
+  _handleResize(): void {
+    if (this.text) {
+      this._checkTextOverflow();
+    }
   }
 
   _toggleText() {
     this._textExpanded = !this._textExpanded;
-    if (this._textExpanded) {
-      this._completeText = this.text;
-      this._textElement.classList.add("udex-review-item__text-expanded");
-    } else {
-      this._textElement.classList.remove("udex-review-item__text-expanded");
-      this._completeText = this._visibleText;
-    }
+    this._completeText = this._textExpanded ? this.text : this._visibleText;
+    this._textElement.classList.toggle("udex-review-item__text-expanded", this._textExpanded);
   }
 
   _checkTextOverflow() {
@@ -169,18 +171,26 @@ class UDExReviewItem extends UI5Element {
 
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d")!;
-    context.font = `16px sans-serif`;
+    context.font = "16px sans-serif";
 
-    let currentLineWidth = 0;
+    const maxWidth = this._textElement.offsetWidth;
     let visibleText = "";
+    const lineHeight = 22; // Approximate line height for 16px font
+
+    for (let i = 0; i < words.length; i++) {
+      const testText = visibleText + (visibleText ? " " : "") + words[i];
+      const metrics = context.measureText(testText);
+      const textWidth = metrics.width;
+
+      const estimatedLines = Math.ceil(textWidth / maxWidth);
+      const estimatedHeight = estimatedLines * lineHeight;
 
-    words.forEach(word => {
-      const wordWidth = context.measureText(`${word} `).width;
-      if (currentLineWidth + wordWidth <= 2 * this._textElement.offsetWidth) {
-        visibleText += `${word} `;
-        currentLineWidth += wordWidth;
+      if (estimatedHeight > this._maxHeight) {
+        break;
       }
-    });
+
+      visibleText = testText;
+    }
 
     this._visibleText = visibleText;
     if (!this._textExpanded) {
@@ -190,8 +200,13 @@ class UDExReviewItem extends UI5Element {
     this._showTextExpander = (!this._textExpanded && this._completeText.length < this.text.length) || (this._textExpanded && visibleText.length < this.text.length);
   }
 
+  get textElement(): HTMLElement {
+    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
+    return textElement!;
+  }
+
   get buttonText(): string {
-    return this._textExpanded ? translate(UDExReviewItem, READ_LESS) : translate(UDExReviewItem, READ_MORE);
+    return this._textExpanded ? translate(UDExReviewItem, SHOW_LESS) : translate(UDExReviewItem, SHOW_MORE);
   }
 
   get reviewItemClasses(): string {
@@ -210,11 +225,6 @@ class UDExReviewItem extends UI5Element {
     }
     return this.rating;
   }
-
-  getTextElement(): HTMLElement {
-    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
-    return textElement!;
-  }
 }
 
 UDExReviewItem.define();

package/src/ReviewItemTemplate.tsx

@@ -24,21 +24,23 @@ export default function ReviewItemTemplate(this: ReviewItem) {
         )}
       </div>
       <div className={`${rootClass}__text-container`}>
-        <div className={`${rootClass}__title`}>{this.reviewTitle}</div>
+        {this.reviewTitle &&
+          <div className={`${rootClass}__title`}>{this.reviewTitle}</div>
+        }
         <div className={`${rootClass}__text-wrapper`}>
-          <p className={`${rootClass}__text`} id={`${rootClass}__text`}>
-            {this._completeText}
-          </p>
-          {this._showTextExpander && (
-            <UDExButton
-              id="reviewExpander"
-              class={`${rootClass}__text-expander`}
-              design={UDExButtonDesign.Invisible}
-              size={UDExButtonSize.Large}
-              onClick={this._toggleText.bind(this)}>
-              {this.buttonText}
-            </UDExButton>
-          )}
+          <slot slot="content" name="content">
+            <p className={`${rootClass}__text`} id={`${rootClass}__text`}>{this._completeText}</p>
+            {this._showTextExpander &&
+              <UDExButton
+                id="reviewExpander"
+                class={`${rootClass}__text-expander`}
+                design={UDExButtonDesign.Invisible}
+                size={UDExButtonSize.Large}
+                onClick={this._toggleText.bind(this)}>
+                {this.buttonText}
+              </UDExButton>
+            }
+          </slot>
         </div>
         {this.author && (
           <slot slot="author" name="author" className={`${rootClass}__author`}></slot>

package/src/SearchableListBase.hbs

@@ -77,6 +77,9 @@
                         label="{{this.item.label}}"
                         supporting-text="{{this.item.supportingText}}"
                         ?controlled="{{this.item.controlled}}"
+                        ?collapsible="{{this.item.collapsible}}"
+                        ?collapsed="{{this.item.collapsed}}"
+                        ?_filtered="{{../_shouldFilterItems}}"
                         ?disabled="{{this.item.disabled}}"
                         ?selected="{{this.item.selected}}"
                         @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"

package/src/SearchableListBase.ts

@@ -252,11 +252,13 @@ class UDExSearchableListBase extends UI5Element {
 
   _shouldFilterItems?: boolean;
   _accSearchResultInfo?: string;
+  _groupCollapseStateBeforeSearch: Map<string, boolean>;
 
   constructor() {
     super();
     this._shouldFilterItems = false;
     this._filteredItems = [];
+    this._groupCollapseStateBeforeSearch = new Map();
   }
 
   onBeforeRendering() {
@@ -332,7 +334,17 @@ class UDExSearchableListBase extends UI5Element {
 
   onSearch(value: string) {
     const searchValue: string = value;
-    this._shouldFilterItems = true;
+    const hasSearchQuery = searchValue !== "";
+
+    if (hasSearchQuery && !this._shouldFilterItems) {
+      this.saveGroupCollapseState();
+    }
+
+    if (!hasSearchQuery && this._shouldFilterItems) {
+      this.restoreGroupCollapseState();
+    }
+
+    this._shouldFilterItems = hasSearchQuery;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
     const items = this.getFlattenItemsArray(this._filteredItems);
     this._accSearchResultInfo = items.length ? `${items.length} ${this.resultReturnedText}` : this.noMatchesFoundText;
@@ -361,16 +373,27 @@ class UDExSearchableListBase extends UI5Element {
   resetSearch() {
     const search = this.getSearch();
     search.value = "";
+    this._shouldFilterItems = false;
+    this.restoreGroupCollapseState();
     this._filteredItems = this.filterItems(this.getProcessedItems(), "");
   }
 
   filterItems(items: Array<UDExProcessedItem>, str: string): Array<UDExProcessedItem> {
+    const hasSearchQuery = str !== "";
+
     return items.filter(preparedItem => {
       const { isGroup, item } = preparedItem;
+
       if (isGroup) {
         preparedItem.groupItems = this.filterItemsForLabel(preparedItem.groupItems, str);
+
+        if (hasSearchQuery && preparedItem.groupItems.length > 0) {
+          item.collapsed = false;
+        }
+
         return preparedItem.groupItems.length > 0;
       }
+
       return this.checkAndUpdateLabel(item, str);
     });
   }
@@ -422,6 +445,34 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  saveGroupCollapseState(): void {
+    this._groupCollapseStateBeforeSearch.clear();
+
+    this.items.forEach(item => {
+      if (item.isGroup) {
+        this._groupCollapseStateBeforeSearch.set(item._id, Boolean(item.collapsed));
+      }
+    });
+  }
+
+  restoreGroupCollapseState(): void {
+    if (!this._groupCollapseStateBeforeSearch.size) {
+      return;
+    }
+
+    this.items.forEach(item => {
+      if (item.isGroup) {
+        const collapsed = this._groupCollapseStateBeforeSearch.get(item._id);
+
+        if (collapsed !== undefined) {
+          item.collapsed = collapsed;
+        }
+      }
+    });
+
+    this._groupCollapseStateBeforeSearch.clear();
+  }
+
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
     const arr: Array<UDExListItemBase | UDExListGroupHeaderBase> = [];
     items.forEach(item => {

package/src/SelectBox.ts

@@ -179,7 +179,6 @@ class UDExSelectBox extends UDExSelectBase {
   }
 
   handleHeaderPress(e:CustomEvent) {
-    this._search.focus();
     this.onHeaderPress(e);
   }
 

package/src/TextField.ts

@@ -357,7 +357,7 @@ class UDExTextField extends UI5Element {
     ariaDescribedBy?: string;
 
   /**
-   * Defines the aria-has-popup attribute of the input.
+   * Defines the aria-haspopup attribute of the input.
    * @private
    */
   @property({ type: String })