@ui5/webcomponents 1.0.0-rc.6 → 1.0.0

package/dist/TimePicker.js

@@ -1,67 +1,25 @@
-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 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 "@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 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 getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import TimePickerBase from "./TimePickerBase.js";
+
 import {
-	TIMEPICKER_HOURS_LABEL,
-	TIMEPICKER_MINUTES_LABEL,
-	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
-	TIMEPICKER_SUBMIT_BUTTON,
-	TIMEPICKER_CANCEL_BUTTON,
+	TIMEPICKER_INPUT_DESCRIPTION,
 } 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 ""
-		 * @public
-		 */
-		value: {
-			type: String,
-			defaultValue: "",
-		},
-
+	tag: "ui5-time-picker",
+	altTag: "ui5-timepicker",
+	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-timepicker</code> has no value.
+		 * component 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.
+		 * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -87,90 +45,6 @@ const metadata = {
 		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 {string}
-		 * @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: {},
 	},
 };
 
@@ -178,21 +52,21 @@ const metadata = {
  * @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,
+ * 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.
  *
  * <h3>Usage</h3>
  * The user can enter a time by:
  * <ul>
- * <li>Using the sliders that opens in a popup</li>
+ * <li>Using the sliders 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.
- * For the <code>ui5-timepicker</code>
+ * For the <code>ui5-time-picker</code>
  *
  * <h3>Formatting</h3>
  *
@@ -205,354 +79,51 @@ const metadata = {
  * For example, if the <code>format-pattern</code> is "HH:mm:ss",
  * a valid value string is "11:42:35" and the same is displayed in the input.
  *
+ * <h3>Keyboard handling</h3>
+ * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
+ * <br>
+ * When closed:
+ * <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>
+ * </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>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/TimePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/TimePicker.js";</code>
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TimePicker
- * @extends UI5Element
- * @tagname ui5-timepicker
+ * @extends TimePickerBase
+ * @tagname ui5-time-picker
  * @public
  * @since 1.0.0-rc.6
  */
-class TimePicker extends UI5Element {
+class TimePicker extends TimePickerBase {
 	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);
-		}
-
-		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;
-	}
-
-	generateTimeItemsArray(x) {
-		const array = [];
-		for (let i = 0; i < x; i++) {
-			let tempString = i.toString();
-			if (tempString.length === 1) {
-				tempString = `0${tempString}`;
-			}
-
-			array.push(tempString);
-		}
-
-		return array;
-	}
-
-	get secondsArray() {
-		return this.generateTimeItemsArray(60);
-	}
-
-	get minutesArray() {
-		return this.generateTimeItemsArray(60);
-	}
-
-	get hoursArray() {
-		let hoursValueArray = [];
-
-		if (this._hoursParameters.isTwelveHoursFormat) {
-			hoursValueArray = this.generateTimeItemsArray(12);
-		} else {
-			hoursValueArray = this.generateTimeItemsArray(24);
-		}
-
-		if (this._hoursParameters.minHour === 1) {
-			for (let i = 0; i < hoursValueArray.length; i++) {
-				const tempValue = hoursValueArray[i] * 1 + 1;
-
-				if (tempValue.toString().length === 1) {
-					hoursValueArray[i] = `0${tempValue.toString()}`;
-				} else {
-					hoursValueArray[i] = tempValue.toString();
-				}
-			}
-		}
-
-		return hoursValueArray;
-	}
-
-	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,
-			hours = hoursSlider ? hoursSlider.getAttribute("value") : this._hoursParameters.minHour.toString(),
-			minutes = minutesSlider ? minutesSlider.getAttribute("value") : "0",
-			seconds = secondsSlider ? secondsSlider.getAttribute("value") : "0",
-			period = periodsSlider ? periodsSlider.getAttribute("value") : this.periodsArray[0];
-
-		if (period === this.periodsArray[1]) {
-			selectedDate.setHours(hours * 1 + 12);
-		} else {
-			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();
-	}
-
-	/**
-	 * Opens the picker.
-	 * @public
-	 */
-	isValid(value = "") {
-		return !!(value && this.getFormat().parse(value));
-	}
-
-	normalizeValue(sValue) {
-		return this.getFormat().format(this.getFormat().parse(sValue));
-	}
-
 	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
+		const hasHours = !!this.formatPattern.match(/H/i);
+		const fallback = !this.formatPattern || !hasHours;
 
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return fallback ? localeData.getTimePattern("medium") : this.formatPattern;
 	}
 
 	get _displayFormat() {
@@ -563,229 +134,31 @@ class TimePicker extends UI5Element {
 		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();
-		}
-	}
-
-	_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]) {
-			e.preventDefault();
-			this.getStaticAreaItemDomRef().querySelector(".ui5-timepicker-footer").firstElementChild.focus();
-		} else if (isTabPrevious(e) && e.target === this._slidersDomRefs[0]) {
-			e.preventDefault();
-			this.getStaticAreaItemDomRef().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();
-		}
-	}
-
-	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,
-			slidersBuildArray = [false, false, false, false]; // hours minutes seconds am/pm
-
-		for (let i = 0; i < formatArray.length; i++) {
-			if (this._hoursParameters.maxHour !== 0) {
-				slidersBuildArray[0] = true;
-			}
-			if (this._hoursParameters.maxHour !== 0 && this._hoursParameters.isTwelveHoursFormat) {
-				slidersBuildArray[0] = true;
-			}
-			if (formatArray[i].type === "minute") {
-				slidersBuildArray[1] = true;
-			}
-			if (formatArray[i].type === "second") {
-				slidersBuildArray[2] = true;
-			}
-			if (formatArray[i].type === "amPmMarker") {
-				slidersBuildArray[3] = true;
-			}
-		}
-
-		return slidersBuildArray;
-	}
-
-	_initHoursFormatParameters() {
-		const formatArray = this.getFormat().aFormatArray;
-
-		if (formatArray[0].type === "hour0_23") {
-			this._hoursParameters.minHour = 0;
-			this._hoursParameters.maxHour = 23;
-			this._hoursParameters.isTwelveHoursFormat = false;
-		} else if (formatArray[0].type === "hour1_24") {
-			this._hoursParameters.minHour = 1;
-			this._hoursParameters.maxHour = 24;
-			this._hoursParameters.isTwelveHoursFormat = false;
-		} else if (formatArray[0].type === "hour0_11") {
-			this._hoursParameters.minHour = 0;
-			this._hoursParameters.maxHour = 11;
-			this._hoursParameters.isTwelveHoursFormat = true;
-		} else if (formatArray[0].type === "hour1_12") {
-			this._hoursParameters.minHour = 1;
-			this._hoursParameters.maxHour = 12;
-			this._hoursParameters.isTwelveHoursFormat = true;
-		}
-	}
-
 	/**
-	 * Currently selected date represented as JavaScript Date instance
+	 * Currently selected time represented as JavaScript Date instance
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
-	}
-
-	get shouldBuildHoursSlider() {
-		return this._getSlidersContained()[0];
+		return this.getFormat().parse(this._effectiveValue);
 	}
 
-	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() {
+	get accInfo() {
 		return {
-			container: {
-				"ui5-timepicker-sliders-container": true,
-				"ui5-phone": isPhone(),
-			},
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": "dialog",
+			"ariaAutoComplete": "none",
+			"role": "combobox",
+			"ariaControls": `${this._id}-responsive-popover`,
+			"ariaExpanded": this.isOpen(),
 		};
 	}
+
+	get dateAriaDescription() {
+		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+	}
 }
 
 TimePicker.define();