@sapui5/sap.suite.ui.generic.template 1.152.1 → 1.154.0

package/src/sap/suite/ui/generic/template/themes/base/ObjectPage.less

@@ -270,6 +270,15 @@ html[dir='rtl'] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
 	padding-right: 0;
 }
 
+/* When a table is the only control in a sub-section, remove the excess padding added by the sub-section container */
+.sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+	margin: -0.5rem -1rem;
+}
+
+html[dir='rtl'] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+	margin: -0.5rem 0 -0.5rem -1rem;
+}
+
 .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSection .sapSmartTemplatesObjectPageSubSectionDummyBlock {
 	width: 1px;
 	margin: 0;
@@ -405,9 +414,265 @@ html[dir='rtl'] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
 
 	.sapSmartTemplatesObjectPageEasyFillInputArea {
 		margin-right: 2rem;
+		height: 100%;
+
+		// Inner column flex fills the pane so the ObjectPageLayout (sole visible child
+		// once a file is loaded) can resolve its height: 100% and scroll internally.
+		.sapSmartTemplatesObjectPageEasyFillInputAreaFlex {
+			height: 100%;
+			min-height: 0;
+		}
+
+		// Attachment + preview ObjectPageLayout: fill the flex container and keep the
+		// header sticky while only the preview section scrolls. sapUxAPObjectPageWrapper
+		// is an internal sap.uxap.ObjectPageLayout class; height: 0 forces the wrapper to
+		// shrink to its flex parent instead of growing to content height (mirrors V4
+		// EasyFill.less: #sapFeEasyFillObjectPageLayout > .sapUxAPObjectPageWrapper).
+		.sapSmartTemplatesObjectPageEasyFillInputObjectPage {
+			flex: 1 1 auto;
+			min-height: 0;
+
+			> .sapUxAPObjectPageWrapper {
+				height: 0;
+			}
+
+			// The header content is an empty VBox used only to surface the built-in
+			// collapse/expand chevron; hide its (empty) details area so it takes no
+			// space when collapsed (mirrors V4 EasyFill.less sapUxAPObjectPageHeaderDetailsHidden).
+			.sapUxAPObjectPageHeaderDetailsHidden {
+				display: none;
+			}
+		}
 
 		.sapSmartTemplatesObjectPageEasyFillInputAreaLabel {
 			margin-top: 1rem;
+			// Separate the description from the textarea now that the input-area column
+			// no longer uses a uniform gap (mirrors V4 description sapUiSmallMarginBottom).
+			// Overridden by sapUiTinyMarginBottom on the file-loaded header copy.
+			margin-bottom: 1rem;
+		}
+
+		// Input container: provides the visual border; TextArea fills the height via VBox flex column; button sits at the bottom
+		.sapSmartTemplatesObjectPageEasyFillInputContainer {
+			border: 1px solid var(--sapField_BorderColor);
+			border-radius: var(--sapField_BorderCornerRadius);
+			overflow: hidden;
+			position: relative;
+
+			// On focus, recolour the container border instead of showing the TextArea's
+			// own focus ring, so the whole field reads as one focused control
+			// (mirrors V4 sapFeEasyFillInputContainer:has(.sapFeEasyFillTextInput.sapMFocus)).
+			&:has(.sapMTextArea.sapMFocus) {
+				border-color: var(--sapField_Active_BorderColor);
+			}
+
+			// Drop overlay: absolute, covers the entire container, pointer-events:none so it never blocks clicks
+			.sapSmartTemplatesObjectPageEasyFillDropOverlay {
+				position: absolute;
+				inset: 0;
+				border: 0.125rem dashed var(--sapButton_Emphasized_Background);
+				border-radius: var(--sapField_BorderCornerRadius);
+				background-color: var(--sapList_SelectionBackgroundColor);
+				pointer-events: none;
+
+				.sapSmartTemplatesObjectPageEasyFillDropBadge {
+					width: 2.5rem;
+					height: 2.5rem;
+					border-radius: 50%;
+					background-color: var(--sapButton_Emphasized_Background);
+
+					.sapSmartTemplatesObjectPageEasyFillDropBadgeIcon {
+						color: var(--sapButton_Emphasized_TextColor);
+						font-size: 1rem;
+					}
+				}
+			}
+
+			// Blocked state (file already loaded): indicate drop is not allowed
+			&.sapSmartTemplatesObjectPageEasyFillInputContainerDropDisabled {
+				cursor: not-allowed;
+
+				.sapSmartTemplatesObjectPageEasyFillDropOverlay {
+					border-color: var(--sapField_BorderColor);
+					background-color: var(--sapObjectHeader_Background);
+
+					.sapSmartTemplatesObjectPageEasyFillDropBadge {
+						background-color: var(--sapContent_DisabledColor);
+					}
+				}
+			}
+
+			// Suppress the TextArea's own border/background/shadow and its focus outline
+			// so the container border is the only visual frame (mirrors V4 sapFeEasyFillTextInput).
+			.sapMTextArea {
+				.sapMInputBaseContentWrapper {
+					border: none;
+					background: none !important;
+					box-shadow: none !important;
+				}
+
+				&.sapMFocus .sapMInputBaseContentWrapper::before {
+					display: none;
+				}
+			}
+
+			// Browse-folder button: pushed to the bottom of the flex column (margin-top:auto)
+			.sapSmartTemplatesObjectPageEasyFillPickerArea {
+				margin-top: auto;
+				padding: 0.25rem 0.25rem 0.25rem 0;
+			}
+		}
+
+		// Attachment label: dim text above the tile
+		.sapSmartTemplatesObjectPageEasyFillAttachmentLabel {
+			font-family: var(--sapFontFamily);
+			opacity: 0.4;
+			font-style: normal;
+			font-size: var(--sapFontSize);
+			line-height: 1;
+			letter-spacing: 0;
+		}
+
+		// Imported File heading (header title): column of label + tile/buttons row
+		.sapSmartTemplatesObjectPageEasyFillHeaderHeading {
+			gap: 0.5rem;
+		}
+
+		// Tile + action buttons row (justifyContent SpaceBetween): the content-sized tile
+		// sits on the left, the buttons keep their size on the right, and both wrap to a new
+		// line only when the header is too narrow to hold them side by side (responsive).
+		.sapSmartTemplatesObjectPageEasyFillHeaderRow {
+			gap: 0.5rem;
+
+			.sapSmartTemplatesObjectPageEasyFillAttachmentActions {
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+				flex-shrink: 0;
+			}
+		}
+
+		// Attachment tile: file name + size. Content-sized (like V4's attachment HBox) so
+		// it packs the icon, info and remove button tightly on the left and leaves room for
+		// the action buttons beside it; min-width:0 lets a long file name ellipsize instead
+		// of forcing the buttons onto a second line.
+		.sapSmartTemplatesObjectPageEasyFillAttachmentArea {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			min-width: 0;
+
+			// Attachment icon circle: a sap.m.Avatar (Square, Accent7) provides its own
+			// 2.5rem size, square shape, accent background and icon colour (mirrors V4).
+			.sapSmartTemplatesObjectPageEasyFillAttachmentIconCircle {
+				flex-shrink: 0;
+				border-radius: 0.5rem;
+			}
+
+			.sapSmartTemplatesObjectPageEasyFillAttachmentInfo {
+				min-width: 0;
+				overflow: hidden;
+			}
+
+			.sapSmartTemplatesObjectPageEasyFillAttachmentName {
+				font-size: var(--sapFontSmallSize);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.sapSmartTemplatesObjectPageEasyFillAttachmentSize {
+				color: var(--sapContent_LabelColor);
+				font-size: var(--sapFontSmallSize);
+			}
+
+			// Decline button to remove the imported file tile
+			.sapSmartTemplatesObjectPageEasyFillAttachmentRemoveButton {
+				flex-shrink: 0;
+
+				.sapUiIcon {
+					color: var(--sapHighlightColor);
+				}
+			}
+
+			// Progress area: shown while upload is in progress
+			.sapSmartTemplatesObjectPageEasyFillAttachmentProgressArea {
+				flex: 1;
+				min-width: 0;
+
+				.sapSmartTemplatesObjectPageEasyFillAttachmentProgressHeader {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+				}
+
+				.sapSmartTemplatesObjectPageEasyFillAttachmentPercentage {
+					font-size: var(--sapFontSmallSize);
+					color: var(--sapContent_LabelColor);
+					white-space: nowrap;
+					flex-shrink: 0;
+					margin-left: 0.25rem;
+				}
+			}
+
+			// Slim progress bar: no default background, teal fill, 5px height
+			.sapSmartTemplatesObjectPageEasyFillAttachmentProgress {
+				width: 100%;
+				background-color: transparent !important;
+				border: none !important;
+
+				.sapMPIBar {
+					height: 5px;
+					border-radius: 2px;
+					background-color: transparent;
+				}
+
+				.sapMPIBarRemaining {
+					display: none;
+				}
+
+				.sapMPIBarPositive,
+				.sapMPIBarNeutral,
+				.sapMPIBarNegative,
+				.sapMPIBarCritical {
+					background-color: var(--sapHighlightColor);
+					border-radius: 2px;
+				}
+			}
+		}
+
+		// Character counter below the textarea: right-aligned, muted helper text
+		.sapSmartTemplatesObjectPageEasyFillRemainingCharsText {
+			font-size: var(--sapFontSmallSize);
+			color: var(--sapContent_LabelColor);
+			display: block;
+			text-align: end;
+			margin-top: 0.25rem;
+			// Tight spacing to the action buttons, matching V4 counter sapUiTinyMarginBottom
+			// (the input-area column no longer applies a uniform gap).
+			margin-bottom: 0.5rem;
+		}
+
+		// File preview content inside the ObjectPageSubSection block
+		.sapSmartTemplatesObjectPageEasyFillFilePreviewContent {
+			padding: 0.5rem;
+		}
+
+		.sapSmartTemplatesObjectPageEasyFillFilePreviewText {
+			font-family: var(--sapFontFamily);
+			font-size: var(--sapFontSize);
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		.sapSmartTemplatesObjectPageEasyFillFilePreviewTable {
+			border: 1px solid var(--sapList_BorderColor);
+			border-radius: 0.25rem;
+			width: 100%;
+
+			.sapMListTblCell {
+				padding: 0.5rem;
+			}
 		}
 	}
 
@@ -474,6 +739,12 @@ html[dir='rtl'] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
                 	background-color: var(--sapField_WarningBackground) !important;
 		}
 
+		/* Excluded rows: greyed out and non-interactive */
+		.sapEasyFillExcludedRow {
+			opacity: 0.4;
+			pointer-events: none;
+		}
+
 		/* For Easy Fill SmartForm read-only fields, keep read-only semantics but show input-like shell */
 		.sapUiEasyFillReadOnlyInputLike {
 			background: var(--sapField_ReadOnly_BackgroundStyle) !important;

package/src/sap/suite/ui/generic/template/themes/sap_belize_base/ObjectPage.less

@@ -272,6 +272,15 @@ html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
   padding-right: 0;
 }
 
+/* When a table is the only control in a sub-section, remove the excess padding added by the sub-section container */
+.sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem -1rem;
+}
+
+html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem 0 -0.5rem -1rem;
+}
+
 .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSection .sapSmartTemplatesObjectPageSubSectionDummyBlock {
 	width: 1px;
     margin: 0px;

package/src/sap/suite/ui/generic/template/themes/sap_bluecrystal_base/ObjectPage.less

@@ -272,6 +272,15 @@ html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
   padding-right: 0;
 }
 
+/* When a table is the only control in a sub-section, remove the excess padding added by the sub-section container */
+.sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem -1rem;
+}
+
+html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem 0 -0.5rem -1rem;
+}
+
 .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSection .sapSmartTemplatesObjectPageSubSectionDummyBlock {
 	width: 1px;
     margin: 0px;

package/src/sap/suite/ui/generic/template/themes/sap_hcb/base_ObjectPage.less

@@ -272,6 +272,15 @@ html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSect
   padding-right: 0;
 }
 
+/* When a table is the only control in a sub-section, remove the excess padding added by the sub-section container */
+.sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem -1rem;
+}
+
+html[dir="rtl"] .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSectionGrid > div:only-child > .sapUiCompSmartTable:only-child {
+  margin: -0.5rem 0 -0.5rem -1rem;
+}
+
 .sapSmartTemplatesObjectPage .sapSmartTemplatesObjectPageSubSection .sapSmartTemplatesObjectPageSubSectionDummyBlock {
 	width: 1px;
     margin: 0px;