@ui5/webcomponents 2.20.0 → 2.21.0-rc.0

package/dist/SwitchTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,qBAAqB,EAAE,SAAS,EAAE;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;YACnC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;YACxE,oBAAoB,EAAE,QAAQ,EAAE;SAChC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,aAAa,kBAChB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,aAEnB,cAAK,KAAK,EAAC,kBAAkB,YAC5B,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,YAC1C,eAAK,KAAK,EAAC,mBAAmB,aAC5B,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,8BACC,eAAM,KAAK,EAAC,qCAAqC,YAChD,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,oBAAoB,GAAE,GAC9C,EACP,eAAM,KAAK,EAAC,sCAAsC,YACjD,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAE,GAChD,IACL;gCACH,CAAC;oCACD,4BACE,IAAI,CAAC,UAAU,CAAC,CAAC;4CACjB,8BACC,eAAM,KAAK,EAAC,8DAA8D,EAAC,IAAI,EAAC,SAAS,YACxF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC9D,EACP,eAAM,KAAK,EAAC,+DAA+D,EAAC,IAAI,EAAC,UAAU,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,8BAA8B,GAAG,GAC/D,IACL;4CACH,CAAC;gDACD,8BACC,eAAM,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,SAAS,YAAE,IAAI,CAAC,OAAO,GAAQ,EACtF,eAAM,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,UAAU,YAAE,IAAI,CAAC,QAAQ,GAAQ,IACvF,GAEF,EAGJ,eAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,GAAQ,IAChD,GACD,GACD,EACN,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,kBAAkB,gCAAsB,IACvF,CAAC,CAAC;AACV,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Switch from \"./Switch.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-switch-root\": true,\n\t\t\t\t\"ui5-switch--desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !(this.graphical || this.textOn || this.textOff),\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t}}\n\t\t\trole=\"switch\"\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-checked={this.checked}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-required={this.required}\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t<div class=\"ui5-switch-inner\">\n\t\t\t\t<div class=\"ui5-switch-track\" part=\"slider\">\n\t\t\t\t\t<div class=\"ui5-switch-slider\">\n\t\t\t\t\t\t{this.graphical ?\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\">\n\t\t\t\t\t\t\t\t\t<Icon name={acceptIcon} class=\"ui5-switch-icon-on\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\">\n\t\t\t\t\t\t\t\t\t<Icon name={declineIcon} class=\"ui5-switch-icon-off\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this.hasNoLabel ?\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon\" part=\"text-on\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-on\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon\" part=\"text-off\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-off\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\" part=\"text-on\">{this._textOn}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\" part=\"text-off\">{this._textOff}</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"ui5-switch-handle\" part=\"handle\"></span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type='checkbox' checked={this.checked} class=\"ui5-switch-input\" data-sap-no-tab-ref/>\n\t\t</div>);\n}\n"]}
+{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,qBAAqB,EAAE,SAAS,EAAE;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;YACnC,sBAAsB,EAAE,IAAI,CAAC,SAAS;YACtC,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;YACxE,oBAAoB,EAAE,QAAQ,EAAE;SAChC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,aAAa,kBAChB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,qBAAqB,mBAC1B,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,OAAO,aAEnB,cAAK,KAAK,EAAC,kBAAkB,YAC5B,cAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,YAC1C,eAAK,KAAK,EAAC,mBAAmB,aAC5B,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,8BACC,eAAM,KAAK,EAAC,qCAAqC,YAChD,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,oBAAoB,GAAE,GAC9C,EACP,eAAM,KAAK,EAAC,sCAAsC,YACjD,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAC,qBAAqB,GAAE,GAChD,IACL;gCACH,CAAC;oCACD,4BACE,IAAI,CAAC,UAAU,CAAC,CAAC;4CACjB,8BACC,eAAM,KAAK,EAAC,8DAA8D,EAAC,IAAI,EAAC,SAAS,YACxF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC9D,EACP,eAAM,KAAK,EAAC,+DAA+D,EAAC,IAAI,EAAC,UAAU,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,8BAA8B,GAAG,GAC/D,IACL;4CACH,CAAC;gDACD,8BACC,eAAM,KAAK,EAAC,qCAAqC,EAAC,IAAI,EAAC,SAAS,iBAAc,IAAI,CAAC,eAAe,YAAG,IAAI,CAAC,OAAO,GAAQ,EACzH,eAAM,KAAK,EAAC,sCAAsC,EAAC,IAAI,EAAC,UAAU,iBAAc,IAAI,CAAC,eAAe,YAAG,IAAI,CAAC,QAAQ,GAAQ,IAC1H,GAEF,EAGJ,eAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,GAAQ,IAChD,GACD,GACD,EACN,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,kBAAkB,gCAAsB,IACvF,CAAC,CAAC;AACV,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport { isDesktop, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Switch from \"./Switch.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-switch-root\": true,\n\t\t\t\t\"ui5-switch--desktop\": isDesktop(),\n\t\t\t\t\"ui5-switch--disabled\": this.disabled,\n\t\t\t\t\"ui5-switch--checked\": this.checked,\n\t\t\t\t\"ui5-switch--semantic\": this.graphical,\n\t\t\t\t\"ui5-switch--no-label\": !(this.graphical || this.textOn || this.textOff),\n\t\t\t\t\"ui5-switch--safari\": isSafari(),\n\t\t\t}}\n\t\t\trole=\"switch\"\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-checked={this.checked}\n\t\t\taria-disabled={this.effectiveAriaDisabled}\n\t\t\taria-required={this.required}\n\t\t\tonClick={this._onclick}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\ttabindex={this.effectiveTabIndex}\n\t\t\ttitle={this.tooltip}\n\t\t>\n\t\t\t<div class=\"ui5-switch-inner\">\n\t\t\t\t<div class=\"ui5-switch-track\" part=\"slider\">\n\t\t\t\t\t<div class=\"ui5-switch-slider\">\n\t\t\t\t\t\t{this.graphical ?\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\">\n\t\t\t\t\t\t\t\t\t<Icon name={acceptIcon} class=\"ui5-switch-icon-on\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\">\n\t\t\t\t\t\t\t\t\t<Icon name={declineIcon} class=\"ui5-switch-icon-off\"/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this.hasNoLabel ?\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon\" part=\"text-on\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-on\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off ui5-switch-no-label-icon\" part=\"text-off\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon name={this.sapNextIcon} class=\"ui5-switch-no-label-icon-off\" />\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--on\" part=\"text-on\" aria-hidden={this._textAriaHidden}>{this._textOn}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-switch-text ui5-switch-text--off\" part=\"text-off\" aria-hidden={this._textAriaHidden}>{this._textOff}</span>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"ui5-switch-handle\" part=\"handle\"></span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<input type='checkbox' checked={this.checked} class=\"ui5-switch-input\" data-sap-no-tab-ref/>\n\t\t</div>);\n}\n"]}

