refactor(ui5-input): suggestions refactoring (#9092)

BREAKING CHANGE: remove `type`, `description`, `icon`, `iconEnd`, `image` from `ui5-suggestion-item` and introduce `ui5-suggestion-item-custom`

`ui5-suggestion-item`:
- `type` property is removed, use `ui5-suggestion-item-custom` instead.
- `description` property is removed, use `ui5-suggestion-item-custom` instead.
- `icon` property is removed, use `ui5-suggestion-item-custom` instead.
- `iconEnd` property is removed, use `ui5-suggestion-item-custom` instead.
- `image` property is removed, use `ui5-suggestion-item-custom` instead.

`ui5-suggestion-group-item`:
- renamed to `ui5-suggestion-item-group`
- `text` is removed, use `headerText` instead

`ui5-suggestion-item-custom`:
- custom suggestion item with open content similar to `ui5-li-custom`
- to be used for custom scenarios
- to highlight custom items use `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`

All suggestion items are now physical items and can be overstyled.
Grouping now works with via nesting: e.g.

```js
<ui5-input show-suggestions>
  <ui5-suggestion-item-group header-text="Group 1">
    <ui5-suggestion-item text="Group Item 1"></ui5-suggestion-item>
  </ui5-suggestion-item-group>
</ui5-input>
```

Related to #8461, #7890

packages/main/src/InputPopover.hbs

@@ -109,30 +109,9 @@
 		separators="{{suggestionSeparators}}"
 		selection-mode="Single"
 		@mousedown="{{onItemMouseDown}}"
-		@mouseover="{{_handleItemMouseOver}}"
-		@mouseout="{{_handleItemMouseOut}}"
 		@ui5-item-click="{{_handleSuggestionItemPress}}"
 		@ui5-selection-change="{{_handleSelectionChange}}"
 	>
-		{{#each suggestionObjects}}
-			{{#if groupItem}}
-				<ui5-li-group-header data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-group-header>
-			{{else}}
-				<ui5-li-suggestion-item
-					wrapping-type="Normal"
-					image="{{this.image}}"
-					icon="{{this.icon}}"
-					additional-text="{{this.additionalText}}"
-					type="{{this.type}}"
-					additional-text-state="{{this.additionalTextState}}"
-					data-ui5-key="{{key}}"
-				>
-					{{{ this.text }}}
-					{{#if this.description}}
-						<span slot="richDescription">{{{ this.description }}}</span>
-					{{/if}}
-				</ui5-li-suggestion-item>
-			{{/if}}
-		{{/each}}
+		<slot></slot>
 	</ui5-list>
 {{/inline}}

packages/main/src/ListItemGroup.ts

@@ -40,10 +40,10 @@ class ListItemGroup extends UI5Element {
 	/**
 	 * Defines the header text of the <code>ui5-li-group</code>.
 	 * @public
-	 * @default undefined
+	 * @default ""
 	 */
 	@property()
-	headerText?: string;
+	headerText = "";
 
 	/**
 	 * Defines the accessible name of the header.

packages/main/src/MultiInput.ts

@@ -315,6 +315,10 @@ class MultiInput extends Input implements IFormInputElement {
 		if (!insideDOM && !insideShadowDom) {
 			this.tokenizer.expanded = false;
 		}
+
+		if (this.contains(relatedTarget) && relatedTarget.hasAttribute("ui5-token")) {
+			this.focused = false;
+		}
 	}
 
 	/**

packages/main/src/SuggestionItem.hbs

@@ -0,0 +1,14 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{markupText}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}

packages/main/src/SuggestionItem.ts

@@ -1,26 +1,28 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
-import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import SuggestionListItem from "./SuggestionListItem.js";
-import type ListItemType from "./types/ListItemType.js";
-import type { IInputSuggestionItem } from "./Input.js";
+import type { IInputSuggestionItemSelectable } from "./Input.js";
+import ListItemBase from "./ListItemBase.js";
+import SuggestionItemTemplate from "./generated/templates/SuggestionItemTemplate.lit.js";
+
+import styles from "./generated/themes/SuggestionItem.css.js";
 
 /**
  * @class
  * The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.
  * @constructor
- * @extends UI5Element
+ * @extends ListItemBase
  * @abstract
- * @implements { IInputSuggestionItem }
+ * @implements { IInputSuggestionItemSelectable }
  * @public
  */
 @customElement({
 	tag: "ui5-suggestion-item",
-	dependencies: [SuggestionListItem],
+	template: SuggestionItemTemplate,
+	styles: [ListItemBase.styles, styles],
 })
-class SuggestionItem extends UI5Element implements IInputSuggestionItem {
+class SuggestionItem extends ListItemBase implements IInputSuggestionItemSelectable {
 	/**
 	 * Defines the text of the component.
 	 * @default ""
@@ -29,59 +31,6 @@ class SuggestionItem extends UI5Element implements IInputSuggestionItem {
 	@property()
 	text = "";
 
-	/**
-	 * Defines the visual indication and behavior of the item.
-	 * Available options are `Active` (by default), `Inactive` and `Detail`.
-	 *
-	 * **Note:** When set to `Active`, the item will provide visual response upon press and hover,
-	 * while when `Inactive` or `Detail` - will not.
-	 * @default "Active"
-	 * @public
-	 * @since 1.0.0-rc.8
-	*/
-	@property()
-	type: `${ListItemType}` = "Active";
-
-	/**
-	 * Defines the description displayed right under the item text, if such is present.
-	 * @default ""
-	 * @public
-	 */
-	@property()
-	description = "";
-
-	/**
-	 * Defines the `icon` source URI.
-	 *
-	 * **Note:**
-	 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-	 * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-	 * @default undefined
-	 * @public
-	 */
-	@property()
-	icon?: 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`.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	iconEnd = false;
-
-	/**
-	 * Defines the `image` source URI.
-	 *
-	 * **Note:** The `image` would be displayed in the beginning of the item.
-	 * @default undefined
-	 * @public
-	 */
-	@property()
-	image?: string;
-
 	/**
 	 * Defines the `additionalText`, displayed in the end of the item.
 	 * @default ""
@@ -92,16 +41,19 @@ class SuggestionItem extends UI5Element implements IInputSuggestionItem {
 	additionalText = "";
 
 	/**
-	 * Defines the state of the `additionalText`.
-	 * @default "None"
-	 * @since 1.0.0-rc.15
-	 * @public
+	 * Defines the markup text that will be displayed as suggestion.
+	 * Used for highlighting the matching parts of the text.
+	 *
+	 * @since 2.0.0
+	 * @private
 	 */
 	@property()
-	additionalTextState: `${ValueState}` = "None";
+	markupText = "";
 
-	get groupItem() {
-		return false;
+	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
 	}
 }
 

packages/main/src/SuggestionItemCustom.hbs

@@ -0,0 +1,5 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<slot></slot>
+{{/inline}}

packages/main/src/SuggestionItemCustom.ts

@@ -0,0 +1,55 @@
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { IInputSuggestionItemSelectable } from "./Input.js";
+import ListItemBase from "./ListItemBase.js";
+
+// Template
+import SuggestionItemCustomTemplate from "./generated/templates/SuggestionItemCustomTemplate.lit.js";
+
+// styles
+import styles from "./generated/themes/SuggestionItemCustom.css.js";
+
+/**
+ * @class
+ * The `ui5-suggestion-item-custom` is type of suggestion item,
+ * that can be used to place suggestion items with custom content in the input.
+ * The text property is considered only for autocomplete.
+ * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js"
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @public
+ * @implements { IInputSuggestionItemSelectable }
+ * @since 2.0.0
+ */
+@customElement({
+	tag: "ui5-suggestion-item-custom",
+	template: SuggestionItemCustomTemplate,
+	styles: [
+		ListItemBase.styles,
+		styles,
+	],
+})
+class SuggestionItemCustom extends ListItemBase implements IInputSuggestionItemSelectable {
+	/**
+	 * Defines the text of the `ui5-suggestion-item-custom`.
+	 * **Note:** The text property is considered only for autocomplete.
+	 * @default ""
+	 * @public
+	 */
+	@property()
+	text = "";
+
+	/**
+	 * Defines the content of the component.
+	 *
+	 * @public
+	 */
+	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
+	content!: Array<Node>;
+}
+
+SuggestionItemCustom.define();
+
+export default SuggestionItemCustom;

packages/main/src/SuggestionItemGroup.hbs

@@ -0,0 +1 @@
+{{>include "./ListItemGroup.hbs"}}

packages/main/src/SuggestionItemGroup.ts

@@ -0,0 +1,33 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type SuggestionListItem from "./SuggestionListItem.js";
+import ListItemGroup from "./ListItemGroup.js";
+
+/**
+ * @class
+ * The `ui5-suggestion-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-input` suggestions into groups.
+ * @constructor
+ * @extends ListItemGroup
+ * @public
+ * @since 2.0.0
+ */
+@customElement({
+	tag: "ui5-suggestion-item-group",
+})
+class SuggestionItemGroup extends ListItemGroup {
+	/**
+	 * Defines the items of the <code>ui5-suggestion-item-group</code>.
+	 * @public
+	 */
+	@slot({
+		"default": true,
+		invalidateOnChildChange: true,
+		type: HTMLElement,
+	})
+	items!: Array<SuggestionListItem>;
+}
+
+SuggestionItemGroup.define();
+
+export default SuggestionItemGroup;

packages/main/src/bundle.esm.ts

@@ -17,6 +17,7 @@ import actorv3 from "@ui5/webcomponents-icons-tnt/dist/v3/actor.js";
 import icon3d from "@ui5/webcomponents-icons-business-suite/dist/3d.js";
 import icon3dv1 from "@ui5/webcomponents-icons-business-suite/dist/v1/3d.js";
 import icon3dv2 from "@ui5/webcomponents-icons-business-suite/dist/v2/3d.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 
 // The SAP Icons V4 icon collection is set by default in sap_fiori_3,
 // but it's configurable:
@@ -56,6 +57,7 @@ import TableHeaderRow from "./TableHeaderRow.js";
 import TableGrowing from "./TableGrowing.js";
 import Icon from "./Icon.js";
 import Input from "./Input.js";
+import SuggestionItemCustom from "./SuggestionItemCustom.js";
 import MultiInput from "./MultiInput.js";
 import Label from "./Label.js";
 import Link from "./Link.js";
@@ -121,6 +123,7 @@ const icons = [accept, acceptv4, acceptv5, actor, actorv2, actorv3, icon3d, icon
 const testAssets = {
 	...testAssetsCommon,
 	getAcceptIconPathData: getPathData,
+	generateHighlightedMarkup,
 	getExportedIconsValues: () => icons,
 };