@ui5/webcomponents 2.9.1-rc.0 → 2.10.0-rc.1

package/src/ListItemStandardTemplate.tsx

@@ -2,6 +2,7 @@ import Icon from "./Icon.js";
 import type ListItemStandard from "./ListItemStandard.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
+import WrappingType from "./types/WrappingType.js";
 
 const predefinedHooks: Partial<ListItemHooks> = {
 	imageBegin,
@@ -19,29 +20,67 @@ export default function ListItemStandardTemplate(this: ListItemStandard, hooks?:
 function listItemContent(this: ListItemStandard) {
 	return <>
 		<div class="ui5-li-text-wrapper">
-			<span part="title" class="ui5-li-title">
-				<slot></slot>
-			</span>
-			{this.description && (
-				<div class="ui5-li-description-info-wrapper">
-					<span part="description" class="ui5-li-desc">{this.description}</span>
-					{
-						this.additionalText && (
-							<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
-						)
-					}
-				</div>
-			)}
+			{renderTitle.call(this)}
+			{renderDescription.call(this)}
 
 			{!this.typeActive && <span class="ui5-hidden-text">{this.type}</span>}
 		</div>
 
-		{!this.description && this.additionalText && (
-			<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
-		)}
+		{!this.description && renderAdditionalText.call(this)}
 	</>;
 }
 
+function renderTitle(this: ListItemStandard) {
+	if (this.wrappingType === WrappingType.Normal) {
+		return this.expandableTextTemplate?.call(this, {
+			className: "ui5-li-title",
+			text: this._textContent,
+			maxCharacters: this._maxCharacters,
+			part: "title",
+		});
+	}
+
+	return (
+		<span part="title" class="ui5-li-title">
+			{this.text ? this.text : <slot></slot>}
+		</span>
+	);
+}
+
+function renderDescription(this: ListItemStandard) {
+	if (!this.description) {
+		return null;
+	}
+
+	if (this.wrappingType === WrappingType.Normal) {
+		return (
+			<div class="ui5-li-description-info-wrapper">
+				{this.expandableTextTemplate?.call(this, {
+					className: "ui5-li-desc",
+					text: this.description,
+					maxCharacters: this._maxCharacters,
+					part: "description",
+				})}
+				{renderAdditionalText.call(this)}
+			</div>
+		);
+	}
+
+	return (
+		<div class="ui5-li-description-info-wrapper">
+			<span part="description" class="ui5-li-desc">{this.description}</span>
+			{renderAdditionalText.call(this)}
+		</div>
+	);
+}
+
+function renderAdditionalText(this: ListItemStandard) {
+	if (!this.additionalText) {
+		return null;
+	}
+	return <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>;
+}
+
 function imageBegin(this: ListItemStandard) {
 	if (this.hasImage) {
 		return <div class="ui5-li-image">

package/src/MenuTemplate.tsx

@@ -12,6 +12,7 @@ export default function MenuTemplate(this: Menu) {
 			class="ui5-menu-rp"
 			placement="Bottom"
 			verticalAlign="Bottom"
+			horizontalAlign={this.horizontalAlign}
 			opener={this.opener}
 			open={this.open}
 			preventInitialFocus={true}

package/src/TableTemplate.tsx

@@ -16,6 +16,7 @@ export default function TableTemplate(this: Table) {
 				aria-multiselectable={this._ariaMultiSelectable}
 			>
 				<slot name="headerRow"></slot>
+
 				<div id="rows">
 					<div id="spacer" style={this.styles.spacer}>
 						<slot></slot>

package/src/TreeItemBaseTemplate.tsx

@@ -54,7 +54,13 @@ function listItemPostContent(this: TreeItemBase) {
 }
 
 function listItemContent() { }
-function imageBegin() { }
+function imageBegin(this: TreeItemBase) {
+	if (this.hasImage) {
+		return <div class="ui5-tree-item-image">
+			<slot name="image"></slot>
+		</div>;
+	}
+}
 function iconBegin(this: TreeItemBase) {
 	return this.icon ? <Icon part="icon" name={this.icon} class="ui5-li-icon" /> : <></>;
 }

package/src/features/ListItemStandardExpandableTextTemplate.tsx

@@ -0,0 +1,31 @@
+import ExpandableText from "../ExpandableText.js";
+import type ListItemStandard from "../ListItemStandard.js";
+import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTemplateParams.js";
+
+/**
+ * Provides a template for rendering text with the ExpandableText component
+ * when wrappingType is set to "Normal".
+ *
+ * @param {object} injectedProps - The configuration options for the expandable text
+ * @returns {JSX.Element} The rendered ExpandableText component
+ */
+export default function ListItemStandardExpandableTextTemplate(
+	this: ListItemStandard,
+	injectedProps: ExpandableTextTemplateParams
+): JSX.Element {
+	const {
+		className,
+		text,
+		maxCharacters,
+		part
+	} = injectedProps;
+
+	return (
+		<ExpandableText
+			part={part}
+			class={className}
+			text={text}
+			maxCharacters={maxCharacters}
+		/>
+	);
+}

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -226,6 +226,8 @@ MULTIINPUT_SHOW_MORE_TOKENS=‌‌​​​‍​‍‍​‌‍​‍
 
 MULTIINPUT_VALUE_HELP_LABEL=‍​‍‍‌‍​‍‌​‌​‌‌‌‍‍​​‍​‌‌​‌‌‍​‍‌‍‍‍‍‌​​​‌Show Value Help
 
+MULTIINPUT_VALUE_HELP=‌‌​‍‍‌‍‍​‌‍‌‍‌​​​‍‌‍‌‌​‌‌‌‍‍‍​‍‌​‌‌‌​‍​‍‌Value help available
+
 PANEL_ICON=‍​​‍‌‍​‍‌‍​‍​‍‍​‌‍‍‌‌‍‌‌‌‌​‌‍‍‌‍‍‌​‌‌‍‍​Expand/Collapse
 
 RANGE_SLIDER_ARIA_DESCRIPTION=‌​​​‌‍‍‌​​​‍‍​‍‍‍‍​​‌​​‌‍‌‍‌‌‌​‌‍‌‌‌‌‍‍‍‍Range

package/src/themes/BusyIndicator.css

@@ -91,8 +91,8 @@
 	border-radius: inherit;
 }
 
-:host(:not(:empty)) .ui5-busy-indicator-busy-area {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([active]) ::slotted(*) {
+	opacity: var(--sapContent_DisabledOpacity);	
 }
 
 :host([desktop]) .ui5-busy-indicator-busy-area:focus,

package/src/themes/ListItem.css

@@ -67,7 +67,22 @@
 	object-fit: contain
 }
 
-:host([description]) .ui5-li-root {
+::slotted([ui5-icon][slot="image"]){
+	color: var(--sapContent_NonInteractiveIconColor);
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
+::slotted([ui5-avatar][slot="image"]) {
+	min-width: var(--_ui5_list_item_img_size);
+	min-height: var(--_ui5_list_item_img_size);
+	margin-top: var(--_ui5_list_item_img_top_margin);
+	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
+	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
+}
+
+:host([wrapping-type="None"][description]) .ui5-li-root {
 	padding: 1rem;
 }
 
@@ -119,14 +134,6 @@
 	align-self: flex-end;
 }
 
-.ui5-li-image {
-	min-width: var(--_ui5_list_item_img_size);
-	min-height: var(--_ui5_list_item_img_size);
-	margin-top: var(--_ui5_list_item_img_top_margin);
-	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
-	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
-}
-
 .ui5-li-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
@@ -134,6 +141,10 @@
 	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
 }
 
+:host([icon-end]) .ui5-li-icon {
+	padding-inline-start: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
 .ui5-li-detailbtn,
 .ui5-li-deletebtn {
 	display: flex;
@@ -156,15 +167,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_selection-mode="SingleStart"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleStart"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="Multiple"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
@@ -197,4 +208,65 @@
 
 :host([highlight="Information"]) .ui5-li-highlight {
 	background: var(--sapInformativeTextColor);
-}
+}
+
+/* wrapping */
+:host([wrapping-type="Normal"][description]),
+:host([wrapping-type="Normal"][has-title][description]),
+:host([wrapping-type="Normal"][has-title][image]) {
+	height: auto;
+	min-height: 5rem;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-content,
+:host([wrapping-type="Normal"][image]) .ui5-li-content {
+	height: auto;
+	min-height: 3rem;
+}
+
+:host([wrapping-type="Normal"][has-title][description]) .ui5-li-title {
+	padding-bottom: .75rem;
+}
+
+:host([wrapping-type="Normal"][additional-text]) .ui5-li-additional-text {
+	padding-inline-start: .75rem;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper {
+	flex-direction: column;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper .ui5-li-additional-text {
+	white-space: normal;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"]) .ui5-li-singlesel-radiobtn {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"][description]) .ui5-li-singlesel-radiobtn {
+	margin-top: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-icon,
+:host([wrapping-type="Normal"]) .ui5-li-image {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][icon-end]) .ui5-li-icon {
+	margin-top: var(--_ui5_list_item_content_vertical_offset);
+}
+
+:host([wrapping-type="Normal"]) ::slotted([ui5-avatar][slot="image"]) {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-detailbtn,
+:host([wrapping-type="Normal"]) .ui5-li-deletebtn {
+	margin-inline-start: .875rem;
+}

package/src/themes/Table.css

@@ -54,6 +54,6 @@
     z-index: 2;
 }
 
-#loading[_is-busy] {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
+    opacity: var(--sapContent_DisabledOpacity);
 }

package/src/themes/TableHeaderRow.css

@@ -2,6 +2,7 @@
     background: var(--sapList_HeaderBackground);
     border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
     border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
+    grid-template-rows: auto 0px;
 }
 
 :host([hidden]) {
@@ -17,4 +18,5 @@
 #popin-cell {
     padding: 0;
     width: 0;
+    height: 0;
 }

package/src/themes/TableRow.css

@@ -79,6 +79,10 @@
 	grid-column: 1 / -2;
 }
 
+#selection-cell ~ #popin-cell {
+	grid-column-start: 2;
+}
+
 #actions-cell {
 	display: flex;
 	align-items: center;

package/src/themes/TableRowBase.css

@@ -5,8 +5,6 @@
 	min-height: var(--_ui5_list_item_base_height);
 	box-sizing: border-box;
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-left: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 	overflow: clip;
 }
 
@@ -20,6 +18,17 @@
 	clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
 }
 
+::slotted([ui5-table-cell]:first-of-type),
+::slotted([ui5-table-header-cell]:first-of-type),
+#popin-cell {
+	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
+}
+
+#selection-cell + ::slotted([ui5-table-cell-base]:first-of-type),
+#selection-cell ~ #popin-cell {
+	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
+}
+
 #selection-cell {
 	padding: 0;
 	left: 0;

