@ui5/webcomponents 0.0.0-97cba4b0b → 0.0.0-99b763015

package/src/TimePicker.ts

@@ -1,155 +0,0 @@
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import TimePickerBase from "./TimePickerBase.js";
-
-import {
-	TIMEPICKER_INPUT_DESCRIPTION,
-} from "./generated/i18n/i18n-defaults.js";
-
-/**
- * @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.webc.main.TimePicker
- * @extends sap.ui.webc.main.TimePickerBase
- * @tagname ui5-time-picker
- * @public
- * @since 1.0.0-rc.6
- */
-@customElement("ui5-time-picker")
-class TimePicker extends TimePickerBase {
-	/**
-	 * 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}
-	 * @name sap.ui.webc.main.TimePicker.prototype.placeholder
-	 * @defaultvalue undefined
-	 * @public
-	 */
-	@property({ defaultValue: undefined })
-	placeholder?: string;
-
-	/**
-	 * 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}
-	 * @name sap.ui.webc.main.TimePicker.prototype.formatPattern
-	 * @defaultvalue ""
-	 * @public
-	 */
-	@property()
-	formatPattern!: string;
-
-	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 as string;
-	}
-
-	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
-	}
-
-	/**
-	 * Currently selected time represented as JavaScript Date instance
-	 *
-	 * @readonly
-	 * @type {Date}
-	 * @public
-	 * @name sap.ui.webc.main.TimePicker.prototype.dateValue
-	 */
-	get dateValue() {
-		return this.getFormat().parse(this._effectiveValue as string, undefined as unknown as boolean, undefined as unknown as boolean);
-	}
-
-	get accInfo() {
-		return {
-			"ariaRoledescription": this.dateAriaDescription,
-			"ariaHasPopup": "dialog",
-			"ariaAutoComplete": "none",
-			"ariaControls": `${this._id}-responsive-popover`,
-		};
-	}
-
-	get dateAriaDescription() {
-		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
-	}
-}
-
-TimePicker.define();
-
-export default TimePicker;

package/src/TimePickerBase.ts

