@ui5/webcomponents 2.21.0 → 2.22.0-rc.1

package/src/themes/Calendar.css

@@ -17,8 +17,152 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
+}
+
+.ui5-dt-cal--multiple.ui5-cal-root {
+    width: var(--_ui5_calendar_multiple_width);
+	height: var(--_ui5_calendar_multiple_months_height);
+}
+
+.ui5-dt-cal--portrait.ui5-dt-cal--multiple {
+	height: calc(2 * var(--_ui5_calendar_height));
 }
 
 .ui5-cal-root .ui5-cal-content {
     padding: 0 var(--_ui5_calendar_left_right_padding) var(--_ui5_calendar_top_bottom_padding);
+}
+
+.ui5-cal-root .ui5-cal-content-multiple {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    flex-wrap: nowrap;
+    overflow: visible;
+}
+
+.ui5-cal-multiple-months-wrapper, .ui5-cal-multiple-months-header-wrapper {
+    display: flex;
+    gap: var(--_ui5_calendar_multiple_gap);
+    flex-wrap: nowrap;
+    flex-direction: var(--_ui5_calendar_multiple_layout);
+}
+
+.ui5-cal-multiple-months-header-wrapper {
+	width: 100%;
+}
+
+.ui5-cal-month-container, .ui5-cal-month-header-container {
+    display: flex;
+    flex-direction: column;
+	flex: 1;
+}
+
+.ui5-cal-root .ui5-calheader.ui5-calheader-multiple {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: var(--_ui5_calendar_header_height);
+    padding: var(--_ui5_calendar_header_padding);
+    box-sizing: border-box;
+}
+
+.ui5-calheader-multiple .ui5-calheader-midcontainer {
+    display: flex;
+    gap: var(--_ui5_calendar_header_midcontainer_gap);
+    flex: 1;
+    justify-content: center;
+    padding: 0;
+    height: 100%;
+}
+
+.ui5-calheader-multiple .ui5-calheader-arrowbtn {
+    flex-shrink: var(--_ui5_calendar_header_arrow_button_flex_shrink);
+    height: 100%;
+}
+
+.ui5-calheader-spacer {
+    width: var(--_ui5_calendar_header_arrow_button_width);
+    flex-shrink: 0;
+}
+
+.ui5-cal-daypicker-wrapper {
+    position: relative;
+}
+
+.ui5-cal-daypicker-overlay {
+    background-color: var(--sapBlockLayer_Background);
+    opacity: var(--sapBlockLayer_Opacity);
+    top: calc(var(--_ui5_calendar_header_height) + var(--_ui5_calendar_top_bottom_padding));
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    outline: 0 none;
+    z-index: 11;
+    pointer-events: all;
+    display: none;
+}
+
+.ui5-cal-content-multiple:has(~ .ui5-cal-overlay-container:not(.ui5-cal-overlay-hidden)) .ui5-cal-daypicker-overlay {
+    display: block;
+}
+
+.ui5-cal-overlay-container {
+  position: absolute;
+  width: var(--_ui5_calendar_overlay_width);
+  left: 50%;
+  top: var(--_ui5_calendar_overlay_top);
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 13;
+  pointer-events: all;
+  background: var(--sapGroup_ContentBackground);
+  border-radius: var(--_ui5_popup_border_radius);
+  min-height: 2rem;
+  box-sizing: border-box;
+}
+
+
+.ui5-cal-overlay-container [ui5-monthpicker]::part(month-picker-root),
+.ui5-cal-overlay-container [ui5-yearpicker]::part(year-picker-root),
+.ui5-cal-overlay-container [ui5-yearrangepicker]::part(year-range-picker-root) {
+	padding: 0.5rem;
+}
+
+.ui5-cal-overlay-hidden {
+  display: none;
+}
+
+.ui5-calheader-default-multiple, .ui5-calheader-default-multiple .ui5-calheader-root {
+	width: 100%;
+}
+
+.ui5-calheader-multiple .ui5-calheader-middlebtn {
+	flex:none;
+}
+
+.ui5-cal-root.ui5-dt-cal--portrait .ui5-cal-content-multiple {
+    gap: 0;
+}
+
+.ui5-cal-root.ui5-dt-cal--portrait .ui5-cal-multiple-months-wrapper {
+    flex-direction: column;
+    gap: var(--_ui5_calendar_multiple_gap);
+}
+
+.ui5-dt-cal--portrait.ui5-cal-root:has(.ui5-cal-content-multiple) {
+    width: var(--_ui5_calendar_width);
+}
+
+.ui5-dt-cal--portrait .ui5-cal-content-multiple > * {
+    width: 100%;
+    min-width: auto;
+    max-width: 100%;
+}
+
+.ui5-dt-cal--portrait .ui5-cal-overlay-container {
+	width: 100%;
 }

