@openui5/sap.f 1.133.0 → 1.134.0

package/src/sap/f/themes/base/CardHeaders.less

@@ -6,25 +6,26 @@
 @_sap_f_CardHeaders_Padding: 1rem;
 @_sap_f_CardHeaders_TitleFontSize: @sapMFontHeader5Size;
 @_sap_f_CardHeaders_HeaderFocusBorderLeftOffset: 1px;
-@_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 2px;
+@_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderRightOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderTopOffset: 1px;
-@_sap_f_CardHeaders_HeaderFocusBorderRadius: none;
+@_sap_f_CardHeaders_MainHeaderBorderRadius: 0;
 
 .sapFCardHeader {
 	position: relative;
 	flex-shrink: 0;
-	justify-content: space-between;
 	background: @sapUiTileBackground;
-	padding: @_sap_f_CardHeaders_Padding;
 	display: flex;
+	flex-direction: column;
 
-	.sapFCardHeaderWrapper {
+	.sapFCardHeaderMainPart {
 		outline: none;
 		display: flex;
 		min-width: 0;
-		flex: 1;
 		height: fit-content;
+		padding: @_sap_f_CardHeaders_Padding @_sap_f_CardHeaders_Padding 0.75rem @_sap_f_CardHeaders_Padding;
+		position: relative;
+		border-radius: @_sap_f_CardHeaders_MainHeaderBorderRadius;
 	}
 
 	.sapFCardHeaderImage {
@@ -122,10 +123,12 @@
 	}
 
 	&.sapFCardHeaderHasToolbar {
-		min-height: 2rem;
+		&:not(.sapFCardHeaderHasIcon) .sapFCardHeaderMainPart {
+			min-height: 2rem;
+			align-items: flex-start;
+		}
 
 		.sapFCardHeaderText {
-			margin-inline-end: 2rem;
 			width: unset;
 		}
 	}
@@ -159,7 +162,7 @@
 		}
 	}
 
