@ui5/webcomponents 2.21.0-rc.4 → 2.22.0-rc.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.21.0-rc.4",
+  "version": "2.22.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -620,6 +620,11 @@
               "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "form",
+              "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "icon",
               "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -711,6 +716,11 @@
                 "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "form",
+                "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -2659,6 +2669,11 @@
               "description": "Defines whether the clear icon of the input will be shown.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "show-two-months",
+              "description": "Defines whether the component displays two months side by side in the picker popup.\n\nWhen enabled, two consecutive months are shown, making it easier to select date ranges\nthat span multiple months without the need to navigate between months.\n\n**Note:** On mobile devices only a single month\nwill be displayed regardless of this setting.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "start-date-value",
               "description": "Returns the start date of the currently selected range as JavaScript Date instance.",
@@ -2839,6 +2854,11 @@
                 "description": "Defines whether the clear icon of the input will be shown.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "show-two-months",
+                "description": "Defines whether the component displays two months side by side in the picker popup.\n\nWhen enabled, two consecutive months are shown, making it easier to select date ranges\nthat span multiple months without the need to navigate between months.\n\n**Note:** On mobile devices only a single month\nwill be displayed regardless of this setting.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "start-date-value",
                 "description": "Returns the start date of the currently selected range as JavaScript Date instance.",
@@ -8814,11 +8834,6 @@
               "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "disabled",
-              "description": "Defines whether the slider handle is disabled.\n<br><br>\n<b>Note:</b> A disabled slider handle cannot be interacted with.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "max",
               "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
@@ -8843,11 +8858,6 @@
                 "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "disabled",
-                "description": "Defines whether the slider handle is disabled.\n<br><br>\n<b>Note:</b> A disabled slider handle cannot be interacted with.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "max",
                 "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
@@ -11548,6 +11558,11 @@
               "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "form",
+              "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "icon",
               "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -11644,6 +11659,11 @@
                 "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "form",
+                "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -11742,6 +11762,11 @@
               "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "form",
+              "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "icon",
               "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -11838,6 +11863,11 @@
                 "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "form",
+                "description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.21.0-rc.4",
+  "version": "2.22.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.21.0-rc.4",
-    "@ui5/webcomponents-icons": "2.21.0-rc.4",
-    "@ui5/webcomponents-icons-business-suite": "2.21.0-rc.4",
-    "@ui5/webcomponents-icons-tnt": "2.21.0-rc.4",
-    "@ui5/webcomponents-localization": "2.21.0-rc.4",
-    "@ui5/webcomponents-theming": "2.21.0-rc.4"
+    "@ui5/webcomponents-base": "2.22.0-rc.0",
+    "@ui5/webcomponents-icons": "2.22.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.0",
+    "@ui5/webcomponents-localization": "2.22.0-rc.0",
+    "@ui5/webcomponents-theming": "2.22.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.21.0-rc.4",
+    "@ui5/webcomponents-tools": "2.22.0-rc.0",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "3afe33f1a00c7174d9da5e232b0744f970a4caea"
+  "gitHead": "8b8cd84a2bf81d5b7affa6233f990e85c455b931"
 }

package/src/CalendarHeaderTemplate.tsx

@@ -4,91 +4,155 @@ import Icon from "./Icon.js";
 import slimArowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