package/dist/TimePicker.d.ts

@@ -4,6 +4,7 @@ import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/In
 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 DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import IconMode from "./types/IconMode.js";
 import type Popover from "./Popover.js";
 import type DateTimeInput from "./DateTimeInput.js";
@@ -43,8 +44,8 @@ type TimePickerInputEventDetail = TimePickerChangeInputEventDetail;
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
  * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#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.
+ * For example, if the valueFormat is "HH:mm:ss", the displayFormat is "hh:mm: ss a", and the used locale is English, a valid value string is "11:42:35", which leads to an output of "11:42:35 AM".
+ * If no placeholder is set to the TimePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.
  *
  * ### Keyboard handling
  * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.
@@ -133,6 +134,20 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
      * @public
      */
     placeholder?: string;
+    /**
+     * Determines the format, displayed in the input field.
+     * @default undefined
+     * @since 2.20.0
+     * @public
+     */
+    displayFormat?: string;
+    /**
+     * Determines the format, used for the value attribute.
+     * @default undefined
+     * @since 2.20.0
+     * @public
+     */
+    valueFormat?: string;
     /**
      * Determines the format, displayed in the input field.
      *
@@ -141,6 +156,7 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
      * hh:mm:ss a -> 2:23:15 PM
      * mm:ss -> 12:04 (only minutes and seconds)
      * @default undefined
+     * @deprecated Use displayFormat and valueFormat instead
      * @public
      */
     formatPattern?: string;
