@openui5/sap.m 1.98.0 → 1.101.0

package/src/sap/m/table/columnmenu/QuickTotal.js

@@ -0,0 +1,157 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/m/table/columnmenu/QuickActionBase",
+	"sap/m/HBox",
+	"sap/m/ToggleButton"
+], function (
+	QuickActionBase,
+	HBox,
+	ToggleButton
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new QuickTotal.
+	 *
+	 * @param {string} [sId] ID for the new QuickTotal, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new QuickTotal
+	 *
+	 * @class
+	 * Quick action - total
+	 *
+	 * @extends sap.m.table.columnmenu.QuickActionBase
+	 *
+	 * @author SAP SE
+	 * @version 1.101.0
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.columnmenu.QuickTotal
+	 */
+	var QuickTotal = QuickActionBase.extend("sap.m.table.columnmenu.QuickTotal", {
+		metadata: {
+			library: "sap.m",
+			aggregations: {
+				/**
+				 * Defines the totalable properties and the initial state.
+				 */
+				items: { type: "sap.m.table.columnmenu.QuickTotalItem", multiple: true }
+			},
+			events: {
+				/**
+				 * Fires the change event.
+				 */
+				change: {
+					parameters: {
+						/**
+						 * The key of the property.
+						 */
+						key: { type: "string" },
+						/**
+						 * The new value.
+						 */
+						totaled: { type: "boolean" }
+					}
+				}
+			}
+		}
+	});
+
+	QuickTotal.prototype.exit = function() {
+		this.destroyContent();
+	};
+
+	QuickTotal.prototype.getLabel = function() {
+		var oBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
+		return oBundle.getText("table.COLUMNMENU_QUICK_TOTAL");
+	};
+
+	QuickTotal.prototype.getContent = function() {
+		if (!this._aContent) {
+			this._aContent = this.createContent(this.getItems());
+			this._aContent.forEach(function(oItem) {
+				this.addDependent(oItem);
+			}.bind(this));
+		}
+
+		return this._aContent;
+	};
+
+	QuickTotal.prototype.addItem = function(oItem) {
+		this.destroyContent();
+		return this.addAggregation("items", oItem);
+	};
+
+	QuickTotal.prototype.insertItem = function(oItem, iIndex) {
+		this.destroyContent();
+		return this.insertAggregation("items", oItem, iIndex);
+	};
+
+	QuickTotal.prototype.removeItem = function(oItem) {
+		this.destroyContent();
+		return this.removeAggregation("items", oItem);
+	};
+
+	QuickTotal.prototype.removeAllItems = function() {
+		this.destroyContent();
+		return this.removeAllAggregation("items");
+	};
+
+	QuickTotal.prototype.destroyItems = function() {
+		this.destroyContent();
+		return this.destroyAggregation("items");
+	};
+
+	QuickTotal.prototype.createContent = function(aItems) {
+		return aItems.map(function(oItem) {
+			return new ToggleButton({
+				text: oItem.getLabel(),
+				pressed: oItem.getTotaled(),
+				press: [oItem, this.onChange, this]
+			});
+		}, this);
+	};
+
+	QuickTotal.prototype.destroyContent = function() {
+		if (this._aContent) {
+			this._aContent.forEach(function (oContent) {
+				oContent.destroy();
+			});
+			delete this._aContent;
+		}
+	};
+
+	QuickTotal.prototype._onItemChange = function(oQuickTotalItem, bTotaled) {
+		var sLabel = oQuickTotalItem.getLabel();
+
+		this.getContent().forEach(function(oButton) {
+			if (oButton.getText() === sLabel) {
+				oButton.setPressed(bTotaled);
+			} else if (bTotaled) {
+				oButton.setPressed(false);
+			}
+		});
+	};
+
+	QuickTotal.prototype.onChange = function(oEvent, oItem) {
+		if (oEvent.getParameters().pressed) {
+			var sButtonId = oEvent.getSource().sId;
+			this.getContent().forEach(function(oButton) {
+				if (oButton.sId != sButtonId) {
+					oButton.setPressed(false);
+				}
+			});
+		}
+
+		oItem.setProperty("totaled", oEvent.getParameters().pressed, true);
+		this.fireChange({item: oItem});
+	};
+
+	return QuickTotal;
+});

package/src/sap/m/table/columnmenu/QuickTotalItem.js

