@openui5/sap.m 1.131.0 → 1.132.0

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

@@ -2,6 +2,8 @@
 /* Shared CSS Base theme  */
 /* ====================== */
 
+@_sap_m_Badge_AttentionBackgroundColor: @sapUiContentBadgeBackground;
+
 /* Common CSS for condensed table cell content controls */
 .sapUiCondensedTableCellContent {
 	box-sizing: border-box;
@@ -56,7 +58,7 @@
 
 /* ObjectListItem and ObjectHeader share styles for markers such as flag and favorite */
 .sapMObjStatusMarker {
-	color: @sapUiContentMarkerIconColor;
+	color: var(--sapContent_MarkerIconColor);
 }
 
 .sapMObjStatusMarker .sapUiIcon + .sapUiIcon,
@@ -64,7 +66,7 @@
 	margin-left: .5rem;
 }
 
-.sapMObjStatusMarkerInvisible{
+.sapMObjStatusMarkerInvisible {
 	visibility: hidden;
 }
 
@@ -81,29 +83,37 @@
 }
 
 .defaultHighlightedText {
-    background: @sapUiContentSearchHighlightColor;
-    font-weight: bold;
+	background: var(--sapContent_SearchHighlightColor);
+	font-weight: bold;
 }
 
 /* Enables sap.m.IBadge implementations where possible */
 
 @keyframes sapMBadgeAppearPulse {
+
 	0% {transform: scale(.9); opacity:1;}
+
 	100% {transform: scale(2);opacity: 0;}
 }
 
 @keyframes sapMBadgeAppearBounce {
+
 	0% {transform: scale(1);}
-	50% {transform: scale(1.4); }
+
+	50% {transform: scale(1.4);}
+
 	100% {transform: scale(1);}
 }
 
 @keyframes sapMBadgeDisappear {
+
 	0% {transform: scale(1);}
+
 	100% {transform: scale(0);}
 }
 
 @keyframes sapMBadgeUpdate {
+
 	0% {transform: scale(1);}
 
 	50% {transform: scale(1.2);}
@@ -111,49 +121,50 @@
 	100% {transform: scale(1);}
 }
 
-@_sap_m_Badge_AttentionBackgroundColor: @sapUiContentBadgeBackground;
 @keyframes sapMBadgeAppearMotionSmall {
+
 	0% {
-		transform: scale(0.33); // 0.125rem / 0.375rem
+		transform: scale(0.33); /* 0.125rem / 0.375rem */
 		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 	}
 
 	20% {
-		transform: scale(1.66); // 0.625rem / 0.375rem
+		transform: scale(1.66); /* 0.625rem / 0.375rem */
 	}
 
 	40% {
-		transform: scale(1.33); // 0.5rem / 0.375rem
-		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); // 0.875rem pulse layer
+		transform: scale(1.33); /* 0.5rem / 0.375rem */
+		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); /* 0.875rem pulse layer */
 	}
 
 	60% {
-		transform: scale(1); // 0.375rem
-		box-shadow: 0 0 0 0.3125rem fade(@_sap_m_Badge_AttentionBackgroundColor, 15%); // 1rem pulse layer
+		transform: scale(1); /* 0.375rem */
+		box-shadow: 0 0 0 0.3125rem fade(@_sap_m_Badge_AttentionBackgroundColor, 15%); /* 1rem pulse layer */
 	}
 
 	100% {
-		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); // 1.125rem pulse layer
+		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); /* 1.125rem pulse layer */
 	}
 }
 
 @keyframes sapMBadgeAppearMotion {
+
 	0% {
-		transform: scale(0.25); // 0.125rem / 0.5rem
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // required for Internet Explorer
+		transform: scale(0.25); /* 0.125rem / 0.5rem */
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* required for Internet Explorer */
 	}
 
 	20% {
-		transform: scale(1.25); // 0.625rem / 0.5rem
+		transform: scale(1.25); /* 0.625rem / 0.5rem */
 	}
 
 	40% {
-		transform: scale(1); // 0.5rem
-		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); // 0.875rem pulse layer
+		transform: scale(1); /* 0.5rem */
+		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); /* 0.875rem pulse layer */
 	}
 
 	100% {
-		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); // 1.125rem pulse layer
+		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); /* 1.125rem pulse layer */
 	}
 }
 
@@ -167,69 +178,65 @@
 		right: -0.25rem;
 		z-index: 100;
 		max-width: 100%;
