@ui5/webcomponents 0.0.0-fb61e9889 → 0.0.0-fd6264051

package/src/ColorPicker.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -30,7 +31,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {String}
+		 * @type {CSSColor}
 		 * @public
 		 */
 		color: {
@@ -41,7 +42,7 @@ const metadata = {
 		/**
 		 * Defines the HEX code of the currently selected color
 		 * *Note*: If Alpha(transperancy) is set it is not included in this property. Use <code>color</code> property.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		hex: {
@@ -52,7 +53,7 @@ const metadata = {
 
 		/**
 		 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		_mainColor: {
@@ -87,6 +88,20 @@ const metadata = {
 			defaultValue: 0,
 		},
 
+		/**
+		 * @private
+		 */
+		_isSelectedColorChanged: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		 _isHueValueChanged: {
+			type: Boolean,
+		},
+
 		/**
 		 * @private
 		 */
@@ -326,6 +341,8 @@ class ColorPicker extends UI5Element {
 		this.selectedHue = event.target.value;
 		this._hue = this.selectedHue;
 		this._setMainColor(this._hue);
+		// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
+		this._isHueValueChanged = true;
 
 		const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
 
@@ -343,6 +360,10 @@ class ColorPicker extends UI5Element {
 			newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
 		}
 
+		if (newValue === this.hex) {
+			return;
+		}
+
 		this.hex = newValue;
 		if (newValue.length !== 6 || !hexRegex.test(newValue)) {
 			this._wrongHEX = true;
@@ -425,17 +446,26 @@ class ColorPicker extends UI5Element {
 			y: y - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
+		// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
+		this._isSelectedColorChanged = true;
+
 		const tempColor = this._calculateColorFromCoordinates(x, y);
 		if (tempColor) {
 			this._setColor(HSLToRGB(tempColor));
 		}
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._handleHEXChange(event);
+		}
+	}
+
 	_calculateColorFromCoordinates(x, y) {
 		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
 		// and HSL format, the color will be parsed to RGB
 
-		const h = Math.round(this._hue / 4.25), // 0 ≤ H < 360
+		const h = this._hue / 4.25, // 0 ≤ H < 360
 			// 0 ≤ S ≤ 1
 			s = 1 - +(Math.round((y / 256) + "e+2") + "e-2"), // eslint-disable-line
 			// 0 ≤ V ≤ 1
@@ -488,7 +518,15 @@ class ColorPicker extends UI5Element {
 			y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
-		this._hue = this.selectedHue ? this.selectedHue : Math.round(hslColours.h * 4.25);
+		if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
+			this._isSelectedColorChanged = false;
+		} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
+			this._isHueValueChanged = false;
+			this._hue = this.selectedHue ? this.selectedHue : this._hue;
+		} else {
+			this._hue = Math.round(hslColours.h * 4.25);
+		}
+
 		this._setMainColor(this._hue);
 	}
 

package/src/ComboBox.hbs

@@ -14,6 +14,7 @@
 		@change="{{_inputChange}}"
 		@click={{_click}}
 		@keydown="{{_keydown}}"
+		@keyup="{{_keyup}}"
 		@focusin="{{_focusin}}"
 		@focusout="{{_focusout}}"
 		aria-expanded="{{open}}"
@@ -26,6 +27,10 @@
 		data-sap-focus-ref
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}

package/src/ComboBox.js

@@ -1,12 +1,17 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isBackSpace,
@@ -16,6 +21,12 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isTabNext,
+	isTabPrevious,
+	isPageUp,
+	isPageDown,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -39,6 +50,7 @@ import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
@@ -49,6 +61,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 
 /**
  * @public
@@ -198,9 +211,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -211,8 +224,8 @@ const metadata = {
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the combo box
-		 * @type {String}
+		 * Receives id(or many ids) of the elements that label the component
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -322,6 +335,7 @@ const metadata = {
  * The <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
  *
  * It is commonly used to enable users to select an option from a predefined list.
+ *
  * <h3>Structure</h3>
  * The <code>ui5-combobox</code> consists of the following elements:
  * <ul>
@@ -329,15 +343,24 @@ const metadata = {
  * <li> Drop-down arrow - expands\collapses the option list.</li>
  * <li> Option list - the list of available options.</li>
  * </ul>
+ *
  * <h3>Keyboard Handling</h3>
  *
  * The <code>ui5-combobox</code> provides advanced keyboard handling.
- *
- * <h4>Picker</h4>
- * If the <code>ui5-combobox</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
  * <br>
  *
+ * <ul>
+ * <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li>
+ * <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li>
+ * <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li>
+ * <li>[DOWN] - Selects the next matching item in the picker.</li>
+ * <li>[UP] - Selects the previous matching item in the picker.</li>
+ * <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li>
+ * <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li>
+ * <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li>
+ * <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li>
+ * </ul>
+ *
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -367,7 +390,7 @@ class ComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss, SuggestionsCss];
 	}
 
 	static get template() {
@@ -385,7 +408,6 @@ class ComboBox extends UI5Element {
 		this._initialRendering = true;
 		this._itemFocused = false;
 		this._selectionChanged = false;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -399,7 +421,6 @@ class ComboBox extends UI5Element {
 
 		this._selectMatchingItem();
 		this._initialRendering = false;
-		this._isKeyNavigation = false;
 	}
 
 	async onAfterRendering() {
@@ -417,6 +438,15 @@ class ComboBox extends UI5Element {
 
 		this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
 		this.storeResponsivePopoverWidth();
+
+		// Safari is quite slow and does not preserve text highlighting on control rerendering.
+		// That's why we need to restore it "manually".
+		if (isSafari() && this._autocomplete && this.filterValue !== this.value) {
+			this.inner.setSelectionRange(
+				(this._isKeyNavigation ? 0 : this.filterValue.length),
+				this.value.length,
+			);
+		}
 	}
 
 	shouldClosePopover() {
@@ -428,6 +458,8 @@ class ComboBox extends UI5Element {
 
 		this._lastValue = this.value;
 
+		this._autocomplete = false;
+
 		!isPhone() && event.target.setSelectionRange(0, this.value.length);
 	}
 
@@ -441,7 +473,7 @@ class ComboBox extends UI5Element {
 			return;
 		}
 
-		if (!this.shadowRoot.contains(event.relatedTarget)) {
+		if (!this.shadowRoot.contains(event.relatedTarget) && (this.staticAreaItem !== event.relatedTarget)) {
 			this.focused = false;
 			!isPhone() && this._closeRespPopover(event);
 		}
@@ -504,6 +536,8 @@ class ComboBox extends UI5Element {
 	}
 
 	_resetFilter() {
+		this._userTypedValue = null;
+		this.inner.setSelectionRange(0, this.value.length);
 		this._filteredItems = this._filterItems("");
 		this._selectMatchingItem();
 	}
@@ -515,6 +549,10 @@ class ComboBox extends UI5Element {
 		this._toggleRespPopover();
 	}
 
+	_readonlyIconClick() {
+		this.inner.focus();
+	}
+
 	_input(event) {
 		const { value } = event.target;
 
@@ -533,10 +571,11 @@ class ComboBox extends UI5Element {
 		this._clearFocus();
 
 		// autocomplete
-		if (this._autocomplete && value !== "") {
-			const item = this._autoCompleteValue(value);
+		if (this._autocomplete) {
+			const item = this._getFirstMatchingItem(value);
+			this._applyAtomicValueAndSelection(item, value, true);
 
-			if (!this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
+			if (value !== "" && !this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
 				this.fireEvent("selection-change", {
 					item,
 				});
@@ -551,7 +590,7 @@ class ComboBox extends UI5Element {
 			return;
 		}
 
-		if (!this._filteredItems.length) {
+		if (!this._filteredItems.length || value === "") {
 			this._closeRespPopover();
 		} else {
 			this._openRespPopover();
@@ -570,14 +609,12 @@ class ComboBox extends UI5Element {
 		});
 	}
 
-	async handleArrowKeyPress(event) {
-		if (this.readonly || !this._filteredItems.length) {
+	handleNavKeyPress(event) {
+		if (this.focused && (isHome(event) || isEnd(event)) && this.value) {
 			return;
 		}
 
 		const isOpen = this.open;
-		const isArrowDown = isDown(event);
-		const isArrowUp = isUp(event);
 		const currentItem = this._filteredItems.find(item => {
 			return isOpen ? item.focused : item.selected;
 		});
@@ -585,19 +622,17 @@ class ComboBox extends UI5Element {
 
 		event.preventDefault();
 
-		if ((this.focused === true && isArrowUp && isOpen) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+		if (this.focused && isOpen && (isUp(event) || isPageUp(event) || isPageDown(event))) {
 			return;
 		}
 
-		this._isKeyNavigation = true;
-
-		if (isArrowDown) {
-			this._handleArrowDown(event, indexOfItem);
+		if (this._filteredItems.length - 1 === indexOfItem && isDown(event)) {
+			return;
 		}
 
-		if (isArrowUp) {
-			this._handleArrowUp(event, indexOfItem);
-		}
+		this._isKeyNavigation = true;
+
+		this[`_handle${event.key}`](event, indexOfItem);
 	}
 
 	_handleItemNavigation(event, indexOfItem, isForward) {
@@ -614,7 +649,7 @@ class ComboBox extends UI5Element {
 
 		if (isOpen) {
 			this._itemFocused = true;
-			this.value = isGroupItem ? this.filterValue : currentItem.text;
+			this.value = isGroupItem ? "" : currentItem.text;
 			this.focused = false;
 			currentItem.focused = true;
 		} else {
@@ -633,7 +668,8 @@ class ComboBox extends UI5Element {
 		this._announceSelectedItem(indexOfItem);
 
 		// autocomplete
-		const item = this._autoCompleteValue(this.value);
+		const item = this._getFirstMatchingItem(this.value);
+		this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
 
 		if ((item && !item.selected)) {
 			this.fireEvent("selection-change", {
@@ -687,12 +723,59 @@ class ComboBox extends UI5Element {
 		this._handleItemNavigation(event, --indexOfItem, false /* isForward */);
 	}
 
