@ui5/webcomponents-fiori 2.9.0-rc.0 → 2.9.0-rc.2

package/dist/Search.js

@@ -0,0 +1,420 @@
+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;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import SearchPopupMode from "@ui5/webcomponents/dist/types/SearchPopupMode.js";
+import { isUp, isDown, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, isRight, 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, StartsWithPerTerm } from "@ui5/webcomponents/dist/Filters.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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
+ * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search` component
+ * - 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 = class Search extends SearchField {
+    constructor() {
+        super();
+        /**
+         * Defines the visualisation mode of the search component.
+         *
+         * @default "List"
+         * @public
+         */
+        this.popupMode = "List";
+        /**
+         * Defines whether the value will be autcompleted to match an item.
+         * @default false
+         * @public
+         */
+        this.noTypeahead = false;
+        /**
+         * Defines the header text to be placed in the search suggestions popup.
+         * @public
+         */
+        this.headerText = "";
+        /**
+         * Defines the subheader text to be placed in the search suggestions popup.
+         * @public
+         */
+        this.subheaderText = "";
+        /**
+         * Defines whether the popup footer action button is shown.
+         * Note: The footer action button is displayed only when the `popupMode` is set to `List`.
+         * @default false
+         * @public
+         */
+        this.showPopupAction = false;
+        /**
+         * Defines the popup footer action button text.
+         * @public
+         */
+        this.popupActionText = "";
+        /**
+         * Indicates whether the items picker is open.
+         * @public
+         */
+        this.open = false;
+        /**
+         * Defines the inner stored value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @private
+         */
+        this._innerValue = "";
+        // The typed in value.
+        this._typedInValue = "";
+        this._matchedPerTerm = false;
+        this._openPickerOnInput = false;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        const innerInput = this.nativeInput;
+        const autoCompletedChars = innerInput && (innerInput.selectionEnd - innerInput.selectionStart);
+        // 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._deselectItems();
+                item.selected = true;
+            }
+            else {
+                this._typedInValue = this.value;
+            }
+        }
+        else {
+            this._typedInValue = this.value;
+        }
+        this._flattenItems.forEach(item => {
+            item.highlightText = this._typedInValue;
+        });
+        this._shouldAutocomplete = false;
+    }
+    onAfterRendering() {
+        const innerInput = this.nativeInput;
+        if (this._performTextSelection && 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;
+        this.style.setProperty("--search_width", `${this.getBoundingClientRect().width}px`);
+    }
+    _handleTypeAhead(item) {
+        const originalValue = item.headingText || "";
+        let displayValue = originalValue;
+        if (!originalValue.toLowerCase().startsWith(this.value.toLowerCase())) {
+            this._matchedPerTerm = true;
+            displayValue = `${this.value} - ${originalValue}`;
+        }
+        else {
+            this._matchedPerTerm = false;
+        }
+        this._typedInValue = this.value;
+        this._innerValue = displayValue;
+        this._performTextSelection = true;
+        this.value = displayValue;
+    }
+    _startsWithMatchingItems(str) {
+        return StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item)), "headingText");
+    }
+    _startsWithPerTermMatchingItems(str) {
+        return StartsWithPerTerm(str, this._flattenItems.filter(item => !this._isGroupItem(item)), "headingText");
+    }
+    _isGroupItem(item) {
+        return item.hasAttribute("ui5-search-item-group");
+    }
+    _deselectItems() {
+        this._flattenItems.forEach(item => {
+            item.selected = false;
+        });
+    }
+    async _handleDown(e) {
+        if (this.open) {
+            e.preventDefault();
+            await this._handleArrowDown();
+        }
+    }
+    async _handleArrowDown() {
+        const firstListItem = this._getItemsList()?.getSlottedNodes("items")[0];
+        const focusRef = firstListItem && this._isGroupItem(firstListItem) ? firstListItem.getFocusDomRef() : firstListItem;
+        if (this.open) {
+            this._deselectItems();
+            firstListItem && focusRef && this._getItemsList()?._itemNavigation.setCurrentItem(focusRef);
+            this.value = this._typedInValue || this.value;
+            this._innerValue = this.value;
+            // wait item navigation to apply correct tabindex
+            await renderFinished();
+            firstListItem?.focus();
+        }
+    }
+    _handleRight(e) {
+        if (this._matchedPerTerm) {
+            e.preventDefault();
+            this.value = this._typedInValue;
+            this._innerValue = this._typedInValue;
+            this._proposedItem = undefined;
+        }
+    }
+    _handleEnter() {
+        const prevented = !this.fireDecoratorEvent("search", { item: this._proposedItem });
+        if (prevented) {
+            return;
+        }
+        const innerInput = this.nativeInput;
+        if (this._matchedPerTerm) {
+            this.value = this._proposedItem?.headingText || this.value;
+            this._innerValue = this.value;
+            this._typedInValue = this.value;
+            this._matchedPerTerm = false;
+        }
+        innerInput.setSelectionRange(this.value.length, this.value.length);
+        this.open = false;
+        this._openPickerOnInput = true;
+    }
+    _handleSearchEvent() {
+        this.fireDecoratorEvent("search", { item: this._proposedItem });
+    }
+    _handleEscape() {
+        this.value = this._typedInValue || this.value;
+        this._innerValue = this.value;
+        this._openPickerOnInput = true;
+    }
+    _handleInput(e) {
+        super._handleInput(e);
+        if (!this._openPickerOnInput) {
+            return;
+        }
+        this.open = true;
+        this._openPickerOnInput = false;
+    }
+    _onFooterButtonKeyDown(e) {
+        if (isUp(e)) {
+            this._flattenItems[this._flattenItems.length - 1].focus();
+        }
+        if (isTabPrevious(e)) {
+            this._getItemsList().focus();
+        }
+    }
+    _onItemKeydown(e) {
+        const isFirstItem = this._flattenItems[0] === e.target;
+        const isLastItem = this._flattenItems[this._flattenItems.length - 1] === e.target;
+        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) {
+            return;
+        }
+        this.value = item.headingText;
+        this._innerValue = this.value;
+        this._typedInValue = this.value;
+        this.open = false;
+        this._openPickerOnInput = true;
+        this.focus();
+    }
+    _onkeydown(e) {
+        super._onkeydown(e);
+        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 (isRight(e)) {
+            this._handleRight(e);
+        }
+        if (isDown(e)) {
+            this._handleDown(e);
+        }
+        if (isEscape(e)) {
+            this._handleEscape();
+        }
+    }
+    _onfocusin() {
+        super._onfocusin();
+        if (this._openPickerOnInput) {
+            return;
+        }
+        // prevent opening of empty picker on List Mode
+        if (this.popupMode === SearchPopupMode.List && !this.items.length) {
+            return;
+        }
+        this.open = true;
+    }
+    _onfocusout() {
+        super._onfocusout();
+        if (this._matchedPerTerm) {
+            this.value = this._typedInValue;
+            this._innerValue = this._typedInValue;
+        }
+        this._matchedPerTerm = false;
+    }
+    _onFocusOutSearch() {
+        if (!this.matches(":focus-within")) {
+            this.open = false;
+        }
+    }
+    _handleClose() {
+        this.open = false;
+        this.fireDecoratorEvent("close");
+    }
+    _handleOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    _onFooterButtonClick() {
+        this.fireDecoratorEvent("popup-action-press");
+    }
+    _getFirstMatchingItem(current) {
+        if (!this._flattenItems.length || !current) {
+            return;
+        }
+        const startsWithMatches = this._startsWithMatchingItems(current);
+        const partialMatches = this._startsWithPerTermMatchingItems(current);
+        if (!startsWithMatches.length) {
+            return partialMatches[0] ?? undefined;
+        }
+        if (!partialMatches.length) {
+            return startsWithMatches[0];
+        }
+        return this._flattenItems.indexOf(startsWithMatches[0]) <= this._flattenItems.indexOf(partialMatches[0])
+            ? startsWithMatches[0]
+            : partialMatches[0];
+    }
+    _getPicker() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    _getItemsList() {
+        return this._getPicker().querySelector(".ui5-search-list");
+    }
+    _getFooterButton() {
+        return this._getPicker().querySelector(".ui5-search-footer-button");
+    }
+    get _flattenItems() {
+        return this.getSlottedNodes("items").flatMap(item => {
+            return this._isGroupItem(item) ? [item, ...item.items] : [item];
+        });
+    }
+    get nativeInput() {
+        const domRef = this.getDomRef();
+        return domRef ? domRef.querySelector(`input`) : null;
+    }
+    get _showIllustration() {
+        return !!this.illustration && this.popupMode === SearchPopupMode.Illustration;
+    }
+    get _showLoading() {
+        return this.popupMode === SearchPopupMode.Loading;
+    }
+    get _showHeader() {
+        return !!this.headerText;
+    }
+    get _showFooter() {
+        return !!this.showPopupAction && this.popupMode === SearchPopupMode.List;
+    }
+};
+__decorate([
+    property()
+], Search.prototype, "popupMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "noTypeahead", void 0);
+__decorate([
+    property()
+], Search.prototype, "headerText", void 0);
+__decorate([
+    property()
+], Search.prototype, "subheaderText", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "showPopupAction", void 0);
+__decorate([
+    property()
+], Search.prototype, "popupActionText", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], Search.prototype, "items", void 0);
+__decorate([
+    slot()
+], Search.prototype, "illustration", void 0);
+__decorate([
+    property({ type: Boolean })
+], Search.prototype, "open", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Search.prototype, "_innerValue", void 0);
+Search = __decorate([
+    customElement({
+        tag: "ui5-search",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchTemplate,
+        styles: [
+            SearchField.styles,
+            SearchCss,
+        ],
+    })
+    /**
+     * Fired when load more button is pressed.
+     *
+     * @public
+     */
+    ,
+    event("popup-action-press")
+    /**
+     * 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.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchPopupMode from \"@ui5/webcomponents/dist/types/SearchPopupMode.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\tisRight,\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, StartsWithPerTerm } from \"@ui5/webcomponents/dist/Filters.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\n\ninterface ISearchSuggestionItem extends UI5Element {\n\tselected: boolean;\n\theadingText: 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 * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search` component\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 load more button is pressed.\n *\n * @public\n */\n@event(\"popup-action-press\")\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\t/**\n\t * Defines the visualisation mode of the search component.\n\t *\n\t * @default \"List\"\n\t * @public\n\t */\n\t@property()\n\tpopupMode: `${SearchPopupMode}` = \"List\";\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 header text to be placed in the search suggestions popup.\n\t * @public\n\t */\n\t@property()\n\theaderText = \"\";\n\n\t/**\n\t * Defines the subheader text to be placed in the search suggestions popup.\n\t * @public\n\t */\n\t@property()\n\tsubheaderText = \"\";\n\n\t/**\n\t * Defines whether the popup footer action button is shown.\n\t * Note: The footer action button is displayed only when the `popupMode` is set to `List`.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowPopupAction = false;\n\n\t/**\n\t * Defines the popup footer action button text.\n\t * @public\n\t */\n\t@property()\n\tpopupActionText = \"\";\n\n\t/**\n\t * Defines the Search suggestion items.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<SearchItem>;\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!: HTMLElement;\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 = \"\";\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 * Determines whether the picker should open on user input. In some cases we need to close the picker,\n\t * (press on an item, or pressing Esc), but still focus the input. In this case we need to open the picker on input.\n\t * @private\n\t */\n\t_openPickerOnInput?: 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 * True if the first matching item is matched by starts with per term, rather than by starts with.\n\t * @private\n\t */\n\t_matchedPerTerm: boolean;\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\tconstructor() {\n\t\tsuper();\n\n\t\t// The typed in value.\n\t\tthis._typedInValue = \"\";\n\t\tthis._matchedPerTerm = false;\n\t\tthis._openPickerOnInput = false;\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tconst innerInput = this.nativeInput;\n\t\tconst autoCompletedChars = innerInput && (innerInput.selectionEnd! - innerInput.selectionStart!);\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._deselectItems();\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\tthis._typedInValue = this.value;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._typedInValue = this.value;\n\t\t}\n\n\t\tthis._flattenItems.forEach(item => {\n\t\t\t(item as SearchItem).highlightText = this._typedInValue;\n\t\t});\n\n\t\tthis._shouldAutocomplete = false;\n\t}\n\n\tonAfterRendering(): void {\n\t\tconst innerInput = this.nativeInput!;\n\n\t\tif (this._performTextSelection && 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\tthis.style.setProperty(\"--search_width\", `${this.getBoundingClientRect().width}px`);\n\t}\n\n\t_handleTypeAhead(item: ISearchSuggestionItem) {\n\t\tconst originalValue = item.headingText || \"\";\n\t\tlet displayValue = originalValue;\n\n\t\tif (!originalValue.toLowerCase().startsWith(this.value.toLowerCase())) {\n\t\t\tthis._matchedPerTerm = true;\n\t\t\tdisplayValue = `${this.value} - ${originalValue}`;\n\t\t} else {\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tthis._typedInValue = this.value;\n\t\tthis._innerValue = displayValue;\n\t\tthis._performTextSelection = true;\n\t\tthis.value = displayValue;\n\t}\n\n\t_startsWithMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_startsWithPerTermMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWithPerTerm(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_isGroupItem(item: ISearchSuggestionItem) {\n\t\treturn item.hasAttribute(\"ui5-search-item-group\");\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\tasync _handleDown(e: KeyboardEvent) {\n\t\tif (this.open) {\n\t\t\te.preventDefault();\n\t\t\tawait this._handleArrowDown();\n\t\t}\n\t}\n\n\tasync _handleArrowDown() {\n\t\tconst firstListItem = this._getItemsList()?.getSlottedNodes<ISearchSuggestionItem>(\"items\")[0];\n\t\tconst focusRef = firstListItem && this._isGroupItem(firstListItem) ? firstListItem.getFocusDomRef() : firstListItem;\n\n\t\tif (this.open) {\n\t\t\tthis._deselectItems();\n\t\t\tfirstListItem && focusRef && this._getItemsList()?._itemNavigation.setCurrentItem(focusRef);\n\t\t\tthis.value = this._typedInValue || this.value;\n\t\t\tthis._innerValue = this.value;\n\n\t\t\t// wait item navigation to apply correct tabindex\n\t\t\tawait renderFinished();\n\t\t\tfirstListItem?.focus();\n\t\t}\n\t}\n\n\t_handleRight(e: KeyboardEvent) {\n\t\tif (this._matchedPerTerm) {\n\t\t\te.preventDefault();\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t\tthis._proposedItem = undefined;\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\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._proposedItem?.headingText || this.value;\n\t\t\tthis._innerValue = this.value;\n\t\t\tthis._typedInValue = this.value;\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tinnerInput.setSelectionRange(this.value.length, this.value.length);\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\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\n\t\tthis._openPickerOnInput = true;\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tsuper._handleInput(e);\n\n\t\tif (!this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t\tthis._openPickerOnInput = false;\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 isFirstItem = this._flattenItems[0] === e.target;\n\t\tconst isLastItem = this._flattenItems[this._flattenItems.length - 1] === e.target;\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\treturn;\n\t\t}\n\n\t\tthis.value = item.headingText;\n\t\tthis._innerValue = this.value;\n\t\tthis._typedInValue = this.value;\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\n\t\tthis.focus();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\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 (isRight(e)) {\n\t\t\tthis._handleRight(e);\n\t\t}\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\t}\n\n\t_onfocusin() {\n\t\tsuper._onfocusin();\n\n\t\tif (this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\t// prevent opening of empty picker on List Mode\n\t\tif (this.popupMode === SearchPopupMode.List && !this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t}\n\n\t_onfocusout() {\n\t\tsuper._onfocusout();\n\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t}\n\t\tthis._matchedPerTerm = false;\n\t}\n\n\t_onFocusOutSearch() {\n\t\tif (!this.matches(\":focus-within\")) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_handleOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\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\t\tconst partialMatches = this._startsWithPerTermMatchingItems(current);\n\n\t\tif (!startsWithMatches.length) {\n\t\t\treturn partialMatches[0] ?? undefined;\n\t\t}\n\n\t\tif (!partialMatches.length) {\n\t\t\treturn startsWithMatches[0];\n\t\t}\n\n\t\treturn this._flattenItems.indexOf(startsWithMatches[0]) <= this._flattenItems.indexOf(partialMatches[0])\n\t\t\t? startsWithMatches[0]\n\t\t\t: partialMatches[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._getPicker().querySelector(\".ui5-search-footer-button\") as Button;\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 ? domRef.querySelector<HTMLInputElement>(`input`) : null;\n\t}\n\n\tget _showIllustration() {\n\t\treturn !!this.illustration && this.popupMode === SearchPopupMode.Illustration;\n\t}\n\n\tget _showLoading() {\n\t\treturn this.popupMode === SearchPopupMode.Loading;\n\t}\n\n\tget _showHeader() {\n\t\treturn !!this.headerText;\n\t}\n\n\tget _showFooter() {\n\t\treturn !!this.showPopupAction && this.popupMode === SearchPopupMode.List;\n\t}\n}\n\nSearch.define();\n\nexport default Search;\n"]}

