@openui5/sap.m 1.115.1 → 1.116.0

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

@@ -4,7 +4,6 @@
 /* ================================== */
 
 @_sap_m_SearchField_Height: 3rem;
-@_sap_m_SearchField_FormHeight: 2.5rem;
 @_sap_m_SearchField_ButtonSize: 2.375rem;
 @_sap_m_SearchField_ButtonFontSize: 1.125rem;
 @_sap_m_SearchField_CompactButtonLineHeight: 1.5rem;
@@ -86,7 +85,8 @@ input.sapMSFI[type="search"]:focus {
 .sapMSFF {
 	display: flex;
 	box-sizing: border-box;
-	height: @_sap_m_SearchField_FormHeight;
+	height: @sapUiElementHeight;
+	box-shadow: @sapUiFieldShadow;
 	border: @_sap_m_SearchField_Border;
 	background: @sapUiFieldBackgroundStyle;
 	background-color: @sapUiFieldBackground;
@@ -108,6 +108,11 @@ input.sapMSFI[type="search"]:focus {
 
 :not(.sapMSFDisabled) > .sapMSFF:hover {
 	border-color: @sapUiFieldHoverBorderColor;
+	box-shadow: @sapUiFieldHoverShadow;
+}
+
+:not(.sapMSFDisabled) > .sapMSFF:active {
+	background: @sapUiFieldFocusBackground;
 }
 
 .sapMSFI {
@@ -213,7 +218,7 @@ input.sapMSFI[type="search"]:focus {
 	}
 
 	.sapMSFF {
-		height: 1.625rem;
+		height: @sapUiElementCompactHeight;
 		padding-left: @_sap_m_SearchField_Compact_FormPaddingLeft;
 	}
 

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

@@ -77,6 +77,10 @@
 				}
 			}
 		}
+		.sapMSelectListItem {
+			display: flex;
+			align-items: center;
+		}
 	}
 }
 
@@ -245,10 +249,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 +360,10 @@
 	border-color: transparent;
 }
 
+.sapMSelectListTableLayout {
+	border-collapse: collapse;
+}
+
 /* ---------------------------------------- */
 /* value states commons styles adaptations  */
 /* ---------------------------------------- */
@@ -490,7 +512,6 @@ div.sapMSltPicker .sapMDialogScrollCont {
 	padding-left: 0.5rem;
 }
 
-.sapUiSizeCompact .sapMSlt > .sapMSltLabel,
 .sapUiSizeCompact .sapMSlt > .sapMSltArrow {
 	line-height: 1.5rem;
 }
