@openui5/sap.m 1.96.2 → 1.97.0

package/src/sap/m/StandardDynamicDateOption.js

@@ -5,8 +5,8 @@
  */
 
 // Provides control sap.m.StandardDynamicDateOption.
-sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepInput', './RadioButton', './RadioButtonGroup', 'sap/ui/unified/Calendar', 'sap/ui/unified/calendar/MonthPicker', 'sap/ui/core/format/DateFormat', './StandardDynamicDateRangeKeys', 'sap/ui/core/date/UniversalDateUtils', 'sap/ui/core/date/UniversalDate', 'sap/m/DynamicDateValueHelpUIType', './library'],
-	function(Element, DynamicDateOption, Label, StepInput, RadioButton, RadioButtonGroup, Calendar, MonthPicker, DateFormat, StandardDynamicDateRangeKeys, UniversalDateUtils, UniversalDate, DynamicDateValueHelpUIType, library) {
+sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepInput', './RadioButton', './RadioButtonGroup', 'sap/ui/unified/Calendar', 'sap/ui/unified/calendar/MonthPicker', 'sap/ui/core/format/DateFormat', 'sap/ui/core/date/UniversalDateUtils', 'sap/ui/core/date/UniversalDate', 'sap/m/DynamicDateValueHelpUIType', './library'],
+	function(Element, DynamicDateOption, Label, StepInput, RadioButton, RadioButtonGroup, Calendar, MonthPicker, DateFormat, UniversalDateUtils, UniversalDate, DynamicDateValueHelpUIType, library) {
 		"use strict";
 
 		/**
@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 		 * @extends sap.m.DynamicDateOption
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @public
 		 * @alias sap.m.StandardDynamicDateOption
@@ -69,6 +69,7 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 			"FROM": "FROM",
 			"TO": "TO",
 			"YEARTODATE": "YEARTODATE",
+			"DATETOYEAR":"DATETOYEAR",
 			"TODAYFROMTO": "TODAYFROMTO",
 			"QUARTER1": "QUARTER1",
 			"QUARTER2": "QUARTER2",
@@ -117,6 +118,7 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 			"FROM": _Groups.DateRanges,
 			"TO": _Groups.DateRanges,
 			"YEARTODATE": _Groups.DateRanges,
+			"DATETOYEAR": _Groups.DateRanges,
 			"TODAYFROMTO": _Groups.DateRanges,
 			"QUARTER1": _Groups.Quarters,
 			"QUARTER2": _Groups.Quarters,
@@ -134,6 +136,16 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 
 		StandardDynamicDateOption.Keys = Keys;
 
+		StandardDynamicDateOption.prototype.exit = function() {
+			if (this.aValueHelpUITypes) {
+				while (this.aValueHelpUITypes.length) {
+					this.aValueHelpUITypes.pop().destroy();
+				}
+
+				delete this.aValueHelpUITypes;
+			}
+		};
+
 		StandardDynamicDateOption.prototype.getText = function(oControl) {
 			var sKey = this.getKey();
 			var oOptions = oControl._getOptions();
@@ -171,71 +183,82 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 		StandardDynamicDateOption.prototype.getValueHelpUITypes = function(oControl) {
 			var sKey = this.getKey();
 
-			switch (sKey) {
-				case Keys.TODAY:
-				case Keys.YESTERDAY:
-				case Keys.TOMORROW:
-				case Keys.THISWEEK:
-				case Keys.THISMONTH:
-				case Keys.THISQUARTER:
-				case Keys.THISYEAR:
-				case Keys.LASTWEEK:
-				case Keys.LASTMONTH:
-				case Keys.LASTQUARTER:
-				case Keys.LASTYEAR:
-				case Keys.NEXTWEEK:
-				case Keys.NEXTMONTH:
-				case Keys.NEXTQUARTER:
-				case Keys.NEXTYEAR:
-				case Keys.YEARTODATE:
-				case Keys.QUARTER1:
-				case Keys.QUARTER2:
-				case Keys.QUARTER3:
-				case Keys.QUARTER4:
-					return [];
-				case Keys.DATE:
-				case Keys.FROM:
-				case Keys.TO:
-					return [
-						new DynamicDateValueHelpUIType({
-							type: "date"
-						})];
-				case Keys.DATERANGE:
-					return [
-						new DynamicDateValueHelpUIType({
-							type: "daterange"
-						})];
-				case Keys.SPECIFICMONTH:
-					return [
-						new DynamicDateValueHelpUIType({
-							type: "month"
-						})];
-				case Keys.LASTDAYS:
-				case Keys.LASTWEEKS:
-				case Keys.LASTMONTHS:
-				case Keys.LASTQUARTERS:
-				case Keys.LASTYEARS:
-				case Keys.NEXTDAYS:
-				case Keys.NEXTWEEKS:
-				case Keys.NEXTMONTHS:
-				case Keys.NEXTQUARTERS:
-				case Keys.NEXTYEARS:
-					return [
-						new DynamicDateValueHelpUIType({
-							text: _resourceBundle.getText("DDR_LASTNEXTX_LABEL"),
-							type: "int"
-						})];
-				case Keys.TODAYFROMTO:
-					return [
-						new DynamicDateValueHelpUIType({
-							text: _resourceBundle.getText("DDR_TODAYFROMTO_FROM_LABEL"),
-							type: "int"
-						}),
-						new DynamicDateValueHelpUIType({
-							text: _resourceBundle.getText("DDR_TODAYFROMTO_TO_LABEL"),
-							type: "int"
-						})];
+			if (!this.aValueHelpUITypes) { //the empty array is still an initialized value and can be reused
+				switch (sKey) {
+					case Keys.TODAY:
+					case Keys.YESTERDAY:
+					case Keys.TOMORROW:
+					case Keys.THISWEEK:
+					case Keys.THISMONTH:
+					case Keys.THISQUARTER:
+					case Keys.THISYEAR:
+					case Keys.LASTWEEK:
+					case Keys.LASTMONTH:
+					case Keys.LASTQUARTER:
+					case Keys.LASTYEAR:
+					case Keys.NEXTWEEK:
+					case Keys.NEXTMONTH:
+					case Keys.NEXTQUARTER:
+					case Keys.NEXTYEAR:
+					case Keys.YEARTODATE:
+					case Keys.DATETOYEAR:
+					case Keys.QUARTER1:
+					case Keys.QUARTER2:
+					case Keys.QUARTER3:
+					case Keys.QUARTER4:
+						this.aValueHelpUITypes = [];
+						break;
+					case Keys.DATE:
+					case Keys.FROM:
+					case Keys.TO:
+						this.aValueHelpUITypes = [
+							new DynamicDateValueHelpUIType({
+								type: "date"
+							})];
+						break;
+					case Keys.DATERANGE:
+						this.aValueHelpUITypes = [
+							new DynamicDateValueHelpUIType({
+								type: "daterange"
+							})];
+						break;
+					case Keys.SPECIFICMONTH:
+						this.aValueHelpUITypes = [
+							new DynamicDateValueHelpUIType({
+								type: "month"
+							})];
+						break;
+					case Keys.LASTDAYS:
+					case Keys.LASTWEEKS:
+					case Keys.LASTMONTHS:
+					case Keys.LASTQUARTERS:
+					case Keys.LASTYEARS:
+					case Keys.NEXTDAYS:
+					case Keys.NEXTWEEKS:
+					case Keys.NEXTMONTHS:
+					case Keys.NEXTQUARTERS:
+					case Keys.NEXTYEARS:
+						this.aValueHelpUITypes = [
+							new DynamicDateValueHelpUIType({
+								text: _resourceBundle.getText("DDR_LASTNEXTX_LABEL"),
+								type: "int"
+							})];
+						break;
+					case Keys.TODAYFROMTO:
+						this.aValueHelpUITypes = [
+							new DynamicDateValueHelpUIType({
+								text: _resourceBundle.getText("DDR_TODAYFROMTO_FROM_LABEL"),
+								type: "int"
+							}),
+							new DynamicDateValueHelpUIType({
+								text: _resourceBundle.getText("DDR_TODAYFROMTO_TO_LABEL"),
+								type: "int"
+							})];
+						break;
+				}
 			}
+
+			return this.aValueHelpUITypes.slice(0);
 		};
 
 		/**
@@ -559,6 +582,8 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 					return [oValue.values[0], oValue.values[0]];
 				case "YEARTODATE":
 					return UniversalDateUtils.ranges.yearToDate();
+				case "DATETOYEAR":
+					return UniversalDateUtils.ranges.dateToYear();
 				case "TODAYFROMTO":
 					if (oValue.values.length !== 2) {
 						return [];
@@ -605,6 +630,7 @@ sap.ui.define(['sap/ui/core/Element', './DynamicDateOption', './Label', './StepI
 				case "NEXTQUARTER":
 				case "NEXTYEAR":
 				case "YEARTODATE":
+				case "DATETOYEAR":
 				case "QUARTER1":
 				case "QUARTER2":
 				case "QUARTER3":

package/src/sap/m/StandardListItem.js

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/StandardTile.js

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * @extends sap.m.Tile
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/StandardTreeItem.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.m.TreeItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/StepInput.js

@@ -130,7 +130,7 @@ function(
 		 * @implements sap.ui.core.IFormContent
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SuggestionItem.js

@@ -22,7 +22,7 @@ sap.ui.define(['./library', 'sap/ui/core/Item', 'sap/ui/core/IconPool'],
 	 * @extends sap.ui.core.Item
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @since 1.34
 	 *
 	 * @constructor

package/src/sap/m/SuggestionsPopover.js

@@ -60,7 +60,7 @@ sap.ui.define([
 	 * @alias sap.m.SuggestionsPopover
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 */
 	var SuggestionsPopover = EventProvider.extend("sap.m.SuggestionsPopover", /** @lends sap.m.SuggestionsPopover.prototype */ {
 

package/src/sap/m/Switch.js

@@ -48,7 +48,7 @@ function(
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/TabContainer.js

@@ -66,7 +66,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/TabContainerItem.js

@@ -12,6 +12,9 @@ sap.ui.define(['sap/ui/core/Element',
 	function(Element, IconPool, TabStripItem, library) {
 		"use strict";
 
+		// shortcut for sap.m.ImageHelper
+		var ImageHelper = library.ImageHelper;
+
 		/**
 		 * Constructor for a new <code>TabContainerItem</code>.
 		 *
@@ -23,7 +26,7 @@ sap.ui.define(['sap/ui/core/Element',
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public
@@ -141,8 +144,35 @@ sap.ui.define(['sap/ui/core/Element',
 		 * @return {this} <code>this</code> to allow method chaining
 		 * @public
 		 */
-		TabContainerItem.prototype.setIcon = function(sIcon) {
-			return TabStripItem.prototype._setIcon.call(this, sIcon, true);
+		TabContainerItem.prototype.setIcon = function(sIcon, bSuppressRendering) {
+			var mProperties,
+				aCssClasses = ['sapMTabContIcon'],
+				oImage = this.getAggregation("_image"),
+				sImgId = this.getId() + "-img",
+				bDecorative = !!(this.getName() || this.getAdditionalText());
+
+			if (!sIcon) {
+				this.setProperty("icon", sIcon, bSuppressRendering);
+				if (oImage) {
+					this.destroyAggregation("_image");
+				}
+				return this;
+			}
+
+			if (this.getIcon() !== sIcon) {
+				this.setProperty("icon", sIcon, bSuppressRendering);
+
+				mProperties = {
+					src : sIcon,
+					id: sImgId,
+					decorative: bDecorative,
+					tooltip: this.getIconTooltip()
+				};
+
+				oImage = ImageHelper.getImageControl(sImgId, oImage, undefined, mProperties, aCssClasses);
+				this.setAggregation("_image", oImage, bSuppressRendering);
+			}
+			return this;
 		};
 
 		/**

package/src/sap/m/TabStrip.js

@@ -73,7 +73,7 @@ function(
 		 * space is exceeded, a horizontal scrollbar appears.
 		 *
 		 * @extends sap.ui.core.Control
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/m/TabStripItem.js

@@ -25,7 +25,7 @@ sap.ui.define(["./library", "sap/ui/core/Item", "sap/ui/base/ManagedObject", "sa
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @private
@@ -234,6 +234,12 @@ sap.ui.define(["./library", "sap/ui/core/Item", "sap/ui/base/ManagedObject", "sa
 			}
 			ManagedObject.prototype.setProperty.call(this, sName, vValue, bSupressInvalidation);
 
+			if ((sName === "text" && this.getAdditionalText() !== "" && this.getAggregation("_image")) ||
+				(sName === "additionalText" && this.getText() !== "" && this.getAggregation("_image"))) {
+					// update the decorative state of the icon if the text or additional text is changed
+					this.getAggregation("_image").setDecorative(vValue !== "");
+			}
+
 			// optimisation to not invalidate and rerender the whole parent DOM, but only manipulate the CSS class
 			// for invisibility on the concrete DOM element that needs to change
 			if (this.getParent() && this.getParent().changeItemState) {
@@ -249,23 +255,12 @@ sap.ui.define(["./library", "sap/ui/core/Item", "sap/ui/base/ManagedObject", "sa
 			return this;
 		};
 
-
-		/**
-		 * Property setter for the icon
-		 *
-		 * @param {sap.ui.core.URI} sIcon - new value of the Icon property
-		 * @return {this} this to allow method chaining
-		 * @public
-		 */
-		TabStripItem.prototype.setIcon = function(sIcon) {
-			return this._setIcon(sIcon);
-		};
-
-		TabStripItem.prototype._setIcon = function(sIcon, bSuppressRendering) {
+		TabStripItem.prototype.setIcon = function(sIcon, bSuppressRendering) {
 			var mProperties,
 				aCssClasses = ['sapMTabContIcon'],
 				oImage = this.getAggregation("_image"),
-				sImgId = this.getId() + "-img";
+				sImgId = this.getId() + "-img",
+				bDecorative = !!(this.getText() || this.getAdditionalText());
 
 			if (!sIcon) {
 				this.setProperty("icon", sIcon, bSuppressRendering);
@@ -281,6 +276,7 @@ sap.ui.define(["./library", "sap/ui/core/Item", "sap/ui/base/ManagedObject", "sa
 				mProperties = {
 					src : sIcon,
 					id: sImgId,
+					decorative: bDecorative,
 					tooltip: this.getIconTooltip()
 				};
 

package/src/sap/m/TabStripRenderer.js

@@ -316,7 +316,7 @@ sap.ui.define([
 		mAccAttributes["describedby"] = sDescribedBy;
 		mAccAttributes["posinset"] = iIndex + 1;
 		mAccAttributes["setsize"] = aItems.length;
-		mAccAttributes["labelledby"] = getTabTextDomId(oItem) + "-addText " + getTabTextDomId(oItem) + "-text";
+
 		if (oTabStripParent && oTabStripParent.getRenderer && oTabStripParent.getRenderer().getContentDomId) {
 			mAccAttributes["controls"] = oTabStripParent.getRenderer().getContentDomId(oTabStripParent);
 		}

package/src/sap/m/Table.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -472,12 +472,13 @@ sap.ui.define([
 	 */
 	Table.prototype._checkLastColumnWidth = function() {
 		var $this = this.$();
+		var oTableDomRef = this.getTableDomRef();
 
-		if (!$this.length) {
+		if (!$this.length || !oTableDomRef) {
 			return;
 		}
 
-		if ($this[0].clientWidth < this.getTableDomRef().clientWidth) {
+		if ($this[0].clientWidth < oTableDomRef.clientWidth) {
 			$this.find(".sapMListTblCell:visible").eq(0).addClass("sapMTableLastColumn").width("");
 		}
 

package/src/sap/m/TablePersoController.js

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @class Table Personalization Controller
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @alias sap.m.TablePersoController
 	 */
 	var TablePersoController = ManagedObject.extend("sap.m.TablePersoController", /** @lends sap.m.TablePersoController */

package/src/sap/m/TablePersoDialog.js

@@ -87,7 +87,7 @@ sap.ui.define([
 	 * @class Table Personalization Dialog
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @alias sap.m.TablePersoDialog
 	 */
 	var TablePersoDialog = ManagedObject.extend("sap.m.TablePersoDialog", /** @lends sap.m.TablePersoDialog */

package/src/sap/m/TablePersoProvider.js

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/base/ManagedObject', "sap/base/Log"],
 	 * @extends sap.ui.base.ManagedObject
 	 * @abstract
 	 * @author SAP
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @alias sap.m.TablePersoProvider
 	 */
 	var TablePersoProvider = ManagedObject.extend("sap.m.TablePersoProvider", /** @lends sap.m.TablePersoProvider */

package/src/sap/m/TableSelectDialog.js

@@ -98,7 +98,7 @@ sap.ui.define([
 	 * When using the <code>sap.m.TableSelectDialog</code> in SAP Quartz themes, the breakpoints and layout paddings could be determined by the dialog's width. To enable this concept and add responsive paddings to an element of the control, you have to add the following classes depending on your use case: <code>sapUiResponsivePadding--header</code>, <code>sapUiResponsivePadding--subHeader</code>, <code>sapUiResponsivePadding--content</code>, <code>sapUiResponsivePadding--footer</code>.
 	 * @extends sap.m.SelectDialogBase
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Text.js

@@ -54,7 +54,7 @@ function(library, Core, Control, coreLibrary, Device, HyphenationSupport, TextRe
 	 * @implements sap.ui.core.IShrinkable, sap.ui.core.IFormContent, sap.ui.core.ISemanticFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/TextArea.js

@@ -82,7 +82,7 @@ function(
 	 * @extends sap.m.InputBase
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Tile.js

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/TileContainer.js

@@ -44,7 +44,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/TileContent.js

@@ -20,7 +20,7 @@ sap.ui.define(['./library', 'sap/ui/core/library', 'sap/ui/core/Control', './Til
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.97.0
 	 * @since 1.34.0
 	 *
 	 * @public

package/src/sap/m/TimePicker.js

@@ -140,7 +140,7 @@ function(
 		 * @extends sap.m.DateTimeField
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public
@@ -232,7 +232,23 @@ function(
 					 *
 					 * - on both device types, if there is a keyboard attached: 24 or 00 can be typed directly.
 					 */
-					support2400: {type: "boolean", group: "Misc", defaultValue: false}
+					support2400: {type: "boolean", group: "Misc", defaultValue: false},
+
+					/**
+					 * Determines whether the input field of the picker is hidden or visible.
+					 * When set to <code>true</code>, the input field becomes invisible and there is no way to open the picker popover.
+					 * In that case it can be opened by another control through calling of picker's <code>openBy</code> method, and
+					 * the opening control's DOM reference must be provided as parameter.
+					 *
+					 * Note: Since the picker is not responsible for accessibility attributes of the control which opens its popover,
+					 * those attributes should be added by the application developer. The following is recommended to be added to the
+					 * opening control: a text or tooltip that describes the action (example: "Open Time Picker"), and also aria-haspopup
+					 * attribute with value of <code>sap.ui.core.aria.HasPopup.Dialog</code>.
+					 *
+					 * @since 1.97
+					 */
+					hideInput: { type: "boolean", group: "Misc", defaultValue: false }
+
 				},
 				aggregations: {
 
@@ -1277,22 +1293,45 @@ function(
 			}
 		};
 
+		/**
+		 * Opens the picker popover. The popover is positioned relatively to the control given as <code>oDomRef</code> parameter on tablet or desktop
+		 * and is full screen on phone. Therefore the control parameter is only used on tablet or desktop and is ignored on phone.
+		 *
+		 * Note: use this method to open the picker popover only when the <code>hideInput</code> property is set to <code>true</code>. Please consider
+		 * opening of the picker popover by another control only in scenarios that comply with Fiori guidelines. For example, opening the picker popover
+		 * by another popover is not recommended.
+		 * The application developer should implement the following accessibility attributes to the opening control: a text or tooltip that describes
+		 * the action (example: "Open Time Picker"), and aria-haspopup attribute with value of <code>sap.ui.core.aria.HasPopup.Dialog</code>.
+		 *
+		 * @since 1.97
+		 * @param {HTMLElement} oDomRef DOM reference of the opening control. On tablet or desktop, the popover is positioned relatively to this control.
+		 * @public
+		 */
+		TimePicker.prototype.openBy = function(oDomRef) {
+			this._openPicker(oDomRef);
+		};
+
 		/**
 		 * Opens the picker.
 		 *
 		 * Creates the picker if necessary.
 		 *
+		 * @param {HTMLElement} oDomRef DOM reference of the opening control. On tablet or desktop, the TimePicker popover is positioned relative to this control.
 		 * @returns {sap.m.ResponsivePopover} The picker part as a control, used for chaining
 		 * @private
 		 */
-		TimePicker.prototype._openPicker = function () {
+		TimePicker.prototype._openPicker = function (oDomRef) {
 			var oPicker = this._getPicker();
 
 			if (!oPicker) {
 				oPicker = this._createPicker(this._getDisplayFormatPattern());
 			}
 
-			oPicker.open();
+			if (!oDomRef) {
+				oDomRef = this.getDomRef();
+			}
+
+			oPicker.openBy(oDomRef);
 			oPicker.getContent()[0]._sMinutes = this._sMinutes;
 			oPicker.getContent()[0]._sSeconds = this._sSeconds;
 

package/src/sap/m/TimePickerClock.js

@@ -26,7 +26,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/m/TimePickerClocks.js

@@ -50,7 +50,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/TimePickerInputs.js

@@ -49,7 +49,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public