refactor: split ui5-cb-item and ui5-mcb-item

packages/main/src/MultiComboBoxItem.ts

@@ -5,14 +5,15 @@ import {
 	property,
 	eventStrict as event,
 } from "@ui5/webcomponents-base/dist/decorators.js";
-import ComboBoxItem from "./ComboBoxItem.js";
-import CheckBox from "./CheckBox.js";
+import ListItemBase from "./ListItemBase.js";
+import type CheckBox from "./CheckBox.js";
 import type { IMultiComboBoxItem } from "./MultiComboBox.js";
 import {
 	ARIA_LABEL_LIST_ITEM_CHECKBOX,
 } from "./generated/i18n/i18n-defaults.js";
 
-import styles from "./generated/themes/MultiComboBoxItem.css.js";
+import ListItemBaseCss from "./generated/themes/ListItemBase.css.js";
+import MultiComboBoxItemCss from "./generated/themes/MultiComboBoxItem.css.js";
 import MultiComboBoxItemTemplate from "./MultiComboBoxItemTemplate.js";
 import type { SelectionRequestEventDetail } from "./ListItem.js";
 import type { AriaRole } from "@ui5/webcomponents-base";
@@ -22,24 +23,41 @@ import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInsta
  * @class
  * The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.
  * @constructor
- * @extends ComboBoxItem
+ * @extends ListItemBase
  * @implements {IMultiComboBoxItem}
  * @public
  */
 @customElement({
 	tag: "ui5-mcb-item",
 	template: MultiComboBoxItemTemplate,
-	styles: [ComboBoxItem.styles, styles],
-	dependencies: [...ComboBoxItem.dependencies, CheckBox],
+	styles: [ListItemBaseCss, MultiComboBoxItemCss],
 })
 
 @event("selection-requested", {
 	bubbles: true,
 })
-class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
-	eventDetails!: ComboBoxItem["eventDetails"] & {
+class MultiComboBoxItem extends ListItemBase implements IMultiComboBoxItem {
+	eventDetails!: ListItemBase["eventDetails"] & {
 		"selection-requested": SelectionRequestEventDetail,
 	}
+
+	/**
+	 * Defines the text of the component.
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	text?: string;
+
+	/**
+	 * Defines the additional text of the component.
+	 * @default undefined
+	 * @since 1.0.0-rc.11
+	 * @public
+	 */
+	@property()
+	additionalText?: string;
+
 	/**
 	 * Defines the selected state of the component.
 	 * @default false

packages/main/src/MultiComboBoxItemGroup.ts

@@ -6,14 +6,14 @@ import type { IMultiComboBoxItem } from "./MultiComboBox.js";
 import type MultiComboBoxItem from "./MultiComboBoxItem.js";
 import MultiComboBoxItemGroupTemplate from "./MultiComboBoxItemGroupTemplate.js";
 import type ListItemGroupHeader from "./ListItemGroupHeader.js";
-import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
 
 /**
  * @class
  * The `ui5-mcb-item-group` is type of suggestion item,
  * that can be used to split the `ui5-multi-combobox` suggestions into groups.
  * @constructor
- * @extends ComboBoxItemGroup
+ * @extends ListItemGroup
  * @public
  * @implements {IMultiComboBoxItem}
  * @since 2.0.0
@@ -22,8 +22,8 @@ import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
 	tag: "ui5-mcb-item-group",
 	template: MultiComboBoxItemGroupTemplate,
 })
-class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {
-	eventDetails!: ComboBoxItemGroup["eventDetails"];
+class MultiComboBoxItemGroup extends ListItemGroup implements IMultiComboBoxItem {
+	eventDetails!: ListItemGroup["eventDetails"];
 	/**
 	 * Defines the items of the <code>ui5-mcb-item-group</code>.
 	 * @public
@@ -44,6 +44,10 @@ class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBox
 		return true;
 	}
 
+	get _isVisible() {
+		return this.items.some(item => item._isVisible);
+	}
+
 	get selected() {
 		return false;
 	}

packages/main/src/themes/ComboBoxItem.css

@@ -1,18 +1,18 @@
-:host([ui5-cb-item]) {
+:host {
 	height: auto;
 	min-height: var(--_ui5_list_item_base_height);
 }
 
-:host([ui5-cb-item]) .ui5-li-root {
+.ui5-li-root {
 	min-height: var(--_ui5_list_item_base_height);
 }
 
-:host([ui5-cb-item]) .ui5-li-content {
+.ui5-li-content {
 	padding-bottom: .5rem;
 	padding-top: .5rem;
 	box-sizing: border-box;
 }
 
-:host([ui5-cb-item][text][additional-text]) .ui5-li-text-wrapper {
+:host([text][additional-text]) .ui5-li-text-wrapper {
 	gap: 1rem;
-}
+}

packages/main/src/themes/MultiComboBoxItem.css

@@ -1,19 +1,23 @@
-:host([ui5-mcb-item]) {
+:host {
 	height: auto;
 	min-height: var(--_ui5_list_item_base_height);
 }
 
-:host([ui5-mcb-item]) .ui5-li-root {
+.ui5-li-root {
 	padding-inline-start: 0;
 	min-height: var(--_ui5_list_item_base_height);
 }
 
-:host([ui5-mcb-item]) .ui5-li-content {
+.ui5-li-content {
 	padding-bottom: .5rem;
 	padding-top: .5rem;
 	box-sizing: border-box;
 }
 
-:host([ui5-mcb-item]) [ui5-checkbox] {
+:host([text][additional-text]) .ui5-li-text-wrapper {
+	gap: 1rem;
+}
+
+[ui5-checkbox] {
 	overflow: visible;
 }