package/dist/SearchField.d.ts

@@ -38,7 +38,7 @@ type SearchFieldScopeSelectionChangeDetails = {
  */
 declare class SearchField extends UI5Element {
     eventDetails: {
-        search: void;
+        search: object;
         input: void;
         "scope-change": SearchFieldScopeSelectionChangeDetails;
     };
@@ -107,8 +107,10 @@ declare class SearchField extends UI5Element {
     _onkeydown(e: KeyboardEvent): void;
     _onfocusin(): void;
     _onfocusout(): void;
+    _onFocusOutSearch(): void;
     _handleEnter(): void;
     _handleSearchIconPress(): void;
+    _handleSearchEvent(): void;
     _handleInput(e: InputEvent): void;
     _handleClear(): void;
     _handleScopeChange(e: CustomEvent<SelectChangeEventDetail>): void;

package/dist/SearchField.js

@@ -98,14 +98,15 @@ let SearchField = SearchField_1 = class SearchField extends UI5Element {
     _onfocusout() {
         this.focusedInnerInput = false;
     }
+    _onFocusOutSearch() { }
     _handleEnter() {
         if (this.value.length) {
-            this.fireDecoratorEvent("search");
+            this._handleSearchEvent();
         }
     }
     _handleSearchIconPress() {
         if (this.value.length) {
-            this.fireDecoratorEvent("search");
+            this._handleSearchEvent();
             return;
         }
         if (this.fixed) {
@@ -116,6 +117,9 @@ let SearchField = SearchField_1 = class SearchField extends UI5Element {
             this.focus();
         }, 0);
     }
+    _handleSearchEvent() {
+        this.fireDecoratorEvent("search");
+    }
     _handleInput(e) {
         this.value = e.target.value;
         this.fireDecoratorEvent("input");
@@ -221,6 +225,7 @@ SearchField = SearchField_1 = __decorate([
     ,
     event("search", {
         bubbles: true,
+        cancelable: true,
     })
 ], SearchField);
 SearchField.define();

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../src/SearchField.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchFieldCss from \"./generated/themes/SearchField.css.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type SearchMode from \"./types/SearchMode.js\";\nimport type { IOption, SelectChangeEventDetail } from \"@ui5/webcomponents/dist/Select.js\";\n\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tSEARCH_FIELD_SCOPE_SELECT_LABEL,\n\tSEARCH_FIELD_CLEAR_ICON,\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSEARCH_FIELD_SEARCH_COLLAPSED,\n\tSEARCH_FIELD_SEARCH_EXPANDED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * Interface for components that may be slotted inside a `ui5-search`\n * @public\n */\ninterface ISearchFieldScopeOption extends UI5Element {\n\ttext?: string,\n\tselected: boolean,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchFieldScopeOption | undefined;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-field` is an input field, used for user search.\n *\n * The `ui5-search-field` 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 * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search-field` component\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/fiori/dist/SearchField.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-search-field\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchFieldTemplate,\n\tstyles: [\n\t\tSearchFieldCss,\n\t],\n})\n\n/**\n * Fired when typing in input or clear icon is pressed.\n *\n * @public\n */\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the scope has changed.\n * @public\n * @param {HTMLElement} scope The newly selected scope\n */\n@event(\"scope-change\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user has triggered search with Enter key or Search Button press.\n * @public\n */\n@event(\"search\", {\n\tbubbles: true,\n})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: void,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${SearchMode}` = \"Default\";\n\n\t/**\n\t * Defines whether the clear icon of the search will be shown.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/**\n\t * Defines whether the component is expanded.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * **Note:** The property is updated upon typing.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tplaceholder?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the component scope options.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopeOptions!: Array<ISearchFieldScopeOption>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocusedInnerInput = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_effectiveShowClearIcon = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._effectiveShowClearIcon = (this.showClearIcon && !!this.value);\n\t}\n\n\t_onkeydown(e:KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\treturn this._handleEnter();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focusedInnerInput = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focusedInnerInput = false;\n\t}\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis.fireDecoratorEvent(\"search\");\n\t\t}\n\t}\n\n\t_handleSearchIconPress() {\n\t\tif (this.value.length) {\n\t\t\tthis.fireDecoratorEvent(\"search\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.expanded = !this.expanded;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClear() {\n\t\tthis.value = \"\";\n\t\tthis.fireDecoratorEvent(\"input\");\n\n\t\tthis.focus();\n\t}\n\n\t_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {\n\t\tconst item = e.detail.selectedOption as IOption & { scopeOption: ISearchFieldScopeOption };\n\t\tthis.fireDecoratorEvent(\"scope-change\", {\n\t\t\tscope: item.scopeOption,\n\t\t});\n\t}\n\n\tget _isSearchIcon() {\n\t\treturn this.value.length && this.focusedInnerInput;\n\t}\n\n\tget _searchButtonAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: this.expanded,\n\t\t};\n\t}\n\n\tget _translations() {\n\t\treturn {\n\t\t\tscope: SearchField.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchIcon: this._isSearchIcon ? SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON) : SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_EXPANDED),\n\t\t\tcollapsedSearch: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_COLLAPSED),\n\t\t};\n\t}\n\n\tcaptureRef(ref: HTMLElement & { scopeOption?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.scopeOption = this;\n\t\t}\n\t}\n}\n\nSearchField.define();\n\nexport default SearchField;\n\nexport type { ISearchFieldScopeOption, SearchFieldScopeSelectionChangeDetails };\n"]}
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../src/SearchField.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchFieldCss from \"./generated/themes/SearchField.css.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type SearchMode from \"./types/SearchMode.js\";\nimport type { IOption, SelectChangeEventDetail } from \"@ui5/webcomponents/dist/Select.js\";\n\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tSEARCH_FIELD_SCOPE_SELECT_LABEL,\n\tSEARCH_FIELD_CLEAR_ICON,\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSEARCH_FIELD_SEARCH_COLLAPSED,\n\tSEARCH_FIELD_SEARCH_EXPANDED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * Interface for components that may be slotted inside a `ui5-search`\n * @public\n */\ninterface ISearchFieldScopeOption extends UI5Element {\n\ttext?: string,\n\tselected: boolean,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchFieldScopeOption | undefined;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-field` is an input field, used for user search.\n *\n * The `ui5-search-field` 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 * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search-field` component\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/fiori/dist/SearchField.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-search-field\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchFieldTemplate,\n\tstyles: [\n\t\tSearchFieldCss,\n\t],\n})\n\n/**\n * Fired when typing in input or clear icon is pressed.\n *\n * @public\n */\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the scope has changed.\n * @public\n * @param {HTMLElement} scope The newly selected scope\n */\n@event(\"scope-change\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user has triggered search with Enter key or Search Button press.\n * @public\n */\n@event(\"search\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: object,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${SearchMode}` = \"Default\";\n\n\t/**\n\t * Defines whether the clear icon of the search will be shown.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/**\n\t * Defines whether the component is expanded.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * **Note:** The property is updated upon typing.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tplaceholder?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the component scope options.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopeOptions!: Array<ISearchFieldScopeOption>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocusedInnerInput = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_effectiveShowClearIcon = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._effectiveShowClearIcon = (this.showClearIcon && !!this.value);\n\t}\n\n\t_onkeydown(e:KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\treturn this._handleEnter();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focusedInnerInput = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focusedInnerInput = false;\n\t}\n\n\t_onFocusOutSearch() {}\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t}\n\t}\n\n\t_handleSearchIconPress() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.expanded = !this.expanded;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\");\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClear() {\n\t\tthis.value = \"\";\n\t\tthis.fireDecoratorEvent(\"input\");\n\n\t\tthis.focus();\n\t}\n\n\t_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {\n\t\tconst item = e.detail.selectedOption as IOption & { scopeOption: ISearchFieldScopeOption };\n\t\tthis.fireDecoratorEvent(\"scope-change\", {\n\t\t\tscope: item.scopeOption,\n\t\t});\n\t}\n\n\tget _isSearchIcon() {\n\t\treturn this.value.length && this.focusedInnerInput;\n\t}\n\n\tget _searchButtonAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: this.expanded,\n\t\t};\n\t}\n\n\tget _translations() {\n\t\treturn {\n\t\t\tscope: SearchField.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchIcon: this._isSearchIcon ? SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON) : SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_EXPANDED),\n\t\t\tcollapsedSearch: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_COLLAPSED),\n\t\t};\n\t}\n\n\tcaptureRef(ref: HTMLElement & { scopeOption?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.scopeOption = this;\n\t\t}\n\t}\n}\n\nSearchField.define();\n\nexport default SearchField;\n\nexport type { ISearchFieldScopeOption, SearchFieldScopeSelectionChangeDetails };\n"]}

package/dist/SearchFieldScopeOption.d.ts

@@ -8,6 +8,8 @@ import type { ISearchFieldScopeOption } from "./SearchField.js";
  * @abstract
  * @implements {ISearchFieldScopeOption}
  * @public
+ * @since 2.9.0
+ * @experimental
  */
 declare class SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {
     /**

package/dist/SearchFieldScopeOption.js

@@ -15,6 +15,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @abstract
  * @implements {ISearchFieldScopeOption}
  * @public
+ * @since 2.9.0
+ * @experimental
  */
 let SearchFieldScopeOption = class SearchFieldScopeOption extends UI5Element {
     get stableDomRef() {

package/dist/SearchFieldScopeOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldScopeOption.js","sourceRoot":"","sources":["../src/SearchFieldScopeOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAGpE;;;;;;;;GAQG;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAgB9C,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAZA;IADC,QAAQ,EAAE;oDACE;AAOb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACT;AAdd,sBAAsB;IAD3B,aAAa,CAAC,+BAA+B,CAAC;GACzC,sBAAsB,CAmB3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ISearchFieldScopeOption } from \"./SearchField.js\";\n\n/**\n * @class\n * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchFieldScopeOption}\n * @public\n */\n@customElement(\"ui5-search-field-scope-option\")\nclass SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {\n\t/**\n\t * Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string\n\n\t/**\n\t * Indicates whether the item is selected\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nSearchFieldScopeOption.define();\n\nexport default SearchFieldScopeOption;\n"]}
+{"version":3,"file":"SearchFieldScopeOption.js","sourceRoot":"","sources":["../src/SearchFieldScopeOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAGpE;;;;;;;;;;GAUG;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAgB9C,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAZA;IADC,QAAQ,EAAE;oDACG;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACT;AAdd,sBAAsB;IAD3B,aAAa,CAAC,+BAA+B,CAAC;GACzC,sBAAsB,CAmB3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ISearchFieldScopeOption } from \"./SearchField.js\";\n\n/**\n * @class\n * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchFieldScopeOption}\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement(\"ui5-search-field-scope-option\")\nclass SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {\n\t/**\n\t * Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Indicates whether the item is selected\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nSearchFieldScopeOption.define();\n\nexport default SearchFieldScopeOption;\n"]}

package/dist/SearchFieldTemplate.js

@@ -8,7 +8,7 @@ import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import search from "@ui5/webcomponents-icons/dist/search.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 export default function SearchFieldTemplate() {
-    return (this.expanded ? (_jsx("div", { class: "ui5-search-field-root", role: "search", children: _jsxs("div", { class: "ui5-search-field-content", children: [this.mode === SearchMode.Scoped &&
+    return (this.expanded ? (_jsx("div", { class: "ui5-search-field-root", role: "search", onFocusOut: this._onFocusOutSearch, children: _jsxs("div", { class: "ui5-search-field-content", children: [this.mode === SearchMode.Scoped &&
                     _jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "sapUiSizeCompact", accessibleName: this._translations.scope, tooltip: this._translations.scope, children: this.scopeOptions.map(scopeOption => {
                                     return _jsx(Option, { selected: scopeOption.selected, "data-ui5-stable": scopeOption.stableDomRef, ref: this.captureRef.bind(scopeOption), children: scopeOption.text });
                                 }, this) }), _jsx("div", { class: "ui5-search-field-separator" })] }), _jsx("input", { class: "ui5-search-field-inner-input", role: "searchbox", "aria-label": this.accessibleName, value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown }), this._effectiveShowClearIcon &&