@sapudex/web-components 0.226.0 → 2.1.0

package/dist/Search.js

@@ -9,11 +9,9 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 { isEnter, isTabNext, isTabPrevious, isUp, isDown, isEscape, isSpace, } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -22,15 +20,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 "@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, NO_MATCHES_FOUND, ACCESSIBLE_NAME_RESET_ICON, ACCESSIBLE_NAME_SEARCH_ICON, TOOLTIP_RESET_BUTTON, TOOLTIP_VOICE_BUTTON, LISTENING, OF, } from "./generated/i18n/i18n-defaults.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { SUGGESTED_TEXT, RECOMMENDED_TEXT, AVAILABLE_VALUES, NO_MATCHES_FOUND, ACCESSIBLE_NAME_RESET_ICON, ACCESSIBLE_NAME_SEARCH_ICON, TOOLTIP_RESET_BUTTON, TOOLTIP_VOICE_BUTTON, TOOLTIP_SUBMIT_BUTTON, LISTENING, OF, } from "./generated/i18n/i18n-defaults.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";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
@@ -68,6 +65,80 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         this._labelAnimationClassName = "udex-search__label--animation-enabled";
         this._voiceActiveClassName = "udex-search__voice-button--active";
         this._focusActiveClassName = "udex-search__container--focus";
+        /**
+         * Defines the value of the component.
+         *
+         * @default ""
+         * @formEvents input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines where the SuggestionPopover is currently placed.
+         *
+         * @default "Bottom"
+         * @private
+         */
+        this._popoverPlacement = "Bottom";
+        /**
+         * Defines the language of voice search.
+         *
+         * @default "en-US"
+         * @public
+         */
+        this.languageVoice = "en-US";
+        /**
+         * Defines the mode of component.
+         * <br><br>
+         * <b>Note:</b> accepts a string "Standard" or "Home Search".
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.mode = Mode.Standard;
+        /**
+         * Defines the text if the suggestion list doesn't return results.
+         *
+         * @default "No matches found."
+         * @public
+        */
+        this.noResultText = "No matches found.";
+        /**
+         * Defines the inner stored class of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelActiveClass = "";
+        /**
+         * Defines the inner stored animation class of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelAnimationClass = "";
+        /**
+         * Defines the voice active class of the button.
+         *
+         * @default ""
+         * @private
+         */
+        this.voiceActiveClass = "";
+        /**
+         * Defines the inner stored value of the classes of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelClasses = "";
+        /**
+         * Defines the class of focus on the input field.
+         *
+         * @default ""
+         * @private
+         */
+        this.focusClasses = "";
         /**
          * The console warning shown after all unsuccessful attempts of opening SearchSuggestionsPopover component.
          * @default "UdexSearchSuggestionsPopover couldn`t be opened"
@@ -83,6 +154,12 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
          * @default 5
          */
         this.maxRetryAttempts = 5;
+        /**
+         * Defines the open button icon
+         *
+         * @private
+         */
+        this._prefixDropdownExpanded = false;
         this.handleSelectItem = (itemValue) => () => {
             this.value = itemValue;
             this.fireDropdownItemClick(itemValue);
@@ -91,11 +168,11 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         this.handleItemClick = (e) => {
             const selectedItemPrefix = e.detail.item;
             this.labelPrefix = selectedItemPrefix.innerText;
-            this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
+            this.fireDecoratorEvent("prefix-item-click", { item: selectedItemPrefix });
             this.onClosePrefixPopover();
         };
         this.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();
             }
@@ -108,13 +185,10 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
             this.handleEnterKey(e);
             this.handleTabKey(e);
             this.handleEscapeKey(e);
-            this.fireEvent("search-keydown", e);
+            this.fireDecoratorEvent("search-keydown", { e });
         };
         this._handleResizeBound = this._handleResize.bind(this);
     }
