@openui5/sap.ui.integration 1.125.0 → 1.126.1

package/src/sap/ui/integration/themes/sap_hcb/base_CalendarContent.less

@@ -0,0 +1,247 @@
+/* =========================================================== */
+/* CSS for control sap.ui.integration.controls/CalendarContent */
+/* Base theme                                                  */
+/* =========================================================== */
+
+.sapFCardCalendarContent .sapFCalCard {
+	padding: 1rem;
+	.sapUiCal:not(.sapUiCalInt) {
+		width: 100%;
+		padding: 0;
+		min-height: 16.5rem;
+		min-width: 16.5rem;
+	}
+	.sapUiCalMonthPicker,
+	.sapUiCalYearPicker {
+		left: 0;
+		margin-left: 0;
+	}
+	.sapUiCal .sapUiCalMonthView {
+		padding: 0;
+	}
+
+	.sapUiCalendarAppContainer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		box-sizing: border-box;
+		padding-right: 0;
+	}
+
+	.sapFCalCardLineSeparator {
+		border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
+		margin-bottom: 1rem;
+	}
+
+	.sapUiCalendarAppContainer > .sapUiCalendarAppContainerLeft {
+		padding: 0;
+		width: 15%;
+		margin: 0 0.75rem 0 0;
+		.sapUiCalendarAppStart {
+			font-size: @sapMFontMediumSize;
+			color: @sapUiBaseText;
+			text-align: right;
+		}
+		.sapUiCalendarAppEnd {
+			font-size: @sapMFontSmallSize;
+			color: @sapUiContentLabelColor;
+			margin-top: 0.25rem;
+			text-align: right;
+		}
+	}
+	.sapUiCalendarAppContainer > .sapUiCalendarAppContainerRight {
+		flex: 1 1 auto;
+		margin-right: 0;
+		width: 70%;
+	}
+
+	.sapFCalCardRightSide {
+		display: flex;
+		flex-direction: column;
+		.sapFCalCardAppList{
+			width: 100%
+		}
+		.sapMBtn {
+			align-self: center;
+		}
+	}
+
+	.sapUiCalendarAppContainer.sapUiCalendarAppCurrent > .sapUiCalendarAppContainerRight {
+		position: relative;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			border: 2px solid @sapUiLegendCurrentDateTime;
+			border-radius: 4px;
+			top: -4px;
+			left: -4px;
+			bottom: -4px;
+			right: -4px;
+			pointer-events: none;
+		}
+	}
+
+	.sapUiCalendarAppContainer > .sapUiCalendarAppContainerRight > .sapUiCalendarApp {
+		margin: 0;
+	}
+	.sapUiCalLegMoreText {
+		font-size: @sapMFontMediumSize;
+		color: @sapUiLinkActive;
+		margin-left: 0.25rem;
+		&>.sapUiUnifiedLegendSquare {
+			display: none;
+		}
+	}
+
+	.sapFCalCardNoItemsText {
+		line-height: 2rem;
+		text-align: center;
+		font-size: 0.9rem;
+	}
+
+	.sapUiUnifiedLegend {
+		padding: 1rem 0.5rem;
+	}
+
+	.sapUiCalendarAppContainer > .sapUiCalendarAppContainerRight > .sapUiCalendarApp:not(.sapUiCalendarAppDisabled):active {
+		.sapUiCalendarAppCont {
+			.sapUiCalendarAppIcon:before,
+			.sapUiCalendarAppTitleWrapper .sapUiCalendarAppTitle,
+			.sapUiCalendarAppTitleWrapper .sapUiCalendarAppText{
+				color: @sapUiContentSelectedTextColor;
+			}
+		}
+	}
+
+	.sapUiCalendarApp.sapUiCalendarAppDisabled.sapUiCalendarAppSel,
+	.sapUiCalendarApp.sapUiCalendarAppDisabled:active,
+	.sapUiCalendarApp.sapUiCalendarAppDisabled.sapUiCalendarAppSel:active{
+		color: transparent;
+		background-color: transparent;
+	}
+
+	.sapUiCalendarApp.sapUiCalendarAppDisabled {
+		 cursor: auto;
+	}
+}
+
+.sapUiSizeCompact {
+	.sapFCardCalendarContent .sapFCalCard {
+		.sapUiCalMonthPicker,
+		.sapUiCalYearPicker {
+			left: 0;
+			margin-left: 0;
+		}
+	}
+}
+
+.sapFCalCard .sapMTBStandard {
+	border-bottom: none;
+}
+
+.sapFCalCard .sapUiCalendarAppCont {
+	height: 100%;
+	display: flex;
+}
+
+// center vertically if it is title-only or text-only appointment
+.sapFCalCard .sapUiCalendarAppOneLine {
+	.sapUiCalendarAppIcon,
+	.sapUiCalendarAppTitle,
+	.sapUiCalendarAppText {
+		height: 3rem;
+		line-height: 3rem;
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	.sapUiCalendarAppIcon {
+		top: 0;
+	}
+}
+
+/* ======================================= */
+/* Two columns                             */
+/* ======================================= */
+
+.sapFCardCalendarContent.sapMPCInCardTwoColumns {
+	.sapFCalCardLayout {
+		display: flex;
+	}
+
+	.sapFCalCardLineSeparator {
+		display: none;
+	}
+	.sapFCalCardLeftSide,
+	.sapFCalCardRightSide {
+		width: 50%;
+	}
+
+	.sapFCalCardRightSide {
+		display: flex;
+		flex-direction: column;
+		.sapFCalCardAppList{
+			width: 100%
+		}
+		.sapMBtn {
+			align-self: center;
+		}
+	}
+
+	// visualize the start and end on top of the appointment content
+	.sapUiCalendarAppContainer {
+		flex-direction: column;
+
+		.sapUiCalendarAppContainerLeft {
+			width: 100%;
+			margin: 0;
+			padding: 0 0 0.0625rem 0;
+
+			.sapUiCalendarAppStart,
+			.sapUiCalendarAppEnd {
+				display: inline-block;
+				margin: 0;
+				padding: 0;
+			}
+
+			.sapUiCalendarAppEnd {
+				margin-left: 0.25rem;
+			}
+		}
+
+		.sapUiCalendarAppContainerRight {
+			width: 100%;
+		}
+	}
+}
+
+// adjust calendar card on small screen sizes (phone) or higner zoom factor
+html.sapUiMedia-Std-Phone,
+html.sapUiMedia-StdExt-Phone {
+	.sapFCardCalendarContent .sapFCalCard {
+		padding: 1rem 0.375rem;
+		.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
+			margin-left: 0.125rem;
+		}
+	}
+}
+
+html.sapUiMedia-Std-Tablet,
+html.sapUiMedia-StdExt-Tablet {
+	.sapFCardCalendarContent .sapFCalCard {
+		.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
+			margin-left: 0.25rem;
+		}
+	}
+}
+
+.sapFCardCalendarContent .sapFCalCard {
+	.sapUiCalMonthPicker,
+	.sapUiCalYearPicker {
+		width: auto;
+	}
+}
+
+

