@openui5/sap.m 1.97.1 → 1.100.0

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

@@ -0,0 +1,142 @@
+/*!
+ * 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.100.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._oContent) {
+			this._oContent = this.createContent(this.getItems());
+		}
+
+		return this._oContent;
+	};
+
+	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 new HBox({
+			items: 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._oContent) {
+			this._oContent.destroy();
+			delete this._oContent;
+		}
+	};
+
+	QuickTotal.prototype.onChange = function(oEvent, oItem) {
+		if (oEvent.getParameters().pressed) {
+			var sButtonId = oEvent.getSource().sId;
+			oEvent.getSource().getParent().getItems().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,47 @@
+/*!
+ * 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.100.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 }
+			}
+		}
+	});
+
+	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/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;

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

@@ -96,10 +96,6 @@
 	padding-top: 1px;
 }
 
-.sapMListTblSubCntSpr {
-	font-size: @sapMFontMediumSize;
-}
-
 .sapMListTblSubCntRow + .sapMListTblSubCntRow {
 	margin-top: .5rem;
 }
@@ -114,11 +110,12 @@
 	max-width: 100%;
 }
 
-.sapMListTblSubCntRow > .sapMListTblSubCntSpr,
+.sapMListTblSubCntHdr > .sapMListTblSubCntSpr,
 .sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMText,
 .sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMLabel {
 	color: @sapUiContentLabelColor;
 	padding-top: 0;
+	display: inline;
 }
 
 .sapMListTblSubCntRow > .sapMListTblSubCntVal .sapMText,
@@ -128,7 +125,18 @@
 }
 
 .sapMListTblSubCntSpr {
+	font-size: @sapMFontMediumSize;
 	padding-right: .5rem;
+	&::before {
+		content: attr(data-popin-colon);
+		vertical-align: top;
+	}
+}
+
+.sapMListTblSubCntRowInline {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
 }
 
  /* separators */

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

@@ -4,21 +4,17 @@
 /* ======================================= */
 
 .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;
@@ -26,14 +22,14 @@
 	padding: .5rem 1rem .5rem 1rem;
 }
 
-.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;

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

@@ -4,8 +4,7 @@
 /* =================================== */
 
 .sapMComboBoxBase.sapMInputBaseHasEndIcons .sapMInputBaseInner {
-	width: auto;
-	flex: 1
+	flex: 1;
 }
 
 .sapMComboBoxBase .sapMInputBaseContentWrapper {
@@ -21,16 +20,28 @@
 	cursor: default;
 }
 
-.sapMInputBase:not(.sapMInputBaseDisabled):not(.sapMInputBaseIconPressed).sapMComboBoxBase.sapMComboBoxBaseArrowPressed .sapMInputBaseIconContainer .sapMInputBaseIcon:last-child {
-	background: @sapUiToggleButtonPressedBackground;
+.sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon {
+	color: @sapUiContentIconColor;
+	background: transparent;
+
 	&:hover {
-		background: @sapUiToggleButtonPressedBackground;
+		background: @sapUiButtonLiteHoverBackground;
 	}
-	&::before {
-		color: @sapUiToggleButtonPressedTextColor;
+
+	&:active {
+		background-color: @sapUiButtonLiteActiveBackground;
+		color: @sapUiButtonActiveTextColor;
+
+		&::before {
+			color: @sapUiButtonActiveTextColor;
+		}
 	}
 }
 
+.sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
+	color: @sapUiContentIconColor;
+}
+
 /* ------------------------------ */
 /* dialog                         */
 /* ------------------------------ */

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

@@ -13,6 +13,7 @@
 .sapMDateTimePopupCont > .sapUiCal,
 .sapMDateTimePopupCont > .sapMTimePickerContainer {
 	float: left;
+	padding-top: 0.5rem;
 }
 
 .sapMDateTimePopupCont > .sapMTimePickerContainer {
@@ -21,20 +22,85 @@
 
 .sapMTimePickerSwitch {
 	margin-top: 1rem;
-	width: 100%;
 	text-align: center;
 }
 
 .sapMTimePickerSep {
 	height: ~'calc(100% - 2rem)';
-	width: 0px;
+	width: 0.0625rem;
 	margin-top: 1rem;
 	margin-bottom: 1rem;
-	border-left: 1px solid @sapUiGroupContentBorderColor;
+	background-color: @sapUiGroupContentBorderColor;
 	box-sizing: border-box;
 	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;
@@ -132,4 +198,89 @@ html:not(.sapUiMedia-StdExt-Phone) {
 	.sapMDateTimePopup .sapMPopoverCont {
 		overflow: hidden auto !important; /* disable horizontal scrolling when not phone size */
 	}
-}
+	.sapMDateTimePopupCont {
+		.sapMTPClocksContainer {
+			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/DynamicDateRange.less

@@ -12,6 +12,11 @@
 		& > .sapMLabel {
 			display: block;
 			margin: 0.75rem 0 0.25rem 0;
+			&.sapMDDRAdditionalLabel {
+				display: inline-block;
+				padding-left: 1.25rem;
+				padding-bottom: 0.25rem
+			}
 		}
 		& > .sapMLabel:first-child {
 			margin-top: 1rem;
@@ -35,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;
 	}
@@ -47,6 +54,9 @@
 	.sapMPageFooter .sapMIBar {
 		height: 2rem;
 	}
+	section > .sapMLabel.sapMDDRAdditionalLabel {
+		padding-left: 0;
+	}
 }
 
 .sapUiIcon.sapMDDRDateOption {

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 {