@openui5/sap.m 1.117.1 → 1.118.0

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

@@ -178,21 +178,24 @@ html.sap-desktop .sapMSPCMonthDay:not(.sapMSPCMonthDayToday):focus::after {
 .sapMSPCMonthDay.sapMSPCMonthDaySelected.sapMSPCMonthDayToday .sapMSPCMonthNowMarker::before {
 	content: "";
 	position: absolute;
-	top: 0.125rem;
-	left: 0.125rem;
-	right: 0.125rem;
-	bottom: 0.125rem;
+	top: 0.165rem;
+	left: 0.165rem;
+	right: 0.165rem;
+	bottom: 0.165rem;
 	border: 0.0625rem solid @sapList_SelectionBorderColor;
 	pointer-events: none;
 	z-index: 3;
 }
 
 .sapMSPCMonthDay.sapMSPCMonthDaySelected:not(.sapMSPCMonthDayToday) {
-	background: @sapList_SelectionBackgroundColor;
 	border: 0.0625rem solid @sapList_SelectionBorderColor;
 }
 
-.sapMSPCMonthDay.sapMSPCMonthDaySelected:not(.sapMSPCMonthDayToday):hover {
+.sapMSPCMonthDay.sapMSPCMonthDaySelected {
+	background: @sapList_SelectionBackgroundColor;
+}
+
+.sapMSPCMonthDay.sapMSPCMonthDaySelected:hover {
 	background: @sapList_Hover_SelectionBackground;
 }
 

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

@@ -4,6 +4,7 @@
 /* ============================ */
 
 @_sap_m_Table_SelNavColWidth: 3rem;
+@_sap_m_Table_CustomFocusMargin: 1px;
 
 .sapMListTbl {
 	width: 100%;
@@ -21,16 +22,18 @@
 	display: table-row;
 }
 
-.sapMListTbl .sapMTableTH:focus,
-.sapMListTbl td:focus {
-	outline: none;
-}
-
 .sapMListTblCellNoData {
 	text-align: center;
 	white-space: pre-wrap;
 }
 
+.sapMTablePopinColumn {
+	border: 0;
+	height: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
 .sapMListTblHeaderNone {
 	height: 0;
 }
@@ -377,7 +380,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 	cursor: pointer;
 }
 
-.sapMColumnHeaderFocusable:focus {
+.sapMTableTH:focus {
 	outline: @_sap_m_ListItemBase_Focus_Outline;
 	outline-offset: @_sap_m_ListItemBase_Focus_OffsetWithGap;
 }
@@ -413,31 +416,46 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 		position: relative;
 	}
 
-	& > :not(.sapMListTblDummyCell:last-child) {
+	& > :not(.sapMListTblDummyCell:last-child),
+	& + .sapMListTblSubRow > .sapMListTblSubRowCell {
 		position: relative;
 	}
 
+	& + .sapMListTblSubRow > td::before,
 	& > :not(.sapMListTblDummyCell:last-child)::before {
 		content: "";
 		position: absolute;
 		left: 0;
 		right: 0;
+		z-index: 1;
 		pointer-events: none;
 		top: 1px; // mimics outline-offset: -1px
 		bottom: 1px; // mimics outline-offset: -1px
 		border-top: @_sap_m_ListItemBase_Focus_Outline;
 		border-bottom: @_sap_m_ListItemBase_Focus_Outline;
-		margin-right: 1px; // 1px is set so that the focus border is clearly visible on all sides
+		margin-right: @_sap_m_Table_CustomFocusMargin; // make the focus border clearly visible on all sides
+	}
+
+	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData,.sapMListTblDummyCell:last-child)::before {
+		border-bottom: 0;
+		bottom: 0;
+	}
+
+	& + .sapMListTblSubRow > td::before {
+		border-top: 0;
+		top: 0;
 	}
 
-	& > .sapMTblFirstVisibleCell::before {
+	& > .sapMTblFirstVisibleCell::before,
+	& + .sapMListTblSubRow > .sapMTblFirstVisibleCell::before {
 		border-left: @_sap_m_ListItemBase_Focus_Outline;
-		margin-left: 1px; // mimics outline-offset: -1px
+		margin-left: @_sap_m_Table_CustomFocusMargin; // mimics outline-offset
 	}
 
-	& > .sapMTblLastVisibleCell::before {
+	& > .sapMTblLastVisibleCell::before,
+	& + .sapMListTblSubRow > .sapMTblLastVisibleCell::before {
 		border-right: @_sap_m_ListItemBase_Focus_Outline;
-		margin-right: 1px; // 1px is set so that the focus border is clearly visible on all sides
+		margin-right: @_sap_m_Table_CustomFocusMargin; // mimics outline-offset
 	}
 }
 

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

@@ -57,4 +57,5 @@ html.sap-phone {
 /* DESKTOP STYLES */
 html.sap-desktop .sapMValueStateHeaderRoot {
 	margin-right: -12px; // fixing a right margin set from popover
+	max-width: 100%;
 }

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

@@ -3,6 +3,8 @@
 /* Base theme                     */
 /* ============================== */
 
+@_sap_m_Toolbar_ShrinkItem_MinWidth: 2.5rem;
+
 //we want the first visible element on the row to have specific padding-left value
 .sapMIBar.sapMTB .sapMBarChild{
 	margin-left: 0.25rem;
@@ -78,7 +80,7 @@
 }
 
 .sapMTBShrinkItem:not(.sapMSF) {
-	min-width: 2.5rem; /* default min-width value for the shrinkable items */
+	min-width: @_sap_m_Toolbar_ShrinkItem_MinWidth; /* default min-width value for the shrinkable items */
 }
 
 /* NewFlex */

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

@@ -104,7 +104,6 @@
 .sapMUCFileName.sapMLnk {
 	font-family:		@sapUiFontFamily;
 	font-weight:		normal;
-	white-space:		nowrap;
 	padding-top:		0.25rem; /* Padding top instead of padding bottom due to in-line placement with Objectmarker */
 	overflow:			hidden;
 	text-overflow:		ellipsis;

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

@@ -44,6 +44,14 @@
 	text-shadow: @sapUiContentTextShadow;
 }
 
+.sapMVarMngmt .sapMText.sapMVarMngmtTitle  {
+    color: @sapUiLink;
+    text-shadow: @sapUiContentTextShadow;
+    font-size: 1rem;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
 .sapMVarMngmt .sapMVarMngmtModified {
 	color: @sapUiLink;
 	font-weight: bold;

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

@@ -95,6 +95,9 @@ html.sap-desktop .sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
 	.sapMPage > .sapMPageHeader + .sapMPageSubHeader + section {
 		top: 5.75rem;
 	}
+	.sapMPage .sapMVSDCustomTabContent {
+		max-width: 99%;
+	}
 }
 
 .sapUiSizeCompact .sapMVSD {

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

@@ -16,7 +16,8 @@ sap.ui.define([
 	"sap/m/IllustratedMessageType",
 	"sap/m/Carousel",
 	"sap/base/Log"
-], function (Core, Element, HTML, Button, Image, PDFViewer, Dialog, IllustratedMessage, IllustratedMessageType, Carousel, Log) {
+], function (Core, Element, HTML, Button, Image, PDFViewer, Dialog,
+		IllustratedMessage, IllustratedMessageType, Carousel, Log) {
 	"use strict";
 
 	// get resource translation bundle;
@@ -37,7 +38,8 @@ sap.ui.define([
 		Mpeg: "video/mpeg",
 		Mp4: "video/mp4",
 		Quicktime: "video/quicktime",
-		MsVideo: "video/x-msvideo"
+		MsVideo: "video/x-msvideo",
+		Vds: "model/vnd.sap.vds"
 	};
 
 	/**
@@ -50,38 +52,72 @@ sap.ui.define([
    * @name sap.m.upload.FilePreviewDialog
    */
 	var FilePreviewDialog = Element.extend("sap.m.upload.FilePreviewDialog", {
-
-		constructor: function (oPreviewItem) {
-			if (!oPreviewItem) {
-				return;
+		library: "sap.m",
+		metadata: {
+			properties: {
+				/**
+				Current item being previwed in the carousel dialog.
+				*/
+				previewItem: {type: "sap.m.upload.UploadSetTableItem", defaultValue: null},
+				/**
+				 * Items set to build the preview Carousel.
+				 * */
+				items: {type: "sap.m.upload.UploadSetTableItem[]", defaultValue: []}
+			},
+			aggregations: {
+				/**
+				 * Custom buttons, to be displayed in the preview dialog footer.
+				 */
+				additionalFooterButtons: {type: "sap.m.Button", multiple: true}
 			}
-			this._oPreviewItem = oPreviewItem;
+		},
+
+		init: function () {
 			this._oRichTextEditor = null;
 			this._oDialog = null;
+			this._oViewer = null;
+			this._oContentResource = 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));
+		 * Opens the {@link sap.m.upload.FilePreviewDialog}.
+	 	*/
+		open: async function () {
+			var aItems = this.getItems();
+			if (aItems?.length && this.getPreviewItem()) {
+				this._oCarousel = await this._createCarousel();
+				if (!this._oDialog) {
+					this._oDialog = this._createDialog();
+				} else {
+					// set title of the dialog to the current previewable item filename.
+					this._oDialog.setTitle(this.getPreviewItem()?.getFileName() || "");
+					// remove all the existing content and set the new content on the dialog
+					this._oDialog.removeAllContent();
+					this._oDialog.insertContent(this._oCarousel);
+				}
+				this._oDialog.open();
+			}
+		},
+
+		/**
+		 * Dynamically require Vds Viewer Control
+		 * @return {Promise} Promise that resolves on sucessful load of Viewer control
+		 * @private
+		 */
+		_loadVkDependency: function() {
+			return new Promise(function (resolve, reject) {
+				Core.loadLibrary("sap.ui.vk", { async: true })
+					.then(function() {
+						sap.ui.require(["sap/ui/vk/Viewer", "sap/ui/vk/ContentResource"], function(viewer, contentResource) {
+							resolve({ viewer, contentResource});
+						}, function (error) {
+							reject(error);
+						});
+					})
+					.catch(function () {
+						reject("sap.ui.vk.Viewer Control not available.");
+					});
+			});
 		},
 
 		/**
@@ -106,94 +142,172 @@ sap.ui.define([
 		},
 
 		/**
-     * 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) {
+		 * Creates an illustrated message for when no preview is available
+		 * @param {string} sFileName The name of the file to be previewed
+		 * @return {sap.m.IllustratedMessage} An illustrated message instance
+		 * @private
+		 */
+		_createIllustratedMessage: function (sFileName) {
+			const oIllustratedMessage = new IllustratedMessage({
+				illustrationType: IllustratedMessageType.NoData,
+				title: sFileName,
+				description: "No preview available for this file.",
+				enableVerticalResponsiveness: true
+			});
+			return oIllustratedMessage;
+		},
+
+		/**
+		 * Creates a viewer for .vds files
+		 * @param {sap.m.upload.UploadSetTableItem} oItem The UploadSetTableItem to be previewed
+		 * @return {sap.ui.vk.Viewer} A vds viewer instance or undefined if dependency unavailable
+		 * @private
+		 */
+		_createVdsViewer: async function (oItem) {
+			if (!this.oViewer || !this._oContentResource) {
+				try {
+					const oVkDependency = await this._loadVkDependency();
+					this._oViewer = oVkDependency.viewer;
+					this._oContentResource = oVkDependency.contentResource;
+				} catch (error) {
+					Log.error(error);
+					return null;
+				}
+			}
+
+			const oVdsViewer = new this._oViewer({
+				contentResources: [
+					new this._oContentResource({
+						source: oItem.getUrl(),
+						sourceType: "vds"
+					})
+				]
+			});
+
+			return oVdsViewer;
+		},
+
+		/**
+		 * Creates a rich text viewer
+		 * @param {sap.m.upload.UploadSetTableItem} oItem The UploadSetTableItem to be previewed
+		 * @return {sap.ui.richtexteditor.RichTextEditor} A rich text editor instance or undefined if dependency unavailable
+		 * @private
+		 */
+		_createRichTextEditor: async function (oItem) {
+			if (!this._oRichTextEditor) {
+				try {
+					const oRichTextEditor = await this._loadRichTextEditorDependency();
+					this._oRichTextEditor = oRichTextEditor;
+				} catch (error) {
+					Log.error(error);
+					return null;
+				}
+			}
+
+			const oRte = new this._oRichTextEditor({
+				height: "100%",
+				width: "100%",
+				editable: false,
+				busy: true
+			});
+
+			oRte.attachReady(function () {
+				oRte.setBusy(false);
+			});
+
+			const oRequest = new XMLHttpRequest();
+			oRequest.open("GET", oItem.getUrl(), false);
+			oRequest.send(null);
+			const sText = oRequest.responseText;
+			oRte.setValue(sText);
+
+			return oRte;
+		},
+
+		/**
+     	* Creates a {@link sap.m.Carousel} of uploaded files.
+		* @return {sap.m.Carousel} The {@link sap.m.Carousel} control.
+     	* @private
+     	*/
+		_createCarousel: async function () {
+			const oPreviewItem = this.getPreviewItem();
+			const aItems = this.getItems();
 			var sActivePageId = "";
-			var that = this;
-			var aPages = aItems.map(function(oItem) {
+			var aPagePromises = aItems.map(async (oItem) => {
 				var sMediaType = oItem.getMediaType();
 
-				var oPage = new IllustratedMessage({
-					illustrationType: IllustratedMessageType.NoData,
-					title: oItem.getFileName(),
-					description: "No preview available for this file.",
-					enableVerticalResponsiveness: true
-				});
+				var sFileName = oItem.getFileName();
+				var oPage = this._createIllustratedMessage(sFileName);
 
-				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
+				if (oItem.getPreviewable()) {
+					switch (sMediaType?.toLowerCase()) {
+						case PreviewableMediaType.Png:
+						case PreviewableMediaType.Bmp:
+						case PreviewableMediaType.Jpeg:
+						case PreviewableMediaType.Gif: {
+							oPage = new Image({
+								src: oItem.getUrl()
 							});
+							break;
 						}
-						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;
+						case PreviewableMediaType.Txt: {
+							const oRte = await this._createRichTextEditor(oItem);
+							if (oRte) {
+								oPage = oRte;
+							}
+							break;
+						}
+						case PreviewableMediaType.Pdf:
+						case PreviewableMediaType.ChromePdf: {
+							oPage = new PDFViewer({
+								source: oItem.getUrl(),
+								showDownloadButton: false
+							});
+							oPage.setBusy(true);
+							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;
+						}
+						case PreviewableMediaType.Tiff:
+						case PreviewableMediaType.Vds: {
+							const oVdsViewer = await this._createVdsViewer(oItem);
+							if (oVdsViewer) {
+								oPage = oVdsViewer;
+							}
+							break;
+						}
+						default:
+							break;
 					}
-					default:
-						break;
 				}
 
-				sActivePageId = oItem.getId() === oPreviewItem.getId() ? oPage.getId() : sActivePageId;
+				sActivePageId = oItem?.getId() === oPreviewItem?.getId() ? oPage?.getId() : sActivePageId;
 
 				return oPage;
 			});
 
-			var oCarousel = new Carousel({
+			const aPages = await Promise.all(aPagePromises);
+
+			const oCarousel = new Carousel({
 				showPageIndicator: true,
 				pages: [
 					aPages
 				],
 				activePage: sActivePageId,
 				height: "85vh",
-				pageChanged: function(oEvent) {
+				pageChanged: (oEvent) => {
 					var iIndex = aPages.findIndex(function(oPage) {
 						return oPage.sId === oEvent.getParameter("newActivePageId");
 					});
 					var sNewDialogTitle = aItems[iIndex].getFileName();
-					oEvent
-						.getSource()
-						.getParent()
-						.setProperty("title", sNewDialogTitle);
+					this._oDialog.setTitle(sNewDialogTitle);
 				}
 			});
 
@@ -201,26 +315,24 @@ sap.ui.define([
 		},
 
 		/**
-     * 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) {
+	 	* Creates a {@link sap.m.Dialog} with {@link sap.m.Carousel} for previewing uploaded files.
+		* @return {sap.m.Dialog} The {@link sap.m.Dialog} control.
+	 	* @private
+		*/
+		_createDialog: function() {
 			var that = this;
-			var oActiveItem = this._getActiveUploadSetTableItem(oCarousel, aItems);
+			var oActiveItem = this._getActiveUploadSetTableItem();
 			var oDialog = new Dialog({
 				title: oActiveItem.getFileName(),
-				content: oCarousel,
+				content: that._oCarousel,
 				horizontalScrolling: true,
 				verticalScrolling: true,
 				buttons: [
+					that.getAdditionalFooterButtons(),
 					new Button({
 						text: oLibraryResourceBundle.getText("UPLOAD_SET_TABLE_FILE_PREVIEW_DIALOG_DOWNLOAD"),
 						press: function () {
-							that._getActiveUploadSetTableItem(oCarousel, aItems).download(true);
+							that._getActiveUploadSetTableItem().download(true);
 						}
 					}),
 					new Button({
@@ -236,20 +348,17 @@ sap.ui.define([
 		},
 
 		/**
-     * 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();
+     	* Creates a {@link sap.m.Carousel} of uploaded files.
+		* @return {sap.m.upload.UploadSetTableItem} The currently active UploadSetTableItem.
+     	* @private
+     	*/
+		_getActiveUploadSetTableItem: function () {
+			var sActivePageId = this._oCarousel.getActivePage();
+			var aPages = this._oCarousel.getPages();
 			var iIndex = aPages.findIndex(function (oPage) {
 				return oPage.sId === sActivePageId;
 			});
-			return aItems[iIndex];
+			return this.getItems()[iIndex];
 		}
 	});
 

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

@@ -53,7 +53,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.117.1
+	 * @version 1.118.0
 	 * @constructor
 	 * @public
 	 * @since 1.63
@@ -678,8 +678,6 @@ sap.ui.define([
 			case KeyCodes.ENTER:
 				if (oItem === this._oEditedItem) {
 					this._handleItemEditConfirmation(oEvent, oItem);
-				} else {
-					oItem._handleFileNamePressed();
 				}
 				break;
 			default:
@@ -1588,6 +1586,7 @@ sap.ui.define([
 				buttons: [
 					new Button({
 						text: this._oRb.getText("UPLOAD_SET_OKBUTTON_TEXT"),
+						type: MobileLibrary.ButtonType.Emphasized,
 						press: [onPressOk, this]
 					}),
 					new Button({

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

@@ -36,7 +36,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.117.1
+	 * @version 1.118.0
 	 * @constructor
 	 * @public
 	 * @since 1.63
@@ -625,7 +625,8 @@ sap.ui.define([
 		if (!this._oFileNameLink) {
 			this._oFileNameLink = new Link({
 				id: this.getId() + "-fileNameLink",
-				press: [this, this._handleFileNamePressed, this]
+				press: [this, this._handleFileNamePressed, this],
+				wrapping: true
 			});
 			this._oFileNameLink.setText(this.getFileName());//For handling curly braces in file name we have to use setter.Otherwise it will be treated as binding.
 			this._oFileNameLink.addStyleClass("sapMUCFileName");