-    static async onDefine() {
-        UDExSearch_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
-    }
     onEnterDOM() {
         this.isNotMozillaFirefox = !this.isMozillaFirefox("Firefox");
         this.isNotMozillaFirefoxIOS = !this.isMozillaFirefox("FxiOS");
@@ -138,6 +212,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         }
         catch (error) {
             console.warn("The voice button does not work in this browser");
+            throw (error);
         }
     }
     isMozillaFirefox(keyWord) {
@@ -272,11 +347,11 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         return text.replace(search, "<b>$&</b>");
     }
     fireDropdownItemClick(value) {
-        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 {
@@ -287,7 +362,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         return this.shadowRoot.querySelector(".udex-search__prefix");
     }
     getPrefixPopover() {
-        return this.shadowRoot.querySelector("[ui5-popover]");
+        return this.shadowRoot.querySelector("#udex-search-prefix");
     }
     getPrefixButton() {
         return this.shadowRoot.querySelector(".udex-search__prefix-button");
@@ -298,7 +373,8 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
             const dropdown = this.getPrefixPopover();
             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");
@@ -309,11 +385,11 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
     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");
@@ -333,7 +409,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
     }
     handleSubmitValue() {
         this.onClosePopover();
-        this.fireEvent("submit-search-value", { value: this.value });
+        this.fireDecoratorEvent("submit-search-value", { value: this.value });
     }
     handleAriaExpanded() {
         const value = this.open.toString();
@@ -416,9 +492,9 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
     _createObserver(popover, ingoreOpenState = false) {
         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;
                 }
                 if (mutation.attributeName === "open" && newValue !== oldValue && !ingoreOpenState) {
@@ -446,11 +522,10 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
             this.setSearchWidth();
         }
     }
-    async handleOpenSuggestionPopover() {
+    handleOpenSuggestionPopover() {
         if (this.openSuggestionPopup) {
-            await this.Suggestion?._getSuggestionPopover().then(() => {
-                this.handlePopoverTrigger(this.openSuggestionPopup);
-            });
+            this.Suggestion?._getSuggestionPopover();
+            this.handlePopoverTrigger(this.openSuggestionPopup);
         }
     }
     handleOutsideClick() {
@@ -459,6 +534,9 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
             if (e.target !== this && popover !== this.Suggestion?.popover) {
                 this.handleBlur();
                 this.onClosePopover();
+                if (this.isShowSearchHomePrefix) {
+                    this.handleAfterClosePrefixPopover();
+                }
             }
         });
     }
@@ -497,7 +575,6 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
             if (this.open) {
                 this.Suggestion?.onEscape(e);
             }
-            this.fireEvent("handle-close-search");
         }
     }
     handleKeyDownPopover(e) {
@@ -549,7 +626,7 @@ let UDExSearch = UDExSearch_1 = 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();
     }
@@ -732,7 +809,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         return {
             "tooltipResetButton": this.tooltipResetButton || UDExSearch_1.i18nBundle.getText(TOOLTIP_RESET_BUTTON),
             "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch_1.i18nBundle.getText(TOOLTIP_VOICE_BUTTON),
-            "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch_1.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
+            "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch_1.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON),
         };
     }
     get suggestionsAccessibleName() {
@@ -761,7 +838,7 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExSearch.prototype, "showResetButton", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "Bottom" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "_popoverPlacement", void 0);
 __decorate([
     property({ type: Boolean })
@@ -776,7 +853,7 @@ __decorate([
     property({ type: String })
 ], UDExSearch.prototype, "suggestionList", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExSearch.prototype, "_searchWidth", void 0);
 __decorate([
     property({ type: String })
@@ -785,10 +862,10 @@ __decorate([
     property({ type: Boolean })
 ], UDExSearch.prototype, "showSuggestedPopover", void 0);
 __decorate([
-    property({ type: String, defaultValue: "en-US" })
+    property({ type: String })
 ], UDExSearch.prototype, "languageVoice", void 0);
 __decorate([
-    property({ type: String, defaultValue: Mode.Standard })
+    property({ type: String })
 ], UDExSearch.prototype, "mode", void 0);
 __decorate([
     property({ type: Boolean })
@@ -815,22 +892,22 @@ __decorate([
     property({ type: String })
 ], UDExSearch.prototype, "tooltipSubmitButton", void 0);
 __decorate([
-    property({ type: String, defaultValue: "No matches found." })
+    property({ type: String })
 ], UDExSearch.prototype, "noResultText", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "labelActiveClass", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "labelAnimationClass", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "voiceActiveClass", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "labelClasses", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExSearch.prototype, "focusClasses", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -842,13 +919,13 @@ __decorate([
     property({ type: String })
 ], UDExSearch.prototype, "_recommendLabel", void 0);
 __decorate([
-    property({ type: String, defaultValue: "UdexSearchSuggestionsPopover couldn`t be opened" })
+    property({ type: String })
 ], UDExSearch.prototype, "unsuccessfulRetryMessage", void 0);
 __decorate([
-    property({ type: Number, defaultValue: 200 })
+    property({ type: Number })
 ], UDExSearch.prototype, "retryDelay", void 0);
 __decorate([
-    property({ type: Number, defaultValue: 5 })
+    property({ type: Number })
 ], UDExSearch.prototype, "maxRetryAttempts", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
@@ -862,14 +939,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExSearch.prototype, "_isTouched", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExSearch, "i18nBundle", void 0);
 UDExSearch = UDExSearch_1 = __decorate([
     customElement({
         tag: "udex-search",
         renderer: litRender,
-        styles: SearchCss,
+        styles: [SearchCss, SearchSuggestionsCss],
         template: SearchTemplate,
-        staticAreaStyles: SearchSuggestionsCss,
-        staticAreaTemplate: SearchSuggestionsTemplate,
         get dependencies() {
             const Suggestion = getFeature("SearchInputSuggestion");
             return [ControlButton, Button, Icon, List, Popover].concat(Suggestion ? [...Suggestion.dependencies] : []);
@@ -878,51 +956,45 @@ UDExSearch = UDExSearch_1 = __decorate([
     /**
      * 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 })
 ], UDExSearch);
 UDExSearch.define();
 export default UDExSearch;