@openui5/sap.m 1.115.1 → 1.117.0

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

@@ -77,6 +77,10 @@
 				}
 			}
 		}
+		.sapMSelectListItem {
+			display: flex;
+			align-items: center;
+		}
 	}
 }
 
@@ -190,6 +194,7 @@
 	margin: 0.25rem 0 0.25rem 0;
 	border: 1px solid @sapUiFieldBorderColor;
 	background: @sapUiFieldBackground;
+	line-height: initial;
 }
 
 .sapMSltMinWidth {
@@ -245,10 +250,24 @@
 	text-align: start;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	line-height: 2.375rem;
 	color: @sapUiFieldTextColor;
 	font-style: normal;
 	font-size: @sapMFontMediumSize;
+	vertical-align: middle;
+	&::after {
+		content: "";
+		height: 100%;
+		display: inline-block;
+		vertical-align: middle;
+		width: 0;
+	}
+	.sapMSelectListItemText {
+		vertical-align: middle;
+	}
+
+	.sapMSelectListItemIcon {
+		vertical-align: middle;
+	}
 }
 
 .sapMSltAutoAdjustedWidth > .sapMSltLabel {
@@ -342,6 +361,10 @@
 	border-color: transparent;
 }
 
+.sapMSelectListTableLayout {
+	border-collapse: collapse;
+}
+
 /* ---------------------------------------- */
 /* value states commons styles adaptations  */
 /* ---------------------------------------- */
@@ -490,7 +513,6 @@ div.sapMSltPicker .sapMDialogScrollCont {
 	padding-left: 0.5rem;
 }
 
-.sapUiSizeCompact .sapMSlt > .sapMSltLabel,
 .sapUiSizeCompact .sapMSlt > .sapMSltArrow {
 	line-height: 1.5rem;
 }
@@ -588,3 +610,11 @@ div.sapMSltPicker .sapMDialogScrollCont {
     height: 100%;
     border: none;
 }
+
+// when the Busy Indicator is inside Select it should be with different positions - BCP 1870362962
+.sapMSlt .sapUiLocalBusyIndicator:focus:after {
+	left: 1px;
+	top: 1px;
+	right: 1px;
+	bottom: 1px;
+}

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

@@ -70,10 +70,6 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	text-align: inherit !important;
 }
 
-.sapMListTblNone {
-	display: none;
-}
-
 .sapMListTblCell {
 	padding: .25rem .5rem;
 	font-size: @sapUiListTableTextSize;
@@ -180,10 +176,6 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	border-bottom: 1px solid @sapUiListBorderColor;
 }
 
-.sapMListTblNone:first-child + .sapMListTblCell {
-	padding-left: 1rem;
-}
-
 .sapMListTblCell.sapMListTblCellNoData {
 	padding-right: 1rem;
 }
@@ -321,6 +313,10 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	vertical-align: middle;
 }
 
+.sapMListTbl .sapMLnk {
+	display: initial;
+}
+
 /* Column header and column header content */
 .sapMListTblCell.sapMListTblHeaderCell {
 	padding: 0;

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

@@ -23,6 +23,10 @@
 		width: 2.5625rem;
 	}
 
+	& .sapMTPNow {
+		margin-left: 0.75rem;
+	}
+
 	& > span {
 		min-width: 0.5rem;
 		padding: 0 0.125rem;

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

@@ -16,6 +16,18 @@
 	padding: 5px;
 }
 
