@ui5/webcomponents 2.17.0-rc.5 → 2.18.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.17.0-rc.5",
+  "version": "2.18.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.17.0-rc.5",
-    "@ui5/webcomponents-icons": "2.17.0-rc.5",
-    "@ui5/webcomponents-icons-business-suite": "2.17.0-rc.5",
-    "@ui5/webcomponents-icons-tnt": "2.17.0-rc.5",
-    "@ui5/webcomponents-localization": "2.17.0-rc.5",
-    "@ui5/webcomponents-theming": "2.17.0-rc.5"
+    "@ui5/webcomponents-base": "2.18.0-rc.0",
+    "@ui5/webcomponents-icons": "2.18.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.18.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.18.0-rc.0",
+    "@ui5/webcomponents-localization": "2.18.0-rc.0",
+    "@ui5/webcomponents-theming": "2.18.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.17.0-rc.5",
+    "@ui5/webcomponents-tools": "2.18.0-rc.0",
     "cypress": "^15.3.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "affb457b35f4a92b8d6632de0042c8a9da7c244e"
+  "gitHead": "a07a3a72bdeb6cc7c9d2974d1ae5a28aa4eef271"
 }

package/src/DatePickerPopoverTemplate.tsx

@@ -14,10 +14,11 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
-export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook }) {
+export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook, initialFocus?: string }) {
 	const header = hooks?.header || defaultHeader;
 	const content = hooks?.content || defaultContent;
 	const footer = hooks?.footer || defaultFooter;
+	const initialFocus = hooks?.initialFocus;
 
 	return (
 		<ResponsivePopover
@@ -31,6 +32,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 			accessibleName={this.pickerAccessibleName}
 			hideArrow={true}
 			_hideHeader={this._shouldHideHeader}
+			initialFocus={initialFocus}
 			onKeyDown={this._onkeydown}
 			onClose={this.onResponsivePopoverAfterClose}
 			onOpen={this.onResponsivePopoverAfterOpen}

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 }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
 	];
 }
 

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -19,7 +19,7 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange)
 			hideArrow={true}
 			_hideHeader={true}
 			onClose={this.onPopoverClose}
-			onOpen={this.onPopoverOpen}
+			onBeforeOpen={this.onPopoverBeforeOpen}
 			onKeyDown={this.onKeyDownPopover}
 		>
 			{this._hasCurrentOptionTemplate &&

package/src/InputTemplate.tsx

@@ -33,6 +33,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						required={this.required}
 						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}

package/src/TimePickerPopoverTemplate.tsx

@@ -5,6 +5,7 @@ import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
@@ -22,7 +23,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={!this.hasValueStateText}
+				_hideHeader={this._shouldHideHeader}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -31,6 +32,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ !!this.showHeader && defaultHeader.call(this) }
+
 				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
@@ -61,7 +64,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
-					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+					{ this.hasValueStateText && valueStateTextHeader.call(this) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -83,20 +86,37 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 	);
 }
 
+function defaultHeader(this: TimePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					icon={decline}
+					design="Transparent"
+					onClick={this._togglePicker}
+				>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
 function valueStateMessage(this: TimePicker) {
 	return (
 		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
 	);
 }
 
-function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+function valueStateTextHeader(this: TimePicker) {
 	if (!this.hasValueStateText) {
 		return;
 	}
 
 	return (
 		<div
-			slot="header"
+			slot={!this.showHeader ? "header" : undefined}
 			class={{
 				"ui5-popover-header": true,
 				"ui5-valuestatemessage-header": true,
@@ -106,7 +126,6 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
-			style={style}
 		>
 			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
 			{ valueStateMessage.call(this) }

package/src/i18n/messagebundle.properties

@@ -525,6 +525,9 @@ TEXTAREA_CHARACTERS_LEFT={0} characters remaining
 #XTXT: Text for characters over
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 
+#XTXT: Text for characters over in form
+TEXTAREA_EXCEEDS_MAXLENGTH =Value too long by {0} characters.
+
 #XFLD: Timepicker slider header
 TIMEPICKER_HOURS_LABEL=Hours
 

package/src/themes/Button.css

@@ -377,7 +377,7 @@ bdi {
 	top:0;
 }
 
-:host([has-end-icon]) .ui5-button-root {
+:host([has-end-icon]:not([icon])) .ui5-button-root {
 	justify-content: flex-start;
 }
 
@@ -385,6 +385,6 @@ bdi {
 	justify-content: center;
 }
 
-:host([has-end-icon]) .ui5-button-end-icon {
+:host([has-end-icon]:not([icon])) .ui5-button-end-icon {
 	margin-left: auto;
 }

package/src/themes/TableGrowing.css

@@ -6,6 +6,7 @@
 	flex-direction: column;
 	cursor: pointer;
 	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {

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

@@ -1,10 +1,10 @@
-:root, [dir="ltr"] {
+:root,
+:dir(ltr) {
 	--_ui5_rotation_90deg: rotate(90deg);
 	--_ui5_rotation_minus_90deg: rotate(-90deg);
 
 	--_ui5_icon_transform_scale: none;
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_90deg);
-	--_ui5_timeline_scroll_container_offset: 0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: 0.1875rem 0 0 0.1875rem;
 	--_ui5_popover_right_arrow_margin: 0.1875rem 0 0 -0.375rem;
@@ -15,15 +15,11 @@
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem 0 0 0.5rem;
 	--_ui5_progress_indicator_remaining_bar_border_radius: 0 0.5rem 0.5rem 0;
 	--_ui5_menu_submenu_margin_offset: -0.25rem 0;
-
-	--_ui5-shellbar-notification-btn-count-offset: 0.125rem;
 }
 
-[dir="rtl"],
-[dir="rtl"] :host {
+:dir(rtl) {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
-	--_ui5_timeline_scroll_container_offset: -0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: .1875rem .125rem 0 0;
 	--_ui5_popover_right_arrow_margin: .1875rem .25rem 0 0;
@@ -38,5 +34,4 @@
 
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0px;
-	--_ui5-shellbar-notification-btn-count-offset: auto;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem;

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

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }