@ui5/webcomponents 2.9.1-rc.0 → 2.10.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.9.1-rc.0",
+  "version": "2.10.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10249,7 +10249,7 @@
         },
         {
           "name": "ui5-tree-item",
-          "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
+          "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **image** - **Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.\n- **deleteButton** - Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
           "doc-url": "",
           "attributes": [
             {
@@ -10345,6 +10345,10 @@
               "name": "default",
               "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`"
             },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit."
+            },
             {
               "name": "deleteButton",
               "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed."
@@ -10450,7 +10454,7 @@
         },
         {
           "name": "ui5-tree-item-custom",
-          "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n- **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **deleteButton** - Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
+          "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n- **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **image** - **Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.\n- **deleteButton** - Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
           "doc-url": "",
           "attributes": [
             {
@@ -10545,6 +10549,10 @@
               "name": "default",
               "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`"
             },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit."
+            },
             {
               "name": "deleteButton",
               "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.9.1-rc.0",
+  "version": "2.10.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.9.1-rc.0",
-    "@ui5/webcomponents-icons": "2.9.1-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.9.1-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.9.1-rc.0",
-    "@ui5/webcomponents-localization": "2.9.1-rc.0",
-    "@ui5/webcomponents-theming": "2.9.1-rc.0"
+    "@ui5/webcomponents-base": "2.10.0-rc.0",
+    "@ui5/webcomponents-icons": "2.10.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.10.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.10.0-rc.0",
+    "@ui5/webcomponents-localization": "2.10.0-rc.0",
+    "@ui5/webcomponents-theming": "2.10.0-rc.0"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.9.1-rc.0",
+    "@ui5/webcomponents-tools": "2.10.0-rc.0",
     "chromedriver": "^135.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "13677147aa78c5fdbc650b671c1794f1aa8f1671"
+  "gitHead": "6f1bf67e35896acdd8b39e8a6f9ad01cac0c58ce"
 }

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/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/ListItem.css

@@ -67,6 +67,21 @@
 	object-fit: contain
 }
 
+::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([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);
@@ -197,4 +204,4 @@
 
 :host([highlight="Information"]) .ui5-li-highlight {
 	background: var(--sapInformativeTextColor);
-}
+}

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);