@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/TimePicker.js

@@ -5,83 +5,143 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var TimePicker_1;
+import { isPhone } 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 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 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";
+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 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 TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js";
+import Input from "./Input.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, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import TimePickerCss from "./generated/themes/TimePicker.css.js";
+import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js";
+import PopoverCss from "./generated/themes/Popover.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-time-picker</code> component provides an input field with assigned clocks which are opened on user action.
- * The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input.
+ * ### 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 clocks that are displayed in a popup</li>
- * <li>Typing it in directly in the input field</li>
- * </ul>
- * <br><br>
+ *
+ * - 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 <code>ui5-time-picker</code>
+ * For the `ui5-time-picker`
  *
- * <h3>Formatting</h3>
+ * ### 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">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>Keyboard handling</h3>
- * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
- * <br>
+ * ### Keyboard handling
+ * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.
+ *
  * 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>
- * <li>
- * </ul>
+ *
+ * - [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:
- * <ul>
- * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>
- * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>
- * <li>[SHIFT]+[PAGEUP] - Increments minutes by 1.</li>
- * <li>[SHIFT]+[PAGEDOWN] - Decrements minutes by 1.</li>
- * <li>[SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.</li>
- * <li>[SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.</li>
- * <li>[A] or [P] - Selects AM or PM respectively.</li>
- * <li>[0]-[9] - Allows direct time selecting (hours/minutes/seconds).</li>
- * <li>[:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
+ * - [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.
  *
- * <code>import "@ui5/webcomponents/dist/TimePicker.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/TimePicker.js";`
  * @constructor
- * @extends TimePickerBase
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.6
  */
-let TimePicker = TimePicker_1 = class TimePicker extends TimePickerBase {
+let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
+    static async onDefine() {
+        [TimePicker_1.i18nBundle] = await Promise.all([
+            getI18nBundle("@ui5/webcomponents"),
+            fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+        ]);
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value || "";
+    }
     onBeforeRendering() {
         if (this.value) {
             this.value = this.normalizeValue(this.value) || this.value;
         }
     }
+    get dateAriaDescription() {
+        return TimePicker_1.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+    }
+    get accInfo() {
+        return {
+            "ariaRoledescription": this.dateAriaDescription,
+            "ariaHasPopup": "dialog",
+        };
+    }
+    /**
+     * 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;
@@ -92,38 +152,426 @@ let TimePicker = TimePicker_1 = class TimePicker extends TimePickerBase {
         // @ts-ignore oFormatOptions is a private API of DateFormat
         return this.getFormat().oFormatOptions.pattern;
     }
-    get _placeholder() {
-        return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+    get _effectiveValue() {
+        return this.value;
+    }
+    get _timeSelectionValue() {
+        return this.tempValue;
+    }
+    get _isPhone() {
+        return isPhone();
+    }
+    onTimeSelectionChange(e) {
+        this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
     }
     /**
-     * Currently selected time represented as JavaScript Date instance
+     * Opens the picker.
+     * @public
+     * @returns Resolves when the picker is open
+     */
+    openPicker() {
+        this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
+        const responsivePopover = this._getPopover();
+        responsivePopover.opener = this;
+        responsivePopover.open = true;
+    }
+    /**
+     * Closes the picker
+     * @public
+     * @returns Resolves when the picker is closed
+     */
+    closePicker() {
+        const responsivePopover = this._getPopover();
+        responsivePopover.open = false;
+        this._isPickerOpen = false;
+    }
+    togglePicker() {
+        if (this.isOpen()) {
+            this.closePicker();
+        }
+        else if (this._canOpenPicker()) {
+            this.openPicker();
+        }
+    }
+    /**
+     * Checks if the picker is open
+     * @public
+     */
+    isOpen() {
+        return !!this._isPickerOpen;
+    }
+    submitPickers() {
+        this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+        this.closePicker();
+    }
+    onResponsivePopoverAfterClose() {
+        this._isPickerOpen = false;
+    }
+    onResponsivePopoverAfterOpen() {
+        this._isPickerOpen = true;
+        const responsivePopover = this._getPopover();
+        responsivePopover.querySelector("[ui5-time-selection-clocks]")._focusFirstButton();
+    }
+    /**
+     * 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(evt) {
+        const target = evt.target;
+        if (this._isPickerOpen) {
+            return;
+        }
+        if (this._isPhone && 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.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.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._isPhone;
+    }
+    _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._isPhone && !this.isInputsPopoverOpen()) {
+            e.preventDefault();
+        }
+        if (isShow(e)) {
+            e.preventDefault();
+            this.togglePicker();
+        }
+        const target = e.target;
+        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 `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
-     * @default null
      */
-    get dateValue() {
-        return this.getFormat().parse(this._effectiveValue);
+    isValid(value) {
+        if (value === "") {
+            return true;
+        }
+        return !!this.getFormat().parse(value);
     }
-    get accInfo() {
-        return {
-            "ariaRoledescription": this.dateAriaDescription,
-            "ariaHasPopup": "dialog",
-            "ariaAutoComplete": "none",
-            "ariaControls": `${this._id}-responsive-popover`,
-        };
+    normalizeValue(value) {
+        if (value === "") {
+            return value;
+        }
+        return this.getFormat().format(this.getFormat().parse(value));
     }
-    get dateAriaDescription() {
-        return TimePicker_1.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+    _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(evt) {
+        if (this._isPhone) {
+            this._hideMobileKeyboard();
+            if (this._isInputsPopoverOpen) {
+                const popover = this._getInputsPopover();
+                popover.applyFocus();
+            }
+            evt.preventDefault();
+        }
+    }
+    _oninput(evt) {
+        if (this._isPhone) {
+            evt.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({ type: String, defaultValue: undefined })
+], TimePicker.prototype, "value", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "name", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], 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({ defaultValue: undefined })
 ], TimePicker.prototype, "placeholder", void 0);
 __decorate([
     property()
 ], TimePicker.prototype, "formatPattern", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TimePicker.prototype, "_isPickerOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TimePicker.prototype, "_isInputsPopoverOpen", void 0);
+__decorate([
+    slot()
+], TimePicker.prototype, "valueStateMessage", void 0);
 TimePicker = TimePicker_1 = __decorate([
-    customElement("ui5-time-picker")
+    customElement({
+        tag: "ui5-time-picker",
+        languageAware: true,
+        formAssociated: true,
+        renderer: litRender,
+        template: TimePickerTemplate,
+        styles: [
+            TimePickerCss,
+            ResponsivePopoverCommonCss,
+            PopoverCss,
+            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,
+            },
+        },
+    })
+    /**
+     * 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,
+            },
+        },
+    })
 ], TimePicker);
 TimePicker.define();
 export default TimePicker;