@ui5/webcomponents 0.0.0-9195c41b9 → 0.0.0-9261ac932

package/dist/TimePicker.js

@@ -1,760 +1,634 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TimePicker_1;
+import { isDesktop, isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
-import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import {
-	isLeft,
-	isRight,
-	isTabNext,
-	isTabPrevious,
-	isShow,
-} from "@ui5/webcomponents-base/src/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/time-entry-request.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import { isShow, isEnter, isPageUp, isPageDown, isPageUpShift, isPageDownShift, isPageUpShiftCtrl, isPageDownShiftCtrl, isTabNext, isTabPrevious, isF6Next, isF6Previous, } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/time-entry-request.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import Icon from "./Icon.js";
+import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js";
-import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js";
 import Input from "./Input.js";
-import WheelSlider from "./WheelSlider.js";
-import {
-	getHours,
-	getMinutes,
-	getSeconds,
-	getHoursConfigByFormat,
-	getTimeControlsByFormat,
-} from "./timepicker-utils/TimeSlider.js";
-
-import {
-	TIMEPICKER_HOURS_LABEL,
-	TIMEPICKER_MINUTES_LABEL,
-	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
-	TIMEPICKER_SUBMIT_BUTTON,
-	TIMEPICKER_CANCEL_BUTTON,
-} from "./generated/i18n/i18n-defaults.js";
-
+import Button from "./Button.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import { TIMEPICKER_SUBMIT_BUTTON, TIMEPICKER_CANCEL_BUTTON, TIMEPICKER_INPUT_DESCRIPTION, TIMEPICKER_POPOVER_ACCESSIBLE_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import TimePickerCss from "./generated/themes/TimePicker.css.js";
 import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-timepicker",
-	properties: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
-		/**
-		 * Defines a formatted time value.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 */
-		value: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-timepicker</code> has no value.
-		 *
-		 * <br><br>
-		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-timepicker</code> appear empty - without placeholder or format pattern.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 */
-		placeholder: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Determines the format, displayed in the input field.
-		 *
-		 * Example:
-		 * HH:mm:ss -> 11:42:35
-		 * hh:mm:ss a -> 2:23:15 PM
-		 * mm:ss -> 12:04 (only minutes and seconds)
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		formatPattern: {
-			type: String,
-		},
-
-		/**
-		 * Defines the value state of the <code>ui5-timepicker</code>.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>None</code></li>
-		 * <li><code>Error</code></li>
-		 * <li><code>Warning</code></li>
-		 * <li><code>Success</code></li>
-		 * <li><code>Information</code></li>
-		 * </ul>
-		 *
-		 * @type {ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Determines whether the <code>ui5-timepicker</code> is displayed as disabled.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines whether the <code>ui5-timepicker</code> is displayed as readonly.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		_isPickerOpen: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_respPopover: {
-			type: Object,
-		},
-
-		_hours: {
-			type: String,
-		},
-
-		_minutes: {
-			type: String,
-		},
-
-		_seconds: {
-			type: String,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.main.TimePicker.prototype */ {
-		/**
-		 * Fired when the input operation has finished by clicking the "OK" button or
-		 * when the text in the input field has changed and the focus leaves the input field.
-		 *
-		 * @event
-		 * @public
-		*/
-		change: {},
-		/**
-		 * Fired when the value of the <code>ui5-timepicker</code> is changed at each key stroke.
-		 *
-		 * @event
-		 * @public
-		*/
-		input: {},
-	},
-};
-
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-timepicker</code> component provides an input field with assigned sliders which opens on user action.
- * The <code>ui5-timepicker</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.
+ * ### Overview
+ * The `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.
+ * The `ui5-time-picker` 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>
+ * ### Usage
  * The user can enter a time by:
- * <ul>
- * <li>Using the sliders that opens 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.
- * For the <code>ui5-timepicker</code>
  *
- * <h3>Formatting</h3>
+ * - Using the clocks that are displayed in a popup
+ * - Typing it in directly in the input field
+ *
+ * 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 `ui5-time-picker`
+ *
+ * ### Formatting
  *
  * If a time is entered by typing it into
  * the input field, it must fit to the used time format.
- * <br><br>
+ *
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
- * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
- * <br><br>
- * For example, if the <code>format-pattern</code> is "HH:mm:ss",
+ * For more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).
+ *
+ * For example, if the `format-pattern` is "HH:mm:ss",
  * a valid value string is "11:42:35" and the same is displayed in the input.
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard handling
+ * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.
+ *
+ * When closed:
  *
- * <code>import @ui5/webcomponents/dist/TimePicker.js";</code>
+ * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
+ * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
+ * - [Shift]+[Page Up] - Increments minutes by 1.
+ * - [Shift]+[Page Down] - Decrements minutes by 1.
+ * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
+ * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
+ * -
  *
+ * When opened:
+ *
+ * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
+ * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
+ * - [Shift]+[Page Up] - Increments minutes by 1.
+ * - [Shift]+[Page Down] - Decrements minutes by 1.
+ * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
+ * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
+ * - [A] or [P] - Selects AM or PM respectively.
+ * - [0]-[9] - Allows direct time selecting (hours/minutes/seconds).
+ * - [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TimePicker.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.TimePicker
  * @extends UI5Element
- * @tagname ui5-timepicker
  * @public
  * @since 1.0.0-rc.6
  */
-class TimePicker extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return TimePickerCss;
-	}
-
-	static get staticAreaTemplate() {
-		return TimePickerPopoverTemplate;
-	}
-
-	static get template() {
-		return TimePickerTemplate;
-	}
-
-	static async onDefine() {
-		await Promise.all([
-			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			ResponsivePopover.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-			WheelSlider.define(),
-			Input.define(),
-		]);
-	}
-
-	static get staticAreaStyles() {
-		return [TimePickerPopoverCss, ResponsivePopoverCommonCss];
-	}
-
-
-	constructor() {
-		super();
-
-		this.readonly = false;
-		this.disabled = false;
-		this._isPickerOpen = false;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-
-		this._respPopover = {
-			placementType: PopoverPlacementType.Bottom,
-			horizontalAlign: PopoverHorizontalAlign.Left,
-			allowTargetOverlap: true,
-			stayOpenOnScroll: true,
-			afterClose: () => {
-				this._isPickerOpen = false;
-				this.closePicker();
-			},
-		};
-
-		this._hoursParameters = {
-			minHour: 0,
-			maxHour: 0,
-			isTwelveHoursFormat: false,
-		};
-
-		this._slidersDomRefs = [];
-	}
-
-	onBeforeRendering() {
-		if (!this.formatPattern) {
-			this.formatPattern = LocaleData.getInstance(getLocale()).getTimePattern(this.getFormat().oFormatOptions.style);
-		}
-
-		if (this.value === undefined) {
-			this.value = this.getFormat().format(new Date());
-		}
-
-		this._initHoursFormatParameters();
-	}
-
-	_handleInputClick() {
-		if (this._isPickerOpen) {
-			return;
-		}
-
-		const inputField = this._getInputField();
-
-		if (inputField) {
-			inputField.select();
-		}
-	}
-
-	_handleInputChange() {
-		const nextValue = this._getInput().getInputValue(),
-			isValid = this.isValid(nextValue);
-
-		this.setValue(nextValue);
-		this.fireEvent("change", { value: nextValue, valid: isValid });
-		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
-	}
-
-	_handleInputLiveChange() {
-		const nextValue = this._getInput().getInputValue(),
-			isValid = this.isValid(nextValue);
-
-		this.value = nextValue;
-		this.setSlidersValue();
-		this.fireEvent("input", { value: nextValue, valid: isValid });
-	}
-
-	setSlidersValue() {
-		const currentDate = this._getInput() ? this.getFormat().parse(this._getInput().getAttribute("value")) : null,
-			secondsSlider = this.secondsSlider,
-			minutesSlider = this.minutesSlider,
-			hoursSlider = this.hoursSlider,
-			periodsSlider = this.periodsSlider;
-
-		if (!currentDate) {
-			return;
-		}
-		if (hoursSlider) {
-			let tempValue = "";
-			if (this._hoursParameters.isTwelveHoursFormat && currentDate.getHours() > this._hoursParameters.maxHour) {
-				tempValue = currentDate.getHours() - 12;
-			} else if (this._hoursParameters.isTwelveHoursFormat && currentDate.getHours() < this._hoursParameters.minHour) {
-				tempValue = currentDate.getHours() + 12;
-			} else {
-				tempValue = currentDate.getHours();
-			}
-			if (tempValue.toString().length === 1) {
-				hoursSlider.value = `0${tempValue}`;
-			} else {
-				hoursSlider.value = tempValue.toString();
-			}
-		}
-		if (minutesSlider) {
-			const tempValue = currentDate.getMinutes();
-			if (tempValue.toString().length === 1) {
-				minutesSlider.value = `0${tempValue}`;
-			} else {
-				minutesSlider.value = tempValue.toString();
-			}
-		}
-		if (secondsSlider) {
-			const tempValue = currentDate.getSeconds();
-			if (tempValue.toString().length === 1) {
-				secondsSlider.value = `0${tempValue}`;
-			} else {
-				secondsSlider.value = tempValue.toString();
-			}
-		}
-		if (this._hoursParameters.isTwelveHoursFormat && periodsSlider && this._hoursParameters.minHour === 1) {
-			periodsSlider.value = currentDate.getHours() >= this._hoursParameters.maxHour ? this.periodsArray[1] : this.periodsArray[0];
-		} else if (this._hoursParameters.isTwelveHoursFormat && periodsSlider) {
-			periodsSlider.value = (currentDate.getHours() > this._hoursParameters.maxHour || currentDate.getHours() === this._hoursParameters.minHour) ? this.periodsArray[1] : this.periodsArray[0];
-		}
-	}
-
-	/**
-	 * Closes the picker
-	 * @public
-	 */
-	async closePicker() {
-		await this._getPopover();
-		this.responsivePopover.close();
-		this._isPickerOpen = false;
-
-		for (let i = 0; i < this._slidersDomRefs.length; i++) {
-			this._slidersDomRefs[i].collapseSlider();
-		}
-	}
-
-	/**
-	 * Opens the picker.
-	 * <code>{ focusInput: true }</code> By default, the focus goes in the picker after opening it.
-	 * Specify this option to focus the input field.
-	 * @public
-	 */
-	async openPicker() {
-		await this._getPopover();
-		this.responsivePopover.open(this);
-		this._isPickerOpen = true;
-		this._slidersDomRefs = await this.slidersDomRefs();
-
-		this.setSlidersValue();
-
-		if (this._slidersDomRefs[0]) {
-			this._slidersDomRefs[0].focus();
-		}
-	}
-
-	togglePicker() {
-		if (this.isOpen()) {
-			this.closePicker();
-			this._isPickerOpen = false;
-		} else if (this._canOpenPicker()) {
-			this.openPicker();
-			this._isPickerOpen = true;
-		}
-	}
-
-	/**
-	 * Checks if a value is valid against the current date format of the TimePicker
-	 * @param {string} value A value to be tested against the current date format
-	 * @public
-	 */
-	isOpen() {
-		return !!this._isPickerOpen;
-	}
-
-	_canOpenPicker() {
-		return !this.disabled && !this.readonly;
-	}
-
-	async _getPopover() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
-		return this.responsivePopover;
-	}
-
-	get secondsArray() {
-		return getSeconds();
-	}
-
-	get minutesArray() {
-		return getMinutes();
-	}
-
-	get hoursArray() {
-		return getHours(this._hoursParameters);
-	}
-
-	get periodsArray() {
-		return this.getFormat().aDayPeriods.map(x => x.toUpperCase());
-	}
-
-	async slidersDomRefs() {
-		await this._getPopover();
-		return this.responsivePopover.default.length ? [...this.responsivePopover.default[0].children].filter(x => x.isUI5Element) : this.responsivePopover.default;
-	}
-
-	_getInput() {
-		return this.shadowRoot.querySelector("ui5-input");
-	}
-
-	_getInputField() {
-		const input = this._getInput();
-		return input && input.getInputDOMRef();
-	}
-
-	get secondsSlider() {
-		return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-seconds-wheelslider");
-	}
-
-	get minutesSlider() {
-		return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-minutes-wheelslider");
-	}
-
-	get hoursSlider() {
-		return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-hours-wheelslider");
-	}
-
-	get periodsSlider() {
-		return this.responsivePopover && this.responsivePopover.querySelector(".ui5-timepicker-period-wheelslider");
-	}
-
-	submitPickers() {
-		const selectedDate = new Date(),
-			secondsSlider = this.secondsSlider,
-			minutesSlider = this.minutesSlider,
-			hoursSlider = this.hoursSlider,
-			periodsSlider = this.periodsSlider,
-			minutes = minutesSlider ? minutesSlider.getAttribute("value") : "0",
-			seconds = secondsSlider ? secondsSlider.getAttribute("value") : "0",
-			period = periodsSlider ? periodsSlider.getAttribute("value") : this.periodsArray[0];
-
-		let hours = hoursSlider ? hoursSlider.getAttribute("value") : this._hoursParameters.minHour.toString();
-
-		if (period === this.periodsArray[0]) { // AM
-			hours = hours === "12" ? 0 : hours;
-		}
-
-		if (period === this.periodsArray[1]) { // PM
-			hours = hours === "12" ? hours : hours * 1 + 12;
-		}
-
-		selectedDate.setHours(hours);
-		selectedDate.setMinutes(minutes);
-		selectedDate.setSeconds(seconds);
-
-		this.setValue(this.getFormat().format(selectedDate));
-
-		this.fireEvent("change", { value: this.value, valid: true });
-
-		this.closePicker();
-	}
-
-	/**
-	 * Checks if a value is valid against the current format patternt of the TimePicker.
-	 *
-	 * <br><br>
-	 * <b>Note:</b> an empty string is considered as valid value.
-	 * @param {string} value The value to be tested against the current date format
-	 * @public
-	 */
-	isValid(value) {
-		if (value === "") {
-			return true;
-		}
-		return !!(value && this.getFormat().parse(value));
-	}
-
-	normalizeValue(value) {
-		if (value === "") {
-			return value;
-		}
-
-		return this.getFormat().format(this.getFormat().parse(value));
-	}
-
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
-
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
-	}
-
-	get _displayFormat() {
-		return this.getFormat().oFormatOptions.pattern;
-	}
-
-	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
-	}
-
-	handleSliderClicked(event) {
-		if (event.target._expanded) {
-			this.openSlider(event.target.label);
-		}
-	}
-
-	openSlider(label) {
-		for (let i = 0; i < this._slidersDomRefs.length; i++) {
-			if (this._slidersDomRefs[i].label !== label) {
-				this._slidersDomRefs[i].collapseSlider();
-			}
-		}
-	}
-
-	async _onfocuscontainerin(e) {
-		if (e.target !== e.currentTarget) {
-			return;
-		}
-		let sliders = [];
-		if (this._slidersDomRefs.length) {
-			sliders = await this.slidersDomRefs();
-		} else {
-			sliders = this._slidersDomRefs;
-		}
-		if (sliders[0]) {
-			sliders[0].focus();
-		}
-	}
-
-	async _oncontainerkeydown(e) {
-		if (isLeft(e)) {
-			let expandedSliderIndex = 0;
-			for (let i = 0; i < this._slidersDomRefs.length; i++) {
-				if (this._slidersDomRefs[i]._expanded) {
-					expandedSliderIndex = i;
-				}
-			}
-			if (this._slidersDomRefs[expandedSliderIndex - 1]) {
-				this._slidersDomRefs[expandedSliderIndex - 1].focus();
-			} else {
-				this._slidersDomRefs[this._slidersDomRefs.length - 1].focus();
-			}
-		} else if (isRight(e)) {
-			let expandedSliderIndex = 0;
-
-			for (let i = 0; i < this._slidersDomRefs.length; i++) {
-				if (this._slidersDomRefs[i]._expanded) {
-					expandedSliderIndex = i;
-				}
-			}
-			if (this._slidersDomRefs[expandedSliderIndex + 1]) {
-				this._slidersDomRefs[expandedSliderIndex + 1].focus();
-			} else {
-				this._slidersDomRefs[0].focus();
-			}
-		}
-
-		if (isTabNext(e) && e.target === this._slidersDomRefs[this._slidersDomRefs.length - 1]) {
-			const responsivePopover = await this._getPopover();
-			e.preventDefault();
-			responsivePopover.querySelector(".ui5-timepicker-footer").firstElementChild.focus();
-		} else if (isTabPrevious(e) && e.target === this._slidersDomRefs[0]) {
-			const responsivePopover = await this._getPopover();
-			e.preventDefault();
-			responsivePopover.querySelector(`.ui5-timepicker-footer`).lastElementChild.focus();
-		}
-	}
-
-	_onfooterkeydown(e) {
-		if (isTabNext(e) && e.target === e.target.parentElement.lastElementChild) {
-			e.preventDefault();
-			this._slidersDomRefs[0].focus();
-		}
-
-		if (isTabPrevious(e) && e.target === e.target.parentElement.firstElementChild) {
-			e.preventDefault();
-			this._slidersDomRefs[this._slidersDomRefs.length - 1].focus();
-		}
-	}
-
-	_ontimepickerkeydown(e) {
-		this._handleTimepickerKeysDown(e);
-	}
-
-	_ontimepickerpopoverkeydown(e) {
-		this._handleTimepickerKeysDown(e);
-	}
-
-	_handleTimepickerKeysDown(e) {
-		if (isShow(e)) {
-			e.preventDefault();
-			this.togglePicker();
-		}
-	}
-
-	_handleWheel(e) {
-		e.preventDefault();
-	}
-
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-			});
-		}
-
-		return this._oDateFormat;
-	}
-
-	setValue(value) {
-		if (this.isValid(value)) {
-			this.value = this.normalizeValue(value);
-			this.setSlidersValue();
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-	}
-
-	_getSlidersContained() {
-		const formatArray = this.getFormat().aFormatArray;
-		return getTimeControlsByFormat(formatArray, this._hoursParameters);
-	}
-
-	_initHoursFormatParameters() {
-		const formatArray = this.getFormat().aFormatArray;
-		const config = getHoursConfigByFormat(formatArray[0].type);
-
-		this._hoursParameters.minHour = config.minHour;
-		this._hoursParameters.maxHour = config.maxHour;
-		this._hoursParameters.isTwelveHoursFormat = config.isTwelveHoursFormat;
-	}
-
-	/**
-	 * Currently selected date represented as JavaScript Date instance
-	 *
-	 * @readonly
-	 * @type { Date }
-	 * @public
-	 */
-	get dateValue() {
-		return this.getFormat().parse(this.value);
-	}
-
-	get shouldBuildHoursSlider() {
-		return this._getSlidersContained()[0];
-	}
-
-	get shouldBuildMinutesSlider() {
-		return this._getSlidersContained()[1];
-	}
-
-	get shouldBuildSecondsSlider() {
-		return this._getSlidersContained()[2];
-	}
-
-	get shouldBuildPeriodsSlider() {
-		return this._getSlidersContained()[3];
-	}
-
-	get hoursSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
-	}
-
-	get minutesSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
-	}
-
-	get secondsSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
-	}
-
-	get periodSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
-	}
-
-	get submitButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
-	}
-
-	get cancelButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
-	}
-
-	get classes() {
-		return {
-			container: {
-				"ui5-timepicker-sliders-container": true,
-				"ui5-phone": isPhone(),
-			},
-		};
-	}
-}
-
+let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines a formatted time value.
+         * @default ""
+         * @formEvents change input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines the disabled state of the comonent.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines the readonly state of the comonent.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * Defines the open or closed state of the popover.
+         * @public
+         * @default false
+         * @since 2.0.0
+         */
+        this.open = false;
+        /**
+         * Defines whether the component is required.
+         * @since 2.1.0
+         * @default false
+         * @public
+         */
+        this.required = false;
+        this._isInputsPopoverOpen = false;
+    }
+    get formValidityMessage() {
+        return TimePicker_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.value };
+    }
+    async formElementAnchor() {
+        return (await this.getFocusDomRefAsync())?.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value || "";
+    }
+    onBeforeRendering() {
+        if (this.value) {
+            this.value = this.normalizeValue(this.value) || this.value;
+        }
+        this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
+    }
+    get dateAriaDescription() {
+        return TimePicker_1.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+    }
+    get pickerAccessibleName() {
+        return TimePicker_1.i18nBundle.getText(TIMEPICKER_POPOVER_ACCESSIBLE_NAME);
+    }
+    get accInfo() {
+        return {
+            "ariaRoledescription": this.dateAriaDescription,
+            "ariaHasPopup": "dialog",
+            "ariaRequired": this.required,
+            "ariaLabel": getEffectiveAriaLabelText(this),
+        };
+    }
+    /**
+     * Currently selected time represented as JavaScript Date instance
+     * @public
+     * @default null
+     */
+    get dateValue() {
+        return this.getFormat().parse(this._effectiveValue);
+    }
+    /**
+     * @protected
+     */
+    get _placeholder() {
+        return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+    }
+    /**
+     * @protected
+     */
+    get _formatPattern() {
+        const hasHours = !!this.formatPattern?.match(/H/i);
+        const fallback = !this.formatPattern || !hasHours;
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return fallback ? localeData.getTimePattern("medium") : this.formatPattern;
+    }
+    get _displayFormat() {
+        // @ts-ignore oFormatOptions is a private API of DateFormat
+        return this.getFormat().oFormatOptions.pattern;
+    }
+    get _effectiveValue() {
+        return this.value;
+    }
+    get _timeSelectionValue() {
+        return this.tempValue;
+    }
+    get _isPhone() {
+        return isPhone();
+    }
+    get _isMobileDevice() {
+        return !isDesktop() && (isPhone() || isTablet());
+    }
+    onTimeSelectionChange(e) {
+        this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
+    }
+    _togglePicker() {
+        this.open = !this.open;
+    }
+    submitPickers() {
+        this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+        this._togglePicker();
+    }
+    onResponsivePopoverAfterClose() {
+        this.open = false;
+        this.fireDecoratorEvent("close");
+    }
+    onResponsivePopoverAfterOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    /**
+     * Opens the Inputs popover.
+     * @private
+     * @returns Resolves when the Inputs popover is open
+     */
+    openInputsPopover() {
+        this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
+        const popover = this._getInputsPopover();
+        popover.opener = this;
+        popover.open = true;
+        this._isInputsPopoverOpen = true;
+    }
+    /**
+     * Closes the Inputs popover
+     * @private
+     * @returns Resolves when the Inputs popover is closed
+     */
+    closeInputsPopover() {
+        const popover = this._getInputsPopover();
+        popover.open = false;
+    }
+    toggleInputsPopover() {
+        if (this.isInputsPopoverOpen()) {
+            this.closeInputsPopover();
+        }
+        else if (this._canOpenInputsPopover()) {
+            this.openInputsPopover();
+        }
+    }
+    /**
+     * Checks if the inputs popover is open
+     * @private
+     */
+    isInputsPopoverOpen() {
+        return !!this._isInputsPopoverOpen;
+    }
+    submitInputsPopover() {
+        this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+        this.closeInputsPopover();
+    }
+    onInputsPopoverAfterOpen() {
+        const popover = this._getInputsPopover();
+        popover.querySelector("[ui5-time-selection-inputs]")._addNumericAttributes();
+    }
+    onInputsPopoverAfterClose() {
+        this._isInputsPopoverOpen = false;
+    }
+    _handleInputClick(e) {
+        const target = e.target;
+        if (this.open) {
+            return;
+        }
+        if (this._isMobileDevice && target && !target.hasAttribute("ui5-icon")) {
+            this.toggleInputsPopover();
+        }
+        const inputField = this._getInputField();
+        if (inputField) {
+            inputField.select();
+        }
+    }
+    _updateValueAndFireEvents(value, normalizeValue, eventsNames) {
+        if (value === this.value) {
+            return;
+        }
+        const valid = this.isValid(value);
+        if (value !== undefined && valid && normalizeValue) { // if value === undefined, valid is guaranteed to be falsy
+            value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+        }
+        if (!eventsNames.includes("input")) {
+            this.value = ""; // Do not remove! DurationPicker (an external component extending TimePicker) use case -> value is 05:10, user tries 05:12, after normalization value is changed back to 05:10 so no invalidation happens, but the input still shows 05:12. Thus we enforce invalidation with the ""
+            this.value = value;
+        }
+        this.tempValue = value; // if the picker is open, sync it
+        this._updateValueState(); // Change the value state to Error/None, but only if needed
+        eventsNames.forEach(eventName => {
+            this.fireDecoratorEvent(eventName, { value, valid });
+        });
+    }
+    _updateValueState() {
+        const isValid = this.isValid(this.value);
+        if (!isValid) { // If not valid - always set Error regardless of the current value state
+            this.valueState = ValueState.Negative;
+        }
+        else if (isValid && this.valueState === ValueState.Negative) { // However if valid, change only Error (but not the others) to None
+            this.valueState = ValueState.None;
+        }
+    }
+    _handleInputChange(e) {
+        const target = e.target;
+        this._updateValueAndFireEvents(target.value, true, ["change", "value-changed"]);
+    }
+    _handleInputLiveChange(e) {
+        const target = e.target;
+        this._updateValueAndFireEvents(target.value, false, ["input"]);
+    }
+    _canOpenPicker() {
+        return !this.disabled && !this.readonly;
+    }
+    _canOpenInputsPopover() {
+        return !this.disabled && this._isMobileDevice;
+    }
+    _getPopover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    _getInputsPopover() {
+        return this.shadowRoot.querySelector("[ui5-popover]");
+    }
+    _getInput() {
+        return this.shadowRoot.querySelector("[ui5-input]");
+    }
+    _getInputField() {
+        const input = this._getInput();
+        return input && input.getInputDOMRef();
+    }
+    _onkeydown(e) {
+        if (this._isMobileDevice && !this.isInputsPopoverOpen()) {
+            e.preventDefault();
+        }
+        if (isShow(e)) {
+            e.preventDefault();
+            this._togglePicker();
+        }
+        const target = e.target;
+        if (target && this.open && this._getInput().id === target.id && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+            this._togglePicker();
+        }
+        if (this.open) {
+            return;
+        }
+        if (isEnter(e)) {
+            if (this._internals.form) {
+                submitForm(this);
+            }
+        }
+        else if (isPageUpShiftCtrl(e)) {
+            e.preventDefault();
+            this._modifyValueBy(1, "second");
+        }
+        else if (isPageUpShift(e)) {
+            e.preventDefault();
+            this._modifyValueBy(1, "minute");
+        }
+        else if (isPageUp(e)) {
+            e.preventDefault();
+            this._modifyValueBy(1, "hour");
+        }
+        else if (isPageDownShiftCtrl(e)) {
+            e.preventDefault();
+            this._modifyValueBy(-1, "second");
+        }
+        else if (isPageDownShift(e)) {
+            e.preventDefault();
+            this._modifyValueBy(-1, "minute");
+        }
+        else if (isPageDown(e)) {
+            e.preventDefault();
+            this._modifyValueBy(-1, "hour");
+        }
+    }
+    get _isPattern() {
+        return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+    }
+    getFormat() {
+        let dateFormat;
+        if (this._isPattern) {
+            dateFormat = DateFormat.getDateInstance({
+                pattern: this._formatPattern,
+            });
+        }
+        else {
+            dateFormat = DateFormat.getDateInstance({
+                style: this._formatPattern,
+            });
+        }
+        return dateFormat;
+    }
+    /**
+     * Formats a Java Script date object into a string representing a locale date and time
+     * according to the `formatPattern` property of the TimePicker instance
+     * @param date A Java Script date object to be formatted as string
+     * @public
+     * @returns formatted value
+     */
+    formatValue(date) {
+        return this.getFormat().format(date);
+    }
+    /**
+     * Checks if a value is valid against the current `formatPattern` value.
+     *
+     * **Note:** an empty string is considered as valid value.
+     * @param value The value to be tested against the current date format
+     * @public
+     */
+    isValid(value) {
+        if (value === "") {
+            return true;
+        }
+        return !!this.getFormat().parse(value);
+    }
+    normalizeValue(value) {
+        if (value === "") {
+            return value;
+        }
+        return this.getFormat().format(this.getFormat().parse(value));
+    }
+    _modifyValueBy(amount, unit) {
+        const date = this.getFormat().parse(this._effectiveValue);
+        if (!date) {
+            return;
+        }
+        if (unit === "hour") {
+            date.setHours(date.getHours() + amount);
+        }
+        else if (unit === "minute") {
+            date.setMinutes(date.getMinutes() + amount);
+        }
+        else if (unit === "second") {
+            date.setSeconds(date.getSeconds() + amount);
+        }
+        const newValue = this.formatValue(date);
+        this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+    }
+    /**
+     * The listener for this event can't be passive as it calls preventDefault()
+     * @param e Wheel Event
+     * @private
+     */
+    _handleWheel(e) {
+        e.preventDefault();
+    }
+    /**
+     * Hides mobile device keyboard by temporary setting the input to readonly state.
+     */
+    _hideMobileKeyboard() {
+        this._getInput().readonly = true;
+        setTimeout(() => { this._getInput().readonly = false; }, 0);
+    }
+    _onfocusin(e) {
+        if (this._isMobileDevice) {
+            this._hideMobileKeyboard();
+            if (this._isInputsPopoverOpen) {
+                const popover = this._getInputsPopover();
+                popover.applyFocus();
+            }
+            e.preventDefault();
+        }
+    }
+    _oninput(e) {
+        if (this._isPhone) {
+            e.preventDefault();
+        }
+    }
+    get submitButtonLabel() {
+        return TimePicker_1.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+    }
+    get cancelButtonLabel() {
+        return TimePicker_1.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+    }
+    /**
+     * @protected
+     */
+    get openIconName() {
+        return "time-entry-request";
+    }
+};
+__decorate([
+    property()
+], TimePicker.prototype, "value", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "name", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimePicker.prototype, "readonly", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "formatPattern", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimePicker.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimePicker.prototype, "required", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TimePicker.prototype, "_isInputsPopoverOpen", void 0);
+__decorate([
+    slot()
+], TimePicker.prototype, "valueStateMessage", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TimePicker, "i18nBundle", void 0);
+TimePicker = TimePicker_1 = __decorate([
+    customElement({
+        tag: "ui5-time-picker",
+        languageAware: true,
+        cldr: true,
+        formAssociated: true,
+        renderer: litRender,
+        template: TimePickerTemplate,
+        styles: [
+            TimePickerCss,
+            ResponsivePopoverCommonCss,
+            TimePickerPopoverCss,
+        ],
+        dependencies: [
+            Icon,
+            Popover,
+            ResponsivePopover,
+            TimeSelectionClocks,
+            TimeSelectionInputs,
+            Input,
+            Button,
+        ],
+    })
+    /**
+     * Fired when the input operation has finished by clicking the "OK" button or
+     * when the text in the input field has changed and the focus leaves the input field.
+     * @public
+     * @param {string} value The submitted value.
+     * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
+     */
+    ,
+    event("change", {
+        detail: {
+            /**
+             * @public
+             */
+            value: {
+                type: String,
+            },
+            /**
+             * @public
+             */
+            valid: {
+                type: Boolean,
+            },
+        },
+        bubbles: true,
+    })
+    /**
+     * Fired when the value of the `ui5-time-picker` is changed at each key stroke.
+     * @public
+     * @param {string} value The current value.
+     * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
+     */
+    ,
+    event("input", {
+        detail: {
+            /**
+             * @public
+             */
+            value: {
+                type: String,
+            },
+            /**
+             * @public
+             */
+            valid: {
+                type: Boolean,
+            },
+        },
+        bubbles: true,
+    })
+    /**
+     * Fired after the value-help dialog of the component is opened.
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("open", {
+        bubbles: true,
+    })
+    /**
+     * Fired after the value-help dialog of the component is closed.
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("close", {
+        bubbles: true,
+    })
+], TimePicker);
 TimePicker.define();
-
 export default TimePicker;
+//# sourceMappingURL=TimePicker.js.map