From 1eb9844ab9fe2dabecb6e049308884e1a21b83b3 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 27 Feb 2026 10:59:13 +0200 Subject: [PATCH 1/2] refactor: split ui5-cb-item and ui5-mcb-item --- packages/main/src/MultiComboBoxItem.ts | 33 +++++++++++++++---- packages/main/src/MultiComboBoxItemGroup.ts | 12 ++++--- packages/main/src/themes/ComboBoxItem.css | 10 +++--- .../main/src/themes/MultiComboBoxItem.css | 12 ++++--- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts index 2f671bc48acf..d6e1f61f04bd 100644 --- a/packages/main/src/MultiComboBoxItem.ts +++ b/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 ListItemBase from "./ListItemBase.js"; import 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,42 @@ 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], + dependencies: [CheckBox], }) @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 diff --git a/packages/main/src/MultiComboBoxItemGroup.ts b/packages/main/src/MultiComboBoxItemGroup.ts index 6de62070b663..b0ca70a205cf 100644 --- a/packages/main/src/MultiComboBoxItemGroup.ts +++ b/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 ui5-mcb-item-group. * @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; } diff --git a/packages/main/src/themes/ComboBoxItem.css b/packages/main/src/themes/ComboBoxItem.css index 0563008e3b8f..a136cc1c21f5 100644 --- a/packages/main/src/themes/ComboBoxItem.css +++ b/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; -} +} \ No newline at end of file diff --git a/packages/main/src/themes/MultiComboBoxItem.css b/packages/main/src/themes/MultiComboBoxItem.css index 7b67954e16cd..6889fe62382f 100644 --- a/packages/main/src/themes/MultiComboBoxItem.css +++ b/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; } From 7ed4ac00ab1b48409bb9221c71a6f55157a9a762 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Fri, 27 Feb 2026 12:27:18 +0200 Subject: [PATCH 2/2] chore: remove deps --- packages/main/src/MultiComboBoxItem.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts index d6e1f61f04bd..c99c6561abfe 100644 --- a/packages/main/src/MultiComboBoxItem.ts +++ b/packages/main/src/MultiComboBoxItem.ts @@ -6,7 +6,7 @@ import { eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js"; import ListItemBase from "./ListItemBase.js"; -import CheckBox from "./CheckBox.js"; +import type CheckBox from "./CheckBox.js"; import type { IMultiComboBoxItem } from "./MultiComboBox.js"; import { ARIA_LABEL_LIST_ITEM_CHECKBOX, @@ -31,7 +31,6 @@ import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInsta tag: "ui5-mcb-item", template: MultiComboBoxItemTemplate, styles: [ListItemBaseCss, MultiComboBoxItemCss], - dependencies: [CheckBox], }) @event("selection-requested", {