feat(ui5-time-picker): Redesign the Time Picker component according t…

…o the new design (#6818)

* WIP(ui5-time-picker-clock): initial implementation

* feat(ui5-time-picker-clock): initial implementation

* feat(ui5-time-picker-clock) mark component as private

* time selection with clocks - updated main

* optimization and time selection methods integration, part 1

* wip(ui5-time-picker): replace sliders with clocks

* feat(ui5-time-picker): fix lint errors

* add initial tests

* feat(ui5-time-picker): fix comments and add tests

* feat(ui5-time-picker): fix comments

* feat(ui5-time-picker): fix comments and tests

* feat(ui5-time-picker): fix latest comments

* feat(ui5-time-picker): fix comments for tests and global event

packages/base/src/Keys.ts

@@ -89,7 +89,7 @@ enum KeyCodes {
 	F12 = 123,
 	NUM_LOCK = 144,
 	SCROLL_LOCK = 145,
-	OPEN_BRACKET = 186,
+	COLON = 186,
 	PLUS = 187,
 	COMMA = 188,
 	SLASH = 189,
@@ -229,12 +229,20 @@ const isCtrlA = (event: KeyboardEvent): boolean => ((event.key === "A" || event.
 
 const isCtrlV = (event: KeyboardEvent): boolean => ((event.key === "V" || event.key === "v") || event.which === KeyCodes.V) && checkModifierKeys(event, true, false, false);
 
+const isKeyA = (event: KeyboardEvent): boolean => ((event.key === "A" || event.key === "a") || event.which === KeyCodes.A) && checkModifierKeys(event, false, false, false);
+
+const isKeyP = (event: KeyboardEvent): boolean => ((event.key === "P" || event.key === "p") || event.which === KeyCodes.P) && checkModifierKeys(event, false, false, false);
+
 const hasModifierKeys = (event: KeyboardEvent): boolean => event.shiftKey || event.altKey || getCtrlKey(event);
 
 const getCtrlKey = (event: KeyboardEvent): boolean => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
 
 const checkModifierKeys = (event: KeyboardEvent, bCtrlKey: boolean, bAltKey: boolean, bShiftKey: boolean):boolean => event.shiftKey === bShiftKey && event.altKey === bAltKey && getCtrlKey(event) === bCtrlKey;
 
+const isNumber = (event: KeyboardEvent): boolean => ((event.key ? "0123456789".indexOf(event.key) !== -1 : event.keyCode >= KeyCodes.DIGIT_0 && event.keyCode <= KeyCodes.DIGIT_9) && checkModifierKeys(event, false, false, false));
+
+const isColon = (event: KeyboardEvent): boolean => ((event.key ? event.key === ":" : event.keyCode === KeyCodes.COLON) && checkModifierKeys(event, false, false, true));
+
 export {
 	isEnter,
 	isEnterShift,
@@ -289,7 +297,11 @@ export {
 	isShift,
 	isCtrlA,
 	isCtrlV,
+	isKeyA,
+	isKeyP,
 	isDeleteShift,
 	isInsertShift,
 	isInsertCtrl,
+	isNumber,
+	isColon,
 };

packages/main/bundle.common.js

@@ -80,6 +80,8 @@ import TableCell from "./dist/TableCell.js";
 import TextArea from "./dist/TextArea.js";
 import TimeSelection from "./dist/TimeSelection.js";
 import TimePicker from "./dist/TimePicker.js";
+import TimePickerClock from "./dist/TimePickerClock.js";
+import TimeSelectionClocks from "./dist/TimeSelectionClocks.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";

packages/main/src/TimePicker.ts

@@ -17,20 +17,19 @@ import {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-time-picker</code> component provides an input field with assigned sliders which are opened on user action.
- * The <code>ui5-time-picker</code> allows users to select a localized time using touch,
- * mouse, or keyboard input. It consists of two parts: the time input field and the
- * sliders.
+ * The <code>ui5-time-picker</code> component provides an input field with assigned clocks which are opened on user action.
+ * The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input.
+ * It consists of two parts: the time input field and the clocks.
  *
  * <h3>Usage</h3>
  * The user can enter a time by:
  * <ul>
- * <li>Using the sliders that are displayed in a popup</li>
+ * <li>Using the clocks that are displayed in a popup</li>
  * <li>Typing it in directly in the input field</li>
  * </ul>
  * <br><br>
- * When the user makes an entry and chooses the enter key, the sliders shows the corresponding time.
- * When the user directly triggers the sliders display, the actual time is displayed.
+ * When the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).
+ * When the user directly triggers the clocks display, the actual time is displayed.
  * For the <code>ui5-time-picker</code>
  *
  * <h3>Formatting</h3>
@@ -51,19 +50,23 @@ import {
  * <ul>
  * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>
  * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>
- * <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li>
- * <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li>
- * <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li>
- * <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li>
+ * <li>[SHIFT]+[PAGEUP] - Increments minutes by 1.</li>
+ * <li>[SHIFT]+[PAGEDOWN] - Decrements minutes by 1.</li>
+ * <li>[SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.</li>
+ * <li>[SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.</li>
+ * <li>
  * </ul>
  * When opened:
  * <ul>
- * <li>[UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list. Exception: AM/ PM List: stay on the first item.</li>
- * <li>[DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list. Exception: AM/ PM List: stay on the last item.</li>
- * <li>[LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.</li>
- * <li>[RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.</li>
- * <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li>
- * <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li>
+ * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>
+ * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>
+ * <li>[SHIFT]+[PAGEUP] - Increments minutes by 1.</li>
+ * <li>[SHIFT]+[PAGEDOWN] - Decrements minutes by 1.</li>
+ * <li>[SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.</li>
+ * <li>[SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.</li>
+ * <li>[A] or [P] - Selects AM or PM respectively.</li>
+ * <li>[0]-[9] - Allows direct time selecting (hours/minutes/seconds).</li>
+ * <li>[:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>

packages/main/src/TimePickerBase.ts

@@ -31,8 +31,8 @@ import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js"
 import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js";
 import Input from "./Input.js";
 import Button from "./Button.js";
-import TimeSelection from "./TimeSelection.js";
-import type { TimeSelectionChangeEventDetail } from "./TimeSelection.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js";
 
 import {
 	TIMEPICKER_SUBMIT_BUTTON,
@@ -72,7 +72,7 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail;
 	dependencies: [
 		Icon,
 		ResponsivePopover,
-		TimeSelection,
+		TimeSelectionClocks,
 		Input,
 		Button,
 	],
@@ -231,7 +231,7 @@ class TimePickerBase extends UI5Element {
 	}
 
 	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
-		this.tempValue = e.detail.value; // every time the user changes the sliders -> update tempValue
+		this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
 	}
 
 	submitPickers() {

packages/main/src/TimePickerClock.hbs

@@ -0,0 +1,51 @@
+<div
+	id="{{_id}}"
+	ondragstart="return false;"
+	ondrop="return false;"
+	aria-hidden="true"
+	class="{{classes.clock}}"
+>
+	<div
+		data-label="{{label}}"
+		class="ui5-tp-clock-dial"
+	>
+	</div>
+
+	<div>
+	{{#each _items}}
+		<div class="ui5-tp-clock-item" style="{{this.outerStyles}}">
+		{{#if this.item}}
+			<span class="ui5-tp-clock-dot"></span>
+			<span id="{{../_id}}-{{this.item}}" class="ui5-tp-clock-number" style="{{this.innerStyles}}">{{this.item}}</span>
+			{{#if this.innerItem}}
+			<span id="{{../_id}}-{{this.innerItem}}" class="ui5-tp-clock-number" style="{{this.innerStyles}}">{{this.innerItem}}</span>
+			{{/if}}
+		{{else unless ../hideFractions}}
+			<span class="ui5-tp-clock-mid-dot"></span>
+		{{/if}}
+		</div>
+	{{/each}}
+
+	{{#if _selectedItem.showMarker}}
+		<div class="ui5-tp-clock-item" style="{{_selectedItem.outerStyles}}" marker>
+			<div class="ui5-tp-clock-marker"></div>
+			<div class="{{_selectedItem.itemClasses}}" style="{{_selectedItem.innerStyles}}">{{_selectedItem.item}}</div>
+			<div id="{{_id}}-selected" class="{{_selectedItem.innerItemClasses}}" style="{{_selectedItem.innerStyles}}">{{_selectedItem.innerItem}}</div>
+		</div>
+	{{/if}}
+
+	</div>
+
+	<div
+		class="ui5-tp-clock-cover"
+		@touchstart="{{_onTouchStart}}"
+		@touchmove="{{_onTouchMove}}"
+		@touchend="{{_onTouchEnd}}"
+		@mousedown="{{_onTouchStart}}"
+		@mousemove="{{_onTouchMove}}"
+		@mouseup="{{_onTouchEnd}}"
+		@mouseout="{{_onMouseOut}}"
+		@mousewheel="{{_onMouseWheel}}"
+		@DOMMouseScroll="{{_onMouseWheel}}"
+	></div>
+</div>