package/src/sap/ui/integration/themes/sap_hcb/base_Card.less

@@ -0,0 +1,77 @@
+/* =============================================== */
+/* CSS for control sap.ui.integration.widgets/Card */
+/* Base theme                                      */
+/* ================================================*/
+
+.sapUiIntCard {
+	min-height: 5rem;
+}
+
+.sapUiIntCardDialog {
+	.sapMDialogSection,
+	.sapMDialogScroll,
+	.sapMDialogScrollCont,
+	.sapUiIntCard {
+		/* allows scrolling inside the card content instead of dialog content */
+		max-height: inherit;
+	}
+
+	.sapUiIntCard {
+		border-radius: @sapUiElementBorderCornerRadius;
+
+		.sapFCardHeader {
+			box-shadow: @sapUiContentHeaderShadow;
+		}
+
+		&:has(.sapFCardFilterBar) .sapFCardHeader {
+			box-shadow: unset;
+		}
+
+		.sapFCardFilterBar {
+			border-bottom: none;
+			box-shadow: @sapUiContentHeaderShadow;
+		}
+
+		.sapFCardContent {
+			overflow: auto;
+		}
+
+		.sapFCardObjectContent>.sapMVBox {
+			padding-bottom: 1rem;
+		}
+
+		.sapFCardFooter {
+			border-top: 1px solid @sapUiPageFooterBorderColor;
+			padding-top: 0.25rem;
+   			padding-bottom: 0.25rem;
+		}
+	}
+
+	&.sapMDialog:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding) .sapMDialogScroll {
+		padding-bottom: 0px;
+		padding-top: 0px;
+	}
+}
+
+.sapFCard.sapUiIntCardWithFooter .sapFCardContent {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.sapFCard.sapUiIntCardStandard .sapFCardHeaderBanner {
+	/* the banner feature is not yet available for standard card variant */
+	display: none!important;
+}
+
+.sapUiIntCardCustomImage {
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center center;
+	position: absolute;
+}
+
+.sapMIllustratedMessageMainContent:has(.sapUiIntCardCustomImage) svg {
+	visibility: hidden;
+}
+
+

package/src/sap/ui/integration/themes/{base/CardTileVariant.less → sap_hcb/base_CardVariants.less}

@@ -145,9 +145,93 @@
 	.sapFCardHeader .sapFCardNumericIndicatorsSide {
 		display: none;
 	}
+	.sapFCardHeader .sapUiIntMicrochartChartWrapper {
+		display: none;
+	}
+}
+.sapFCard.sapUiIntCardSmallHeader,
+.sapFCard.sapUiIntCardTileFlatWide {
+
+	.sapFCardHeader .sapFCardNumericIndicatorsSide {
+		flex-wrap: nowrap;
+	}
+	.sapFCardHeader.sapFCardNumericHeaderSIMC .sapFCardNumericIndicatorsSide {
+		display: none;
+	}
+	.sapFCardHeader .sapUiIntMicrochartChartWrapper .sapUiIntMicrochartChart {
+		max-height: 2.2rem;
+		min-height: 2rem;
+	}
+	.sapFCardHeader .sapUiIntMicrochartChartWrapper .sapUiIntMicrochartChart .sapUiIntMicrochartChartInner {
+		height: 2rem;
+	}
+	.sapMNCValue.WithoutMargin {
+		justify-content: start;
+	}
+}
+
+.sapFCard.sapUiIntCardTileStandardWide .sapFCardNumericHeader {
+	&.sapFCardHeader .sapFCardNumericIndicatorsSide {
+		flex-wrap: nowrap;
+	}
+	&.sapFCardNumericHeaderSIMC .sapUiIntMicrochartChartWrapper {
+		position: absolute;
+    	top: 2.5rem;
+   		right: 1rem;
+		width: 38%;
+	}
+	&.sapFCardNumericHeaderSIMC .sapFCardHeaderText {
+		max-width: 58%;
+	}
+
+	&.sapFCardNumericHeaderMC .sapFCardAvatarAndIndicatorsLine .sapUiIntMicrochartChartWrapper {
+    	margin-top: -0.5rem;
+	}
 }
 
 .sapFCard.sapUiIntCardTileFlat .sapFCardHeaderBanner {
 	/* there is no space for banner in 2x1 tile */
 	display: none;
 }