-
 		padding-right: 0.125rem;
 		box-sizing: border-box;
 		height: 100%;
 		transform-origin: center center;
-
 		pointer-events: none;
 
-		&:after {
+		&::after {
 			border-radius: 1.125rem;
 			display: block;
-
 			padding: 0 0.3125rem;
 			min-width: 0.5rem;
 			height: 1.125rem;
 			line-height: 1.125rem;
-			font-size: @sapMFontSmallSize;
-			font-family: @sapUiFontFamily;
+			font-size: var(--sapFontSmallSize);
+			font-family: var(--sapFontFamily);
 			text-align: center;
-
-			background-color: @sapUiContentBadgeBackground;
-			border: 0.0625rem solid @sapUiContentBadgeBackground;
-			color: @sapUiContentBadgeTextColor;
-
+			background-color: var(--sapContent_BadgeBackground);
+			border: 0.0625rem solid var(--sapContent_BadgeBackground);
+			color: var(--sapContent_BadgeTextColor);
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
 
 			.badgeAccentColorMixin(10);
 		}
-		//We need one more pseudo-element, attached to the badge indicator, in order
-		//to show the pulse animation simultaneously with the bounce one.
-		&:before {
+
+		/* We need one more pseudo-element, attached to the badge indicator, in order */
+		/* to show the pulse animation simultaneously with the bounce one. */
+		&::before {
 			position: absolute;
 			border-radius: 1.125rem;
 			display: block;
-
 			padding: 0 0.3125rem;
 			min-width: 0.5rem;
 			height: 1.125rem;
 			line-height: 1.125rem;
-			font-size: @sapMFontSmallSize;
-			font-family: @sapUiFontFamily;
-
-			background-color: @sapUiContentBadgeBackground;
-			border: 0.0625rem solid @sapUiContentBadgeBackground;
-			color: @sapUiContentBadgeTextColor;
-
+			font-size: var(--sapFontSmallSize);
+			font-family: var(--sapFontFamily);
+			background-color: var(--sapContent_BadgeBackground);
+			border: 0.0625rem solid var(--sapContent_BadgeBackground);
+			color: var(--sapContent_BadgeTextColor);
 			text-overflow: ellipsis;
 			overflow: hidden;
 			opacity:0;
 
 			.badgeAccentColorMixin(10);
 		}
+
 		.sapMBadgeTopLeft& {
 			top: -0.125rem;
 			left: -0.25rem;
 			right: auto;
-		 }
+		}
+
 		.sapMBadgeTopRight& {
 			top: -0.125rem;
 			right: -0.25rem;
 		}
+
 		.sapMBadgeInline& {
 			left: 0;
 			right: 0;
@@ -244,41 +251,44 @@
 		right: -0.25rem;
 		width: 0.5rem;
 		height: 0.5rem;
-
 		border-radius: 1.125rem;
 		background-color: @_sap_m_Badge_AttentionBackgroundColor;
-		border: 0.125rem solid @sapUiObjectHeaderBackground;
+		border: 0.125rem solid var(--sapObjectHeader_Background);
 	}
 }
 
