@sapudex/web-components 0.199.3 → 0.224.0

package/config/dist/Search.d.ts

@@ -1,236 +0,0 @@
-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

@@ -1,450 +0,0 @@
-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