@openui5/sap.ui.mdc 1.97.1 → 1.99.1

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

@@ -9,16 +9,17 @@ sap.ui.define([
 ], function (BaseController, P13nBuilder, SortPanelOld, SortPanel) {
 	"use strict";
 
-    var SortController = BaseController.extend("sap.ui.mdc.p13n.subcontroller.SortController");
+    var SortController = BaseController.extend("sap.ui.mdc.p13n.subcontroller.SortController", {
+        constructor: function() {
+			BaseController.apply(this, arguments);
+			this._bResetEnabled = true;
+		}
+    });
 
     SortController.prototype.getCurrentState = function() {
         return this.getAdaptationControl().getCurrentState().sorters;
     };
 
-    SortController.prototype.getResetEnabled = function() {
-        return true;
-    };
-
     SortController.prototype.getUISettings = function() {
         return {
             tabText: sap.ui.getCore().getLibraryResourceBundle("sap.ui.mdc").getText("p13nDialog.TAB_Sort"),
@@ -33,20 +34,12 @@ sap.ui.define([
 
     SortController.prototype.getAdaptationUI = function(oPropertyHelper){
 
-        var oAdaptationControl = this.getAdaptationControl();
         var oSortPanel;
 
-        //TODO: remove this condition once 'ChartNew' migration has been merged
-        if (oAdaptationControl.isA("sap.ui.mdc.Chart") && !oAdaptationControl._bNewP13n) {
-            oSortPanel = new SortPanelOld();
-            var oAdaptationModel = this._getP13nModel(oPropertyHelper);
-            oSortPanel.setP13nModel(oAdaptationModel);
-        } else {
-            oSortPanel = new SortPanel();
-            var oAdaptationData = this.mixInfoAndState(oPropertyHelper);
-            oSortPanel.setP13nData(oAdaptationData.items);
-            this._oPanel = oSortPanel;
-        }
+        oSortPanel = new SortPanel();
+        var oAdaptationData = this.mixInfoAndState(oPropertyHelper);
+        oSortPanel.setP13nData(oAdaptationData.items);
+        this._oPanel = oSortPanel;
 
         return Promise.resolve(oSortPanel);
     };

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

@@ -14,7 +14,7 @@ sap.ui.define([
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
 	 * @param {object} [mSettings] initial settings for the new control
-	 * @class The column for the metadata driven table, that holds the template to be shown when the rows has data.
+	 * @class The column for the metadata-driven table with the template, which is shown if the rows have data.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
 	 * @private
@@ -32,7 +32,7 @@ sap.ui.define([
 			defaultAggregation: "template",
 			properties: {
 				/**
-				 * Width of the column
+				 * Width of the column.
 				 */
 				width: {
 					type: "sap.ui.core.CSSSize",
@@ -40,7 +40,7 @@ sap.ui.define([
 					defaultValue: null
 				},
 				/**
-				 * Minimal width of the column
+				 * Minimum width of the column.
 				 */
 				minWidth: {
 					type: "float",
@@ -48,13 +48,13 @@ sap.ui.define([
 					defaultValue: 8
 				},
 				/**
-				 * The column header text
+				 * The column header text.
 				 */
 				header: {
 					type: "string"
 				},
 				/**
-				 * Defines whether the column header is visible
+				 * Defines whether the column header is visible.
 				 * @since 1.78
 				 */
 				headerVisible: {
@@ -63,14 +63,14 @@ sap.ui.define([
 					defaultValue: true
 				},
 				/**
-				 * Horizontal alignment of the content
+				 * Horizontal alignment of the content.
 				 */
 				hAlign: {
 					type: "sap.ui.core.HorizontalAlign",
 					defaultValue: "Begin"
 				},
 				/**
-				 * Importance of the column. It is used to show or hide the column based on the <code>MDCTable</code> configuration.
+				 * Importance of the column. It is used to show or hide the column based on the <code>Table</code> configuration.
 				 */
 				importance: {
 					type: "sap.ui.core.Priority",
@@ -86,7 +86,7 @@ sap.ui.define([
 					defaultValue: -1
 				},
 				/**
-				 * The data property related to the column
+				 * The data property related to the column.
 				 */
 				dataProperty: {
 					type: "string"
@@ -95,15 +95,15 @@ sap.ui.define([
 			events: {},
 			aggregations: {
 				/**
-				 * Template for the column
+				 * Template for the column.
 				 */
 				template: {
 					type: "sap.ui.core.Control",
 					multiple: false
 				},
 				/**
-				 * <code>CreationRow</code> template
-				 * <b>Note:</b> Once the binding implements support for creating transient records, this aggregation will be removed.
+				 * <code>CreationRow</code> template.
+				 * <b>Note:</b> Once the binding supports creating transient records, this aggregation will be removed.
 				 */
 				creationTemplate: {
 					type: "sap.ui.core.Control",
@@ -240,7 +240,7 @@ sap.ui.define([
 
 	/**
 	 * Creates and returns the column header control.
-	 * If <code>headerVisible=false</code> then, <code>width=0px</code> is applied to the <code>sap.m.Label</code> control for accessibility purpose.
+	 * If <code>headerVisible=false</code> then <code>width=0px</code> is applied to the <code>sap.m.Label</code> control for accessibility purposes.
 	 * @param {boolean} bMobileTable The type of the table
 	 * @param {boolean} bResizing Indicates whether the column is resizable
 	 * @returns {object} The column header control

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

@@ -12,16 +12,16 @@ sap.ui.define([
 	var TableType = Library.TableType;
 
 	/**
-	 * Constructor for a new CreationRow.
+	 * Constructor for a new <code>CreationRow</code>.
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
-	 * @param {object} [mSettings] initial settings for the new control
-	 * @class Allows to enter data in a row shaped form, if the table's {@link sap.ui.mdc.TableType TableType} is "<code>Table</code>". The form
-	 * elements are aligned with the columns of the table, and are created automatically based on the
+	 * @param {object} [mSettings] Initial settings for the new control
+	 * @class Row that allows the user to enter data in a row-shaped form if the {@link sap.ui.mdc.TableType TableType} is "<code>Table</code>".
+	 * The form elements are aligned with the columns of the table and are created automatically based on the
 	 * {@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.97.1
+	 * @version 1.99.1
 	 * @constructor
 	 * @experimental
 	 * @private
@@ -44,7 +44,7 @@ sap.ui.define([
 					defaultValue: true
 				},
 				/**
-				 * Determines whether the <code>sap.ui.mdc.table.CreationRow</code> and its inner control are in a busy state
+				 * Determines whether the <code>sap.ui.mdc.table.CreationRow</code> and its inner control are in a busy state.
 				 */
 				busy: {
 					type: "boolean",
@@ -52,7 +52,7 @@ sap.ui.define([
 					defaultValue: false
 				},
 				/**
-				 * Visibility of the <code>CreationRow</code>
+				 * Visibility of the <code>CreationRow</code>.
 				 */
 				visible: {
 					type: "boolean",
@@ -62,7 +62,7 @@ sap.ui.define([
 			},
 			events: {
 				/**
-				 * Fired when the corresponding keyboard shortcut or the apply button of the toolbar are pressed
+				 * The event is fired when the corresponding keyboard shortcut or the apply button of the toolbar are pressed.
 				 */
 				apply: {
 					allowPreventDefault: true
@@ -145,9 +145,9 @@ sap.ui.define([
 	};
 
 	/**
-	 * Updates the row based on the configuration of the table this row is inside of.
+	 * Updates the row based on the configuration of the table.
 	 *
-	 * @returns {Promise} Promise that resolves once the inner <code>CreationRow</code> control is updated
+	 * @returns {Promise} <code>Promise</code> that resolves once the inner <code>CreationRow</code> control is updated
 	 * @private
 	 */
 	CreationRow.prototype.update = function() {
@@ -231,7 +231,7 @@ sap.ui.define([
 	}
 
 	/**
-	 * Gets the table this row is inside of.
+	 * Gets the table in which this row is located.
 	 *
 	 * @return {sap.ui.mdc.Table|null} The instance of the table or <code>null</code>, if this row is not inside a table.
 	 * @private

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

@@ -17,8 +17,8 @@ sap.ui.define([
 	 * Constructor for a new <code>GridTableType</code>.
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
-	 * @param {object} [mSettings] initial settings for the new object
-	 * @class The table type info base class for the metadata driven table.
+	 * @param {object} [mSettings] Initial settings for the new object
+	 * @class The table type info class for the metadata-driven table.
 	 * @extends sap.ui.mdc.table.TableTypeBase
 	 * @author SAP SE
 	 * @private
@@ -35,8 +35,7 @@ sap.ui.define([
 			library: "sap.ui.mdc",
 			properties: {
 				/**
-				 * See sap.ui.mdc.RowCountMode for the options.<br>
-				 * Defaults to Auto - meaning table adjusts its height based on the parent container
+				 * Defines how the table handles the row count.
 				 */
 				rowCountMode: {
 					type: "sap.ui.mdc.RowCountMode",
@@ -44,8 +43,8 @@ sap.ui.define([
 				},
 				/**
 				 * Row count of the inner table.<br>
-				 * When <code>sap.ui.mdc.RowCountMode.Auto</code> is used - this property specifies the <code>minAutoRowCount</code>.<br>
-				 * When <code>sap.ui.mdc.RowCountMode.Fixed</code> is used - this property specifies the <code>visibleRowCount</code>.
+				 * This property specifies the minimum row count if <code>sap.ui.mdc.RowCountMode.Auto</code> is used.<br>
+				 * This property specifies the row count if <code>sap.ui.mdc.RowCountMode.Fixed</code> is used.
 				 */
 				rowCount: {
 					type: "int",

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

@@ -15,6 +15,43 @@ sap.ui.define([
 ) {
 	"use strict";
 
+	/**
+	 * @typedef {object} sap.ui.mdc.table.PropertyInfo
+	 * @extends sap.ui.mdc.util.PropertyInfo
+	 *
+	 * @property {object} [exportSettings]
+	 *   Object that contains information about the export settings, see {@link sap.ui.export.Spreadsheet}.
+	 * @property {int} [maxConditions]
+	 *   Defines the maximum number of filter conditions for the property. Possible values that can be used:
+	 *   <ul>
+	 *       <li>1 is a single-filter expression field</li>
+	 *       <li>-1 is a multi-filter expression field</li>
+	 *   </ul>
+	 *   This information is for example used in the <code>addItem</code> method of the <code>FilterBar</code> control to forward this information to
+	 *   the created <code>FilterField</code> instance.
+	 * @property {boolean} [filterable=true]
+	 *   Defines whether a property is filterable.
+	 * @property {boolean} [sortable=true]
+	 *   Defines whether a property is sortable.
+	 * @property {boolean} [groupable=false]
+	 *   Defines whether a property is groupable.
+	 * @property {boolean} [key=false]
+	 *   Defines whether a property is a key or part of a key in the data.
+	 * @property {string} [unit]
+	 *   Name of the unit property that is related to this property.
+	 * @property {string} [text]
+	 *   Name of the text property that is related to this property in a 1:1 relation.
+	 * @property {boolean} [required]
+	 *   Defines whether a filter condition for this property is required.
+	 * @property {object} [visualSettings]
+	 *   This object contains all relevant properties for visual adjustments.
+	 *
+	 * @private
+	 * @experimental
+	 * @ui5-restricted sap.fe
+	 * MDC_PUBLIC_CANDIDATE
+	*/
+
 	/**
 	 * Constructor for a new table property helper.
 	 *
@@ -22,7 +59,7 @@ sap.ui.define([
 	 *     The properties to process in this helper
 	 * @param {object<string, object>} [mExtensions]
 	 *     Key-value map, where the key is the name of the property and the value is the extension containing mode-specific information.
-	 *     The extension of a property is stored in a reserved <code>extension</code> attribute and its attributes must be specified with
+	 *     The extension of a property is stored in a reserved <code>extension</code> attribute, and its attributes must be specified with
 	 *     <code>mExtensionAttributeMetadata</code>.
 	 * @param {sap.ui.base.ManagedObject} [oParent]
 	 *     A reference to an instance that will act as the parent of this helper
@@ -30,14 +67,14 @@ sap.ui.define([
 	 *     The attribute metadata for the model-specific property extension
 	 *
 	 * @class
-	 * Table property helpers give tables of this library a consistent and standardized view on properties and their attributes.
+	 * Table property helpers in this SAPUI5 library provide tables with consistent and standardized structure of properties and their attributes.
 	 * Validates the given properties, sets defaults, and provides utilities to work with these properties.
 	 * The utilities can only be used for properties that are known to the helper. Known properties are all those that are passed to the constructor.
 	 *
 	 * @extends sap.ui.mdc.util.PropertyHelper
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.99.1
 	 *
 	 * @private
 	 * @experimental
@@ -131,7 +168,7 @@ sap.ui.define([
 				}, this);
 			}
 		} else if (!bSplitCells && oExportSettings) {
-			// called for basic propertyInfo having exportSettings
+			// called for basic PropertyInfo having exportSettings
 			oColumnExportSettings = getColumnExportSettingsObject(oColumn, oProperty, oExportSettings, bSplitCells);
 			oColumnExportSettings.property = oProperty.path;
 			aColumnExportSettings.push(oColumnExportSettings);
@@ -213,7 +250,7 @@ sap.ui.define([
 	/**
 	 * Sets the width of the provided column based on the <code>visualSettings</code> of the relevant <code>PropertyInfo</code>.
 	 *
-	 * @param {sap.ui.mdc.table.Column} oMDCColumn The MDCColumn instance for which to set the width
+	 * @param {sap.ui.mdc.table.Column} oMDCColumn The <code>Column</code> instance for which to set the width
 	 * @public
 	 * @since 1.95
 	 */
@@ -234,9 +271,9 @@ sap.ui.define([
 	};
 
 	/**
-	 * Calculates the column width based on the provided <code>PropertyInfo</code>
+	 * Calculates the column width based on the provided <code>PropertyInfo</code>.
 	 *
-	 * @param {object} oProperty The properties of PropertyInfo of MDCColumn instance for which to set the width for
+	 * @param {object} oProperty The properties of <code>PropertyInfo</code> of <code>Column</code> instance for which to set the width
 	 * @param {object} [mWidthCalculation] The configuration object for the width calculation
 	 * @param {int} [mWidthCalculation.minWidth=2] The minimum content width in rem
 	 * @param {int} [mWidthCalculation.maxWidth=19] The maximum content width in rem

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

@@ -16,8 +16,8 @@ sap.ui.define([
 	 * Constructor for a new <code>ResponsiveTableType</code>.
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
-	 * @param {object} [mSettings] initial settings for the new object
-	 * @class The table type info base class for the metadata driven table.
+	 * @param {object} [mSettings] Initial settings for the new object
+	 * @class The table type info class for the metadata-driven table.
 	 * @extends sap.ui.mdc.table.TableTypeBase
 	 * @author SAP SE
 	 * @private
@@ -34,8 +34,7 @@ sap.ui.define([
 			library: "sap.ui.mdc",
 			properties: {
 				/**
-				 * See <code>sap.ui.mdc.GrowingMode</code><br>
-				 * Defaults to Basic - meaning only growing is enabled on <code>ResponsiveTable</code>
+				 * Specifies the growing mode.
 				 */
 				growingMode: {
 					type: "sap.ui.mdc.GrowingMode",
@@ -58,13 +57,13 @@ sap.ui.define([
 					defaultValue: false
 				},
 				/**
-				 * Defines which columns should be hidden instead of moved into the pop-in area depending on their importance.
+				 * Defines which columns are hidden instead of moved into the pop-in area depending on their importance.
 				 * See {@link sap.m.Column#getImportance} and {@link sap.m.Table#getHiddenInPopin} for more details.
 				 *
 				 * <b>Note:</b> To hide columns based on their importance, it's mandatory to set <code>showDetailsButton="true"</code>.<br>
 				 * If no priority is given, the default configuration of {@link sap.ui.mdc.table.ResponsiveTableType#getShowDetailsButton} is used.<br>
-				 * If this property is changed after the <code>MDCTable</code> has been initialized, the new changes take effect only when the
-				 * Show / Hide Details button is pressed a second time.
+				 * If this property is changed after the <code>Table</code> has been initialized, the new changes take effect only when the Show /
+				 * Hide Details button is pressed a second time.
 				 *
 				 * @since 1.86
 				 */
@@ -231,14 +230,13 @@ sap.ui.define([
 		var oRb = Core.getLibraryResourceBundle("sap.ui.mdc"), sText;
 
 		sText = this.bHideDetails ? oRb.getText("table.SHOWDETAILS_TEXT") : oRb.getText("table.HIDEDETAILS_TEXT");
-		this._oShowDetailsButton.setTooltip(sText);
 		this._oShowDetailsButton.setText(sText);
 	};
 
 	/**
 	 * Toggles the visibility of the Show Details button.<br>
 	 * If {@param bValue} is set to <code>true</code>, it sets the <code>hiddenInPopin</code> property on the inner <code>ResponsiveTable</code> to
-	 * hide columns based on <code>MDCTable</code> configuration (<code>showDetailsButton</code> and <code>detailsButtonSetting</code> properties).
+	 * hide columns based on the <code>Table</code> configuration (<code>showDetailsButton</code> and <code>detailsButtonSetting</code> properties).
 	 * Otherwise an empty array is set to show all columns.
 	 *
 	 * @param {boolean} bValue - Whether to hide details and display the Show Details button
@@ -274,7 +272,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * Helper function to get the importance of the columns that should be hidden based on <code>MDCTable</code> configuration.
+	 * Helper function to get the importance of the columns to be hidden based on <code>Table</code> configuration.
 	 *
 	 * @returns {array} sap.ui.core.Priority[] Array of column priorities
 	 * @private

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

@@ -13,13 +13,13 @@ sap.ui.define([
 	 * Constructor for new RowSettings.
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
-	 * @param {object} [mSettings] initial settings for the new control
+	 * @param {object} [mSettings] Initial settings for the new control
 	 *
 	 * @class
-	 * The <code>RowSettings</code> control allows configuring a row.
-	 * This control can only be used in the context of <code>sap.ui.mdc.Table</code> control to define row settings.
+	 * 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.97.1
+	 * @version 1.99.1
 	 *
 	 * @constructor
 	 * @experimental

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

@@ -13,8 +13,8 @@ sap.ui.define([
 	 * Constructor for a new <code>TableTypeBase</code>.
 	 *
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
-	 * @param {object} [mSettings] initial settings for the new object
-	 * @class The table type info base class for the metadata driven table. Dummy/Base class with no implementation.
+	 * @param {object} [mSettings] Initial settings for the new object
+	 * @class The table type info base class for the metadata-driven table. Base class with no implementation.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
 	 * @private

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.97.1
+	 * @version 1.99.1
 	 *
 	 * @private
 	 * @experimental

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

@@ -23,11 +23,6 @@
 	min-width: 4.75rem; /* As input has a min-width + padding */
 }
 
-/* empty indicator */
-.sapUiMdcFieldBaseEmpty::after {
-	content: attr(emptyIndicator);
-}
-
 /**
  * align text-like controls in Table (as done for stand-alone controls in Table)
  */

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;
+}