@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/dist/SearchField.js

@@ -0,0 +1,213 @@
+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 SearchField_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import SearchFieldCss from "./generated/themes/SearchField.css.js";
+import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { SEARCH_FIELD_SCOPE_SELECT_LABEL, SEARCH_FIELD_CLEAR_ICON, SEARCH_FIELD_SEARCH_ICON, SEARCH_FIELD_LABEL, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @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
+ */
+let SearchField = SearchField_1 = class SearchField extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the clear icon of the search will be shown.
+         * @default false
+         * @public
+         */
+        this.showClearIcon = false;
+        /**
+         * Defines whether the component is collapsed.
+         *
+         * @default false
+         * @private
+         */
+        this.collapsed = false;
+        /**
+         * Defines the value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @public
+         */
+        this.value = "";
+        /**
+         * @private
+         */
+        this.focusedInnerInput = false;
+        /**
+         * @private
+         */
+        this._effectiveShowClearIcon = false;
+    }
+    onBeforeRendering() {
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value);
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            return this._handleEnter();
+        }
+    }
+    _onfocusin() {
+        this.focusedInnerInput = true;
+    }
+    _onfocusout() {
+        this.focusedInnerInput = false;
+    }
+    _onFocusOutSearch(e) { } // eslint-disable-line
+    _handleEnter() {
+        if (this.value.length) {
+            this._handleSearchEvent();
+        }
+    }
+    _handleInnerClick() { } // eslint-disable-line
+    _handleSearchIconPress() {
+        this._handleSearchEvent();
+        setTimeout(() => {
+            this.focus();
+        }, 0);
+    }
+    _handleSearchEvent() {
+        this.fireDecoratorEvent("search");
+    }
+    _handleInput(e) {
+        this.value = e.target.value;
+        this.fireDecoratorEvent("input");
+    }
+    _handleClear() {
+        this.value = "";
+        this.fireDecoratorEvent("input");
+        this.focus();
+    }
+    _handleScopeChange(e) {
+        const item = e.detail.selectedOption;
+        this.fireDecoratorEvent("scope-change", {
+            scope: item.scopeOption,
+        });
+    }
+    get _isSearchIcon() {
+        return this.value.length && this.focusedInnerInput;
+    }
+    get _searchButtonAccessibilityAttributes() {
+        return {
+            expanded: !this.collapsed,
+        };
+    }
+    get _translations() {
+        return {
+            scope: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),
+            searchIcon: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),
+            clearIcon: SearchField_1.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),
+            searchFieldAriaLabel: SearchField_1.i18nBundle.getText(SEARCH_FIELD_LABEL),
+        };
+    }
+    get _effectiveIconTooltip() {
+        return this._translations.searchIcon;
+    }
+    captureRef(ref) {
+        if (ref) {
+            ref.scopeOption = this;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "showClearIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "collapsed", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "value", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "accessibleDescription", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
+], SearchField.prototype, "scopes", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "focusedInnerInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], SearchField, "i18nBundle", void 0);
+SearchField = SearchField_1 = __decorate([
+    customElement({
+        tag: "ui5-search-field",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchFieldTemplate,
+        styles: [
+            SearchFieldCss,
+        ],
+    })
+    /**
+     * Fired when typing in input or clear icon is pressed.
+     *
+     * @public
+     */
+    ,
+    event("input", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the scope has changed.
+     * @public
+     * @param {HTMLElement} scope The newly selected scope
+     */
+    ,
+    event("scope-change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user has triggered search with Enter key or Search Button press.
+     * @public
+     */
+    ,
+    event("search", {
+        bubbles: true,
+        cancelable: true,
+    })
+], SearchField);
+SearchField.define();
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

package/dist/SearchField.js.map

@@ -0,0 +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 { 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_LABEL,\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 ISearchScope extends UI5Element {\n\ttext?: string,\n\tselected: boolean,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchScope | 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 *\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 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 collapsed.\n\t *\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = 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 accessible ARIA description of the field.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleDescription?: 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\tscopes!: Array<ISearchScope>;\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(e: FocusEvent) {} // eslint-disable-line\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t}\n\t}\n\n\t_handleInnerClick() {} // eslint-disable-line\n\n\t_handleSearchIconPress() {\n\t\tthis._handleSearchEvent();\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: ISearchScope };\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.collapsed,\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\tsearchIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchFieldAriaLabel: SearchField.i18nBundle.getText(SEARCH_FIELD_LABEL),\n\t\t};\n\t}\n\n\tget _effectiveIconTooltip() {\n\t\treturn this._translations.searchIcon;\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 { ISearchScope, SearchFieldScopeSelectionChangeDetails };\n"]}

package/dist/SearchFieldTemplate.d.ts

@@ -0,0 +1,8 @@
+import type SearchField from "./SearchField.js";
+export type SearchFieldTemplateOptions = {
+    /**
+     * If set to true, the search field will be expanded.
+     */
+    forceExpanded?: boolean;
+};
+export default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SearchFieldTemplate.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Option from "@ui5/webcomponents/dist/Option.js";
+import Select from "@ui5/webcomponents/dist/Select.js";
+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(options) {
+    return (!options?.forceExpanded && this.collapsed ? (_jsx(Button, { class: "ui5-shell-search-field-button", icon: search, design: ButtonDesign.Transparent, "data-sap-focus-ref": true, onClick: this._handleSearchIconPress, tooltip: this._effectiveIconTooltip, accessibleName: this._effectiveIconTooltip, accessibilityAttributes: this._searchButtonAccessibilityAttributes })) : (_jsx("div", { class: "ui5-search-field-root", role: "search", onFocusOut: this._onFocusOutSearch, children: _jsxs("div", { class: "ui5-search-field-content", children: [!!this.scopes.length &&
+                    _jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "sapUiSizeCompact ui5-search-field-select", accessibleName: this._translations.scope, tooltip: this._translations.scope, children: this.scopes.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-description": this.accessibleDescription, "aria-label": this.accessibleName || this._translations.searchFieldAriaLabel, value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onClick: this._handleInnerClick }), this._effectiveShowClearIcon &&
+                    _jsx(Icon, { class: "ui5-shell-search-field-icon", name: decline, showTooltip: true, accessibleName: this._translations.clearIcon, onClick: this._handleClear }), _jsx(Icon, { class: {
+                        "ui5-shell-search-field-icon": true,
+                        "ui5-shell-search-field-search-icon": this._isSearchIcon,
+                    }, name: search, showTooltip: true, accessibleName: this._effectiveIconTooltip, onClick: this._handleSearchIconPress })] }) })));
+}
+//# sourceMappingURL=SearchFieldTemplate.js.map

package/dist/SearchFieldTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFieldTemplate.js","sourceRoot":"","sources":["../src/SearchFieldTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AASzE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAoB,OAAoC;IAClG,OAAO,CACN,CAAC,OAAO,EAAE,aAAa,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAC3C,KAAC,MAAM,IACN,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,YAAY,CAAC,WAAW,8BAEhC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,uBAAuB,EAAE,IAAI,CAAC,oCAAoC,GACzD,CACV,CAAC,CAAC,CAAC,CACH,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAClF,eAAK,KAAK,EAAC,0BAA0B,aACnC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;oBACpB,8BACC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAC,0CAA0C,EAChD,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,YAChC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oCAC9B,OAAO,KAAC,MAAM,IACb,QAAQ,EAAE,WAAW,CAAC,QAAQ,qBACb,WAAW,CAAC,YAAY,EACzC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,YACrC,WAAW,CAAC,IAAI,GAAU,CAAC;gCAC9B,CAAC,EACD,IAAI,CAAC,GACG,EACT,cAAK,KAAK,EAAC,4BAA4B,GAAO,IAC5C,EAGJ,gBACC,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,qBAAqB,gBAChC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,oBAAoB,EAC1E,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,8BAE7B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAAI,EAEnC,IAAI,CAAC,uBAAuB;oBAC5B,KAAC,IAAI,IACJ,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,SAAS,EAC5C,OAAO,EAAE,IAAI,CAAC,YAAY,GACnB,EAGT,KAAC,IAAI,IACJ,KAAK,EAAE;wBACN,6BAA6B,EAAE,IAAI;wBACnC,oCAAoC,EAAE,IAAI,CAAC,aAAa;qBACxD,EACD,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,OAAO,EAAE,IAAI,CAAC,sBAAsB,GAC7B,IACH,GACD,CACN,CACD,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Option from \"@ui5/webcomponents/dist/Option.js\";\nimport Select from \"@ui5/webcomponents/dist/Select.js\";\nimport type SearchField from \"./SearchField.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\n\nexport type SearchFieldTemplateOptions = {\n\t/**\n\t * If set to true, the search field will be expanded.\n\t */\n\tforceExpanded?: boolean;\n};\n\nexport default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions) {\n\treturn (\n\t\t!options?.forceExpanded && this.collapsed ? (\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shell-search-field-button\"\n\t\t\t\ticon={search}\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\ttooltip={this._effectiveIconTooltip}\n\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t) : (\n\t\t\t<div class=\"ui5-search-field-root\" role=\"search\" onFocusOut={this._onFocusOutSearch}>\n\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t{!!this.scopes.length &&\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\tonChange={this._handleScopeChange}\n\t\t\t\t\t\t\t\tclass=\"sapUiSizeCompact ui5-search-field-select\"\n\t\t\t\t\t\t\t\taccessibleName={this._translations.scope}\n\t\t\t\t\t\t\t\ttooltip={this._translations.scope}>\n\t\t\t\t\t\t\t\t{this.scopes.map(scopeOption => {\n\t\t\t\t\t\t\t\t\treturn <Option\n\t\t\t\t\t\t\t\t\t\tselected={scopeOption.selected}\n\t\t\t\t\t\t\t\t\t\tdata-ui5-stable={scopeOption.stableDomRef}\n\t\t\t\t\t\t\t\t\t\tref={this.captureRef.bind(scopeOption)}\n\t\t\t\t\t\t\t\t\t>{scopeOption.text}</Option>;\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tthis)}\n\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"ui5-search-field-inner-input\"\n\t\t\t\t\t\trole=\"searchbox\"\n\t\t\t\t\t\taria-description={this.accessibleDescription}\n\t\t\t\t\t\taria-label={this.accessibleName || this._translations.searchFieldAriaLabel}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\tonClick={this._handleInnerClick} />\n\n\t\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclass=\"ui5-shell-search-field-icon\"\n\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\taccessibleName={this._translations.clearIcon}\n\t\t\t\t\t\t\tonClick={this._handleClear}\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-shell-search-field-icon\": true,\n\t\t\t\t\t\t\t\"ui5-shell-search-field-search-icon\": this._isSearchIcon,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tname={search}\n\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\t\t></Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"]}

package/dist/SearchItem.d.ts

@@ -0,0 +1,52 @@
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-item` is a list item, used for displaying search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchItem.js";`
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class SearchItem extends ListItemBase {
+    eventDetails: ListItemBase["eventDetails"] & {
+        "delete": void;
+    };
+    /**
+     * Defines the heading text of the search item.
+     * @public
+     */
+    text: string;
+    /**
+     * Defines the icon name of the search item.
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines whether the search item is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines the scope of the search item
+     * @default false
+     * @public
+     */
+    scopeName?: string;
+    highlightText: string;
+    _markupText: string;
+    _onfocusin(e: FocusEvent): void;
+    _onfocusout(): void;
+    _onDeleteButtonClick(): void;
+    onBeforeRendering(): void;
+}
+export default SearchItem;

package/dist/SearchItem.js

@@ -0,0 +1,106 @@
+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.js";
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import SearchItemTemplate from "./SearchItemTemplate.js";
+import SearchItemCss from "./generated/themes/SearchItem.css.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-item` is a list item, used for displaying search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchItem.js";`
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+let SearchItem = class SearchItem extends ListItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the heading text of the search item.
+         * @public
+         */
+        this.text = "";
+        /**
+         * Defines the icon name of the search item.
+         * @public
+         */
+        this.icon = "";
+        /**
+         * Defines whether the search item is selected.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        this.highlightText = "";
+        this._markupText = "";
+    }
+    _onfocusin(e) {
+        super._onfocusin(e);
+        this.selected = true;
+    }
+    _onfocusout() {
+        this.selected = false;
+    }
+    _onDeleteButtonClick() {
+        this.fireDecoratorEvent("delete");
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        // bold the matched text
+        this._markupText = this.highlightText ? generateHighlightedMarkup(this.text, this.highlightText) : this.text;
+    }
+};
+__decorate([
+    property()
+], SearchItem.prototype, "text", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchItem.prototype, "selected", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "scopeName", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "highlightText", void 0);
+SearchItem = __decorate([
+    customElement({
+        tag: "ui5-search-item",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchItemTemplate,
+        styles: [
+            ListItemBase.styles,
+            SearchItemCss,
+        ],
+    })
+    /**
+     * Fired when delete button is pressed.
+     *
+     * @public
+     */
+    ,
+    event("delete")
+], SearchItem);
+SearchItem.define();
+export default SearchItem;
+//# sourceMappingURL=SearchItem.js.map

package/dist/SearchItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,yBAAyB,MAAM,gEAAgE,CAAC;AACvG,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAE5E;;;;;;;;;;;;;;;;GAgBG;AAmBH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAArC;;QAIC;;;WAGG;QAEH,SAAI,GAAG,EAAE,CAAC;QAEV;;;WAGG;QAEH,SAAI,GAAG,EAAE,CAAC;QAEV;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAWjB,kBAAa,GAAG,EAAE,CAAC;QAEnB,gBAAW,GAAG,EAAE,CAAC;IAsBlB,CAAC;IApBA,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,wBAAwB;QACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAC9G,CAAC;CACD,CAAA;AAlDA;IADC,QAAQ,EAAE;wCACD;AAOV;IADC,QAAQ,EAAE;wCACD;AAQV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAQjB;IADC,QAAQ,EAAE;6CACQ;AAGnB;IADC,QAAQ,EAAE;iDACQ;AAnCd,UAAU;IAlBf,aAAa,CAAC;QACd,GAAG,EAAE,iBAAiB;QACtB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,aAAa;SACb;KACD,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,QAAQ,CAAC;GAEV,UAAU,CA2Df;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import { property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchItemTemplate from \"./SearchItemTemplate.js\";\nimport SearchItemCss from \"./generated/themes/SearchItem.css.js\";\nimport generateHighlightedMarkup from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-item` is a list item, used for displaying search suggestions\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n *\n * @constructor\n * @extends ListItemBase\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchItemTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tSearchItemCss,\n\t],\n})\n\n/**\n * Fired when delete button is pressed.\n *\n * @public\n */\n@event(\"delete\")\n\nclass SearchItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"delete\": void,\n\t};\n\t/**\n\t * Defines the heading text of the search item.\n\t * @public\n\t */\n\t@property()\n\ttext = \"\";\n\n\t/**\n\t * Defines the icon name of the search item.\n\t * @public\n\t */\n\t@property()\n\ticon = \"\";\n\n\t/**\n\t * Defines whether the search item is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the scope of the search item\n\t * @default false\n\t * @public\n\t */\n\t@property()\n\tscopeName?: string;\n\n\t@property()\n\thighlightText = \"\";\n\n\t_markupText = \"\";\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tthis.selected = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.selected = false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\tonBeforeRendering(): void {\n\t\tsuper.onBeforeRendering();\n\n\t\t// bold the matched text\n\t\tthis._markupText = this.highlightText ? generateHighlightedMarkup(this.text, this.highlightText) : this.text;\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}

package/dist/SearchItemGroup.d.ts

@@ -0,0 +1,17 @@
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import type ListItemGroupHeader from "@ui5/webcomponents/dist/ListItemGroupHeader.js";
+/**
+ * @class
+ * The `ui5-search-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-search-item` suggestions into groups.
+ * @constructor
+ * @extends ListItemGroup
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class SearchItemGroup extends ListItemGroup {
+    get isGroupItem(): boolean;
+    getFocusDomRef(): ListItemGroupHeader;
+}
+export default SearchItemGroup;

package/dist/SearchItemGroup.js

@@ -0,0 +1,41 @@
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import SearchItemGroupCss from "./generated/themes/SearchItemGroup.css.js";
+import ListBoxItemGroupTemplate from "@ui5/webcomponents/dist/ListBoxItemGroupTemplate.js";
+/**
+ * @class
+ * The `ui5-search-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-search-item` suggestions into groups.
+ * @constructor
+ * @extends ListItemGroup
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+let SearchItemGroup = class SearchItemGroup extends ListItemGroup {
+    get isGroupItem() {
+        return true;
+    }
+    getFocusDomRef() {
+        return this.shadowRoot.querySelector("[ui5-li-group-header]");
+    }
+};
+SearchItemGroup = __decorate([
+    customElement({
+        tag: "ui5-search-item-group",
+        styles: [
+            ListItemGroup.styles,
+            SearchItemGroupCss,
+        ],
+        template: ListBoxItemGroupTemplate,
+    })
+], SearchItemGroup);
+SearchItemGroup.define();
+export default SearchItemGroup;
+//# sourceMappingURL=SearchItemGroup.js.map

package/dist/SearchItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchItemGroup.js","sourceRoot":"","sources":["../src/SearchItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAErE,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAC3E,OAAO,wBAAwB,MAAM,qDAAqD,CAAC;AAE3F;;;;;;;;;GASG;AASH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAC1C,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAwB,CAAC;IACvF,CAAC;CACD,CAAA;AARK,eAAe;IARpB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,MAAM,EAAE;YACP,aAAa,CAAC,MAAM;YACpB,kBAAkB;SAClB;QACD,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,eAAe,CAQpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ListItemGroup from \"@ui5/webcomponents/dist/ListItemGroup.js\";\nimport type ListItemGroupHeader from \"@ui5/webcomponents/dist/ListItemGroupHeader.js\";\nimport SearchItemGroupCss from \"./generated/themes/SearchItemGroup.css.js\";\nimport ListBoxItemGroupTemplate from \"@ui5/webcomponents/dist/ListBoxItemGroupTemplate.js\";\n\n/**\n * @class\n * The `ui5-search-item-group` is type of suggestion item,\n * that can be used to split the `ui5-search-item` suggestions into groups.\n * @constructor\n * @extends ListItemGroup\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-item-group\",\n\tstyles: [\n\t\tListItemGroup.styles,\n\t\tSearchItemGroupCss,\n\t],\n\ttemplate: ListBoxItemGroupTemplate,\n})\nclass SearchItemGroup extends ListItemGroup {\n\tget isGroupItem(): boolean {\n\t\treturn true;\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this.shadowRoot!.querySelector(\"[ui5-li-group-header]\") as ListItemGroupHeader;\n\t}\n}\n\nSearchItemGroup.define();\n\nexport default SearchItemGroup;\n"]}

package/dist/SearchItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type SearchItem from "./SearchItem.js";
+export default function SearchFieldTemplate(this: SearchItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SearchItemTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Tag from "@ui5/webcomponents/dist/Tag.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import TagDesign from "@ui5/webcomponents/dist/types/TagDesign.js";
+export default function SearchFieldTemplate() {
+    return (_jsx("li", { part: "native-li", class: "ui5-li-root ui5-li--focusable", "aria-selected": this.selected, role: "option", "data-sap-focus-ref": true, draggable: this.movable, tabindex: this._effectiveTabIndex, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onClick: this._onclick, children: _jsx("div", { part: "content", class: "ui5-search-item-content", children: _jsxs("div", { class: "ui5-search-item-begin-content", children: [this.icon &&
+                        _jsx(Icon, { class: "ui5-search-item-icon", name: this.icon }), this.scopeName &&
+                        _jsx(Tag, { design: TagDesign.Set2, colorScheme: "10", children: this.scopeName }), _jsx("div", { class: "ui5-search-item-titles-container", children: _jsx("span", { part: "title", class: "ui5-search-item-heading", dangerouslySetInnerHTML: { __html: this._markupText } }) }), this.selected &&
+                        _jsx(Button, { class: "ui5-search-item-selected-delete", design: ButtonDesign.Transparent, icon: decline, onClick: this._onDeleteButtonClick })] }) }) }));
+}
+//# sourceMappingURL=SearchItemTemplate.js.map

package/dist/SearchItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchItemTemplate.js","sourceRoot":"","sources":["../src/SearchItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,aACC,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,+BAA+B,mBACtB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,8BAEb,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,YAEtB,cAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,yBAAyB,YAClD,eAAK,KAAK,EAAC,+BAA+B,aACxC,IAAI,CAAC,IAAI;wBACT,KAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAG3D,IAAI,CAAC,SAAS;wBACd,KAAC,GAAG,IAAC,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,WAAW,EAAC,IAAI,YAC3C,IAAI,CAAC,SAAS,GACV,EAGP,cAAK,KAAK,EAAC,kCAAkC,YAC5C,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,yBAAyB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,GAAS,GAC5G,EACL,IAAI,CAAC,QAAQ;wBACb,KAAC,MAAM,IAAC,KAAK,EAAC,iCAAiC,EAAC,MAAM,EAAE,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,oBAAoB,GAAW,IAE1I,GACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport Tag from \"@ui5/webcomponents/dist/Tag.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport TagDesign from \"@ui5/webcomponents/dist/types/TagDesign.js\";\n\nexport default function SearchFieldTemplate(this: SearchItem) {\n\treturn (\n\t\t<li\n\t\t\tpart=\"native-li\"\n\t\t\tclass=\"ui5-li-root ui5-li--focusable\"\n\t\t\taria-selected={this.selected}\n\t\t\trole=\"option\"\n\t\t\tdata-sap-focus-ref\n\t\t\tdraggable={this.movable}\n\t\t\ttabindex={this._effectiveTabIndex}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t<div part=\"content\" class=\"ui5-search-item-content\">\n\t\t\t\t<div class=\"ui5-search-item-begin-content\">\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\t<Icon class=\"ui5-search-item-icon\" name={this.icon}></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.scopeName &&\n\t\t\t\t\t\t<Tag design={TagDesign.Set2} colorScheme=\"10\">\n\t\t\t\t\t\t\t{this.scopeName}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t}\n\n\t\t\t\t\t<div class=\"ui5-search-item-titles-container\">\n\t\t\t\t\t\t<span part=\"title\" class=\"ui5-search-item-heading\" dangerouslySetInnerHTML={{ __html: this._markupText }}></span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.selected &&\n\t\t\t\t\t\t<Button class=\"ui5-search-item-selected-delete\" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li >\n\t);\n}\n"]}

package/dist/SearchMessageArea.d.ts

@@ -0,0 +1,27 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ * `import "@ui5/webcomponents-fiori/dist/SearchMessageArea.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class SearchMessageArea extends UI5Element {
+    /**
+     * Defines the text to be displayed.
+     *
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the description text to be displayed.
+     *
+     * @default undefined
+     * @public
+     */
+    description?: string;
+}
+export default SearchMessageArea;

