@openui5/sap.ui.unified 1.147.1 → 1.149.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/THIRDPARTY.txt +3 -3
  2. package/package.json +2 -2
  3. package/src/sap/ui/unified/.library +1 -1
  4. package/src/sap/ui/unified/Calendar.js +9 -4
  5. package/src/sap/ui/unified/CalendarAppointment.js +1 -1
  6. package/src/sap/ui/unified/CalendarDateInterval.js +1 -1
  7. package/src/sap/ui/unified/CalendarLegend.js +1 -1
  8. package/src/sap/ui/unified/CalendarLegendItem.js +1 -1
  9. package/src/sap/ui/unified/CalendarMonthInterval.js +1 -1
  10. package/src/sap/ui/unified/CalendarOneMonthInterval.js +1 -1
  11. package/src/sap/ui/unified/CalendarRow.js +1 -1
  12. package/src/sap/ui/unified/CalendarRowRenderer.js +23 -18
  13. package/src/sap/ui/unified/CalendarTimeInterval.js +10 -13
  14. package/src/sap/ui/unified/CalendarWeekInterval.js +1 -1
  15. package/src/sap/ui/unified/ColorPicker.js +1 -1
  16. package/src/sap/ui/unified/ColorPickerPopover.js +1 -1
  17. package/src/sap/ui/unified/ContentSwitcher.js +1 -1
  18. package/src/sap/ui/unified/Currency.js +1 -1
  19. package/src/sap/ui/unified/CurrencyRenderer.js +1 -1
  20. package/src/sap/ui/unified/DateRange.js +1 -1
  21. package/src/sap/ui/unified/DateTypeRange.js +1 -1
  22. package/src/sap/ui/unified/FileUploader.js +19 -6
  23. package/src/sap/ui/unified/FileUploaderParameter.js +1 -1
  24. package/src/sap/ui/unified/FileUploaderXHRSettings.js +1 -1
  25. package/src/sap/ui/unified/Menu.js +1 -1
  26. package/src/sap/ui/unified/MenuItem.js +1 -1
  27. package/src/sap/ui/unified/MenuItemBase.js +1 -1
  28. package/src/sap/ui/unified/MenuItemGroup.js +1 -1
  29. package/src/sap/ui/unified/MenuRenderer.js +1 -1
  30. package/src/sap/ui/unified/MenuTextFieldItem.js +1 -1
  31. package/src/sap/ui/unified/MonthlyRecurrenceRule.js +58 -0
  32. package/src/sap/ui/unified/NonWorkingPeriod.js +1 -1
  33. package/src/sap/ui/unified/RecurrenceRule.js +112 -0
  34. package/src/sap/ui/unified/RecurringCalendarAppointment.js +222 -0
  35. package/src/sap/ui/unified/RecurringNonWorkingPeriod.js +112 -6
  36. package/src/sap/ui/unified/Shell.js +1 -1
  37. package/src/sap/ui/unified/ShellHeadItem.js +1 -1
  38. package/src/sap/ui/unified/ShellHeadUserItem.js +1 -1
  39. package/src/sap/ui/unified/ShellLayout.js +1 -1
  40. package/src/sap/ui/unified/ShellOverlay.js +1 -1
  41. package/src/sap/ui/unified/SplitContainer.js +1 -1
  42. package/src/sap/ui/unified/TimeRange.js +1 -1
  43. package/src/sap/ui/unified/WeeklyRecurrenceRule.js +39 -0
  44. package/src/sap/ui/unified/YearlyRecurrenceRule.js +53 -0
  45. package/src/sap/ui/unified/calendar/DatesRow.js +1 -1
  46. package/src/sap/ui/unified/calendar/Header.js +14 -2
  47. package/src/sap/ui/unified/calendar/HeaderRenderer.js +124 -50
  48. package/src/sap/ui/unified/calendar/IndexPicker.js +1 -1
  49. package/src/sap/ui/unified/calendar/Month.js +6 -7
  50. package/src/sap/ui/unified/calendar/MonthPicker.js +1 -1
  51. package/src/sap/ui/unified/calendar/MonthsRow.js +1 -1
  52. package/src/sap/ui/unified/calendar/OneMonthDatesRow.js +1 -1
  53. package/src/sap/ui/unified/calendar/RecurrenceUtils.js +653 -113
  54. package/src/sap/ui/unified/calendar/TimesRow.js +1 -1
  55. package/src/sap/ui/unified/calendar/WeeksRow.js +1 -1
  56. package/src/sap/ui/unified/calendar/YearPicker.js +1 -1
  57. package/src/sap/ui/unified/calendar/YearRangePicker.js +1 -1
  58. package/src/sap/ui/unified/library.js +73 -2
  59. package/src/sap/ui/unified/messagebundle_ko.properties +2 -2
  60. package/src/sap/ui/unified/messagebundle_zh_CN.properties +4 -4
  61. package/src/sap/ui/unified/messagebundle_zh_TW.properties +6 -6
  62. package/src/sap/ui/unified/themes/base/Calendar.less +76 -205
  63. package/src/sap/ui/unified/themes/base/FileUploader.less +2 -2
  64. package/src/sap/ui/unified/themes/sap_hcb/Calendar.less +3 -10
  65. package/src/sap/ui/unified/themes/sap_hcb/base_Calendar.less +54 -112
