@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/TabSeparator.js

@@ -26,7 +26,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TabSeparator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tab-separator
  * @implements sap.ui.webcomponents.main.ITab
  * @public
@@ -58,8 +58,15 @@ class TabSeparator extends UI5Element {
 		return true;
 	}
 
+	/**
+	 * Returns the DOM reference of the separator that is placed in the header.
+	 * <b>Note:</b> Tabs and separators, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return <code>null</code>.
+	 *
+	 * @function
+	 * @public
+	 */
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._getElementInStrip();
 	}
 
 	get stableDomRef() {

package/dist/Table.js

@@ -4,7 +4,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isTabNext,
 	isTabPrevious,
@@ -36,7 +35,7 @@ import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being us
 import {
 	LOAD_MORE_TEXT,
 	ARIA_LABEL_SELECT_ALL_CHECKBOX,
-	TABLE_HEADER_ROW_TEXT,
+	TABLE_HEADER_ROW_INFORMATION,
 	TABLE_ROW_POSITION,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -167,7 +166,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * and the component will fallback to <code>growing="Button"</code>.
-		 * @type {TableGrowingMode}
+		 * @type {sap.ui.webcomponents.main.types.TableGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.12
 		 * @public
@@ -195,7 +194,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -243,7 +242,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>None</code></li>
 		 * <ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -254,7 +253,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -517,7 +516,7 @@ class Table extends UI5Element {
 	onBeforeRendering() {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
-		const rowsCount = this.rows.length;
+		const rowsCount = this.rows.length + 1;
 		const selectedRows = this.selectedRows;
 
 		this.rows.forEach((row, index) => {
@@ -526,7 +525,7 @@ class Table extends UI5Element {
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
-			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 2, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -542,6 +541,11 @@ class Table extends UI5Element {
 		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
 
+		if (this.isMultiSelect) {
+			// we have to count the selection column as well
+			this.visibleColumnsCount += 1;
+		}
+
 		this._allRowsSelected = selectedRows.length === this.rows.length;
 
 		this._prevFocusedRow = this._prevFocusedRow || this.rows[0];
@@ -556,9 +560,7 @@ class Table extends UI5Element {
 	}
 
 	onEnterDOM() {
-		if (!isIE()) {
-			this.growingIntersectionObserver = this.getIntersectionObserver();
-		}
+		this.growingIntersectionObserver = this.getIntersectionObserver();
 
 		ResizeHandler.register(this.getDomRef(), this._handleResize);
 
@@ -568,11 +570,9 @@ class Table extends UI5Element {
 	onExitDOM() {
 		ResizeHandler.deregister(this.getDomRef(), this._handleResize);
 
-		if (!isIE()) {
-			this.growingIntersectionObserver.disconnect();
-			this.growingIntersectionObserver = null;
-			this.tableEndObserved = false;
-		}
+		this.growingIntersectionObserver.disconnect();
+		this.growingIntersectionObserver = null;
+		this.tableEndObserved = false;
 	}
 
 	_onkeydown(event) {
@@ -1068,8 +1068,10 @@ class Table extends UI5Element {
 			this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
 		}
 
+		const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+
 		// invalidate only if hidden columns count has changed
-		if (this._hiddenColumns.length !== hiddenColumns.length) {
+		if (hiddenColumnsChange) {
 			this._hiddenColumns = hiddenColumns;
 			if (hiddenColumns.length) {
 				this.fireEvent("popin-change", {
@@ -1093,6 +1095,7 @@ class Table extends UI5Element {
 				demandPopin: column.demandPopin,
 				text: column.textContent,
 				popinText: column.popinText,
+				popinDisplay: column.popinDisplay,
 				visible: !this._hiddenColumns[index],
 			};
 		}, this);
@@ -1119,16 +1122,11 @@ class Table extends UI5Element {
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.growing === TableGrowingMode.Button || this.growing === TableGrowingMode.Scroll;
-		}
-
 		return this.growing === TableGrowingMode.Button;
 	}
 
 	get growsOnScroll() {
-		return !isIE() && this.growing === TableGrowingMode.Scroll;
+		return this.growing === TableGrowingMode.Scroll;
 	}
 
 	get _growingButtonText() {
@@ -1136,7 +1134,8 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const rowsCount = this.rows.length + 1;
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_INFORMATION, rowsCount);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");
@@ -1165,10 +1164,6 @@ class Table extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE()) {
-			return "absolute";
-		}
-
 		return this._inViewport ? "absolute" : "sticky";
 	}
 

package/dist/TableCell.js

@@ -36,6 +36,14 @@ const metadata = {
 		popined: {
 			type: Boolean,
 		},
+
+		/**
+		 * @private
+		 */
+		 _popinedInline: {
+			type: Boolean,
+		},
+
 	},
 	events: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
 	},

package/dist/TableColumn.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import TableColumnTemplate from "./generated/templates/TableColumnTemplate.lit.js";
+import TableCellPopinDisplay from "./types/TableCellPopinDisplay.js";
 
 // Styles
 import styles from "./generated/themes/TableColumn.css.js";
@@ -31,7 +32,7 @@ const metadata = {
 		 * <br>
 		 * For further responsive design options, see <code>demandPopin</code> property.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue Infinity
 		 * @public
 		 */
@@ -65,6 +66,26 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines how the popin row is displayed.
+		 *
+		 * <br><br>
+		 * <b>The available values are:</b>
+		 *
+		 * <ul>
+		 * <li><code>Block</code></li>
+		 * <li><code>Inline</code></li>
+		 * </ul>
+		 *
+		 * @type {TableCellPopinDisplay}
+		 * @defaultvalue "Block"
+		 * @public
+		 */
+		popinDisplay: {
+			type: TableCellPopinDisplay,
+			defaultValue: TableCellPopinDisplay.Block,
+		},
+
 		/**
 		 * @private
 		 */

package/dist/TableGroupRow.js

@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>MultiSelect</code></li>
 		 * </ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @private
 		 */

package/dist/TableRow.js

@@ -14,7 +14,11 @@ import CheckBox from "./CheckBox.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	ARIA_LABEL_ROW_SELECTION,
+	LIST_ITEM_NOT_SELECTED,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/TableRow.css.js";
@@ -44,7 +48,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
 		/**
 		 * Defines the mode of the row (None, SingleSelect, MultiSelect).
-		 * @type {TableMode}
+		 * @type {sap.ui.webcomponents.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @private
@@ -65,7 +69,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press,
 		 * while with type <code>Inactive</code> - will not.
 		 *
-		 * @type {TableRowType}
+		 * @type {sap.ui.webcomponents.main.types.TableRowType}
 		 * @defaultvalue "Inactive"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -98,7 +102,17 @@ const metadata = {
 		active: {
 			type: Boolean,
 		},
-
+		/**
+		 * Indicates if the table row is navigated.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.9.0
+		 * @public
+		*/
+		navigated: {
+			type: Boolean,
+		},
 		_columnsInfo: {
 			type: Object,
 			multiple: true,
@@ -194,10 +208,12 @@ class TableRow extends UI5Element {
 	constructor() {
 		super();
 
+		const handleToushStartEvent = event => {
+			this.activate();
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				this.activate();
-			},
+			handleEvent: handleToushStartEvent,
 			passive: true,
 		};
 	}
@@ -213,8 +229,11 @@ class TableRow extends UI5Element {
 		const itemSelectable = isSingleSelect || this.isMultiSelect;
 		const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
 		const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
+		const rowElements = Array.from(this.shadowRoot.querySelectorAll("tr") || []);
+		const elements = rowElements.map(getLastTabbableElement);
+		const lastFocusableElement = elements.pop();
 
-		if (isTabNext(event) && activeElement === (getLastTabbableElement(this) || this.root)) {
+		if (isTabNext(event) && activeElement === (lastFocusableElement || this.root)) {
 			this.fireEvent("_forward-after", { target: activeElement });
 		}
 
@@ -305,6 +324,10 @@ class TableRow extends UI5Element {
 		return this.getRootNode().activeElement.hasAttribute(attr);
 	}
 
+	get _ariaCurrent() {
+		return this.navigated ? true : undefined;
+	}
+
 	activate() {
 		if (this.type === TableRowType.Active) {
 			this.active = true;
@@ -342,7 +365,7 @@ class TableRow extends UI5Element {
 		const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : "";
 		this._columnsInfo.forEach((info, index) => {
 			const cell = this.cells[index];
-
+			const popinDisplay = info.popinDisplay === "Inline";
 			if (!cell) {
 				return;
 			}
@@ -350,17 +373,22 @@ class TableRow extends UI5Element {
 			if (info.visible) {
 				this.visibleCells.push(cell);
 				cell.popined = false;
+				cell._popinedInline = false;
 			} else if (info.demandPopin) {
 				const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : "";
 				this.popinCells.push({
 					cell,
 					popinText: info.popinText,
 					classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`,
+					popinDisplayInline: popinDisplay,
 				});
-
 				cell.popined = true;
+				if (info.popinDisplay === "Inline") {
+					cell._popinedInline = true;
+				}
 			} else {
 				cell.popined = false;
+				cell._popinedInline = false;
 			}
 		}, this);
 
@@ -382,11 +410,18 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelText() {
+		const isSelected = this.selected ? TableRow.i18nBundle.getText(LIST_ITEM_SELECTED) : TableRow.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		const isRowSelectable = this.isSingleSelect || this.isMultiSelect;
 		const ariaLabel = this.cells.map((cell, index) => {
 			const columText = this.getColumnTextByIdx(index);
 			const cellText = this.getCellText(cell);
 			return `${columText} ${cellText}`;
 		}).join(" ");
+
+		if (isRowSelectable) {
+			return `${ariaLabel}. ${this._ariaPosition}. ${isSelected}`;
+		}
+
 		return `${ariaLabel}. ${this._ariaPosition}`;
 	}
 

package/dist/TextArea.js

@@ -2,10 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.js";
@@ -19,9 +19,14 @@ import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
 
 import {
+	VALUE_STATE_SUCCESS,
 	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,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -115,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> If <code>maxlength</code> property is set,
 		 * the component turns into "Warning" state once the characters exceeds the limit.
 		 * In this case, only the "Error" state is considered and can be applied.
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.7
 		 * @public
@@ -135,7 +140,7 @@ const metadata = {
 		 * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>
 		 * </ul>
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -147,7 +152,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of characters that the <code>value</code> can have.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue null
 		 * @public
 		 */
@@ -176,7 +181,6 @@ const metadata = {
 		/**
 		 * Enables the component to automatically grow and shrink dynamically with its content.
 		 * <br><br>
-		 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -188,7 +192,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of lines that the component can grow.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -218,7 +222,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -406,12 +410,7 @@ class TextArea extends UI5Element {
 		this._mirrorText = this._tokenizeText(this.value);
 
 		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
-
-		if (this.growingMaxLines) {
-			// this should be complex calc between line height and paddings - TODO: make it stable
-			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
-		}
-
+		this._setCSSParams();
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -421,6 +420,14 @@ class TextArea extends UI5Element {
 	}
 
 	onAfterRendering() {
+		const nativeTextArea = this.getInputDomRef();
+
+		if (this.rows === 1) {
+			nativeTextArea.setAttribute("rows", 1);
+		} else {
+			nativeTextArea.removeAttribute("rows");
+		}
+
 		this.toggleValueStateMessage(this.openValueStateMsgPopover);
 		this._firstRendering = false;
 	}
@@ -467,20 +474,11 @@ class TextArea extends UI5Element {
 	_oninput(event) {
 		const nativeTextArea = this.getInputDomRef();
 
-		/* skip calling change event when an textarea with a placeholder is focused on IE
-			- value of the host and the internal textarea should be different in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (nativeTextArea.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 		if (event.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
 
-		if (skipFiring) {
-			return;
-		}
-
 		this.value = nativeTextArea.value;
 		this.fireEvent("input", {});
 
@@ -494,6 +492,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	_setCSSParams() {
+		this.style.setProperty("--_textarea_rows", this.rows || "2");
+		this.style.setProperty("--_textarea_growing_max_lines", this.growingMaxLines);
+	}
+
 	toggleValueStateMessage(toggle) {
 		if (toggle) {
 			this.openPopover();
@@ -504,7 +507,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-root .ui5-textarea-wrapper"));
 	}
 
 	async closePopover() {
@@ -544,9 +547,9 @@ class TextArea extends UI5Element {
 			leftCharactersCount;
 
 		if (this.showExceededText) {
-			const maxLength = this.maxlength || 0;
+			const maxLength = this.maxlength;
 
-			if (maxLength) {
+			if (maxLength !== null) {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
@@ -566,30 +569,20 @@ class TextArea extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-textarea-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 		};
 	}
 
 	get styles() {
-		const lineHeight = 1.4 * 16;
-		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
-
 		return {
-			mirror: {
-				"max-height": this._maxHeight,
-			},
-			main: {
-				width: "100%",
-				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
-			},
-			focusDiv: {
-				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
-				"max-height": (this._maxHeight),
-			},
 			valueStateMsgPopover: {
 				"max-width": `${this._width}px`,
 			},
@@ -601,7 +594,7 @@ class TextArea extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this);
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 
 		if (this.showExceededText) {
 			if (effectiveAriaLabelText) {
@@ -624,10 +617,14 @@ class TextArea extends UI5Element {
 		}
 
 		if (this.hasCustomValueState) {
-			return this.valueStateMessageText.map(el => el.textContent).join(" ");
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 		}
 
-		return this.valueStateText;
+		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+	}
+
+	get valueStateDefaultText() {
+		return this.valueStateTextMappings[this.valueState];
 	}
 
 	get ariaInvalid() {
@@ -639,7 +636,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState);
 	}
 
 	get hasCustomValueState() {
@@ -654,14 +651,6 @@ class TextArea extends UI5Element {
 		return this.valueStateMessage.map(x => x.cloneNode(true));
 	}
 
-	get valueStateText() {
-		if (this.valueState !== ValueState.Error && this.exceeding) {
-			return this.valueStateTextMappings()[ValueState.Warning];
-		}
-
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
 	get _valueStatePopoverHorizontalAlign() {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
@@ -680,14 +669,24 @@ class TextArea extends UI5Element {
 		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 	}
 
-	valueStateTextMappings() {
+	get valueStateTextMappings() {
 		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS),
 			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
 			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	static get dependencies() {
 		return [Popover, Icon];
 	}

package/dist/TimePicker.js

@@ -11,7 +11,6 @@ import {
  */
 const metadata = {
 	tag: "ui5-time-picker",
-	altTag: "ui5-timepicker",
 	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
@@ -108,7 +107,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TimePicker
- * @extends TimePickerBase
+ * @extends sap.ui.webcomponents.main.TimePickerBase
  * @tagname ui5-time-picker
  * @public
  * @since 1.0.0-rc.6
@@ -138,7 +137,7 @@ class TimePicker extends TimePickerBase {
 	 * Currently selected time represented as JavaScript Date instance
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {