@openui5/sap.ui.unified 1.148.0 → 1.149.0

package/src/sap/ui/unified/calendar/TimesRow.js

@@ -69,7 +69,7 @@ sap.ui.define([
 	 *
 	 * The TimesRow works with UI5Date or JavaScript Date objects.
 	 * @extends sap.ui.core.Control
-	 * @version 1.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/WeeksRow.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * The WeeksRow works with UI5Date or JavaScript Date objects for its API, but internally uses CalendarDate objects for calculations.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/YearPicker.js

@@ -61,7 +61,7 @@ sap.ui.define([
 	 * As in all date-time controls, all pubic JS Date objects that are given (e.g. <code>setDate()</code>) or read
 	 * (e.g. <code>getFirstRenderedDate</code>) with values which are considered as date objects in browser(local) timezone.
 	 * @extends sap.ui.core.Control
-	 * @version 1.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/YearRangePicker.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @extends sap.ui.unified.calendar.YearPicker
 	 *
 	 * @author SAP SE
-	 * @version 1.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/library.js

@@ -32,14 +32,14 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.unified
 	 * @author SAP SE
-	 * @version 1.148.0
+	 * @version 1.149.0
 	 * @since 1.28
 	 * @public
 	 */
 	var thisLib = Library.init({
 		name : "sap.ui.unified",
 		apiVersion: 2,
-		version: "1.148.0",
+		version: "1.149.0",
 		dependencies : ["sap.ui.core"],
 		designtime: "sap/ui/unified/designtime/library.designtime",
 		types: [
@@ -98,6 +98,11 @@ sap.ui.define([
 			"sap.ui.unified.MenuItemGroup",
 			"sap.ui.unified.MenuTextFieldItem",
 			"sap.ui.unified.NonWorkingPeriod",
+			"sap.ui.unified.RecurrenceRule",
+			"sap.ui.unified.MonthlyRecurrenceRule",
+			"sap.ui.unified.WeeklyRecurrenceRule",
+			"sap.ui.unified.YearlyRecurrenceRule",
+			"sap.ui.unified.RecurringCalendarAppointment",
 			"sap.ui.unified.RecurringNonWorkingPeriod",
 			"sap.ui.unified.ShellHeadItem",
 			"sap.ui.unified.ShellHeadUserItem",
@@ -392,6 +397,72 @@ sap.ui.define([
 
 	DataType.registerEnum("sap.ui.unified.RecurrenceType", thisLib.RecurrenceType);
 
+	/**
+	 * Types of recurrence rule pattern.
+	 *
+	 * @enum {string}
+	 * @public
+	 * @since 1.149.0
+	 */
+	thisLib.RecurrenceRuleType = {
+		/**
+		 * Recurrence based on a specific day of the month (e.g., the 15th).
+		 *
+		 * @since 1.149.0
+		 */
+		DayOfMonth: "DayOfMonth",
+		/**
+		 * Recurrence based on a specific day of the week (e.g., second Tuesday).
+		 *
+		 * @since 1.149.0
+		 */
+		DayOfWeek: "DayOfWeek"
+	};
+
+	DataType.registerEnum("sap.ui.unified.RecurrenceRuleType", thisLib.RecurrenceRuleType);
+
+	/**
+	 * Week order within a month for recurrence rules.
+	 *
+	 * @enum {string}
+	 * @public
+	 * @since 1.149.0
+	 */
+	thisLib.WeekOfMonth = {
+		/**
+		 * First occurrence in the month.
+		 *
+		 * @since 1.149.0
+		 */
+		First: "First",
+		/**
+		 * Second occurrence in the month.
+		 *
+		 * @since 1.149.0
+		 */
+		Second: "Second",
+		/**
+		 * Third occurrence in the month.
+		 *
+		 * @since 1.149.0
+		 */
+		Third: "Third",
+		/**
+		 * Fourth occurrence in the month.
+		 *
+		 * @since 1.149.0
+		 */
+		Fourth: "Fourth",
+		/**
+		 * Last occurrence in the month.
+		 *
+		 * @since 1.149.0
+		 */
+		Last: "Last"
+	};
+
+	DataType.registerEnum("sap.ui.unified.WeekOfMonth", thisLib.WeekOfMonth);
+
 	/**
 	 * Types of a calendar appointment display mode
 	 *

package/src/sap/ui/unified/themes/base/Calendar.less

@@ -49,23 +49,23 @@
 /*** HEADER ***/
 .sapUiCalHead {
 	width: 100%;
-	position: relative;
 	text-align: center;
-	display: block;
-	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 	background-color: var(--sapList_Background);
 }
 
-.sapUiCalTwoMonthsTwoColumnsJaZh:not(.sapUiCalInt) > .sapUiCalHead,
-.sapUiCalTwoMonthsTwoColumns:not(.sapUiCalInt) > .sapUiCalHead {
+.sapUiCalTwoMonthsTwoColumnsJaZh:not(.sapUiCalInt) .sapUiCalHead,
+.sapUiCalTwoMonthsTwoColumns:not(.sapUiCalInt) .sapUiCalHead {
 	max-width: 100%;
-	text-align: left;
 }
 
-.sapUiCalHead > button,
+.sapUiCalHead button,
 .sapUiCalCancel {
+	position: relative;
 	background-color: var(--sapButton_Lite_Background);
 	border: none;
 	color: var(--sapButton_TextColor);
@@ -73,7 +73,6 @@
 	overflow: hidden;
 	white-space: nowrap;
 	height: 2.5rem;
-	padding: 0;
 	font-size: @sapMFontMediumSize;
 }
 
@@ -90,46 +89,52 @@
 }
 
 .sapUiCalHead {
+
 	.sapUiCalHeadPrev,
 	.sapUiCalHeadNext,
 	.sapUiCalHeadToday {
-		position: absolute;
-		line-height: 1;
-		width: 2.5rem;
+		line-height: 2.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 
 		&:not(.sapUiCalDsbl) .sapUiIcon {
 			cursor: pointer;
 		}
-	}
 
-	.sapUiCalHeadNext {
-		right: 0.5rem;
+		flex: 0 0 auto;
+		width: 2.5rem;
 	}
 }
 
-.sapUiCalHead.sapUiCalHeaderWithTodayButton {
-	.sapUiCalHeadPrev,
-	.sapUiCalHeadNext {
-		position: initial;
-		width: 2rem;
-	}
+/* Flex content containers for header buttons */
+.sapUiCalHeadContent {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	min-width: 0;
+}
 
-	.sapUiCalHeadToday {
-		position: relative;
-		width: 2rem;
-	}
+.sapUiCalHeadAlignStart {
+	justify-content: flex-start;
+}
 
-	.sapUiCalHeadB1 {
-		margin-left: 0.5rem;
-	}
+.sapUiCalHeadAlignCenter {
+	justify-content: center;
+}
 
-	.sapUiCalHeadB2 {
-		margin-left: 0.25rem;
-	}
+.sapUiCalHeadAlignEnd {
+	justify-content: flex-end;
+}
 
+.sapUiCalHead.sapUiCalHeaderWithTodayButton {
+
+	.sapUiCalHeadPrev,
 	.sapUiCalHeadNext,
 	.sapUiCalHeadToday {
-		margin-left: 0.5rem;
+		width: 2rem;
 	}
 }
 
@@ -137,101 +142,51 @@
 	.sapUiCalHeadPrev,
 	.sapUiCalHeadNext,
 	.sapUiCalHeadToday {
-		width: 1.5rem;
-	}
-
-	.sapUiCalHeadNext {
-		right: 0.25rem;
-	}
-}
-
-.sapUiCal.sapUiCalMulti .sapUiCalHead.sapUiCalHeaderWithTodayButton {
-	.sapUiCalHeadB1 {
-		margin-left: calc(~"50% - 11rem");
-		margin-right: 0;
-	}
-
-	.sapUiCalHeadB2 {
-		margin-right: calc(~"50% - 13.75rem");
-	}
-}
-
-
-.sapUiSizeCompact {
-	.sapUiCal.sapUiCalMulti .sapUiCalHead.sapUiCalHeaderWithTodayButton {
-		.sapUiCalHeadPrev,
-		.sapUiCalHeadNext,
-		.sapUiCalHeadToday {
-			width: 1.5rem;
-		}
-
-		.sapUiCalHeadB1 {
-			margin-left: calc(~"50% - 8rem");
-			margin-right: 0;
-		}
-
-		.sapUiCalHeadB2 {
-			margin-right: calc(~"50% - 10.75rem");
-		}
+		width: 2rem;
 	}
 }
 
-.sapUiCalHeadPrev {
-	left: 0.5rem;
-}
-
-.sapUiCalHead.sapUiCalHeaderWithTodayButton {
-	display: flex;
-	justify-content: space-evenly;
-}
-
-.sapUiSizeCompact .sapUiCal .sapUiCalHead {
-	.sapUiCalHeadB1 {
-		margin-right: 0.25rem;
-	}
-
-	.sapUiCalHeadB2 {
-		margin-left: 0.25rem;
-	}
+.sapUiSizeCompact .sapUiCalHead.sapUiCalHeaderWithTodayButton {
+	outline: none;
 }
 
 /* no default (browser) outline, if device needs focus visualization its defined later */
-.sapUiCalHead > button:focus,
+.sapUiCalHead button:focus,
 .sapUiCalCancel:focus {
 	outline: none;
 }
 
 /* hover and focus makes only sense on desktops. On mobile devices it's not needed */
-html.sap-desktop .sapUiCalHead > button:focus,
+html.sap-desktop .sapUiCalHead button:focus,
 html.sap-desktop .sapUiCalCancel:focus {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Hover_TextColor);
 }
 
-html.sap-desktop .sapUiCalHead > button:hover,
+html.sap-desktop .sapUiCalHead button:hover,
 html.sap-desktop .sapUiCalCancel:hover {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Hover_TextColor);
 }
 
 /* once for desktop to overwrite focus and once for all devices needed */
-.sapUiCalHead > button:active,
+.sapUiCalHead button:active,
 .sapUiCalCancel:active,
-html.sap-desktop .sapUiCalHead > button:active,
-html.sap-desktop .sapUiCalHead > button:active > .sapUiCalHeadBAddText,
+html.sap-desktop .sapUiCalHead button:active,
+html.sap-desktop .sapUiCalHead button:active .sapUiCalHeadBAddText,
 html.sap-desktop .sapUiCalCancel:active {
 	background-color: var(--sapButton_Active_Background);
 	color: var(--sapButton_Active_TextColor);
 }
 
-.sapUiCalHead > button.sapUiCalDsbl {
+.sapUiCalHead button.sapUiCalDsbl {
 	cursor: default;
 	opacity: .3;
 }
 
-html.sap-desktop .sapUiCalHead > button.sapUiCalDsbl:focus,
-.sapUiCalHead > button.sapUiCalDsbl:hover,
-.sapUiCalHead > button.sapUiCalDsbl:active {
+html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
+.sapUiCalHead button.sapUiCalDsbl:hover,
+.sapUiCalHead button.sapUiCalDsbl:active {
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_TextColor);
 }
@@ -281,7 +236,13 @@ html.sap-desktop .sapUiCalHead > button.sapUiCalDsbl:focus,
 	background-color: var(--sapList_Background);
 }
 
-.sapUiCal .sapUiCalMonthView,
+.sapUiCal .sapUiCalMonthView {
+	box-sizing: border-box;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	padding-bottom: 1rem;
+}
+
 .sapUiCal .sapUiCalRow {
 	box-sizing: border-box;
 	padding-left: 0.5rem;
@@ -623,21 +584,12 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	width: 3rem; /* do not overflow buttons on phone */
 }
 
-.sapUiCalHeadBFirst {
-	margin-right: 0.25rem;
-}
-
-.sapUiCalHeadBLast {
-	margin-left: 0.25rem;
-}
-
 .sapUiCalMulti .sapUiCalHeadB1,
 .sapUiCalMonthInt .sapUiCalHeadB2,
 .sapUiCalMulti .sapUiCalHeadB3,
 .sapUiCalIntLarge .sapUiCalHeadB3,
 .sapUiCalMonthInt .sapUiCalHeadB4 {
 	width: 12.5rem;
-	margin-right: 0.5rem
 }
 
 .sapUiCalIntLarge .sapUiCalHeadB1 {
@@ -693,12 +645,8 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	&.sapUiCalTwoMonthsTwoColumns,
 	&.sapUiCalTwoMonthsTwoColumnsJaZh {
 
-		.sapUiCalHeadB2.sapUiCalSingleYearButton{
-			margin-left: calc(~"25% - 5.75rem");
-		}
-
-		.sapUiCalHeadB2 + .sapUiCalHeadB4 {
-			margin-left: 6.25rem;
+		.sapUiCalHeadB3 + .sapUiCalHeadB4.sapUiCalSingleYearButton {
+			width: 5.75rem;
 		}
 	}
 }
@@ -707,22 +655,6 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	width: inherit;
 }
 
-.sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB2,
-.sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB1 {
-	margin-left: calc(~"25% - 6rem");
-}
-
-html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
-	margin-right: calc(~"25% - 6rem");
-}
-
-.sapUiSizeCompact .sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB4,
-.sapUiSizeCompact .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB3,
-.sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB4:not(.sapUiCalSingleYearButton),
-.sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB3 {
-	margin-left: 5rem;
-}
-
 .sapUiCalItemNow > .sapUiCalItemText {
 	border: 0.125rem solid @sapUiCalendarColorToday;
 }
@@ -883,16 +815,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
 	}
 }
 
-.sapUiCalMulti .sapUiCalHead {
-	.sapUiCalHeadB1 {
-		margin-right: 0.25rem;
-	}
-
-	.sapUiCalHeadB2 {
-		margin-left: 0.25rem;
-	}
-}
-
 /*** compact mode (desktop size) ***/
 
 .sapUiSizeCompact .sapUiCal,
@@ -920,12 +842,25 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
 	box-sizing: border-box;
 	height: 2rem;
 	padding: 0;
+	gap: 0.25rem;
 }
 
-.sapUiSizeCompact .sapUiCalHead > button {
+.sapUiSizeCompact .sapUiCalHeadContent {
+	gap: 0.25rem;
+}
+
+.sapUiSizeCompact .sapUiCalHead button {
 	height: 2rem;
 }
 
+.sapUiSizeCompact .sapUiCalHead {
+	.sapUiCalHeadPrev,
+	.sapUiCalHeadNext,
+	.sapUiCalHeadToday {
+		line-height: 2rem;
+	}
+}
+
 .sapUiSizeCompact .sapUiCalMonthView,
 .sapUiSizeCompact .sapUiCalMonthPicker,
 .sapUiSizeCompact .sapUiCalYearPicker {
@@ -933,7 +868,10 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
 }
 
 .sapUiSizeCompact .sapUiCal .sapUiCalMonthView,
-.sapUiSizeCompact.sapUiCal .sapUiCalMonthView,
+.sapUiSizeCompact.sapUiCal .sapUiCalMonthView {
+	padding-bottom: 0.5rem;
+}
+
 .sapUiSizeCompact .sapUiCal .sapUiCalRow,
 .sapUiSizeCompact.sapUiCal .sapUiCalRow {
 	padding-left: 0.25rem;
@@ -941,19 +879,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
 	padding-bottom: 0.5rem;
 }
 
-.sapUiSizeCompact .sapUiCal .sapUiCalHeadPrev,
-.sapUiSizeCompact.sapUiCal .sapUiCalHeadPrev {
-	left: 0.25rem;
-}
-
-.sapUiSizeCompact .sapUiCalHeadBFirst {
-	margin-right: 0.25rem;
-}
-
-.sapUiSizeCompact .sapUiCalHeadBLast {
-	margin-left: 0.25rem;
-}
-
 .sapUiSizeCompact .sapUiCalMulti .sapUiCalHeadB3,
 .sapUiSizeCompact.sapUiCalMulti .sapUiCalHeadB3,
 .sapUiSizeCompact .sapUiCalIntLarge .sapUiCalHeadB3,
@@ -1102,16 +1027,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
 	min-height: 6.5rem;
 }
 
-.sapUiSizeCompact.sapUiCalMulti:not(.sapUiCalTwoMonthsInOneColumn) {
-	.sapUiCalHeadB1 {
-		margin-left: calc(~"50% - 11.75rem");
-	}
-
-	.sapUiCalHeadB2 {
-		margin-right: calc(~"50% - 13.25rem");
-	}
-}
-
 /*** Phone ***/
 /* make calendar full-screen if on popup (DatePicker), but not if stand alone */
 html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalMonthPicker,
@@ -1131,43 +1046,6 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
 
 .sapUiCal.sapUiCalMulti.sapUiCalTwoMonthsTwoColumns {
 
-	.sapUiCalHead.sapUiCalHeaderWithTodayButton {
-		justify-content: space-evenly;
-	}
-
-	.sapUiCalHead.sapUiCalHeaderWithTodayButton {
-		.sapUiCalHeadBPlaceholder {
-			width:100%;
-		}
-
-		.sapUiCalHeadNext,
-		.sapUiCalHeadToday {
-			margin-left: 0.5rem;
-		}
-	}
-
-	& .sapUiCalHeadB.sapUiCalHeadB1 {
-		margin-right: 0.25rem;
-	}
-
-	& .sapUiCalHead .sapUiCalHeadB.sapUiCalHeadB4 {
-		margin-left: 0;
-	}
-
-	& .sapUiCalHead:not(.sapUiCalHeaderWithTodayButton) {
-		.sapUiCalHeadB3 {
-			margin-left: 4.5rem;
-		}
-		.sapUiCalHeadB4 {
-			margin-left: 0;
-		}
-	}
-
-	& .sapUiCalHeadB.sapUiCalHeadB2.sapUiCalHeadBFirst {
-		margin-left: 0.25rem;
-		margin-right: calc(~"25% - 7rem");
-	}
-
 	.sapUiCalHeadB.sapUiCalHeadB2.sapUiCalSingleYearButton,
 	.sapUiCalHeadB.sapUiCalHeadB4.sapUiCalSingleYearButton {
 		width: 12rem;
@@ -1209,12 +1087,10 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
 			}
 
 			.sapUiCalHeadB1 {
-				margin-right: 0.25rem;
 				width: 5.25rem;
 			}
 
 			.sapUiCalHeadB2 {
-				margin-left: 0.25rem;
 				width: 5.25rem;
 			}
 		}
@@ -1239,11 +1115,6 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
 	.sapUiCalYearPicker {
 		display: inline-block;
 	}
-
-	.sapUiCalHeadB1,
-	.sapUiCalHeadB2 {
-		margin: 0 3.125rem;
-	}
 }
 
 .sapUiCalDateInt {

package/src/sap/ui/unified/themes/base/FileUploader.less

@@ -8,8 +8,8 @@
 	display: inherit;
 	z-index: 0;
 	height: var(--sapElement_Height);
-	width: auto;
-	min-width: 12rem;
+	width: 100%;
+	min-width: 8.5rem;
 
 	&.sapUiFupButtonOnly {
 		width: fit-content;

package/src/sap/ui/unified/themes/sap_hcb/Calendar.less

@@ -9,7 +9,7 @@
 	border: 0.0625rem solid @sapUiContentForegroundBorderColor;
 }
 
-.sapUiCalHead > button{
+.sapUiCalHead button{
 	border: 0.0625rem solid @sapUiButtonBorderColor;
 	border-radius: 0.375rem;
 }
@@ -85,7 +85,7 @@
 
 /* hover and focus makes only sense on desktops. On mobile devices it's not needed */
 
-html.sap-desktop .sapUiCalHead > button:focus {
+html.sap-desktop .sapUiCalHead button:focus {
 	border: 0.125rem dotted @sapUiContentFocusColor;
 	background-color: transparent;
 }
@@ -347,10 +347,8 @@ and (orientation: landscape) {
 		line-height: 1.25rem;
 	}
 
-	.sap-phone .sapUiCal[data-sap-ui-popup] > .sapUiCalHead > button{
+	.sap-phone .sapUiCal[data-sap-ui-popup] > .sapUiCalHead button{
 		height: 1.875rem;
-		position: relative;
-		float: left;
 	}
 
 	.sap-phone .sapUiCal[data-sap-ui-popup] .sapUiCalHeadPrev,
@@ -426,11 +424,6 @@ and (orientation: landscape) {
 		box-sizing: border-box;
 	}
 
-	.sap-phone .sapUiCal[data-sap-ui-popup] .sapUiCalHeadNext,
-	.sap-phone .sapUiCal[data-sap-ui-popup] .sapUiCalHeadBFirst {
-		margin-left: 0.5rem;
-	}
-
 }
 
 /*** Tablet ***/