@ui5/webcomponents 2.1.0 → 2.2.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.1.0",
+  "version": "2.2.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7831,16 +7831,25 @@
         },
         {
           "name": "ui5-text",
-          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
+          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n- **default** - Defines the text of the component.",
           "doc-url": "",
           "attributes": [
             {
               "name": "max-lines",
               "description": "Defines the number of lines the text should wrap before it truncates.",
               "value": { "type": "number", "default": "Infinity" }
+            },
+            {
+              "name": "empty-indicator-mode",
+              "description": "Specifies if an empty indicator should be displayed when there is no text.",
+              "value": { "type": "\"On\" | \"Off\"", "default": "\"Off\"" }
             }
           ],
           "slots": [
+            {
+              "name": "default",
+              "description": "Defines the text of the component."
+            },
             {
               "name": "default",
               "description": "Defines the text of the component."
@@ -7853,6 +7862,11 @@
                 "name": "max-lines",
                 "description": "Defines the number of lines the text should wrap before it truncates.",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "empty-indicator-mode",
+                "description": "Specifies if an empty indicator should be displayed when there is no text.",
+                "value": { "type": "\"On\" | \"Off\"" }
               }
             ],
             "events": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.1.0",
-    "@ui5/webcomponents-icons": "2.1.0",
-    "@ui5/webcomponents-icons-business-suite": "2.1.0",
-    "@ui5/webcomponents-icons-tnt": "2.1.0",
-    "@ui5/webcomponents-localization": "2.1.0",
-    "@ui5/webcomponents-theming": "2.1.0"
+    "@ui5/webcomponents-base": "2.2.0-rc.0",
+    "@ui5/webcomponents-icons": "2.2.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.2.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.2.0-rc.0",
+    "@ui5/webcomponents-localization": "2.2.0-rc.0",
+    "@ui5/webcomponents-theming": "2.2.0-rc.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.1.0",
+    "@ui5/webcomponents-tools": "2.2.0-rc.0",
     "chromedriver": "^126.0.0"
   },
-  "gitHead": "3eecdf86ea2ce8b11a56e6a12adcf46fcb1f7600"
+  "gitHead": "8955aa596143ba93da03d4e6cf2bd547993c59c2"
 }

package/src/Dialog.hbs

@@ -46,11 +46,11 @@
 		</footer>
 	{{/if}}
 	{{#if _showResizeHandle }}
-		<ui5-icon
-			name="resize-corner"
+		<div 
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
-		</ui5-icon>
+			<ui5-icon name="resize-corner"></ui5-icon>
+		</div>
 	{{/if}}
 {{/inline}}
 

package/src/Menu.hbs

@@ -9,6 +9,7 @@
 	prevent-initial-focus
 	hide-arrow
 	allow-target-overlap
+	accessible-name={{acessibleNameText}}
 	@ui5-before-open={{_beforePopoverOpen}}
 	@ui5-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}

package/src/MenuItem.hbs

@@ -52,6 +52,7 @@
 		sub-menu
 		placement={{placement}}
 		vertical-align="Top"
+		accessible-name={{acessibleNameText}}
 		@ui5-before-open={{_beforePopoverOpen}}
 		@ui5-open={{_afterPopoverOpen}}
 		@ui5-before-close={{_beforePopoverClose}}

package/src/SelectPopover.hbs

@@ -73,8 +73,6 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}

package/src/SplitButton.hbs

@@ -32,6 +32,8 @@
 		design="{{design}}"
 		icon="slim-arrow-down"
 		tabindex="-1"
+		tooltip="{{accInfo.arrowButton.title}}"
+		.accessibilityAttributes={{accInfo.arrowButton.accessibilityAttributes}}
 		?disabled="{{disabled}}"
 		?active="{{effectiveActiveArrowButton}}"
 		@click="{{_handleArrowButtonAction}}"
@@ -41,7 +43,7 @@
 		@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 	>
 	</ui5-button>
