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

package/dist/SearchFieldTemplate.js.map

@@ -1 +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,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,YAC/C,eAAK,KAAK,EAAC,0BAA0B,aACnC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM;oBAC/B,8BACC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAC,kBAAkB,EACxB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,YAChC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oCACpC,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,gBACJ,IAAI,CAAC,cAAc,EAC/B,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,GAAI,EAE9B,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,aAAa,CAAC,UAAU,EAC7C,OAAO,EAAE,IAAI,CAAC,sBAAsB,GAC7B,IACH,GACD,CACN,CAAC,CAAC,CAAC,CACH,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,aAAa,CAAC,eAAe,EAC3C,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,eAAe,EAClD,uBAAuB,EAAE,IAAI,CAAC,oCAAoC,GACzD,CACV,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 SearchMode from \"./types/SearchMode.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 default function SearchFieldTemplate(this: SearchField) {\n\treturn (\n\t\tthis.expanded ? (\n\t\t\t<div class=\"ui5-search-field-root\" role=\"search\">\n\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t{this.mode === SearchMode.Scoped &&\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\"\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.scopeOptions.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-label={this.accessibleName}\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\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._translations.searchIcon}\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\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._translations.collapsedSearch}\n\t\t\t\taccessibleName={this._translations.collapsedSearch}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t)\n\t);\n}\n"]}
+{"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,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAClF,eAAK,KAAK,EAAC,0BAA0B,aACnC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM;oBAC/B,8BACC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAC,kBAAkB,EACxB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,YAChC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oCACpC,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,gBACJ,IAAI,CAAC,cAAc,EAC/B,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,GAAI,EAE9B,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,aAAa,CAAC,UAAU,EAC7C,OAAO,EAAE,IAAI,CAAC,sBAAsB,GAC7B,IACH,GACD,CACN,CAAC,CAAC,CAAC,CACH,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,aAAa,CAAC,eAAe,EAC3C,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,eAAe,EAClD,uBAAuB,EAAE,IAAI,CAAC,oCAAoC,GACzD,CACV,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 SearchMode from \"./types/SearchMode.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 default function SearchFieldTemplate(this: SearchField) {\n\treturn (\n\t\tthis.expanded ? (\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.mode === SearchMode.Scoped &&\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\"\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.scopeOptions.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-label={this.accessibleName}\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\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._translations.searchIcon}\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\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._translations.collapsedSearch}\n\t\t\t\taccessibleName={this._translations.collapsedSearch}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\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
+     */
+    headingText: 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.headingText = "";
+        /**
+         * 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.headingText, this.highlightText) : this.headingText;
+    }
+};
+__decorate([
+    property()
+], SearchItem.prototype, "headingText", 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,gBAAW,GAAG,EAAE,CAAC;QAEjB;;;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,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAC5H,CAAC;CACD,CAAA;AAlDA;IADC,QAAQ,EAAE;+CACM;AAOjB;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\theadingText = \"\";\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.headingText, this.highlightText) : this.headingText;\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,39 @@
+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";
+/**
+ * @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,
+        ],
+    })
+], 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;AAE3E;;;;;;;;;GASG;AAQH,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;IAPpB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,MAAM,EAAE;YACP,aAAa,CAAC,MAAM;YACpB,kBAAkB;SAClB;KACD,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\";\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})\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", "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,8BAErC,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\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/SearchPopoverTemplate.d.ts

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

package/dist/SearchPopoverTemplate.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
+import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+export default function SearchPopoverTemplate() {
+    return (_jsx(ResponsivePopover, { hideArrow: true, preventFocusRestore: true, preventInitialFocus: true, placement: PopoverPlacement.Bottom, horizontalAlign: PopoverHorizontalAlign.Start, open: this.open, opener: this, onOpen: this._handleOpen, onClose: this._handleClose, class: "ui5-search-popover", children: this._showIllustration ?
+            _jsx("slot", { name: "illustration" })
+            : (this._showLoading ?
+                _jsx(BusyIndicator, { class: "ui5-search-popover-loading-bi", active: true })
+                : (_jsxs(_Fragment, { children: [this._showHeader &&
+                            (_jsxs("header", { slot: "header", class: "ui5-search-popover-header", children: [_jsx(Title, { size: TitleLevel.H6, children: this.headerText }), _jsx(Text, { class: "ui5-search-popover-subheader", children: _jsx("i", { children: this.subheaderText }) })] })), _jsx("main", { children: _jsx(List, { class: "ui5-search-list", separators: ListSeparator.None, onKeyDown: this._onItemKeydown, onItemClick: this._onItemClick, children: _jsx("slot", {}) }) }), this._showFooter &&
+                            _jsx(Button, { slot: "footer", design: ButtonDesign.Transparent, class: "ui5-search-footer-button", onKeyDown: this._onFooterButtonKeyDown, onClick: this._onFooterButtonClick, children: this.popupActionText })] }))) }));
+}
+//# sourceMappingURL=SearchPopoverTemplate.js.map

package/dist/SearchPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPopoverTemplate.js","sourceRoot":"","sources":["../src/SearchPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAE7E,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,aAAa,MAAM,gDAAgD,CAAC;AAC3E,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,gBAAgB,MAAM,mDAAmD,CAAC;AACjF,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,iBAAiB,IACjB,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,gBAAgB,CAAC,MAAM,EAClC,eAAe,EAAE,sBAAsB,CAAC,KAAK,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,oBAAoB,YAGzB,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxB,eAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,CAAC,CAAC,CACD,IAAI,CAAC,YAAY,CAAC,CAAC;gBAClB,KAAC,aAAa,IAAC,KAAK,EAAC,+BAA+B,EAAC,MAAM,SAAiB;gBAC5E,CAAC,CAAC,CACD,8BACE,IAAI,CAAC,WAAW;4BAChB,CAAC,kBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,2BAA2B,aACvD,KAAC,KAAK,IAAC,IAAI,EAAE,UAAU,CAAC,EAAE,YAAG,IAAI,CAAC,UAAU,GAAS,EACrD,KAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,YAAC,sBAAI,IAAI,CAAC,aAAa,GAAK,GAAO,IACrE,CAAC,EAGX,yBACC,KAAC,IAAI,IACJ,KAAK,EAAC,iBAAiB,EACvB,UAAU,EAAE,aAAa,CAAC,IAAI,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,WAAW,EAAE,IAAI,CAAC,YAAY,YAC9B,gBAAa,GACP,GACD,EAEN,IAAI,CAAC,WAAW;4BAChB,KAAC,MAAM,IACN,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,YAAY,CAAC,WAAW,EAChC,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EACtC,OAAO,EAAE,IAAI,CAAC,oBAAoB,YACjC,IAAI,CAAC,eAAe,GACb,IAER,CACH,CACF,GACiB,CACpB,CAAC;AACH,CAAC","sourcesContent":["import ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport type Search from \"./Search.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport ListSeparator from \"@ui5/webcomponents/dist/types/ListSeparator.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\n\nexport default function SearchPopoverTemplate(this: Search) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement={PopoverPlacement.Bottom}\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\tonOpen={this._handleOpen}\n\t\t\tonClose={this._handleClose}\n\t\t\tclass=\"ui5-search-popover\"\n\t\t>\n\n\t\t\t{this._showIllustration ?\n\t\t\t\t<slot name=\"illustration\"></slot>\n\t\t\t\t: (\n\t\t\t\t\tthis._showLoading ?\n\t\t\t\t\t\t<BusyIndicator class=\"ui5-search-popover-loading-bi\" active></BusyIndicator>\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this._showHeader &&\n\t\t\t\t\t\t\t\t\t(<header slot=\"header\" class=\"ui5-search-popover-header\">\n\t\t\t\t\t\t\t\t\t\t<Title size={TitleLevel.H6}>{this.headerText}</Title>\n\t\t\t\t\t\t\t\t\t\t<Text class=\"ui5-search-popover-subheader\"><i>{this.subheaderText}</i></Text>\n\t\t\t\t\t\t\t\t\t</header>)\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t<main>\n\t\t\t\t\t\t\t\t\t<List\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-search-list\"\n\t\t\t\t\t\t\t\t\t\tseparators={ListSeparator.None}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onItemKeydown}\n\t\t\t\t\t\t\t\t\t\tonItemClick={this._onItemClick}>\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t\t\t</List>\n\t\t\t\t\t\t\t\t</main>\n\n\t\t\t\t\t\t\t\t{this._showFooter &&\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tslot=\"footer\"\n\t\t\t\t\t\t\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-search-footer-button\"\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onFooterButtonKeyDown}\n\t\t\t\t\t\t\t\t\t\tonClick={this._onFooterButtonClick}>\n\t\t\t\t\t\t\t\t\t\t{this.popupActionText}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/SearchTemplate.d.ts

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

package/dist/SearchTemplate.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import SearchPopoverTemplate from "./SearchPopoverTemplate.js";
+export default function SearchTemplate() {
+    return (_jsxs(_Fragment, { children: [SearchFieldTemplate.call(this), SearchPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=SearchTemplate.js.map

package/dist/SearchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTemplate.js","sourceRoot":"","sources":["../src/SearchTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,8BACG,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,IAChC,CACH,CAAC;AACH,CAAC","sourcesContent":["import type Search from \"./Search.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchPopoverTemplate from \"./SearchPopoverTemplate.js\";\n\nexport default function SearchTemplate(this: Search) {\n\treturn (\n\t\t<>\n\t\t\t{ SearchFieldTemplate.call(this) }\n\t\t\t{ SearchPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/ShellBar.d.ts

@@ -9,6 +9,7 @@ import type { ClassMap, AccessibilityAttributes, AriaRole } from "@ui5/webcompon
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import type PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import type ShellBarItem from "./ShellBarItem.js";
+import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js";
 type ShellBarLogoAccessibilityAttributes = {
     role?: Extract<AriaRole, "button" | "link">;
     name?: string;
@@ -62,6 +63,7 @@ interface IShelBarItemInfo extends IShellBarHidableItem {
     order?: number;
     profile?: boolean;
     tooltip?: string;
+    accessibilityAttributes?: ShellBarItemAccessibilityAttributes;
 }
 interface IShellBarContentItem extends IShellBarHidableItem {
     hideOrder: number;
@@ -385,8 +387,11 @@ declare class ShellBar extends UI5Element {
     get contentItemsSorted(): UI5Element[];
     get contentItemsWrappersSorted(): HTMLElement[];
     get autoSearchField(): boolean;
-    get showStartSeparatorInWrapper(): boolean;
-    get showEndSeparatorInWrapper(): boolean;
+    get startContentInfoSorted(): IShellBarContentItem[];
+    get endContentInfoSorted(): IShellBarContentItem[];
+    get showStartSeparator(): boolean;
+    get showEndSeparator(): boolean;
+    shouldIncludeSeparator(itemInfo: IShellBarContentItem | undefined, contentInfo: IShellBarContentItem[]): boolean;
     get classes(): ClassMap;
     get styles(): {
         searchField: {

package/dist/ShellBar.js

@@ -616,6 +616,7 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
                     title: item.title,
                     stableDomRef: item.stableDomRef,
                     tooltip: item.title || item.text,
+                    accessibilityAttributes: item.accessibilityAttributes,
                 };
             }),
             {
@@ -735,29 +736,30 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
         const isEmpty = this.searchField[0]?.value.length === 0;
         return (this.showSearchField || this._autoRestoreSearchField) && !onFocus && isEmpty;
     }
-    get showStartSeparatorInWrapper() {
-        // show separator at the beginning of content if more than one
-        // item is visible, otherwise, the separator is packed with the
-        // first visible item to be calculated with the next overflow action
-        const starContent = this.startContent;
-        const hiddenStartContentItems = this._contentInfo.filter(item => {
-            const isHidden = item.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
-            const isInContent = starContent.find(contentItem => contentItem.slot === item.id);
-            return isHidden && isInContent;
-        }).map(item => item.id);
-        return (starContent.length - hiddenStartContentItems.length) > 0;
-    }
-    get showEndSeparatorInWrapper() {
-        // show separator at the end of content if more than one
-        // item is visible, otherwise, the separator is packed with the
-        // last visible item to be calculated with the next overflow
-        const endContent = this.endContent;
-        const hiddenEndContentItems = this._contentInfo.filter(item => {
-            const isHidden = item.classes.indexOf("ui5-shellbar-hidden-button") !== -1;
-            const isInContent = endContent.find(contentItem => contentItem.slot === item.id);
-            return isHidden && isInContent;
-        }).map(item => item.id);
-        return (endContent.length - hiddenEndContentItems.length) > 0;
+    get startContentInfoSorted() {
+        return this._contentInfo
+            .filter(item => this.startContent.find(contentItem => contentItem.slot === item.id))
+            .sort((a, b) => a.hideOrder - b.hideOrder);
+    }
+    get endContentInfoSorted() {
+        return this._contentInfo
+            .filter(item => this.endContent.find(contentItem => contentItem.slot === item.id))
+            .sort((a, b) => a.hideOrder - b.hideOrder);
+    }
+    get showStartSeparator() {
+        return this.startContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
+    }
+    get showEndSeparator() {
+        return this.endContentInfoSorted.some(item => !item.classes.includes("ui5-shellbar-hidden-button"));
+    }
+    shouldIncludeSeparator(itemInfo, contentInfo) {
+        // once the last item from the start/end content was hidden, the
+        // separator is "packed" with it in order to account for any next measurements
+        if (!itemInfo) {
+            return false;
+        }
+        const lastVisibleItem = contentInfo.at(-1);
+        return lastVisibleItem?.id === itemInfo.id && itemInfo.classes.indexOf("ui5-shellbar-hidden-button") > -1;
     }
     get classes() {
         return {
@@ -861,11 +863,17 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
     get startContent() {
         // all items before the first spacer
         const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
+        if (spacerIndex === -1) {
+            return this.content;
+        }
         return this.content.slice(0, spacerIndex);
     }
     get endContent() {
         // all items after the first spacer
         const spacerIndex = this.content.findIndex(child => child.hasAttribute("ui5-shellbar-spacer"));
+        if (spacerIndex === -1) {
+            return [];
+        }
         return this.content.slice(spacerIndex + 1);
     }
     get _rightChildRole() {