@openui5/sap.m 1.141.2 → 1.142.0

package/src/sap/m/TileContainer.js

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

package/src/sap/m/TileContent.js

@@ -23,7 +23,7 @@ sap.ui.define(['./library', "sap/base/i18n/Localization", 'sap/ui/core/library',
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 * @since 1.34.0
 	 *
 	 * @public

package/src/sap/m/TileInfo.js

@@ -17,7 +17,7 @@ sap.ui.define([
 	 * @class This element is used within the GenericTile control that generates a combination of an icon and a text to create a TileInfo
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 * @constructor
 	 * @public
 	 * @since 1.124

package/src/sap/m/TimePicker.js

@@ -185,7 +185,7 @@ function(
 		 * @extends sap.m.DateTimeField
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @public
@@ -432,6 +432,8 @@ function(
 
 			this.setDisplayFormat(getDefaultDisplayFormat());
 
+			this._createFormatHelp();
+
 			this._oResourceBundle = Library.getResourceBundleFor("sap.m");
 
 			// marks if the value is valid or not
@@ -513,6 +515,11 @@ function(
 				this._invisibleLabelText = null;
 			}
 
+			if (this._formatHelp) {
+				this._formatHelp.destroy();
+				this._formatHelp = null;
+			}
+
 			MaskEnabler.exit.apply(this, arguments);
 
 			this._removePickerEvents();
@@ -1030,6 +1037,10 @@ function(
 
 			this._initMask();
 
+			if (this._formatHelp) {
+				this._formatHelp.setText(sDisplayFormat);
+			}
+
 			if (oClocks) {
 				oClocks.setValueFormat(sDisplayFormat);
 				oClocks.setDisplayFormat(sDisplayFormat);
@@ -1748,6 +1759,24 @@ function(
 			return this._invisibleLabelText;
 		};
 
+		/**
+		 * Returns the invisible format text for the TimePicker.
+		 * @private
+		 * @returns {sap.ui.core.InvisibleText} The invisible placeholder text
+		 */
+		TimePicker.prototype._createFormatHelp = function () {
+			if (!this._formatHelp) {
+				var sPattern = this.getDisplayFormat();
+				this._formatHelp = new InvisibleText({
+					text: sPattern
+				}).toStatic();
+
+				this.addAriaDescribedBy(this._formatHelp.getId());
+
+			}
+            return this._formatHelp;
+        };
+
 		/**
 		 * Returns the accessible name for the TimePicker.
 		 * @returns {string} The accessible name

package/src/sap/m/TimePickerClock.js

@@ -28,7 +28,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/m/TimePickerClocks.js

@@ -53,7 +53,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @public
@@ -116,9 +116,7 @@ sap.ui.define([
 				sTooltip = oButton._getTooltip(),
 				sText = oButton._getText(),
 				sTextDir = oButton.getTextDirection(),
-				bIE_Edge = Device.browser.internet_explorer || Device.browser.edge,
-				// render bdi tag only if the browser is different from IE and Edge since it is not supported there
-				bRenderBDI = (sTextDir === TextDirection.Inherit) && !bIE_Edge;
+				bRenderBDI = (sTextDir === TextDirection.Inherit);
 
 			// start button tag
 			oRm.openStart("div", oButton);
@@ -174,10 +172,6 @@ sap.ui.define([
 			// check if button is focusable (not disabled)
 			if (bEnabled) {
 				oRm.class("sapMFocusable");
-				// special focus handling for IE
-				if (bIE_Edge) {
-					oRm.class("sapMIE");
-				}
 			}
 
 			if (sText) {
@@ -218,14 +212,6 @@ sap.ui.define([
 				oRm.close("span");
 			}
 
-			// special handling for IE focus outline
-			if (bIE_Edge && bEnabled) {
-				oRm.openStart("span");
-				oRm.class("sapMBtnFocusDiv");
-				oRm.openEnd();
-				oRm.close("span");
-			}
-
 			// end inner button tag
 			oRm.close("span");
 

package/src/sap/m/TimePickerInputs.js

@@ -51,7 +51,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/TimePickerInternals.js

@@ -50,7 +50,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/m/TimePickerSlider.js

@@ -30,7 +30,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/m/TimePickerSliders.js

@@ -55,7 +55,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/Title.js

@@ -74,7 +74,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IShrinkable
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 * @since 1.27.0
 	 *
 	 * @constructor

package/src/sap/m/TitlePropagationSupport.js

@@ -51,7 +51,7 @@ sap.ui.define(["sap/ui/core/ControlBehavior"],
 		 * style class support on existing elements by calling this function.
 		 *
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @param {string} sAggregationName the name of the aggregation which should be affected
 		 * @param {object} fnGetTitleID function that would return the ID of the title

package/src/sap/m/ToggleButton.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * @extends sap.m.Button
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Token.js

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

package/src/sap/m/Tokenizer.js

@@ -12,6 +12,7 @@ sap.ui.define([
 	'sap/m/List',
 	'sap/m/StandardListItem',
 	'sap/m/ResponsivePopover',
+	"sap/ui/core/Core",
 	"sap/ui/core/ControlBehavior",
 	'sap/ui/core/Control',
 	'sap/ui/core/Element',
@@ -37,6 +38,7 @@ sap.ui.define([
 		List,
 		StandardListItem,
 		ResponsivePopover,
+		Core,
 		ControlBehavior,
 		Control,
 		Element,
@@ -82,8 +84,14 @@ sap.ui.define([
 	 * Still the Token itself can determine if it is <code>editable</code>. This allows you to have non-editable Tokens in an editable Tokenizer.
 	 *
 	 * @extends sap.ui.core.Control
+	 * @implements sap.ui.core.ISemanticFormContent
+	 *
+	 * @borrows sap.ui.core.ISemanticFormContent.getFormFormattedValue as #getFormFormattedValue
+	 * @borrows sap.ui.core.ISemanticFormContent.getFormValueProperty as #getFormValueProperty
+	 * @borrows sap.ui.core.ISemanticFormContent.getFormObservingProperties as #getFormObservingProperties
+	 * @borrows sap.ui.core.ISemanticFormContent.getFormRenderAsControl as #getFormRenderAsControl
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public
@@ -93,6 +101,10 @@ sap.ui.define([
 	 */
 	var Tokenizer = Control.extend("sap.m.Tokenizer", /** @lends sap.m.Tokenizer.prototype */ {
 		metadata : {
+			interfaces : [
+				"sap.ui.core.IFormContent",
+				"sap.ui.core.ISemanticFormContent"
+			],
 			library : "sap.m",
 			properties : {
 
@@ -136,7 +148,42 @@ sap.ui.define([
 				/**
 				 * The ID of the opener of the tokens popup.
 				 */
-				opener: { type: "string", multiple: false, visibility: "hidden" }
+				opener: { type: "string", multiple: false, visibility: "hidden" },
+
+				/**
+				 * The name property to be used in the HTML code for the tokenizer (e.g. for HTML forms that send data to the server via submit).
+				 * @since 1.142.0
+				 */
+				name: { type: "string", group: "Misc", defaultValue: "" },
+
+				/**
+				 * Determines whether the <code>Tokenizer</code> is in display only state.
+				 *
+				 * When set to <code>true</code>, the <code>Tokenizer</code> is not editable.
+				 * This setting is used for forms in review mode.
+				 *
+				 * @since 1.142.0
+				 */
+				displayOnly : {type : "boolean", group : "Behavior", defaultValue : false},
+
+				/**
+				 * Changed when tokens are changed. The value for sap.ui.core.ISemanticFormContent interface.
+				 * Contains a comma-separated list of all token texts for form processing.
+				 * @private
+				 */
+				_semanticFormValue: {type: "string", group: "Behavior", defaultValue: "", visibility: "hidden"},
+
+				/**
+				 * Defines whether tokens are displayed on multiple lines.
+				 * @experimental since 1.142
+				 */
+				multiLine: {type: "boolean", group: "Misc", defaultValue: false},
+
+				/**
+				 * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.
+				 * @experimental since 1.142
+				 */
+				showClearAll: {type: "boolean", group: "Misc", defaultValue: false}
 
 			},
 			defaultAggregation : "tokens",
@@ -285,6 +332,7 @@ sap.ui.define([
 		this.allowTextSelection(false);
 		this._oTokensWidthMap = {};
 		this._oIndicator = null;
+		this._bInForm = false;
 		this._bShouldRenderTabIndex = null;
 		this._oScroller = new ScrollEnablement(this, this.getId() + "-scrollContainer", {
 			horizontal : true,
@@ -390,6 +438,46 @@ sap.ui.define([
 		return this._oTokensList;
 	};
 
+	Tokenizer.prototype.getFormFormattedValue = function () {
+		this._bInForm = true;
+		const sTokens = this.getTokens()
+			.map(function (oToken) { return oToken.getText(); })
+			.join(", ");
+
+		// show en-dash in form display mode when empty
+		if (!sTokens) {
+			return "\u2013";
+		}
+		return sTokens;
+	};
+
+	Tokenizer.prototype.getFormValueProperty = function () {
+		return "_semanticFormValue";
+	};
+
+	Tokenizer.prototype.getFormObservingProperties = function() {
+		return ["_semanticFormValue"];
+	};
+
+	Tokenizer.prototype.getFormRenderAsControl = function () {
+		// if there are no tokens, we render the tokenizer as en-dash and not as a control
+		if (this.getDisplayOnly() && !this.getTokens().length) {
+			return false;
+		} else {
+			return this.getDisplayOnly();
+		}
+	};
+
+	/**
+	 * ISemanticFormContent interface works only with properties. The state of Tokenizer is kept as Tokens.
+	 * Update _semanticFormValue property so it'd match Tokenizer's state, but as a string which could be reused.
+	 *
+	 * @private
+	 */
+	Tokenizer.prototype.updateFormValueProperty = function () {
+		this.setProperty("_semanticFormValue", this.getFormFormattedValue(), true);
+	};
+
 	/**
 	 * Changes list mode.
 	 *
@@ -741,10 +829,20 @@ sap.ui.define([
 			iLabelWidth, iFreeSpace,
 			iCounter, iFirstTokenToHide = -1;
 
+		if (this.getMultiLine()) {
+			aTokens.forEach(function (oToken) {
+				const iTokenWidth = iTokenizerWidth - this._oTokensWidthMap[oToken.getId()];
+				if (iTokenWidth <= 0) {
+					oToken.setTruncated(true);
+				}
+			}, this);
+			return;
+		}
+
 		// find the index of the first overflowing token
 		aTokens.some(function (oToken, iIndex) {
 			iTokenizerWidth = iTokenizerWidth - this._oTokensWidthMap[oToken.getId()];
-			if ((iTokenizerWidth <= 1 && iTokensCount === 1) || iTokenizerWidth < 0) {
+			if (iTokenizerWidth < 0) {
 				iFirstTokenToHide = iIndex;
 				return true;
 			} else {
@@ -974,7 +1072,7 @@ sap.ui.define([
 	Tokenizer.prototype.onBeforeRendering = function() {
 		var aTokens = this.getTokens();
 
-		if (aTokens.length !== 1) {
+		if (aTokens.length !== 1 && !this.getMultiLine()) {
 			this.setFirstTokenTruncated(false);
 		}
 
@@ -1240,6 +1338,9 @@ sap.ui.define([
 				default:
 					break;
 			}
+
+			this.updateFormValueProperty();
+			this.invalidate();
 		}.bind(this));
 
 		oTokensObserver.observe(this, {
@@ -1483,7 +1584,7 @@ sap.ui.define([
 			this._oSelectionOrigin = oFocusedToken;
 		}
 
-		if (oTargetToken && this.hasOneTruncatedToken()) {
+		if (oTargetToken && this.hasOneTruncatedToken() && !this.getMultiLine()) {
 			this._handleNMoreIndicatorPress();
 			return;
 		}
@@ -1808,6 +1909,18 @@ sap.ui.define([
 		if (this._nMoreIndicatorPressed) {
 			this._handleNMoreIndicatorPress();
 		}
+
+		const _bClearAllPressed = oEvent.target.classList.contains("sapMTokenizerClearAll");
+
+		if (_bClearAllPressed) {
+			this._handleClearAll();
+		}
+
+		const bMultiLineTruncatedTokenPressed = (oEvent.target.classList.contains("sapMTokenTruncated") && !this.hasStyleClass("sapMTokenizerIndicatorDisabled")) && this.getMultiLine();
+
+		if (bMultiLineTruncatedTokenPressed) {
+			this._togglePopup(this.getTokensPopup());
+		}
 	};
 
 	/**
@@ -1854,6 +1967,7 @@ sap.ui.define([
 		this._oIndicator = null;
 		this._aTokenValidators = null;
 		this._bShouldRenderTabIndex = null;
+		this._bInForm = false;
 		this._bThemeApplied = false;
 
 	};
@@ -2004,6 +2118,41 @@ sap.ui.define([
 		return this._handleDelete(iIndex, fnFallback);
 	};
 
+	/**
+	 * Handler for clear all button click.
+	 *
+	 * @private
+	 */
+	Tokenizer.prototype._handleClearAll = function() {
+		this.fireTokenDelete({
+			tokens: this.getTokens()
+		});
+	};
+
+	/**
+	 * Determines if the clear all button should be displayed.
+	 *
+	 * @private
+	 * @returns {boolean} True if clear all button should be displayed
+	 */
+	Tokenizer.prototype.showEffectiveClearAll = function() {
+		return this.getShowClearAll() &&
+			this.getMultiLine() &&
+			this.getTokens().length > 0 &&
+			this.getEditable() &&
+			this.getEnabled();
+	};
+
+	/**
+	 * Returns text for the clear all button.
+	 *
+	 * @private
+	 * @returns {string} Text for the clear all button
+	 */
+	Tokenizer.prototype._getClearAllText = function() {
+		return Core.getLibraryResourceBundle("sap.m").getText("TOKENIZER_CLEAR_ALL");
+	};
+
 	Tokenizer.TokenChangeType = {
 		Added : "added",
 		Removed : "removed",

package/src/sap/m/TokenizerRenderer.js

@@ -37,10 +37,19 @@ sap.ui.define(['sap/ui/Device', 'sap/ui/core/InvisibleText'],
 	 */
 	TokenizerRenderer.renderInnerContent = function(oRm, oControl) {
 		var aTokens = oControl.getTokens();
+		var bMultiLine = oControl.getMultiLine();
 
 		oRm.class("sapMTokenizer");
 
-		if (!oControl.getEditable()) {
+		if (bMultiLine) {
+			oRm.class("sapMTokenizerMultiLine");
+		}
+
+		if (oControl._bInForm){
+			oRm.class("sapMTokenizerHeightMargin");
+		}
+
+		if (!oControl.getEditable() || oControl.getDisplayOnly()) {
 			oRm.class("sapMTokenizerReadonly");
 		}
 
@@ -49,7 +58,7 @@ sap.ui.define(['sap/ui/Device', 'sap/ui/core/InvisibleText'],
 
 		}
 
-		if (!aTokens.length) {
+		if (!aTokens.length && !oControl._bInForm) {
 			oRm.class("sapMTokenizerEmpty");
 			oRm.attr("aria-hidden", "true");
 		}
@@ -87,7 +96,7 @@ sap.ui.define(['sap/ui/Device', 'sap/ui/core/InvisibleText'],
 		}
 
 		oRm.openStart("div", oControl.getId() + "-scrollContainer");
-		oRm.class("sapMTokenizerScrollContainer");
+		oRm.class(bMultiLine ? "sapMTokenizerMultiLineContainer" : "sapMTokenizerScrollContainer");
 
 		if (oControl.getHiddenTokensCount() === oControl.getTokens().length) {
 			oRm.class("sapMTokenizerScrollContainerNoVisibleTokens");
@@ -95,6 +104,7 @@ sap.ui.define(['sap/ui/Device', 'sap/ui/core/InvisibleText'],
 
 		oRm.openEnd();
 		this._renderTokens(oRm, oControl);
+		this._renderClearAll(oRm, oControl);
 
 		oRm.close("div");
 		this._renderIndicator(oRm, oControl);
@@ -160,6 +170,23 @@ sap.ui.define(['sap/ui/Device', 'sap/ui/core/InvisibleText'],
 		oRm.openEnd().close("span");
 	};
 
+	/**
+	 * Renders the Clear All button
+	 *
+	 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
+	 * @param {sap.m.Tokenizer} oControl an object representation of the control that should be rendered
+	 */
+	TokenizerRenderer._renderClearAll = function(oRm, oControl){
+		if (oControl.showEffectiveClearAll()) {
+			oRm.openStart("span", oControl.getId() + "-clearAll")
+				.class("sapMTokenizerClearAll")
+				.attr("role", "button")
+				.openEnd();
+			oRm.text(oControl._getClearAllText());
+			oRm.close("span");
+		}
+	};
+
 	/**
 	 * Callback for specific rendering of Tokenizer N-more indicator tabindex attribute.
 	 *

package/src/sap/m/Toolbar.js

@@ -80,7 +80,7 @@ function(
 	 * @implements sap.ui.core.Toolbar,sap.m.IBar
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ToolbarLayoutData.js

@@ -25,7 +25,7 @@ sap.ui.define(['./library', 'sap/ui/core/LayoutData'],
 	 * <code>layoutData</code> aggregation of {@link sap.m.ToolbarSpacer} and if set it's ignored.
 	 *
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ToolbarSeparator.js

@@ -23,7 +23,7 @@ sap.ui.define(['./library', 'sap/ui/core/Control', './ToolbarSeparatorRenderer']
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ToolbarSpacer.js

@@ -29,7 +29,7 @@ function(library, Control, ToolbarSpacerRenderer, Log) {
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Tree.js

@@ -43,7 +43,7 @@ function(
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/TreeItemBase.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/UploadCollection.js

@@ -97,7 +97,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/UploadCollectionItem.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/UploadCollectionParameter.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/UploadCollectionToolbarPlaceholder.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/VBox.js

@@ -26,7 +26,7 @@ sap.ui.define(['./FlexBox', './library', "./VBoxRenderer"],
 	 * @extends sap.m.FlexBox
 	 *
 	 * @author SAP SE
-	 * @version 1.141.2
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/ValueStateHeader.js

@@ -23,7 +23,7 @@ sap.ui.define(
 		 *
 		 * @extends sap.ui.core.Control
 		 * @author SAP SE
-		 * @version 1.141.2
+		 * @version 1.142.0
 		 *
 		 * @constructor
 		 * @private