@@ -202,6 +218,12 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
     _inputsPopover: Popover;
     _dateTimeInput: DateTimeInput;
     tempValue?: string;
+    /**
+     * Cached instance of DateFormat with a format pattern of "HH:mm:ss".
+     * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.
+     * @private
+     */
+    _isoFormatInstance?: DateFormat;
     static i18nBundle: I18nBundle;
     get formValidityMessage(): string;
     get formValidity(): ValidityStateFlags;
@@ -227,7 +249,8 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
      * @protected
      */
     get _formatPattern(): string | undefined;
-    get _displayFormat(): string;
+    get _displayFormat(): string | undefined;
+    get _valueFormat(): string | undefined;
     get _effectiveValue(): string;
     get _timeSelectionValue(): string | undefined;
     get _isPhone(): boolean;
@@ -277,7 +300,13 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
     _getInputField(): HTMLInputElement | import("./Input.js").default | null;
     _onkeydown(e: KeyboardEvent): void;
     get _isPattern(): boolean;
+    get _isValueFormatPattern(): boolean;
+    get _isDisplayFormatPattern(): boolean;
+    get displayValue(): string;
     getFormat(): import("sap/ui/core/format/DateFormat").default;
+    getISOFormat(): DateFormat;
+    getDisplayFormat(): import("sap/ui/core/format/DateFormat").default;
+    getValueFormat(): import("sap/ui/core/format/DateFormat").default;
     /**
      * Formats a Java Script date object into a string representing a locale date and time
      * according to the `formatPattern` property of the TimePicker instance
@@ -294,6 +323,29 @@ declare class TimePicker extends UI5Element implements IFormInputElement {
      * @public
      */
     isValid(value: string | undefined): boolean;
