@sapudex/web-components 0.111.0 → 0.117.1

package/src/PhoneNumberField.ts

@@ -6,6 +6,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
 import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
@@ -258,6 +259,8 @@ class UDExPhoneNumberField extends UI5Element {
     previousKey!: string;
 
   static i18nBundle: I18nBundle;
+  _dropdown!: UDExDropdown;
+  _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
     UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
@@ -273,6 +276,23 @@ class UDExPhoneNumberField extends UI5Element {
 
   countriesList: ExtendedCountriesListPhoneNumberData[] = CountryListDB;
 
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._dropdown = this.getDropdown();
+  }
+
   onClick(): void {
     if (this.isButtonDisabled) {
       return;
@@ -287,6 +307,10 @@ class UDExPhoneNumberField extends UI5Element {
     }
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   handleInput(e: InputEvent) {
     this.value = (e.target as HTMLInputElement)?.value.trim();
 
@@ -309,11 +333,11 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleKeyDown = (e: KeyboardEvent) => {
-    const isKeyAllowed = e.key?.match(/[\d+-]/g)
+    const isKeyAllowed = e.key.match(/\d/)
       || this.allowedKeys.includes(e.key)
       || e.metaKey
-      || e.ctrlKey
-      || (e.key === " " && this.previousKey !== " ");
+      || e.ctrlKey;
+
     if (!isKeyAllowed) {
       e.preventDefault();
     }

package/src/Search.hbs

@@ -1,4 +1,26 @@
-<div class="udex-search__root">
+<div class="udex-search__root {{classWithPrefix}}">
+    {{#if isShowSearchHomePrefix}}
+        <div class="udex-search__prefix">
+            <button type="button"
+                    aria-haspopup="true"
+                    aria-controls="udex-search-prefix"
+                    class="udex-search__prefix-button"
+                    @click="{{handleDropdownClick}}">
+                <span class="udex-search__prefix-label">{{labelPrefix}}</span>
+                <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon>
+            </button>
+            <ui5-popover
+                id="udex-search-prefix"
+                class="udex-search__prefix-popover"
+                hide-arrow
+                placement-type="Bottom"
+	            horizontal-align="Left"
+                style="{{prefixPopoverStyles}}"
+                @after-close="{{handleAfterClosePrefixPopover}}">
+                <slot></slot>
+            </ui5-popover>
+        </div>
+    {{/if}}
     <form role="search" class="udex-search__container {{focusClasses}} {{isNotEmptyClass}}">
         {{#if labelAnimationDisabled}}
             <input
@@ -8,9 +30,10 @@
                 class="udex-search__field"
                 autocomplete="off"
                 role="combobox"
-                aria-controls="suggestions-popover"
+                aria-controls="{{getAriaControls}}"
                 aria-expanded="false"
                 aria-haspopup="{{showSuggestedPopover}}"
+                aria-label="Search"
                 placeholder="{{label}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
@@ -34,7 +57,7 @@
                 autocomplete="off"
                 role="combobox"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-controls="suggestions-popover"
+                aria-controls="{{getAriaControls}}"
                 aria-expanded="false"
                 aria-haspopup="{{showSuggestedPopover}}"
                 .value="{{value}}"

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,9 +39,12 @@ 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";
 
+const SuggestionsPopoverId: string = "suggestions-popover";
+
 type ListItem = {
   label: string;
   icon: string;
@@ -65,7 +78,7 @@ export type SuggestionList = {
 
 export enum Mode {
   Standard = "Standard",
-  HomeSearch = "Home Search",
+  HomeSearch = "Home Search"
 }
 
 /**
@@ -96,7 +109,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]);
   },
 })
 
@@ -121,6 +134,13 @@ export enum Mode {
  * @public
  */
 @event("handle-value-reset")
+/**
+ * Fired event when the user presses escape in search field.
+ *
+ * @event sap.ui.webc.web-components.UDExSearch#handleCloseSearch
+ * @public
+ */
+@event("handle-close-search")
 /**
  * Fired event when the user clicks on the item inside the popover.
  *
@@ -128,6 +148,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 +252,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 +286,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 +316,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 +393,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 +620,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 +703,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 +747,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 +770,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 +790,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 +798,7 @@ class UDExSearch extends UI5Element {
     if (this.showSuggestedPopover) {
       this.handleOutsideClick();
       this.handleOpenSuggestionPopover();
+      this.setSearchWidth();
     }
   }
 
@@ -687,16 +850,17 @@ class UDExSearch extends UI5Element {
     this.handleEnterKey(e);
     this.handleTabKey(e);
     this.handleEscapeKey(e);
+    this.fireEvent("search-keydown", e);
   };
 
   handleEnterKey(e: KeyboardEvent) {
-    if (isEnter(e) && !this.open) {
-      e.preventDefault();
-      this.handleSubmitValue();
-    }
-    if (isEnter(e) && this.open) {
-      this.Suggestion?.onEnter(e);
-      this.fireDropdownItemClick(this.value);
+    if (isEnter(e)) {
+      if (!this.open) {
+        e.preventDefault();
+      } else {
+        this.Suggestion?.onEnter(e);
+        this.fireDropdownItemClick(this.value);
+      }
       this.handleSubmitValue();
     }
   }
@@ -708,9 +872,12 @@ class UDExSearch extends UI5Element {
   }
 
   handleEscapeKey(e: KeyboardEvent) {
-    if (isEscape(e) && this.open) {
-      this.Suggestion?.onEscape(e);
-      this.handleClassToRoot();
+    if (isEscape(e)) {
+      if (this.open) {
+        this.Suggestion?.onEscape(e);
+        this.handleClassToRoot();
+      }
+      this.fireEvent("handle-close-search");
     }
   }
 
@@ -720,12 +887,14 @@ class UDExSearch extends UI5Element {
       this.handlePrevTabKeyList(e);
       this.handleDownKeyList(e);
       this.handleUpKeyList(e);
+      this.handleEscapeKey(e);
     }
   }
 
   handleTabKeyList(e: KeyboardEvent) {
     if (isTabNext(e)) {
       this.Suggestion?.onKeyTabList(e);
+      this.handleClassToRoot();
     }
   }
 
@@ -771,7 +940,7 @@ class UDExSearch extends UI5Element {
 
   handleKeyDownReset(e: KeyboardEvent) {
     if (isTabPrevious(e) && this.open) {
-      this.Suggestion?.handlePrevTabResset(e);
+      this.Suggestion?.handlePrevTabReset(e);
     }
   }
 
@@ -823,7 +992,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 +1009,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;
   }
@@ -848,6 +1039,14 @@ class UDExSearch extends UI5Element {
     return !!(this.suggestedList?.length || this.recommendedList?.length);
   }
 
+  get getAriaControls(): string {
+    return this.hasPopoverContent ? this.getSuggestionsPopoverId : "";
+  }
+
+  get getSuggestionsPopoverId(): string {
+    return SuggestionsPopoverId;
+  }
+
   get isShowSubmitButton(): boolean {
     return this.showSubmitButton;
   }
@@ -860,12 +1059,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 {