package/src/themes/DatePickerPopover.css

@@ -1,5 +1,6 @@
 .ui5-date-picker-popover {
-	width: var(--_ui5_calendar_width);
+	width: auto;
+	min-width: var(--_ui5_calendar_width);
 	.ui5-popover-header {
 		width: 100%;
 	}
@@ -13,7 +14,7 @@
 }
 
 [ui5-calendar] {
-	width: 100%;
+	width: auto;
 	display: flex;
 	justify-content: center;
 }

package/src/themes/Popup.css

@@ -9,4 +9,8 @@
 
 :host(:focus-visible) {
     outline: none;
+}
+
+:host(.ui5-popup-opening) {
+    opacity: 0.1;
 }

package/src/themes/ResponsivePopoverCommon.css

@@ -190,7 +190,8 @@
 	width: 100%;
 }
 
-.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn {
+.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn, 
+.ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	margin-left: 0.5rem;
 }
 
@@ -199,3 +200,7 @@
 	right: 1rem;
 }
 
+.ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
+	width: 4.5rem;
+}
+

package/src/themes/base/CalendarHeader-parameters.css

@@ -16,4 +16,13 @@
 	--_ui5_calendar_header_middle_button_focus_active_outline: none;
 	--_ui5_calendar_header_middle_button_focus_active_background: var(--sapButton_Active_Background);
 	--_ui5_calendar_header_middle_button_focus_after_border: 1px dotted var(--sapContent_FocusColor);
+	--_ui5_calendar_header_midcontainer_gap: 0.5rem;
+	--_ui5_calendar_header_arrow_button_flex_shrink: 0;
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_calendar_header_midcontainer_gap: 0;
+		--_ui5_calendar_header_arrow_button_flex_shrink: 1;
+	}
 }

package/src/themes/base/TextArea-parameters.css

@@ -23,7 +23,7 @@
 	--_ui5_textarea_value_state_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapContent_FocusColor);
 	--_ui5_textarea_min_height: 2.25rem;
-	--_ui5_textarea_wrapper_padding: 0;
+	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0;
 	--_ui5_textarea_warning_error_wrapper_padding: 0;
 	--_ui5_textarea_information_wrapper_padding: 0;

package/src/themes/base/sizes-parameters.css

@@ -7,6 +7,11 @@
 	--_ui5_calendar_header_height: 3rem;
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
 	--_ui5_calendar_header_padding: 0.25rem 0;
+	--_ui5_calendar_multiple_layout: row;
+	--_ui5_calendar_multiple_gap: 1rem;
+	--_ui5_calendar_multiple_width: calc((var(--_ui5_calendar_width) * 2) + (var(--_ui5_calendar_left_right_padding) * 2));
+	--_ui5_calendar_overlay_top: 57%;
+	--_ui5_calendar_overlay_width: 16rem;
 
 	--_ui5_checkbox_root_side_padding: .6875rem;
 	--_ui5_checkbox_icon_size: 1rem;
@@ -26,6 +31,7 @@
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 0.5rem;
 	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0;
 	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
+	--_ui5_calendar_multiple_months_height: var(--_ui5_calendar_height);
 
 	/* CalendarLegend */
 	--_ui5-calendar-legend-item-root-focus-offset: -0.125rem;
@@ -177,6 +183,12 @@
 		--_ui5_calendar_header_height: 2rem;
 		--_ui5_calendar_header_arrow_button_width: 2rem;
 		--_ui5_calendar_header_padding: 0;
+		--_ui5_calendar_multiple_layout: column;
+		--_ui5_calendar_multiple_gap: 0.5rem;
+		--_ui5_calendar_multiple_width: var(--_ui5_calendar_width);
+		--_ui5_calendar_overlay_top: 54%;
+		--_ui5_calendar_overlay_width: 100%;
+		--_ui5_calendar_multiple_months_height: calc(2 * var(--_ui5_calendar_height));
 
 		/* Calendar Legend */
 		--_ui5-calendar-legend-root-padding: 0.5rem;

package/src/themes/sap_horizon/TextArea-parameters.css

@@ -16,7 +16,6 @@
 	--_ui5_textarea_readonly_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapField_Active_BorderColor);
 	--_ui5_textarea_value_state_focus_offset: 1px;
-	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_warning_error_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_information_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;

package/src/themes/sap_horizon_dark/TextArea-parameters.css

@@ -16,7 +16,6 @@
 	--_ui5_textarea_readonly_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapField_Active_BorderColor);
 	--_ui5_textarea_value_state_focus_offset: 1px;
-	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_warning_error_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_information_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;