@openui5/sap.m 1.94.0 → 1.97.0

package/src/sap/m/table/ItemBase.js

@@ -0,0 +1,153 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/m/table/ColumnMenuEntry"
+], function(
+	ColumnMenuEntry
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new ItemBase.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * The ItemBase control serves as a base class for menu items for the sap.m.table.ColumnMenu.
+	 * This base class is faceless and should be inherited by controls, which intend to be menu items
+	 * for the sap.m.table.ColumnMenu.
+	 *
+	 * @extends sap.m.table.ColumnMenuEntry
+	 *
+	 * @author SAP SE
+	 * @version 1.97.0
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.ItemBase
+	 */
+	var ItemBase = ColumnMenuEntry.extend("sap.m.table.ItemBase", {
+		metadata: {
+			"abstract": true,
+			library: "sap.m"
+		}
+	});
+
+	ItemBase.prototype.init = function () {
+		this._oButtonSettings = {
+			reset: {visible: true, enabled: true},
+			confirm: {visible: true, enabled: true},
+			cancel: {visible: true, enabled: true}
+		};
+	};
+
+	/**
+	 * This method can be used to retrieve the effective items of the item.
+	 *
+	 * This method allows subclasses to return composition of other items, if they contain multiple items or controls.
+	 * @returns {Array<sap.m.table.ItemBase>} A composition of effective items
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.getEffectiveItems = function() {
+		return [this];
+	};
+
+	/**
+	 * This method can be used to retrieve the set icon for a item.
+	 *
+	 * @returns {sap.ui.core.URI} The specified icon
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.getIcon = function() {
+		if (this.getMetadata().hasProperty("icon")) {
+			return this.getProperty("icon");
+		}
+		throw new Error(this + " does not implement #getIcon");
+	};
+
+	/**
+	 * This method can be used as an event handler for a press event.
+	 *
+	 * @param {jQuery.Event} oEvent The emitted event
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.onPress = function (oEvent) {
+	};
+
+	/**
+	 * This method can be used as an event handler for a back event.
+	 *
+	 * @param {jQuery.Event} oEvent The emitted event
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.onBack = function (oEvent) {
+	};
+
+	/**
+	 * This method can be used as an event handler for a confirm event.
+	 *
+	 * @param {jQuery.Event} oEvent The emitted event
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.onConfirm = function (oEvent) {
+	};
+
+	/**
+	 * This method can be used as an event handler for a cancel event.
+	 *
+	 * @param {jQuery.Event} oEvent The emitted event
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.onCancel = function (oEvent) {
+	};
+
+	/**
+	 * This method can be used as an event handler for a reset event.
+	 *
+	 * @param {jQuery.Event} oEvent The emitted event
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.onReset = function (oEvent) {
+	};
+
+	/**
+	 * This method can be used to retrieve the button settings.
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.getButtonSettings = function () {
+		return this._oButtonSettings;
+	};
+
+	/**
+	 * This method can be used to change the button settings of an item.
+	 *
+	 * @param {object} oButtonSettings Object containing button settings
+	 *
+	 * @protected
+	 */
+	ItemBase.prototype.changeButtonSettings = function (oButtonSettings) {
+		Object.keys(oButtonSettings).forEach(function (sButtonKey) {
+			if (this._oButtonSettings.hasOwnProperty(sButtonKey)) {
+				Object.keys(oButtonSettings[sButtonKey]).forEach(function (sSettingKey) {
+					this._oButtonSettings[sButtonKey][sSettingKey] = oButtonSettings[sButtonKey][sSettingKey];
+				}, this);
+			}
+		}, this);
+		this.getMenu() && this.getMenu()._updateButtonState(this);
+	};
+
+    return ItemBase;
+});

package/src/sap/m/table/QuickAction.js

@@ -0,0 +1,53 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/m/table/QuickActionBase"
+], function (
+	QuickActionBase
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new QuickAction.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * This control serves as a quick action for sap.m.table.ColumnMenu.
+	 * It can be used to specify control- and application specific quick actions.
+	 *
+	 * @extends sap.m.table.QuickActionBase
+	 *
+	 * @author SAP SE
+	 * @version 1.97.0
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.QuickAction
+	 */
+	var QuickAction = QuickActionBase.extend("sap.m.table.QuickAction", {
+		metadata: {
+			library: "sap.m",
+			properties: {
+				/**
+				 * Defines the text for the label.
+				 */
+				label: { type: "string" }
+			},
+			aggregations: {
+				/**
+				 * Defines the content, which should be shown for the quick action.
+				 */
+				content: { type: "sap.ui.core.Control", multiple: false }
+			}
+		}
+	});
+
+	return QuickAction;
+});

