From ed3c3931afad003e47139dcb536a334ba5ac9f9c Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Tue, 18 Aug 2020 09:42:28 +0300
Subject: [PATCH] feat(ui5-duration-picker): implement valueStateMessage
 (#2102)

Related to: #1086
---
 packages/main/src/DurationPicker.hbs          | 28 +++++++++++--------
 packages/main/src/DurationPicker.js           | 18 +++++++++++-
 packages/main/test/pages/DurationPicker.html  |  8 ++++++
 .../main/test/specs/DurationPicker.spec.js    | 12 ++++++++
 packages/main/test/specs/TimePicker.spec.js   |  2 +-
 5 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/packages/main/src/DurationPicker.hbs b/packages/main/src/DurationPicker.hbs
index 7fbb819cd01e..85ab471a8656 100644
--- a/packages/main/src/DurationPicker.hbs
+++ b/packages/main/src/DurationPicker.hbs
@@ -9,17 +9,21 @@
 		@keydown="{{_onkeydown}}"
 		class="ui5-duration-picker-input"
 	>
-			{{#unless readonly}}
-				<ui5-icon
-					slot="icon"
-					name="fob-watch"
-					tabindex="-1"
-					show-tooltip
-					@click="{{togglePicker}}"
-					input-icon
-					?pressed="{{_isPickerOpen}}"
-					class="ui5-duration-picker-input-icon-button"
-				></ui5-icon>
-			{{/unless}}
+		{{#unless readonly}}
+			<ui5-icon
+				slot="icon"
+				name="fob-watch"
+				tabindex="-1"
+				show-tooltip
+				@click="{{togglePicker}}"
+				input-icon
+				?pressed="{{_isPickerOpen}}"
+				class="ui5-duration-picker-input-icon-button"
+			></ui5-icon>
+		{{/unless}}
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
 	</ui5-input>
 </div>
\ No newline at end of file
diff --git a/packages/main/src/DurationPicker.js b/packages/main/src/DurationPicker.js
index 2335629ecc9b..c1bef447abe3 100644
--- a/packages/main/src/DurationPicker.js
+++ b/packages/main/src/DurationPicker.js
@@ -32,6 +32,7 @@ import DurationPickerPopoverCss from "./generated/themes/DurationPickerPopover.c
 const metadata = {
 	tag: "ui5-duration-picker",
 	languageAware: true,
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.DurationPicker.prototype */ {
 		/**
 		 * Defines a formatted time value.
@@ -173,7 +174,22 @@ const metadata = {
 		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.DurationPicker.prototype */ {
-		//
+		/**
+		 * Defines the value state message that will be displayed as pop up under the <code>ui5-duration-picker</code>.
+		 * <br><br>
+		 *
+		 * <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-duration-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * @type {HTMLElement}
+		 * @since 1.0.0-rc.9
+		 * @slot
+		 * @public
+		 */
+		valueStateMessage: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.DurationPicker.prototype */ {
 		/**
diff --git a/packages/main/test/pages/DurationPicker.html b/packages/main/test/pages/DurationPicker.html
index 4e41d8c438d3..069f9b1a4bb1 100644
--- a/packages/main/test/pages/DurationPicker.html
+++ b/packages/main/test/pages/DurationPicker.html
@@ -62,5 +62,13 @@
 	<br>
 	<br>
 	<ui5-duration-picker id="duration-default"></ui5-duration-picker>
+
+	<br>
+	<br>
+	<ui5-duration-picker value-state="Error"></ui5-duration-picker>
+
+	<ui5-duration-picker value-state="Error" id="pickerValueStateMessage">
+		<div slot="valueStateMessage" id="customValueStateMessage">Please provide valid value</div>
+	</ui5-duration-picker>
 </body>
 </html>
diff --git a/packages/main/test/specs/DurationPicker.spec.js b/packages/main/test/specs/DurationPicker.spec.js
index 41bdec6a6c00..2ff6a0c3db90 100644
--- a/packages/main/test/specs/DurationPicker.spec.js
+++ b/packages/main/test/specs/DurationPicker.spec.js
@@ -95,4 +95,16 @@ describe("Duration Picker general interaction", () => {
 		// close picker
 		duratationPickerIcon.click();
 	});
+
+	it("tests valueStateMessage slot", () => {
+		const picker = browser.$("#pickerValueStateMessage");
+
+		picker.click();
+
+		const inputId = picker.shadow$("ui5-input").getProperty("_id");
+		const inputStaticAreaItem = browser.$(`.${inputId}`);
+		const slot = inputStaticAreaItem.shadow$("ui5-popover").$("#customValueStateMessage");
+
+		assert.ok(slot, "The value state message is set.");
+	});
 });
diff --git a/packages/main/test/specs/TimePicker.spec.js b/packages/main/test/specs/TimePicker.spec.js
index 92dd07c7b2b9..526589689a41 100644
--- a/packages/main/test/specs/TimePicker.spec.js
+++ b/packages/main/test/specs/TimePicker.spec.js
@@ -68,7 +68,7 @@ describe("TimePicker general interaction", () => {
 		const inputStaticAreaItem = browser.$(`.${inputId}`);
 		const slot = inputStaticAreaItem.shadow$("ui5-popover").$("#customValueStateMessage");
 
-		assert.notOk(slot.error, "cValue State message slot is working");
+		assert.notOk(slot.error, "Value State message slot is working");
 	});
 
 	it("tests change event", () => {