@@ -69,7 +69,7 @@ sap.ui.define([
69
69
  *
70
70
  * The TimesRow works with UI5Date or JavaScript Date objects.
71
71
  * @extends sap.ui.core.Control
72
- * @version 1.147.1
72
+ * @version 1.149.0
73
73
  *
74
74
  * @constructor
75
75
  * @public
@@ -41,7 +41,7 @@ sap.ui.define([
41
41
  * The WeeksRow works with UI5Date or JavaScript Date objects for its API, but internally uses CalendarDate objects for calculations.
42
42
  *
43
43
  * @extends sap.ui.core.Control
44
- * @version 1.147.1
44
+ * @version 1.149.0
45
45
  *
46
46
  * @constructor
47
47
  * @private
@@ -61,7 +61,7 @@ sap.ui.define([
61
61
  * As in all date-time controls, all pubic JS Date objects that are given (e.g. <code>setDate()</code>) or read
62
62
  * (e.g. <code>getFirstRenderedDate</code>) with values which are considered as date objects in browser(local) timezone.
63
63
  * @extends sap.ui.core.Control
64
- * @version 1.147.1
64
+ * @version 1.149.0
65
65
  *
66
66
  * @constructor
67
67
  * @public
@@ -45,7 +45,7 @@ sap.ui.define([
45
45
  * @extends sap.ui.unified.calendar.YearPicker
46
46
  *
47
47
  * @author SAP SE
48
- * @version 1.147.1
48
+ * @version 1.149.0
49
49
  *
50
50
  * @constructor
51
51
  * @private
@@ -32,14 +32,14 @@ sap.ui.define([
32
32
  * @namespace
33
33
  * @alias sap.ui.unified
34
34
  * @author SAP SE
35
- * @version 1.147.1
35
+ * @version 1.149.0
36
36
  * @since 1.28
37
37
  * @public
38
38
  */
39
39
  var thisLib = Library.init({
40
40
  name : "sap.ui.unified",
41
41
  apiVersion: 2,
42
- version: "1.147.1",
42
+ version: "1.149.0",
43
43
  dependencies : ["sap.ui.core"],
44
44
  designtime: "sap/ui/unified/designtime/library.designtime",
45
45
  types: [
@@ -98,6 +98,11 @@ sap.ui.define([
98
98
  "sap.ui.unified.MenuItemGroup",
99
99
  "sap.ui.unified.MenuTextFieldItem",
100
100
  "sap.ui.unified.NonWorkingPeriod",
101
+ "sap.ui.unified.RecurrenceRule",
102
+ "sap.ui.unified.MonthlyRecurrenceRule",
103
+ "sap.ui.unified.WeeklyRecurrenceRule",
104
+ "sap.ui.unified.YearlyRecurrenceRule",
105
+ "sap.ui.unified.RecurringCalendarAppointment",
101
106
  "sap.ui.unified.RecurringNonWorkingPeriod",
102
107
  "sap.ui.unified.ShellHeadItem",
103
108
  "sap.ui.unified.ShellHeadUserItem",
@@ -392,6 +397,72 @@ sap.ui.define([
392
397
 
393
398
  DataType.registerEnum("sap.ui.unified.RecurrenceType", thisLib.RecurrenceType);
394
399
 
400
+ /**
401
+ * Types of recurrence rule pattern.
402
+ *
403
+ * @enum {string}
404
+ * @public
405
+ * @since 1.149.0
406
+ */
407
+ thisLib.RecurrenceRuleType = {
408
+ /**
409
+ * Recurrence based on a specific day of the month (e.g., the 15th).
410
+ *
411
+ * @since 1.149.0
412
+ */
413
+ DayOfMonth: "DayOfMonth",
414
+ /**
415
+ * Recurrence based on a specific day of the week (e.g., second Tuesday).
416
+ *
417
+ * @since 1.149.0
418
+ */
419
+ DayOfWeek: "DayOfWeek"
420
+ };
421
+
422
+ DataType.registerEnum("sap.ui.unified.RecurrenceRuleType", thisLib.RecurrenceRuleType);
423
+
424
+ /**
425
+ * Week order within a month for recurrence rules.
426
+ *
427
+ * @enum {string}
428
+ * @public
429
+ * @since 1.149.0
430
+ */
431
+ thisLib.WeekOfMonth = {
432
+ /**
433
+ * First occurrence in the month.
434
+ *
435
+ * @since 1.149.0
436
+ */
437
+ First: "First",
438
+ /**
439
+ * Second occurrence in the month.
440
+ *
441
+ * @since 1.149.0
442
+ */
443
+ Second: "Second",
444
+ /**
445
+ * Third occurrence in the month.
446
+ *
447
+ * @since 1.149.0
448
+ */
449
+ Third: "Third",
450
+ /**
451
+ * Fourth occurrence in the month.
452
+ *
453
+ * @since 1.149.0
454
+ */
455
+ Fourth: "Fourth",
456
+ /**
457
+ * Last occurrence in the month.
458
+ *
459
+ * @since 1.149.0
460
+ */
461
+ Last: "Last"
462
+ };
463
+
464
+ DataType.registerEnum("sap.ui.unified.WeekOfMonth", thisLib.WeekOfMonth);
465
+
395
466
  /**
396
467
  * Types of a calendar appointment display mode
397
468
  *
@@ -45,7 +45,7 @@ CALENDAR_BTN_PREV_YEAR_TITLE=\uC804\uB144\uB3C4
45
45
 
46
46
  CALENDAR_BTN_PREV_YEAR_RANGE_TITLE=\uC804\uB144\uB3C4 \uBC94\uC704
47
47
 
48
- CALENDAR_BTN_PREV_MONTH_SHORTCUT=\uD398\uC774\uC9C0 \uC704\uB85C
48
+ CALENDAR_BTN_PREV_MONTH_SHORTCUT=Pageup
49
49
 
50
50
  CALENDAR_BTN_NEXT=\uB2E4\uC74C
51
51
 
@@ -55,7 +55,7 @@ CALENDAR_BTN_NEXT_YEAR_TITLE=\uB2E4\uC74C \uC5F0\uB3C4
55
55
 
56
56
  CALENDAR_BTN_NEXT_YEAR_RANGE_TITLE=\uB2E4\uC74C \uC5F0\uB3C4 \uBC94\uC704
57
57
 
58
- CALENDAR_BTN_NEXT_MONTH_SHORTCUT=\uD398\uC774\uC9C0 \uC544\uB798\uB85C
58
+ CALENDAR_BTN_NEXT_MONTH_SHORTCUT=Pagedown
59
59
 
60
60
  CALENDAR_BTN_TODAY=\uC624\uB298
61
61
 
@@ -75,13 +75,13 @@ CALENDAR_YEAR_PICKER_OPEN_HINT=\u6309 Shift + F4 \u9009\u62E9\u5E74\u5EA6
75
75
 
76
76
  CALENDAR_YEAR_RANGE_PICKER_OPEN_HINT=\u6309 Shift + F4 \u9009\u62E9\u5E74\u5EA6\u8303\u56F4
77
77
 
78
- CALENDAR_HEADER_MONTH_BUTTON=\u7B2C {0} \u4E2A\u6708
78
+ CALENDAR_HEADER_MONTH_BUTTON=\u6708\u4EFD {0}
79
79
 
80
- CALENDAR_HEADER_MONTH_BUTTON_TOOLTIP=\u7B2C {0} \u4E2A\u6708
80
+ CALENDAR_HEADER_MONTH_BUTTON_TOOLTIP=\u6708\u4EFD {0}
81
81
 
82
- CALENDAR_HEADER_YEAR_BUTTON=\u7B2C {0} \u5E74
82
+ CALENDAR_HEADER_YEAR_BUTTON=\u5E74\u5EA6 {0}
83
83
 
84
- CALENDAR_HEADER_YEAR_BUTTON_TOOLTIP=\u7B2C {0} \u5E74
84
+ CALENDAR_HEADER_YEAR_BUTTON_TOOLTIP=\u5E74\u5EA6 {0}
85
85
 
86
86
  CALENDAR_HEADER_YEAR_RANGE_BUTTON=\u4ECE {0} \u5230 {1} \u7684\u5E74\u5EA6\u8303\u56F4
87
87
 
@@ -37,7 +37,7 @@ CALENDAR_CURRENT_TIME=\u73FE\u5728
37
37
 
38
38
  CALENDAR_CANCEL=\u53D6\u6D88
39
39
 
40
- CALENDAR_BTN_PREV=\u4E0A\u4E00\u6B65
40
+ CALENDAR_BTN_PREV=\u4E0A\u4E00\u500B
41
41
 
42
42
  CALENDAR_BTN_PREV_MONTH_TITLE=\u4E0A\u500B\u6708
43
43
 
@@ -47,7 +47,7 @@ CALENDAR_BTN_PREV_YEAR_RANGE_TITLE=\u4E0A\u5E74\u5EA6\u7BC4\u570D
47
47
 
48
48
  CALENDAR_BTN_PREV_MONTH_SHORTCUT=\u4E0A\u4E00\u9801
49
49
 
50
- CALENDAR_BTN_NEXT=\u4E0B\u4E00\u6B65
50
+ CALENDAR_BTN_NEXT=\u4E0B\u4E00\u500B
51
51
 
52
52
  CALENDAR_BTN_NEXT_MONTH_TITLE=\u4E0B\u500B\u6708
53
53
 
@@ -75,13 +75,13 @@ CALENDAR_YEAR_PICKER_OPEN_HINT=\u6309 Shift + F4 \u9078\u64C7\u5E74\u5EA6
75
75
 
76
76
  CALENDAR_YEAR_RANGE_PICKER_OPEN_HINT=\u6309 Shift + F4 \u9078\u64C7\u5E74\u5EA6\u7BC4\u570D
77
77
 
78
- CALENDAR_HEADER_MONTH_BUTTON=\u6708 {0}
78
+ CALENDAR_HEADER_MONTH_BUTTON=\u6708\u4EFD\uFF1A{0}
79
79
 
80
- CALENDAR_HEADER_MONTH_BUTTON_TOOLTIP=\u6708 {0}
80
+ CALENDAR_HEADER_MONTH_BUTTON_TOOLTIP=\u6708\u4EFD\uFF1A{0}
81
81
 
82
- CALENDAR_HEADER_YEAR_BUTTON=\u5E74 {0}
82
+ CALENDAR_HEADER_YEAR_BUTTON=\u5E74\u5EA6\uFF1A{0}
83
83
 
84
- CALENDAR_HEADER_YEAR_BUTTON_TOOLTIP=\u5E74 {0}
84
+ CALENDAR_HEADER_YEAR_BUTTON_TOOLTIP=\u5E74\u5EA6\uFF1A{0}
85
85
 
86
86
  CALENDAR_HEADER_YEAR_RANGE_BUTTON=\u5E74\u5EA6\u7BC4\u570D (\u81EA {0} \u81F3 {1})
87
87
 
@@ -49,23 +49,23 @@
49
49
  /*** HEADER ***/
50
50
  .sapUiCalHead {
51
51
  width: 100%;
52
- position: relative;
53
52
  text-align: center;
54
- display: block;
55
- height: 2.5rem;
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.5rem;
56
56
  padding-top: 0.25rem;
57
57
  padding-bottom: 0.25rem;
58
58
  background-color: var(--sapList_Background);
59
59
  }
60
60
 
61
- .sapUiCalTwoMonthsTwoColumnsJaZh:not(.sapUiCalInt) > .sapUiCalHead,
62
- .sapUiCalTwoMonthsTwoColumns:not(.sapUiCalInt) > .sapUiCalHead {
61
+ .sapUiCalTwoMonthsTwoColumnsJaZh:not(.sapUiCalInt) .sapUiCalHead,
62
+ .sapUiCalTwoMonthsTwoColumns:not(.sapUiCalInt) .sapUiCalHead {
63
63
  max-width: 100%;
64
- text-align: left;
65
64
  }
66
65
 
67
- .sapUiCalHead > button,
66
+ .sapUiCalHead button,
68
67
  .sapUiCalCancel {
68
+ position: relative;
69
69
  background-color: var(--sapButton_Lite_Background);
70
70
  border: none;
71
71
  color: var(--sapButton_TextColor);
@@ -73,7 +73,6 @@
73
73
  overflow: hidden;
74
74
  white-space: nowrap;
75
75
  height: 2.5rem;
76
- padding: 0;
77
76
  font-size: @sapMFontMediumSize;
78
77
  }
79
78
 
@@ -90,46 +89,52 @@
90
89
  }
91
90
 
92
91
  .sapUiCalHead {
92
+
93
93
  .sapUiCalHeadPrev,
94
94
  .sapUiCalHeadNext,
95
95
  .sapUiCalHeadToday {
96
- position: absolute;
97
- line-height: 1;
98
- width: 2.5rem;
96
+ line-height: 2.25rem;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
99
100
 
100
101
  &:not(.sapUiCalDsbl) .sapUiIcon {
101
102
  cursor: pointer;
102
103
  }
103
- }
104
104
 
105
- .sapUiCalHeadNext {
106
- right: 0.5rem;
105
+ flex: 0 0 auto;
106
+ width: 2.5rem;
107
107
  }
108
108
  }
109
109
 
110
- .sapUiCalHead.sapUiCalHeaderWithTodayButton {
111
- .sapUiCalHeadPrev,
112
- .sapUiCalHeadNext {
113
- position: initial;
114
- width: 2rem;
115
- }
110
+ /* Flex content containers for header buttons */
111
+ .sapUiCalHeadContent {
112
+ flex: 1;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ gap: 0.5rem;
117
+ min-width: 0;
118
+ }
116
119
 
117
- .sapUiCalHeadToday {
118
- position: relative;
119
- width: 2rem;
120
- }
120
+ .sapUiCalHeadAlignStart {
121
+ justify-content: flex-start;
122
+ }
121
123
 
122
- .sapUiCalHeadB1 {
123
- margin-left: 0.5rem;
124
- }
124
+ .sapUiCalHeadAlignCenter {
125
+ justify-content: center;
126
+ }
125
127
 
126
- .sapUiCalHeadB2 {
127
- margin-left: 0.25rem;
128
- }
128
+ .sapUiCalHeadAlignEnd {
129
+ justify-content: flex-end;
130
+ }
129
131
 
132
+ .sapUiCalHead.sapUiCalHeaderWithTodayButton {
133
+
134
+ .sapUiCalHeadPrev,
130
135
  .sapUiCalHeadNext,
131
136
  .sapUiCalHeadToday {
132
- margin-left: 0.5rem;
137
+ width: 2rem;
133
138
  }
134
139
  }
135
140
 
@@ -137,101 +142,51 @@
137
142
  .sapUiCalHeadPrev,
138
143
  .sapUiCalHeadNext,
139
144
  .sapUiCalHeadToday {
140
- width: 1.5rem;
141
- }
142
-
143
- .sapUiCalHeadNext {
144
- right: 0.25rem;
145
- }
146
- }
147
-
148
- .sapUiCal.sapUiCalMulti .sapUiCalHead.sapUiCalHeaderWithTodayButton {
149
- .sapUiCalHeadB1 {
150
- margin-left: calc(~"50% - 11rem");
151
- margin-right: 0;
152
- }
153
-
154
- .sapUiCalHeadB2 {
155
- margin-right: calc(~"50% - 13.75rem");
156
- }
157
- }
158
-
159
-
160
- .sapUiSizeCompact {
161
- .sapUiCal.sapUiCalMulti .sapUiCalHead.sapUiCalHeaderWithTodayButton {
162
- .sapUiCalHeadPrev,
163
- .sapUiCalHeadNext,
164
- .sapUiCalHeadToday {
165
- width: 1.5rem;
166
- }
167
-
168
- .sapUiCalHeadB1 {
169
- margin-left: calc(~"50% - 8rem");
170
- margin-right: 0;
171
- }
172
-
173
- .sapUiCalHeadB2 {
174
- margin-right: calc(~"50% - 10.75rem");
175
- }
145
+ width: 2rem;
176
146
  }
177
147
  }
178
148
 
179
- .sapUiCalHeadPrev {
180
- left: 0.5rem;
181
- }
182
-
183
- .sapUiCalHead.sapUiCalHeaderWithTodayButton {
184
- display: flex;
185
- justify-content: space-evenly;
186
- }
187
-
188
- .sapUiSizeCompact .sapUiCal .sapUiCalHead {
189
- .sapUiCalHeadB1 {
190
- margin-right: 0.25rem;
191
- }
192
-
193
- .sapUiCalHeadB2 {
194
- margin-left: 0.25rem;
195
- }
149
+ .sapUiSizeCompact .sapUiCalHead.sapUiCalHeaderWithTodayButton {
150
+ outline: none;
196
151
  }
197
152
 
198
153
  /* no default (browser) outline, if device needs focus visualization its defined later */
199
- .sapUiCalHead > button:focus,
154
+ .sapUiCalHead button:focus,
200
155
  .sapUiCalCancel:focus {
201
156
  outline: none;
202
157
  }
203
158
 
204
159
  /* hover and focus makes only sense on desktops. On mobile devices it's not needed */
205
- html.sap-desktop .sapUiCalHead > button:focus,
160
+ html.sap-desktop .sapUiCalHead button:focus,
206
161
  html.sap-desktop .sapUiCalCancel:focus {
207
162
  background-color: var(--sapButton_Hover_Background);
208
163
  color: var(--sapButton_Hover_TextColor);
209
164
  }
210
165
 
211
- html.sap-desktop .sapUiCalHead > button:hover,
166
+ html.sap-desktop .sapUiCalHead button:hover,
212
167
  html.sap-desktop .sapUiCalCancel:hover {
213
168
  background-color: var(--sapButton_Hover_Background);
214
169
  color: var(--sapButton_Hover_TextColor);
215
170
  }
216
171
 
217
172
  /* once for desktop to overwrite focus and once for all devices needed */
218
- .sapUiCalHead > button:active,
173
+ .sapUiCalHead button:active,
219
174
  .sapUiCalCancel:active,
220
- html.sap-desktop .sapUiCalHead > button:active,
221
- html.sap-desktop .sapUiCalHead > button:active > .sapUiCalHeadBAddText,
175
+ html.sap-desktop .sapUiCalHead button:active,
176
+ html.sap-desktop .sapUiCalHead button:active .sapUiCalHeadBAddText,
222
177
  html.sap-desktop .sapUiCalCancel:active {
223
178
  background-color: var(--sapButton_Active_Background);
224
179
  color: var(--sapButton_Active_TextColor);
225
180
  }
226
181
 
227
- .sapUiCalHead > button.sapUiCalDsbl {
182
+ .sapUiCalHead button.sapUiCalDsbl {
228
183
  cursor: default;
229
184
  opacity: .3;
230
185
  }
231
186
 
232
- html.sap-desktop .sapUiCalHead > button.sapUiCalDsbl:focus,
233
- .sapUiCalHead > button.sapUiCalDsbl:hover,
234
- .sapUiCalHead > button.sapUiCalDsbl:active {
187
+ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
188
+ .sapUiCalHead button.sapUiCalDsbl:hover,
189
+ .sapUiCalHead button.sapUiCalDsbl:active {
235
190
  background-color: var(--sapButton_Lite_Background);
236
191
  color: var(--sapButton_TextColor);
237
192
  }
@@ -281,7 +236,13 @@ html.sap-desktop .sapUiCalHead > button.sapUiCalDsbl:focus,
281
236
  background-color: var(--sapList_Background);
282
237
  }
283
238
 
284
- .sapUiCal .sapUiCalMonthView,
239
+ .sapUiCal .sapUiCalMonthView {
240
+ box-sizing: border-box;
241
+ padding-left: 0.5rem;
242
+ padding-right: 0.5rem;
243
+ padding-bottom: 1rem;
244
+ }
245
+
285
246
  .sapUiCal .sapUiCalRow {
286
247
  box-sizing: border-box;
287
248
  padding-left: 0.5rem;
@@ -623,21 +584,12 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
623
584
  width: 3rem; /* do not overflow buttons on phone */
624
585
  }
625
586
 
626
- .sapUiCalHeadBFirst {
627
- margin-right: 0.25rem;
628
- }
629
-
630
- .sapUiCalHeadBLast {
631
- margin-left: 0.25rem;
632
- }
633
-
634
587
  .sapUiCalMulti .sapUiCalHeadB1,
635
588
  .sapUiCalMonthInt .sapUiCalHeadB2,
636
589
  .sapUiCalMulti .sapUiCalHeadB3,
637
590
  .sapUiCalIntLarge .sapUiCalHeadB3,
638
591
  .sapUiCalMonthInt .sapUiCalHeadB4 {
639
592
  width: 12.5rem;
640
- margin-right: 0.5rem
641
593
  }
642
594
 
643
595
  .sapUiCalIntLarge .sapUiCalHeadB1 {
@@ -693,12 +645,8 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
693
645
  &.sapUiCalTwoMonthsTwoColumns,
694
646
  &.sapUiCalTwoMonthsTwoColumnsJaZh {
695
647
 
696
- .sapUiCalHeadB2.sapUiCalSingleYearButton{
697
- margin-left: calc(~"25% - 5.75rem");
698
- }
699
-
700
- .sapUiCalHeadB2 + .sapUiCalHeadB4 {
701
- margin-left: 6.25rem;
648
+ .sapUiCalHeadB3 + .sapUiCalHeadB4.sapUiCalSingleYearButton {
649
+ width: 5.75rem;
702
650
  }
703
651
  }
704
652
  }
@@ -707,22 +655,6 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
707
655
  width: inherit;
708
656
  }
709
657
 
710
- .sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB2,
711
- .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB1 {
712
- margin-left: calc(~"25% - 6rem");
713
- }
714
-
715
- html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
716
- margin-right: calc(~"25% - 6rem");
717
- }
718
-
719
- .sapUiSizeCompact .sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB4,
720
- .sapUiSizeCompact .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB3,
721
- .sapUiCalTwoMonthsTwoColumnsJaZh .sapUiCalHeadB4:not(.sapUiCalSingleYearButton),
722
- .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB3 {
723
- margin-left: 5rem;
724
- }
725
-
726
658
  .sapUiCalItemNow > .sapUiCalItemText {
727
659
  border: 0.125rem solid @sapUiCalendarColorToday;
728
660
  }
@@ -883,16 +815,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
883
815
  }
884
816
  }
885
817
 
886
- .sapUiCalMulti .sapUiCalHead {
887
- .sapUiCalHeadB1 {
888
- margin-right: 0.25rem;
889
- }
890
-
891
- .sapUiCalHeadB2 {
892
- margin-left: 0.25rem;
893
- }
894
- }
895
-
896
818
  /*** compact mode (desktop size) ***/
897
819
 
898
820
  .sapUiSizeCompact .sapUiCal,
@@ -920,12 +842,25 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
920
842
  box-sizing: border-box;
921
843
  height: 2rem;
922
844
  padding: 0;
845
+ gap: 0.25rem;
923
846
  }
924
847
 
925
- .sapUiSizeCompact .sapUiCalHead > button {
848
+ .sapUiSizeCompact .sapUiCalHeadContent {
849
+ gap: 0.25rem;
850
+ }
851
+
852
+ .sapUiSizeCompact .sapUiCalHead button {
926
853
  height: 2rem;
927
854
  }
928
855
 
856
+ .sapUiSizeCompact .sapUiCalHead {
857
+ .sapUiCalHeadPrev,
858
+ .sapUiCalHeadNext,
859
+ .sapUiCalHeadToday {
860
+ line-height: 2rem;
861
+ }
862
+ }
863
+
929
864
  .sapUiSizeCompact .sapUiCalMonthView,
930
865
  .sapUiSizeCompact .sapUiCalMonthPicker,
931
866
  .sapUiSizeCompact .sapUiCalYearPicker {
@@ -933,7 +868,10 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
933
868
  }
934
869
 
935
870
  .sapUiSizeCompact .sapUiCal .sapUiCalMonthView,
936
- .sapUiSizeCompact.sapUiCal .sapUiCalMonthView,
871
+ .sapUiSizeCompact.sapUiCal .sapUiCalMonthView {
872
+ padding-bottom: 0.5rem;
873
+ }
874
+
937
875
  .sapUiSizeCompact .sapUiCal .sapUiCalRow,
938
876
  .sapUiSizeCompact.sapUiCal .sapUiCalRow {
939
877
  padding-left: 0.25rem;
@@ -941,19 +879,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
941
879
  padding-bottom: 0.5rem;
942
880
  }
943
881
 
944
- .sapUiSizeCompact .sapUiCal .sapUiCalHeadPrev,
945
- .sapUiSizeCompact.sapUiCal .sapUiCalHeadPrev {
946
- left: 0.25rem;
947
- }
948
-
949
- .sapUiSizeCompact .sapUiCalHeadBFirst {
950
- margin-right: 0.25rem;
951
- }
952
-
953
- .sapUiSizeCompact .sapUiCalHeadBLast {
954
- margin-left: 0.25rem;
955
- }
956
-
957
882
  .sapUiSizeCompact .sapUiCalMulti .sapUiCalHeadB3,
958
883
  .sapUiSizeCompact.sapUiCalMulti .sapUiCalHeadB3,
959
884
  .sapUiSizeCompact .sapUiCalIntLarge .sapUiCalHeadB3,
@@ -1102,16 +1027,6 @@ html[dir='rtl'] .sapUiCalTwoMonthsTwoColumns .sapUiCalHeadB4 {
1102
1027
  min-height: 6.5rem;
1103
1028
  }
1104
1029
 
1105
- .sapUiSizeCompact.sapUiCalMulti:not(.sapUiCalTwoMonthsInOneColumn) {
1106
- .sapUiCalHeadB1 {
1107
- margin-left: calc(~"50% - 11.75rem");
1108
- }
1109
-
1110
- .sapUiCalHeadB2 {
1111
- margin-right: calc(~"50% - 13.25rem");
1112
- }
1113
- }
1114
-
1115
1030
  /*** Phone ***/
1116
1031
  /* make calendar full-screen if on popup (DatePicker), but not if stand alone */
1117
1032
  html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalMonthPicker,
@@ -1131,43 +1046,6 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
1131
1046
 
1132
1047
  .sapUiCal.sapUiCalMulti.sapUiCalTwoMonthsTwoColumns {
1133
1048
 
1134
- .sapUiCalHead.sapUiCalHeaderWithTodayButton {
1135
- justify-content: space-evenly;
1136
- }
1137
-
1138
- .sapUiCalHead.sapUiCalHeaderWithTodayButton {
1139
- .sapUiCalHeadBPlaceholder {
1140
- width:100%;
1141
- }
1142
-
1143
- .sapUiCalHeadNext,
1144
- .sapUiCalHeadToday {
1145
- margin-left: 0.5rem;
1146
- }
1147
- }
1148
-
1149
- & .sapUiCalHeadB.sapUiCalHeadB1 {
1150
- margin-right: 0.25rem;
1151
- }
1152
-
1153
- & .sapUiCalHead .sapUiCalHeadB.sapUiCalHeadB4 {
1154
- margin-left: 0;
1155
- }
1156
-
1157
- & .sapUiCalHead:not(.sapUiCalHeaderWithTodayButton) {
1158
- .sapUiCalHeadB3 {
1159
- margin-left: 4.5rem;
1160
- }
1161
- .sapUiCalHeadB4 {
1162
- margin-left: 0;
1163
- }
1164
- }
1165
-
1166
- & .sapUiCalHeadB.sapUiCalHeadB2.sapUiCalHeadBFirst {
1167
- margin-left: 0.25rem;
1168
- margin-right: calc(~"25% - 7rem");
1169
- }
1170
-
1171
1049
  .sapUiCalHeadB.sapUiCalHeadB2.sapUiCalSingleYearButton,
1172
1050
  .sapUiCalHeadB.sapUiCalHeadB4.sapUiCalSingleYearButton {
1173
1051
  width: 12rem;
@@ -1209,12 +1087,10 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
1209
1087
  }
1210
1088
 
1211
1089
  .sapUiCalHeadB1 {
1212
- margin-right: 0.25rem;
1213
1090
  width: 5.25rem;
1214
1091
  }
1215
1092
 
1216
1093
  .sapUiCalHeadB2 {
1217
- margin-left: 0.25rem;
1218
1094
  width: 5.25rem;
1219
1095
  }
1220
1096
  }
@@ -1239,11 +1115,6 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
1239
1115
  .sapUiCalYearPicker {
1240
1116
  display: inline-block;
1241
1117
  }
1242
-
1243
- .sapUiCalHeadB1,
1244
- .sapUiCalHeadB2 {
1245
- margin: 0 3.125rem;
1246
- }
1247
1118
  }
1248
1119
 
1249
1120
  .sapUiCalDateInt {
@@ -8,8 +8,8 @@
8
8
  display: inherit;
9
9
  z-index: 0;
10
10
  height: var(--sapElement_Height);
11
- width: auto;
12
- min-width: 12rem;
11
+ width: 100%;
12
+ min-width: 8.5rem;
13
13
 
14
14
  &.sapUiFupButtonOnly {
15
15
  width: fit-content;