diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts index 2f671bc48acf..c99c6561abfe 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 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 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; }