+
+.sapFCard.sapUiIntCardStandard .sapFCardHeaderBanner {
+	/* the banner feature is not yet available for standard card variant */
+	display: none!important;
+}
+
+.sapFCard.sapUiIntCardCompactHeader {
+	height: 3rem;
+	min-height: 3rem;
+
+	.sapFCardHeader {
+		padding: 0.5rem 0.75rem;
+
+		.sapFCardIcon.sapFAvatar {
+			height: 1.9rem;
+			width: 1.9rem;
+			font-size: 0.9rem;
+			letter-spacing: -1px;
+			&.sapFAvatarColorTransparent .sapUiIcon {
+				font-size: 1.25rem;
+			}
+		}
+		.sapFCardHeaderText {
+			height: 2rem;
+		}
+		.sapFCardHeaderTextSecondLine {
+			display: inline-block;
+			margin-top: 0;
+		}
+
+		.sapFCardHeaderToolbarCont .sapFCardHeaderToolbar {
+			margin: -0.4rem 0 -0.25rem -1.8rem;
+			height: 2rem;
+		}
+	}
+}
+
+.sapUiSizeCompact .sapFCard.sapUiIntCardCompactHeader {
+	.sapFCardHeaderToolbarCont {
+		padding-top: 0.25rem;
+	}
+}