+	_handlePageUp(event, indexOfItem) {
+		const isProposedIndexValid = indexOfItem - ComboBox.SKIP_ITEMS_SIZE > -1;
+		indexOfItem = isProposedIndexValid ? indexOfItem - ComboBox.SKIP_ITEMS_SIZE : 0;
+		const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+
+		if (!isProposedIndexValid && this.hasValueStateText && this.open) {
+			this._clearFocus();
+			this._itemFocused = false;
+			this._isValueStateFocused = true;
+			return;
+		}
+
+		this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+	}
+
+	_handlePageDown(event, indexOfItem) {
+		const itemsLength = this._filteredItems.length;
+		const isProposedIndexValid = indexOfItem + ComboBox.SKIP_ITEMS_SIZE < itemsLength;
+
+		indexOfItem = isProposedIndexValid ? indexOfItem + ComboBox.SKIP_ITEMS_SIZE : itemsLength - 1;
+		const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+
+		this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+	}
+
+	_handleHome(event, indexOfItem) {
+		const shouldMoveForward = this._filteredItems[0].isGroupItem && !this.open;
+
+		if (this.hasValueStateText && this.open) {
+			this._clearFocus();
+			this._itemFocused = false;
+			this._isValueStateFocused = true;
+			return;
+		}
+
+		this._handleItemNavigation(event, indexOfItem = 0, shouldMoveForward);
+	}
+
+	_handleEnd(event, indexOfItem) {
+		this._handleItemNavigation(event, indexOfItem = this._filteredItems.length - 1, true /* isForward */);
+	}
+
+	_keyup(event) {
+		this._userTypedValue = this.value.substring(0, this.inner.selectionStart);
+	}
+
 	_keydown(event) {
-		const isArrowKey = isDown(event) || isUp(event);
+		const isNavKey = isDown(event) || isUp(event) || isPageUp(event) || isPageDown(event) || isHome(event) || isEnd(event);
 		this._autocomplete = !(isBackSpace(event) || isDelete(event));
+		this._isKeyNavigation = false;
 
-		if (isArrowKey) {
-			this.handleArrowKeyPress(event);
+		if (isNavKey && !this.readonly && this._filteredItems.length) {
+			this.handleNavKeyPress(event);
 		}
 
 		if (isEnter(event)) {
@@ -707,6 +790,10 @@ class ComboBox extends UI5Element {
 			this._isValueStateFocused = false;
 		}
 
+		if ((isTabNext(event) || isTabPrevious(event)) && this.open) {
+			this._closeRespPopover();
+		}
+
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 
@@ -721,6 +808,9 @@ class ComboBox extends UI5Element {
 				this._itemFocused = true;
 				selectedItem.focused = true;
 				this.focused = false;
+			} else if (this.open && this._filteredItems.length) {
+				// If no item is selected, select the first one on "Show" (F4, Alt+Up/Down)
+				this._handleItemNavigation(event, 0, true /* isForward */);
 			} else {
 				this.focused = true;
 			}
@@ -775,7 +865,7 @@ class ComboBox extends UI5Element {
 		}
 	}
 
-	_autoCompleteValue(current) {
+	_getFirstMatchingItem(current) {
 		const currentlyFocusedItem = this.items.find(item => item.focused === true);
 
 		if (currentlyFocusedItem && currentlyFocusedItem.isGroupItem) {
@@ -785,24 +875,21 @@ class ComboBox extends UI5Element {
 
 		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem);
 
-		let value;
-		if (matchingItems.length) {
-			value = matchingItems[0] ? matchingItems[0].text : current;
-		} else {
-			value = current;
-		}
-
-		this._applyAtomicValueAndSelection(value, this._isKeyNavigation || matchingItems.length);
-
 		if (matchingItems.length) {
 			return matchingItems[0];
 		}
 	}
 
-	_applyAtomicValueAndSelection(value, highlightValue) {
+	_applyAtomicValueAndSelection(item, filterValue, highlightValue) {
+		if (!item) {
+			return;
+		}
+
+		const value = (item && item.text) || "";
 		this.inner.value = value;
 		if (highlightValue) {
-			this.inner.setSelectionRange(this.filterValue.length, value.length);
+			filterValue = filterValue || "";
+			this.inner.setSelectionRange(filterValue.length, value.length);
 		}
 		this.value = value;
 	}
@@ -872,18 +959,18 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceSelectedItem(indexOfItem) {
-		const itemPositionText = this.i18nBundle.getText(LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
-		const itemSelectionText = this.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+		const itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
 
 		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {
-		return this.i18nBundle.getText(SELECT_OPTIONS);
+		return ComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
 	get inner() {
@@ -922,15 +1009,15 @@ class ComboBox extends UI5Element {
 
 	get valueStateTextMappings() {
 		return {
-			"Success": this.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Error": this.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": this.i18nBundle.getText(VALUE_STATE_WARNING),
-			"Information": this.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
 	get shouldOpenValueStateMessagePopover() {
-		return this.focused && this.hasValueStateText && !this._iconPressed
+		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
 	}
 
@@ -938,6 +1025,24 @@ class ComboBox extends UI5Element {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get open() {
 		return this.responsivePopover ? this.responsivePopover.opened : false;
 	}
@@ -963,11 +1068,16 @@ class ComboBox extends UI5Element {
 			BusyIndicator,
 			Button,
 			StandardListItem,
+			GroupHeaderListItem,
 			Popover,
 			ComboBoxGroupItem,
 		];
 	}
 
+	static async onDefine() {
+		ComboBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	get styles() {
 		return {
 			popoverHeader: {
@@ -982,6 +1092,10 @@ class ComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage-root": true,
@@ -994,6 +1108,8 @@ class ComboBox extends UI5Element {
 	}
 }
 
+ComboBox.SKIP_ITEMS_SIZE = 10;
+
 ComboBox.define();
 
 export default ComboBox;

package/src/ComboBoxPopover.hbs

@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="{{classes.popover}}"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
@@ -55,6 +56,7 @@
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
 			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -100,12 +102,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>