@@ -0,0 +1,59 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"./QuickActionItem"
+], function (
+	QuickActionItem
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new QuickTotalItem.
+	 *
+	 * @param {string} [sId] ID for the new QuickTotalItem, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new QuickTotalItem
+	 *
+	 * @class
+	 * This element serves as a quick total item.
+	 * It can be used to specify control- and application specific quick total items.
+	 *
+	 * @extends sap.m.table.columnmenu.QuickActionItem
+	 *
+	 * @author SAP SE
+	 * @version 1.101.0
+	 *
+	 * @private
+	 * @experimental
+	 *
+	 * @alias sap.m.table.columnmenu.QuickTotalItem
+	 */
+	var QuickTotalItem = QuickActionItem.extend("sap.m.table.columnmenu.QuickTotalItem", {
+		metadata: {
+			library: "sap.m",
+			properties: {
+				/**
+				 * Specifies whether a total for the respective column is shown.
+				 */
+				totaled: { type: "boolean", defaultValue: false }
+			}
+		}
+	});
+
+	/*
+	 * @see JSDoc generated by SAPUI5 control API generator
+	 */
+	QuickTotalItem.prototype.setTotaled = function(bTotaled) {
+		this.setProperty("totaled", bTotaled);
+
+		var oQuickTotal = this.getParent();
+		if (oQuickTotal) {
+			oQuickTotal._onItemChange(this, bTotaled);
+		}
+	};
+
+	return QuickTotalItem;
+});

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

