@ui5/webcomponents 2.18.0-rc.1 → 2.18.0-rc.2

package/src/DatePickerTemplate.tsx

@@ -6,6 +6,6 @@ import type DatePicker from "./DatePicker.js";
 export default function DatePickerTemplate(this: DatePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this),
+		DatePickerPopoverTemplate.call(this, { initialFocus: this.initialFocusId }),
 	];
 }

package/src/DateRangePickerTemplate.tsx

@@ -8,7 +8,7 @@ import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this.initialFocusId }),
 	];
 }
 

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -55,6 +55,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							icon={multiSelectAll}
 							design="Transparent"
 							pressed={this._showAllItemsButtonPressed}
+							disabled={this._getSelectedItems().length === 0}
 							onClick={this.filterSelectedItems}
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>

package/src/i18n/messagebundle.properties

@@ -685,6 +685,30 @@ CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT = Shift + F4
 #XACT: Keyboard shortcut for year range button in the Calendar Header
 CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT = Shift + F4
 
+#XACT: Title for month next button in the Calendar Header
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE = Next Month
+
+#XACT: Title for year next button in the Calendar Header
+CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE = Next Year
+
+#XACT: Title for year range next button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE = Next Year Range
+
+#XACT: Keyboard shortcut for month next button in the Calendar Header
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT = Pageup
+
+#XACT: Title for month previous button in the Calendar Header
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE = Previous Month
+
+#XACT: Title for year previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE = Previous Year
+
+#XACT: Title for year range previous button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE = Previous Year Range
+
+#XACT: Keyboard shortcut for month previous button in the Calendar Header
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT = Pagedown
+
 #XACT: ARIA label for day picker selected range start
 DAY_PICKER_SELECTED_RANGE_START = {0} First date of range
 

package/src/themes/Calendar.css

@@ -15,8 +15,7 @@
     width: var(--_ui5_calendar_width);
     padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
-    flex-direction: column-reverse;
-    justify-content: flex-end;
+    flex-direction: column;
     overflow: hidden;
 }
 

package/src/themes/CalendarHeader.css

@@ -24,6 +24,8 @@
 	padding: 0;
 	font-size: var(--sapFontSize);
 	user-select: none;
+	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -41,10 +43,6 @@
 	display: none;
 }
 
-.ui5-calheader-arrowbtn:focus {
-	outline: none;
-}
-
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Lite_TextColor);
@@ -103,7 +101,7 @@
 	user-select: none;
 }
 
-.ui5-calheader-middlebtn:focus {
+.ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
 	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
@@ -111,13 +109,13 @@
 	background: var(--_ui5_calendar_header_middle_button_focus_background);
 }
 
-.ui5-calheader-middlebtn:focus:active {
+.ui5-calheader-middlebtn:focus:active, .ui5-calheader-arrowbtn:focus:active {
 	outline: var(--_ui5_calendar_header_middle_button_focus_active_outline);
 	outline-offset: -0.0625rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_active_background)
 }
 
-.ui5-calheader-middlebtn:focus::after {
+.ui5-calheader-middlebtn:focus::after, .ui5-calheader-arrowbtn:focus::after {
 	content: "";
 	display: var(--_ui5_calendar_header_middle_button_focus_after_display);
 	width: var(--_ui5_calendar_header_middle_button_focus_after_width);
@@ -128,6 +126,6 @@
 	left: var(--_ui5_calendar_header_middle_button_focus_after_left_offset);
 }
 
-.ui5-calheader-middlebtn:focus:active::after {
+.ui5-calheader-middlebtn:focus:active::after, .ui5-calheader-arrowbtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }

package/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,6 +40,11 @@
 	pointer-events: none;
 }
 
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
 :host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);