-	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInfo.root.description}} {{accInfo.root.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 
 </div>

package/src/Text.hbs

@@ -0,0 +1,8 @@
+<span>
+{{#if _renderEmptyIndicator}}
+	<span class="empty-indicator" aria-hidden="true">{{_emptyIndicatorSymbol}}</span>
+	<span class="empty-indicator-aria-label">{{_emptyIndicatorAriaLabel}}</span>
+{{else}}
+	<slot></slot>
+{{/if}}
+</span>

package/src/i18n/messagebundle.properties

@@ -165,6 +165,11 @@ DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date Range
 
 DELETE=Delete
 
+#XFLD: En dash (–) character to indicate that there is an empty space. In some languages there might be a different symbol used.
+EMPTY_INDICATOR_SYMBOL=\u2013
+#XFLD: ARIA announcement for the empty value.
+EMPTY_INDICATOR_ACCESSIBLE_TEXT=Empty value
+
 FILEUPLOAD_BROWSE=Browse...
 
 #XACT: File uploader title
@@ -502,12 +507,18 @@ SPLIT_BUTTON_DESCRIPTION=Split Button
 #XACT: Aria hint for the keyboard handling support of the Split Button
 SPLIT_BUTTON_KEYBOARD_HINT=Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
 
+#XBUT: Tooltip text for 'Arrow' button
+SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP=Open Menu
+
 #XACT: ARIA announcement for the Menu Back button aria-label attribute
 MENU_BACK_BUTTON_ARIA_LABEL=Back
 
 #XACT: ARIA announcement for the Menu Close button aria-label attribute
 MENU_CLOSE_BUTTON_ARIA_LABEL=Decline
 
+#XACT: ARIA information for the Menu popover
+MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the menu
+
 #XTXT: Text for the Navigation Menu Popover hidden text
 NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigation
 

package/src/themes/Dialog.css

@@ -126,10 +126,16 @@
 
 .ui5-popup-resize-handle {
 	position: absolute;
-	bottom: var(--_ui5_dialog_resize_handle_bottom);
-	inset-inline-end: var(--_ui5_dialog_resize_handle_right);
+	bottom: -0.5rem;
+	inset-inline-end: -0.5rem;
 	cursor: var(--_ui5_dialog_resize_cursor);
-	color: var(--_ui5_dialog_resize_handle_color);
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+}
+
+.ui5-popup-resize-handle [ui5-icon] {
+	color: var(--sapButton_Lite_TextColor);
 }
 
 ::slotted([slot="footer"]) {

package/src/themes/Text.css

@@ -13,8 +13,17 @@
 :host([max-lines]) {
 	display: -webkit-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
-	line-clamp: var(--_ui5_text_max_lines); 
+	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	white-space: normal;
 }
+
+.empty-indicator-aria-label {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	user-select: none;
+	left: 0;
+	top: 0;
+	font-size: 0;
+}

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

@@ -1,7 +1,4 @@
 :root {
-	--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
-	--_ui5_dialog_resize_handle_right: -0.25rem;
-	--_ui5_dialog_resize_handle_bottom: -0.0625rem;
 	--_ui5_dialog_header_focus_bottom_offset: 3px;
 	--_ui5_dialog_header_focus_top_offset: 2px;
 	--_ui5_dialog_header_focus_left_offset: 2px;

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

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

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

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_dark_exp/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_exp/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

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

@@ -1,7 +1,5 @@
 @import "../base/Dialog-parameters.css";
 
 :root {
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_state_line_height: 0.125rem;
 }

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

@@ -14,7 +14,6 @@
 @import "./ColorPicker-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
-@import "./Dialog-parameters.css";
 @import "./FileUploader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/ListItemGroupHeader-parameters.css";

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

@@ -1,7 +1,5 @@
 @import "../base/Dialog-parameters.css";
 
 :root {
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_state_line_height: 0.125rem;
 }

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

@@ -14,7 +14,6 @@
 @import "./ColorPicker-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
-@import "./Dialog-parameters.css";
 @import "./FileUploader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/ListItemGroupHeader-parameters.css";

package/tsconfig.json

@@ -1,38 +1,56 @@
 {
-    "include": ["src/**/*", "global.d.ts"],
-    "compilerOptions": {
-      "target": "ES2021",
-      "lib": ["DOM", "DOM.Iterable", "ES2023"],
-      // Generate d.ts files
-      "declaration": true,
-      "outDir": "dist",
-      "skipLibCheck": true,
-      "sourceMap": true,
-      "inlineSources": true,
-      "strict": true,
-      "moduleResolution": "node",
-      "experimentalDecorators": true,
-      "composite": true,
-      "rootDir": "src",
-      "tsBuildInfoFile": "dist/.tsbuildinfo",
-      "importsNotUsedAsValues": "preserve",
-      "ignoreDeprecations": "5.0",
-      // "verbatimModuleSyntax": true,
-      "paths": {
-        "@ui5/webcomponents-base/dist/*": ["../base/src/*"],
-        "@ui5/webcomponents-localization/dist/*": ["../localization/src/*"],
-        "@ui5/webcomponents-theming/dist/*": ["../theming/src/*"],
-        "@ui5/webcomponents-icons/dist/*": ["../icons/src/*"],
-        "@ui5/webcomponents-icons-business-suite/dist/*": ["../icons-business-suite/src/*"],
-        "@ui5/webcomponents-icons-tnt/dist/*": ["../icons-tnt/src/*"]
-      },
-    },
-    "references": [
-      { "path": "../base" },
-      { "path": "../localization" },
-      { "path": "../theming" },
-      { "path": "../icons" },
-      { "path": "../icons-business-suite" },
-      { "path": "../icons-tnt" },
-    ]
-}
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"src/**/*",
+		"global.d.ts"
+	],
+	"compilerOptions": {
+		"outDir": "dist",
+		"experimentalDecorators": true,
+		"composite": true,
+		"rootDir": "src",
+		"tsBuildInfoFile": "dist/.tsbuildinfo",
+		"importsNotUsedAsValues": "preserve",
+		"ignoreDeprecations": "5.0",
+		"paths": {
+			"@ui5/webcomponents-base/dist/*": [
+				"../base/src/*"
+			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../localization/src/*"
+			],
+			"@ui5/webcomponents-theming/dist/*": [
+				"../theming/src/*"
+			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../icons-tnt/src/*"
+			]
+		},
+	},
+	"references": [
+		{
+			"path": "../base"
+		},
+		{
+			"path": "../localization"
+		},
+		{
+			"path": "../theming"
+		},
+		{
+			"path": "../icons"
+		},
+		{
+			"path": "../icons-business-suite"
+		},
+		{
+			"path": "../icons-tnt"
+		},
+	]
+}

package/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css

@@ -1,6 +0,0 @@
-@import "../base/Dialog-parameters.css";
-
-:root {
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
-}

package/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css

@@ -1,6 +0,0 @@
-@import "../base/Dialog-parameters.css";
-
-:root {
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
-}