@sapudex/web-components 0.111.0

package/dist/Search.js

@@ -0,0 +1,633 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExSearch_1;
+import UI5Element 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";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.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, } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import "@ui5/webcomponents-icons/dist/microphone.js";
+import debounce from "./utils/debounce.js";
+import { SUGGESTED_TEXT, RECOMMENDED_TEXT, AVAILABLE_VALUES } 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";
+const SearchIcon = "sap-icon://search";
+export var Mode;
+(function (Mode) {
+    Mode["Standard"] = "Standard";
+    Mode["HomeSearch"] = "Home Search";
+})(Mode || (Mode = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-search</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Search.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-search
+ * @public
+ */
+let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
+    constructor() {
+        super();
+        this._labelActiveClassName = "udex-search__label--active";
+        this._labelAnimationClassName = "udex-search__label--animation-enabled";
+        this._voiceActiveClassName = "udex-search__voice-button--active";
+        this._focusActiveClassName = "udex-search__container--focus";
+        this.handleSelectItem = (itemValue) => () => {
+            this.value = itemValue;
+            this.fireDropdownItemClick(itemValue);
+            this.handleSubmitValue();
+        };
+        this.handleDebounce = debounce(() => {
+            this.fireEvent("handle-value-search", { value: this.value });
+            if (this.showSuggestedPopover && this.value.length >= 2) {
+                this.onOpenPopover();
+            }
+            if (!this.showPopoverWhenClickedIntoInput && this.showSuggestedPopover && this.value.length < 2) {
+                this.onClosePopover();
+            }
+        });
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            this.handleEnterKey(e);
+            this.handleTabKey(e);
+            this.handleEscapeKey(e);
+        };
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    static async onDefine() {
+        UDExSearch_1.i18nBundle = await getI18nBundle("udex-search");
+    }
+    onEnterDOM() {
+        this.isNotMozillaFirefox = !this.isMozillaFirefox("Firefox");
+        this.isNotMozillaFirefoxIOS = !this.isMozillaFirefox("FxiOS");
+        this.initSpeechRecognition();
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+        this.removeEventListener("dropdown-trigger-event", () => { });
+    }
+    initSpeechRecognition() {
+        try {
+            if (this.isNotMozillaFirefox || this.isNotMozillaFirefoxIOS) {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition;
+                this.speechRecognition = new SpeechRecognition();
+                this.speechRecognition.continuous = true;
+                this.speechRecognition.lang = this.languageVoice;
+                this.speechRecognition.interimResults = false;
+                this.speechRecognition.maxAlternatives = 5;
+            }
+        }
+        catch (error) {
+            console.warn("The voice button does not work in this browser");
+        }
+    }
+    isMozillaFirefox(keyWord) {
+        const userAgent = navigator.userAgent;
+        const firefoxAgent = userAgent.split(" ").find(item => item.indexOf(keyWord) > -1);
+        if (firefoxAgent) {
+            const splitAgent = firefoxAgent.split("/");
+            const firefoxVersion = splitAgent[splitAgent.length - 1];
+            return Number(firefoxVersion) >= 125;
+        }
+        return false;
+    }
+    onInvalidation(changeInfo) {
+        this.setNewValue(changeInfo);
+        this.setPopoverState(changeInfo);
+        this.setNewSuggestionList(changeInfo);
+    }
+    setNewValue(changeInfo) {
+        if (changeInfo.name === "value") {
+            this.value = changeInfo.newValue;
+            this.setSuggestedRecommendedLists(this.suggestionList);
+            this.toggleLabelActiveClass();
+        }
+    }
+    toggleLabelActiveClass() {
+        if (this.labelActiveClass && !this.labelAnimationDisabled && !this.isFocusedOnTextfield) {
+            this.handleBlur();
+        }
+    }
+    setPopoverState(changeInfo) {
+        if (changeInfo.name === "openSuggestionPopup") {
+            this.handlePopoverTrigger(changeInfo.newValue);
+        }
+    }
+    handlePopoverTrigger(isOpenPopover) {
+        if (isOpenPopover) {
+            this.onOpenPopover();
+        }
+        else {
+            this.onClosePopover();
+        }
+    }
+    setNewSuggestionList(changeInfo) {
+        if (changeInfo.name === "suggestionList" && !!changeInfo.newValue) {
+            this.setSuggestedRecommendedLists(changeInfo.newValue);
+        }
+    }
+    setSuggestedRecommendedLists(value) {
+        if (this.showSuggestedPopover) {
+            const parsedData = JSON.parse(value);
+            const hasDataLabels = this.hasDataLabel(parsedData);
+            if (this.shouldShowPopover(parsedData, hasDataLabels)) {
+                this.setDropdownLabels(hasDataLabels, parsedData);
+                this.suggestedList = this.getListWithSuggestion(this.getSuggestedList(hasDataLabels, parsedData), "suggested");
+                this.recommendedList = this.getListWithSuggestion(this.getRecommendedList(hasDataLabels, parsedData), "recommended");
+            }
+            if (!this.shouldShowPopover(parsedData, hasDataLabels)) {
+                this.onClosePopover();
+                this.resetSuggestedRecommendedLists();
+            }
+        }
+    }
+    hasDataLabel(parsedData) {
+        return Object.values(parsedData).some(item => Object.prototype.hasOwnProperty.call(item, "label"));
+    }
+    resetSuggestedRecommendedLists() {
+        this.suggestedList = [];
+        this.recommendedList = [];
+    }
+    setDropdownLabels(hasDataLabels, parsedData) {
+        this._suggestionLabel = this.getSuggestionLabel(hasDataLabels, parsedData);
+        this._recommendLabel = this.getRecommendLabel(hasDataLabels, parsedData);
+    }
+    getRecommendLabel(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? parsedData.recommended.label || ""
+            : UDExSearch_1.i18nBundle.getText(RECOMMENDED_TEXT);
+    }
+    getSuggestionLabel(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? parsedData.suggested.label || ""
+            : UDExSearch_1.i18nBundle.getText(SUGGESTED_TEXT);
+    }
+    getRecommendedList(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? parsedData.recommended.list
+            : parsedData.recommended;
+    }
+    getSuggestedList(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? parsedData.suggested.list
+            : parsedData.suggested;
+    }
+    shouldShowPopover(parsedData, hasDataLabels) {
+        const hasSuggestedListContent = this.hasSuggestedContent(hasDataLabels, parsedData);
+        const hasRecommendedContent = this.hasRecommendedContent(hasDataLabels, parsedData);
+        return this.showPopoverWhenClickedIntoInput || (hasSuggestedListContent || hasRecommendedContent);
+    }
+    hasSuggestedContent(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? Object.prototype.hasOwnProperty.call(parsedData.suggested, "list") && parsedData.suggested.list.length
+            : parsedData.suggested.length;
+    }
+    hasRecommendedContent(hasDataLabels, parsedData) {
+        return hasDataLabels
+            ? Object.prototype.hasOwnProperty.call(parsedData.recommended, "list") && parsedData.recommended.list.length
+            : parsedData.recommended.length;
+    }
+    getListWithSuggestion(suggestedList, idName) {
+        return suggestedList?.map((item, index) => {
+            const itemWithCustomIcon = typeof item === "object";
+            const label = itemWithCustomIcon ? item.label : item;
+            return {
+                handleSelectItem: this.handleSelectItem(label),
+                text: this.getTextWithSuggestion(label),
+                title: label,
+                icon: itemWithCustomIcon ? item.icon : SearchIcon,
+                hasCustomIcon: itemWithCustomIcon,
+                id: `${idName}-${index}`,
+            };
+        });
+    }
+    escapeRegExp(input) {
+        const specialChars = /[-[\]/{}()*+?.\\^$|]/g;
+        return input.replace(specialChars, "\\$&");
+    }
+    getTextWithSuggestion(text) {
+        const escapedValue = this.escapeRegExp(this.value);
+        const search = new RegExp(escapedValue, "i");
+        return text.replace(search, "<b>$&</b>");
+    }
+    fireDropdownItemClick(value) {
+        this.fireEvent("dropdown-item-click", { value });
+    }
+    handleInputClick() {
+        if (this.showPopoverWhenClickedIntoInput) {
+            this.onOpenPopover();
+        }
+    }
+    onSubmit(e) {
+        e.stopPropagation();
+        this.handleSubmitValue();
+    }
+    handleSubmitValue() {
+        this.onClosePopover();
+        this.fireEvent("submit-search-value", { value: this.value });
+    }
+    handleAriaExpanded() {
+        const value = this.open.toString();
+        this.shadowRoot?.querySelector("[udex-id='search-input']")?.setAttribute("aria-expanded", value);
+    }
+    onOpenPopover() {
+        if (this.showSuggestedPopover && (this.suggestedList?.length || this.recommendedList?.length)) {
+            this.Suggestion.open();
+            this.handleClassToRoot();
+            this.handleAriaExpanded();
+        }
+    }
+    onClosePopover() {
+        if (this.showSuggestedPopover) {
+            this.Suggestion.close();
+            this.handleClassToRoot();
+            this.handleAriaExpanded();
+            this.openSuggestionPopup = false;
+        }
+    }
+    handleClassToRoot() {
+        const hasAdditionRootClass = !this.shadowRoot?.querySelector(".udex-search__root")?.classList.contains("udex-search__root--show-popover");
+        if (this.mode === Mode.HomeSearch && hasAdditionRootClass && this.open) {
+            this.shadowRoot?.querySelector(".udex-search__root")?.classList.add("udex-search__root--show-popover");
+        }
+        if (this.mode === Mode.HomeSearch && !hasAdditionRootClass && !this.open) {
+            this.shadowRoot?.querySelector(".udex-search__root")?.classList.remove("udex-search__root--show-popover");
+        }
+    }
+    onBeforeRendering() {
+        if (this.showSuggestedPopover) {
+            this.enableSuggestions();
+        }
+        this.showResetButton = !!this.value.length;
+        if (this.value && this.labelActiveClass === "") {
+            this.labelActiveClass = this._labelActiveClassName;
+        }
+        if (this.mode === Mode.HomeSearch) {
+            this.labelAnimationDisabled = true;
+        }
+        if (!this.labelAnimationDisabled) {
+            this.labelAnimationClass = this._labelAnimationClassName;
+        }
+        this.labelClasses = `udex-search__label ${this.labelActiveClass} ${this.labelAnimationClass}`;
+    }
+    enableSuggestions() {
+        if (this.Suggestion) {
+            return;
+        }
+        const Suggestion = getFeature("SearchInputSuggestion");
+        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");
+        }
+    }
+    onAfterRendering() {
+        if (this.showSuggestedPopover) {
+            this.handleOutsideClick();
+            this.handleOpenSuggestionPopover();
+        }
+    }
+    async handleOpenSuggestionPopover() {
+        if (this.openSuggestionPopup) {
+            await this.Suggestion?._getSuggestionPopover().then(() => {
+                this.handlePopoverTrigger(this.openSuggestionPopup);
+            });
+        }
+    }
+    handleOutsideClick() {
+        document.addEventListener("mousedown", (e) => {
+            const popover = e.target.shadowRoot?.querySelector("[ui5-popover]");
+            if (e.target !== this && popover !== this.Suggestion?.popover) {
+                this.handleBlur();
+                this.onClosePopover();
+            }
+        });
+    }
+    handleBlur() {
+        if (this.value) {
+            this.labelActiveClass = this._labelActiveClassName;
+        }
+        else {
+            this.labelActiveClass = "";
+        }
+    }
+    handleSearchChange(e) {
+        this.value = e.target?.value;
+        this.showResetButton = !!this.value.length;
+        this.handleDebounce();
+    }
+    handleEnterKey(e) {
+        if (isEnter(e) && !this.open) {
+            e.preventDefault();
+            this.handleSubmitValue();
+        }
+        if (isEnter(e) && this.open) {
+            this.Suggestion?.onEnter(e);
+            this.fireDropdownItemClick(this.value);
+            this.handleSubmitValue();
+        }
+    }
+    handleTabKey(e) {
+        if (isTabNext(e) && this.open) {
+            this.Suggestion?.onTab(e);
+        }
+    }
+    handleEscapeKey(e) {
+        if (isEscape(e) && this.open) {
+            this.Suggestion?.onEscape(e);
+            this.handleClassToRoot();
+        }
+    }
+    handleKeyDownPopover(e) {
+        if (this.open) {
+            this.handleTabKeyList(e);
+            this.handlePrevTabKeyList(e);
+            this.handleDownKeyList(e);
+            this.handleUpKeyList(e);
+        }
+    }
+    handleTabKeyList(e) {
+        if (isTabNext(e)) {
+            this.Suggestion?.onKeyTabList(e);
+        }
+    }
+    handlePrevTabKeyList(e) {
+        if (isTabPrevious(e)) {
+            this.Suggestion?.onPrevKeyTabList(e);
+        }
+    }
+    handleDownKeyList(e) {
+        if (isDown(e)) {
+            this.Suggestion?.onKeyDown(e);
+        }
+    }
+    handleUpKeyList(e) {
+        if (isUp(e)) {
+            this.Suggestion?.onKeyUp(e);
+        }
+    }
+    handleFocus() {
+        this.isFocusedOnTextfield = true;
+        this.focusClasses = this._focusActiveClassName;
+        this.labelActiveClass = (this.value || !this.labelAnimationDisabled) ? this._labelActiveClassName : "";
+        this.labelAnimationClass = !this.labelAnimationDisabled ? this._labelAnimationClassName : "";
+    }
+    handleFocusout() {
+        this.isFocusedOnTextfield = false;
+        this.focusClasses = "";
+    }
+    onReset(e) {
+        e.stopPropagation();
+        this.value = "";
+        this.showResetButton = false;
+        this.onClosePopover();
+        this.handleBlur();
+        this.fireEvent("handle-value-reset");
+        this.Suggestion?.resetFocusState();
+    }
+    handleKeyDownReset(e) {
+        if (isTabPrevious(e) && this.open) {
+            this.Suggestion?.handlePrevTabResset(e);
+        }
+    }
+    onVoice(e) {
+        e.stopPropagation();
+        if (this.speechRecognition) {
+            this.onSpeechLaunch();
+            this.onSpeechStart();
+            this.onSpeechResult();
+            this.onSpeechEnd();
+        }
+    }
+    onSpeechLaunch() {
+        if (!this.voiceActiveClass) {
+            this.speechRecognition.start();
+        }
+        else {
+            this.speechRecognition.stop();
+        }
+    }
+    onSpeechStart() {
+        this.speechRecognition.onstart = () => {
+            this.voiceActiveClass = this._voiceActiveClassName;
+            this.shadowRoot?.querySelector("[id='search-input']")?.focus();
+        };
+    }
+    onSpeechResult() {
+        this.speechRecognition.onresult = (e) => {
+            const last = e.results.length - 1;
+            this.value = e.results[last][0].transcript;
+            this.speechRecognition.stop();
+        };
+    }
+    onSpeechEnd() {
+        this.speechRecognition.onend = () => {
+            this.voiceActiveClass = "";
+            this.handleSubmitValue();
+            this.onShowResetButton();
+        };
+    }
+    onShowResetButton() {
+        if (this.value) {
+            this.showResetButton = true;
+        }
+    }
+    _handleResize() {
+        this._searchWidth = this.offsetWidth;
+    }
+    get popoverStyles() {
+        return {
+            "width": this._searchWidth ? `${this._searchWidth}px` : "",
+        };
+    }
+    get isShowResetButton() {
+        return this.showResetButton && !!this.value.length;
+    }
+    get isShowSuggestedList() {
+        return !!this.suggestedList?.length;
+    }
+    get isShowRecommendedList() {
+        return !!this.recommendedList?.length;
+    }
+    get hasPopoverContent() {
+        return !!(this.suggestedList?.length || this.recommendedList?.length);
+    }
+    get isShowSubmitButton() {
+        return this.showSubmitButton;
+    }
+    get suggestedHeading() {
+        return this._suggestionLabel;
+    }
+    get recommendedHeading() {
+        return this._recommendLabel;
+    }
+    get isHomeSearchMode() {
+        return this.mode === Mode.HomeSearch;
+    }
+    get homeSearchPopoverClass() {
+        return this.isHomeSearchMode ? "udex-search-suggestions__root--home" : "";
+    }
+    get searchButtonActiveClass() {
+        return this.isHomeSearchMode && this.open ? "udex-search__submit-button--active" : "";
+    }
+    get isNotEmptyClass() {
+        return this.value.length > 2 || this.focusClasses.length ? " udex-search__container--has-value" : "";
+    }
+    get isVoiceButton() {
+        return this.showVoiceButton && this.isNotMozillaFirefox && this.isNotMozillaFirefoxIOS;
+    }
+    get accInfo() {
+        return {
+            "ariaLabel": this.accessibleName || undefined,
+        };
+    }
+    get suggestionsAccessibleName() {
+        return UDExSearch_1.i18nBundle.getText(AVAILABLE_VALUES);
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "labelAnimationDisabled", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExSearch.prototype, "showResetButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "showSubmitButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "nonInteractiveSubmitButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "showVoiceButton", void 0);
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "suggestionList", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExSearch.prototype, "_searchWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "showSuggestedPopover", void 0);
+__decorate([
+    property({ type: String, defaultValue: "en-US" })
+], UDExSearch.prototype, "languageVoice", void 0);
+__decorate([
+    property({ type: String, defaultValue: "Standard" })
+], UDExSearch.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "showPopoverWhenClickedIntoInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "openSuggestionPopup", void 0);
+__decorate([
+    property()
+], UDExSearch.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "labelActiveClass", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "labelAnimationClass", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "voiceActiveClass", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "labelClasses", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "focusClasses", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExSearch.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "_suggestionLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "_recommendLabel", void 0);
+UDExSearch = UDExSearch_1 = __decorate([
+    customElement({
+        tag: "udex-search",
+        renderer: litRender,
+        styles: SearchCss,
+        template: SearchTemplate,
+        staticAreaStyles: SearchSuggestionsCss,
+        staticAreaTemplate: SearchSuggestionsTemplate,
+        get dependencies() {
+            const Suggestion = getFeature("SearchInputSuggestion");
+            return [Popover].concat(Suggestion ? Suggestion.dependencies : []);
+        },
+    })
+    /**
+     * 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 } } })
+    /**
+     * 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 } } })
+    /**
+     * Fired event when the user clicks on the reset button.
+     *
+     * @event sap.ui.webc.web-components.UDExSearch#handleResetValue
+     * @public
+     */
+    ,
+    event("handle-value-reset")
+    /**
+     * Fired event when the user clicks on the item inside the popover.
+     *
+     * @event sap.ui.webc.web-components.UDExSearch#dropdownItemClick
+     * @public
+     */
+    ,
+    event("dropdown-item-click", { detail: { value: { type: String } } })
+], UDExSearch);
+UDExSearch.define();
+export default UDExSearch;
+//# sourceMappingURL=Search.js.map