@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/Search.js

@@ -0,0 +1,446 @@
+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 Search_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isUp, isDown, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
+import SearchTemplate from "./SearchTemplate.js";
+import SearchCss from "./generated/themes/Search.css.js";
+import SearchField from "./SearchField.js";
+import { StartsWith } from "@ui5/webcomponents/dist/Filters.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { SEARCH_CANCEL_BUTTON, SEARCH_SUGGESTIONS } from "./generated/i18n/i18n-defaults.js";
+import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search` is an input with suggestions, used for user search.
+ *
+ * The `ui5-search` consists of several elements parts:
+ * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.
+ * - Input field - for user input value
+ * - Clear button - gives the possibility for deleting the entered value
+ * - Search button - a primary button for performing search, when the user has entered a search term
+ * - Suggestions - a list with available search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/Search.js";`
+ *
+ * @constructor
+ * @extends SearchField
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+let Search = Search_1 = class Search extends SearchField {
+    constructor() {
+        super();
+        /**
+         * Indicates whether a loading indicator should be shown in the popup.
+         * @default false
+         * @public
+         */
+        this.loading = false;
+        /**
+         * Defines whether the value will be autcompleted to match an item.
+         * @default false
+         * @public
+         */
+        this.noTypeahead = false;
+        /**
+         * Indicates whether the items picker is open.
+         * @public
+         */
+        this.open = false;
+        // The typed in value.
+        this._typedInValue = "";
+        this._valueBeforeOpen = this.getAttribute("value") || "";
+        this._isTyping = false;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        if (this.collapsed && !isPhone()) {
+            this.open = false;
+            return;
+        }
+        const innerInput = this.nativeInput;
+        const autoCompletedChars = innerInput && (innerInput.selectionEnd - innerInput.selectionStart);
+        this.open = this.open || (this._popoupHasAnyContent() && this._isTyping && innerInput.value.length > 0);
+        // If there is already a selection the autocomplete has already been performed
+        if (this._shouldAutocomplete && !autoCompletedChars) {
+            const item = this._getFirstMatchingItem(this.value);
+            this._proposedItem = item;
+            if (item) {
+                this._handleTypeAhead(item);
+                this._selectMatchingItem(item);
+            }
+            else {
+                this._deselectItems();
+            }
+        }
+        if (isPhone() && this.open) {
+            const item = this._getFirstMatchingItem(this.value);
+            this._proposedItem = item;
+            if (item && this._performItemSelectionOnMobile) {
+                this._selectMatchingItem(item);
+            }
+        }
+        this._flattenItems.forEach(item => {
+            item.highlightText = this._typedInValue;
+        });
+    }
+    onAfterRendering() {
+        const innerInput = this.nativeInput;
+        if (this._performTextSelection && innerInput && innerInput.value !== this._innerValue) {
+            innerInput.value = this._innerValue || "";
+        }
+        if (this._performTextSelection && this._typedInValue.length && this.value.length) {
+            innerInput?.setSelectionRange(this._typedInValue.length, this.value.length);
+        }
+        this._performTextSelection = false;
+        if (!this.collapsed) {
+            this.style.setProperty("--search_width", `${this.getBoundingClientRect().width}px`);
+        }
+    }
+    _handleMobileInput(e) {
+        this.value = e.target.value;
+        this._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e.detail.inputType);
+        this.fireDecoratorEvent("input");
+    }
+    _shouldPerformSelectionOnMobile(inputType) {
+        const allowedEventTypes = [
+            "deleteWordBackward",
+            "deleteWordForward",
+            "deleteSoftLineBackward",
+            "deleteSoftLineForward",
+            "deleteEntireSoftLine",
+            "deleteHardLineBackward",
+            "deleteHardLineForward",
+            "deleteByDrag",
+            "deleteByCut",
+            "deleteContent",
+            "deleteContentBackward",
+            "deleteContentForward",
+            "historyUndo",
+        ];
+        return !this.noTypeahead && !allowedEventTypes.includes(inputType || "");
+    }
+    _handleTypeAhead(item) {
+        const originalValue = item.text || "";
+        this._typedInValue = this.value;
+        this._innerValue = originalValue;
+        this._performTextSelection = true;
+        this.value = originalValue;
+    }
+    _startsWithMatchingItems(str) {
+        return StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item) && !this._isShowMoreItem(item)), "text");
+    }
+    _isGroupItem(item) {
+        return item.hasAttribute("ui5-search-item-group");
+    }
+    _isShowMoreItem(item) {
+        return item.hasAttribute("ui5-search-item-show-more");
+    }
+    _deselectItems() {
+        this._flattenItems.forEach(item => {
+            item.selected = false;
+        });
+    }
+    _selectMatchingItem(item) {
+        this._deselectItems();
+        item.selected = true;
+    }
+    _handleDown(e) {
+        if (this.open) {
+            e.preventDefault();
+            this._handleArrowDown();
+        }
+    }
+    _handleArrowDown() {
+        const focusableItems = this._getItemsList().listItems;
+        const firstListItem = focusableItems.at(0);
+        if (this.open) {
+            this._deselectItems();
+            this.value = this._typedInValue || this.value;
+            this._innerValue = this.value;
+            firstListItem?.focus();
+        }
+    }
+    _handleInnerClick() {
+        if (isPhone()) {
+            this.open = true;
+        }
+    }
+    _handleSearchIconPress() {
+        if (isPhone()) {
+            this.open = true;
+        }
+        else {
+            super._handleSearchIconPress();
+        }
+    }
+    _handleEnter() {
+        const prevented = !this.fireDecoratorEvent("search", { item: this._proposedItem });
+        if (prevented) {
+            return;
+        }
+        const innerInput = this.nativeInput;
+        innerInput.setSelectionRange(this.value.length, this.value.length);
+        this.open = false;
+        this._isTyping = false;
+    }
+    _onMobileInputKeydown(e) {
+        if (isEnter(e)) {
+            this.value = this.mobileInput?.value || this.value;
+            this._handleEnter();
+            this.blur();
+        }
+    }
+    _handleSearchEvent() {
+        this.fireDecoratorEvent("search", { item: this._proposedItem });
+    }
+    _handleEscape() {
+        this.value = this._typedInValue || this.value;
+        this._innerValue = this.value;
+        this._isTyping = false;
+    }
+    _handleInput(e) {
+        super._handleInput(e);
+        this._typedInValue = this.value;
+        this._proposedItem = undefined;
+        if (isPhone()) {
+            return;
+        }
+        this._isTyping = true;
+        this.open = this.value.length > 0 && this._popoupHasAnyContent();
+    }
+    _handleClear() {
+        super._handleClear();
+        this._typedInValue = "";
+        this._innerValue = "";
+        this._shouldAutocomplete = false;
+        this.open = false;
+    }
+    _popoupHasAnyContent() {
+        return this.items.length > 0 || this.illustration.length > 0 || this.messageArea.length > 0 || this.loading || this.action.length > 0;
+    }
+    _onFooterButtonKeyDown(e) {
+        if (isUp(e)) {
+            this._flattenItems[this._flattenItems.length - 1].focus();
+        }
+        if (isTabPrevious(e)) {
+            this._getItemsList().focus();
+        }
+    }
+    _onItemKeydown(e) {
+        const target = e.target;
+        // if focus is on the group header (in group's shadow dom) the target is the group itself,
+        // if so using getFocusDomRef ensures the actual focused element is used
+        const focusedItem = this._isGroupItem(target) ? target?.getFocusDomRef() : target;
+        const focusableItems = this._getItemsList().listItems;
+        const isFirstItem = focusableItems.at(0) === focusedItem;
+        const isLastItem = focusableItems.at(-1) === focusedItem;
+        const isArrowUp = isUp(e);
+        const isArrowDown = isDown(e);
+        const isTab = isTabNext(e);
+        e.preventDefault();
+        if (isFirstItem && isArrowUp) {
+            this.nativeInput?.focus();
+            this._shouldAutocomplete = true;
+        }
+        if ((isLastItem && isArrowDown) || isTab) {
+            this._getFooterButton()?.focus();
+        }
+    }
+    _onItemClick(e) {
+        const item = e.detail.item;
+        const prevented = !this.fireDecoratorEvent("search", { item });
+        if (prevented) {
+            if (isPhone()) {
+                this.open = false;
+            }
+            return;
+        }
+        this.value = item.text;
+        this._innerValue = this.value;
+        this._typedInValue = this.value;
+        this._shouldAutocomplete = false;
+        this._performTextSelection = true;
+        this.open = false;
+        this._isTyping = false;
+        this.focus();
+    }
+    _onkeydown(e) {
+        super._onkeydown(e);
+        if (this.loading) {
+            return;
+        }
+        this._shouldAutocomplete = !this.noTypeahead
+            && !(isBackSpace(e) || isDelete(e) || isEscape(e) || isUp(e) || isDown(e) || isTabNext(e) || isEnter(e) || isPageUp(e) || isPageDown(e) || isHome(e) || isEnd(e) || isEscape(e));
+        if (isDown(e)) {
+            this._handleDown(e);
+        }
+        if (isEscape(e)) {
+            this._handleEscape();
+        }
+        // deselect item on backspace or delete
+        if (isBackSpace(e) || isDelete(e)) {
+            this._deselectItems();
+        }
+    }
+    _onFocusOutSearch(e) {
+        const target = e.relatedTarget;
+        if (this._getPicker().contains(target) || this.contains(target)) {
+            return;
+        }
+        this.open = false;
+        this._isTyping = false;
+    }
+    _handleBeforeClose(e) {
+        if (e.detail.escPressed) {
+            this.focus();
+        }
+    }
+    _handleCancel() {
+        this._handleClose();
+        this.value = this._valueBeforeOpen;
+        this.fireDecoratorEvent("input");
+    }
+    _handleClose() {
+        this.open = false;
+        this._isTyping = false;
+        this.fireDecoratorEvent("close");
+    }
+    _handleBeforeOpen() {
+        this._valueBeforeOpen = this.value;
+        if (isPhone() && this.mobileInput) {
+            this.mobileInput.value = this.value;
+        }
+    }
+    _handleOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    _handleActionKeydown(e) {
+        if (isUp(e)) {
+            this._flattenItems[this._flattenItems.length - 1].focus();
+        }
+    }
+    _onFooterButtonClick() {
+        this.fireDecoratorEvent("popup-action-press");
+    }
+    _getFirstMatchingItem(current) {
+        if (!this._flattenItems.length || !current) {
+            return;
+        }
+        const startsWithMatches = this._startsWithMatchingItems(current);
+        if (!startsWithMatches.length) {
+            return undefined;
+        }
+        return startsWithMatches[0];
+    }
+    _getPicker() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    _getItemsList() {
+        return this._getPicker().querySelector(".ui5-search-list");
+    }
+    _getFooterButton() {
+        return this.action[0];
+    }
+    get _flattenItems() {
+        return this.getSlottedNodes("items").flatMap(item => {
+            return this._isGroupItem(item) ? [item, ...item.items] : [item];
+        });
+    }
+    get nativeInput() {
+        const domRef = this.getDomRef();
+        return domRef?.querySelector(`input`);
+    }
+    get mobileInput() {
+        const domRef = this.shadowRoot;
+        return domRef ? domRef.querySelector(`[ui5-input]`) : null;
+    }
+    get cancelButtonText() {
+        return Search_1.i18nBundle.getText(SEARCH_CANCEL_BUTTON);
+    }
+    get suggestionsText() {
+        return Search_1.i18nBundle.getText(SEARCH_SUGGESTIONS);
+    }
+    get scopeSelect() {
+        const domRef = this.shadowRoot;
+        return domRef ? domRef.querySelector(`[ui5-select]`) : null;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "noTypeahead", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: true,
+    })
+], Search.prototype, "items", void 0);
+__decorate([
+    slot()
+], Search.prototype, "action", void 0);
+__decorate([
+    slot()
+], Search.prototype, "illustration", void 0);
+__decorate([
+    slot()
+], Search.prototype, "messageArea", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "open", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Search.prototype, "_innerValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "_performItemSelectionOnMobile", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], Search, "i18nBundle", void 0);
+Search = Search_1 = __decorate([
+    customElement({
+        tag: "ui5-search",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchTemplate,
+        styles: [
+            SearchField.styles,
+            SearchCss,
+        ],
+    })
+    /**
+     * Fired when the popup is opened.
+     *
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired when the popup is closed.
+     *
+     * @public
+     */
+    ,
+    event("close")
+], Search);
+Search.define();
+export default Search;
+//# sourceMappingURL=Search.js.map

package/dist/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type List from \"@ui5/webcomponents/dist/List.js\";\nimport {\n\tisUp,\n\tisDown,\n\tisEnter,\n\tisBackSpace,\n\tisDelete,\n\tisEscape,\n\tisTabNext,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport SearchTemplate from \"./SearchTemplate.js\";\nimport SearchCss from \"./generated/themes/Search.css.js\";\nimport SearchField from \"./SearchField.js\";\nimport { StartsWith } from \"@ui5/webcomponents/dist/Filters.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type IllustratedMessage from \"./IllustratedMessage.js\";\nimport type SearchItemGroup from \"./SearchItemGroup.js\";\nimport type SearchMessageArea from \"./SearchMessageArea.js\";\nimport { SEARCH_CANCEL_BUTTON, SEARCH_SUGGESTIONS } from \"./generated/i18n/i18n-defaults.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type { InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport type Input from \"@ui5/webcomponents/dist/Input.js\";\nimport type { PopupBeforeCloseEventDetail } from \"@ui5/webcomponents/dist/Popup.js\";\nimport type Select from \"@ui5/webcomponents/dist/Select.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface ISearchSuggestionItem extends UI5Element {\n\tselected: boolean;\n\ttext: string;\n\titems?: ISearchSuggestionItem[];\n}\n\ntype SearchEventDetails = {\n\titem?: ISearchSuggestionItem;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search` is an input with suggestions, used for user search.\n *\n * The `ui5-search` consists of several elements parts:\n * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n * - Input field - for user input value\n * - Clear button - gives the possibility for deleting the entered value\n * - Search button - a primary button for performing search, when the user has entered a search term\n * - Suggestions - a list with available search suggestions\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n *\n * @constructor\n * @extends SearchField\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchTemplate,\n\tstyles: [\n\t\tSearchField.styles,\n\t\tSearchCss,\n\t],\n})\n\n/**\n * Fired when the popup is opened.\n *\n * @public\n */\n@event(\"open\")\n\n/**\n * Fired when the popup is closed.\n *\n * @public\n */\n@event(\"close\")\n\nclass Search extends SearchField {\n\teventDetails!: SearchField[\"eventDetails\"] & {\n\t\tsearch: SearchEventDetails,\n\t\t\"popup-action-press\": void,\n\t\t\"open\": void,\n\t\t\"close\": void,\n\t};\n\n\t/**\n\t * Indicates whether a loading indicator should be shown in the popup.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines whether the value will be autcompleted to match an item.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnoTypeahead = false;\n\n\t/**\n\t * Defines the Search suggestion items.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t})\n\titems!: DefaultSlot<SearchItem | SearchItemGroup>;\n\n\t/**\n\t * Defines the popup footer action button.\n\t *\n\t * @public\n\t */\n\t@slot()\n\taction!: Slot<Button>;\n\n\t/**\n\t * Defines the illustrated message to be shown in the popup.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tillustration!: Slot<IllustratedMessage>;\n\n\t/**\n\t * Defines the illustrated message to be shown in the popup.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tmessageArea!: Slot<SearchMessageArea>;\n\n\t/**\n\t * Indicates whether the items picker is open.\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Defines the inner stored value of the component.\n\t *\n\t * **Note:** The property is updated upon typing.\n\t * @default \"\"\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_innerValue?: string;\n\n\t/**\n\t * Determines whether the item selection should be performed on mobile devices.\n\t * Similar to _performTextSelection on desktop\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_performItemSelectionOnMobile?: boolean;\n\n\t/**\n\t * Based on the key pressed, determines if the autocomplete should be performed.\n\t * @private\n\t */\n\t_shouldAutocomplete?: boolean;\n\n\t/**\n\t * Determines whether a text selection should be performed.\n\t * @private\n\t */\n\t_performTextSelection?: boolean;\n\n\t/**\n\t * Holds the typed value from the user.\n\t * @private\n\t */\n\t_typedInValue: string;\n\n\t/**\n\t * Holds the typed value before opening the picker.\n\t * @private\n\t */\n\t_valueBeforeOpen: string;\n\n\t/**\n\t * Holds the currently proposed item which will be selected if the user presses Enter.\n\t * @private\n\t */\n\t_proposedItem?: ISearchSuggestionItem;\n\n\t/**\n\t * This property is used during rendering to indicate that the user has started typing in the input\n\t * @private\n\t */\n\t_isTyping: boolean;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// The typed in value.\n\t\tthis._typedInValue = \"\";\n\t\tthis._valueBeforeOpen = this.getAttribute(\"value\") || \"\";\n\t\tthis._isTyping = false;\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tif (this.collapsed && !isPhone()) {\n\t\t\tthis.open = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerInput = this.nativeInput;\n\t\tconst autoCompletedChars = innerInput && (innerInput.selectionEnd! - innerInput.selectionStart!);\n\n\t\tthis.open = this.open || (this._popoupHasAnyContent() && this._isTyping && innerInput!.value.length > 0);\n\n\t\t// If there is already a selection the autocomplete has already been performed\n\t\tif (this._shouldAutocomplete && !autoCompletedChars) {\n\t\t\tconst item = this._getFirstMatchingItem(this.value);\n\t\t\tthis._proposedItem = item;\n\n\t\t\tif (item) {\n\t\t\t\tthis._handleTypeAhead(item);\n\t\t\t\tthis._selectMatchingItem(item);\n\t\t\t} else {\n\t\t\t\tthis._deselectItems();\n\t\t\t}\n\t\t}\n\n\t\tif (isPhone() && this.open) {\n\t\t\tconst item = this._getFirstMatchingItem(this.value);\n\t\t\tthis._proposedItem = item;\n\n\t\t\tif (item && this._performItemSelectionOnMobile) {\n\t\t\t\tthis._selectMatchingItem(item);\n\t\t\t}\n\t\t}\n\n\t\tthis._flattenItems.forEach(item => {\n\t\t\t(item as SearchItem).highlightText = this._typedInValue;\n\t\t});\n\t}\n\n\tonAfterRendering(): void {\n\t\tconst innerInput = this.nativeInput;\n\n\t\tif (this._performTextSelection && innerInput && innerInput.value !== this._innerValue) {\n\t\t\tinnerInput.value = this._innerValue || \"\";\n\t\t}\n\n\t\tif (this._performTextSelection && this._typedInValue.length && this.value.length) {\n\t\t\tinnerInput?.setSelectionRange(this._typedInValue.length, this.value.length);\n\t\t}\n\n\t\tthis._performTextSelection = false;\n\n\t\tif (!this.collapsed) {\n\t\t\tthis.style.setProperty(\"--search_width\", `${this.getBoundingClientRect().width}px`);\n\t\t}\n\t}\n\n\t_handleMobileInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis.value = (e.target as Input).value;\n\t\tthis._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e.detail.inputType);\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_shouldPerformSelectionOnMobile(inputType: string): boolean {\n\t\tconst allowedEventTypes = [\n\t\t\t\"deleteWordBackward\",\n\t\t\t\"deleteWordForward\",\n\t\t\t\"deleteSoftLineBackward\",\n\t\t\t\"deleteSoftLineForward\",\n\t\t\t\"deleteEntireSoftLine\",\n\t\t\t\"deleteHardLineBackward\",\n\t\t\t\"deleteHardLineForward\",\n\t\t\t\"deleteByDrag\",\n\t\t\t\"deleteByCut\",\n\t\t\t\"deleteContent\",\n\t\t\t\"deleteContentBackward\",\n\t\t\t\"deleteContentForward\",\n\t\t\t\"historyUndo\",\n\t\t];\n\n\t\treturn !this.noTypeahead && !allowedEventTypes.includes(inputType || \"\");\n\t}\n\n\t_handleTypeAhead(item: ISearchSuggestionItem) {\n\t\tconst originalValue = item.text || \"\";\n\n\t\tthis._typedInValue = this.value;\n\t\tthis._innerValue = originalValue;\n\t\tthis._performTextSelection = true;\n\t\tthis.value = originalValue;\n\t}\n\n\t_startsWithMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item) && !this._isShowMoreItem(item)), \"text\");\n\t}\n\n\t_isGroupItem(item: HTMLElement): item is SearchItemGroup {\n\t\treturn item.hasAttribute(\"ui5-search-item-group\");\n\t}\n\n\t_isShowMoreItem(item: ISearchSuggestionItem) {\n\t\treturn item.hasAttribute(\"ui5-search-item-show-more\");\n\t}\n\n\t_deselectItems() {\n\t\tthis._flattenItems.forEach(item => {\n\t\t\titem.selected = false;\n\t\t});\n\t}\n\n\t_selectMatchingItem(item: ISearchSuggestionItem) {\n\t\tthis._deselectItems();\n\t\titem.selected = true;\n\t}\n\n\t_handleDown(e: KeyboardEvent) {\n\t\tif (this.open) {\n\t\t\te.preventDefault();\n\t\t\tthis._handleArrowDown();\n\t\t}\n\t}\n\n\t_handleArrowDown() {\n\t\tconst focusableItems = this._getItemsList().listItems;\n\t\tconst firstListItem = focusableItems.at(0);\n\n\t\tif (this.open) {\n\t\t\tthis._deselectItems();\n\t\t\tthis.value = this._typedInValue || this.value;\n\t\t\tthis._innerValue = this.value;\n\n\t\t\tfirstListItem?.focus();\n\t\t}\n\t}\n\n\t_handleInnerClick() {\n\t\tif (isPhone()) {\n\t\t\tthis.open = true;\n\t\t}\n\t}\n\n\t_handleSearchIconPress() {\n\t\tif (isPhone()) {\n\t\t\tthis.open = true;\n\t\t} else {\n\t\t\tsuper._handleSearchIconPress();\n\t\t}\n\t}\n\n\t_handleEnter() {\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\n\t\tif (prevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerInput = this.nativeInput!;\n\n\t\tinnerInput.setSelectionRange(this.value.length, this.value.length);\n\t\tthis.open = false;\n\t\tthis._isTyping = false;\n\t}\n\n\t_onMobileInputKeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.value = this.mobileInput?.value || this.value;\n\t\t\tthis._handleEnter();\n\n\t\t\tthis.blur();\n\t\t}\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\t}\n\n\t_handleEscape() {\n\t\tthis.value = this._typedInValue || this.value;\n\t\tthis._innerValue = this.value;\n\t\tthis._isTyping = false;\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tsuper._handleInput(e);\n\t\tthis._typedInValue = this.value;\n\t\tthis._proposedItem = undefined;\n\n\t\tif (isPhone()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._isTyping = true;\n\t\tthis.open = this.value.length > 0 && this._popoupHasAnyContent();\n\t}\n\n\t_handleClear(): void {\n\t\tsuper._handleClear();\n\n\t\tthis._typedInValue = \"\";\n\t\tthis._innerValue = \"\";\n\t\tthis._shouldAutocomplete = false;\n\t\tthis.open = false;\n\t}\n\n\t_popoupHasAnyContent() {\n\t\treturn this.items.length > 0 || this.illustration.length > 0 || this.messageArea.length > 0 || this.loading || this.action.length > 0;\n\t}\n\n\t_onFooterButtonKeyDown(e: KeyboardEvent) {\n\t\tif (isUp(e)) {\n\t\t\tthis._flattenItems[this._flattenItems.length - 1].focus();\n\t\t}\n\t\tif (isTabPrevious(e)) {\n\t\t\tthis._getItemsList().focus();\n\t\t}\n\t}\n\n\t_onItemKeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// if focus is on the group header (in group's shadow dom) the target is the group itself,\n\t\t// if so using getFocusDomRef ensures the actual focused element is used\n\t\tconst focusedItem = this._isGroupItem(target) ? target?.getFocusDomRef() : target;\n\t\tconst focusableItems = this._getItemsList().listItems;\n\t\tconst isFirstItem = focusableItems.at(0) === focusedItem;\n\t\tconst isLastItem = focusableItems.at(-1) === focusedItem;\n\t\tconst isArrowUp = isUp(e);\n\t\tconst isArrowDown = isDown(e);\n\t\tconst isTab = isTabNext(e);\n\n\t\te.preventDefault();\n\n\t\tif (isFirstItem && isArrowUp) {\n\t\t\tthis.nativeInput?.focus();\n\t\t\tthis._shouldAutocomplete = true;\n\t\t}\n\n\t\tif ((isLastItem && isArrowDown) || isTab) {\n\t\t\tthis._getFooterButton()?.focus();\n\t\t}\n\t}\n\n\t_onItemClick(e: CustomEvent) {\n\t\tconst item = e.detail.item as ISearchSuggestionItem;\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item });\n\n\t\tif (prevented) {\n\t\t\tif (isPhone()) {\n\t\t\t\tthis.open = false;\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = item.text;\n\t\tthis._innerValue = this.value;\n\t\tthis._typedInValue = this.value;\n\t\tthis._shouldAutocomplete = false;\n\t\tthis._performTextSelection = true;\n\t\tthis.open = false;\n\t\tthis._isTyping = false;\n\t\tthis.focus();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (this.loading) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._shouldAutocomplete = !this.noTypeahead\n\t\t\t&& !(isBackSpace(e) || isDelete(e) || isEscape(e) || isUp(e) || isDown(e) || isTabNext(e) || isEnter(e) || isPageUp(e) || isPageDown(e) || isHome(e) || isEnd(e) || isEscape(e));\n\n\t\tif (isDown(e)) {\n\t\t\tthis._handleDown(e);\n\t\t}\n\n\t\tif (isEscape(e)) {\n\t\t\tthis._handleEscape();\n\t\t}\n\n\t\t// deselect item on backspace or delete\n\t\tif (isBackSpace(e) || isDelete(e)) {\n\t\t\tthis._deselectItems();\n\t\t}\n\t}\n\n\t_onFocusOutSearch(e:FocusEvent) {\n\t\tconst target = e.relatedTarget as HTMLElement;\n\n\t\tif (this._getPicker().contains(target) || this.contains(target)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = false;\n\t\tthis._isTyping = false;\n\t}\n\n\t_handleBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>) {\n\t\tif (e.detail.escPressed) {\n\t\t\tthis.focus();\n\t\t}\n\t}\n\n\t_handleCancel() {\n\t\tthis._handleClose();\n\t\tthis.value = this._valueBeforeOpen;\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClose() {\n\t\tthis.open = false;\n\t\tthis._isTyping = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_handleBeforeOpen() {\n\t\tthis._valueBeforeOpen = this.value;\n\n\t\tif (isPhone() && this.mobileInput) {\n\t\t\tthis.mobileInput.value = this.value;\n\t\t}\n\t}\n\n\t_handleOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_handleActionKeydown(e: KeyboardEvent) {\n\t\tif (isUp(e)) {\n\t\t\tthis._flattenItems[this._flattenItems.length - 1].focus();\n\t\t}\n\t}\n\n\t_onFooterButtonClick() {\n\t\tthis.fireDecoratorEvent(\"popup-action-press\");\n\t}\n\n\t_getFirstMatchingItem(current: string): ISearchSuggestionItem | undefined {\n\t\tif (!this._flattenItems.length || !current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst startsWithMatches = this._startsWithMatchingItems(current);\n\n\t\tif (!startsWithMatches.length) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn startsWithMatches[0];\n\t}\n\n\t_getPicker() {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\t_getItemsList(): List {\n\t\treturn this._getPicker().querySelector(\".ui5-search-list\") as List;\n\t}\n\n\t_getFooterButton(): Button {\n\t\treturn this.action[0];\n\t}\n\n\tget _flattenItems(): Array<ISearchSuggestionItem> {\n\t\treturn this.getSlottedNodes<ISearchSuggestionItem>(\"items\").flatMap(item => {\n\t\t\treturn this._isGroupItem(item) ? [item, ...item.items] : [item];\n\t\t});\n\t}\n\n\tget nativeInput() {\n\t\tconst domRef = this.getDomRef();\n\n\t\treturn domRef?.querySelector<HTMLInputElement>(`input`);\n\t}\n\n\tget mobileInput() {\n\t\tconst domRef = this.shadowRoot;\n\n\t\treturn domRef ? domRef.querySelector<Input>(`[ui5-input]`) : null;\n\t}\n\n\tget cancelButtonText() {\n\t\treturn Search.i18nBundle.getText(SEARCH_CANCEL_BUTTON);\n\t}\n\n\tget suggestionsText() {\n\t\treturn Search.i18nBundle.getText(SEARCH_SUGGESTIONS);\n\t}\n\n\tget scopeSelect() {\n\t\tconst domRef = this.shadowRoot;\n\n\t\treturn domRef ? domRef.querySelector<Select>(`[ui5-select]`) : null;\n\t}\n}\n\nSearch.define();\n\nexport default Search;\n"]}

