@sapudex/web-components 0.111.0 → 0.114.2

package/src/Search.ts

@@ -1,5 +1,6 @@
 import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -16,11 +17,20 @@ import {
   isDown,
   isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import List from "./List.js";
+import ListItemBase from "./ListItemBase.js";
+import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/microphone.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import debounce from "./utils/debounce.js";
-import { SUGGESTED_TEXT, RECOMMENDED_TEXT, AVAILABLE_VALUES } from "./generated/i18n/i18n-defaults.js";
+import {
+  SUGGESTED_TEXT,
+  RECOMMENDED_TEXT,
+  AVAILABLE_VALUES,
+  NO_MATCHES_FOUND,
+} from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
@@ -29,6 +39,7 @@ import SearchSuggestionsTemplate from "./generated/templates/SearchSuggestionsTe
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
+import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -65,7 +76,7 @@ export type SuggestionList = {
 
 export enum Mode {
   Standard = "Standard",
-  HomeSearch = "Home Search",
+  HomeSearch = "Home Search"
 }
 
 /**
@@ -96,7 +107,7 @@ export enum Mode {
   staticAreaTemplate: SearchSuggestionsTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([Popover] as Array<typeof UI5Element>).concat(Suggestion ? Suggestion.dependencies : []);
+    return ([Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies, List] : [List]);
   },
 })
 
@@ -128,6 +139,13 @@ export enum Mode {
  * @public
  */
 @event("dropdown-item-click", { detail: { value: { type: String } } })
+/**
+ * Fired event when the user clicks on the intem inside the prefix dropdown.
+ *
+ * @event sap.ui.webc.web-components.UDExSearch#prefixItemClick
+ * @public
+ */
+@event("prefix-item-click", { detail: { item: { type: ListItemBase } } })
 class UDExSearch extends UI5Element {
   static i18nBundle: any;
   _labelActiveClassName = "udex-search__label--active";
@@ -225,6 +243,14 @@ class UDExSearch extends UI5Element {
   @property({ validator: Integer })
     _searchWidth?: number;
 
+  /**
+   * Define the label of the prefix for the dropdown.
+   *
+   * @private
+   */
+  @property({ type: String })
+    labelPrefix!: string;
+
   /**
    * Defines display the suggestion popover in the component.
    *
@@ -251,8 +277,8 @@ class UDExSearch extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: String, defaultValue: "Standard" })
-    mode!: "Standard" | "Home Search";
+  @property({ type: String, defaultValue: Mode.Standard })
+    mode!: Mode;
 
   /**
    * Defines open suggestion popover when clicked on the input field.
@@ -281,6 +307,15 @@ class UDExSearch extends UI5Element {
   @property()
     accessibleName!: string;
 
+  /**
+   * Defines the text if the suggestion list doesn't return results.
+   *
+   * @default "No matches found."
+   * @public
+  */
+  @property({ type: String, defaultValue: "No matches found." })
+    noResultText!: string;
+
   /**
    * Defines the inner stored class of the label.
    *
@@ -349,6 +384,36 @@ class UDExSearch extends UI5Element {
   @property({ type: String })
     _recommendLabel?: string;
 
+  /**
+   * The console warning shown after all unsuccessful attempts of opening SearchSuggestionsPopover component.
+   * @default "UdexSearchSuggestionsPopover couldn`t be opened"
+   */
+  @property({ type: String, defaultValue: "UdexSearchSuggestionsPopover couldn`t be opened" })
+    unsuccessfulRetryMessage: string = "UdexSearchSuggestionsPopover couldn`t be opened";
+
+  /**
+   * The delay before retrying to open the SerchSuggestionsPopover component.
+   * @default 200
+   */
+  @property({ type: Number, defaultValue: 200 })
+    retryDelay: number = 200;
+
+  /**
+   * The maximum number of attempts for opening the SearchSuggestionsPopover component.
+   * @default 5
+   */
+  @property({ type: Number, defaultValue: 5 })
+    maxRetryAttempts: number = 5;
+
+  /**
+   * Defines the prefix dropdown of the Search component.
+   *
+   * @slot dropdownPrefix
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    dropdownPrefix!: Array<List>;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -546,6 +611,67 @@ class UDExSearch extends UI5Element {
     this.fireEvent("dropdown-item-click", { value });
   }
 
+  handleDropdownClick() {
+    const dropdown = this.getPrefixPopover();
+
+    if (dropdown.opened) {
+      this.onClosePrefixPopover();
+    } else {
+      this.onOpenPrefixPopover();
+    }
+  }
+
+  getPrefixWrapper() {
+    return this.shadowRoot!.querySelector(".udex-search__prefix") as HTMLElement;
+  }
+
+  getPrefixPopover() {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
+  }
+
+  getPrefixButton() {
+    return this.shadowRoot!.querySelector(".udex-search__prefix-button") as HTMLElement;
+  }
+
+  onOpenPrefixPopover() {
+    if (this.dropdownPrefix.length) {
+      const wrapper = this.getPrefixWrapper();
+      const dropdown = this.getPrefixPopover();
+      const button = this.getPrefixButton();
+
+      dropdown.showAt(this.getPrefixButton());
+      dropdown.style.width = `${button.offsetWidth + 1}px`;
+      button.classList.add("udex-search__prefix-button--active");
+      wrapper.classList.add("udex-search__prefix--show-popover");
+      this.handleItemClick();
+    }
+  }
+
+  private handleItemClick() {
+    this.dropdownPrefix[0].addEventListener("item-press", (e: any) => {
+      const selectedItemPrefix = e.detail.item as ListItemBase;
+      this.labelPrefix = selectedItemPrefix.innerText;
+      this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
+      this.onClosePrefixPopover();
+    });
+  }
+
+  onClosePrefixPopover() {
+    const dropdown = this.getPrefixPopover();
+
+    dropdown.close();
+    this.handleAfterClosePrefixPopover();
+  }
+
+  handleAfterClosePrefixPopover() {
+    const wrapper = this.getPrefixWrapper();
+    const button = this.getPrefixButton();
+
+    wrapper.classList.remove("udex-search__prefix--show-popover");
+    button.classList.remove("udex-search__prefix-button--active");
+    this.dropdownPrefix[0].removeEventListener("item-press", () => {});
+  }
+
   handleInputClick(): void {
     if (this.showPopoverWhenClickedIntoInput) {
       this.onOpenPopover();
@@ -568,8 +694,19 @@ class UDExSearch extends UI5Element {
   }
 
   onOpenPopover(): void {
-    if (this.showSuggestedPopover && (this.suggestedList?.length || this.recommendedList?.length)) {
-      this.Suggestion!.open();
+    if (this.showSuggestedPopover) {
+      if (!this.Suggestion) {
+        retryUntilSuccessful(() => this.Suggestion, this.retryDelay, this.maxRetryAttempts, this.unsuccessfulRetryMessage)
+          .then(() => {
+            this.Suggestion!.open();
+          })
+          .catch(error => {
+            console.warn(error.message);
+          });
+      } else {
+        this.Suggestion.open();
+      }
+
       this.handleClassToRoot();
       this.handleAriaExpanded();
     }
@@ -601,6 +738,14 @@ class UDExSearch extends UI5Element {
       this.enableSuggestions();
     }
 
+    if (this.isHomeSearchWithPrefixMode && this.dropdownPrefix.length) {
+      const dropdownItems = Array.from(this.dropdownPrefix[0].children) as Array<ListItemBase>;
+      const selectedItemIndex = dropdownItems.findIndex(listItem => listItem.selected);
+      const selectedItemPrefix = selectedItemIndex >= 0 ? dropdownItems[selectedItemIndex] : dropdownItems[0];
+
+      this.labelPrefix = selectedItemPrefix.innerText;
+    }
+
     this.showResetButton = !!this.value.length;
 
     if (this.value && this.labelActiveClass === "") {
@@ -616,6 +761,14 @@ class UDExSearch extends UI5Element {
     }
 
     this.labelClasses = `udex-search__label ${this.labelActiveClass} ${this.labelAnimationClass}`;
+
+    if (this.isVoiceButton) {
+      this.labelClasses += " udex-search__label-with-voice-icon";
+    }
+
+    if (this.isShowSubmitButton) {
+      this.labelClasses += " udex-search__label-with-search-icon";
+    }
   }
 
   enableSuggestions() {
@@ -628,7 +781,7 @@ class UDExSearch extends UI5Element {
     if (Suggestion) {
       this.Suggestion = new Suggestion(this);
     } else {
-      throw new Error("You have to import '@udex/webcomponents/dist/features/SearchInputSuggestions.js' module to use udex-search suggestions");
+      throw new Error("You have to import '@udex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
     }
   }
 
@@ -636,6 +789,7 @@ class UDExSearch extends UI5Element {
     if (this.showSuggestedPopover) {
       this.handleOutsideClick();
       this.handleOpenSuggestionPopover();
+      this.setSearchWidth();
     }
   }
 
@@ -771,7 +925,7 @@ class UDExSearch extends UI5Element {
 
   handleKeyDownReset(e: KeyboardEvent) {
     if (isTabPrevious(e) && this.open) {
-      this.Suggestion?.handlePrevTabResset(e);
+      this.Suggestion?.handlePrevTabReset(e);
     }
   }
 
@@ -823,7 +977,15 @@ class UDExSearch extends UI5Element {
   }
 
   _handleResize() {
-    this._searchWidth = this.offsetWidth;
+    this.setSearchWidth();
+  }
+
+  private setSearchWidth() {
+    const searchContainer = (this.shadowRoot?.querySelector(".udex-search__container") as HTMLElement);
+
+    if (searchContainer.offsetWidth !== this._searchWidth) {
+      this._searchWidth = searchContainer.offsetWidth;
+    }
   }
 
   get popoverStyles() {
@@ -832,10 +994,24 @@ class UDExSearch extends UI5Element {
     };
   }
 
+  get prefixPopoverStyles() {
+    return {
+      "width": this.getPrefixButton() ? `${this.getPrefixButton().offsetWidth + 1}px` : "",
+    };
+  }
+
   get isShowResetButton(): boolean {
     return this.showResetButton && !!this.value.length;
   }
 
+  get noResultMessage(): string {
+    return this.noResultText || UDExSearch.i18nBundle.getText(NO_MATCHES_FOUND) as string;
+  }
+
+  get showNoResultMessage(): boolean {
+    return !this.suggestedList?.length && !this.recommendedList?.length;
+  }
+
   get isShowSuggestedList(): boolean {
     return !!this.suggestedList?.length;
   }
@@ -844,10 +1020,6 @@ class UDExSearch extends UI5Element {
     return !!this.recommendedList?.length;
   }
 
-  get hasPopoverContent(): boolean {
-    return !!(this.suggestedList?.length || this.recommendedList?.length);
-  }
-
   get isShowSubmitButton(): boolean {
     return this.showSubmitButton;
   }
@@ -860,12 +1032,28 @@ class UDExSearch extends UI5Element {
     return this._recommendLabel;
   }
 
+  get isShowSearchHomePrefix(): boolean {
+    return this.isHomeSearchWithPrefixMode && !!this.dropdownPrefix.length;
+  }
+
   get isHomeSearchMode(): boolean {
     return this.mode === Mode.HomeSearch;
   }
 
+  get isHomeSearchWithPrefixMode(): boolean {
+    return this.mode === Mode.HomeSearch && !!this.dropdownPrefix.length;
+  }
+
+  get classWithPrefix(): string {
+    return this.isHomeSearchWithPrefixMode ? "udex-search-prefix" : "";
+  }
+
   get homeSearchPopoverClass(): string {
-    return this.isHomeSearchMode ? "udex-search-suggestions__root--home" : "";
+    return this.isHomeSearchMode || this.isHomeSearchWithPrefixMode ? "udex-search-suggestions__root--home" : "";
+  }
+
+  get homeSearchWithPrefixPopoverClass(): string {
+    return this.isHomeSearchWithPrefixMode ? "udex-search-suggestions__root--prefix" : "";
   }
 
   get searchButtonActiveClass(): string {

package/src/SearchSuggestions.hbs

@@ -8,79 +8,77 @@
     id="suggestions-popover"
     aria-orientation="vertical"
     accessible-name="{{suggestionsAccessibleName}}">
-    {{#if hasPopoverContent}}
+    {{#if showNoResultMessage}}
+        <span class="udex-search-suggestions__message">{{noResultMessage}}</span>
+    {{else}}
         <div role="tree">
             {{#if isShowSuggestedList}}
-                <div class="udex-search-suggestions__block">
+                <div class="udex-search-suggestions__block" role="treeitem">
                     {{#if suggestedHeading}}
                         <span class="udex-search-suggestions__heading" id="suggested-heading">{{suggestedHeading}}</span>
                     {{/if}}
-                    <ul class="udex-search-suggestions__list"
+                    <div class="udex-search-suggestions__list"
                         role="listbox"
                         aria-labelledby="suggested-heading"
                         tabindex="0"
                         @keydown="{{../handleKeyDownPopover}}">
                         {{#each suggestedList}}
-                            <li
-                                class="udex-search-suggestions__item"
-                                role="option"
+                            <ui5-button
                                 id="{{id}}"
+                                icon="{{icon}}"
+                                type="Button"
+                                design="Default"
+                                class="udex-search-suggestions__item-button"
+                                title="{{title}}"
+                                tabindex="-1"
+                                role="option"
+                                @click="{{handleSelectItem}}"
                             >
-                                <ui5-button
-                                    icon="{{icon}}"
-                                    type="Button"
-                                    design="Default"
-                                    class="udex-search-suggestions__item-button"
-                                    title="{{title}}"
-                                    tabindex="-1"
-                                    @click="{{handleSelectItem}}"
-                                >
-                                    {{{text}}}
-                                </ui5-button>
-                            </li>
+                                {{{text}}}
+                            </ui5-button>
                         {{/each}}
-                    </ul>
+                    </div>
                 </div>
             {{/if}}
             {{#if isShowRecommendedList}}
-                <div class="udex-search-suggestions__block">
+                <div class="udex-search-suggestions__block" role="treeitem">
                     {{#if recommendedHeading}}
                         <span class="udex-search-suggestions__heading" id="recommended-heading">{{recommendedHeading}}</span>
                     {{/if}}
-                    <ul class="udex-search-suggestions__list"
+                    <div class="udex-search-suggestions__list"
                         role="listbox"
                         aria-labelledby="recommended-heading"
                         tabindex="0"
                         @keydown="{{../handleKeyDownPopover}}">
                         {{#each recommendedList}}
-                            <li
-                                class="udex-search-suggestions__item"
-                                role="option"
-                                id="{{id}}">
-                                {{#if this.hasCustomIcon}}
-                                    <ui5-button
-                                        icon="{{icon}}"
-                                        type="Button"
-                                        design="Default"
-                                        class="udex-search-suggestions__item-button"
-                                        title="{{title}}"
-                                        @click="{{handleSelectItem}}">
-                                        {{{text}}}
-                                    </ui5-button>
-                                {{else}}
-                                    <ui5-button
-                                        type="Button"
-                                        design="Default"
-                                        class="udex-search-suggestions__item-button"
-                                        title="{{title}}"
-                                        tabindex="-1"
-                                        @click="{{handleSelectItem}}">
-                                        {{{text}}}
-                                    </ui5-button>
-                                {{/if}}
-                            </li>
+                            {{#if this.hasCustomIcon}}
+                                <ui5-button
+                                    id="{{id}}"
+                                    icon="{{icon}}"
+                                    type="Button"
+                                    design="Default"
+                                    class="udex-search-suggestions__item-button"
+                                    title="{{title}}"
+                                    tabindex="-1"
+                                    role="option"
+                                    @click="{{handleSelectItem}}">
+                                    {{{text}}}
+                                </ui5-button>
+                            {{else}}
+                                <ui5-button
+                                    id="{{id}}"
+                                    type="Button"
+                                    design="Default"
+                                    class="udex-search-suggestions__item-button"
+                                    title="{{title}}"
+                                    tabindex="-1"
+                                    role="option"
+                                    @click="{{handleSelectItem}}">
+                                    {{{text}}}
+                                </ui5-button>
+                            {{/if}}
                         {{/each}}
-                    </ul>
+                    </div>
                 </div>
             {{/if}}
         </div>

package/src/SecondaryNavigation.hbs

@@ -40,7 +40,7 @@
                         {{/if}}
                     </li>
                 {{/each}}
-                {{#if _overflowItems.length}}
+                {{#if _showMoreButton}}
                     <li role="none" class="{{moreClass}} udex-secondary-navigation__link-btn-wrap" ?active="{{moreIsActive}}">
                         <button
                             role="menuitem"
@@ -82,9 +82,11 @@
                     </li>
                 {{/if}}
             </ul>
-            <div class="udex-secondary-navigation__buttons">
-                <slot name="buttons"></slot>
-            </div>
+            {{#if hasButtonsSlot}}
+                <div class="udex-secondary-navigation__buttons">
+                    <slot name="buttons"></slot>
+                </div>
+            {{/if}}
         </div>
     </div>
 </div>

package/src/SecondaryNavigation.ts

@@ -1,4 +1,4 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -154,6 +154,7 @@ class UDExSecondaryNavigation extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     _mobileBtnExpanded = false;
 
+  _showMoreButton: boolean;
   _navigationList: Array<NavItem> | undefined;
   _dropdown!: HTMLElement | null | undefined;
   _rootHolder!: HTMLElement | null | undefined;
@@ -167,6 +168,7 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
+    this._showMoreButton = true;
     this._boundReflowItems = this.reflowItems.bind(this);
   }
 
@@ -186,6 +188,13 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);
   }
 
+  onInvalidation(changeInfo: ChangeInfo): void {
+    if (changeInfo.name === "navItems") {
+      this._navigationList = undefined;
+      this.reflowItems();
+    }
+  }
+
   onAfterRendering(): void {
     this._rootHolder = this.rootHolder;
     this._dropdown = this.getDropdown();
@@ -211,14 +220,16 @@ class UDExSecondaryNavigation extends UI5Element {
 
     if ((steps.at(-1) || 0) <= availableWidth) {
       this._navItems.splice(0, Infinity, ...this.navigationList);
+      this._showMoreButton = false;
       this.refreshRendering();
       return;
     }
 
     // @ts-ignore
-    const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - 20));
+    const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - itemsGap));
     this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));
     this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));
+    this._showMoreButton = true;
     this.refreshRendering();
   }
 
@@ -281,7 +292,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleMobileOpen(): void {
-    this._rootHolder?.classList.toggle(mobileMenuActiveClass);
+    this.toggleActiveClass();
     this._mobileBtnExpanded = !this._mobileBtnExpanded;
   }
 
@@ -289,6 +300,10 @@ class UDExSecondaryNavigation extends UI5Element {
     this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
   }
 
+  toggleActiveClass() {
+    this._rootHolder?.classList.toggle(mobileMenuActiveClass);
+  }
+
   focusPrevNavItem(e: KeyboardEvent): void {
     const el = e.target as HTMLElement;
     const currentItem = el.parentElement as HTMLElement;
@@ -370,6 +385,7 @@ class UDExSecondaryNavigation extends UI5Element {
       this.navigationList.forEach(item => delete item.active);
       this.navigationList[clickedIndex].active = true;
       this.refreshRendering();
+      this.toggleActiveClass();
     }
   }
 
@@ -437,6 +453,10 @@ class UDExSecondaryNavigation extends UI5Element {
     return !!this.getSlottedNodes("breadcrumbs").length;
   }
 
+  get hasButtonsSlot(): boolean {
+    return !!this.getSlottedNodes("buttons").length;
+  }
+
   get isDesktopScreen(): boolean {
     return window.innerWidth > breakpointSizeS;
   }

package/src/SelectBox.ts

@@ -20,6 +20,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -234,6 +235,23 @@ class UDExSelectBox extends UDExSearchableListBase {
   _singleSelectedOption!: string;
   _truncatableTag!: UDExTag;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._shouldFilterItems = false;
+    this._handleResizeBound = this._handleResize.bind(this);
+    this._filteredItems = [];
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   onAfterRendering() {
     this._tokenizer = this.tokenizer;
     this._dropdown = this.dropdown;
@@ -253,6 +271,10 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   handleItemPress(e:CustomEvent) {
     this.onItemPress(e);