package/dist/SearchMessageArea.js

@@ -0,0 +1,41 @@
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SearchMessageAreaTemplate from "./SearchMessageAreaTemplate.js";
+import SearchMessageAreaStyles from "./generated/themes/SearchMessageArea.css.js";
+/**
+ * @class
+ * `import "@ui5/webcomponents-fiori/dist/SearchMessageArea.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+let SearchMessageArea = class SearchMessageArea extends UI5Element {
+};
+__decorate([
+    property()
+], SearchMessageArea.prototype, "text", void 0);
+__decorate([
+    property()
+], SearchMessageArea.prototype, "description", void 0);
+SearchMessageArea = __decorate([
+    customElement({
+        tag: "ui5-search-message-area",
+        languageAware: true,
+        styles: SearchMessageAreaStyles,
+        renderer: jsxRenderer,
+        template: SearchMessageAreaTemplate,
+    })
+], SearchMessageArea);
+SearchMessageArea.define();
+export default SearchMessageArea;
+//# sourceMappingURL=SearchMessageArea.js.map

package/dist/SearchMessageArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchMessageArea.js","sourceRoot":"","sources":["../src/SearchMessageArea.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,uBAAuB,MAAM,6CAA6C,CAAC;AAElF;;;;;;;;GAQG;AASH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;CAkBzC,CAAA;AAVA;IADC,QAAQ,EAAE;+CACG;AASd;IADC,QAAQ,EAAE;sDACU;AAjBhB,iBAAiB;IARtB,aAAa,CAAC;QACd,GAAG,EAAE,yBAAyB;QAC9B,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,yBAAyB;KACnC,CAAC;GAEI,iBAAiB,CAkBtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SearchMessageAreaTemplate from \"./SearchMessageAreaTemplate.js\";\nimport SearchMessageAreaStyles from \"./generated/themes/SearchMessageArea.css.js\";\n\n/**\n * @class\n * `import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-message-area\",\n\tlanguageAware: true,\n\tstyles: SearchMessageAreaStyles,\n\trenderer: jsxRenderer,\n\ttemplate: SearchMessageAreaTemplate,\n})\n\nclass SearchMessageArea extends UI5Element {\n\t/**\n\t * Defines the text to be displayed.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the description text to be displayed.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdescription?: string;\n}\n\nSearchMessageArea.define();\n\nexport default SearchMessageArea;\n"]}

package/dist/SearchMessageAreaTemplate.d.ts

@@ -0,0 +1,2 @@
+import type SearchMessageArea from "./SearchMessageArea.js";
+export default function SearchMessageAreaTemplate(this: SearchMessageArea): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SearchMessageAreaTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+export default function SearchMessageAreaTemplate() {
+    return (_jsx(_Fragment, { children: _jsxs("div", { class: "ui5-search-message-area-wrapper", children: [_jsx(Title, { size: TitleLevel.H6, children: this.text }), _jsx(Text, { class: "ui5-search-message-area-description", children: this.description })] }) }));
+}
+//# sourceMappingURL=SearchMessageAreaTemplate.js.map

package/dist/SearchMessageAreaTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchMessageAreaTemplate.js","sourceRoot":"","sources":["../src/SearchMessageAreaTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,4BACC,eAAK,KAAK,EAAC,iCAAiC,aAC3C,KAAC,KAAK,IAAC,IAAI,EAAE,UAAU,CAAC,EAAE,YAAG,IAAI,CAAC,IAAI,GAAS,EAC/C,KAAC,IAAI,IAAC,KAAK,EAAC,qCAAqC,YAAE,IAAI,CAAC,WAAW,GAAQ,IACtE,GACJ,CACH,CAAC;AACH,CAAC","sourcesContent":["import Title from \"@ui5/webcomponents/dist/Title.js\";\nimport type SearchMessageArea from \"./SearchMessageArea.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\n\nexport default function SearchMessageAreaTemplate(this: SearchMessageArea) {\n\treturn (\n\t\t<>\n\t\t\t<div class=\"ui5-search-message-area-wrapper\">\n\t\t\t\t<Title size={TitleLevel.H6}>{this.text}</Title>\n\t\t\t\t<Text class=\"ui5-search-message-area-description\">{this.description}</Text>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}