diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index 7826b36556d6..c734797c4aa5 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -45,6 +45,7 @@ import Popover from "./dist/Popover.js";
import Panel from "./dist/Panel.js";
import RadioButton from "./dist/RadioButton.js";
import ResponsivePopover from "./dist/ResponsivePopover.js";
+import SuggestionItem from "./dist/SuggestionItem.js";
import SegmentedButton from "./dist/SegmentedButton.js";
import Select from "./dist/Select.js";
import Option from "./dist/Option.js";
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 43062c669202..504744bce520 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -51,19 +51,23 @@ const metadata = {
/**
* Defines the ui5-input suggestion items.
*
- * Example:
+ * Example:
+ *
* <ui5-input show-suggestions>
- * <ui5-li>Item #1</ui5-li>
- * <ui5-li>Item #2</ui5-li>
+ * <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>
+ * <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>
* </ui5-input>
- * Item #1Item #2
+ *
+ *
+ *
+ *
+ *
*
* Note: The suggestion would be displayed only if the showSuggestions
* property is set to true.
*
- * Note: The <ui5-li> and <ui5-li-custom> are recommended to be used as suggestion items.
- *
- * In order to use them, you need to import either "@ui5/webcomponents/dist/StandardListItem", or "@ui5/webcomponents/dist/CustomListItem" module.
+ * Note: The <ui5-suggestion-item> is recommended to be used as a suggestion item.
+ * and you need to import the "@ui5/webcomponents/dist/SuggestionItem" module.
*
* @type {HTMLElement[]}
* @slot
@@ -321,6 +325,7 @@ const metadata = {
* @alias sap.ui.webcomponents.main.Input
* @extends sap.ui.webcomponents.base.UI5Element
* @tagname ui5-input
+ * @appenddocs SuggestionItem
* @public
*/
class Input extends UI5Element {
@@ -547,7 +552,7 @@ class Input extends UI5Element {
}
selectSuggestion(item, keyboardUsed) {
- const itemText = item.textContent;
+ const itemText = item.text || item.textContent; // keep textContent for compatibility
const fireInput = keyboardUsed
? this.valueBeforeItemSelection !== itemText : this.value !== itemText;
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index e62a6488b19f..8ac8139169a9 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -35,14 +35,18 @@
{{#each suggestionsTexts}}
- {{ this.text }}
+ {{#if group}}
+ {{ this.text }}
+ {{else}}
+ {{ this.text }}
+ {{/if}}
{{/each}}
diff --git a/packages/main/src/SuggestionItem.js b/packages/main/src/SuggestionItem.js
new file mode 100644
index 000000000000..da3690c84ebe
--- /dev/null
+++ b/packages/main/src/SuggestionItem.js
@@ -0,0 +1,140 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import StandardListItem from "./StandardListItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+ tag: "ui5-suggestion-item",
+ properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+ /**
+ * Defines the text of the ui5-suggestion-item.
+ *
+ * @type {string}
+ * @defaultvalue ""
+ * @public
+ */
+ text: {
+ type: String,
+ },
+
+ /**
+ * Defines the description displayed right under the item text, if such is present.
+ * @type {string}
+ * @defaultvalue: ""
+ * @public
+ */
+ description: {
+ type: String,
+ },
+
+ /**
+ * Defines the icon source URI.
+ *
+ * Note:
+ * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+ * Icon Explorer.
+ *
+ * @type {string}
+ * @public
+ */
+ icon: {
+ type: String,
+ },
+
+ /**
+ * Defines whether the icon should be displayed in the beginning of the item or in the end.
+ *
+ * Note: If image is set, the icon would be displayed after the image.
+ *
+ * @type {boolean}
+ * @defaultvalue false
+ * @public
+ */
+ iconEnd: {
+ type: Boolean,
+ },
+
+ /**
+ * Defines the image source URI.
+ *
+ * Note: The image would be displayed in the beginning of the item.
+ *
+ * @type {string}
+ * @public
+ */
+ image: {
+ type: String,
+ },
+
+ /**
+ * Defines the info, displayed in the end of the item.
+ * @type {string}
+ * @public
+ */
+ info: {
+ type: String,
+ },
+
+ /**
+ * Defines the state of the info.
+ *
+ * Available options are: "None" (by default), "Success", "Warning" and "Erorr".
+ * @type {string}
+ * @public
+ */
+ infoState: {
+ type: ValueState,
+ defaultValue: ValueState.None,
+ },
+
+ /**
+ * Defines the item to be displayed as a group item. When set, the other properties,
+ * such as image, icon, description, etc. will be omitted.
+ * Only the text will be displayed.
+ * @type {string}
+ * @public
+ */
+ group: {
+ type: Boolean,
+ },
+ },
+ slots: {
+ },
+ events: {
+ },
+};
+
+/**
+ * @class
+ * The ui5-suggestion-item represents the suggestion item of the ui5-input.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionItem
+ * @extends UI5Element
+ * @public
+ */
+class SuggestionItem extends UI5Element {
+ static get metadata() {
+ return metadata;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static async onDefine() {
+ await Promise.all([
+ StandardListItem.define(),
+ GroupHeaderListItem.define(),
+ ]);
+ }
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index c217b2af663f..8f743d0d77cb 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -37,12 +37,13 @@ class Suggestions {
const suggestions = [];
inputSuggestionItems.map(suggestion => {
return suggestions.push({
- text: suggestion.textContent,
+ text: suggestion.text || suggestion.textContent, // keep textContent for compatibility
description: suggestion.description || undefined,
image: suggestion.image || undefined,
icon: suggestion.icon || undefined,
info: suggestion.info || undefined,
infoState: suggestion.infoState,
+ group: suggestion.group,
});
});
@@ -290,7 +291,6 @@ Suggestions.SCROLL_STEP = 48;
List.define();
ResponsivePopover.define();
-
// Add suggestions support to the global features registry so that Input.js can use it
registerFeature("InputSuggestions", Suggestions);
diff --git a/packages/main/src/themes/GroupHeaderListItem.css b/packages/main/src/themes/GroupHeaderListItem.css
index 1402983d86d6..76a70e81696c 100644
--- a/packages/main/src/themes/GroupHeaderListItem.css
+++ b/packages/main/src/themes/GroupHeaderListItem.css
@@ -17,4 +17,5 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ font-weight: bold;
}
diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
index 5c5dc3b5e7c0..558213627593 100644
--- a/packages/main/test/pages/Input.html
+++ b/packages/main/test/pages/Input.html
@@ -39,7 +39,19 @@ Input in Compact
- Input with suggestions
+ Input with suggestions: ui5-suggestion-item
+
+
+
+
+
+
+
+
+
+
+
+ suggestion with ui5-li
Cozy
Compact
@@ -162,7 +174,7 @@ Input with multiple icons