@openui5/sap.m 1.94.0 → 1.97.0

package/src/sap/m/MultiComboBoxRenderer.js

@@ -29,6 +29,10 @@ sap.ui.define(['./ComboBoxBaseRenderer','./ComboBoxTextFieldRenderer', 'sap/ui/c
 	MultiComboBoxRenderer.addOuterClasses = function(oRm, oControl) {
 		ComboBoxBaseRenderer.addOuterClasses.apply(this, arguments);
 		oRm.class(MultiComboBoxRenderer.CSS_CLASS_MULTICOMBOBOX);
+
+		if (oControl.getProperty("hasSelection")) {
+			oRm.class("sapMMultiComboBoxHasToken");
+		}
 	};
 	/**
 	 * Returns the inner aria describedby ids for the accessibility.

package/src/sap/m/MultiEditField.js

@@ -17,7 +17,7 @@ sap.ui.define(["sap/ui/core/XMLComposite", "./library", "sap/ui/core/Item"], fun
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @experimental since 1.52
 	 * @since 1.52.0
 	 * @alias sap.m.MultiEditField

package/src/sap/m/MultiInput.js

@@ -118,9 +118,10 @@ function(
 	* <li> You can select single tokens or a range of tokens and you can copy/cut/delete them.</li>
 	* </ul>
 	* @extends sap.m.Input
+	* @implements sap.ui.core.ISemanticFormContent
 	*
 	* @author SAP SE
-	* @version 1.94.0
+	* @version 1.97.0
 	*
 	* @constructor
 	* @public
@@ -130,7 +131,9 @@ function(
 	*/
 	var MultiInput = Input.extend("sap.m.MultiInput", /** @lends sap.m.MultiInput.prototype */ {
 		metadata: {
-
+			interfaces: [
+				"sap.ui.core.ISemanticFormContent"
+			],
 			library: "sap.m",
 			designtime: "sap/m/designtime/MultiInput.designtime",
 			properties: {
@@ -150,7 +153,13 @@ function(
 				 * The max number of tokens that is allowed in MultiInput.
 				 * @since 1.36
 				 */
-				maxTokens: {type: "int", group: "Behavior"}
+				maxTokens: {type: "int", group: "Behavior"},
+
+				/**
+				 * Changed when tokens are changed. The value for sap.ui.core.ISemanticFormContent interface.
+				 * @private
+				 */
+				_semanticFormValue: {type: "string", group: "Behavior", defaultValue: "", visibility: "hidden"}
 			},
 			aggregations: {
 
@@ -307,6 +316,7 @@ function(
 					break;
 			}
 
+			this.updateFormValueProperty();
 			this.invalidate();
 		}.bind(this));
 
@@ -982,7 +992,7 @@ function(
 			this._validateCurrentText();
 		}
 
-		if (oEvent && oEvent.setMarked && this._bTokenIsValidated) {
+		if (oEvent && oEvent.setMarked && (this._bTokenIsValidated || this.getDOMValue())) {
 			oEvent.setMarked();
 		}
 
@@ -1393,10 +1403,36 @@ function(
 
 		var oInfo = Input.prototype.getAccessibilityInfo.apply(this, arguments);
 		oInfo.type = oRb.getText("ACC_CTR_TYPE_MULTIINPUT");
-		oInfo.description = ((oInfo.description || "") + " " + sText).trim();
+		oInfo.description = (this.getValueDescriptionInfo() + " " + sText).trim();
 		return oInfo;
 	};
 
+	/**
+	 * Gets the value of the accessibility description info field.
+	 *
+	 * @protected
+	 * @override
+	 * @returns {string} The value of the accessibility description info
+	 */
+	MultiInput.prototype.getValueDescriptionInfo = function () {
+		var iTokensLength = this.getTokens().length;
+		var sDescriptionText = this.getDescription() || "";
+		var sValue = this.getValue();
+
+		if (sValue) {
+			return sValue;
+		}
+
+		// Empty string or the description text should be set as acc description in case there are no tokens and no value.
+		// This way the tokens will be announced as the control's value.
+		if (iTokensLength > 0) {
+			return sDescriptionText;
+		} else {
+			// "Empty" or the description text should be set as acc description in case there are no tokens and no value.
+			return sDescriptionText ? sDescriptionText : sap.ui.getCore().getLibraryResourceBundle("sap.m").getText("INPUTBASE_VALUE_EMPTY");
+		}
+	};
+
 	/**
 	 * Decorates Input
 	 *
@@ -1650,7 +1686,7 @@ function(
 		}
 
 		iSummedIconsWidth = this._calculateIconsSpace();
-		iTokenizerWidth = Math.ceil(oTokenizer.getDomRef().getBoundingClientRect().width);
+		iTokenizerWidth = oTokenizer.getDomRef().scrollWidth;
 		oFocusDomRef.style.width = 'calc(100% - ' + Math.floor(iSummedIconsWidth + iTokenizerWidth) + "px";
 	};
 
@@ -1970,6 +2006,42 @@ function(
 		};
 	};
 
+	/**
+	 * Gets formatted form value.
+	 *
+	 * In the context of the MultiInput, this is the merged value of all the Tokens in the control.
+	 *
+	 * @since 1.94
+	 * @experimental
+	 */
+	MultiInput.prototype.getFormFormattedValue = function () {
+		return this.getTokens()
+			.map(function (oToken) {
+				return oToken.getText();
+			})
+			.join(", ");
+	};
+
+	/**
+	 * The property which triggers form display invalidation when changed
+	 *
+	 * @since 1.94
+	 * @experimental
+	 */
+	MultiInput.prototype.getFormValueProperty = function () {
+		return "_semanticFormValue";
+	};
+
+	/**
+	 * ISemanticFormContent interface works only with properties. The state of MultiInput is kept as Tokens.
+	 * Update _semanticFormValue property so it'd match MultiInput's state, but as a string which could be reused.
+	 *
+	 * @private
+	 */
+	MultiInput.prototype.updateFormValueProperty = function () {
+		this.setProperty("_semanticFormValue", this.getFormFormattedValue(), true);
+	};
+
 	return MultiInput;
 
 });

package/src/sap/m/NavContainer.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -1815,21 +1815,28 @@ sap.ui.define([
 	 * Shows the placeholder if NavContainer is rendered.
 	 * Otherwise, registers the 'onAfterRendering' delegate which shows the placeholder.
 	 *
-	 * @param {object} mSettings Object containing the placeholder instance
+	 * @param {object} [mSettings] Object containing the placeholder instance.
+	 *                             Can be omitted if a placeholder instance is already created by <code>sap.ui.core.routing.async.Target</code>.
+	 * @param {object} [mSettings.placeholder] The placeholder instance
 	 * @param {sap.ui.core.Placeholder} mSettings.placeholder The placeholder instance
 	 * @return {Promise} Promise that resolves with the placeholder
 	 *
-	 * @public
+	 * @private
+	 * @ui5-restricted SAPUI5 Distribution libraries only
 	 * @since 1.91
 	 */
 	NavContainer.prototype.showPlaceholder = function(mSettings) {
 		var pLoaded;
 
+		if (!sap.ui.getCore().getConfiguration().getPlaceholder()) {
+			return;
+		}
+
 		if (this._placeholder) {
 			this.hidePlaceholder();
 		}
 
-		if (mSettings.placeholder) {
+		if (mSettings && mSettings.placeholder) {
 			this._placeholder = mSettings.placeholder;
 			pLoaded = this._placeholder._load();
 		} else {
@@ -1848,7 +1855,8 @@ sap.ui.define([
 	/**
 	 * Hides the placeholder and removes the 'onAfterRendering' placeholder delegate.
 	 *
-	 * @public
+	 * @private
+	 * @ui5-restricted SAP internal apps
 	 * @since 1.91
 	 */
 	NavContainer.prototype.hidePlaceholder = function() {

package/src/sap/m/NewsContent.js

@@ -8,11 +8,12 @@ sap.ui.define([
 	'./library',
 	'sap/ui/core/Control',
 	'sap/m/Text',
+	'sap/m/FormattedText',
 	'sap/ui/Device',
 	'./NewsContentRenderer',
 	"sap/ui/events/KeyCodes"
 ],
-	function(library, Control, Text, Device, NewsContentRenderer, KeyCodes) {
+	function(library, Control, Text, FormattedText, Device, NewsContentRenderer, KeyCodes) {
 	"use strict";
 
 	/**
@@ -25,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @since 1.34
 	 *
 	 * @public
@@ -56,7 +57,11 @@ sap.ui.define([
 				/**
 				 * The hidden aggregation for the content text.
 				 */
-				"_contentText" : {type : "sap.m.Text", multiple : false, visibility : "hidden"}
+				"_contentText" : {type : "sap.m.FormattedText", multiple : false, visibility : "hidden"},
+				/**
+				 * The hidden aggregation for the subHeader text.
+				 */
+				 "_subHeaderText" : {type : "sap.m.FormattedText", multiple : false, visibility : "hidden"}
 			},
 			events : {
 				/**
@@ -73,11 +78,10 @@ sap.ui.define([
 	* Init function for the control
 	*/
 	NewsContent.prototype.init = function() {
-		this._oContentText = new Text(this.getId() + "-content-text", {
-			maxLines : 2
-		});
-		this._oContentText.cacheLineHeight = false;
+		this._oContentText = new FormattedText(this.getId() + "-content-text");
+		this._oSubHeaderText = new FormattedText(this.getId() + "-subheader-text");
 		this.setAggregation("_contentText", this._oContentText, true);
+		this.setAggregation("_subHeaderText", this._oSubHeaderText, true);
 		this.setTooltip("{AltText}");
 	};
 
@@ -131,8 +135,8 @@ sap.ui.define([
 	NewsContent.prototype.getAltText = function() {
 		var sAltText = "";
 		var bIsFirst = true;
-		if (this.getAggregation("_contentText").getText()) {
-			sAltText += this.getAggregation("_contentText").getText();
+		if (this.getContentText()) {
+			sAltText += this.getContentText();
 			bIsFirst = false;
 		}
 		if (this.getSubheader()) {
@@ -160,10 +164,15 @@ sap.ui.define([
 	};
 
 	NewsContent.prototype.setContentText = function(text) {
-		this._oContentText.setText(text);
+		this._oContentText.setHtmlText(text);
 		return this.setProperty("contentText", text, true);
 	};
 
+	NewsContent.prototype.setSubheader = function(text) {
+		this._oSubHeaderText.setHtmlText(text);
+		return this.setProperty("subheader", text, true);
+	};
+
 	/* --- Event Handling --- */
 
 	/**

package/src/sap/m/NewsContentRenderer.js

@@ -23,7 +23,6 @@ sap.ui.define([],
 	 * @param {sap.m.GenericTile} oControl the control to be rendered
 	 */
 	NewsContentRenderer.render = function(oRm, oControl) {
-		var sSubheader = oControl.getSubheader();
 		var sTooltip = oControl.getTooltip_AsString();
 		if (typeof sTooltip !== "string") {
 			sTooltip = "";
@@ -49,7 +48,7 @@ sap.ui.define([],
 		oRm.openStart("div", oControl.getId() + "-subheader");
 		oRm.class("sapMNwCSbh");
 		oRm.openEnd();
-		oRm.text(sSubheader);
+		oRm.renderControl(oControl._oSubHeaderText);
 		oRm.close("div");
 		oRm.close("div");
 	};

package/src/sap/m/NotificationList.js

@@ -27,7 +27,7 @@ function(
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/NotificationListBase.js

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

package/src/sap/m/NotificationListGroup.js

@@ -66,7 +66,7 @@ function(
 	 * @extends sap.m.NotificationListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/NotificationListGroupRenderer.js

@@ -33,6 +33,7 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/core/InvisibleRenderer", "sap/ui/D
 		}
 
 		if (!control.getItems().length && !control.getShowEmptyGroup()) {
+			InvisibleRenderer.render(rm, control, control.TagName);
 			return false;
 		}
 

package/src/sap/m/NotificationListItem.js

@@ -66,7 +66,7 @@ function(
 	 * @extends sap.m.NotificationListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/NumericContent.js

@@ -107,7 +107,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @since 1.34
 	 *
 	 * @public

package/src/sap/m/NumericContentRenderer.js

@@ -184,28 +184,45 @@ sap.ui.define([
 		oRm.class(oControl.getState());
 		oRm.openEnd();
 
-		var oMaxDigitsData = oControl._getMaxDigitsData();
-		this._prepareAndRenderIcon(oRm, oControl, oControl._oIcon, oMaxDigitsData.fontClass);
-
-		var iChar = oControl.getTruncateValueTo() || oMaxDigitsData.maxLength;
-	    oRm.openStart("span" , oControl.getId() + "-value-inner");
-		if (oMaxDigitsData.fontClass) {
-			oRm.class(oMaxDigitsData.fontClass);
-		}
-		oRm.openEnd();
+		if (oControl.getState() === LoadState.Loading) {
+			oRm.openStart("div").class("sapMNCContentShimmerPlaceholderItem");
+			oRm.openEnd();
+			oRm.openStart("div")
+				.class("sapMNCContentShimmerPlaceholderRows")
+				.openEnd();
+			oRm.openStart("div")
+				.class("sapMNCContentShimmerPlaceholderItemHeader")
+				.class("sapMNCLoadingShimmer")
+				.openEnd()
+				.close("div");
 
-		//Control shows only iChar characters. If the last shown character is decimal separator - show only first N-1 characters. So "144.5" is shown like "144" and not like "144.".
-		if (sValue.length >= iChar && (sValue[iChar - 1] === "." || sValue[iChar - 1] === ",")) {
-			oRm.text(sValue.substring(0, iChar - 1));
+			oRm.close("div");
+			oRm.close("div");
+			oRm.close("div");
 		} else {
-			oRm.text(sValue ? sValue.substring(0, iChar) : sEmptyValue);
-		}
+			var oMaxDigitsData = oControl._getMaxDigitsData();
+			this._prepareAndRenderIcon(oRm, oControl, oControl._oIcon, oMaxDigitsData.fontClass);
 
-		oRm.close("span");
+			var iChar = oControl.getTruncateValueTo() || oMaxDigitsData.maxLength;
+			oRm.openStart("span" , oControl.getId() + "-value-inner");
+			if (oMaxDigitsData.fontClass) {
+				oRm.class(oMaxDigitsData.fontClass);
+			}
+			oRm.openEnd();
 
-		this._renderScaleAndIndicator(oRm, oControl, sWithoutMargin, sValue, sScale, oMaxDigitsData.fontClass);
+			//Control shows only iChar characters. If the last shown character is decimal separator - show only first N-1 characters. So "144.5" is shown like "144" and not like "144.".
+			if (sValue.length >= iChar && (sValue[iChar - 1] === "." || sValue[iChar - 1] === ",")) {
+				oRm.text(sValue.substring(0, iChar - 1));
+			} else {
+				oRm.text(sValue ? sValue.substring(0, iChar) : sEmptyValue);
+			}
 
-		oRm.close("div");
+			oRm.close("span");
+
+			this._renderScaleAndIndicator(oRm, oControl, sWithoutMargin, sValue, sScale, oMaxDigitsData.fontClass);
+
+			oRm.close("div");
+		}
 	};
 
 	return NumericContentRenderer;

package/src/sap/m/ObjectAttribute.js

@@ -13,9 +13,10 @@ sap.ui.define([
 	'sap/ui/events/KeyCodes',
 	'./ObjectAttributeRenderer',
 	'sap/base/Log',
+	'sap/ui/base/ManagedObjectObserver',
 	'sap/ui/core/Core'
 ],
-function(library, Control, coreLibrary, Text, KeyCodes, ObjectAttributeRenderer, Log, Core) {
+function(library, Control, coreLibrary, Text, KeyCodes, ObjectAttributeRenderer, Log, ManagedObjectObserver, Core) {
 	"use strict";
 
 	// shortcut for sap.ui.core.TextDirection
@@ -38,7 +39,7 @@ function(library, Control, coreLibrary, Text, KeyCodes, ObjectAttributeRenderer,
 	 * <code>text</code> property is styled and acts as a link. In this case the <code>text</code>
 	 * property must also be set, as otherwise there will be no link displayed for the user.
 	 * @extends sap.ui.core.Control
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -116,13 +117,24 @@ function(library, Control, coreLibrary, Text, KeyCodes, ObjectAttributeRenderer,
 		this.setAggregation('_textControl', new Text());
 	};
 
+	ObjectAttribute.prototype.exit = function() {
+		if (this._oCustomContentObserver) {
+			this._oCustomContentObserver.disconnect();
+			this._oCustomContentObserver = null;
+		}
+
+		if (this._oCustomContentCloning) {
+			this._oCustomContentCloning.destroy();
+		}
+	};
+
 	/**
 	 * Delivers text control with updated title, text and maxLines properties.
 	 *
 	 * @private
 	 */
 	ObjectAttribute.prototype._getUpdatedTextControl = function() {
-		var oAttrAggregation = this.getAggregation('customContent') || this.getAggregation('_textControl'),
+		var oAttrAggregation = this._oCustomContentCloning || this.getAggregation('_textControl'),
 			sTitle = this.getTitle(),
 			sText = this.getAggregation('customContent') ? this.getAggregation('customContent').getText() : this.getText(),
 			sTextDir = this.getTextDirection(),
@@ -280,11 +292,40 @@ function(library, Control, coreLibrary, Text, KeyCodes, ObjectAttributeRenderer,
 	};
 
 	ObjectAttribute.prototype.setCustomContent = function(oCustomContent) {
-		if (oCustomContent && oCustomContent.isA('sap.m.Link')) {
-			oCustomContent._getTabindex = function() {
+		var oCurrentCustomContent = this.getCustomContent(),
+			fnGetTabIndex = function() {
 				return "-1";
 			};
+
+		//for the cases where the original custom content is rendered
+		if (oCustomContent && oCustomContent.isA('sap.m.Link')) {
+			oCustomContent._getTabindex = fnGetTabIndex;
+		}
+
+		// clone the new aggregation, but first destroy the previous cloning
+		if (this._oCustomContentCloning) {
+			this._oCustomContentCloning.destroy();
+		}
+		this._oCustomContentCloning = oCustomContent && oCustomContent.clone();
+
+		if (this._oCustomContentCloning && this._oCustomContentCloning.isA('sap.m.Link')) {
+			this._oCustomContentCloning._getTabindex = fnGetTabIndex;
+		}
+
+		if (!this._oCustomContentObserver) {
+			this._oCustomContentObserver = new ManagedObjectObserver(function() {
+				this.invalidate();
+			}.bind(this));
 		}
+
+		// do not listen for property changes on the old control
+		if (oCurrentCustomContent) {
+			this._oCustomContentObserver.unobserve(oCurrentCustomContent);
+		}
+
+		// listen on the new one
+		oCustomContent && this._oCustomContentObserver.observe(oCustomContent, { properties: true });
+
 		return this.setAggregation('customContent', oCustomContent);
 	};
 

package/src/sap/m/ObjectHeader.js

@@ -80,7 +80,7 @@ sap.ui.define([
 	 * <code>sapUiResponsivePadding--header</code>.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -828,9 +828,9 @@ sap.ui.define([
 					domRef : window.document.getElementById(sSourceId)
 				});
 			}
-		} else if (sSourceId === this.getId() + "-titleArrow") {
+		} else if (oEvent.target.classList.contains("sapUiIconTitle")) {
 			this.fireTitleSelectorPress({
-				domRef : window.document.getElementById(sSourceId)
+				domRef : oEvent.target.parentElement
 			});
 		} else if (sSourceId.indexOf(this.getId()) !== -1) {
 			// we didn't click on any of the active parts of the ObjectHeader

package/src/sap/m/ObjectIdentifier.js

@@ -52,7 +52,7 @@ function(
 	 *
      * <b>Note:</b> This control should not be used with {@link sap.m.Label} or in Forms along with {@link sap.m.Label}.
 	 * @extends sap.ui.core.Control
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ObjectListItem.js

@@ -59,7 +59,7 @@ function(
 		 *
 		 * <b>Note:</b> The control must only be used in the context of a list.
 		 * @extends sap.m.ListItemBase
-		 * @version 1.94.0
+		 * @version 1.97.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/ObjectMarker.js

@@ -62,7 +62,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public
@@ -403,7 +403,9 @@ sap.ui.define([
 		if (bIsIconVisible) {
 			oInnerControl.setIcon(oType.icon.src, bSuppressInvalidate);
 			oInnerIcon.setDecorative(!bIsIconOnly); // icon should be decorative if we have text
-			oInnerIcon.setAlt(sText);
+			if (bIsTextVisible) {
+				oInnerIcon.setAlt(sText);
+			}
 			oInnerIcon.setUseIconTooltip(false);
 			this.addStyleClass("sapMObjectMarkerIcon");
 		} else {
@@ -692,5 +694,20 @@ sap.ui.define([
 		return oIcon;
 	};
 
+	/*
+	 * Determines whether self-reference should be added.
+	 *
+	 * @returns {boolean}
+	 * @override
+	 * @private
+	 */
+	CustomLink.prototype._determineSelfReferencePresence = function () {
+		if (this.getIcon() && !this.getText()) {
+			return false;
+		} else {
+			return Link.prototype._determineSelfReferencePresence.apply(this, arguments);
+		}
+	};
+
 	return ObjectMarker;
 });

package/src/sap/m/ObjectNumber.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @implements sap.ui.core.IFormContent
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ObjectNumberRenderer.js

@@ -137,7 +137,7 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/library', './library', 'sap/
 	};
 
 	ObjectNumberRenderer.renderEmphasizedInfoElement = function(oRm, oON) {
-		if (!oON.getEmphasized()) {
+		if (!oON.getEmphasized() || !oON.getNumber()) {
 			return;
 		}
 

package/src/sap/m/ObjectStatus.js

@@ -46,7 +46,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @implements sap.ui.core.IFormContent
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ObjectStatusRenderer.js

@@ -102,8 +102,11 @@ sap.ui.define(['sap/ui/core/ValueStateSupport', 'sap/ui/core/IndicationColorSupp
 				if (sTextDir) {
 					oRm.attr("dir", sTextDir.toLowerCase());
 				}
+
+				oRm.attr("data-colon", Core.getLibraryResourceBundle("sap.m").getText("LABEL_COLON"));
+
 				oRm.openEnd();
-				oRm.text(oObjStatus.getTitle() + ":");
+				oRm.text(oObjStatus.getTitle());
 				oRm.close("span");
 			}