@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

package/dist/TimePicker.js

@@ -15,20 +15,19 @@ 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.
+ * 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.
+ * It consists of two parts: the time input field and the clocks.
  *
  * <h3>Usage</h3>
  * The user can enter a time by:
  * <ul>
- * <li>Using the sliders that are displayed in a popup</li>
+ * <li>Using the clocks 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.
+ * 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>
  *
  * <h3>Formatting</h3>
@@ -49,19 +48,23 @@ import { TIMEPICKER_INPUT_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js
  * <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>[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>
  * 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>
+ * <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>
@@ -77,6 +80,11 @@ import { TIMEPICKER_INPUT_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js
  * @since 1.0.0-rc.6
  */
 let TimePicker = TimePicker_1 = class TimePicker extends TimePickerBase {
+    onBeforeRendering() {
+        if (this.value) {
+            this.value = this.normalizeValue(this.value) || this.value;
+        }
+    }
     get _formatPattern() {
         const hasHours = !!this.formatPattern.match(/H/i);
         const fallback = !this.formatPattern || !hasHours;
@@ -99,7 +107,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends TimePickerBase {
      * @name sap.ui.webc.main.TimePicker.prototype.dateValue
      */
     get dateValue() {
-        return this.getFormat().parse(this._effectiveValue, undefined, undefined);
+        return this.getFormat().parse(this._effectiveValue);
     }
     get accInfo() {
         return {

package/dist/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,SAAS,MAAM,kDAAkD,CAAC;AACzE,OAAO,2BAA2B,MAAM,qEAAqE,CAAC;AAC9G,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EACN,4BAA4B,GAC5B,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAEH,IAAM,UAAU,kBAAhB,MAAM,UAAW,SAAQ,cAAc;IAiCtC,IAAI,cAAc;QACjB,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC;QAElD,MAAM,UAAU,GAAG,2BAA2B,CAAC,SAAS,EAAE,CAAC,CAAC;QAC5D,OAAO,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IAC5E,CAAC;IAED,IAAI,cAAc;QACjB,2DAA2D;QAC3D,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,OAAiB,CAAC;IAC1D,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IAChF,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,eAAyB,EAAE,SAA+B,EAAE,SAA+B,CAAC,CAAC;IACjI,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,qBAAqB,EAAE,IAAI,CAAC,mBAAmB;YAC/C,cAAc,EAAE,QAAQ;YACxB,kBAAkB,EAAE,MAAM;YAC1B,cAAc,EAAE,GAAG,IAAI,CAAC,GAAG,qBAAqB;SAChD,CAAC;IACH,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,YAAU,CAAC,UAAU,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;IACpE,CAAC;CACD,CAAA;AA3DA;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;+CACjB;AAgBrB;IADC,QAAQ,EAAE;iDACY;AA/BlB,UAAU;IADf,aAAa,CAAC,iBAAiB,CAAC;GAC3B,UAAU,CA0Ef;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport TimePickerBase from \"./TimePickerBase.js\";\n\nimport {\n\tTIMEPICKER_INPUT_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-time-picker</code> component provides an input field with assigned sliders which are opened on user action.\n * The <code>ui5-time-picker</code> allows users to select a localized time using touch,\n * mouse, or keyboard input. It consists of two parts: the time input field and the\n * sliders.\n *\n * <h3>Usage</h3>\n * The user can enter a time by:\n * <ul>\n * <li>Using the sliders that are displayed in a popup</li>\n * <li>Typing it in directly in the input field</li>\n * </ul>\n * <br><br>\n * When the user makes an entry and chooses the enter key, the sliders shows the corresponding time.\n * When the user directly triggers the sliders display, the actual time is displayed.\n * For the <code>ui5-time-picker</code>\n *\n * <h3>Formatting</h3>\n *\n * If a time is entered by typing it into\n * the input field, it must fit to the used time format.\n * <br><br>\n * Supported format options are pattern-based on Unicode LDML Date Format notation.\n * 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>.\n * <br><br>\n * For example, if the <code>format-pattern</code> is \"HH:mm:ss\",\n * a valid value string is \"11:42:35\" and the same is displayed in the input.\n *\n * <h3>Keyboard handling</h3>\n * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.\n * <br>\n * When closed:\n * <ul>\n * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>\n * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>\n * <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li>\n * <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li>\n * <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li>\n * <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li>\n * </ul>\n * When opened:\n * <ul>\n * <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>\n * <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>\n * <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>\n * <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>\n * <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li>\n * <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/TimePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TimePicker\n * @extends sap.ui.webc.main.TimePickerBase\n * @tagname ui5-time-picker\n * @public\n * @since 1.0.0-rc.6\n */\n@customElement(\"ui5-time-picker\")\nclass TimePicker extends TimePickerBase {\n\t/**\n\t * Defines a short hint, intended to aid the user with data entry when the\n\t * component has no value.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.\n\t * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimePicker.prototype.placeholder\n\t * @defaultvalue undefined\n\t * @public\n\t */\n\t@property({ defaultValue: undefined })\n\tplaceholder?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t *\n\t * Example:\n\t * HH:mm:ss -> 11:42:35\n\t * hh:mm:ss a -> 2:23:15 PM\n\t * mm:ss -> 12:04 (only minutes and seconds)\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimePicker.prototype.formatPattern\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tformatPattern!: string;\n\n\tget _formatPattern() {\n\t\tconst hasHours = !!this.formatPattern.match(/H/i);\n\t\tconst fallback = !this.formatPattern || !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getTimePattern(\"medium\") : this.formatPattern;\n\t}\n\n\tget _displayFormat() {\n\t\t// @ts-ignore oFormatOptions is a private API of DateFormat\n\t\treturn this.getFormat().oFormatOptions.pattern as string;\n\t}\n\n\tget _placeholder() {\n\t\treturn this.placeholder !== undefined ? this.placeholder : this._displayFormat;\n\t}\n\n\t/**\n\t * Currently selected time represented as JavaScript Date instance\n\t *\n\t * @readonly\n\t * @type {Date}\n\t * @public\n\t * @name sap.ui.webc.main.TimePicker.prototype.dateValue\n\t */\n\tget dateValue() {\n\t\treturn this.getFormat().parse(this._effectiveValue as string, undefined as unknown as boolean, undefined as unknown as boolean);\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"ariaRoledescription\": this.dateAriaDescription,\n\t\t\t\"ariaHasPopup\": \"dialog\",\n\t\t\t\"ariaAutoComplete\": \"none\",\n\t\t\t\"ariaControls\": `${this._id}-responsive-popover`,\n\t\t};\n\t}\n\n\tget dateAriaDescription() {\n\t\treturn TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);\n\t}\n}\n\nTimePicker.define();\n\nexport default TimePicker;\n"]}
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,SAAS,MAAM,kDAAkD,CAAC;AACzE,OAAO,2BAA2B,MAAM,qEAAqE,CAAC;AAC9G,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAOjD,OAAO,EACN,4BAA4B,GAC5B,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,IAAM,UAAU,kBAAhB,MAAM,UAAW,SAAQ,cAAc;IAiCtC,iBAAiB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;SAC3D;IACF,CAAC;IAED,IAAI,cAAc;QACjB,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC;QAElD,MAAM,UAAU,GAAG,2BAA2B,CAAC,SAAS,EAAE,CAAC,CAAC;QAC5D,OAAO,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IAC5E,CAAC;IAED,IAAI,cAAc;QACjB,2DAA2D;QAC3D,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,cAAc,CAAC,OAAiB,CAAC;IAC1D,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IAChF,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,eAAyB,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,qBAAqB,EAAE,IAAI,CAAC,mBAAmB;YAC/C,cAAc,EAAE,QAAQ;YACxB,kBAAkB,EAAE,MAAM;YAC1B,cAAc,EAAE,GAAG,IAAI,CAAC,GAAG,qBAAqB;SAChD,CAAC;IACH,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,YAAU,CAAC,UAAU,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;IACpE,CAAC;CACD,CAAA;AAjEA;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;+CACjB;AAgBrB;IADC,QAAQ,EAAE;iDACY;AA/BlB,UAAU;IADf,aAAa,CAAC,iBAAiB,CAAC;GAC3B,UAAU,CAgFf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport TimePickerBase from \"./TimePickerBase.js\";\n\nimport type {\n\tTimePickerBaseChangeEventDetail as TimePickerChangeEventDetail,\n\tTimePickerBaseInputEventDetail as TimePickerInputEventDetail,\n} from \"./TimePickerBase.js\";\n\nimport {\n\tTIMEPICKER_INPUT_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-time-picker</code> component provides an input field with assigned clocks which are opened on user action.\n * The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input.\n * It consists of two parts: the time input field and the clocks.\n *\n * <h3>Usage</h3>\n * The user can enter a time by:\n * <ul>\n * <li>Using the clocks that are displayed in a popup</li>\n * <li>Typing it in directly in the input field</li>\n * </ul>\n * <br><br>\n * When the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\n * When the user directly triggers the clocks display, the actual time is displayed.\n * For the <code>ui5-time-picker</code>\n *\n * <h3>Formatting</h3>\n *\n * If a time is entered by typing it into\n * the input field, it must fit to the used time format.\n * <br><br>\n * Supported format options are pattern-based on Unicode LDML Date Format notation.\n * 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>.\n * <br><br>\n * For example, if the <code>format-pattern</code> is \"HH:mm:ss\",\n * a valid value string is \"11:42:35\" and the same is displayed in the input.\n *\n * <h3>Keyboard handling</h3>\n * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.\n * <br>\n * When closed:\n * <ul>\n * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>\n * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>\n * <li>[SHIFT]+[PAGEUP] - Increments minutes by 1.</li>\n * <li>[SHIFT]+[PAGEDOWN] - Decrements minutes by 1.</li>\n * <li>[SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.</li>\n * <li>[SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.</li>\n * <li>\n * </ul>\n * When opened:\n * <ul>\n * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>\n * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>\n * <li>[SHIFT]+[PAGEUP] - Increments minutes by 1.</li>\n * <li>[SHIFT]+[PAGEDOWN] - Decrements minutes by 1.</li>\n * <li>[SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.</li>\n * <li>[SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.</li>\n * <li>[A] or [P] - Selects AM or PM respectively.</li>\n * <li>[0]-[9] - Allows direct time selecting (hours/minutes/seconds).</li>\n * <li>[:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/TimePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TimePicker\n * @extends sap.ui.webc.main.TimePickerBase\n * @tagname ui5-time-picker\n * @public\n * @since 1.0.0-rc.6\n */\n@customElement(\"ui5-time-picker\")\nclass TimePicker extends TimePickerBase {\n\t/**\n\t * Defines a short hint, intended to aid the user with data entry when the\n\t * component has no value.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.\n\t * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimePicker.prototype.placeholder\n\t * @defaultvalue undefined\n\t * @public\n\t */\n\t@property({ defaultValue: undefined })\n\tplaceholder?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t *\n\t * Example:\n\t * HH:mm:ss -> 11:42:35\n\t * hh:mm:ss a -> 2:23:15 PM\n\t * mm:ss -> 12:04 (only minutes and seconds)\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimePicker.prototype.formatPattern\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tformatPattern!: string;\n\n\tonBeforeRendering() {\n\t\tif (this.value) {\n\t\t\tthis.value = this.normalizeValue(this.value) || this.value;\n\t\t}\n\t}\n\n\tget _formatPattern() {\n\t\tconst hasHours = !!this.formatPattern.match(/H/i);\n\t\tconst fallback = !this.formatPattern || !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getTimePattern(\"medium\") : this.formatPattern;\n\t}\n\n\tget _displayFormat() {\n\t\t// @ts-ignore oFormatOptions is a private API of DateFormat\n\t\treturn this.getFormat().oFormatOptions.pattern as string;\n\t}\n\n\tget _placeholder() {\n\t\treturn this.placeholder !== undefined ? this.placeholder : this._displayFormat;\n\t}\n\n\t/**\n\t * Currently selected time represented as JavaScript Date instance\n\t *\n\t * @readonly\n\t * @type {Date}\n\t * @public\n\t * @name sap.ui.webc.main.TimePicker.prototype.dateValue\n\t */\n\tget dateValue() {\n\t\treturn this.getFormat().parse(this._effectiveValue as string);\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"ariaRoledescription\": this.dateAriaDescription,\n\t\t\t\"ariaHasPopup\": \"dialog\",\n\t\t\t\"ariaAutoComplete\": \"none\",\n\t\t\t\"ariaControls\": `${this._id}-responsive-popover`,\n\t\t};\n\t}\n\n\tget dateAriaDescription() {\n\t\treturn TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);\n\t}\n}\n\nTimePicker.define();\n\nexport default TimePicker;\nexport type {\n\tTimePickerChangeEventDetail,\n\tTimePickerInputEventDetail,\n};\n"]}

package/dist/TimePickerBase.d.ts

@@ -1,12 +1,19 @@
-/// <reference types="openui5" resolution-mode="require"/>
+/// <reference types="openui5" />
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 import "@ui5/webcomponents-icons/dist/time-entry-request.js";
+import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Input from "./Input.js";
-import type { TimeSelectionChangeEventDetail } from "./TimeSelection.js";
+import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js";
+type TimePickerBaseChangeInputEventDetail = {
+    value: string;
+    valid: boolean;
+};
+type TimePickerBaseChangeEventDetail = TimePickerBaseChangeInputEventDetail;
+type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail;
 /**
  * @class
  *
@@ -46,7 +53,7 @@ declare class TimePickerBase extends UI5Element {
      * @defaultvalue "None"
      * @public
      */
-    valueState: ValueState;
+    valueState: `${ValueState}`;
     /**
      * Determines whether the <code>ui5-time-picker</code> is displayed as disabled.
      *
@@ -66,6 +73,7 @@ declare class TimePickerBase extends UI5Element {
      */
     readonly: boolean;
     _isPickerOpen: boolean;
+    _isInputsPopoverOpen: boolean;
     /**
      * Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>.
      * <br><br>
@@ -97,21 +105,8 @@ declare class TimePickerBase extends UI5Element {
     get _formatPattern(): string | undefined;
     get _effectiveValue(): string | undefined;
     get _timeSelectionValue(): string | undefined;
+    get _isPhone(): boolean;
     onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>): void;
-    submitPickers(): void;
-    onResponsivePopoverAfterClose(): void;
-    _handleInputClick(): Promise<void>;
-    _updateValueAndFireEvents(value: string | undefined, normalizeValue: boolean, eventsNames: Array<string>): void;
-    _updateValueState(): void;
-    _handleInputChange(e: CustomEvent): void;
-    _handleInputLiveChange(e: CustomEvent): void;
-    /**
-     * Closes the picker
-     * @public
-     * @method
-     * @name sap.ui.webc.main.TimePickerBase#closePicker
-     */
-    closePicker(): Promise<void>;
     /**
      * Opens the picker.
      * @async
@@ -121,6 +116,14 @@ declare class TimePickerBase extends UI5Element {
      * @returns {Promise} Resolves when the picker is open
      */
     openPicker(): Promise<void>;
+    /**
+     * Closes the picker
+     * @public
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#closePicker
+     * @returns {Promise} Resolves when the picker is closed
+     */
+    closePicker(): Promise<void>;
     togglePicker(): void;
     /**
      * Checks if the picker is open
@@ -130,8 +133,47 @@ declare class TimePickerBase extends UI5Element {
      * @returns {boolean}
      */
     isOpen(): boolean;
+    submitPickers(): void;
+    onResponsivePopoverAfterClose(): void;
+    onResponsivePopoverAfterOpen(): Promise<void>;
+    /**
+     * Opens the Inputs popover.
+     * @async
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#openInputsPopover
+     * @returns {Promise} Resolves when the Inputs popover is open
+     */
+    openInputsPopover(): Promise<void>;
+    /**
+     * Closes the Inputs popover
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#closeInputsPopover
+     * @returns {Promise} Resolves when the Inputs popover is closed
+     */
+    closeInputsPopover(): Promise<void>;
+    toggleInputsPopover(): void;
+    /**
+     * Checks if the inputs popover is open
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen
+     * @returns {boolean}
+     */
+    isInputsPopoverOpen(): boolean;
+    submitInputsPopover(): void;
+    onInputsPopoverAfterOpen(): Promise<void>;
+    onInputsPopoverAfterClose(): void;
+    _handleInputClick(evt: MouseEvent): Promise<void>;
+    _updateValueAndFireEvents(value: string, normalizeValue: boolean, eventsNames: Array<string>): void;
+    _updateValueState(): void;
+    _handleInputChange(e: CustomEvent): void;
+    _handleInputLiveChange(e: CustomEvent): void;
     _canOpenPicker(): boolean;
+    _canOpenInputsPopover(): boolean;
     _getPopover(): Promise<ResponsivePopover>;
+    _getInputsPopover(): Promise<Popover>;
     _getInput(): Input;
     _getInputField(): Promise<HTMLInputElement | Input | null>;
     _onkeydown(e: KeyboardEvent): void;
@@ -169,6 +211,12 @@ declare class TimePickerBase extends UI5Element {
      * The listener for this event can't be passive as it calls preventDefault()
      */
     _handleWheel(e: WheelEvent): void;
+    /**
+     * Hides mobile device keyboard by temporary setting the input to readonly state.
+     */
+    _hideMobileKeyboard(): void;
+    _onfocusin(evt: FocusEvent): Promise<void>;
+    _oninput(evt: CustomEvent): void;
     get submitButtonLabel(): string;
     get cancelButtonLabel(): string;
     /**
@@ -177,3 +225,4 @@ declare class TimePickerBase extends UI5Element {
     get openIconName(): string;
 }
 export default TimePickerBase;
+export type { TimeSelectionChangeEventDetail, TimePickerBaseChangeEventDetail, TimePickerBaseInputEventDetail, };

package/dist/TimePickerBase.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var TimePickerBase_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";
@@ -20,16 +21,19 @@ import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleD
 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 Popover from "./Popover.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 TimeSelectionClocks from "./TimeSelectionClocks.js";
+import TimeSelectionInputs from "./TimeSelectionInputs.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 PopoverCss from "./generated/themes/Popover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 /**
  * @class
@@ -71,8 +75,54 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
     get _timeSelectionValue() {
         return this.tempValue;
     }
+    get _isPhone() {
+        return isPhone();
+    }
     onTimeSelectionChange(e) {
-        this.tempValue = e.detail.value; // every time the user changes the sliders -> update tempValue
+        this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Closes the picker
+     * @public
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#closePicker
+     * @returns {Promise} Resolves when the picker is closed
+     */
+    async closePicker() {
+        const responsivePopover = await this._getPopover();
+        responsivePopover.close();
+        this._isPickerOpen = false;
+    }
+    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;
     }
     submitPickers() {
         this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
@@ -81,10 +131,73 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
     onResponsivePopoverAfterClose() {
         this._isPickerOpen = false;
     }
-    async _handleInputClick() {
+    async onResponsivePopoverAfterOpen() {
+        this._isPickerOpen = true;
+        const responsivePopover = await this._getPopover();
+        responsivePopover.querySelector("[ui5-time-selection-clocks]")._focusFirstButton();
+    }
+    /**
+     * Opens the Inputs popover.
+     * @async
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#openInputsPopover
+     * @returns {Promise} Resolves when the Inputs popover is open
+     */
+    async openInputsPopover() {
+        this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
+        const popover = await this._getInputsPopover();
+        popover.showAt(this);
+        this._isInputsPopoverOpen = true;
+    }
+    /**
+     * Closes the Inputs popover
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#closeInputsPopover
+     * @returns {Promise} Resolves when the Inputs popover is closed
+     */
+    async closeInputsPopover() {
+        const popover = await this._getInputsPopover();
+        popover.close();
+    }
+    toggleInputsPopover() {
+        if (this.isInputsPopoverOpen()) {
+            this.closeInputsPopover();
+        }
+        else if (this._canOpenInputsPopover()) {
+            this.openInputsPopover();
+        }
+    }
+    /**
+     * Checks if the inputs popover is open
+     * @private
+     * @method
+     * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen
+     * @returns {boolean}
+     */
+    isInputsPopoverOpen() {
+        return !!this._isInputsPopoverOpen;
+    }
+    submitInputsPopover() {
+        this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+        this.closeInputsPopover();
+    }
+    async onInputsPopoverAfterOpen() {
+        const popover = await this._getInputsPopover();
+        popover.querySelector("[ui5-time-selection-inputs]")._addNumericAttributes();
+    }
+    onInputsPopoverAfterClose() {
+        this._isInputsPopoverOpen = false;
+    }
+    async _handleInputClick(evt) {
+        const target = evt.target;
         if (this._isPickerOpen) {
             return;
         }
+        if (this._isPhone && target && !target.hasAttribute("ui5-icon")) {
+            this.toggleInputsPopover();
+        }
         const inputField = await this._getInputField();
         if (inputField) {
             inputField.select();
@@ -125,56 +238,20 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
         const target = e.target;
         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;
     }
+    _canOpenInputsPopover() {
+        return !this.disabled && this._isPhone;
+    }
     async _getPopover() {
         const staticAreaItem = await this.getStaticAreaItemDomRef();
         return staticAreaItem.querySelector("[ui5-responsive-popover]");
     }
+    async _getInputsPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-popover]");
+    }
     _getInput() {
         return this.shadowRoot.querySelector("[ui5-input]");
     }
@@ -183,6 +260,9 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
         return input && input.getInputDOMRef();
     }
     _onkeydown(e) {
+        if (this._isPhone && !this.isInputsPopoverOpen()) {
+            e.preventDefault();
+        }
         if (isShow(e)) {
             e.preventDefault();
             this.togglePicker();
@@ -263,16 +343,16 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
         if (value === "") {
             return true;
         }
-        return !!this.getFormat().parse(value, undefined, undefined);
+        return !!this.getFormat().parse(value);
     }
     normalizeValue(value) {
         if (value === "") {
             return value;
         }
-        return this.getFormat().format(this.getFormat().parse(value, undefined, undefined));
+        return this.getFormat().format(this.getFormat().parse(value));
     }
     _modifyValueBy(amount, unit) {
-        const date = this.getFormat().parse(this._effectiveValue, undefined, undefined);
+        const date = this.getFormat().parse(this._effectiveValue);
         if (!date) {
             return;
         }
@@ -298,6 +378,28 @@ let TimePickerBase = TimePickerBase_1 = class TimePickerBase extends UI5Element
     _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);
+    }
+    async _onfocusin(evt) {
+        if (this._isPhone) {
+            this._hideMobileKeyboard();
+            if (this._isInputsPopoverOpen) {
+                const popover = await this._getInputsPopover();
+                popover.applyFocus();
+            }
+            evt.preventDefault();
+        }
+    }
+    _oninput(evt) {
+        if (this._isPhone) {
+            evt.preventDefault();
+        }
+    }
     get submitButtonLabel() {
         return TimePickerBase_1.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
     }
@@ -326,6 +428,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], TimePickerBase.prototype, "_isPickerOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TimePickerBase.prototype, "_isInputsPopoverOpen", void 0);
 __decorate([
     slot()
 ], TimePickerBase.prototype, "valueStateMessage", void 0);
@@ -336,11 +441,13 @@ TimePickerBase = TimePickerBase_1 = __decorate([
         template: TimePickerTemplate,
         styles: TimePickerCss,
         staticAreaTemplate: TimePickerPopoverTemplate,
-        staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss],
+        staticAreaStyles: [ResponsivePopoverCommonCss, PopoverCss, TimePickerPopoverCss],
         dependencies: [
             Icon,
+            Popover,
             ResponsivePopover,
-            TimeSelection,
+            TimeSelectionClocks,
+            TimeSelectionInputs,
             Input,
             Button,
         ],