@openui5/sap.m 1.93.1 → 1.96.0

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.96.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,17 @@
+.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;
+}

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/Dialog.less

@@ -16,6 +16,11 @@
 @_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.125rem @sapUiErrorBorder;
 @_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.125rem @sapUiWarningBorder;
 @_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.125rem @sapHighlightColor;
+@_sap_m_Dialog_BorderRadius: 0px;
+@_sap_m_Dialog_HeaderFocusBorderBottomOffset: 3px;
+@_sap_m_Dialog_HeaderFocusBorderTopOffset: 2px;
+@_sap_m_Dialog_HeaderFocusBorderLeftOffset: 2px;
+@_sap_m_Dialog_HeaderFocusBorderRightOffset: 2px;
 
 .sapMDialog,
 .sapMMessageDialog .sapMDialogScrollCont,
@@ -50,6 +55,7 @@
 
 .sapMDialog > .sapMDialogSection {
 	max-width: 100%;
+	background: @sapUiGroupContentBackground;
 }
 
 .sapMDialog .sapMDialogScrollCont > * {
@@ -274,10 +280,6 @@ html.sap-desktop .sapMDialog {
 		& header.sapMDialogSubHeader {
 			height: @_sap_m_Dialog_SubHeaderCompactHeight;
 			top: @_sap_m_Dialog_BarCompactHeight;
-
-			.sapMIBar {
-				height: @_sap_m_Dialog_SubHeaderCompactHeight;
-			}
 		}
 	}
 
@@ -355,7 +357,7 @@ html.sap-desktop .sapMDialog {
 	}
 
 	&.sapMDialogWithSubHeader {
-		padding-top: @_sap_m_Dialog_BarHeight + @_sap_m_Dialog_BarHeight;
+		padding-top: @_sap_m_Dialog_BarHeight + @_sap_m_Dialog_SubHeaderHeight;
 
 		&.sapMDialogSubHeaderInfoBar {
 			padding-top: @_sap_m_Dialog_BarHeight + @_sap_m_Dialog_InfoDesignBarHeight;
@@ -366,16 +368,14 @@ html.sap-desktop .sapMDialog {
 		}
 
 		&.sapMDialog-NoHeader {
-			padding-top: @_sap_m_Dialog_BarHeight;
+			padding-top: @_sap_m_Dialog_SubHeaderHeight;
 
 			& > .sapMDialogSubHeader {
 				top: 0;
-
 			}
 		}
 	}
 
-
 	& > .sapMDialogTitle {
 		height: @_sap_m_Dialog_BarHeight;
 		left: 0;
@@ -390,11 +390,12 @@ html.sap-desktop .sapMDialog {
 		&::after {
 			content: '';
 			position: absolute;
-			left: 2px;
-			bottom: 3px;
-			right: 2px;
-			top: 2px;
-			border: @sapUiContentFocusWidth dotted @sapUiContentFocusColor;
+			left: @_sap_m_Dialog_HeaderFocusBorderLeftOffset;
+			bottom: @_sap_m_Dialog_HeaderFocusBorderBottomOffset;
+			right: @_sap_m_Dialog_HeaderFocusBorderRightOffset;
+			top: @_sap_m_Dialog_HeaderFocusBorderTopOffset;
+			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border-radius: @_sap_m_Dialog_BorderRadius @_sap_m_Dialog_BorderRadius 0 0;
 			pointer-events: none;
 		}
 	}
@@ -432,20 +433,12 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 	transition: none;
 }
 
-.sapMDialog > .sapMDialogSection {
-	background: @sapUiGroupContentBackground;
-}
-
-.sapMDialog.sapMDialogWithSubHeader > header {
-	&:last-of-type .sapMIBar{
-		box-shadow: @_sap_m_Dialog_NoStateHeaderShadow;
-	}
+.sapMDialog.sapMDialogWithSubHeader .sapMDialogTitle .sapMIBar {
+	box-shadow: none;
 }
 
-.sapMDialog:not(.sapMDialogWithSubHeader) > header {
-	&:first-of-type .sapMIBar{
-		box-shadow: @_sap_m_Dialog_NoStateHeaderShadow;
-	}
+.sapMDialog > header:last-of-type .sapMIBar {
+	box-shadow: @_sap_m_Dialog_NoStateHeaderShadow;
 }
 
 .sapMDialogWarning > header {
@@ -453,7 +446,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 		color: @sapUiCriticalElement;
 	}
 
-	&:last-of-type .sapMIBar.sapMIBar { // .sapMIBar.sapMIBar - doubles the specificity in order to override other styles
+	&:last-of-type .sapMIBar {
 		box-shadow: @_sap_m_Dialog_WarningHeaderShadow;
 	}
 }
@@ -464,7 +457,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 		color: @sapUiNegativeElement;
 	}
 
-	&:last-of-type .sapMIBar.sapMIBar { // .sapMIBar.sapMIBar - doubles the specificity in order to override other styles
+	&:last-of-type .sapMIBar {
 		box-shadow: @_sap_m_Dialog_ErrorHeaderShadow;
 	}
 }
@@ -474,7 +467,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 		color: @sapUiPositiveElement;
 	}
 
-	&:last-of-type .sapMIBar.sapMIBar { // .sapMIBar.sapMIBar - doubles the specificity in order to override other styles
+	&:last-of-type .sapMIBar {
 		box-shadow: @_sap_m_Dialog_SuccessHeaderShadow;
 	}
 }
@@ -485,7 +478,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 		color: @sapHighlightColor;
 	}
 
-	&:last-of-type .sapMIBar.sapMIBar { // .sapMIBar.sapMIBar - doubles the specificity in order to override other styles
+	&:last-of-type .sapMIBar {
 		box-shadow: @_sap_m_Dialog_InformationHeaderShadow;
 	}
 }
@@ -494,7 +487,3 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 .sapMDialog .sapMDialogLastFE {
 	font-size: 0;
 }
-
-.sapMDialog.sapMDialogWithSubHeader .sapMDialogTitle .sapMIBar {
-	box-shadow: none;
-}