@@ -21,9 +21,8 @@
 	flex-direction: column;
 
 	&>section {
-		flex-grow: 1;
-		position: unset;
-		top: 0;
+		position: relative;
+		top: 0 !important; // we need to overwrite the top argument for a section when using the AbstractContainer, otherwise top is overriden by other styles
 	}
 
 	>footer:not(.sapUiHidden) {

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

@@ -3,6 +3,12 @@
 /* Base theme                    */
 /* ============================= */
 
+@_sap_m_Avatar_Font_Size_XL: 3rem;
+@_sap_m_Avatar_Font_Size_L: 2.5rem;
+@_sap_m_Avatar_Font_Size_M: 2rem;
+@_sap_m_Avatar_Font_Size_S: 1.5rem;
+@_sap_m_Avatar_Font_Size_XS: 1rem;
+
 .sapFAvatar {
 	display: inline-block;
 	position: relative;
@@ -120,7 +126,7 @@
 .sapFAvatarXS {
 	height: 2rem;
 	width: 2rem;
-	font-size: 1rem;
+	font-size: @_sap_m_Avatar_Font_Size_XS;
 
 	.sapFAvatarInitialsHolder {
 		font-size: 0.75rem;
@@ -130,7 +136,7 @@
 .sapFAvatarS {
 	height: 3rem;
 	width: 3rem;
-	font-size: 1.5rem;
+	font-size: @_sap_m_Avatar_Font_Size_S;
 
 	.sapFAvatarInitialsHolder {
 		font-size: 1.125rem;
@@ -140,7 +146,7 @@
 .sapFAvatarM {
 	height: 4rem;
 	width: 4rem;
-	font-size: 2rem;
+	font-size: @_sap_m_Avatar_Font_Size_M;
 
 	.sapFAvatarInitialsHolder {
 		font-size: 1.625rem;
@@ -150,7 +156,7 @@
 .sapFAvatarL {
 	height: 5rem;
 	width: 5rem;
-	font-size: 2.5rem;
+	font-size: @_sap_m_Avatar_Font_Size_L;
 
 	.sapFAvatarInitialsHolder {
 		font-size: 2rem;
@@ -160,7 +166,7 @@
 .sapFAvatarXL {
 	height: 7rem;
 	width: 7rem;
-	font-size: 3rem;
+	font-size: @_sap_m_Avatar_Font_Size_XL;
 
 	.sapFAvatarInitialsHolder {
 		font-size: 2.75rem;

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

@@ -385,7 +385,7 @@ span.sapMBtnInner.sapMBtnEmphasized {
 }
 
 :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive > .sapMBtnIcon {
-	color: @sapUiButtonActiveTextColor;
+	color: @sapUiButtonEmphasizedActiveTextColor;
 }
 
 .sapMBtn:hover > .sapMBtnHoverable.sapMBtnEmphasized:not(.sapMBtnActive):not(.sapMToggleBtnPressed) {
@@ -455,7 +455,7 @@ span.sapMBtnInner.sapMBtnEmphasized {
 .sapMBtn .sapMBtnNegative.sapMBtnInner,
 .sapMBtn .sapMBtnSuccess.sapMBtnInner,
 .sapMBtn .sapMBtnNeutral.sapMBtnInner{
-		text-shadow: none;
+		text-shadow: @sapContent_ContrastTextShadow;
 }
 
 .sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnCritical{

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

@@ -141,6 +141,11 @@ html[data-sap-ui-animation='off'] .sapMCrslInner {
 	visibility: hidden;
 }
 
+.sapMCrslInner.sapMCrslInnerNoPages {
+	display: flex;
+	align-items: center;
+}
+
 .sapMCrslInner>* {
 	display: inline-block;
 	vertical-align: top;

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

@@ -43,10 +43,6 @@
 	}
 }
 
-.sapUiForm .sapMCb {
-	display: table-cell;
-}
-
 .sapUiForm:not(.sapUiFormEdit-CTX) .sapMCb.sapMCbDisplayOnly {
 	height: 1.125rem;
 	line-height: 1.125rem;
@@ -149,7 +145,6 @@ html[dir="rtl"] .sapMCb {
 	background-clip: padding-box;
 }
 
-.sapUiSizeCompact.sapMCb .sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before,
 .sapUiSizeCompact .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
 	border-width: 0.125rem;
 }

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

@@ -4,38 +4,42 @@
 /* ======================================= */
 
 .sapMTCMenu {
-
-}
-
-.sapMTCMenu.sapMWrapper {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 
-	.sapMContainerWrapper {
+	.sapMTCMenuContainerWrapper {
 		height: 100%;
 		overflow: hidden;
 	}
 }
 
-.sapMTCMenu .sapMTQAList{
+.sapMTCMenu .sapMTCMenuQAList{
 	display: grid;
-	grid-template-columns: minmax(min-content, max-content) 2fr;
-	column-gap: 10px;
-	row-gap: 5px;
-	padding: .5rem 1rem .5rem 1rem;
+
+	.sapUiRespGrid:not(.sapUiRespGridMedia-Std-Phone) .sapMTCMenuQALabel {
+		text-align: right !important;
+	}
+
+	.sapUiRespGrid {
+		width: auto;
+	}
 }
 
-.sapMTCMenu .sapMTQAListHidden {
+.sapMTCMenu .sapMTCMenuQAListHidden {
 	display: none;
 }
 
-.sapMTCMenu .sapMTQAList .sapMQAction {
+.sapMTCMenu .sapMTCMenuQAList .sapMTCMenuQAction {
 	display: contents;
 
-	.sapMQALabel {
+	.sapMTCMenuQALabel {
 		justify-self: end;
 		align-self: center;
 		text-align: end;
 	}
+}
+
+.sapMPopover .sapUiRespGrid {
+	width: auto !important;
 }

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

@@ -29,6 +29,11 @@ html.sap-phone, html.sapUiMedia-Std-Phone {
 	}
 }
 
-.sapMInputBase.sapMDatePickerHiddenInput {
-	display: none;
+.sapMInputBase {
+	&.sapMDatePickerHiddenInput {
+		display: none;
+	}
+	.sapMInputBaseContentWrapper{
+		display: inline-flex;
+	}
 }

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

@@ -35,6 +35,72 @@
 	float: left;
 }
 
+.sapMDTP.sapMDTPWithTimezone {
+	min-width: 6.875rem;
+}
+
+.sapMDTP.sapMDTPWithTimezone .sapMInputBaseContentWrapper {
+	display: flex;
+	justify-content: flex-start;
+	position: relative;
+
+	& > * {
+		flex-basis: auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
+	& > input {
+		padding-right: 0;
+		width: ~'calc(100% - 4rem)';
+		min-width: 2rem;
+	}
+
+	& > .sapMDTPTimezoneLabel {
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+	}
+}
+
+.sapMDTP.sapMDTPWithTimezone .sapMInputBaseContentWrapper .sapMDummyContent {
+	visibility: hidden;
+	position: absolute;
+	left: 0;
+	width: auto;
+	padding-left: 0.625rem;
+	font-size: 0.875rem;
+}
+
+.sapMDTP.sapMDTPWithTimezone .sapMInputBaseContentWrapper .sapMDTPTimezoneLabel {
+	background: transparent;
+	box-sizing: border-box;
+	border: none;
+
+	font-size: 0.875rem;
+	font-style: italic;
+	color: @sapField_PlaceholderTextColor;
+
+	padding: 0 0.25rem 0 0.25rem;
+	height: 100%;
+	line-height: normal;
+
+	vertical-align: inherit;
+
+	display: flex;
+	justify-content: start;
+	align-items: center;
+
+	cursor: pointer;
+
+	& > span {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		padding-right: 0.125rem;
+	}
+}
+
 /* Compact mode */
 .sapUiSizeCompact .sapMDateTimePopupCont {
 	height: 21rem;
@@ -137,4 +203,84 @@ html:not(.sapUiMedia-StdExt-Phone) {
 			padding: 0.5rem;
 		}
 	}
-}
+}
+
+/* DateTimePicker in DynamicDateRange */
+
+.sapMDynamicDateRangePopover {
+
+	.sapUiCal:not(.sapUiCalInt) > .sapUiCalHead {
+		max-width: 100%;
+	}
+
+	.sapMDateTimePopupCont {
+		min-width: 20rem;
+		overflow: hidden auto !important;
+		display: block;
+		height: 100%;
+		padding: 0;
+		.sapUiCal .sapUiCalMonthView, .sapUiCal .sapUiCalRow {
+			padding-bottom: 0;
+		}
+	}
+
+	.sapUiSizeCompact .sapMDateTimePopupCont {
+		min-width: 17rem;
+	}
+
+	.sapMTimePickerSep {
+		display: none;
+	}
+
+	.sapMDateTimePopupCont > .sapUiCal {
+		width: 100%;
+		height: auto;
+	}
+
+	.sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer {
+		width: 100%;
+		height: 22rem;
+	}
+
+	.sapUiSizeCompact .sapMDateTimePopupCont.sapMTimePickerDropDown .sapMTimePickerContainer {
+		height: 15.25rem;
+		width: 100%;
+	}
+
+	.sapMDateTimePopupCont {
+		  background-color: @sapUiListBackground;
+		.sapUiCalContent {
+			& > .sapUiCalMonthPicker,
+			& > .sapUiCalYearPicker {
+				width: 100%;
+				box-sizing: border-box;
+				left: 0;
+				margin: 0;
+			}
+		}
+		.sapMTPClocksContainer {
+			width: 100%;
+			height: auto;
+			.sapMTPCButtons,
+			.sapMTPCClocks {
+				margin: 0 auto;
+			}
+		}
+	}
+
+}
+
+html.sapUiMedia-Std-Tablet .sapMDynamicDateRangePopover .sapMDateTimePopupCont > .sapUiCal:not(.sapUiCalInt),
+html.sapUiMedia-StdExt-Tablet .sapMDynamicDateRangePopover .sapMDateTimePopupCont > .sapUiCal:not(.sapUiCalInt) {
+	width: 100%;
+}
+
+.sapUiSizeCompact .sapMDDRPopover .sapMPageWithFooter > section,
+.sapMDDRPopover .sapMPageWithFooter > section {
+	bottom: 2rem;
+}
+
+.sapUiSizeCompact .sapMDynamicDateRangePopover .sapUiCal:not(.sapUiCalInt) {
+	width: 100%;
+}
+

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

@@ -15,8 +15,8 @@
 @_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.125rem @sapUiSuccessBorder;
 @_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_InformationHeaderShadow: inset 0 -0.125rem @sapUiInformationBorder;
+@_sap_m_Dialog_HeaderFocusBorderRadius: 0px;
 @_sap_m_Dialog_HeaderFocusBorderBottomOffset: 3px;
 @_sap_m_Dialog_HeaderFocusBorderTopOffset: 2px;
 @_sap_m_Dialog_HeaderFocusBorderLeftOffset: 2px;
@@ -83,8 +83,6 @@ html.sap-phone .sapMDialog {
 	overflow: hidden;
 
 	& > footer .sapMFooter-CTX {
-		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
-		display: -webkit-flex; /* NEW - Chrome */
 		display: flex;
 		padding: 0 0.25rem;
 
@@ -395,7 +393,7 @@ html.sap-desktop .sapMDialog {
 			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;
+			border-radius: @_sap_m_Dialog_HeaderFocusBorderRadius @_sap_m_Dialog_HeaderFocusBorderRadius 0 0;
 			pointer-events: none;
 		}
 	}
@@ -475,7 +473,7 @@ html[data-sap-ui-animation='off'] .sapMDialog {
 .sapMDialogInformation > header {
 
 	&.sapMDialogTitle .sapMDialogIcon.sapUiIcon {
-		color: @sapHighlightColor;
+		color: @sapUiInformativeElement;
 	}
 
 	&:last-of-type .sapMIBar {

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

@@ -40,11 +40,13 @@
 
 	.sapMTB-Info-CTX.sapMIBar-CTX .sapMLabel {
 		color: @sapUiPageFooterTextColor;
+		white-space: break-spaces;
 	}
 }
 
 .sapUiSizeCompact .sapMDynamicDateRangePopover {
-	.sapUiCalMonthPicker {
+	.sapUiCalMonthPicker,
+	.sapUiCalYearPicker {
 		width: 100%;
 		min-width: 16.5rem;
 	}

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

@@ -402,7 +402,7 @@ html.sap-phone .sapMFeedListItemTimestamp {
 .sapMFeedListItemActionButton {
 	float: right;
 	position: relative;
-	margin: -0.75rem -0.5rem 0.5rem 0.5rem;
+	margin: -0.75rem 0.1rem 0.5rem 0.5rem;
 }
 
 .sapUiSizeCompact .sapMFeedListItemActionButton {