@ui5/webcomponents 0.0.0-4821618b2 → 0.0.0-49cef2d02

package/src/Select.js

@@ -12,11 +12,16 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.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 { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -25,7 +30,13 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
+	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -53,7 +64,7 @@ const metadata = {
 	tag: "ui5-select",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Select.prototype */ {
 
 		/**
 		 * Defines the component options.
@@ -64,7 +75,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
-		 * @type {sap.ui.webcomponents.main.ISelectOption[]}
+		 * @type {sap.ui.webc.main.ISelectOption[]}
 		 * @slot options
 		 * @public
 		 */
@@ -102,7 +113,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Select.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Select.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -150,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,9 +183,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @since 1.0.0-rc.9
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -186,12 +197,12 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the select.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -226,7 +237,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	events: /** @lends sap.ui.webc.main.Select.prototype */ {
 		/**
 		 * Fired when the selected option changes.
 		 *
@@ -262,22 +273,14 @@ const metadata = {
  * </ul>
  * <br>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-option</code> that you provide.
- * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code>
+ * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Select
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Select
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-select
  * @appenddocs Option
  * @public
@@ -316,7 +319,8 @@ class Select extends UI5Element {
 		this._selectedIndexBeforeOpen = -1;
 		this._escapePressed = false;
 		this._lastSelectedOption = null;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._typedChars = "";
+		this._typingTimeoutID = -1;
 	}
 
 	onBeforeRendering() {
@@ -332,6 +336,8 @@ class Select extends UI5Element {
 				this._listWidth = this.responsivePopover.offsetWidth;
 			}
 		}
+
+		this._attachRealDomRefs();
 	}
 
 	_onfocusin() {
@@ -340,7 +346,6 @@ class Select extends UI5Element {
 
 	_onfocusout() {
 		this.focused = false;
-		this.itemSelectionAnnounce();
 	}
 
 	get _isPickerOpen() {
@@ -353,13 +358,13 @@ class Select extends UI5Element {
 	}
 
 	/**
-	 * Currently selected option.
+	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type { ui5-option }
+	 * @type {sap.ui.webc.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {
-		return this.options.find(option => option.selected);
+		return this._filteredItems.find(option => option.selected);
 	}
 
 	async _toggleRespPopover() {
@@ -376,15 +381,24 @@ class Select extends UI5Element {
 		}
 	}
 
+	async _attachRealDomRefs() {
+		this.responsivePopover = await this._respPopover();
+
+		this.options.forEach(option => {
+			option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
+		});
+	}
+
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
-		const opts = this.options.map((opt, index) => {
+		const options = this._filteredItems;
+		const syncOpts = options.map((opt, index) => {
 			if (opt.selected || opt.textContent === this.value) {
 				// The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
 				lastSelectedOptionIndex = index;
 			}
-			if (!opt.disabled && (firstEnabledOptionIndex === -1)) {
+			if (firstEnabledOptionIndex === -1) {
 				firstEnabledOptionIndex = index;
 			}
 
@@ -394,36 +408,37 @@ class Select extends UI5Element {
 			return {
 				selected: false,
 				_focused: false,
-				disabled: opt.disabled,
 				icon: opt.icon,
 				value: opt.value,
 				textContent: opt.textContent,
+				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
 		});
 
-		if (lastSelectedOptionIndex > -1 && !opts[lastSelectedOptionIndex].disabled) {
-			opts[lastSelectedOptionIndex].selected = true;
-			opts[lastSelectedOptionIndex]._focused = true;
-			this.options[lastSelectedOptionIndex].selected = true;
-			this.options[lastSelectedOptionIndex]._focused = true;
-			this._text = opts[lastSelectedOptionIndex].textContent;
+		if (lastSelectedOptionIndex > -1 && !syncOpts[lastSelectedOptionIndex].disabled) {
+			syncOpts[lastSelectedOptionIndex].selected = true;
+			syncOpts[lastSelectedOptionIndex]._focused = true;
+			options[lastSelectedOptionIndex].selected = true;
+			options[lastSelectedOptionIndex]._focused = true;
+			this._text = syncOpts[lastSelectedOptionIndex].textContent;
 			this._selectedIndex = lastSelectedOptionIndex;
 		} else {
 			this._text = "";
 			this._selectedIndex = -1;
-			if (opts[firstEnabledOptionIndex]) {
-				opts[firstEnabledOptionIndex].selected = true;
-				opts[firstEnabledOptionIndex]._focused = true;
-				this.options[firstEnabledOptionIndex].selected = true;
-				this.options[firstEnabledOptionIndex]._focused = true;
+			if (syncOpts[firstEnabledOptionIndex]) {
+				syncOpts[firstEnabledOptionIndex].selected = true;
+				syncOpts[firstEnabledOptionIndex]._focused = true;
+				options[firstEnabledOptionIndex].selected = true;
+				options[firstEnabledOptionIndex]._focused = true;
 				this._selectedIndex = firstEnabledOptionIndex;
-				this._text = this.options[firstEnabledOptionIndex].textContent;
+				this._text = options[firstEnabledOptionIndex].textContent;
 			}
 		}
 
-		this._syncedOptions = opts;
+		this._syncedOptions = syncOpts;
 	}
 
 	_enableFormSupport() {
@@ -458,18 +473,68 @@ class Select extends UI5Element {
 			this._handleEndKey(event);
 		} else if (isEnter(event)) {
 			this._handleSelectionChange();
-		} else {
+		} else if (isUp(event) || isDown(event)) {
 			this._handleArrowNavigation(event);
 		}
 	}
 
+	_handleKeyboardNavigation(event) {
+		if (isEnter(event)) {
+			return;
+		}
+
+		const typedCharacter = event.key.toLowerCase();
+
+		this._typedChars += typedCharacter;
+
+		// We check if we have more than one characters and they are all duplicate, we set the
+		// text to be the last input character (typedCharacter). If not, we set the text to be
+		// the whole input string.
+
+		const text = (/^(.)\1+$/i).test(this._typedChars) ? typedCharacter : this._typedChars;
+
+		clearTimeout(this._typingTimeoutID);
+
+		this._typingTimeoutID = setTimeout(() => {
+			this._typedChars = "";
+			this._typingTimeoutID = -1;
+		}, 1000);
+
+		this._selectTypedItem(text);
+	}
+
+	_selectTypedItem(text) {
+		const currentIndex = this._selectedIndex;
+		const itemToSelect = this._searchNextItemByText(text);
+
+		if (itemToSelect) {
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
+
+			this._changeSelectedItem(this._selectedIndex, nextIndex);
+
+			if (currentIndex !== this._selectedIndex) {
+				this.itemSelectionAnnounce();
+			}
+		}
+	}
+
+	_searchNextItemByText(text) {
+		let orderedOptions = this._filteredItems.slice(0);
+		const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
+		const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
+
+		orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected);
+
+		return orderedOptions.find(option => option.textContent.toLowerCase().startsWith(text));
+	}
+
 	_handleHomeKey(event) {
 		event.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, 0);
 	}
 
 	_handleEndKey(event) {
-		const lastIndex = this.options.length - 1;
+		const lastIndex = this._filteredItems.length - 1;
 
 		event.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, lastIndex);
@@ -486,13 +551,13 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
-		this.options[this._selectedIndex].selected = false;
+		this._filteredItems[this._selectedIndex].selected = false;
 		this._selectedIndex = index;
-		this.options[index].selected = true;
+		this._filteredItems[index].selected = true;
 	}
 
 	/**
@@ -500,7 +565,7 @@ class Select extends UI5Element {
 	 * @private
 	 */
 	_handleItemPress(event) {
-		const item = event.detail.item;
+		const item = event.detail.selectedItems[0];
 		const selectedItemIndex = this._getSelectedItemIndex(item);
 
 		this._handleSelectionChange(selectedItemIndex);
@@ -530,39 +595,38 @@ class Select extends UI5Element {
 		let nextIndex = -1;
 		const currentIndex = this._selectedIndex;
 		const isDownKey = isDown(event);
-		const isUpKey = isUp(event);
 
-		if (isDownKey || isUpKey) {
-			event.preventDefault();
-			if (isDownKey) {
-				nextIndex = this._getNextOptionIndex();
-			} else {
-				nextIndex = this._getPreviousOptionIndex();
-			}
+		event.preventDefault();
+		if (isDownKey) {
+			nextIndex = this._getNextOptionIndex();
+		} else {
+			nextIndex = this._getPreviousOptionIndex();
+		}
 
-			this._changeSelectedItem(this._selectedIndex, nextIndex);
+		this._changeSelectedItem(this._selectedIndex, nextIndex);
 
-			if (currentIndex !== this._selectedIndex) {
-				// Announce new item even if picker is opened.
-				// The aria-activedescendents attribute can't be used,
-				// because listitem elements are in different shadow dom
-				this.itemSelectionAnnounce();
-			}
+		if (currentIndex !== this._selectedIndex) {
+			// Announce new item even if picker is opened.
+			// The aria-activedescendents attribute can't be used,
+			// because listitem elements are in different shadow dom
+			this.itemSelectionAnnounce();
 		}
 	}
 
 	_changeSelectedItem(oldIndex, newIndex) {
-		this.options[oldIndex].selected = false;
-		this.options[oldIndex]._focused = false;
+		const options = this._filteredItems;
 
-		this.options[newIndex].selected = true;
-		this.options[newIndex]._focused = true;
+		options[oldIndex].selected = false;
+		options[oldIndex]._focused = false;
+
+		options[newIndex].selected = true;
+		options[newIndex]._focused = true;
 
 		this._selectedIndex = newIndex;
 
 		if (!this._isPickerOpen) {
 			// arrow pressed on closed picker - do selection change
-			this._fireChangeEvent(this.options[newIndex]);
+			this._fireChangeEvent(options[newIndex]);
 		}
 	}
 
@@ -576,7 +640,7 @@ class Select extends UI5Element {
 
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
-		this._lastSelectedOption = this.options[this._selectedIndex];
+		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
 	}
 
 	_afterOpen() {
@@ -591,9 +655,9 @@ class Select extends UI5Element {
 		if (this._escapePressed) {
 			this._select(this._selectedIndexBeforeOpen);
 			this._escapePressed = false;
-		} else if (this._lastSelectedOption !== this.options[this._selectedIndex]) {
-			this._fireChangeEvent(this.options[this._selectedIndex]);
-			this._lastSelectedOption = this.options[this._selectedIndex];
+		} else if (this._lastSelectedOption !== this._filteredItems[this._selectedIndex]) {
+			this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
+			this._lastSelectedOption = this._filteredItems[this._selectedIndex];
 		}
 	}
 
@@ -606,20 +670,43 @@ class Select extends UI5Element {
 	}
 
 	get valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
+		return {
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
 
+	get valueStateTypeMappings() {
 		return {
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
 		};
 	}
 
 	get valueStateText() {
+		let valueStateText;
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			valueStateText = this.valueStateDefaultText;
+		} else {
+			valueStateText = this.valueStateMessageText.map(el => el.textContent).join(" ");
+		}
+
+		return `${this.valueStateTypeText} ${valueStateText}`;
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
+	get valueStateTypeText() {
+		return this.valueStateTypeMappings[this.valueState];
+	}
+
 	get hasValueState() {
 		return this.valueState !== ValueState.None;
 	}
@@ -633,15 +720,15 @@ class Select extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _currentSelectedItem() {
-		return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`);
+		return this.shadowRoot.querySelector(`#${this._filteredItems[this._selectedIndex]._id}-li`);
 	}
 
 	get _currentlySelectedOption() {
-		return this.options[this._selectedIndex];
+		return this._filteredItems[this._selectedIndex];
 	}
 
 	get tabIndex() {
@@ -650,6 +737,20 @@ class Select extends UI5Element {
 		&& this.responsivePopover.opened) ? "-1" : "0";
 	}
 
+	 /**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
@@ -659,17 +760,23 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
+			popover: {
+				"ui5-select-popover-valuestate": this.hasValueState,
+			},
 		};
 	}
 
 	get styles() {
 		return {
 			popoverHeader: {
-				"width": `${this.offsetWidth}px`,
+				"max-width": `${this.offsetWidth}px`,
 			},
 			responsivePopoverHeader: {
-				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
-				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
+				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
+			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
 			},
 		};
 	}
@@ -695,17 +802,27 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}
 
+	get _filteredItems() {
+		return this.options.filter(option => !option.disabled);
+	}
+
 	itemSelectionAnnounce() {
-		const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
+		let text;
+		const optionsCount = this._filteredItems.length;
+		const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
 
 		if (this.focused && this._currentlySelectedOption) {
-			invisibleText.textContent = this._currentlySelectedOption.textContent;
-		} else {
-			invisibleText.textContent = "";
+			text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
+
+			announce(text, "Polite");
 		}
 	}
 
@@ -749,6 +866,10 @@ class Select extends UI5Element {
 			Button,
 		];
 	}
+
+	static async onDefine() {
+		Select.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Select.define();

package/src/SelectPopover.hbs

@@ -2,37 +2,38 @@
 	<ui5-responsive-popover
 		hide-arrow
 		_disable-initial-focus
-		content-only-on-desktop
 		placement-type="Bottom"
+		class="ui5-select-popover {{classes.popover}}"
 		horizontal-align="Left"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
 	>
-		<div slot="header" class="ui5-responsive-popover-header">
-			<div class="row">
-				<span>{{_headerTitleText}}</span>
-				<ui5-button
-					class="ui5-responsive-popover-close-btn"
-					icon="decline"
-					design="Transparent"
-					@click="{{_toggleRespPopover}}"
-				>
-				</ui5-button>
-			</div>
-			{{#if _isPhone}}
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_toggleRespPopover}}"
+					>
+					</ui5-button>
+				</div>
 				{{#if hasValueStateText}}
 					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
 						{{> valueStateMessage}}
 					</div>
 				{{/if}}
-			{{/if}}
-		</div>
-
+			</div>
+		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div class="{{classes.popoverValueState}} ui5-select-value-state-popover-padding" style="{{styles.responsivePopoverHeader}}">
+				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -42,7 +43,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-selection-change="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -50,7 +51,8 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
-					?disabled="{{this.disabled}}"
+					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -66,12 +68,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
+		horizontal-align="Left"
 	>
-		<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>