@ui5/webcomponents 2.2.0-rc.1 → 2.2.0-rc.2

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.2.0-rc.1",
+  "version": "2.2.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2697,7 +2697,7 @@
         },
         {
           "name": "ui5-file-uploader",
-          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **fileSizeExceeded** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -2735,6 +2735,11 @@
               "description": "Defines the name/names of the file/files to upload.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "max-file-size",
+              "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.",
+              "value": { "type": "number | undefined", "default": "undefined" }
+            },
             {
               "name": "value-state",
               "description": "Defines the value state of the component.",
@@ -2763,6 +2768,10 @@
             {
               "name": "change",
               "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed."
+            },
+            {
+              "name": "fileSizeExceeded",
+              "description": "Event is fired when the size of a file is above the `maxFileSize` property value."
             }
           ],
           "js": {
@@ -2802,6 +2811,11 @@
                 "description": "Defines the name/names of the file/files to upload.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "max-file-size",
+                "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.",
+                "value": { "type": "number | undefined" }
+              },
               {
                 "name": "value-state",
                 "description": "Defines the value state of the component.",
@@ -2819,6 +2833,10 @@
               {
                 "name": "change",
                 "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed."
+              },
+              {
+                "name": "fileSizeExceeded",
+                "description": "Event is fired when the size of a file is above the `maxFileSize` property value."
               }
             ]
           }
@@ -7611,7 +7629,7 @@
           "attributes": [
             {
               "name": "sticky",
-              "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height\nor needs to be inside of a container with a defined height for the sticky header to work as expected.",
+              "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -7626,7 +7644,7 @@
             "properties": [
               {
                 "name": "sticky",
-                "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height\nor needs to be inside of a container with a defined height for the sticky header to work as expected.",
+                "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.",
                 "value": { "type": "boolean" }
               }
             ],

package/package.json

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

package/src/TimePickerPopover.hbs

@@ -29,7 +29,7 @@
 	</div>
 </ui5-responsive-popover>
 
-{{#if _isPhone}}
+{{#if _isMobileDevice}}
 <ui5-popover
 	id="{{_id}}-popover"
 	class="ui5-time-picker-inputs-popover"

package/src/themes/Dialog.css

@@ -152,6 +152,7 @@
 
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
+	opacity: var(--_ui5_dialog_block_layer_opacity);
 }
 
 .ui5-block-layer {

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

@@ -9,4 +9,5 @@
 	--_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor);
 	--_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor);
 	--_ui5_dialog_header_state_line_height: 0.0625rem;
+	--_ui5_dialog_block_layer_opacity: 0.2;
 }

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

@@ -1,3 +1,3 @@
 :root {
-	--_ui5_popup_block_layer_background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+	--_ui5_popup_block_layer_background: var(--sapBlockLayer_Background);
 }

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
+	--_ui5_dialog_block_layer_opacity: 0.3;
 }

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
+	--_ui5_dialog_block_layer_opacity: 0.3;
 }

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

@@ -6,4 +6,4 @@
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
-}
+}

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
+	--_ui5_dialog_block_layer_opacity: 0.3;
 }

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

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_dialog_header_state_line_height: 0.125rem;
+	--_ui5_dialog_block_layer_opacity: 0.3;
 }