-	&.sapFCardSectionClickable {
+	.sapFCardSectionClickable {
 		cursor: pointer !important;
 
 		.sapMText {
@@ -188,10 +191,18 @@
 
 .sapFCardHeader.sapFCardNumericHeader {
 
-	.sapFCardHeaderContent {
-		outline: none;
-		min-width: 0; // fixes Chrome issue
-		flex: 1;
+	.sapFCardNumericHeaderNumericPart {
+		padding: 0.25rem 1rem 0.5rem 1rem;
+
+		.sapFCardHeaderNumericPartFirstLine {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+
+			.sapFCardNumericIndicators  {
+				flex: 1;
+			}
+		}
 	}
 
 	.sapFCardStatus {
@@ -219,23 +230,7 @@
 		color: @sapUiTileTextColor;
 	}
 
-	.sapFCardAvatarAndIndicatorsLine {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-
-		.sapFCardIcon.sapFAvatar {
-			margin-top: 0.5rem;
-			margin-right: 0.5rem;
-
-			&.sapFAvatarImage {
-				margin-right: 0.5rem;
-			}
-		}
-	}
-
 	.sapFCardNumericIndicators {
-		margin-top: 0.25rem;
 		flex: 1;
 		min-width: 0; // allows items to shrink and truncate the content inside
 
@@ -326,13 +321,12 @@
 }
 
 .sapUiSizeCompact {
-	.sapFCardHeaderHasToolbar {
+	.sapFCardHeaderHasToolbar:not(.sapFCardHeaderHasIcon) .sapFCardHeaderMainPart{
 		min-height: 1rem;
 	}
 }
 
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard > .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before { // focus inside Grid Container
+.sapFCardHeader:not(.sapFCardHeaderToolbarFocused) .sapFCardHeaderFocusable:focus::before {
 	content: '';
 	display: block;
 	position: absolute;
@@ -341,12 +335,8 @@
 	right: @_sap_f_CardHeaders_HeaderFocusBorderRightOffset;
 	top: @_sap_f_CardHeaders_HeaderFocusBorderTopOffset;
 	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	border-radius: @_sap_f_CardHeaders_HeaderFocusBorderRadius;
+	border-radius: inherit;
 	pointer-events: none;
-}
-
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before {
-	bottom: 1px;
 	z-index: 1;
 }
 

package/src/sap/f/themes/base/CardLoading.less

@@ -75,7 +75,7 @@
 			}
 		}
 
-		.sapFCardHeaderItemBinded::after {
+		&:not(.sapFCardLoadingDelayed).sapFCardHeaderItemBinded::after {
 			.sapFCardLoadingShimmerMixin();
 			content: "";
 			position: absolute;
@@ -119,7 +119,7 @@
 	}
 
 	&.sapFCardPreview .sapFCardFilter,
-	.sapFCardFilterLoading {
+	&:not(.sapFCardLoadingDelayed) .sapFCardFilterLoading {
 		position: relative;
 		&::after {
 			.sapFCardLoadingShimmerMixin();
@@ -216,7 +216,7 @@
 		}
 	}
 
-	.sapFCardLoadingShimmer {
+	&:not(.sapFCardLoadingDelayed) .sapFCardLoadingShimmer {
 		.sapFCardLoadingShimmerMixin();
 	}
 

package/src/sap/f/themes/base/DynamicPage.less

@@ -420,3 +420,8 @@ To be used in Comparison pattern scenario. */
 .sapUiComparisonContainer .sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper .sapUiComparisonContent  {
 	margin-right: -1rem;
 }
+
+// Avoid visible gap between content and header when title is snapped
+.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper > .sapFDynamicPageHeaderWrapper {
+	background: @sapUiObjectHeaderBackground;
+}

package/src/sap/f/themes/base/GridContainer.less

@@ -11,6 +11,16 @@
 	}
 }
 
+.sapFGridContainerItemWrapper:focus::before {
+	content: '';
+	position: absolute;
+	inset: @_sap_f_GridContainer_FocusBorderOffset;
+	z-index: 1;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--sapElement_BorderCornerRadius);
+	pointer-events: none;
+}
+
 .sapFGridContainerListUl {
 	position: relative;
 	display: grid;
@@ -37,19 +47,6 @@
 		}
 	}
 
-	.sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
-		content: '';
-		position: absolute;
-		left: @_sap_f_GridContainer_FocusBorderOffset;
-		bottom: @_sap_f_GridContainer_FocusBorderOffset;
-		right: @_sap_f_GridContainer_FocusBorderOffset;
-		top: @_sap_f_GridContainer_FocusBorderOffset;
-		z-index: 1;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-		pointer-events: none;
-
-	}
-
 	.sapFGridContainerItemWrapper {
 		position: relative;
 	}

package/src/sap/f/themes/sap_hcb/base_Card.less

@@ -99,7 +99,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	padding: @_sap_f_Card_ContentPadding;
 	display: flex;
 
-	.sapFCardHeaderWrapper {
+	.sapFCardHeaderMainPart {
 		outline: none;
 		display: flex;
 		min-width: 0;
@@ -259,7 +259,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 
 .sapFCard .sapFCardHeader.sapFCardNumericHeader {
 
-	.sapFCardHeaderContent {
+	.sapFCardHeaderMainPart {
 		outline: none;
 		min-width: 0; // fixes Chrome issue
 		flex: 1;
@@ -493,9 +493,7 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 	}
 }
 
-.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard > .sapFCardHeader:not(.sapFCardHeaderToolbarFocused)::before, // focus inside Grid Container
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // ... focus on a card without header
+.sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before { // ... focus on a card without header
 	content: '';
 	display: block;
 	position: absolute;
@@ -532,11 +530,6 @@ ui-integration-card.sapFCardFocusFullCard > [data-sap-ui-area] > .sapFCard {
 
 .sapFCardHeader:not(.sapFCardHeaderToolbarFocused):focus-within::before,
 
-.sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus > .sapFCard.sapFCardNoHeader::before { // focus inside GridContainer on a card without header
-	bottom: 1px;
-	z-index: 1;
-}
-
 .sapUiSizeCompact {
 	.sapFCard .sapFCardContent {
 

package/src/sap/f/themes/sap_hcb/base_GridContainer.less

@@ -37,19 +37,6 @@
 		}
 	}
 
-	.sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
-		content: '';
-		position: absolute;
-		left: @_sap_f_GridContainer_FocusBorderOffset;
-		bottom: @_sap_f_GridContainer_FocusBorderOffset;
-		right: @_sap_f_GridContainer_FocusBorderOffset;
-		top: @_sap_f_GridContainer_FocusBorderOffset;
-		z-index: 1;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-		pointer-events: none;
-
-	}
-
 	.sapFGridContainerItemWrapper {
 		position: relative;
 	}

package/LICENSES/LicenseRef-tzdata-PublicDomain.txt

@@ -1,5 +0,0 @@
-Unless specified below, all files in the tz code and data (including
-this LICENSE file) are in the public domain.
-
-If the files date.c, newstrftime.3, and strftime.c are present, they
-contain material derived from BSD and use the BSD 3-clause license.