-.sapMUSTextInnerContainer{
+.sapMUSTextInnerContainer {
 	display: flex;
+}
+
+.sapMUSTFileUploaderVisibility {
+	visibility: hidden;
+	display: none !important;
+}
+
+.sapMUSObjectMarkersAsStatusContainer {
+	display: flex;
+	gap: 0.5rem;
+	align-items: end;
+	margin-left: 0.5rem;
 }

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

@@ -0,0 +1,80 @@
+.sapMUSTTable .sapMListTblHeader {
+	background: #F2F2F2 !important;
+	background-color: #F2F2F2 !important;
+	border-width: 1px 0px;
+	border-style: solid;
+	border-color: #D9D9D9;
+}
+
+.sapMUSTItemIconInactive,
+.sapMUSTItemIcon {
+	text-align: initial;
+}
+
+.sapMUSTItemIconInactive,
+.sapMUSTItemIcon,
+.sapMUSTItemImage {
+	height:				3rem;
+	width:				3rem;
+	margin-top:			0.1rem; /* is needed so that keyboard frame is visible; after the central focus concept is implemented delete the margin */
+	margin-bottom:		0.1rem; /* is needed so that keyboard frame is visible; after the central focus concept is implemented delete the margin */
+	margin-left:		0.1rem; /* is needed so that keyboard frame is visible; after the central focus concept is implemented delete the margin */
+	flex:				none;
+}
+
+.sapMUSTItemIcon {
+	color: @sapUiContentIconColor;
+}
+/* Item Icon Inactive */
+.sapMUSTItemIconInactive {
+	color: @sapUiContentNonInteractiveIconColor;
+}
+
+.sapMUSTItemIcon {
+	font-size: 1.25rem!important;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #647987;
+	border-radius: 4px;
+	color: #FFFFFF;
+}
+
+.sapMUST .sapMIllustratedMessage .sapMIllustratedMessageMainContent {
+	justify-content: center;
+	flex-direction: row;
+}
+.sapMUST .sapMIllustratedMessage {
+	padding: 0px;
+	text-align: left;
+}
+
+.sapMUST .sapMIllustratedMessage.sapMIllustratedMessage-Spot .sapMIllustration {
+	width: 4rem;
+	height: 5rem;
+	margin: 0 1rem;
+}
+
+.sapMUST .sapMIllustratedMessageAdditionalContent,.sapMUST .sapMIllustratedMessage.sapMIllustratedMessage-Spot .sapMIllustratedMessageAdditionalContent {
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+// alignment for illustrated figure captions
+.sapMUST .sapMIllustratedMessage.sapMIllustratedMessage-Spot figcaption {
+	margin-top: 1rem;
+}
+
+.sapMUST .sapMListTblCell.sapMListTblCellNoData {
+	padding: 0px;
+}
+
+.sapMUSTFileUploaderVisibility {
+	visibility: hidden;
+	display: none !important;
+}
+
+.sapMUSTRemovePopoverContainer {
+	max-width: 20rem !important;
+	max-height: 11rem !important;
+}

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

@@ -13,6 +13,7 @@
 	padding: 0.3rem 0.625rem;
 	min-width: 6rem;
 	white-space: pre-line;
+	word-wrap: break-word;
 	overflow: hidden;
 	text-overflow: ellipsis;
 

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

@@ -41,6 +41,7 @@
 
 .sapMVarMngmt .sapMTitle.sapMVarMngmtTitle  {
     color: @sapUiLink;
+	text-shadow: @sapUiContentTextShadow;
 }
 
 .sapMVarMngmt .sapMVarMngmtModified {

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

@@ -75,7 +75,7 @@
 }
 
 .sapMWizard:not(.sapMWizardModePage) .sapMWizardLastActivatedStep {
-	min-height: 100%;
+	min-height: ~"calc(100% - 1rem)"; /* 1rem is the margin from the top of the container*/
 }
 
 html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible,

package/src/sap/m/themes/base/library.source.less

@@ -175,6 +175,7 @@
 @import "TreeItemBase.less";
 @import "UploadCollection.less";
 @import "UploadSet.less";
+@import "UploadSetTable.less";
 @import "ValueStateMessage.less";
 @import "VariantManagement.less";
 @import "ViewSettingsDialog.less";

package/src/sap/m/upload/FilePreviewDialog.js

@@ -0,0 +1,257 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/ui/core/Core",
+	"sap/ui/core/Element",
+	"sap/ui/core/HTML",
+	"sap/m/Button",
+	"sap/m/Image",
+	"sap/m/PDFViewer",
+	"sap/m/Dialog",
+	"sap/m/IllustratedMessage",
+	"sap/m/IllustratedMessageType",
+	"sap/m/Carousel",
+	"sap/base/Log"
+], function (Core, Element, HTML, Button, Image, PDFViewer, Dialog, IllustratedMessage, IllustratedMessageType, Carousel, Log) {
+	"use strict";
+
+	// get resource translation bundle;
+	var oLibraryResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
+
+	/**
+	 * Media types that can be previewed.
+	 * @enum {string}
+	 */
+	var PreviewableMediaType = {
+		Png: "image/png",
+		Bmp: "image/bmp",
+		Jpeg: "image/jpeg",
+		Gif: "image/gif",
+		Txt: "text/plain",
+		Pdf: "application/pdf",
+		ChromePdf: "application/x-google-chrome-pdf",
+		Mpeg: "video/mpeg",
+		Mp4: "video/mp4",
+		Quicktime: "video/quicktime",
+		MsVideo: "video/x-msvideo"
+	};
+
+	/**
+	 * The file preview dialog.
+	 *
+   * @class Dialog with a carousel to preview files uploaded using the UploadSet control.
+	 * @param {sap.m.upload.UploadSetTableItem} oPreviewItem The initial active UploadSetTableItem to be previewed.
+   * @private
+   * @extends sap.ui.core.Element
+   * @name sap.m.upload.FilePreviewDialog
+   */
+	var FilePreviewDialog = Element.extend("sap.m.upload.FilePreviewDialog", {
+
+		constructor: function (oPreviewItem) {
+			if (!oPreviewItem) {
+				return;
+			}
+			this._oPreviewItem = oPreviewItem;
+			this._oRichTextEditor = null;
+			this._oDialog = null;
+		},
+
+		/**
+     * Opens the {@link sap.m.upload.FilePreviewDialog}.
+     */
+		open: function () {
+			this._loadRichTextEditorDependency()
+				.then(function(oRichTextEditor){
+					this._oRichTextEditor = oRichTextEditor;
+				}.bind(this))
+				.catch(function(error) {
+					Log.error(error);
+				})
+				.finally(function() {
+					var aItems = this._oPreviewItem.getParent().getAggregation("items");
+					if (!aItems || aItems.length === 0 ) {
+						return;
+					}
+					var oCarousel = this._createCarousel(this._oPreviewItem, aItems);
+					this._oDialog = this._createDialog(oCarousel, aItems);
+					if (this._oDialog) {
+						this._oDialog.open();
+					}
+				}.bind(this));
+		},
+
+		/**
+		 * Dynamically require RichTextEditor Control
+		 * @return {Promise} Promise that resolves on sucessful load of RichTextEditor control
+		 * @private
+		 */
+		_loadRichTextEditorDependency: function() {
+			return new Promise(function (resolve, reject) {
+				Core.loadLibrary("sap.ui.richtexteditor", { async: true })
+					.then(function() {
+						sap.ui.require(["sap/ui/richtexteditor/RichTextEditor"], function(richTextEditor) {
+							resolve(richTextEditor);
+						}, function (error) {
+							reject(error);
+						});
+					})
+					.catch(function () {
+						reject("RichTextEditor Control not available.");
+					});
+			});
+		},
+
+		/**
+     * Creates a {@link sap.m.Carousel} of uploaded files.
+     *
+		 * @param {sap.m.upload.UploadSetTableItem} oPreviewItem The initial active UploadSetTableItem to be previewed.
+		 * @param {array} aItems The collection of UploadSetTableItems to be included in the Carousel.
+		 * @return {sap.m.Carousel} The {@link sap.m.Carousel} control.
+     * @private
+     */
+		_createCarousel: function (oPreviewItem, aItems) {
+			var sActivePageId = "";
+			var that = this;
+			var aPages = aItems.map(function(oItem) {
+				var sMediaType = oItem.getMediaType();
+
+				var oPage = new IllustratedMessage({
+					illustrationType: IllustratedMessageType.NoData,
+					title: oItem.getFileName(),
+					description: "No preview available for this file.",
+					enableVerticalResponsiveness: true
+				});
+
+				switch (sMediaType.toLowerCase()) {
+					case PreviewableMediaType.Png:
+					case PreviewableMediaType.Bmp:
+					case PreviewableMediaType.Jpeg:
+					case PreviewableMediaType.Gif: {
+						oPage = new Image({
+							src: oItem.getUrl()
+						});
+						break;
+					}
+					case PreviewableMediaType.Txt: {
+						if (that._oRichTextEditor) {
+							var oRequest = new XMLHttpRequest();
+							oRequest.open("GET", oItem.getUrl(), false);
+							oRequest.send(null);
+							var sText = oRequest.responseText;
+
+							oPage = new that._oRichTextEditor({
+								height: "100%",
+								width: "100%",
+								value: sText,
+								editable: false
+							});
+						}
+						break;
+					}
+					case PreviewableMediaType.Pdf:
+					case PreviewableMediaType.ChromePdf: {
+						oPage = new PDFViewer({
+							source: oItem.getUrl(),
+							showDownloadButton: false
+						});
+						break;
+					}
+					case PreviewableMediaType.Mpeg:
+					case PreviewableMediaType.Mp4:
+					case PreviewableMediaType.Quicktime:
+					case PreviewableMediaType.MsVideo: {
+						oPage = new HTML({
+							content: "<video controls width='100%' height='100%' src='" + oItem.getUrl() + "'>"
+						});
+						break;
+					}
+					default:
+						break;
+				}
+
+				sActivePageId = oItem.getId() === oPreviewItem.getId() ? oPage.getId() : sActivePageId;
+
+				return oPage;
+			});
+
+			var oCarousel = new Carousel({
+				showPageIndicator: true,
+				pages: [
+					aPages
+				],
+				activePage: sActivePageId,
+				height: "85vh",
+				pageChanged: function(oEvent) {
+					var iIndex = aPages.findIndex(function(oPage) {
+						return oPage.sId === oEvent.getParameter("newActivePageId");
+					});
+					var sNewDialogTitle = aItems[iIndex].getFileName();
+					oEvent
+						.getSource()
+						.getParent()
+						.setProperty("title", sNewDialogTitle);
+				}
+			});
+
+			return oCarousel;
+		},
+
+		/**
+     * Creates a {@link sap.m.Dialog} with {@link sap.m.Carousel} for previewing uploaded files.
+     *
+		 * @param {sap.m.Carousel} oCarousel The Carousel control.
+		 * @param {array} aItems The collection of UploadSetTableItems included in the Carousel.
+		 * @return {sap.m.Dialog} The {@link sap.m.Dialog} control.
+     * @private
+     */
+		_createDialog: function(oCarousel, aItems) {
+			var that = this;
+			var oActiveItem = this._getActiveUploadSetTableItem(oCarousel, aItems);
+			var oDialog = new Dialog({
+				title: oActiveItem.getFileName(),
+				content: oCarousel,
+				horizontalScrolling: true,
+				verticalScrolling: true,
+				buttons: [
+					new Button({
+						text: oLibraryResourceBundle.getText("UPLOAD_SET_TABLE_FILE_PREVIEW_DIALOG_DOWNLOAD"),
+						press: function () {
+							that._getActiveUploadSetTableItem(oCarousel, aItems).download(true);
+						}
+					}),
+					new Button({
+						text: oLibraryResourceBundle.getText("UPLOAD_SET_TABLE_FILE_PREVIEW_DIALOG_CLOSE"),
+						press: function () {
+							that._oDialog.close();
+						}
+					})
+				]
+			});
+
+			return oDialog;
+		},
+
+		/**
+     * Creates a {@link sap.m.Carousel} of uploaded files.
+     *
+		 * @param {sap.m.Carousel} oCarousel The Carousel control.
+		 * @param {array} aItems The collection of UploadSetTableItems included in the Carousel.
+		 * @return {sap.m.upload.UploadSetTableItem} The currently active UploadSetTableItem.
+     * @private
+     */
+		_getActiveUploadSetTableItem: function (oCarousel, aItems) {
+			var sActivePageId = oCarousel.getActivePage();
+			var aPages = oCarousel.getPages();
+			var iIndex = aPages.findIndex(function (oPage) {
+				return oPage.sId === sActivePageId;
+			});
+			return aItems[iIndex];
+		}
+	});
+
+  return FilePreviewDialog;
+});