package/dist/SearchField.d.ts

@@ -0,0 +1,155 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { SelectChangeEventDetail } from "@ui5/webcomponents/dist/Select.js";
+/**
+ * Interface for components that may be slotted inside a `ui5-search`
+ * @public
+ */
+interface ISearchScope extends UI5Element {
+    text?: string;
+    value?: string;
+    stableDomRef: string;
+}
+type SearchFieldScopeSelectionChangeDetails = {
+    scope: ISearchScope | undefined;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-field` is an input field, used for user search.
+ *
+ * The `ui5-search-field` consists of several elements parts:
+ * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.
+ * - Input field - for user input value
+ * - Clear button - gives the possibility for deleting the entered value
+ * - Search button - a primary button for performing search, when the user has entered a search term
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchField.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+declare class SearchField extends UI5Element {
+    eventDetails: {
+        search: object;
+        input: void;
+        "scope-change": SearchFieldScopeSelectionChangeDetails;
+    };
+    /**
+     * Indicates whether a loading indicator should be shown in the input field.
+     * @default false
+     * @since 2.19.0
+     * @public
+     */
+    fieldLoading: boolean;
+    /**
+     * Defines whether the clear icon of the search will be shown.
+     * @default false
+     * @public
+     */
+    showClearIcon: boolean;
+    /**
+     * Defines whether the component is collapsed.
+     *
+     * @default false
+     * @private
+     */
+    collapsed: boolean;
+    /**
+     * Defines the value of the component.
+     *
+     * **Note:** The property is updated upon typing.
+     * @default ""
+     * @public
+     */
+    value: string;
+    /**
+     * Defines a short hint intended to aid the user with data entry when the
+     * component has no value.
+     * @default undefined
+     * @public
+     */
+    placeholder?: string;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @public
+     * @default undefined
+     */
+    accessibleName?: string;
+    /**
+     * Defines the accessible ARIA description of the field.
+     * @public
+     * @default undefined
+     */
+    accessibleDescription?: string;
+    /**
+     * Defines the value of the component:
+     *
+     * Applications are responsible for setting the correct scope value.
+     *
+     * **Note:** If the given value does not match any existing scopes,
+     * no scope will be selected and the SearchField scope component will be displayed as empty.
+     * @public
+     * @default ""
+     * @since 2.18.0
+     */
+    scopeValue?: string;
+    /**
+     * Defines the component scope options.
+     * @public
+     */
+    scopes: Slot<ISearchScope>;
+    /**
+     * Defines the filter button slot, used to display an additional filtering button.
+     * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
+     *
+     * **Note:** Scope button and Filter button are mutually exclusive.
+     * @public
+     * @since 2.11.0
+     */
+    filterButton: Slot<Button>;
+    /**
+     * @private
+     */
+    focusedInnerInput: boolean;
+    /**
+     * @private
+     */
+    _effectiveShowClearIcon: boolean;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onfocusin(): void;
+    _onfocusout(): void;
+    _onFocusOutSearch(e: FocusEvent): void;
+    _handleEnter(): void;
+    _handleInnerClick(): void;
+    _handleSearchIconPress(): void;
+    _handleSearchEvent(): void;
+    _handleInput(e: InputEvent): void;
+    _handleClear(): void;
+    _handleScopeChange(e: CustomEvent<SelectChangeEventDetail>): void;
+    get _isSearchIcon(): boolean | 0;
+    get _searchButtonAccessibilityAttributes(): {
+        expanded: boolean;
+    };
+    get _translations(): {
+        scope: string;
+        searchIcon: string;
+        clearIcon: string;
+        searchFieldAriaLabel: string;
+    };
+    get _effectiveIconTooltip(): string;
+    captureRef(ref: HTMLElement & {
+        scopeOption?: UI5Element;
+    } | null): void;
+}
+export default SearchField;
+export type { ISearchScope, SearchFieldScopeSelectionChangeDetails };