@ui5/webcomponents 2.13.2 → 2.14.0-rc.1

package/src/DynamicDateRangeInputTemplate.tsx

@@ -5,12 +5,7 @@ import appointment from "@ui5/webcomponents-icons/dist/appointment-2.js";
 
 export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
 	return (
-		<div
-			class="ui5-dynamic-date-range-root"
-			style={{
-				width: "100%",
-			}}
-		>
+		<div class="ui5-dynamic-date-range-root">
 			<Input
 				data-sap-focus-ref
 				id={`${this._id}-inner`}

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -41,15 +41,17 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange)
 					selectionMode="Single"
 					onItemClick={this._selectOption}
 				>
-					{this.optionsObjects.map(option => {
-						return <ListItemStandard
+					{this.optionsObjects.map(option => (
+						<ListItemStandard
 							selected={option.operator === this.value?.operator}
 							iconEnd={true}
 							icon={option.icon}
-							type={!option.template ? ListItemType.Active : ListItemType.Navigation}>
+							wrappingType="Normal"
+							type={option.template ? ListItemType.Navigation : ListItemType.Active}
+						>
 							{option.text}
-						</ListItemStandard>;
-					})}
+						</ListItemStandard>
+					))}
 				</List>
 			</div>
 				:

package/src/SelectPopoverTemplate.tsx