+    isValidDisplayValue(value: string | undefined): boolean;
+    /**
+     * Checks if a value is valid against the current `valueFormat` value.
+     *
+     * **Note:** an empty string is considered as valid value.
+     * @param value The value to be tested against the value format
+     * @public
+     */
+    isValidValue(value: string | undefined): boolean;
+    /**
+     * Converts a value from displayFormat to valueFormat
+     * @param value Value in displayFormat
+     * @returns Value in valueFormat
+     * @private
+     */
+    getValueFromDisplayValue(value: string): string;
+    /**
+     * Converts a value from valueFormat to displayFormat
+     * @param value Value in valueFormat
+     * @returns Value in displayFormat
+     * @private
+     */
+    getDisplayValueFromValue(value: string): string;
     normalizeValue(value: string): string;
     _modifyValueBy(amount: number, unit: string): void;
     /**

package/dist/TimePicker.js

@@ -32,6 +32,7 @@ import TimePickerCss from "./generated/themes/TimePicker.css.js";
 import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+const DEFAULT_ISO_FORMAT = "HH:mm:ss";
 /**
  * @class
  *
@@ -58,8 +59,8 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
  * For more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#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.
+ * For example, if the valueFormat is "HH:mm:ss", the displayFormat is "hh:mm: ss a", and the used locale is English, a valid value string is "11:42:35", which leads to an output of "11:42:35 AM".
+ * If no placeholder is set to the TimePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.
  *
  * ### Keyboard handling
  * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.
@@ -144,18 +145,18 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
         const validity = this.formValidity;
         if (validity.valueMissing) {
             // @ts-ignore oFormatOptions is a private API of DateFormat
-            return TimePicker_1.i18nBundle.getText(TIMEPICKER_VALUE_MISSING, this.getFormat().oFormatOptions.pattern);
+            return TimePicker_1.i18nBundle.getText(TIMEPICKER_VALUE_MISSING, this.getValueFormat().oFormatOptions.pattern);
         }
         if (validity.patternMismatch) {
             // @ts-ignore oFormatOptions is a private API of DateFormat
-            return TimePicker_1.i18nBundle.getText(TIMEPICKER_PATTERN_MISSMATCH, this.getFormat().oFormatOptions.pattern);
+            return TimePicker_1.i18nBundle.getText(TIMEPICKER_PATTERN_MISSMATCH, this.getValueFormat().oFormatOptions.pattern);
         }
         return "";
     }
     get formValidity() {
         return {
             valueMissing: this.required && !this.value,
-            patternMismatch: !this.isValid(this.value),
+            patternMismatch: !this.isValidValue(this.value),
         };
     }
     async formElementAnchor() {
@@ -194,12 +195,12 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
      * @default null
      */
     get dateValue() {
-        return this.getFormat().parse(this._effectiveValue);
+        return this.getValueFormat().parse(this._effectiveValue);
     }
     get _lastAvailableTime() {
         const date = UI5Date.getInstance();
         date.setHours(23, 59, 59, 999);
-        return this.getFormat().format(date);
+        return this.getValueFormat().format(date);
     }
     /**
      * @protected
@@ -221,8 +222,21 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
         return fallback ? localeData.getTimePattern("medium") : this.formatPattern;
     }
     get _displayFormat() {
-        // @ts-ignore oFormatOptions is a private API of DateFormat
-        return this.getFormat().oFormatOptions.pattern;
+        if (this.displayFormat) {
+            return this.displayFormat;
+        }
+        if (this._formatPattern) {
+            return this._formatPattern;
+        }
+    }
+    get _valueFormat() {
+        if (this.valueFormat) {
+            return this.valueFormat;
+        }
+        if (this.formatPattern) {
+            return this._formatPattern;
+        }
+        return "";
     }
     get _effectiveValue() {
         return this.value;
@@ -285,7 +299,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
      * @returns Resolves when the Inputs popover is open
      */
     openInputsPopover() {
-        this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
+        this.tempValue = this.value && this.isValidValue(this.value) ? this.value : this.getValueFormat().format(UI5Date.getInstance());
         const popover = this._inputsPopover;
         popover.opener = this;
         popover.open = true;
@@ -340,25 +354,33 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
         }
     }
     _updateValueAndFireEvents(value, normalizeValue, eventsNames) {
-        if (value === this.value) {
+        const isInputEvent = eventsNames.includes("input");
+        const valid = this.isValidValue(value);
+        let normalizedValue = value;
+        // Only normalize if valid - if invalid, keep raw value
+        if (value !== undefined && valid && normalizeValue && !isInputEvent) {
+            normalizedValue = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+        }
+        // Store the previous value to check if it actually changed
+        const previousValue = this.value;
+        // During input events (live typing), only update tempValue, not the public value property
+        if (!isInputEvent) {
+            this.value = ""; // Do not remove! DurationPicker (an external component extending TimePicker) use case
+            this.value = normalizedValue;
+        }
+        // Always sync tempValue for the picker
+        this.tempValue = isInputEvent ? value : normalizedValue;
+        this._updateValueState(); // Change the value state to Error/None, but only if needed (must be called before early return)
+        if (previousValue === 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.fireDecoratorEvent(eventName, { value, valid });
         });
     }
     _updateValueState() {
-        const isValid = this.isValid(this.value);
+        // During live typing, validate against displayFormat (what user types), otherwise validate against valueFormat (stored value)
+        const isValid = this.isValidValue(this.value);
         if (!isValid) { // If not valid - always set Error regardless of the current value state
             this.valueState = ValueState.Negative;
         }
@@ -435,20 +457,75 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
     get _isPattern() {
         return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
     }
+    get _isValueFormatPattern() {
+        return this._valueFormat !== "medium" && this._valueFormat !== "short" && this._valueFormat !== "long";
+    }
+    get _isDisplayFormatPattern() {
+        return this._displayFormat !== "medium" && this._displayFormat !== "short" && this._displayFormat !== "long";
+    }
+    get displayValue() {
+        if (!this.value) {
+            return "";
+        }
+        if (!this.getValueFormat().parse(this.value, true)) {
+            return this.value;
+        }
+        return this.getDisplayFormat().format(this.getValueFormat().parse(this.value, true), true);
+    }
     getFormat() {
         let dateFormat;
         if (this._isPattern) {
             dateFormat = DateFormat.getDateInstance({
+                strictParsing: true,
                 pattern: this._formatPattern,
             });
         }
         else {
             dateFormat = DateFormat.getDateInstance({
+                strictParsing: true,
                 style: this._formatPattern,
             });
         }
         return dateFormat;
     }
+    getISOFormat() {
+        if (!this._isoFormatInstance) {
+            this._isoFormatInstance = DateFormat.getTimeInstance({
+                strictParsing: true,
+                pattern: DEFAULT_ISO_FORMAT,
+            });
+        }
+        return this._isoFormatInstance;
+    }
+    getDisplayFormat() {
+        // If no displayFormat is set, use the deprecated getFormat() for backward compatibility
+        if (!this._displayFormat) {
+            return this.getFormat();
+        }
+        return this._isDisplayFormatPattern
+            ? DateFormat.getDateInstance({
+                strictParsing: true,
+                pattern: this._displayFormat,
+            })
+            : DateFormat.getDateInstance({
+                strictParsing: true,
+                style: this._displayFormat,
+            });
+    }
+    getValueFormat() {
+        if (!this._valueFormat) {
+            return this.getISOFormat();
+        }
+        return this._isValueFormatPattern
+            ? DateFormat.getTimeInstance({
+                strictParsing: true,
+                pattern: this._valueFormat,
+            })
+            : DateFormat.getTimeInstance({
+                strictParsing: true,
+                style: this._valueFormat,
+            });
+    }
     /**
      * Formats a Java Script date object into a string representing a locale date and time
      * according to the `formatPattern` property of the TimePicker instance
@@ -457,7 +534,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
      * @returns formatted value
      */
     formatValue(date) {
-        return this.getFormat().format(date);
+        return this.getValueFormat().format(date);
     }
     /**
      * Checks if a value is valid against the current `formatPattern` value.
@@ -470,16 +547,67 @@ let TimePicker = TimePicker_1 = class TimePicker extends UI5Element {
         if (value === "") {
             return true;
         }
-        return !!this.getFormat().parse(value);
+        return !!this.getFormat().parse(value, true);
+    }
+    isValidDisplayValue(value) {
+        if (value === "") {
+            return true;
+        }
+        return !!this.getDisplayFormat().parse(value, true);
+    }
+    /**
+     * Checks if a value is valid against the current `valueFormat` value.
+     *
+     * **Note:** an empty string is considered as valid value.
+     * @param value The value to be tested against the value format
+     * @public
+     */
+    isValidValue(value) {
+        if (value === "") {
+            return true;
+        }
+        return !!this.getValueFormat().parse(value, true);
+    }
+    /**
+     * Converts a value from displayFormat to valueFormat
+     * @param value Value in displayFormat
+     * @returns Value in valueFormat
+     * @private
+     */
+    getValueFromDisplayValue(value) {
+        if (!this.getDisplayFormat().parse(value, true)) {
+            return value;
+        }
+        return this.getValueFormat().format(this.getDisplayFormat().parse(value, true), true);
+    }
+    /**
+     * Converts a value from valueFormat to displayFormat
+     * @param value Value in valueFormat
+     * @returns Value in displayFormat
+     * @private
+     */
+    getDisplayValueFromValue(value) {
+        if (!this.getValueFormat().parse(value, true)) {
+            return value;
+        }
+        return this.getDisplayFormat().format(this.getValueFormat().parse(value, true), true);
     }
     normalizeValue(value) {
         if (value === "") {
             return value;
         }
-        return this.getFormat().format(this.getFormat().parse(value));
+        const parsedFromDisplay = this.getDisplayFormat().parse(value, true);
+        if (parsedFromDisplay) {
+            return this.getValueFormat().format(parsedFromDisplay, true);
+        }
+        const parsedFromValue = this.getValueFormat().parse(value, true);
+        if (parsedFromValue) {
+            return this.getValueFormat().format(parsedFromValue, true);
+        }
+        return value;
     }
     _modifyValueBy(amount, unit) {
-        const date = this.getFormat().parse(this._effectiveValue);
+        const date = this.getValueFormat().parse(this._effectiveValue);
         if (!date) {
             return;
         }
@@ -590,6 +718,12 @@ __decorate([
 __decorate([
     property()
 ], TimePicker.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "displayFormat", void 0);
+__decorate([
+    property()
+], TimePicker.prototype, "valueFormat", void 0);
 __decorate([
     property()
 ], TimePicker.prototype, "formatPattern", void 0);