@openui5/sap.ui.mdc 1.98.0 → 1.99.0

package/src/sap/ui/mdc/odata/v4/vizChart/ChartDelegate.js

@@ -22,7 +22,10 @@ sap.ui.define([
     "sap/ui/base/ManagedObjectObserver",
     "sap/ui/core/ResizeHandler",
     "sap/ui/mdc/p13n/panels/ChartItemPanel",
-    "sap/m/MessageStrip"
+    "sap/m/MessageStrip",
+    "../TypeUtil",
+    "../FilterBarDelegate",
+    "sap/ui/model/Filter"
 ], function (
     V4ChartDelegate,
     loadModules,
@@ -41,7 +44,10 @@ sap.ui.define([
     ManagedObjectObserver,
     ResizeHandler,
     ChartItemPanel,
-    MessageStrip
+    MessageStrip,
+    V4TypeUtil,
+    V4FilterBarDelegate,
+    Filter
 ) {
     "use strict";
     /**
@@ -82,6 +88,14 @@ sap.ui.define([
         mStateMap.set(oMDCChart, oState);
     };
 
+    ChartDelegate.getTypeUtil = function() {
+        return V4TypeUtil;
+    };
+
+    ChartDelegate.getFilterDelegate = function() {
+        return V4FilterBarDelegate;
+    };
+
     ChartDelegate._deleteState = function(oMDCChart) {
 
         if (this._getState(oMDCChart).vizTooltip) {
@@ -176,36 +190,6 @@ sap.ui.define([
      * ...
      */
 
-    /**
-     * Provides the table's filter delegate that provides basic filter functionality such as adding filter fields.
-     * <b>Note:</b> The functionality provided in this delegate should act as a subset of a FilterBarDelegate
-     * to enable the table for inbuilt filtering.
-     *
-     * @example <caption>Example usage of <code>getFilterDelegate</code></caption>
-     * oFilterDelegate = {
-     * 		addItem: function() {
-     * 			var oFilterFieldPromise = new Promise(...);
-     * 			return oFilterFieldPromise;
-     * 		}
-     * }
-     * @returns {Object} Object for the chart filter personalization
-     * @public
-     */
-    ChartDelegate.getFilterDelegate = function () {
-        return {
-            /**
-             *
-             * @param {String} sPropertyName The property name
-             * @param {Object} oMDCChart Instance of the chart TODO: Which one? MDC or inner?
-             *
-             * @returns {Promise} Promise that resolves with an instance of a <code>sap.ui.mdc.FilterField</code>.
-             * For more information, see {@link sap.ui.mdc.AggregationBaseDelegate#addItem AggregationBaseDelegate}.
-             */
-            addItem: function (sPropertyName, oMDCChart) {
-                return Promise.resolve(null);
-            }
-        };
-    };
 
     ChartDelegate.exit = function(oMDCChart) {
         if (this._getInnerStructure(oMDCChart)){
@@ -344,7 +328,7 @@ sap.ui.define([
     /**
      * Sets the visibility of the legend
      * This is called by the MDC Chart, do not call it directly!
-     * @param {bool} bVisible true to show legend, false to hide
+     * @param {boolean} bVisible true to show legend, false to hide
      *
      * @experimental
      * @private
@@ -1257,7 +1241,7 @@ sap.ui.define([
 
     /**
      * Returns whether the inner chart is currently bound
-     * @returns {bool} true if inner chart is bound; false if not
+     * @returns {boolean} true if inner chart is bound; false if not
      */
     ChartDelegate.getInnerChartBound = function (oMDCChart) {
         var oState = this._getState(oMDCChart);
@@ -1276,48 +1260,73 @@ sap.ui.define([
      * @param {Object} oBindingInfo The binding info of the chart
      */
     ChartDelegate.updateBindingInfo = function (oMDCChart, oBindingInfo) {
-        var oFilter = Core.byId(oMDCChart.getFilter());
-        if (oFilter) {
-            var mConditions = oFilter.getConditions();
+        var aFilters = createInnerFilters.call(this, oMDCChart).concat(createOuterFilters.call(this, oMDCChart));
+        addSearchParameter(oMDCChart, oBindingInfo);
+		oBindingInfo.filters = new Filter(aFilters, true);
+    };
 
-            if (mConditions) {
+    function createInnerFilters(oChart) {
+		var bFilterEnabled = oChart.getP13nMode().indexOf("Filter") > -1;
+		var aFilters = [];
 
-                if (!oBindingInfo) {
-                    oBindingInfo = {};
-                }
+		if (bFilterEnabled) {
+			var aChartProperties = oChart.getPropertyHelper().getProperties();
+			var oInnerFilterInfo = FilterUtil.getFilterInfo(this.getTypeUtil(), oChart.getConditions(), aChartProperties);
 
-                var aPropertiesMetadata = oFilter.getPropertyInfoSet ? oFilter.getPropertyInfoSet() : null;
-                var aParameterNames = DelegateUtil.getParameterNames(oFilter);
-                var oFilterInfo = FilterUtil.getFilterInfo(ChartDelegate.getTypeUtil(), mConditions, aPropertiesMetadata, aParameterNames);
-                if (oFilterInfo) {
-                    oBindingInfo.filters = oFilterInfo.filters;
-                }
+			if (oInnerFilterInfo.filters) {
+				aFilters.push(oInnerFilterInfo.filters);
+			}
+		}
 
-                var sParameterPath = DelegateUtil.getParametersInfo(oFilter);
-                if (sParameterPath) {
-                    oBindingInfo.path = sParameterPath;
-                }
-            }
+		return aFilters;
+	}
 
-            // get the basic search
-            var sSearchText = oFilter.getSearch instanceof Function ? oFilter.getSearch() :  "";
-            if (sSearchText) {
+	function createOuterFilters(oChart) {
+		var oFilter = Core.byId(oChart.getFilter());
+		var aFilters = [];
 
-                if (!oBindingInfo) {
-                    oBindingInfo = {};
-                }
+		if (!oFilter) {
+			return aFilters;
+		}
 
-                if (!oBindingInfo.parameters) {
-                    oBindingInfo.parameters = {};
-                }
-                // add basic search parameter as expected by v4.ODataListBinding
-                oBindingInfo.parameters.$search = sSearchText;
-            } else if (oBindingInfo.parameters && oBindingInfo.parameters.$search) {
-                delete oBindingInfo.parameters.$search;
-            }
+		var mConditions = oFilter.getConditions();
+
+		if (mConditions) {
+			var aPropertiesMetadata = oFilter.getPropertyInfoSet ? oFilter.getPropertyInfoSet() : null;
+			var aParameterNames = DelegateUtil.getParameterNames(oFilter);
+			var oOuterFilterInfo = FilterUtil.getFilterInfo(this.getTypeUtil(), mConditions, aPropertiesMetadata, aParameterNames);
+
+			if (oOuterFilterInfo.filters) {
+				aFilters.push(oOuterFilterInfo.filters);
+			}
+		}
 
+		return aFilters;
+	}
+
+	function addSearchParameter(oChart, oBindingInfo) {
+		var oFilter = Core.byId(oChart.getFilter());
+		if (!oFilter) {
+			return;
+		}
+
+		var mConditions = oFilter.getConditions();
+		// get the basic search
+		var sSearchText = oFilter.getSearch instanceof Function ? oFilter.getSearch() :  "";
+
+		if (mConditions) {
+			var sParameterPath = DelegateUtil.getParametersInfo(oFilter, mConditions);
+			if (sParameterPath) {
+				oBindingInfo.path = sParameterPath;
+			}
+		}
+
+        if (!oBindingInfo.parameters) {
+            oBindingInfo.parameters = {};
         }
-    };
+
+		oBindingInfo.parameters["$search"] = sSearchText || undefined;
+	}
 
     ChartDelegate._getAggregatedMeasureNameForMDCItem = function(oMDCItem){
         return this.getInternalChartNameFromPropertyNameAndKind(oMDCItem.getName(), "aggregatable", oMDCItem.getParent());
@@ -1408,7 +1417,7 @@ sap.ui.define([
 
     /**
      * Sets tooltips visible/invisible on inner chart
-     * @param {bool}  bFlag true for visible, false for invisible
+     * @param {boolean}  bFlag true for visible, false for invisible
      */
     ChartDelegate.setChartTooltipVisibility = function (oMDCChart, bFlag) {
 
@@ -1574,7 +1583,7 @@ sap.ui.define([
                     }
 
                     if (oPropertyAnnotations["@Org.OData.Aggregation.V1.Aggregatable"]){
-                        aProperties = aProperties.concat(this._createPropertyInfosForAggregatable(sKey, oPropertyAnnotations, oFilterRestrictionsInfo, oSortRestrictionsInfo));
+                        aProperties = aProperties.concat(this._createPropertyInfosForAggregatable(sKey, oPropertyAnnotations, oObj, oFilterRestrictionsInfo, oSortRestrictionsInfo));
                     }
 
                     if (oPropertyAnnotations["@Org.OData.Aggregation.V1.Groupable"]) {
@@ -1589,6 +1598,7 @@ sap.ui.define([
                             aggregatable: false,
                             maxConditions: ODataMetaModelUtil.isMultiValueFilterExpression(oFilterRestrictionsInfo.propertyInfo[sKey]) ? -1 : 1,
                             sortKey: sKey,
+                            typeConfig: this.getTypeUtil().getTypeConfig(oObj.$Type, null, {}),
                             kind:  "Groupable", //TODO: Rename in type; Only needed for P13n Item Panel
                             availableRoles: this._getLayoutOptionsForType("groupable"), //for p13n
                             role: MDCLib.ChartItemRoleType.category, //standard, normally this should be interpreted from UI.Chart annotation
@@ -1603,7 +1613,7 @@ sap.ui.define([
         }.bind(this));
     };
 
-    ChartDelegate._createPropertyInfosForAggregatable = function(sKey, oPropertyAnnotations, oFilterRestrictionsInfo, oSortRestrictionsInfo) {
+    ChartDelegate._createPropertyInfosForAggregatable = function(sKey, oPropertyAnnotations, oObj, oFilterRestrictionsInfo, oSortRestrictionsInfo) {
         var aProperties = [];
 
         if (oPropertyAnnotations["@Org.OData.Aggregation.V1.SupportedAggregationMethods"]){
@@ -1619,6 +1629,7 @@ sap.ui.define([
                     aggregationMethod: sAggregationMethod,
                     maxConditions: ODataMetaModelUtil.isMultiValueFilterExpression(oFilterRestrictionsInfo.propertyInfo[sKey]) ? -1 : 1,
                     sortKey: oPropertyAnnotations["@Org.OData.Aggregation.V1.RecommendedAggregationMethod"] + sKey,
+                    typeConfig: this.getTypeUtil().getTypeConfig(oObj.$Type, null, {}),
                     kind: "Aggregatable",//Only needed for P13n Item Panel
                     availableRoles: this._getLayoutOptionsForType("aggregatable"), //for p13n
                     role: MDCLib.ChartItemRoleType.axis1,

package/src/sap/ui/mdc/p13n/Engine.js

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.mdc
@@ -300,7 +300,11 @@ sap.ui.define([
 			var oModificationSetting = this._determineModification(vControl);
 			return oModificationSetting.handler.processChanges(aChanges, oModificationSetting.payload)
 			.then(function(aChanges){
-				this.stateHandlerRegistry.fireChange(Engine.getControlInstance(vControl));
+				var oControl = Engine.getControlInstance(vControl);
+				this.stateHandlerRegistry.fireChange(oControl);
+				if (oControl._onChangeAppliance instanceof Function) {
+					oControl._onChangeAppliance.call(oControl);
+				}
 				return aChanges;
 			}.bind(this));
 		} else {
@@ -806,8 +810,8 @@ sap.ui.define([
 	 * Determines and registeres the ModificationHandler per control instance
 	 *
 	 * @private
-	 * @param {String} sControlId The control id
-	 * @param {String} sAncestorControlId The control ancestor id
+	 * @param {string} sControlId The control id
+	 * @param {string} sAncestorControlId The control ancestor id
 	 *
 	 * @returns {boolean} Returns whether an according ancestor could be found.
 	 */

package/src/sap/ui/mdc/p13n/P13nBuilder.js

@@ -31,8 +31,8 @@ sap.ui.define([
          * @param {object} oP13nUI Control displayed in the content area
          * @param {object} mDialogSettings Settings to overwrite popover default properties, such as: <code>contentHeight</code>
          * @param {object} [mDialogSettings.reset] Reset settings for the custom header creation
-         * @param {Function} [mDialogSettings.reset.onExecute] Callback executed upon triggering a reset
-         * @param {String} [mDialogSettings.reset.warningText] Warning which is displyed prior to executing the reset
+         * @param {function} [mDialogSettings.reset.onExecute] Callback executed upon triggering a reset
+         * @param {string} [mDialogSettings.reset.warningText] Warning which is displyed prior to executing the reset
          *
          * @returns {Promise} promise resolving in the Popover instance
          */
@@ -76,8 +76,8 @@ sap.ui.define([
          * @param {object} oP13nUI Control displayed in the content area
          * @param {object} mDialogSettings Settings to overwrite dialog default properties, such as: <code>contentHeight</code>
          * @param {object} [mDialogSettings.reset] Reset settings for the custom header creation
-         * @param {Function} [mDialogSettings.reset.onExecute] Callback executed upon triggering a reset
-         * @param {String} [mDialogSettings.reset.warningText] Warning which is displyed prior to executing the reset
+         * @param {function} [mDialogSettings.reset.onExecute] Callback executed upon triggering a reset
+         * @param {string} [mDialogSettings.reset.warningText] Warning which is displyed prior to executing the reset
          *
          * @returns {Promise} Promise resolving in the Dialog instance
          */
@@ -149,9 +149,9 @@ sap.ui.define([
         /**
          *
          * @param {object} mSettings Settings object to create a customHeader including a reset Button
-         * @param {String} mSettings.title Title for the custom reset header
+         * @param {string} mSettings.title Title for the custom reset header
          * @param {function} mSettings.reset Control specific reset handling
-         * @param {String} [mSettings.warningText] Text which is displayed prior to executing to reset execution
+         * @param {string} [mSettings.warningText] Text which is displayed prior to executing to reset execution
          *
          * @returns {sap.m.Bar} The created custom header Bar
          */

package/src/sap/ui/mdc/p13n/PropertyHelper.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.ui.mdc.util.PropertyHelper
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental

package/src/sap/ui/mdc/p13n/UIManager.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.mdc

package/src/sap/ui/mdc/p13n/modules/DefaultProviderRegistry.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.mdc

package/src/sap/ui/mdc/p13n/panels/ChartItemPanel.js

@@ -338,7 +338,7 @@ sap.ui.define([
 		} else {
 			aCells.push(this._getNameComboBox(oObject.getObject().kind, oObject.getObject().name));
 			aCells.push(this._getRoleSelect());
-			sRemoveBtnId = oObject.getObject().kind + "-RemoveBtn-" + oObject.getObject().name;
+			sRemoveBtnId = this.getId() + oObject.getObject().kind + "-RemoveBtn-" + oObject.getObject().name;
 
 			aCells.push(new HBox({
 				justifyContent: FlexJustifyContent.End,

package/src/sap/ui/mdc/p13n/subcontroller/BaseController.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.mdc

package/src/sap/ui/mdc/p13n/subcontroller/FilterController.js

@@ -28,9 +28,15 @@ sap.ui.define([
             afterClose: function(oEvt) {
                 var oDialog = oEvt.getSource();
                 if (oDialog) {
-                    oDialog.removeAllContent();
-                    oDialog.destroy();
+                    var oDialogContent = oDialog.getContent()[0];
+                    if (oDialogContent.isA("sap.m.p13n.Container")) {
+                        oDialogContent.removeView("Filter");
+                    } else {
+                        oDialog.removeAllContent();
+                    }
                 }
+
+                oDialog.destroy();
             }
         };
     };

package/src/sap/ui/mdc/table/CreationRow.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * {@link sap.ui.mdc.table.Column#getCreationTemplate creationTemplate} aggregation of the {@link sap.ui.mdc.table.Column}.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @constructor
 	 * @experimental
 	 * @private

package/src/sap/ui/mdc/table/PropertyHelper.js

@@ -74,7 +74,7 @@ sap.ui.define([
 	 * @extends sap.ui.mdc.util.PropertyHelper
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental

package/src/sap/ui/mdc/table/RowSettings.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * The <code>RowSettings</code> control is used to configure a row.
 	 * This control can only be used in the context of the <code>sap.ui.mdc.Table</code> control to define row settings.
 	 * @extends sap.ui.core.Element
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @experimental

package/src/sap/ui/mdc/table/V4AnalyticsPropertyHelper.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.ui.mdc.table.PropertyHelper
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @private
 	 * @experimental

package/src/sap/ui/mdc/themes/base/TokenDisplay.less

@@ -0,0 +1,89 @@
+@mdctoken-large-line-height: 1.375rem;
+@mdctoken-small-line-height: 1rem;
+
+// hide Token border and background
+.sapUiMdcTokenizerDisplay .sapMToken {
+	border: 0px; // hide the border of a token
+	background-color: transparent; // remove background of Token
+	padding-left: 0px; // remove the left padding
+}
+
+.sapUiMdcTokenizerDisplay.sapMTokenizer.sapMTokenizerReadonly .sapMToken {
+	padding-left: 0px; // remove left padding of a token. The right padding will be used to show the delimiters
+
+	// right margin and padding of the token (space for the delimiter)
+	padding-right: 0.375rem;
+	margin-right: 0.375rem;
+	margin-top: 0px;
+	margin-bottom: 0px;
+
+	color: @sapUiBaseText;
+	height: @mdctoken-small-line-height;
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay.sapMTokenizer.sapMTokenizerReadonly .sapMToken {
+	height: @mdctoken-large-line-height;
+}
+
+.sapUiSizeCozy .sapUiMdcTokenizerDisplay.sapMTokenizer.sapMTokenizerReadonly .sapMToken {
+	// right margin and padding of the token (space for the delimiter)
+	padding-right: 0.5rem;
+	margin-right: 0.5rem;
+}
+
+// delimiters between tokens
+.sapUiMdcTokenizerDisplay .sapMToken::after {
+	content: attr(delimiter);
+	color: @sapUiBaseText;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	font-weight: normal;
+	vertical-align: middle;
+	margin-left: 0.25rem; // space between tokens. the left margin of the delimiter and the right side of the token
+	position: absolute;
+	line-height: @mdctoken-small-line-height;
+}
+
+.sapUiSizeCozy .sapUiMdcTokenizerDisplay .sapMToken::after {
+	margin-left: 0.4rem; // space between tokens. the left side margin of the token
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMToken::after {
+	line-height: @mdctoken-large-line-height;
+}
+
+// no delimiter after the last token
+.sapUiMdcTokenizerDisplay .sapMToken:last-child:after {
+	content: none;
+}
+
+
+
+// make the token focus invisible
+html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:focus {
+	outline: 0px;
+}
+
+// make the token hover invisible
+html.sap-desktop .sapUiMdcTokenizerDisplay .sapMToken:hover {
+	background: transparent;
+	border: 0px;
+}
+
+.sapUiSizeCompact .sapUiMdcTokenizerDisplay.sapMTokenizer .sapMToken {
+	font-size: @sapMFontMediumSize;
+}
+
+
+
+.sapUiMdcTokenizerDisplay .sapMTokenText {
+	// enable selection of scrollcontainer
+	-webkit-user-select: text;
+    user-select: text;
+
+	line-height: @mdctoken-small-line-height;
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenText {
+	line-height: @mdctoken-large-line-height;
+}

package/src/sap/ui/mdc/themes/base/TokenizerDisplay.less

@@ -0,0 +1,90 @@
+
+html.sap-desktop .sapUiMdcTokenizerDisplay.sapMTokenizer {
+	outline: none; // hide focus of the tokenizer
+	padding-left: 0px; // remove left padding of Tokenizer for Display mode
+
+	padding-top: 0rem;
+	padding-bottom: 0rem;
+}
+
+@mdctokenizer-large-line-height: 1.375rem;
+@mdctokenizer-small-line-height: 1rem;
+@mdctokenizer-large-padding-topbottom: 0.6875rem;
+@mdctokenizer-small-padding-topbottom: 0.3125rem;
+
+// show a focus around the more link
+.sapUiMdcTokenizerDisplay .sapMTokenizerIndicator:focus {
+	outline: @sapUiContentFocusWidth dotted @sapUiContentFocusColor;
+	outline-offset: -1px;
+	text-decoration: underline;
+}
+
+.sapUiMdcTokenizerDisplay .sapMTokenizerIndicator:hover {
+	text-decoration: underline;
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenizerIndicator,
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenizerIndicator:focus {
+	line-height: @mdctokenizer-large-line-height;
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenizerIndicator:focus {
+	text-decoration: underline;
+}
+
+.sapUiMdcTokenizerDisplay .sapMTokenizerIndicator {
+	line-height: @mdctokenizer-small-line-height;
+}
+
+
+
+
+// hide emptyIndicator for TokenizerDisplay
+.sapUiMdcTokenizerDisplay .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: none;
+}
+
+// show emptyIndicator for TokenizerDisplay
+.sapMShowEmpty-CTX .sapUiMdcTokenizerDisplay .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	line-height: @mdctokenizer-small-line-height;
+	font-size: @sapMFontMediumSize;
+	display: inline-block;
+}
+
+.sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	line-height: @mdctokenizer-large-line-height;
+}
+
+.sapUiSizeCozy .sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	padding-top: @mdctokenizer-large-padding-topbottom;
+	padding-bottom: @mdctokenizer-large-padding-topbottom;
+}
+
+.sapUiSizeCompact .sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	padding-top: @mdctokenizer-small-padding-topbottom;
+	padding-bottom: @mdctokenizer-small-padding-topbottom;
+}
+
+
+
+
+// enable mouse selection on scrollcontainer
+.sapUiMdcTokenizerDisplay .sapMTokenizerScrollContainer {
+	-moz-user-select: text;
+	-webkit-user-select: text;
+
+	// give the scrollcontainer the required top/bottom paddings so that is works like a text control
+	padding-top: 0rem;
+	padding-bottom: 0rem;
+}
+
+.sapUiSizeCozy .sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenizerScrollContainer {
+	// give the scrollcontainer the required top/bottom paddings so that is works like a text control
+	padding-top: @mdctokenizer-large-padding-topbottom;
+	padding-bottom: @mdctokenizer-large-padding-topbottom;
+}
+
+.sapUiSizeCompact .sapUiFormEdit .sapUiMdcTokenizerDisplay .sapMTokenizerScrollContainer {
+	padding-top: @mdctokenizer-small-padding-topbottom;
+	padding-bottom: @mdctokenizer-small-padding-topbottom;
+}

package/src/sap/ui/mdc/themes/base/ValueHelpDialog.less

@@ -19,7 +19,7 @@
 }
 
 .sapMdcValueHelpPanel .sapMPanel.sapMdcTokenizerPanel {
-	background-color: @sapUiBaseBG;
+    background-color: @sapUiBaseBG;
 }
 
 .sapMdcTablePanel > .sapMPanelHdr,
@@ -133,7 +133,7 @@
 // spacing between rows
 .sapUiMdcDefineConditionPanel .sapUiRespGrid.sapUiRespGridMedia-Std-Phone > .sapUiRespGridBreak:not(:first-child),
 .sapUiMdcDefineConditionPanel .sapUiRespGrid.sapUiRespGridMedia-Std-Phone > .sapUiRespGridBreak:not(:first-child) + div {
-	padding-top: 0.5rem
+	padding-top: 0.5rem;
 }
 
 // align add-button to the right
@@ -171,7 +171,7 @@
 
 // makes the title of the used panels smaller
 .sapMdcValueHelpPanel .sapMPanel .sapMPanelHdr {
-	font-size: @sapMFontHeader5Size
+	font-size: @sapMFontHeader5Size;
 }
 
 // make the title shadows transparent

package/src/sap/ui/mdc/themes/base/library.source.less

@@ -20,3 +20,5 @@
 @import "Table.less";
 @import "CollectiveSearchSelect.less";
 @import "Chart.less";
+@import "TokenDisplay.less";
+@import "TokenizerDisplay.less";

package/src/sap/ui/mdc/ui/Container.js

@@ -22,12 +22,12 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @alias sap.ui.mdc.ui.Container
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @since 1.85.0
 	 *
 	 * @private

package/src/sap/ui/mdc/ui/ContainerItem.js

@@ -20,12 +20,12 @@ sap.ui.define(['sap/ui/core/Element'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @alias sap.ui.mdc.ui.ContainerItem
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @since 1.85.0
 	 *
 	 * @private