@@ -11,6 +11,7 @@ export default function SelectPopoverTemplate(this: Select) {
 		<>
 			{this.options.length > 0 &&
 				<ResponsivePopover
+					id={this.responsivePopoverId}
 					class={{
 						"ui5-select-popover": true,
 						...this.classes.popover

package/src/SelectTemplate.tsx

@@ -40,6 +40,7 @@ export default function SelectTemplate(this: Select) {
 					onKeyUp={this._onkeyup}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}
+					aria-controls={this.responsivePopoverId}
 				>
 					{this.hasCustomLabel
 						? <slot name="label"></slot>
@@ -62,11 +63,12 @@ export default function SelectTemplate(this: Select) {
 				}
 
 				{!this.icon && !this.readonly &&
-					<div class={{
-						"ui5-select-icon-root": true,
-						"inputIcon": true,
-						"inputIcon--pressed": this._iconPressed,
-					}}>
+					<div part="icon-wrapper"
+						class={{
+							"ui5-select-icon-root": true,
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}}>
 						<Icon
 							part="icon"
 							name={slimArrowDown}

package/src/dynamic-date-range-options/DateRangeTemplate.tsx

@@ -2,7 +2,7 @@ import type DynamicDateRange from "../DynamicDateRange.js";
 import Calendar from "../Calendar.js";
 import CalendarDateRange from "../CalendarDateRange.js";
 
-export default function DateRangeRangeTemplate(this: DynamicDateRange) {
+export default function DateRangeTemplate(this: DynamicDateRange) {
 	return (
 		<Calendar onSelectionChange={this.handleSelectionChange} selectionMode="Range">
 			<CalendarDateRange

package/src/dynamic-date-range-options/LastNextTemplate.tsx

@@ -0,0 +1,71 @@
+import DynamicDateRange from "../DynamicDateRange.js";
+import StepInput from "../StepInput.js";
+import Select from "../Select.js";
+import type { SelectChangeEventDetail } from "../Select.js";
+import Option from "../Option.js";
+import Label from "../Label.js";
+import type LastOptions from "./LastOptions.js";
+import type NextOptions from "./NextOptions.js";
+import {
+	DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT,
+	DYNAMIC_DATE_RANGE_UNIT_OF_TIME_LABEL_TEXT,
+} from "../generated/i18n/i18n-defaults.js";
+
+export default function LastNextTemplate(this: DynamicDateRange) {
+	const currentOption = this._currentOption as LastOptions | NextOptions;
+
+	const availableOptionInfos = currentOption.availableOptions;
+
+	const filteredOptions = availableOptionInfos.filter(info =>
+		currentOption.options?.includes(info.operator) || currentOption.operator === info.operator
+	);
+
+	const isGrouped = filteredOptions.length > 1;
+
+	const currentNumber = this.currentValue?.values ? typeof this.currentValue.values[0] === "number" ? this.currentValue.values[0] : 1 : 1;
+	const currentOperator = this.currentValue?.operator || filteredOptions[0]?.operator || "";
+
+	// Input handlers
+	const handleNumberChange = (e: CustomEvent) => {
+		const newValue = Number((e.target as StepInput).value);
+		this.currentValue = {
+			operator: currentOperator,
+			values: [newValue],
+		};
+	};
+
+	const handleUnitChange = (e: CustomEvent<SelectChangeEventDetail>) => {
+		const newOperator = String(e.detail.selectedOption.value);
+		this.currentValue = {
+			operator: newOperator,
+			values: [currentNumber],
+		};
+	};
+
+	return (
+		<div class="ui5-last-next-container ui5-last-next-container-padded">
+			<div class="ui5-ddr-input-container ui5-ddr-input-container-right-aligned">
+				<Label class="ui5-ddr-label">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT)}</Label>
+				<StepInput
+					value={currentNumber}
+					min={1}
+					max={isGrouped ? 9999 : 999}
+					onChange={handleNumberChange}
+				/>
+
+				{isGrouped && (
+					<>
+						<Label class="ui5-ddr-label">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_RANGE_UNIT_OF_TIME_LABEL_TEXT)}</Label>
+						<Select value={currentOperator} onChange={handleUnitChange}>
+							{filteredOptions.map(option => (
+								<Option value={option.operator} key={option.operator}>
+									{option.unitText}
+								</Option>
+							))}
+						</Select>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/i18n/messagebundle.properties

@@ -751,3 +751,63 @@ DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
 DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Navigate back
 #XACT: ARIA description for the column header row of the table
 TABLE_COLUMN_HEADER_ROW=Column Header Row
+
+#XFLD: Text for the "Last Days" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_LAST_DAYS_TEXT=Last X Days
+
+#XFLD: Text for the "Next Days" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NEXT_DAYS_TEXT=Next X Days
+
+#XFLD: Text for the "Last Weeks" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_LAST_WEEKS_TEXT=Last X Weeks
+
+#XFLD: Text for the "Next Weeks" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NEXT_WEEKS_TEXT=Next X Weeks
+
+#XFLD: Text for the "Last Months" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_LAST_MONTHS_TEXT=Last X Months
+
+#XFLD: Text for the "Next Months" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NEXT_MONTHS_TEXT=Next X Months
+
+#XFLD: Text for the "Last Quarters" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_LAST_QUARTERS_TEXT=Last X Quarters
+
+#XFLD: Text for the "Next Quarters" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NEXT_QUARTERS_TEXT=Next X Quarters
+
+#XFLD: Text for the "Last Years" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_LAST_YEARS_TEXT=Last X Years
+
+#XFLD: Text for the "Next Years" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NEXT_YEARS_TEXT=Next X Years
+
+#XFLD: Label for the value input field in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_VALUE_LABEL_TEXT=Value for X
+
+#XFLD: Label for the unit of time selection in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_UNIT_OF_TIME_LABEL_TEXT=Unit of Time
+
+#XFLD: Unit name for days in DynamicDateRange options.
+DYNAMIC_DATE_RANGE_DAYS_UNIT_TEXT=Days
+
+#XFLD: Unit name for weeks in DynamicDateRange options.
+DYNAMIC_DATE_RANGE_WEEKS_UNIT_TEXT=Weeks
+
+#XFLD: Unit name for months in DynamicDateRange options.
+DYNAMIC_DATE_RANGE_MONTHS_UNIT_TEXT=Months
+
+#XFLD: Unit name for quarters in DynamicDateRange options.
+DYNAMIC_DATE_RANGE_QUARTERS_UNIT_TEXT=Quarters
+
+#XFLD: Unit name for years in DynamicDateRange options.
+DYNAMIC_DATE_RANGE_YEARS_UNIT_TEXT=Years
+
+#XFLD: Template for combined Last options. {0} = units separated by separator.
+DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=Last X {0} (included)
+
+#XFLD: Template for combined Next options. {0} = units separated by separator.
+DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Next X {0} (included)
+
+#XFLD: Suffix text for included date range options.
+DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(included)

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -464,6 +464,13 @@ FORM_TEXTFIELD_REQUIRED=[[[Ƥĺēąşē ƒįĺĺ įŋ ţĥįş ƒįēĺƌ.∙∙
 TABLE_SELECTION=[[[Ŝēĺēċţįŏŋ∙∙∙∙∙]]]
 TABLE_ROW_SELECTOR=[[[Řŏŵ Ŝēĺēċţŏŗ∙∙∙∙∙∙∙]]]
 TABLE_NO_DATA=[[[Ńŏ Ďąţą∙∙∙∙∙∙∙]]]
+TABLE_SINGLE_SELECTABLE=[[[Ŝįŋğĺē Ŝēĺēċţįŏŋ Ţąƃĺē∙∙∙∙∙]]]
+TABLE_MULTI_SELECTABLE=[[[Μűĺţį Ŝēĺēċţįŏŋ Ţąƃĺē∙∙∙∙∙]]]
+TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=[[[Ĉŏŋţąįŋş Ŝēĺēċţ Āĺĺ Ĉĥēċķƃŏχ∙∙∙∙∙∙∙∙]]]
+TABLE_COLUMNHEADER_SELECTALL_CHECKED=[[[Ĉĥēċķēƌ∙∙∙∙∙∙∙]]]
+TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=[[[Ńŏţ Ĉĥēċķēƌ∙∙∙∙∙∙∙∙]]]
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=[[[Ĉŏŋţąįŋş Ĉĺēąŗ Āĺĺ Ɓűţţŏŋ∙∙∙∙∙∙∙]]]
+TABLE_COLUMNHEADER_CLEARALL_DISABLED=[[[Ďįşąƃĺēƌ∙∙∙∙∙∙]]]
 TABLE_ROW_POPIN=[[[Řŏŵ Ƥŏρįŋ∙∙∙∙∙]]]
 TABLE_MORE=[[[Μŏŗē]]]
 TABLE_MORE_DESCRIPTION=[[[Ţŏ ĺŏąƌ ɱŏŗē ŗŏŵş, ρŗēşş Ĕŋţēŗ ŏŗ Ŝρąċē∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]

package/src/themes/Avatar.css

@@ -275,6 +275,12 @@
 	border-color: var(--sapAvatar_Lite_BorderColor);
 }
 
+:host([_color-scheme="Transparent"]),
+:host([ui5-avatar][color-scheme="Transparent"]) {
+	background-color: transparent;
+	border-color: transparent;
+}
+
 :host([_has-image]) {
 	color: var(--ui5-avatar-accent10-color);
 	border: var(--ui5-avatar-optional-border);

package/src/themes/DayPicker.css

@@ -39,6 +39,11 @@
 	border-radius: var(--_ui5_daypicker_item_border_radius);
 }
 
+.ui5-dp-weekname,
+.ui5-dp-dayname {
+	cursor: default;
+}
+
 .ui5-dp-weekname {
 	color: var(--_ui5_daypicker_weekname_color);
 }
@@ -355,7 +360,7 @@
 }
 
 .ui5-dp-item:not(:focus).ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-specialday {
-	border-end-end-radius: var(--_ui5_daypicker_special_day_selected_border_radius_bottom); 
+	border-end-end-radius: var(--_ui5_daypicker_special_day_selected_border_radius_bottom);
 	border-end-start-radius: var(--_ui5_daypicker_special_day_selected_border_radius_bottom);
 }
 

package/src/themes/DynamicDateRange.css

@@ -4,4 +4,8 @@
 :host {
     width: var(--_ui5_input_width, 12.5625rem);
     display: inline-block;
+}
+
+.ui5-dynamic-date-range-root {
+    width: 100%;
 }

package/src/themes/DynamicDateRangePopover.css

@@ -1,47 +1,94 @@
 [ui5-responsive-popover]::part(content) {
-    padding: 0;
+	padding: 0;
 }
 
 [ui5-responsive-popover] {
-    width: 320px;
-    height: 512px;
+	width: 320px;
+	height: 512px;
 }
 
 [ui5-responsive-popover]::part(content) {
-    width: 320px;
-    height: 512px;
+	width: 320px;
+	height: 512px;
 }
 
 .ui5-dynamic-date-range-option-container {
-    display: flex;
-    flex-direction: column;
-    align-content: center;
-    justify-content: space-around;
-    height: 100%;
-    width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+	justify-content: space-around;
+	height: 100%;
+	width: 100%;
+}
+
+.ui5-dynamic-date-range-unified-option {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: flex-start;
+	height: 100%;
+}
+
+.ui5-last-next-container {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: flex-start;
+	height: 100%;
+}
+
+.ui5-last-next-container-padded {
+	padding: 0 1rem 0.5rem 1rem;
+}
+
+.ui5-ddr-input-container {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: flex-start;
+	gap: 0.25rem;
+	width: fit-content;
+}
+
+.ui5-ddr-input-container-right-aligned {
+	text-align: right;
+}
+
+.ui5-ddr-label {
+	margin: 1rem 0 0.5rem 0;
+	text-align: left;
+}
+
+.ui5-ddr-input-row {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .ui5-ddr-current-value {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 50px;
-    font-size: .875rem;
-    font-family: var(--sapFontFamily);
-    font-weight: normal;
-    color: var(--sapContentLabelColor);
-    background-color: lightgray;
-    padding-inline-start: 10px;
-    font-style: italic;
-    text-overflow: ellipsis;
-    overflow: hidden;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 50px;
+	font-size: .875rem;
+	font-family: var(--sapFontFamily);
+	font-weight: normal;
+	color: var(--sapContentLabelColor);
+	background-color: lightgray;
+	padding-inline-start: 10px;
+	font-style: italic;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 [ui5-responsive-popover]::part(footer) {
-    display: flex;
-    justify-content: end;
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
+	display: flex;
+	justify-content: end;
+	padding-top: 0.125rem;
+	padding-bottom: 0.125rem;
 }
 
 .ui5-ddr-arrow-back-btn {
@@ -73,17 +120,17 @@
 }
 
 [ui5-responsive-popover]::part(header) {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    height: 2.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	height: 2.5rem;
 }
 
 .ui5-ddr-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    height: 2.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	height: 2.5rem;
 }

package/src/themes/ListItem.css

@@ -91,7 +91,7 @@
 }
 
 :host([has-title][description]) .ui5-li-title {
-	padding-bottom: 0.375rem;
+	padding-bottom: 0.5rem;
 }
 
 .ui5-li-text-wrapper {
@@ -99,7 +99,6 @@
 }
 
 :host([description]) .ui5-li-text-wrapper {
-	height: 100%;
 	justify-content: space-between;
 	padding: 0.125rem 0;
 }

package/src/themes/MonthPicker.css

@@ -40,7 +40,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	cursor: default;
+	cursor: pointer;
 	outline: none;
 	position: relative;
 	border: var(--_ui5_monthpicker_item_border);

package/src/themes/YearPicker.css

@@ -37,7 +37,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	cursor: default;
+	cursor: pointer;
 	outline: none;
 	position: relative;
 	border: var(--_ui5_yearpicker_item_border);

package/src/themes/YearRangePicker.css

@@ -37,7 +37,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	cursor: default;
+	cursor: pointer;
 	outline: none;
 	position: relative;
 	border: var(--_ui5_yearpicker_item_border);

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

@@ -165,6 +165,9 @@
 
 	/* DynamicPageTitle */
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
+
+	/* ShellBar */
+	--_ui5-shellbar-separator-height: 1.5rem;
 }
 
 [data-ui5-compact-size],
@@ -401,4 +404,7 @@
 
 	/* DynamicPageTitle */
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
+
+	/* ShellBar */
+	--_ui5-shellbar-separator-height: 1.5rem;
 }