refactor(ui5-option): make options physical elements

packages/main/src/Option.ts

@@ -1,8 +1,9 @@
-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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import type { IOption } from "./Select.js";
+
+import OptionBase from "./OptionBase.js";
+
 /**
  * @class
  *
@@ -14,50 +15,24 @@ import type { IOption } from "./Select.js";
  *
  * `import "@ui5/webcomponents/dist/Option.js";`
  * @constructor
- * @extends UI5Element
- * @implements {IOption}
+ * @extends OptionBase
  * @public
- * @abstract
  */
-@customElement("ui5-option")
-class Option extends UI5Element implements IOption {
-	/**
-	 * Defines the selected state of the component.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	selected!: boolean;
-
-	/**
-	 * Defines the text of the tooltip that would be displayed for the option component.
-	 * @default ""
-	 * @public
-	 * @since 2.0.0
-	 */
-	@property()
-	tooltip!: string;
-
+@customElement({
+	tag: "ui5-option",
+})
+class Option extends OptionBase {
 	/**
 	 * 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
-	 * @public
-	 */
-	@property({ defaultValue: null })
-	icon?: string | null;
-
-	/**
-	 * 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;
+	icon!: string;
 
 	/**
 	 * Defines the additional text displayed at the end of the option element.
@@ -68,15 +43,6 @@ class Option extends UI5Element implements IOption {
 	@property()
 	additionalText!: string;
 
-	/**
-	 * Defines the focused state of the component.
-	 * @default false
-	 * @since 1.0.0-rc.13
-	 * @private
-	 */
-	@property({ type: Boolean })
-	focused!: boolean;
-
 	/**
 	 * Defines the text of the component.
 	 *
@@ -85,10 +51,6 @@ class Option extends UI5Element implements IOption {
 	 */
 	@slot({ type: Node, "default": true, invalidateOnChildChange: true })
 	text!: Array<Node>;
-
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
 }
 
 Option.define();

packages/main/src/OptionBase.hbs

@@ -0,0 +1 @@
+<slot></slot>

packages/main/src/OptionBase.ts

@@ -0,0 +1,75 @@
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+import OptionBaseTemplate from "./generated/templates/OptionBaseTemplate.lit.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The base of the `ui5-option` and `ui5-option-custom` components defines the content of an option in the `ui5-select`.
+ *
+ * ### ES6 Module Import
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+	template: OptionBaseTemplate,
+	renderer: litRender,
+})
+class OptionBase extends UI5Element {
+	/**
+	 * Defines the selected state of the component.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+
+	/**
+	 * Defines the text of the tooltip that would be displayed for the option component.
+	 * @default ""
+	 * @public
+	 * @since 2.0.0
+	 */
+	@property()
+	tooltip!: 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;
+
+	/**
+	 * Defines the focused state of the component.
+	 * @default false
+	 * @since 1.0.0-rc.13
+	 * @private
+	 */
+	@property({ type: Boolean })
+	focused!: boolean;
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+
+	get isCustom() {
+		return false;
+	}
+
+	get effectiveDisplayText() {
+		return this.textContent || "";
+	}
+}
+
+export default OptionBase;

packages/main/src/OptionCustom.ts

@@ -0,0 +1,59 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import OptionBase from "./OptionBase.js";
+import optionCustomCss from "./generated/themes/OptionCustom.css.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 OptionBase
+ * @public
+ */
+@customElement({
+	tag: "ui5-option-custom",
+	styles: [
+		optionCustomCss,
+	],
+})
+class OptionCustom extends OptionBase {
+	/**
+	 * Defines the text, displayed inside the `ui5-select` input filed
+	 * when the option gets selected.
+	 * @default ""
+	 * @public
+	 */
+	@property()
+	displayText!: string;
+
+	/**
+	 * Defines the content of the component.
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	content!: Array<HTMLElement>;
+
+	get isCustom() {
+		return true;
+	}
+
+	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>