package/src/themes/TreeItem.css

@@ -46,6 +46,15 @@
 	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
+:host([_has-image]) {
+	height: unset;
+}
+
+::slotted([ui5-avatar][slot="image"]) {
+	min-width: var(--_ui5_avatar_fontsize_XS);
+	min-height: var(--_ui5_avatar_fontsize_XS);
+}
+
 .ui5-li-tree-toggle-box {
 	min-width: var(--_ui5-tree-toggle-box-width);
 	min-height: var(--_ui5-tree-toggle-box-height);

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

@@ -1,5 +1,4 @@
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
-}
+}

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

@@ -2,6 +2,7 @@
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
 	--_ui5_table_navigated_cell_width: 0.25rem;
+	--_ui5_first_table_cell_horizontal_padding: 1rem;
 	--_ui5_table_cell_horizontal_padding: 0.5rem;
 	--_ui5_table_cell_vertical_padding: 0.25rem;
 	--_ui5_table_row_actions_gap: 0.25rem;

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

@@ -88,7 +88,7 @@
 	--_ui5_list_item_base_height: var(--sapElement_LineHeight);
 	--_ui5_list_item_base_padding: 0 1rem;
 	--_ui5_list_item_icon_size: 1.125rem;
-	--_ui5_list_item_icon_padding-inline-end: 0.5rem;
+	--_ui5_list_item_icon_padding-inline-end: 0.75rem;
 	--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
 	--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
 	--_ui5_group_header_list_item_height: 2.75rem;

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -2,7 +2,6 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "./Bar-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

package/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css

@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

package/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css

@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

package/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/BusyIndicator-parameters.css";
-
-:root {
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
-}

package/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/BusyIndicator-parameters.css";
-
-:root {
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
-}