package/src/sap/m/table/QuickActionBase.js

@@ -0,0 +1,53 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+sap.ui.define([
+	"sap/m/table/ColumnMenuEntry"
+], function(
+	ColumnMenuEntry
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new QuickActionBase.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * This control serves as a base class for quick actions.
+	 * This base class is faceless and should be inherited by controls, which intend to
+	 * serve as quick actions for the sap.m.table.ColumnMenu.
+	 *
+	 * @extends sap.m.table.ColumnMenuEntry
+	 *
+	 * @author SAP SE
+	 * @version 1.97.0
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.QuickActionBase
+	 */
+	var QuickActionBase = ColumnMenuEntry.extend("sap.m.table.QuickActionBase", {
+		metadata: {
+			"abstract": true,
+			library: "sap.m"
+		}
+	});
+
+	/**
+	 * This method can be used to retrieve the effective quick actions.
+	 *
+	 * Sublasses can implement this method, if there are compositions of other quick actions.
+	 * @returns {Array<sap.m.table.QuickActionBase>} The effective quick actions
+	 *
+	 * @public
+	 */
+	QuickActionBase.prototype.getEffectiveQuickActions = function() {
+		return [this];
+	};
+	return QuickActionBase;
+});

package/src/sap/m/table/Util.js

@@ -0,0 +1,192 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+/**
+ * @class Provides utility functions for tables
+ * @alias sap.m.table.Util
+ * @author SAP SE
+ * @version 1.97.0
+ * @since 1.96.0
+ * @private
+ * @static
+ * @experimental Since 1.96.0. This class is experimental and the API might be changed in future.
+ */
+sap.ui.define([
+	"sap/m/library",
+	"sap/ui/core/Core",
+	"sap/ui/core/theming/Parameters"
+], function(MLibrary, Core, ThemeParameters) {
+	"use strict";
+	/*global Intl*/
+
+	var Util = {};
+
+	// local privates
+	var sDefaultFont = "";
+	var fBaseFontSize = parseFloat(MLibrary.BaseFontSize);
+
+	/**
+	 * Measures the given text width in a canvas and returns the value in rem.
+	 *
+	 * @param {string} sText The text to be measured
+	 * @param {string} [sFont] The font. When not given, uses theme parameters: sapMFontMediumSize and sapUiFontFamily.
+	 * @returns {float} The text width converted to rem
+	 * @private
+	 */
+	Util.measureText = (function() {
+		var fEpsilon = 0.05;
+		var oCanvasContext = document.createElement("canvas").getContext("2d");
+		var fnSetDefaultFont = function() {
+			sDefaultFont = [
+				parseFloat(ThemeParameters.get({ name: "sapMFontMediumSize" }) || "0.875rem") * fBaseFontSize + "px",
+				ThemeParameters.get({ name: "sapUiFontFamily" }) || "Arial"
+			].join(" ");
+			return sDefaultFont;
+		};
+
+		Core.attachThemeChanged(fnSetDefaultFont);
+
+		return function(sText, sFont) {
+			oCanvasContext.font = sFont || sDefaultFont || fnSetDefaultFont();
+			return oCanvasContext.measureText(sText || "").width / fBaseFontSize + fEpsilon;
+		};
+	})();
+
+
+	/**
+	 * Calculates the width of a give ODataType that is used in tables.
+	 *
+	 * @param {sap.ui.model.odata.type.ODataType} oType The ODataType instance
+	 * @param {object} [mSettings] The settings object
+	 * @param {int} [mSettings.maxWidth=19] The maximum content width of the field in rem
+	 * @param {int} [mSettings.defaultWidth=8] The default column content width when type check fails
+	 * @returns {float} The calculated width of the ODataType converted to rem
+	 * @private
+	 */
+	Util.calcTypeWidth = (function() {
+		var fBooleanWidth = 0;
+		var aDateParameter = [2023, 9, 26, 22, 47, 58, 999];
+		var oUTCDate = new Date(Date.UTC.apply(0, aDateParameter));
+		var oLocalDate = new (Function.prototype.bind.apply(Date, [null].concat(aDateParameter)))();
+		var mNumericLimits = { Byte: 3, SByte: 3, Int16: 5, Int32: 9, Int64: 12, Single: 6, Float: 12, Double: 13, Decimal: 15 };
+		Core.attachThemeChanged(function() { fBooleanWidth = 0; });
+
+		return function(oType, mSettings) {
+
+			var sType = oType.getMetadata().getName().split(".").pop();
+
+			if (sType == "Boolean") {
+				if (!fBooleanWidth) {
+					var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.core");
+					var fYesWidth = Util.measureText(oResourceBundle.getText("YES"));
+					var fNoWidth = Util.measureText(oResourceBundle.getText("NO"));
+					fBooleanWidth = Math.max(fYesWidth, fNoWidth);
+				}
+				return fBooleanWidth;
+			}
+
+			if (sType == "String" || oType.isA("sap.ui.model.odata.type.String")) {
+				var iMaxWidth = mSettings && mSettings.maxWidth || 19;
+				var iMaxLength = oType.getConstraints().maxLength || 0;
+
+				if (!iMaxLength) {
+					return Math.max(Math.min(10, iMaxWidth), iMaxWidth * 0.75);
+				}
+				if (iMaxLength * 0.25 > iMaxWidth) {
+					return iMaxWidth;
+				}
+
+				var fSampleWidth = Util.measureText("A".repeat(iMaxLength));
+				if (iMaxLength < iMaxWidth || iMaxWidth < 10) {
+					return Math.min(fSampleWidth, iMaxWidth);
+				}
+
+				var fWidth = Math.log(fSampleWidth - iMaxWidth * 0.16) / Math.log(iMaxWidth / 3) * (iMaxWidth / 2) * Math.pow(iMaxWidth / 19, 1 / fSampleWidth);
+				return Math.min(fWidth, fSampleWidth, iMaxWidth);
+			}
+
+			if (sType.startsWith("Date") || sType.startsWith("Time")) {
+				var oDate = oType.getFormatOptions().UTC ? oUTCDate : oLocalDate;
+				var sSample = oDate.toLocaleDateString();
+
+				if (sType == "TimeOfDay") {
+					sSample = new Intl.DateTimeFormat('de', {hour: 'numeric', minute: 'numeric', second: 'numeric'}).format(oDate);
+					sSample = oType.formatValue(sSample, "string");
+				} else if (oType.isA("sap.ui.model.odata.type.Time")) {
+					sSample = oType.formatValue({ __edmType: "Edm.Time", ms: oUTCDate.valueOf() }, "string");
+				} else {
+					sSample = oType.formatValue(oDate, "string");
+				}
+				return Util.measureText(sSample);
+			}
+
+			if (mNumericLimits[sType]) {
+				var iScale = oType.getConstraints().scale || 0;
+				var iPrecision = oType.getConstraints().precision || 20;
+				iPrecision = Math.min(iPrecision, mNumericLimits[sType]);
+				var sNumber = 2 * Math.pow(10, iPrecision - iScale - 1);
+				sNumber = oType.formatValue(sNumber, "string");
+				return Util.measureText(sNumber);
+			}
+
+			return mSettings && mSettings.defaultWidth || 8;
+		};
+
+	})();
+
+	/**
+	 * Calculates the width of the column header width according to calculated cell content and min/max width restrictions.
+	 *
+	 * @param {string} sHeader The header text
+	 * @param {float} fContentWidth The calculated width of the cell in rem
+	 * @param {int} [iMaxWidth=19] The maximum header width in rem
+	 * @param {int} [iMinWidth=2] The minimum header width in rem
+	 * @returns {float} The calculated header width in rem
+	 * @private
+	 */
+	Util.calcHeaderWidth = (function() {
+		var sHeaderFont = "";
+		var fnGetHeaderFont = function() {
+			if (!sHeaderFont) {
+				sHeaderFont = [ThemeParameters.get({ name: "sapUiColumnHeaderFontWeight" }) || "normal", sDefaultFont].join(" ");
+			}
+			return sHeaderFont;
+		};
+
+		Core.attachThemeChanged(function() { sHeaderFont = ""; });
+
+		return function(sHeader, fContentWidth, iMaxWidth, iMinWidth) {
+			var iHeaderLength = sHeader.length;
+			iMaxWidth = iMaxWidth || 19;
+			iMinWidth = iMinWidth || 2;
+
+			if (fContentWidth > iMaxWidth) {
+				return iMaxWidth;
+			}
+			if (iMinWidth > iHeaderLength) {
+				return iMinWidth;
+			}
+
+			fContentWidth = Math.max(fContentWidth, iMinWidth);
+			if (fContentWidth > iHeaderLength) {
+				return fContentWidth;
+			}
+
+			var fOrigHeaderWidth = Util.measureText(sHeader, fnGetHeaderFont());
+			fOrigHeaderWidth = Math.min(fOrigHeaderWidth, iMaxWidth * 0.7);
+
+			var fContentHeaderRatio = Math.max(1, 1 - (Math.log(Math.max(fContentWidth - 1.7, 0.2)) / Math.log(iMaxWidth * 0.5)) + 1);
+			var fMaxHeaderWidth = fContentHeaderRatio * fContentWidth;
+
+			var fHeaderWidthDiff = Math.max(0, fOrigHeaderWidth - fMaxHeaderWidth);
+			var fHeaderWidth = (fHeaderWidthDiff < 0.15) ? fOrigHeaderWidth : fMaxHeaderWidth + fHeaderWidthDiff * (1 - 1 / fContentWidth) / Math.E;
+			return fHeaderWidth;
+		};
+	})();
+
+	return Util;
+
+}, false);

