refactor(ui5-option): make options physical elements

packages/main/src/ListItemBase.ts

@@ -32,7 +32,7 @@ import draggableElementStyles from "./generated/themes/DraggableElement.css.js";
 @event("_forward-before")
 class ListItemBase extends UI5Element implements ITabbable {
 	/**
-	 * Defines the selected state of the `ListItem`.
+	 * Defines the selected state of the component.
 	 * @default false
 	 * @public
 	 */

packages/main/src/Option.ts

@@ -1,8 +1,16 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import type { IOption } from "./Select.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+import StandardListItem from "./StandardListItem.js";
+import ListItemType from "./types/ListItemType.js";
+import { IButton } from "./Button.js";
+import type { ListItemAccessibilityAttributes as OptionAccessibilityAttributes } from "./ListItem.js";
+import HighlightTypes from "./types/HighlightTypes.js";
+import { IOption } from "./Select.js";
+
 /**
  * @class
  *
@@ -14,80 +22,145 @@ import type { IOption } from "./Select.js";
  *
  * `import "@ui5/webcomponents/dist/Option.js";`
  * @constructor
- * @extends UI5Element
- * @implements {IOption}
+ * @extends StandardListItem
+ * @public
+ */
+@customElement({
+	tag: "ui5-option",
+})
+/**
+ * **Note:** The event is inherited and not supported. If used, it won't take any effect.
  * @public
- * @abstract
+ * @deprecated
  */
-@customElement("ui5-option")
-class Option extends UI5Element implements IOption {
+@event("detail-click")
+class Option extends StandardListItem implements IOption {
 	/**
-	 * Defines the selected state of the component.
-	 * @default false
+	 * Defines the text of the component.
+	 *
+	 * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 	 * @public
 	 */
-	@property({ type: Boolean })
-	selected!: boolean;
+	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
+	text!: Array<Node>;
 
 	/**
-	 * Defines the text of the tooltip that would be displayed for the option component.
+	 * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.
+	 * For more information on HTML Form support, see the `name` property of `ui5-select`.
 	 * @default ""
 	 * @public
-	 * @since 2.0.0
 	 */
 	@property()
-	tooltip!: string;
+	value!: string;
 
 	/**
-	 * 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 null
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default "Active"
 	 * @public
+	 * @deprecated
 	 */
-	@property({ defaultValue: null })
-	icon?: string | null;
+	@property({ type: ListItemType, defaultValue: ListItemType.Active })
+	declare type: `${ListItemType}`;
 
 	/**
-	 * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.
-	 * For more information on HTML Form support, see the `name` property of `ui5-select`.
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default {}
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Object })
+	declare accessibilityAttributes: OptionAccessibilityAttributes;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default false
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	declare navigated: boolean;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default "None"
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: HighlightTypes, defaultValue: HighlightTypes.None })
+	declare highlight: `${HighlightTypes}`;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default "None"
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	declare additionalTextState: `${ValueState}`;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
 	 * @default ""
 	 * @public
+	 * @deprecated
 	 */
 	@property()
-	value!: string;
+	declare description: string;
 
 	/**
-	 * Defines the additional text displayed at the end of the option element.
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default false
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	declare iconEnd: boolean;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
 	 * @default ""
 	 * @public
-	 * @since 1.3.0
+	 * @deprecated
 	 */
 	@property()
-	additionalText!: string;
+	declare image: string;
 
 	/**
-	 * Defines the focused state of the component.
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
 	 * @default false
-	 * @since 1.0.0-rc.13
-	 * @private
+	 * @public
+	 * @deprecated
 	 */
 	@property({ type: Boolean })
-	focused!: boolean;
+	declare movable: boolean;
 
 	/**
-	 * Defines the text of the component.
-	 *
-	 * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default ""
 	 * @public
+	 * @deprecated
 	 */
-	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
-	text!: Array<Node>;
+	@property()
+	declare accessibleName: string;
+
+	/**
+	 * **Note:** The slot is inherited and not supported. If set, it won't take any effect.
+	 * @public
+	 * @deprecated
+	 */
+	@slot()
+	declare deleteButton: Array<IButton>;
+
+	/**
+	 * **Note:** The slot is inherited and not supported. If set, it won't take any effect.
+	 * @public
+	 * @deprecated
+	 */
+	@slot()
+	declare imageContent: Array<HTMLElement>;
 
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	get effectiveDisplayText() {
+		return this.textContent || "";
 	}
 }
 

packages/main/src/OptionCustom.ts

@@ -0,0 +1,145 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import CustomListItem from "./CustomListItem.js";
+import { IButton } from "./Button.js";
+import ListItemType from "./types/ListItemType.js";
+import type { ListItemAccessibilityAttributes as CustomOptionAccessibilityAttributes } from "./ListItem.js";
+import HighlightTypes from "./types/HighlightTypes.js";
+import { IOption } from "./Select.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.
+ * A component to be the same way as the standard `ui5-option`.
+ * The component accepts arbitrary HTML content to allow full customization.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/OptionCustom.js";`
+ * @constructor
+ * @since 2.0.0
+ * @extends CustomListItem
+ * @public
+ */
+@customElement({
+	tag: "ui5-option-custom",
+})
+/**
+ * **Note:** The event is inherited and not supported. If used, it won't take any effect.
+ * @public
+ * @deprecated
+ */
+@event("detail-click")
+class OptionCustom extends CustomListItem implements IOption {
+	/**
+	 * Defines the text, displayed inside the `ui5-select` input filed
+	 * when the option gets selected.
+	 * @default ""
+	 * @public
+	 */
+	@property()
+	displayText!: string;
+
+	/**
+	 * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.
+	 * For more information on HTML Form support, see the `name` property of `ui5-select`.
+	 * @default ""
+	 * @public
+	 */
+	@property()
+	value!: string;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default false
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	declare iconEnd: boolean;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default "Active"
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: ListItemType, defaultValue: ListItemType.Active })
+	declare type: `${ListItemType}`;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default {}
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Object })
+	declare accessibilityAttributes: CustomOptionAccessibilityAttributes;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default false
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	declare navigated: boolean;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default "None"
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: HighlightTypes, defaultValue: HighlightTypes.None })
+	declare highlight: `${HighlightTypes}`;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default false
+	 * @public
+	 * @deprecated
+	 */
+	@property({ type: Boolean })
+	declare movable: boolean;
+
+	/**
+	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * @default ""
+	 * @public
+	 * @deprecated
+	 */
+	@property()
+	declare accessibleName: string;
+
+	/**
+	 * **Note:** The slot is inherited and not supported. If set, it won't take any effect.
+	 * @public
+	 * @deprecated
+	 */
+	@slot()
+	declare deleteButton: Array<IButton>;
+
+	/**
+	 * Defines the text of the component.
+	 *
+	 * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 * @public
+	 */
+	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
+	content!: Array<Node>;
+
+	get effectiveDisplayText() {
+		return this.displayText || this.textContent || "";
+	}
+}
+
+OptionCustom.define();
+
+export default OptionCustom;

packages/main/src/Select.hbs

@@ -31,7 +31,7 @@
 		{{#if hasCustomLabel}}
 			<slot name="label"></slot>
 		{{else}}
-			{{_text}}
+			{{text}}
 		{{/if}}
 	</div>