feat(ui5-duration-picker): implement valueStateMessage (#2102)

Related to: #1086

Author: ilhan007

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>

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 */ {
 		/**

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>

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.");
+	});
 });

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", () => {