@@ -588,3 +609,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;
 }

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/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/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,223 @@
+/*!
+ * 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/Element",
+	"sap/ui/core/HTML",
+	"sap/ui/richtexteditor/RichTextEditor",
+	"sap/m/Button",
+	"sap/m/Image",
+	"sap/m/PDFViewer",
+	"sap/m/Dialog",
+	"sap/m/IllustratedMessage",
+	"sap/m/IllustratedMessageType",
+	"sap/m/Carousel"
+], function (Element, HTML, RichTextEditor, Button, Image,
+			PDFViewer, Dialog, IllustratedMessage, IllustratedMessageType, Carousel) {
+	"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;
+			}
+			var aItems = oPreviewItem.getParent().getAggregation("items");
+			if (!aItems || aItems.length === 0 ) {
+				return;
+			}
+			var oCarousel = this._createCarousel(oPreviewItem, aItems);
+			this._oDialog = this._createDialog(oCarousel, aItems);
+		},
+
+		/**
+     * Opens the {@link sap.m.upload.FilePreviewDialog}.
+     */
+		open: function () {
+			if (!this._oDialog) {
+				return;
+			}
+			this._oDialog.open();
+		},
+
+		/**
+     * 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 aPages = aItems.map(function(oItem) {
+				var sMediaType = oItem.getMediaType();
+				var oPage = null;
+
+				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: {
+						var oRequest = new XMLHttpRequest();
+						oRequest.open("GET", oItem.getUrl(), false);
+						oRequest.send(null);
+						var sText = oRequest.responseText;
+
+						oPage = new RichTextEditor({
+							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 : {
+						oPage = new IllustratedMessage({
+							illustrationType: IllustratedMessageType.NoData,
+							title: oItem.getFileName(),
+							description: "No preview available for this file.",
+							enableVerticalResponsiveness: true
+						});
+						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;
+});

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

@@ -48,7 +48,7 @@ sap.ui.define([
 	 * and requests, unified behavior of instant and deferred uploads, as well as improved progress indication.
 	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 * @constructor
 	 * @public
 	 * @since 1.63
@@ -1401,7 +1401,9 @@ sap.ui.define([
 		oEdit.focus();
 
 		if (!sNewFileName || sNewFileName.length === 0) {
-			oItem._setContainsError(true);
+			oEdit.setValueStateText(this._oRb.getText("UPLOAD_SET_TYPE_FILE_NAME"));
+			oEdit.setProperty("valueState", "Error", true);
+			oEdit.setShowValueStateMessage(true);
 			return;
 		}
 
@@ -1413,8 +1415,7 @@ sap.ui.define([
 			this._oEditedItem = null;
 			return;
 		}
-
-		if (!this.getSameFilenameAllowed() && UploadSetItem._checkDoubleFileName(oEdit.getValue() + "." + oFile.extension, this._getAllItems())) {
+		if (!this.getSameFilenameAllowed() && UploadSetItem._checkDoubleFileName(sNewFileName + "." + oFile.extension, this._getAllItems())) {
 			oEdit.setValueStateText(this._oRb.getText("UPLOAD_SET_FILE_NAME_EXISTS"));
 			oEdit.setProperty("valueState", "Error", true);
 			oEdit.setShowValueStateMessage(true);

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @class Item that represents one file to be uploaded using the {@link sap.m.upload.UploadSet} control.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 * @constructor
 	 * @public
 	 * @since 1.63
@@ -665,34 +665,12 @@ sap.ui.define([
 			this._oFileNameEdit.addStyleClass("sapMUCEditBox");
 			this._oFileNameEdit.setFieldWidth("75%");
 			this._oFileNameEdit.setDescription(oSplit.extension);
-			this._updateFileNameEdit();
 			this.addDependent(this._oFileNameEdit);
 		}
 
 		return this._oFileNameEdit;
 	};
 
-	UploadSetItem.prototype._updateFileNameEdit = function () {
-		var oEdit = this._getFileNameEdit();
-
-		// TODO Needed?
-		// if (!this._bInEditMode) {
-		// 	var oSplit = UploadSetItem._splitFileName(this.getFileName());
-		// 	oEdit.setValue(oSplit.name);
-		// }
-
-		if (this._bContainsError) {
-			oEdit.setValueState(ValueState.Error);
-			oEdit.setValueStateText("");
-			oEdit.setShowValueStateMessage(true);
-			if (oEdit.getValue().length === 0) {
-				oEdit.setValueStateText(this._oRb.getText("UPLOAD_SET_TYPE_FILE_NAME"));
-			} else {
-				oEdit.setValueStateText(this._oRb.getText("UPLOAD_SET_FILE_NAME_EXISTS"));
-			}
-		}
-	};
-
 	/**
 	 * Determines if the fileName is already in usage.
 	 * @param {string} filename inclusive file extension
@@ -757,10 +735,6 @@ sap.ui.define([
 
 	UploadSetItem.prototype._setContainsError = function (bContainsError) {
 		this._bContainsError = bContainsError;
-		if (!this._bContainsError) {
-			return;
-		}
-		this._updateFileNameEdit();
 	};
 
 	UploadSetItem._splitFileName = function (sFileName, bWithDot) {