@@ -1,494 +0,0 @@
-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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle 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,
-	isTabNext,
-	isTabPrevious,
-	isF6Next,
-	isF6Previous,
-} 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 type { TimeSelectionChangeEventDetail } 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";
-
-/**
- * @class
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.TimePickerBase
- * @extends sap.ui.webc.base.UI5Element
- * @public
- * @since 1.0.0-rc.6
- */
-@customElement({
-	languageAware: true,
-	renderer: litRender,
-	template: TimePickerTemplate,
-	styles: TimePickerCss,
-	staticAreaTemplate: TimePickerPopoverTemplate,
-	staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss],
-	dependencies: [
-		Icon,
-		ResponsivePopover,
-		TimeSelection,
-		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.
-*
-* @event sap.ui.webc.main.TimePickerBase#change
- * @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: {
-		value: {
-			type: String,
-		},
-		valid: {
-			type: Boolean,
-		},
-	},
-})
-
-/**
- * Fired when the value of the <code>ui5-time-picker</code> is changed at each key stroke.
- *
- * @event sap.ui.webc.main.TimePickerBase#input
- * @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: {
-		value: {
-			type: String,
-		},
-		valid: {
-			type: Boolean,
-		},
-	},
-})
-class TimePickerBase extends UI5Element {
-	/**
-	 * Defines a formatted time value.
-	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.TimePickerBase.prototype.value
-	 * @defaultvalue undefined
-	 * @formEvents change input
-	 * @formProperty
-	 * @public
-	 */
-	@property({ defaultValue: undefined })
-	value?: string;
-
-	/**
-	 * 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 {sap.ui.webc.base.types.ValueState}
-	 * @name sap.ui.webc.main.TimePickerBase.prototype.valueState
-	 * @defaultvalue "None"
-	 * @public
-	 */
-	@property({ type: ValueState, defaultValue: ValueState.None })
-	valueState!: ValueState;
-
-	/**
-	 * Determines whether the <code>ui5-time-picker</code> is displayed as disabled.
-	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.TimePickerBase.prototype.disabled
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	disabled!: boolean;
-
-	/**
-	 * Determines whether the <code>ui5-time-picker</code> is displayed as readonly.
-	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.TimePickerBase.prototype.readonly
-	 * @defaultvalue false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	readonly!: boolean;
-
-	@property({ type: Boolean, noAttribute: true })
-	_isPickerOpen!: boolean;
-
-	/**
-	 * 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}
-	 * @name sap.ui.webc.main.TimePickerBase.prototype.valueStateMessage
-	 * @since 1.0.0-rc.8
-	 * @slot
-	 * @public
-	 */
-	@slot()
-	valueStateMessage!: Array<HTMLElement>;
-
-	tempValue?: string;
-
-	static i18nBundle: I18nBundle;
-
-	static async onDefine() {
-		[TimePickerBase.i18nBundle] = await Promise.all([
-			getI18nBundle("@ui5/webcomponents"),
-			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-		]);
-	}
-
-	constructor() {
-		super();
-	}
-
-	/**
-	 * @abstract
-	 * @protected
-	 */
-	get _placeholder(): string | undefined {
-		return undefined;
-	}
-
-	/**
-	 * @abstract
-	 * @protected
-	 */
-	get _formatPattern(): string | undefined {
-		return undefined;
-	}
-
-	get _effectiveValue() {
-		return this.value;
-	}
-
-	get _timeSelectionValue() {
-		return this.tempValue;
-	}
-
-	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
-		this.tempValue = e.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 as HTMLInputElement).select();
-		}
-	}
-
-	_updateValueAndFireEvents(value: string | undefined, normalizeValue: boolean, eventsNames: Array<string>) {
-		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 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.fireEvent(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.Error;
-		} else if (isValid && this.valueState === ValueState.Error) { // However if valid, change only Error (but not the others) to None
-			this.valueState = ValueState.None;
-		}
-	}
-
-	_handleInputChange(e: CustomEvent) {
-		const target = e.target as Input;
-		this._updateValueAndFireEvents(target.value, true, ["change", "value-changed"]);
-	}
-
-	_handleInputLiveChange(e: CustomEvent) {
-		const target = e.target as Input;
-		this._updateValueAndFireEvents(target.value, false, ["input"]);
-	}
-
-	/**
-	 * Closes the picker
-	 * @public
-	 * @method
-	 * @name sap.ui.webc.main.TimePickerBase#closePicker
-	 */
-	async closePicker() {
-		const responsivePopover = await this._getPopover();
-		responsivePopover.close();
-		this._isPickerOpen = false;
-	}
-
-	/**
-	 * Opens the picker.
-	 * @async
-	 * @public
-	 * @method
-	 * @name sap.ui.webc.main.TimePickerBase#openPicker
-	 * @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
-	 * @method
-	 * @name sap.ui.webc.main.TimePickerBase#isOpen
-	 * @returns {boolean}
-	 */
-	isOpen() {
-		return !!this._isPickerOpen;
-	}
-
-	_canOpenPicker() {
-		return !this.disabled && !this.readonly;
-	}
-
-	async _getPopover() {
-		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
-	}
-
-	_getInput(): Input {
-		return this.shadowRoot!.querySelector<Input>("[ui5-input]")!;
-	}
-
-	_getInputField() {
-		const input = this._getInput();
-		return input && input.getInputDOMRef();
-	}
-
-	_onkeydown(e: KeyboardEvent) {
-		if (isShow(e)) {
-			e.preventDefault();
-			this.togglePicker();
-		}
-
-		const target = e.target as Node;
-		if ((this._getInput().isEqualNode(target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
-			this.closePicker();
-		}
-
-		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.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 <code>formatPattern</code> property of the TimePicker instance
-	 * @param {object} date A Java Script date object to be formatted as string
-	 * @public
-	 * @method
-	 * @name sap.ui.webc.main.TimePickerBase#formatValue
-	 * @returns {string}
-	 */
-	formatValue(date: 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
-	 * @method
-	 * @name sap.ui.webc.main.TimePickerBase#isValid
-	 * @returns {boolean}
-	 */
-	isValid(value: string | undefined) {
-		if (value === "") {
-			return true;
-		}
-
-		return !!this.getFormat().parse(value as string, undefined as unknown as boolean, undefined as unknown as boolean);
-	}
-
-	normalizeValue(value: string) {
-		if (value === "") {
-			return value;
-		}
-
-		return this.getFormat().format(this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean));
-	}
-
-	_modifyValueBy(amount: number, unit: string) {
-		const date = this.getFormat().parse(this._effectiveValue as string, undefined as unknown as boolean, undefined as unknown as boolean) as Date;
-		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"]);
-	}
-
-	/**
-	 *
-	 * @param {event} e Wheel Event
-	 * @private
-	 *
-	 * The listener for this event can't be passive as it calls preventDefault()
-	 */
-	_handleWheel(e: WheelEvent) {
-		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;