@sapudex/web-components 0.111.0

package/config/dist/Search.d.ts

@@ -0,0 +1,236 @@
+import UI5Element, { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import "@ui5/webcomponents-icons/dist/microphone.js";
+import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
+export type SuggestionList = {
+    handleSelectItem: () => void;
+    text: string;
+};
+export declare enum Mode {
+    Standard = "Standard",
+    HomeSearch = "Home Search"
+}
+/**
+ * @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
+ * @alias sap.ui.webc.web-components.UDExSearch
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-search
+ * @public
+ */
+declare class UDExSearch extends UI5Element {
+    static i18nBundle: any;
+    _labelActiveClassName: string;
+    _voiceActiveClassName: string;
+    _focusActiveClassName: string;
+    _handleResizeBound: ResizeObserverCallback;
+    suggestedList: Array<SuggestionList>;
+    recommendedList: Array<SuggestionList>;
+    speechRecognition: any;
+    Suggestion?: SearchInputSuggestion;
+    /**
+     * Defines the value of the component.
+     *
+     * @type {string}
+     * @name sap.ui.webc.web-components.UDExSearch.prototype.value
+     * @defaultvalue ""
+     * @formEvents input
+     * @formProperty
+     * @public
+     */
+    value: string;
+    /**
+     * Defines label text for the input field.
+     *
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExSearch.prototype.label
+     * @defaultvalue ""
+     * @public
+     */
+    label: string;
+    /**
+     * Defines display the reset button for the search field.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExSearch.property.showResetButton
+     * @defaultvalue false
+     * @private
+     */
+    showResetButton: boolean;
+    /**
+     * Defines display the submit button for the search field.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExSearch.property.showSubmitButton
+     * @defaultvalue true
+     * @public
+     */
+    showSubmitButton: boolean;
+    /**
+     * Defines display the voice button for the search field.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExSearch.property.showVoiceButton
+     * @defaultvalue false
+     * @public
+     */
+    showVoiceButton: boolean;
+    /**
+     * Defines suggestions and recommended lists for the component.
+     * <br><br>
+     * <b>Note:</b> Structure of the property:
+     * { suggested: ["string", string, ...], recommended: ["string", "string", ...] }
+     *
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExSearch.property.suggestionList
+     * @defaultvalue ""
+     * @public
+     */
+    suggestionList: string;
+    /**
+     * Width of the search component
+     * @private
+     */
+    _searchWidth?: number;
+    /**
+     * Defines display the suggestion popover in the component.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExSearch.property.showSuggestedPopover
+     * @defaultvalue false
+     * @public
+     */
+    showSuggestedPopover: boolean;
+    /**
+     * Defines the language of voice search.
+     *
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExSearch.property.languageVoice
+     * @defaultvalue "en-US"
+     * @public
+     */
+    languageVoice: string;
+    /**
+     * Defines the mode of component.
+     * <br><br>
+     * <b>Note:</b> accepts a string "Standard" or "Home Search".
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExSearch.property.mode
+     * @defaultValue "Standard"
+     * @public
+     */
+    mode: "Standard" | "Home Search";
+    /**
+     * Defines the inner stored class of the label.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     */
+    labelActiveClass: string;
+    /**
+     * Defines the voice active class of the button.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     */
+    voiceActiveClass: string;
+    /**
+     * Defines the inner stored value of the classes of the label.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     */
+    labelClasses: string;
+    /**
+     * Defines the class of focus on the input field.
+     *
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     */
+    focusClasses: string;
+    /**
+     * Defines the suggestion popover is opened
+     *
+     * @type {boolean}
+     * @defaultvalue false
+     * @private
+     */
+    open: boolean;
+    constructor();
+    static onDefine(): Promise<void>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    initSpeechRecognition(): void;
+    onInvalidation(changeInfo: ChangeInfo): void;
+    setNewValue(changeInfo: ChangeInfo): void;
+    setNewSuggestionList(changeInfo: ChangeInfo): void;
+    setSuggestedRecommendedLists(value: string): void;
+    getListWithSuggestion(suggestedList: Array<string>): Array<SuggestionList>;
+    getTextWithSuggestion(text: string): string;
+    handleSelectItem: (itemValue: string) => () => void;
+    onSubmit(e: MouseEvent): void;
+    handleSubmitValue(): void;
+    handleAriaExpanded(): void;
+    onOpenPopover(): void;
+    onClosePopover(): void;
+    handleClassToRoot(): void;
+    onBeforeRendering(): void;
+    enableSuggestions(): void;
+    onAfterRendering(): void;
+    handleOutsideClick(): void;
+    handleBlur(): void;
+    handleSearchChange(e: InputEvent): void;
+    handleDebounce: (...args: any) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleEnterKey(e: KeyboardEvent): void;
+    handleTabKey(e: KeyboardEvent): void;
+    handleTabPrevious(e: KeyboardEvent): void;
+    handleUpKey(e: KeyboardEvent): void;
+    handleDownKey(e: KeyboardEvent): void;
+    handleEscapeKey(e: KeyboardEvent): void;
+    handleRightKey(e: KeyboardEvent): void;
+    handleLeftKey(e: KeyboardEvent): void;
+    handleFocus(): void;
+    handleFocusout(): void;
+    onReset(e: MouseEvent): void;
+    onVoice(e: MouseEvent): void;
+    onSpeechLaunch(): void;
+    onSpeechStart(): void;
+    onSpeechResult(): void;
+    onSpeechEnd(): void;
+    onShowResetButton(): void;
+    _handleResize(): void;
+    get popoverStyles(): {
+        width: string;
+    };
+    get isShowResetButton(): boolean;
+    get isShowSuggestedList(): boolean;
+    get isShowRecommendedList(): boolean;
+    get hasPopoverContent(): boolean;
+    get isShowSubmitButton(): boolean;
+    get suggestedHeading(): string;
+    get recommendedHeading(): string;
+    get isHomeSearchMode(): boolean;
+    get homeSearchPopoverClass(): string;
+    get searchButtonActiveClass(): string;
+    get isNotEmptyClass(): string;
+}
+export default UDExSearch;

package/config/dist/Search.js

@@ -0,0 +1,450 @@
+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, isRight, isLeft, } 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 } 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";
+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
+ * @alias sap.ui.webc.web-components.UDExSearch
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-search
+ * @public
+ */
+let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
+    constructor() {
+        super();
+        this._labelActiveClassName = "udex-search__label--active";
+        this._voiceActiveClassName = "udex-search__voice-button--active";
+        this._focusActiveClassName = "udex-search__container--focus";
+        this.handleSelectItem = (itemValue) => () => {
+            this.value = 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.showSuggestedPopover && this.value.length < 2) {
+                this.onClosePopover();
+            }
+        });
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            this.handleEnterKey(e);
+            this.handleTabKey(e);
+            this.handleUpKey(e);
+            this.handleDownKey(e);
+            this.handleEscapeKey(e);
+            this.handleRightKey(e);
+            this.handleLeftKey(e);
+        };
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    static async onDefine() {
+        UDExSearch_1.i18nBundle = await getI18nBundle("udex-search");
+    }
+    onEnterDOM() {
+        this.initSpeechRecognition();
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    initSpeechRecognition() {
+        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;
+    }
+    onInvalidation(changeInfo) {
+        this.setNewValue(changeInfo);
+        this.setNewSuggestionList(changeInfo);
+    }
+    setNewValue(changeInfo) {
+        if (changeInfo.name === "value") {
+            this.value = changeInfo.newValue;
+            this.setSuggestedRecommendedLists(this.suggestionList);
+        }
+    }
+    setNewSuggestionList(changeInfo) {
+        if (changeInfo.name === "suggestionList" && !!changeInfo.newValue) {
+            this.setSuggestedRecommendedLists(changeInfo.newValue);
+        }
+    }
+    setSuggestedRecommendedLists(value) {
+        if (this.value.length > 2 && value.length > 2) {
+            const parsedData = JSON.parse(value);
+            this.suggestedList = this.getListWithSuggestion(parsedData.suggested);
+            this.recommendedList = this.getListWithSuggestion(parsedData.recommended);
+        }
+        if (!value.length) {
+            this.onClosePopover();
+        }
+    }
+    getListWithSuggestion(suggestedList) {
+        return suggestedList?.map(item => ({
+            handleSelectItem: this.handleSelectItem(item),
+            text: this.getTextWithSuggestion(item),
+        }));
+    }
+    getTextWithSuggestion(text) {
+        const search = new RegExp(this.value, "i");
+        return text.replace(search, "<b>$&</b>");
+    }
+    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();
+        }
+    }
+    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;
+        }
+        this.labelClasses = `udex-search__label ${this.labelActiveClass}`;
+    }
+    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();
+        }
+    }
+    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.handleSubmitValue();
+        }
+    }
+    handleTabKey(e) {
+        if (isTabNext(e) && this.open) {
+            this.Suggestion?.onTab(e);
+        }
+    }
+    handleTabPrevious(e) {
+        if (isTabPrevious(e) && this.open) {
+            this.Suggestion?.onTabPrevious(e);
+        }
+    }
+    handleUpKey(e) {
+        if (isUp(e) && this.open) {
+            this.Suggestion?.onUp(e);
+        }
+    }
+    handleDownKey(e) {
+        if (isDown(e) && this.open) {
+            this.Suggestion?.onDown(e);
+        }
+    }
+    handleEscapeKey(e) {
+        if (isEscape(e) && this.open) {
+            this.Suggestion?.onEscape(e);
+            this.handleClassToRoot();
+        }
+    }
+    handleRightKey(e) {
+        if (isRight(e) && this.open) {
+            this.Suggestion?.onRight();
+        }
+    }
+    handleLeftKey(e) {
+        if (isLeft(e) && this.open) {
+            this.Suggestion?.onLeft();
+        }
+    }
+    handleFocus() {
+        this.labelActiveClass = this._labelActiveClassName;
+        this.focusClasses = this._focusActiveClassName;
+    }
+    handleFocusout() {
+        this.focusClasses = "";
+    }
+    onReset(e) {
+        e.stopPropagation();
+        this.value = "";
+        this.showResetButton = false;
+        this.onClosePopover();
+        this.handleBlur();
+        this.fireEvent("handle-value-reset");
+    }
+    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 UDExSearch_1.i18nBundle.getText(SUGGESTED_TEXT);
+    }
+    get recommendedHeading() {
+        return UDExSearch_1.i18nBundle.getText(RECOMMENDED_TEXT);
+    }
+    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" : "";
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], UDExSearch.prototype, "label", 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, "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: String, noAttribute: true, defaultValue: "" })
+], UDExSearch.prototype, "labelActiveClass", 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);
+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
+     */
+    ,
+    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
+     */
+    ,
+    event("handle-value-reset")
+], UDExSearch);
+UDExSearch.define();
+export default UDExSearch;
+//# sourceMappingURL=Search.js.map