ui5-li-group.
+ * @public
+ * @default ""
+ */
+ @property()
+ headerText!: string;
+
+ /**
+ * Defines the accessible name of the header.
+ * @public
+ * @default ""
+ */
+ @property({ type: String })
+ headerAccessibleName!: string;
+
+ /**
+ * Defines the items of the ui5-li-group.
+ * @public
+ */
+ @slot({
+ "default": true,
+ invalidateOnChildChange: true,
+ type: HTMLElement,
+ })
+ items!: ArrayMessageStripDesign.ColorSet1 or MessageStripDesign.ColorSet2 value is set to the design property, default icon will not be presented.
+ *
* @default false
* @public
* @since 1.0.0-rc.15
@@ -158,6 +169,8 @@ class MessageStrip extends UI5Element {
Positive: getTranslation(MESSAGE_STRIP_SUCCESS),
Negative: getTranslation(MESSAGE_STRIP_ERROR),
Warning: getTranslation(MESSAGE_STRIP_WARNING),
+ ColorSet1: getTranslation(MESSAGE_STRIP_CUSTOM),
+ ColorSet2: getTranslation(MESSAGE_STRIP_CUSTOM),
};
}
@@ -189,7 +202,18 @@ class MessageStrip extends UI5Element {
}
get standardIconName() {
- return IconMapping[this.design];
+ switch (this.design) {
+ case MessageStripDesign.Warning:
+ return "alert";
+ case MessageStripDesign.Positive:
+ return "sys-enter-2";
+ case MessageStripDesign.Negative:
+ return "error";
+ case MessageStripDesign.Information:
+ return "information";
+ default:
+ return null;
+ }
}
get designClasses() {
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 588eda20c7c6..5d75d7806829 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -59,7 +59,7 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
import MultiComboBoxItem from "./MultiComboBoxItem.js";
import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.js";
import Tokenizer, { ClipboardDataOperation } from "./Tokenizer.js";
import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";
import Token from "./Token.js";
@@ -194,7 +194,7 @@ type MultiComboboxItemWithSelection = {
Popover,
List,
StandardListItem,
- GroupHeaderListItem,
+ ListItemGroupHeader,
ToggleButton,
Button,
CheckBox,
@@ -271,7 +271,7 @@ class MultiComboBox extends UI5Element {
* @public
*/
@property({ type: Boolean })
- allowCustomValues!: boolean;
+ noValidation!: boolean;
/**
* Defines whether the component is in disabled state.
@@ -499,7 +499,7 @@ class MultiComboBox extends UI5Element {
const target = e.target as Input;
const value = target.value;
- if (!this.allowCustomValues && !this._filterItems(value).length) {
+ if (!this.noValidation && !this._filterItems(value).length) {
this._dialogInputValueState = ValueState.Error;
} else {
this._dialogInputValueState = this.valueState;
@@ -603,7 +603,7 @@ class MultiComboBox extends UI5Element {
this._effectiveValueState = this.valueState;
- if (!filteredItems.length && value && !this.allowCustomValues) {
+ if (!filteredItems.length && value && !this.noValidation) {
const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
input.value = newValue;
@@ -871,7 +871,7 @@ class MultiComboBox extends UI5Element {
this.value = this.valueBeforeAutoComplete;
}
- if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
+ if (!this.noValidation || (!this.open && this.noValidation)) {
this.value = this._lastValue;
}
}
@@ -1084,7 +1084,7 @@ class MultiComboBox extends UI5Element {
async _handleArrowDown() {
const isOpen = this._getRespPopover().open;
- const firstListItem = this.list?.items[0];
+ const firstListItem = this.list?.listItems[0];
if (isOpen) {
firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
@@ -1348,7 +1348,7 @@ class MultiComboBox extends UI5Element {
}
// sync list items and cb items
- this.syncItems((e.target as List).items);
+ this.syncItems((e.target as List).listItems);
// don't call selection change right after selection as user can cancel it on phone
if (!isPhone()) {
@@ -1625,7 +1625,7 @@ class MultiComboBox extends UI5Element {
}
}
- if (!this.allowCustomValues) {
+ if (!this.noValidation) {
this.value = "";
}
@@ -1706,7 +1706,7 @@ class MultiComboBox extends UI5Element {
this._tokenizer.expanded = this.open;
// remove the value if user focus out the input and focus is not going in the popover
- if (!isPhone() && !this.allowCustomValues && !focusIsGoingInPopover) {
+ if (!isPhone() && !this.noValidation && !focusIsGoingInPopover) {
this.value = "";
}
}
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index f99a6f8b007c..30d6d809b9dd 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -71,7 +71,7 @@