package/src/sap/m/themes/base/AbstractContainer.less

@@ -0,0 +1,32 @@
+.sapUiMAbstractContainerContent {
+
+}
+
+//Change background color for the container control
+.sapUiMAbstractContainerContent .sapMITB {
+    padding-top: 1.75rem;
+}
+
+//Remove padding to align the ITB with the rest of the p13n related controls (left aligned)
+.sapUiMAbstractContainerContent .sapMITH {
+    padding: 0
+}
+
+.sapUiMAbstractContainerContent .wrapperDefaultList .sapMLIB{
+    padding: 1.5rem;
+}
+
+.sapMAbstractContainer .sapMPage {
+	display: flex;
+	flex-direction: column;
+
+	&>section {
+		flex-grow: 1;
+		position: unset;
+		top: 0;
+	}
+
+	>footer:not(.sapUiHidden) {
+		position: relative;
+	}
+}

package/src/sap/m/themes/base/Breadcrumbs.less

@@ -33,12 +33,12 @@
 		}
 	}
 
-	.sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem > 
+	.sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem >
 	.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltHoverable.sapMSltWithArrow {
 		background: transparent;
 		border: none;
 
-		&:focus,
+		&.sapMSltFocused,
 		&:hover {
 			.sapMSltIcon:before {
 				color: @sapUiLinkHover;

package/src/sap/m/themes/base/Carousel.less

@@ -8,6 +8,7 @@
 @_sap_m_Carousel_NumericIndicatorTextColor: @sapUiContentLabelColor;
 @_sap_m_Carousel_PrevAndNextSize: 2rem;
 @_sap_m_Carousel_PrevAndNextPosition: 0.625rem;
+@_sap_m_Carousel_PrevAndNextFocusBorderRadius: unset;
 @_sap_m_Carousel_PageIndicatorContainerPadding: 1rem;
 @_sap_m_Carousel_PageIndicatorWidthSizeS: 12rem;
 @_sap_m_Carousel_PageIndicatorWidthSizeM: 16rem;
@@ -22,6 +23,8 @@
 
 @_sap_m_Carousel_BulletInactiveWidth: 0.25rem;
 @_sap_m_Carousel_BulletInactiveMargin: 0 0.375rem;
+@_sap_m_Carousel_FocusBorderOffset: 0;
+@_sap_m_Carousel_FocusBorderOffsetArrow: -0.125rem;
 
 .sapMCrsl {
 	position: relative;
@@ -35,6 +38,20 @@
 	outline: none;
 }
 
+.sapMCrsl:focus {
+  &:before {
+    border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+    position: absolute;
+    content: " ";
+    top: @_sap_m_Carousel_FocusBorderOffset;
+    right: @_sap_m_Carousel_FocusBorderOffset;
+    bottom: @_sap_m_Carousel_FocusBorderOffset;
+    left: @_sap_m_Carousel_FocusBorderOffset;
+    z-index: 2;
+    pointer-events: none;
+  }
+}
+
 //show the left and right arrows when the carousel is focused
 .sapMCrsl:focus .sapMCrslHud a {
 	opacity: 0.3;
@@ -445,7 +462,6 @@ html[data-sap-ui-animation='off'] {
 	color: @sapUiContentNonInteractiveIconColor;
 	background-color: @_sap_m_Carousel_BulletActiveBackground;
 	border: 1px solid @_sap_m_Carousel_BulletActiveBorder;
-
 	width: 0.5rem;
 	height: 0.5rem;
 	margin: 0 0.25rem;
@@ -463,7 +479,6 @@ html[data-sap-ui-animation='off'] {
 .sapMCrsl .sapMCrslHud a:hover,
 .sapMCrsl .sapMCrslHud a:focus {
 	background: @sapUiButtonBackground;
-
 	opacity: 1;
 	display: block;
 }
@@ -542,3 +557,23 @@ html[data-sap-ui-animation='off'] {
 	opacity: 1;
 	display: block;
 }
+
+html.sap-desktop {
+	.sapMCrslHud,
+	.sapMCrslControls {
+		.sapMCrslPrev:focus,
+		.sapMCrslNext:focus {
+			&::after {
+				content: "";
+				position: absolute;
+				top: @_sap_m_Carousel_FocusBorderOffsetArrow;
+				right: @_sap_m_Carousel_FocusBorderOffsetArrow;
+				bottom: @_sap_m_Carousel_FocusBorderOffsetArrow;
+				left: @_sap_m_Carousel_FocusBorderOffsetArrow;
+				pointer-events: none;
+				border-radius: @_sap_m_Carousel_PrevAndNextFocusBorderRadius;
+				border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			}
+		}
+	}
+}

package/src/sap/m/themes/base/ColumnListItem.less

@@ -136,8 +136,8 @@
 	border-top: 1px solid @sapUiListBorderColor;
 }
 
-.sapMListShowSeparatorsNone .sapMLIBShowSeparator > td,
-.sapMListShowSeparatorsInner .sapMLIBShowSeparator:first-child > td {
+.sapMListShowSeparatorsNone .sapMLIBShowSeparator > td:not(.sapMListTblDummyCell),
+.sapMListShowSeparatorsInner .sapMLIBShowSeparator:first-child > td:not(.sapMListTblDummyCell) {
 	border-color: transparent;
 }
 

package/src/sap/m/themes/base/ColumnMenu.less

@@ -0,0 +1,41 @@
+/* ======================================= */
+/* CSS for control sap.m/table/ColumnMenu  */
+/* Base theme                              */
+/* ======================================= */
+
+.sapMTCMenu {
+
+}
+
+.sapMTCMenu.sapMWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.sapMContainerWrapper {
+		height: 100%;
+		overflow: hidden;
+	}
+}
+
+.sapMTCMenu .sapMTQAList{
+	display: grid;
+	grid-template-columns: minmax(min-content, max-content) 2fr;
+	column-gap: 10px;
+	row-gap: 5px;
+	padding: .5rem 1rem .5rem 1rem;
+}
+
+.sapMTCMenu .sapMTQAListHidden {
+	display: none;
+}
+
+.sapMTCMenu .sapMTQAList .sapMQAction {
+	display: contents;
+
+	.sapMQALabel {
+		justify-self: end;
+		align-self: center;
+		text-align: end;
+	}
+}

package/src/sap/m/themes/base/ComboBox.less

@@ -5,6 +5,6 @@
 
 .sapMComboBoxBasePicker-CTX .sapMComboBoxList.sapMListFocus .sapMLIBSelected,
 .sapMComboBoxBasePicker-CTX .sapMComboBoxList.sapMListFocus .sapMComboBoxBaseNonInteractiveItem.sapMLIBFocused {
-	outline: 1px dotted @sapUiContentFocusColor;
-	outline-offset: -2px;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: -0.125rem;
 }

package/src/sap/m/themes/base/ComboBoxBase.less

@@ -3,12 +3,32 @@
 /* Base theme                          */
 /* =================================== */
 
+.sapMComboBoxBase.sapMInputBaseHasEndIcons .sapMInputBaseInner {
+	width: auto;
+	flex: 1
+}
+
+.sapMComboBoxBase .sapMInputBaseContentWrapper {
+	display: inline-flex;
+}
+
 /* ------------------------------ */
 /* arrow                          */
 /* ------------------------------ */
 
 .sapMComboBoxBase.sapMInputBaseReadonly .sapMInputBaseIcon {
 	opacity: 0;
+	cursor: default;
+}
+
+.sapMInputBase:not(.sapMInputBaseDisabled):not(.sapMInputBaseIconPressed).sapMComboBoxBase.sapMComboBoxBaseArrowPressed .sapMInputBaseIconContainer .sapMInputBaseIcon:last-child {
+	background: @sapUiToggleButtonPressedBackground;
+	&:hover {
+		background: @sapUiToggleButtonPressedBackground;
+	}
+	&::before {
+		color: @sapUiToggleButtonPressedTextColor;
+	}
 }
 
 /* ------------------------------ */

package/src/sap/m/themes/base/DatePicker.less

@@ -27,4 +27,8 @@ html.sap-phone, html.sapUiMedia-Std-Phone {
 			padding-bottom: 3rem;
 		}
 	}
+}
+
+.sapMInputBase.sapMDatePickerHiddenInput {
+	display: none;
 }