-export default function CalendarTemplate(this: Calendar) {
+interface CalendarHeaderOptions {
+	headerText?: {
+		monthText: string;
+		yearText: string;
+		secondMonthText?: string;
+		secondYearText?: string;
+	};
+	isFirst?: boolean;
+	isLast?: boolean;
+	isMultiple?: boolean;
+}
+
+export default function CalendarHeaderTemplate(this: Calendar, options?: CalendarHeaderOptions) {
+	const headerText = options?.headerText;
+	const isFirst = options?.isFirst ?? true;
+	const isLast = options?.isLast ?? true;
+	const isMultiple = options?.isMultiple ?? false;
+
+	const monthText = headerText?.monthText ?? this._headerMonthButtonText;
+	const yearText = headerText?.yearText ?? this._headerYearButtonText;
+	const secondMonthText = headerText?.secondMonthText ?? this.secondMonthButtonText;
+	const secondYearText = headerText?.secondYearText ?? this._headerYearButtonTextSecType;
+
 	return (
-		<div class="ui5-calheader-root">
+		<div class={isMultiple ? "ui5-calheader ui5-calheader-multiple" : "ui5-calheader-root"}>
+			{renderPrevButton.call(this, isFirst, isMultiple)}
+			{renderMiddleButtons.call(this, {
+				monthText: monthText || "",
+				yearText: yearText || "",
+				secondMonthText: secondMonthText || "",
+				secondYearText: secondYearText || "",
+			})}
+			{renderNextButton.call(this, isFirst, isLast, isMultiple)}
+		</div>
+	);
+}
+
+function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean) {
+	if (!isFirst && isMultiple) {
+		return <div class="ui5-calheader-spacer"></div>;
+	}
+
+	return (
+		<div
+			data-ui5-cal-header-btn-prev
+			class={{
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
+			}}
+			part="calendar-header-arrow-button"
+			role="button"
+			onMouseDown={this.onPrevButtonClick}
+			tabindex={this._previousButtonDisabled ? -1 : 0}
+			title={this.accInfo.tooltipPrevButton}
+			aria-label={this.accInfo.ariaLabelPrevButton}
+			aria-description={this.accInfo.ariaLabelPrevButton}
+			aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
+		>
+			<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+		</div>
+	);
+}
+
+function renderMiddleButtons(
+	this: Calendar,
+	headerText: {
+		monthText: string;
+		yearText: string;
+		secondMonthText?: string;
+		secondYearText?: string;
+	}
+) {
+	return (
+		<div class="ui5-calheader-midcontainer">
 			<div
-				data-ui5-cal-header-btn-prev
-				class={{
-					"ui5-calheader-arrowbtn": true,
-					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
-				}}
-				part="calendar-header-arrow-button"
+				data-ui5-cal-header-btn-month
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderMonthButtonHidden}
+				tabindex={0}
 				role="button"
-				onMouseDown={this.onPrevButtonClick}
-				tabindex={this._previousButtonDisabled ? -1 : 0}
-				title={this.accInfo.tooltipPrevButton}
-				aria-label={this.accInfo.ariaLabelPrevButton}
-				aria-description={this.accInfo.ariaLabelPrevButton}
-				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
+				aria-label={this.accInfo.ariaLabelMonthButton}
+				aria-description={this.accInfo.ariaLabelMonthButton}
+				title={this.accInfo.tooltipMonthButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
+				onClick={this.onHeaderMonthButtonPress}
+				onKeyDown={this.onMonthButtonKeyDown}
+				onKeyUp={this.onMonthButtonKeyUp}
 			>
-				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+				<span>{headerText.monthText}</span>
+				{this.hasSecondaryCalendarType && headerText.secondMonthText &&
+					<span class="ui5-calheader-btn-sectext">{headerText.secondMonthText}</span>
+				}
 			</div>
 
-			<div class="ui5-calheader-midcontainer">
-				<div
-					data-ui5-cal-header-btn-month
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderMonthButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelMonthButton}
-					aria-description={this.accInfo.ariaLabelMonthButton}
-					title={this.accInfo.tooltipMonthButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
-					onClick={this.onHeaderMonthButtonPress}
-					onKeyDown={this.onMonthButtonKeyDown}
-					onKeyUp={this.onMonthButtonKeyUp}
-				>
-					<span>{this._headerMonthButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this.secondMonthButtonText}</span>
-					}
-				</div>
+			<div
+				data-ui5-cal-header-btn-year
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderYearButtonHidden}
+				tabindex={0}
+				role="button"
+				aria-label={this.accInfo.ariaLabelYearButton}
+				aria-description={this.accInfo.ariaLabelYearButton}
+				onClick={this.onHeaderYearButtonPress}
+				onKeyDown={this.onYearButtonKeyDown}
+				onKeyUp={this.onYearButtonKeyUp}
+				title={this.accInfo.tooltipYearButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
+			>
+				<span>{headerText.yearText}</span>
+				{this.hasSecondaryCalendarType && headerText.secondYearText &&
+					<span class="ui5-calheader-btn-sectext">{headerText.secondYearText}</span>
+				}
+			</div>
 
-				<div
-					data-ui5-cal-header-btn-year
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderYearButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelYearButton}
-					aria-description={this.accInfo.ariaLabelYearButton}
-					onClick={this.onHeaderYearButtonPress}
-					onKeyDown={this.onYearButtonKeyDown}
-					onKeyUp={this.onYearButtonKeyUp}
-					title={this.accInfo.tooltipYearButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
-				>
-					<span>{this._headerYearButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
-					}
-				</div>
-				<div
-					data-ui5-cal-header-btn-year-range
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderYearRangeButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelYearRangeButton}
-					aria-description={this.accInfo.ariaLabelYearRangeButton}
-					title={this.accInfo.tooltipYearRangeButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
-					onClick={this.onHeaderYearRangeButtonPress}
-					onKeyDown={this.onYearRangeButtonKeyDown}
-					onKeyUp={this.onYearRangeButtonKeyUp}
-				>
-					<span>{this._headerYearRangeButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
-					}
-				</div>
+			<div
+				data-ui5-cal-header-btn-year-range
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderYearRangeButtonHidden}
+				tabindex={0}
+				role="button"
+				aria-label={this.accInfo.ariaLabelYearRangeButton}
+				aria-description={this.accInfo.ariaLabelYearRangeButton}
+				title={this.accInfo.tooltipYearRangeButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
+				onClick={this.onHeaderYearRangeButtonPress}
+				onKeyDown={this.onYearRangeButtonKeyDown}
+				onKeyUp={this.onYearRangeButtonKeyUp}
+			>
+				<span>{this._headerYearRangeButtonText}</span>
+				{this.hasSecondaryCalendarType &&
+					<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+				}
 			</div>
+		</div>
+	);
+}
 
+function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
+	// In portrait or compact mode, show next button only on first calendar
+	// In landscape mode, show next button only on last calendar
+	const isVertical = this._portraitView || this._isCompactMode;
+	const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);
+	const shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);
+
+	if (shouldShowNextButton) {
+		return (
 			<div
 				data-ui5-cal-header-btn-next
 				class={{
@@ -106,5 +170,12 @@ export default function CalendarTemplate(this: Calendar) {
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>
-		</div>);
+		);
+	}
+
+	if (shouldShowSpacer) {
+		return <div class="ui5-calheader-spacer"></div>;
+	}
+
+	return null;
 }