-.sapMBadgeIndicator.sapMBadgeDefault:after {
+.sapMBadgeIndicator.sapMBadgeDefault::after {
 	content: attr(data-badge);
 }
 
-.sapMBadgeIndicator.sapMBadgeDefault[data-badge=""]:after {
+.sapMBadgeIndicator.sapMBadgeDefault[data-badge='']::after {
 	display: none;
 }
 
 html[data-sap-ui-animation='on'] {
+
 	.sapMBadge.sapMBadgeAnimationTypeFull {
-		.sapMBadgeDefault.sapMBadgeAnimationAdd:after {
+
+		.sapMBadgeDefault.sapMBadgeAnimationAdd::after {
 			animation: sapMBadgeAppearBounce .1s;
 		}
 
-		.sapMBadgeDefault.sapMBadgeAnimationAdd:before {
+		.sapMBadgeDefault.sapMBadgeAnimationAdd::before {
 			content: attr(data-badge);
 			animation: sapMBadgeAppearPulse .2s;
 		}
 
 		.sapMBadgeAttention.sapMBadgeAnimationRemove,
-		.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+		.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
 			animation: sapMBadgeDisappear .1s;
 			animation-fill-mode: forwards;
 			transform-origin: center;
 		}
 	}
+
 	.sapMBadge:not(.sapMBadgeAnimationTypeNone) {
-		.sapMBadgeDefault.sapMBadgeAnimationUpdate:after {
+
+		.sapMBadgeDefault.sapMBadgeAnimationUpdate::after {
 			animation: sapMBadgeUpdate .1s;
 			animation-fill-mode: forwards;
 		}
@@ -286,8 +296,9 @@ html[data-sap-ui-animation='on'] {
 }
 
 html[data-sap-ui-animation='off'] {
+
 	.sapMBadgeAttention.sapMBadgeAnimationRemove,
-	.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+	.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
 		scale: 0;
 		opacity: 0;
 		display: none;
@@ -296,8 +307,9 @@ html[data-sap-ui-animation='off'] {
 
 .sapMBadgeAnimationTypeUpdate,
 .sapMBadgeAnimationTypeNone {
+
 	.sapMBadgeAttention.sapMBadgeAnimationRemove,
-	.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+	.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
 		scale: 0;
 		opacity: 0;
 		display: none;

package/src/sap/m/themes/sap_hcb/base_SearchField.less

@@ -204,11 +204,6 @@ input.sapMSFI[type="search"]:focus {
 	padding-right: 0.625rem;
 }
 
-/*Static search icon, needed for the Search Field in the Tool Header*/
-.sapMSFSSI {
-	display: none;
-}
-
 /* Suggestion Item Description */
 .sapMSFSItemDescr {
 	padding-inline-start: 0.5rem;

package/src/sap/m/themes/sap_hcb/base_Table.less

@@ -169,13 +169,12 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 .sapMListTblCell.sapMListTblCellNoData {
 	font-size: 1rem;
 	padding-top: .75rem;
+	padding-right: 1rem;
 	padding-bottom: .75rem;
-	line-height: 1.6;
 	border-bottom: 1px solid @sapUiListBorderColor;
-}
-
-.sapMListTblCell.sapMListTblCellNoData {
-	padding-right: 1rem;
+	&.sapMListTblCellNoIllustratedMessage {
+		line-height: 1.6;
+	}
 }
 
 .sapMListTblSelCol,
@@ -431,7 +430,7 @@ tr.sapMListTblHeaderNone > .sapMTableTH {
 		margin-right: @_sap_m_Table_CustomFocusMargin; // make the focus border clearly visible on all sides
 	}
 
-	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData,.sapMListTblDummyCell:last-child)::before {
+	.sapMListTblHasPopin > &:not(.sapMGHLI) > :not(.sapMListTblCellNoData,.sapMListTblDummyCell:last-child,.sapMListTblNavigatedCell)::before {
 		border-bottom: 0;
 		bottom: 0;
 	}

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -20,7 +20,7 @@ sap.ui.define(["sap/ui/core/Control"], function (Control) {
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.132.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -18,7 +18,7 @@ sap.ui.define(["sap/m/Column"], function (mColumn) {
 	 * @extends sap.m.Column
 	 *
 	 * @author SAP SE
-	 * @version 1.131.0
+	 * @version 1.132.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -16,8 +16,11 @@ sap.ui.define([
 	"sap/m/IllustratedMessageType",
 	"sap/m/Carousel",
 	"sap/base/Log",
-	"sap/ui/core/Lib"
-], function(Core, Element, HTML, Button, Image, PDFViewer, Dialog, IllustratedMessage, IllustratedMessageType, Carousel, Log, Library) {
+	"sap/ui/core/Lib",
+	"sap/m/VBox",
+	"sap/m/Bar",
+	"sap/m/Title"
+], function(Core, Element, HTML, Button, Image, PDFViewer, Dialog, IllustratedMessage, IllustratedMessageType, Carousel, Log, Library, VBox, Bar, Title) {
 	"use strict";
 
 	// get resource translation bundle;
@@ -67,7 +70,7 @@ sap.ui.define([
 	 * @constructor
 	 * @public
 	 * @since 1.120
-	 * @version 1.131.0
+	 * @version 1.132.0
 	 * @extends sap.ui.core.Element
 	 * @name sap.m.upload.FilePreviewDialog
 	 */
@@ -99,6 +102,8 @@ sap.ui.define([
 
 		_items: [],
 
+		_aCachedPageIndexs: [],
+
 		init: function () {
 			this._oRichTextEditor = null;
 			this._oDialog = null;
@@ -107,6 +112,15 @@ sap.ui.define([
 			this._oCarouselItems = null;
 		},
 
+		exit: function () {
+			this._oRichTextEditor = null;
+			this._oDialog = null;
+			this._oViewer = null;
+			this._oContentResource = null;
+			this._oCarouselItems = null;
+			this._aCachedPageIndexs = [];
+		},
+
 		/**
 		 * Opens the {@link sap.m.upload.FilePreviewDialog}.
 		 * @private
@@ -118,8 +132,9 @@ sap.ui.define([
 				if (!this._oDialog) {
 					this._oDialog = this._createDialog();
 				} else {
+					var oTitle = this._oDialog?.getCustomHeader()?.getContentLeft()[0];
 					// Sets the title of the dialog to the currently previewed item filename.
-					this._oDialog.setTitle(this._previewItem?.getFileName() || "");
+					oTitle?.setText(this._previewItem?.getFileName() || "");
 					// Removes all the existing content and set the new content on the dialog.
 					this._oDialog.removeAllContent();
 					this._oDialog.insertContent(this._oCarousel);
@@ -264,67 +279,30 @@ sap.ui.define([
 			const oPreviewItem = this._previewItem;
 			let aItems = this._oCarouselItems = !this.getShowCarouselArrows() ? [this._previewItem] : this._items;
 			let sActivePageId = "";
+			let oActivePage = null;
 			aItems = aItems?.filter((oItem) => oItem?.isA("sap.m.upload.UploadSetwithTableItem") || oItem?.isA("sap.m.upload.UploadItem"));
 			const aPagePromises = aItems.map(async (oItem) => {
-				const sMediaType = oItem.getMediaType();
-
-				const sFileName = oItem.getFileName();
-				let oPage = this._createIllustratedMessage(sFileName);
-
-				if (oItem.getPreviewable() && this.isFileSizeWithinMaxLimit(oItem)) {
-					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: {
-							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,
-								isTrustedSource: oItem?.getIsTrustedSource()
-							});
-							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;
-					}
+
+				let oPage = null;
+
+				if (oItem?.getId() === oPreviewItem.getId() && oItem.getPreviewable() && this.isFileSizeWithinMaxLimit(oItem)) {
+					const oPageContent  = await this.getPageContent(oItem);
+					oPage = this._getContainerControl(oPageContent);
+				} else {
+					const oPlaceHolderControl = this._getPlaceHolderControl(oItem);
+					oPage = this._getContainerControl(oPlaceHolderControl);
 				}
 
 				oPage = !this.isFileSizeWithinMaxLimit(oItem) ? this._getMaxSizePageIllustration(oItem) : oPage;
 
 				sActivePageId = oItem?.getId() === oPreviewItem?.getId() ? oPage?.getId() : sActivePageId;
 
+				oActivePage =  oItem?.getId() === oPreviewItem?.getId() ? oPage : oActivePage;
+
+				if (oItem?.getId() === oPreviewItem?.getId()) {
+					this._aCachedPageIndexs.push(this.get);
+				}
+
 				return oPage;
 			});
 
@@ -337,15 +315,34 @@ sap.ui.define([
 				],
 				activePage: sActivePageId,
 				height: "85vh",
-				pageChanged: (oEvent) => {
+				pageChanged: async (oEvent) => {
 					const iIndex = aPages.findIndex(function(oPage) {
 						return oPage.sId === oEvent.getParameter("newActivePageId");
 					});
+					const oTargetPage = oCarousel.getPages()[iIndex];
+					// if the page is not cached, load the content and cache it.
+					if (!this._aCachedPageIndexs.includes(iIndex)) {
+						const oControl = await this.getPageContent(aItems[iIndex], aPages[iIndex]);
+						oTargetPage.removeAllItems();
+						oTargetPage.addItem(oControl);
+						this._aCachedPageIndexs.push(iIndex);
+					 }
+					// oCarousel.setActivePage(oTargetPage);
+
 					const sNewDialogTitle = aItems[iIndex].getFileName();
-					this._oDialog.setTitle(sNewDialogTitle);
+
+					var oTitle = this._oDialog?.getCustomHeader()?.getContentLeft()[0];
+					oTitle?.setText(sNewDialogTitle);
 				}
 			});
 
+			if (oActivePage && sActivePageId) {
+				const sActivePageIndex = oCarousel?.indexOfPage(oActivePage);
+				if (sActivePageIndex > -1) {
+					this._aCachedPageIndexs?.push(sActivePageIndex);
+				}
+			}
+
 			// prevent all swipe related events so carousel movement is disabled.
 			if (!this.getShowCarouselArrows()) {
 				oCarousel.ontouchstart = oCarousel.ontouchmove = oCarousel.ontouchend = (oEvent) => {
@@ -356,6 +353,83 @@ sap.ui.define([
 			return oCarousel;
 		},
 
+		getPageContent: async function(oItem, oNewPage) {
+
+			const sMediaType = oItem.getMediaType();
+
+			let oPage = this._createIllustratedMessage(oItem.getFileName());
+
+			switch (sMediaType?.toLowerCase()) {
+				case PreviewableMediaType.Png:
+				case PreviewableMediaType.Bmp:
+				case PreviewableMediaType.Jpeg:
+				case PreviewableMediaType.Gif: {
+					const oPage = new Image({
+						src: oItem.getUrl()
+					});
+
+					return oPage;
+				}
+				case PreviewableMediaType.Txt: {
+					const oRte = await this._createRichTextEditor(oItem);
+					if (oRte) {
+						oPage = oRte;
+					}
+					return oPage;
+				}
+				case PreviewableMediaType.Pdf:
+				case PreviewableMediaType.ChromePdf: {
+					oPage = new PDFViewer({
+						source: oItem.getUrl(),
+						showDownloadButton: false,
+						isTrustedSource: oItem?.getIsTrustedSource()
+					});
+					oPage.setBusy(true);
+					return oPage;
+				}
+				case PreviewableMediaType.Mpeg:
+				case PreviewableMediaType.Mp4:
+				case PreviewableMediaType.Quicktime:
+				case PreviewableMediaType.MsVideo: {
+					const oPage = new HTML({
+						content: `<video controls width='100%' height='100%' src=${oItem.getUrl()}>`
+					});
+					return oPage;
+				}
+				case PreviewableMediaType.Tiff:
+				case PreviewableMediaType.Vds: {
+					const oVdsViewer = await this._createVdsViewer(oItem);
+					if (oVdsViewer) {
+						oPage = oVdsViewer;
+						return oPage;
+					}
+					break;
+				}
+				default:
+					return oPage;
+			}
+
+			return oPage;
+		},
+
+		_getPlaceHolderControl: function(oItem) {
+			return this._createIllustratedMessage(oItem.getFileName());
+		},
+
+		_getContainerControl: function(oItem) {
+			const oContainer = new VBox({
+				items: [
+					oItem
+				],
+				fitContainer: true,
+				alignItems: "Center",
+				justifyContent: "Center",
+				alignContent: "Center",
+				renderType: "Bare"
+			});
+			return oContainer;
+		},
+
 		/**
 		 * 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.
@@ -364,7 +438,9 @@ sap.ui.define([
 		_createDialog: function() {
 			const oActiveItem = this._getActiveUploadSetwithTableItem();
 			const oDialog = new Dialog({
-				title: oActiveItem.getFileName(),
+				customHeader: new Bar({
+					contentLeft: [new Title({ text:  oActiveItem.getFileName()}).addStyleClass("sapMDialogTitle")]
+				}),
 				content: this._oCarousel,
 				horizontalScrolling: false,
 				verticalScrolling: false,
@@ -381,7 +457,9 @@ sap.ui.define([
 					new Button({
 						text: oLibraryResourceBundle.getText("UPLOAD_SET_TABLE_FILE_PREVIEW_DIALOG_CLOSE"),
 						press: () => {
+							this._oCarousel.destroyPages();
 							this._oDialog.close();
+							this._aCachedPageIndexs = [];
 						}
 					})
 				]
@@ -421,7 +499,7 @@ sap.ui.define([
 			const oIllustratedMessage = new IllustratedMessage({
 				illustrationType: IllustratedMessageType.NoData,
 				title: oItem?.getFileName(),
-				description: oLibraryResourceBundle.getText("FILE_PREVIEW_DIALOG_MAX_PREVIEW_SIZE_EXCEEDED", this.getMaxFileSizeforPreview()),
+				description: oLibraryResourceBundle.getText("FILE_PREVIEW_DIALOG_MAX_PREVIEW_SIZE_EXCEEDED", [this.getMaxFileSizeforPreview()]),
 				enableVerticalResponsiveness: true
 			});
 			return oIllustratedMessage;

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */