@sapudex/web-components 0.225.0 → 2.0.0

package/src/Search.ts

@@ -1,12 +1,12 @@
-import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UI5Element 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";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import {
@@ -23,12 +23,14 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import List from "./List.js";
 import ControlButton from "./ControlButton.js";
-import ListItemBase from "./ListItemBase.js";
+import type ListItemBase from "./ListItemBase.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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   SUGGESTED_TEXT,
   RECOMMENDED_TEXT,
@@ -38,13 +40,13 @@ import {
   ACCESSIBLE_NAME_SEARCH_ICON,
   TOOLTIP_RESET_BUTTON,
   TOOLTIP_VOICE_BUTTON,
+  TOOLTIP_SUBMIT_BUTTON,
   LISTENING,
   OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
-import SearchSuggestionsTemplate from "./generated/templates/SearchSuggestionsTemplate.lit.js";
 
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
@@ -94,6 +96,17 @@ export enum Mode {
 
 export type PopoverPlacement = "Bottom" | "Top";
 
+type UDExSearchBaseEventDetail = {
+  value: string,
+}
+
+type UDExSearchPrefixItemClickEventDetail = {
+  item: ListItemBase,
+}
+
+export type UDExSearchKeydownEventDetail = {
+  e: KeyboardEvent;
+}
 /**
  * @class
  *
@@ -116,10 +129,8 @@ export type PopoverPlacement = "Bottom" | "Top";
 @customElement({
   tag: "udex-search",
   renderer: litRender,
-  styles: SearchCss,
+  styles: [SearchCss, SearchSuggestionsCss],
   template: SearchTemplate,
-  staticAreaStyles: SearchSuggestionsCss,
-  staticAreaTemplate: SearchSuggestionsTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
     return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
@@ -129,47 +140,49 @@ export type PopoverPlacement = "Bottom" | "Top";
 /**
  * Fired event when the user submitted the value.
  *
- * @event sap.ui.webc.web-components.UDExSearch#submitSearchValue
  * @public
  */
-@event("submit-search-value", { detail: { value: { type: String } } })
+@event("submit-search-value", { bubbles: true })
 /**
  * Fired event when the user typed to search field.
  *
- * @event sap.ui.webc.web-components.UDExSearch#handleValueSearch
  * @public
  */
-@event("handle-value-search", { detail: { value: { type: String } } })
+@event("handle-value-search", { bubbles: true })
 /**
  * Fired event when the user clicks on the reset button.
  *
- * @event sap.ui.webc.web-components.UDExSearch#handleResetValue
  * @public
  */
-@event("handle-value-reset")
+@event("handle-value-reset", { bubbles: true })
 /**
- * Fired event when the user presses escape in search field.
+ * Fired event when the user clicks on the item inside the popover.
  *
- * @event sap.ui.webc.web-components.UDExSearch#handleCloseSearch
  * @public
  */
-@event("handle-close-search")
+@event("dropdown-item-click", { bubbles: true })
 /**
- * Fired event when the user clicks on the item inside the popover.
+ * Fired event when the user clicks on the intem inside the prefix dropdown.
  *
- * @event sap.ui.webc.web-components.UDExSearch#dropdownItemClick
  * @public
  */
-@event("dropdown-item-click", { detail: { value: { type: String } } })
+@event("prefix-item-click")
 /**
  * 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 } } })
+@event("search-keydown", { bubbles: true })
 class UDExSearch extends UI5Element {
-  static i18nBundle: any;
+  eventDetails!: {
+    "submit-search-value": UDExSearchBaseEventDetail,
+    "handle-value-search": UDExSearchBaseEventDetail,
+    "handle-value-reset": void,
+    "search-keydown": UDExSearchKeydownEventDetail,
+    "dropdown-item-click": UDExSearchBaseEventDetail,
+    "prefix-item-click": UDExSearchPrefixItemClickEventDetail,
+
+  };
   _labelActiveClassName = "udex-search__label--active";
   _labelAnimationClassName = "udex-search__label--animation-enabled";
   _voiceActiveClassName = "udex-search__voice-button--active";
@@ -191,7 +204,7 @@ class UDExSearch extends UI5Element {
    * @public
    */
   @property({ type: String })
-    value!: string;
+    value: string = "";
 
   /**
    * Defines label text for the input field.
@@ -226,8 +239,8 @@ class UDExSearch extends UI5Element {
    * @default "Bottom"
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "Bottom" })
-    _popoverPlacement!: PopoverPlacement;
+  @property({ type: String, noAttribute: true })
+    _popoverPlacement: PopoverPlacement = "Bottom";
 
   /**
    * Defines display the submit button for the search field.
@@ -271,7 +284,7 @@ class UDExSearch extends UI5Element {
    * Width of the search component
    * @private
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     _searchWidth?: number;
 
   /**
@@ -297,8 +310,8 @@ class UDExSearch extends UI5Element {
    * @default "en-US"
    * @public
    */
-  @property({ type: String, defaultValue: "en-US" })
-    languageVoice!: string;
+  @property({ type: String })
+    languageVoice: string = "en-US";
 
   /**
    * Defines the mode of component.
@@ -308,13 +321,13 @@ class UDExSearch extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: String, defaultValue: Mode.Standard })
-    mode!: Mode;
+  @property({ type: String })
+    mode: Mode = Mode.Standard;
 
   /**
    * Defines open suggestion popover when clicked on the input field.
    *
-   * @defaultvalue false
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -323,7 +336,7 @@ class UDExSearch extends UI5Element {
   /**
    * Defines open suggestion popover.
    *
-   * @defaultvalue false
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -389,8 +402,8 @@ class UDExSearch extends UI5Element {
    * @default "No matches found."
    * @public
   */
-  @property({ type: String, defaultValue: "No matches found." })
-    noResultText!: string;
+  @property({ type: String })
+    noResultText: string = "No matches found.";
 
   /**
    * Defines the inner stored class of the label.
@@ -398,8 +411,8 @@ class UDExSearch extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    labelActiveClass!: string;
+  @property({ type: String, noAttribute: true })
+    labelActiveClass: string = "";
 
   /**
    * Defines the inner stored animation class of the label.
@@ -407,8 +420,8 @@ class UDExSearch extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    labelAnimationClass!: string;
+  @property({ type: String, noAttribute: true })
+    labelAnimationClass: string = "";
 
   /**
    * Defines the voice active class of the button.
@@ -416,8 +429,8 @@ class UDExSearch extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    voiceActiveClass!: string;
+  @property({ type: String, noAttribute: true })
+    voiceActiveClass: string = "";
 
   /**
    * Defines the inner stored value of the classes of the label.
@@ -425,8 +438,8 @@ class UDExSearch extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    labelClasses!: string;
+  @property({ type: String, noAttribute: true })
+    labelClasses: string = "";
 
   /**
    * Defines the class of focus on the input field.
@@ -434,8 +447,8 @@ class UDExSearch extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    focusClasses!: string;
+  @property({ type: String, noAttribute: true })
+    focusClasses: string = "";
 
   /**
    * Defines the suggestion popover is opened
@@ -464,21 +477,21 @@ class UDExSearch extends UI5Element {
    * 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" })
+  @property({ type: String })
     unsuccessfulRetryMessage: string = "UdexSearchSuggestionsPopover couldn`t be opened";
 
   /**
    * The delay before retrying to open the SerchSuggestionsPopover component.
    * @default 200
    */
-  @property({ type: Number, defaultValue: 200 })
+  @property({ type: Number })
     retryDelay: number = 200;
 
   /**
    * The maximum number of attempts for opening the SearchSuggestionsPopover component.
    * @default 5
    */
-  @property({ type: Number, defaultValue: 5 })
+  @property({ type: Number })
     maxRetryAttempts: number = 5;
 
   /**
@@ -496,7 +509,7 @@ class UDExSearch extends UI5Element {
    * @private
    */
   @property({ type: Boolean, noAttribute: true })
-    _prefixDropdownExpanded!: boolean;
+    _prefixDropdownExpanded: boolean = false;
 
   /**
    * Defines the active (focus)
@@ -513,15 +526,14 @@ class UDExSearch extends UI5Element {
   @property({ type: Boolean })
     _isTouched!: boolean;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
-  static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onEnterDOM(): void {
     this.isNotMozillaFirefox = !this.isMozillaFirefox("Firefox");
     this.isNotMozillaFirefoxIOS = !this.isMozillaFirefox("FxiOS");
@@ -546,6 +558,7 @@ class UDExSearch extends UI5Element {
       }
     } catch (error: any) {
       console.warn("The voice button does not work in this browser");
+      throw (error);
     }
   }
 
@@ -635,13 +648,13 @@ class UDExSearch extends UI5Element {
   private getRecommendLabel(hasDataLabels: boolean, parsedData: SuggestionRecommendLists): string {
     return hasDataLabels
       ? (parsedData.recommended as RecommendData).label || ""
-      : UDExSearch.i18nBundle.getText(RECOMMENDED_TEXT) as string;
+      : UDExSearch.i18nBundle.getText(RECOMMENDED_TEXT);
   }
 
   private getSuggestionLabel(hasDataLabels: boolean, parsedData: SuggestionRecommendLists): string {
     return hasDataLabels
       ? (parsedData.suggested as SuggestionData).label || ""
-      : UDExSearch.i18nBundle.getText(SUGGESTED_TEXT) as string;
+      : UDExSearch.i18nBundle.getText(SUGGESTED_TEXT);
   }
 
   private getRecommendedList(hasDataLabels: boolean, parsedData: SuggestionRecommendLists) {
@@ -709,13 +722,13 @@ class UDExSearch extends UI5Element {
   };
 
   fireDropdownItemClick(value: string) {
-    this.fireEvent("dropdown-item-click", { value });
+    this.fireDecoratorEvent("dropdown-item-click", { value });
   }
 
   handleDropdownClick() {
     const dropdown = this.getPrefixPopover();
 
-    if (dropdown.opened) {
+    if (dropdown.open) {
       this.onClosePrefixPopover();
     } else {
       this.onOpenPrefixPopover();
@@ -727,7 +740,7 @@ class UDExSearch extends UI5Element {
   }
 
   getPrefixPopover(): Popover {
-    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
+    return this.shadowRoot!.querySelector<Popover>("#udex-search-prefix")!;
   }
 
   getPrefixButton() {
@@ -741,7 +754,8 @@ class UDExSearch extends UI5Element {
       const button = this.getPrefixButton();
 
       this._prefixDropdownExpanded = true;
-      dropdown.showAt(this.getPrefixButton());
+      dropdown.opener = this.getPrefixButton();
+      dropdown.open = true;
       dropdown.style.width = `${button.offsetWidth + 1}px`;
       dropdown.classList.add(this.prefixPopoverClasses);
       button.classList.add("udex-search__prefix-button--active");
@@ -753,19 +767,19 @@ class UDExSearch extends UI5Element {
   handleItemClick = (e: Event) => {
     const selectedItemPrefix = (e as CustomEvent).detail.item as ListItemBase;
     this.labelPrefix = selectedItemPrefix.innerText;
-    this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
+    this.fireDecoratorEvent("prefix-item-click", { item: selectedItemPrefix });
     this.onClosePrefixPopover();
   };
 
   onClosePrefixPopover() {
     const dropdown = this.getPrefixPopover();
     this.dropdownPrefix[0].removeEventListener("item-press", this.handleItemClick);
-    dropdown.close();
-    this._prefixDropdownExpanded = false;
+    dropdown.open = false;
     this.handleAfterClosePrefixPopover();
   }
 
   handleAfterClosePrefixPopover() {
+    this._prefixDropdownExpanded = false;
     const wrapper = this.getPrefixWrapper();
     const button = this.getPrefixButton();
     wrapper.classList.remove("udex-search__prefix--show-popover", "udex-search__prefix--show-popover-top");
@@ -781,14 +795,14 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  onSubmit(e: Event): void {
+  onSubmit(e: MouseEvent): void {
     e.stopPropagation();
     this.handleSubmitValue();
   }
 
   handleSubmitValue(): void {
     this.onClosePopover();
-    this.fireEvent("submit-search-value", { value: this.value });
+    this.fireDecoratorEvent("submit-search-value", { value: this.value });
   }
 
   handleAriaExpanded() {
@@ -888,10 +902,10 @@ class UDExSearch extends UI5Element {
   private _createObserver(popover: Popover, ingoreOpenState: boolean = false): MutationObserver {
     return new MutationObserver(mutationList => {
       mutationList.forEach(mutation => {
-        const newValue = popover?.actualPlacementType;
+        const newValue = popover?.actualPlacement;
         const oldValue = mutation.oldValue;
 
-        if (mutation.attributeName === "actual-placement-type" && newValue !== oldValue) {
+        if (mutation.attributeName === "actual-placement" && newValue !== oldValue) {
           this._popoverPlacement = newValue as PopoverPlacement;
         }
 
@@ -925,21 +939,22 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  async handleOpenSuggestionPopover() {
+  handleOpenSuggestionPopover() {
     if (this.openSuggestionPopup) {
-      await this.Suggestion?._getSuggestionPopover().then(() => {
-        this.handlePopoverTrigger(this.openSuggestionPopup);
-      });
+      this.Suggestion?._getSuggestionPopover();
+      this.handlePopoverTrigger(this.openSuggestionPopup);
     }
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("mousedown", (e: Event) => {
+    document.addEventListener("mousedown", (e: MouseEvent) => {
       const popover = (e.target as HTMLElement).shadowRoot?.querySelector("[ui5-popover]");
-
       if (e.target !== this && popover !== this.Suggestion?.popover) {
         this.handleBlur();
         this.onClosePopover();
+        if (this.isShowSearchHomePrefix) {
+          this.handleAfterClosePrefixPopover();
+        }
       }
     });
   }
@@ -960,7 +975,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleDebounce = debounce(() => {
-    this.fireEvent("handle-value-search", { value: this.value });
+    this.fireDecoratorEvent("handle-value-search", { value: this.value });
     if (this.showSuggestedPopover && this.value.length >= 2) {
       this.onOpenPopover();
     }
@@ -974,7 +989,7 @@ class UDExSearch extends UI5Element {
     this.handleEnterKey(e);
     this.handleTabKey(e);
     this.handleEscapeKey(e);
-    this.fireEvent("search-keydown", e);
+    this.fireDecoratorEvent("search-keydown", { e });
   };
 
   handleEnterKey(e: KeyboardEvent) {
@@ -999,7 +1014,6 @@ class UDExSearch extends UI5Element {
       if (this.open) {
         this.Suggestion?.onEscape(e);
       }
-      this.fireEvent("handle-close-search");
     }
   }
 
@@ -1051,7 +1065,7 @@ class UDExSearch extends UI5Element {
     this.focusClasses = "";
   }
 
-  onReset(e: Event): void {
+  onReset(e: MouseEvent): void {
     e.stopPropagation();
     this.handleReset();
   }
@@ -1060,7 +1074,7 @@ class UDExSearch extends UI5Element {
     this.value = "";
     this.showResetButton = false;
     this.onClosePopover();
-    this.fireEvent("handle-value-reset");
+    this.fireDecoratorEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
     this.getSearchInput()?.focus();
   }
@@ -1080,7 +1094,7 @@ class UDExSearch extends UI5Element {
     return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
-  onVoice(e: Event): void {
+  onVoice(e: MouseEvent): void {
     e.stopPropagation();
     if (this.speechRecognition) {
       this.onSpeechLaunch();
@@ -1164,7 +1178,7 @@ class UDExSearch extends UI5Element {
   }
 
   get noResultMessage(): string {
-    return this.noResultText || UDExSearch.i18nBundle.getText(NO_MATCHES_FOUND) as string;
+    return this.noResultText || UDExSearch.i18nBundle.getText(NO_MATCHES_FOUND);
   }
 
   get showNoResultMessage(): boolean {
@@ -1272,8 +1286,8 @@ class UDExSearch extends UI5Element {
     return {
       "ariaLabel": this.accessibleName || undefined,
       "ariaDescription": this.open ? this.suggestionsDescription : undefined,
-      "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON) as string,
-      "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
+      "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON),
+      "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
     };
   }
 
@@ -1283,14 +1297,14 @@ class UDExSearch extends UI5Element {
 
   get tooltipInfo() {
     return {
-      "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON) as string,
-      "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON) as string,
-      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON) as string,
+      "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON),
+      "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON),
+      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON),
     };
   }
 
   get suggestionsAccessibleName(): string {
-    return UDExSearch.i18nBundle.getText(AVAILABLE_VALUES) as string;
+    return UDExSearch.i18nBundle.getText(AVAILABLE_VALUES);
   }
 
   get showNonInteractiveButton(): boolean {

package/src/SearchSuggestions.hbs

@@ -1,9 +1,9 @@
 <ui5-popover
     class="udex-search-suggestions__root {{homeSearchPopoverClass}}"
     hide-arrow
-    _disable-initial-focus
-    placement-type="Bottom"
-    horizontal-align="Right"
+    prevent-initial-focus
+    placement="Bottom"
+    horizontal-align="End"
     style="{{popoverStyles}}"
     id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"

package/src/SearchableListBase.hbs

@@ -47,7 +47,8 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
-                                label="{{this.label}}">
+                                label="{{this.label}}"
+                                accessible-role="{{../listItemRole}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
                         {{/each}}
@@ -89,7 +90,8 @@
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"
                     ?selected="{{this.item.selected}}"
-                    label="{{this.item.label}}">
+                    label="{{this.item.label}}"
+                    accessible-role="{{../listItemRole}}">
                     {{{this.item.innerHTML}}}
                 </udex-list-item>
             {{/if}}