feat(ui5-textarea): add "valueStateMessage" slot

packages/main/src/Input.js

@@ -94,11 +94,18 @@ const metadata = {
 		},
 
 		/**
-		 * The slot is used in order to display a valueStateMessage.
+		 * Defines the value state message that will be displayed as pop up under the <code>ui5-input</code>.
 		 * <br><br>
-		 * <b>Note:</b> The valueStateMessage would be displayed only if the <code>ui5-input</code> has
-		 * a valueState of type <code>Information</code>, <code>Warning</code> or <code>Error</code>.
+		 *
+		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
+		 * <br>
+		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
+		 * when the <code>ui5-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * <br>
+		 * <b>Note:</b> If the <code>ui5-input</code> has <code>suggestionItems</code>,
+		 * the <code>valueStateMessage</code> would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
 		 * @type {HTMLElement[]}
+		 * @since 1.0.0-rc.6
 		 * @slot
 		 * @public
 		 */
@@ -808,21 +815,17 @@ class Input extends UI5Element {
 	get classes() {
 		return {
 			popoverValueState: {
-				"ui5-input-valuestatemessage-root": true,
-				"ui5-input-valuestatemessage-success": this.valueState === ValueState.Success,
-				"ui5-input-valuestatemessage-error": this.valueState === ValueState.Error,
-				"ui5-input-valuestatemessage-warning": this.valueState === ValueState.Warning,
-				"ui5-input-valuestatemessage-information": this.valueState === ValueState.Information,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 		};
 	}
 
 	get styles() {
 		return {
-			root: {
-				"min-height": "1rem",
-				"box-shadow": "none",
-			},
 			popoverHeader: {
 				"width": `${this._inputWidth}px`,
 			},

packages/main/src/InputPopover.hbs

@@ -79,11 +79,10 @@
 			skip-registry-update
 			no-padding
 			no-arrow
-			class="ui5-input-valuestatemessage-popover"
-			placement-type="Bottom" 
-			style={{styles.root}}
+			class="ui5-valuestatemessage-popover"
+			placement-type="Bottom"
 		>
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverHeader}}>
+			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>

packages/main/src/Popover.js

@@ -331,7 +331,8 @@ class Popover extends UI5Element {
 	}
 
 	isOpenerClicked(event) {
-		return event.target === this._opener;
+		const target = event.target;
+		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener);
 	}
 
 	/**

packages/main/src/TextArea.hbs

@@ -21,7 +21,7 @@
 	<textarea
 		id="{{_id}}-inner"
 		class="ui5-textarea-inner"
-		placeholder="{{ placeholder }}"
+		placeholder="{{placeholder}}"
 		?disabled="{{disabled}}"
 		?readonly="{{readonly}}"
 		?required="{{required}}"

packages/main/src/TextArea.js

@@ -1,22 +1,33 @@
 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 { fetchI18nBundle, 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 ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
 import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
-import { TEXTAREA_CHARACTERS_LEFT, TEXTAREA_CHARACTERS_EXCEEDED } from "./generated/i18n/i18n-defaults.js";
+import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
+
+import {
+	VALUE_STATE_INFORMATION,
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	TEXTAREA_CHARACTERS_LEFT,
+	TEXTAREA_CHARACTERS_EXCEEDED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/TextArea.css.js";
+import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";
 
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-textarea",
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
 		/**
 		 * Defines the value of the Web Component.
@@ -210,15 +221,49 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 */
 		_mirrorText: {
 			type: Object,
 			multiple: true,
 			defaultValue: "",
 		},
+
+		/**
+		 * @private
+		 */
 		_maxHeight: {
 			type: String,
 			noAttribute: true,
 		},
+
+		/**
+		 * @private
+		 */
+		_width: {
+			type: Integer,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
+
+		/**
+		 * Defines the value state message that will be displayed as pop up under the <code>ui5-textarea</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed if the <code>ui5-textarea</code> has
+		 * <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>.
+		 * @type {HTMLElement[]}
+		 * @since 1.0.0-rc.7
+		 * @slot
+		 * @public
+		 */
+		valueStateMessage: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
 		/**
@@ -282,12 +327,31 @@ class TextArea extends UI5Element {
 		return TextAreaTemplate;
 	}
 
+	static get staticAreaTemplate() {
+		return TextAreaPopoverTemplate;
+	}
+
+	static get staticAreaStyles() {
+		return valueStateMessageStyles;
+	}
+
 	constructor() {
 		super();
 
+		this._firstRendering = true;
+		this._openValueStateMsgPopover = false;
+		this._fnOnResize = this._onResize.bind(this);
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
+	onEnterDOM() {
+		ResizeHandler.register(this, this._fnOnResize);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._fnOnResize);
+	}
+
 	onBeforeRendering() {
 		this._exceededTextProps = this._calcExceededText();
 		this._mirrorText = this._tokenizeText(this.value);
@@ -307,6 +371,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	onAfterRendering() {
+		this.toggleValueStateMessage(this.openValueStateMsgPopover);
+		this._firstRendering = false;
+	}
+
 	getInputDomRef() {
 		return this.getDomRef().querySelector("textarea");
 	}
@@ -321,10 +390,12 @@ class TextArea extends UI5Element {
 
 	_onfocusin() {
 		this.focused = true;
+		this._openValueStateMsgPopover = true;
 	}
 
 	_onfocusout() {
 		this.focused = false;
+		this._openValueStateMsgPopover = false;
 	}
 
 	_onchange() {
@@ -355,6 +426,35 @@ class TextArea extends UI5Element {
 		this.fireEvent("value-changed");
 	}
 
+	_onResize() {
+		if (this.displayValueStateMessage) {
+			this._width = this.offsetWidth;
+		}
+	}
+
+	toggleValueStateMessage(toggle) {
+		if (toggle) {
+			this.openPopover();
+		} else {
+			this.closePopover();
+		}
+	}
+
+	async openPopover() {
+		this.popover = await this._getPopover();
+		this.popover && this.popover.openBy(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+	}
+
+	async closePopover() {
+		this.popover = await this._getPopover();
+		this.popover && this.popover.close();
+	}
+
+	async _getPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("ui5-popover");
+	}
+
 	_tokenizeText(value) {
 		const tokenizedText = value.replace(/&/gm, "&amp;").replace(/"/gm, "&quot;").replace(/"/gm, "&#39;").replace(/</gm, "&lt;")
 			.replace(/>/gm, "&gt;")
@@ -402,6 +502,16 @@ class TextArea extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			valueStateMsg: {
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			},
+		};
+	}
+
 	get styles() {
 		const lineHeight = 1.4 * 16;
 
@@ -417,6 +527,9 @@ class TextArea extends UI5Element {
 				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
 				"max-height": (this._maxHeight),
 			},
+			valueStateMsgPopover: {
+				"max-width": `${this._width}px`,
+			},
 		};
 	}
 
@@ -432,6 +545,44 @@ class TextArea extends UI5Element {
 		return this.valueState === "Error" ? "true" : undefined;
 	}
 
+	get openValueStateMsgPopover() {
+		return !this._firstRendering && this._openValueStateMsgPopover && this.displayValueStateMessage;
+	}
+
+	get displayValueStateMessage() {
+		return !!this.valueStateMessage.length || this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	}
+
+	get displayDefaultValueStateMessage() {
+		if (this.valueStateMessage.length) {
+			return false;
+		}
+
+		return this.exceeding || (this.valueState !== ValueState.Success && this.valueState !== ValueState.None);
+	}
+
+	get valueStateMessageText() {
+		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];
+	}
+
+	valueStateTextMappings() {
+		const i18nBundle = this.i18nBundle;
+
+		return {
+			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
+
 	static async onDefine() {
 		await fetchI18nBundle("@ui5/webcomponents");
 	}

packages/main/src/TextAreaPopover.hbs

@@ -0,0 +1,26 @@
+{{#if displayValueStateMessage}}
+	<ui5-popover
+		skip-registry-update
+		no-padding
+		no-arrow
+		_disable-initial-focus
+		class="ui5-valuestatemessage-popover"
+		style="{{styles.valueStateMsgPopover}}"
+		placement-type="Bottom"
+		horizontal-align="Left"
+	>
+		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
+			{{> valueStateMessage}}
+		</div>
+	</ui5-popover>
+{{/if}}
+
+{{#*inline "valueStateMessage"}}
+	{{#if displayDefaultValueStateMessage}}
+		{{valueStateText}}
+	{{else}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{/if}}
+{{/inline}}

packages/main/src/themes/ValueStateMessage.css

@@ -1,4 +1,9 @@
-.ui5-input-valuestatemessage-root {
+.ui5-valuestatemessage-popover {
+	min-height: 1rem;
+	box-shadow: none;
+}
+
+.ui5-valuestatemessage-root {
 	box-sizing: border-box;
 	display: inline-block;
 	color: var(--sapUiBaseColor);
@@ -7,20 +12,21 @@
 	padding: .3rem .625rem;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	min-width: 6.25rem;
 }
 
-.ui5-input-valuestatemessage-success {
+.ui5-valuestatemessage--success {
 	background: var(--sapSuccessBackground);
 }
 
-.ui5-input-valuestatemessage-warning {
+.ui5-valuestatemessage--warning {
 	background: var(--sapWarningBackground);
 }
 
-.ui5-input-valuestatemessage-error {
+.ui5-valuestatemessage--error {
 	background: var(--sapErrorBackground);
 }
 
-.ui5-input-valuestatemessage-information {
+.ui5-valuestatemessage--information {
 	background: var(--sapInformationBackground);
 }