@ui5/webcomponents 0.0.0-323968e1b → 0.0.0-4180fe799

package/dist/TimePicker.js

@@ -0,0 +1,166 @@
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import TimePickerBase from "./TimePickerBase.js";
+
+import {
+	TIMEPICKER_INPUT_DESCRIPTION,
+} from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	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
+		 * 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 component 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,
+		},
+	},
+};
+
+/**
+ * @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.
+ *
+ * <h3>Usage</h3>
+ * The user can enter a time by:
+ * <ul>
+ * <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-time-picker</code>
+ *
+ * <h3>Formatting</h3>
+ *
+ * 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",
+ * 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>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.TimePicker
+ * @extends TimePickerBase
+ * @tagname ui5-time-picker
+ * @public
+ * @since 1.0.0-rc.6
+ */
+class TimePicker extends TimePickerBase {
+	static get metadata() {
+		return metadata;
+	}
+
+	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() {
+		return this.getFormat().oFormatOptions.pattern;
+	}
+
+	get _placeholder() {
+		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+	}
+
+	/**
+	 * Currently selected time represented as JavaScript Date instance
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValue() {
+		return this.getFormat().parse(this._effectiveValue);
+	}
+
+	get accInfo() {
+		return {
+			"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();
+
+export default TimePicker;

package/dist/TimePickerBase.js

@@ -0,0 +1,463 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { 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 "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import {
+	isShow,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/time-entry-request.js";
+import Icon from "./Icon.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+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 {
+	TIMEPICKER_SUBMIT_BUTTON,
+	TIMEPICKER_CANCEL_BUTTON,
+} 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 = {
+	languageAware: true,
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+		/**
+		 * Defines a formatted time value.
+		 *
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @public
+		 */
+		value: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Defines the value state of the <code>ui5-time-picker</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-time-picker</code> is displayed as disabled.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Determines whether the <code>ui5-time-picker</code> is displayed as readonly.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		readonly: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_isPickerOpen: {
+			type: Boolean,
+			noAttribute: true,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+		/**
+		 * Defines the value state message that will be displayed as pop up under the <code>ui5-time-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-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * @type {HTMLElement}
+		 * @since 1.0.0-rc.8
+		 * @slot
+		 * @public
+		 */
+		valueStateMessage: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.TimePickerBase.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-time-picker</code> is changed at each key stroke.
+		 *
+		 * @event
+		 * @public
+		*/
+		input: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.TimePickerBase
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.6
+ */
+class TimePickerBase 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 get dependencies() {
+		return [
+			Icon,
+			ResponsivePopover,
+			TimeSelection,
+			Input,
+			Button,
+		];
+	}
+
+	static async onDefine() {
+		[TimePickerBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+
+	static get staticAreaStyles() {
+		return [ResponsivePopoverCommonCss, TimePickerPopoverCss];
+	}
+
+	constructor() {
+		super();
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 */
+	get _placeholder() {
+		return undefined;
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 */
+	get _formatPattern() {
+		return undefined;
+	}
+
+	get _effectiveValue() {
+		return this.value;
+	}
+
+	get _timeSelectionValue() {
+		return this.tempValue;
+	}
+
+	onTimeSelectionChange(event) {
+		this.tempValue = event.detail.value; // every time the user changes the sliders -> update tempValue
+	}
+
+	submitPickers() {
+		this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+		this.closePicker();
+	}
+
+	onResponsivePopoverAfterClose() {
+		this._isPickerOpen = false;
+	}
+
+	async _handleInputClick() {
+		if (this._isPickerOpen) {
+			return;
+		}
+
+		const inputField = await this._getInputField();
+
+		if (inputField) {
+			inputField.select();
+		}
+	}
+
+	_updateValueAndFireEvents(value, normalizeValue, events) {
+		if (value === this.value) {
+			return;
+		}
+
+		const valid = this.isValid(value);
+		if (valid && normalizeValue) {
+			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+		}
+
+		this.value = ""; // Do not remove! DurationPicker 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
+		events.forEach(event => {
+			this.fireEvent(event, { 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.Error;
+		} else if (isValid && this.valueState === ValueState.Error) { // However if valid, change only Error (but not the others) to None
+			this.valueState = ValueState.None;
+		}
+	}
+
+	async _handleInputChange(event) {
+		this._updateValueAndFireEvents(event.target.value, true, ["change", "value-changed"]);
+	}
+
+	async _handleInputLiveChange(event) {
+		this._updateValueAndFireEvents(event.target.value, false, ["input"]);
+	}
+
+	/**
+	 * Closes the picker
+	 * @public
+	 */
+	async closePicker() {
+		const responsivePopover = await this._getPopover();
+		responsivePopover.close();
+		this._isPickerOpen = false;
+	}
+
+	/**
+	 * Opens the picker.
+	 * @async
+	 * @public
+	 * @returns {Promise} Resolves when the picker is open
+	 */
+	async openPicker() {
+		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
+		const responsivePopover = await this._getPopover();
+		responsivePopover.showAt(this);
+		this._isPickerOpen = true;
+	}
+
+	togglePicker() {
+		if (this.isOpen()) {
+			this.closePicker();
+		} else if (this._canOpenPicker()) {
+			this.openPicker();
+		}
+	}
+
+	/**
+	 * Checks if the picker is open
+	 * @public
+	 * @returns {boolean}
+	 */
+	isOpen() {
+		return !!this._isPickerOpen;
+	}
+
+	_canOpenPicker() {
+		return !this.disabled && !this.readonly;
+	}
+
+	async _getPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("[ui5-responsive-popover]");
+	}
+
+	_getInput() {
+		return this.shadowRoot.querySelector("[ui5-input]");
+	}
+
+	_getInputField() {
+		const input = this._getInput();
+		return input && input.getInputDOMRef();
+	}
+
+	_onkeydown(e) {
+		if (isShow(e)) {
+			e.preventDefault();
+			this.togglePicker();
+		}
+
+		if (this.isOpen()) {
+			return;
+		}
+
+		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.getInstance({
+				pattern: this._formatPattern,
+			});
+		} else {
+			dateFormat = DateFormat.getInstance({
+				style: this._formatPattern,
+			});
+		}
+
+		return dateFormat;
+	}
+
+	/**
+	 * Formats a Java Script date object into a string representing a locale date and time
+	 * according to the <code>formatPattern</code> property of the TimePicker instance
+	 * @param {object} date A Java Script date object to be formatted as string
+	 * @public
+	 * @returns {string}
+	 */
+	formatValue(date) {
+		return this.getFormat().format(date);
+	}
+
+	/**
+	 * Checks if a value is valid against the current <code>formatPattern</code> value.
+	 *
+	 * <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
+	 * @returns {boolean}
+	 */
+	isValid(value) {
+		return value === "" || 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"]);
+	}
+
+	_handleWheel(e) {
+		e.preventDefault();
+	}
+
+	get submitButtonLabel() {
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+	}
+
+	get cancelButtonLabel() {
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+	}
+
+	/**
+	 * @protected
+	 */
+	get openIconName() {
+		return "time-entry-request";
+	}
+}
+
+export default TimePickerBase;