feat(ui5-duration-picker): improve keyboard handling support

packages/base/src/Keys.js

@@ -129,6 +129,18 @@ const isBackSpace = event => (event.key ? event.key === "Backspace" : event.keyC
 
 const isDelete = event => (event.key ? event.key === "Delete" : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event);
 
+const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
+
+const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
+
+const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
+
+const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
+
+const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
+
+const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
+
 const isShow = event => {
 	if (event.key) {
 		return isF4(event) || isShowByArrows(event);
@@ -167,4 +179,10 @@ export {
 	isDelete,
 	isShow,
 	isF4,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
 };

packages/main/src/DurationPicker.js

@@ -2,7 +2,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isShow,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import DurationPickerTemplate from "./generated/templates/DurationPickerTemplate.lit.js";
@@ -408,8 +416,49 @@ class DurationPicker extends UI5Element {
 		if (isShow(event)) {
 			this.togglePicker();
 		}
+
+		if (isPageUpShiftCtrl(event)) {
+			event.preventDefault();
+			this._incrementValue(true, false, false, true);
+		} else if (isPageUpShift(event)) {
+			event.preventDefault();
+			this._incrementValue(true, false, true, false);
+		} else if (isPageUp(event)) {
+			event.preventDefault();
+			this._incrementValue(true, true, false, false);
+		}
+
+		if (isPageDownShiftCtrl(event)) {
+			event.preventDefault();
+			this._incrementValue(false, false, false, true);
+		} else if (isPageDownShift(event)) {
+			event.preventDefault();
+			this._incrementValue(false, false, true, false);
+		} else if (isPageDown(event)) {
+			event.preventDefault();
+			this._incrementValue(false, true, false, false);
+		}
 	}
 
+	_incrementValue(increment, hours, minutes, seconds) {
+		const values = this.readFormattedValue(this.value);
+		const incrementStep = increment ? 1 : -1;
+
+		if (hours && !this.hideHours) {
+			values[0] = Number(values[0]) + incrementStep;
+		} else if (minutes && !this.hideMinutes) {
+			values[1] = Number(values[1]) + incrementStep;
+		} else if (seconds && !this.hideSeconds) {
+			values[2] = Number(values[2]) + incrementStep;
+		} else {
+			return;
+		}
+
+		this.value = `${!this.hideHours ? values[0] : ""}${!this.hideHours && !this.hideMinutes ? ":" : ""}${!this.hideMinutes ? values[1] : ""}${!this.hideSeconds ? `:${values[2]}` : ""}`;
+		this.fireEvent("change", { value: this.value });
+	}
+
+
 	generateTimeItemsArray(arrayLength, step = 1) {
 		const resultArray = [];
 		for (let i = 0; i < arrayLength; i++) {

packages/main/test/specs/DurationPicker.spec.js

@@ -95,4 +95,53 @@ describe("Duration Picker general interaction", () => {
 		// close picker
 		duratationPickerIcon.click();
 	});
+
+	it("Tests Keyboard handling", () => {
+		const durationPicker = browser.$("#duration-default")
+
+		// act
+		durationPicker.click();
+		durationPicker.keys(['Shift', 'PageUp']);
+		durationPicker.keys('Shift');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "00:01:00", "The value of minutes is +1");
+		// act
+		durationPicker.click();
+		durationPicker.keys(['Shift', 'PageDown']);
+		durationPicker.keys('Shift');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "00:00:00", "The value of minutes is -1");
+
+		// act
+		durationPicker.click();
+		durationPicker.keys('PageUp');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "01:00:00", "The value of hours is +1");
+		// act
+		durationPicker.click();
+		durationPicker.keys('PageDown');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "00:00:00", "The value of hours is -1");
+
+		// act
+		durationPicker.click();
+		durationPicker.keys(['Shift', 'Control', 'PageUp']);
+		durationPicker.keys('Control');
+		durationPicker.keys('Shift');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "00:00:01", "The value of seconds is +1");
+		// act
+		durationPicker.click();
+		durationPicker.keys(['Shift', 'Control', 'PageDown']);
+		durationPicker.keys('Shift');
+		durationPicker.keys('Control');
+
+		// assert
+		assert.strictEqual(durationPicker.shadow$("ui5-input").getProperty("value"), "00:00:00", "The value of seconds is +1");
+	});
 });