package/src/sap/ui/integration/themes/sap_hcb/base_CustomElementBase.less

@@ -0,0 +1,14 @@
+/* ======================================== */
+/* CSS for control sap.ui.integration/Base  */
+/* Base theme                               */
+/* ======================================== */
+
+ui-integration-card {
+	display: inline-block;
+	width: 100%;
+
+	& > div[data-sap-ui-area] {
+		height: 100%;
+		width: 100%;
+	}
+}

package/src/sap/ui/integration/themes/sap_hcb/base_CustomElementCard.less

@@ -0,0 +1,10 @@
+/* ======================================== */
+/* CSS for control sap.ui.integration/Card  */
+/* Base theme                               */
+/* ======================================== */
+
+ui-integration-card {
+	.sapFCard {
+		height: 100%;
+	}
+}

package/src/sap/ui/integration/themes/sap_hcb/base_Footer.less

@@ -0,0 +1,10 @@
+/* ====================================================== */
+/* CSS for control sap.ui.integration.cards/Footer */
+/* Base theme                                             */
+/* ====================================================== */
+
+.sapFCardFooter {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}

package/src/sap/ui/integration/themes/sap_hcb/base_ImageWithOverlay.less

@@ -0,0 +1,69 @@
+/* ============================================================ */
+/* CSS for control sap.ui.integration.controls/ImageWithOverlay */
+/* Base theme                                                   */
+/* ============================================================ */
+
+.sapUiIntImageWithOverlay {
+	display: flex;
+
+	.sapUiIntImgWithOverlayImg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.sapUiIntImgWithOverlayLayout {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 1rem;
+		height: 100%;
+		opacity: 0;
+
+		.sapMText {
+			line-height: 1.5rem;
+
+			&.sapUiIntImgWithOverlayTitle {
+				font-size:  1.75rem;
+				line-height: 1.75rem;
+				font-weight: 900;
+			}
+		}
+	}
+
+	&.sapUiIntImageWithOverlayPaddingMediumStart .sapUiIntImgWithOverlayLayout {
+		padding-inline-start: @sapUiMarginMedium;
+	}
+}
+
+.sapFCardObjectGroup {
+	.sapUiIntImageWithOverlay.sapFCardObjectImageFullWidth.sapFCardObjectImage:only-child {
+		height:  ~"calc(100% + 32px)";
+	}
+
+	.sapUiIntImageWithOverlay:not(.sapFCardObjectImageFullWidth):only-child .sapUiIntImgWithOverlayImg {
+		max-height: 100%;
+	}
+}
+
+.sapUiIntImgWithOverlayLoaded .sapUiIntImgWithOverlayLayout {
+	animation: sapUiInImgWithOverlayFadeInAnimation ease 1s;
+	animation-iteration-count: 1;
+	animation-fill-mode: forwards;
+	animation-delay: 500ms;
+}
+
+@keyframes sapUiInImgWithOverlayFadeInAnimation {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+.sapUiIntImageWithOverlay.sapUiIntImgWithOverlayNoAnimation .sapUiIntImgWithOverlayLayout {
+	opacity: 1;
+}

package/src/sap/ui/integration/themes/sap_hcb/base_LinkWithIcon.less

@@ -0,0 +1,11 @@
+/* =========================================================== */
+/* CSS for control sap.ui.integration.controls/LinkWithIcon */
+/* Base theme												  */
+/* =========================================================== */
+
+.sapUiIntCardLinkWithIcon.sapMLnk>.sapUiIcon {
+	cursor: inherit;
+	margin-right: 0.5rem;
+	line-height: 1rem;
+	vertical-align: text-bottom;
+}

package/src/sap/ui/integration/themes/sap_hcb/base_ListContentItem.less

@@ -0,0 +1,164 @@
+/* =========================================================== */
+/* CSS for control sap.ui.integration.controls/ListContentItem */
+/* Base theme                                                  */
+/* =========================================================== */
+
+@_sap_ui_integration_ListContentItem_BottomBorderHeight: 1px;
+@_sap_ui_integration_ListContentItem_TextShadow: 0 0 @sapUiListTextColor;
+
+.sapUiIntLCI {
+	padding: unset;
+
+	// apply the padding to the contents, to prevent clipping when buttons are hovered for example, due to overflow
+	.sapUiIntLCIContent > * {
+		padding: 0 1rem;
+	}
+
+	&.sapUiIntLCIOneLine .sapUiIntLCIIconAndLines {
+		height: calc(2.75rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+		align-items: center
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 2.75rem;
+	}
+
+	&.sapUiIntLCITwoLines .sapUiIntLCIIconAndLines,
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail .sapUiIntLCIIconAndLines {
+		height: calc(5rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+		align-items: center
+	}
+
+	&.sapUiIntLCITwoLines.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines,
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 5rem;
+	}
+
+	&.sapUiIntLCIMultipleLines {
+		padding-top: 1rem;
+		padding-bottom: calc(1rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+
+		.sapUiIntActionsStrip {
+			margin-top: 0.5rem;
+		}
+	}
+
+	&.sapUiIntLCITwoLines,
+	&.sapUiIntLCIMultipleLines {
+		.sapUiIntLCITitleWrapper {
+			margin-bottom: 0.25rem;
+		}
+	}
+
+
+	&.sapUiIntLCIWithActionsStrip {
+		padding-bottom: calc(0.5rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+	}
+
+	.sapUiIntLCIIconAndLines {
+		display: flex;
+
+		> .sapFCardIcon {
+			flex-shrink: 0;
+		}
+
+		.sapUiIntLCILines {
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			row-gap: 0.5rem;
+			justify-content: center;
+
+			.sapUiIntLCIAttrRow {
+				display: flex;
+				align-items: center;
+			}
+
+			.sapUiIntLCIAttrSecondCell {
+				justify-content: flex-end;
+
+				.sapMObjStatus {
+					text-align: end;
+				}
+			}
+
+			.sapUiIntLCIAttrCell {
+				flex: 1;
+				display: flex;
+				align-items: center;
+			}
+
+			.sapMObjStatusNone .sapMObjStatusText {
+				color: @sapUiContentLabelColor;
+			}
+		}
+	}
+
+	.sapUiIntLCITitleWrapper,
+	.sapUiIntLCIDescriptionWrapper {
+		display: flex;
+	}
+
+	&.sapMLIBShowSeparator:last-child {
+		border-bottom: 1px solid transparent;
+	}
+}
+
+.sapUiIntLCITitle {
+	color: @sapUiListTextColor;
+	text-shadow: @_sap_ui_integration_ListContentItem_TextShadow;
+	font-size: @sapMFontMediumSize;
+	flex: 1;
+}
+
+.sapUiIntLCIDescription {
+	color: @sapUiContentLabelColor;
+	font-size: @sapMFontMediumSize;
+	flex: 1;
+}
+
+.sapUiIntLCIInfo {
+	display: flex;
+	font-size: @sapMFontMediumSize;
+	text-align: right;
+	margin-left: 1rem;
+	max-width: 40%;
+}
+
+.sapUiIntLCITitle,
+.sapUiIntLCIDescription,
+.sapUiIntLCIInfo {
+	line-height: 1rem;
+	font-family: @sapUiFontFamily;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sapUiIntLCIContent .sapUiIntLCIInfo {
+	white-space: normal;
+}
+
+// Interactive states
+.sapUiIntLCI.sapMLIBActive {
+	.sapFCardIcon.sapFAvatar .sapUiIcon,
+	.sapUiIntLCIInfo {
+		color: @sapUiListActiveTextColor;
+	}
+}
+
+// Styles for compact mode only
+.sapUiSizeCompact .sapUiIntLCI {
+	&.sapUiIntLCIOneLine .sapUiIntLCIIconAndLines {
+		height: calc(2rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 2rem;
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail .sapUiIntLCIIconAndLines {
+		height: 5rem;
+	}
+}